work in progress icons

This commit is contained in:
Insert5StarName 2023-09-30 21:53:52 +02:00
parent f2e299a7a9
commit 7b179d3a92
251 changed files with 1062 additions and 1062 deletions

View file

@ -10,12 +10,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="channel && tab === 'overview'" class="_gaps">
<div class="_panel" :class="$style.bannerContainer">
<XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/>
<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike class="button" rounded primary :class="$style.favorite" @click="unfavorite()"><i class="ti ti-star"></i></MkButton>
<MkButton v-else v-tooltip="i18n.ts.favorite" asLike class="button" rounded :class="$style.favorite" @click="favorite()"><i class="ti ti-star"></i></MkButton>
<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike class="button" rounded primary :class="$style.favorite" @click="unfavorite()"><i class="ph-star ph-bold pg-lg"></i></MkButton>
<MkButton v-else v-tooltip="i18n.ts.favorite" asLike class="button" rounded :class="$style.favorite" @click="favorite()"><i class="ph-star ph-bold pg-lg"></i></MkButton>
<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" :class="$style.banner">
<div :class="$style.bannerStatus">
<div><i class="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
<div><i class="ti ti-pencil ti-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
<div><i class="ph-users ph-bold pg-lg ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
<div><i class="ph-pencil ph-bold ph-lg ti-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
</div>
<div v-if="channel.isSensitive" :class="$style.sensitiveIndicator">{{ i18n.ts.sensitive }}</div>
<div :class="$style.bannerFade"></div>
@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkFoldableSection>
<template #header><i class="ti ti-pin ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedNotes }}</template>
<template #header><i class="ph-push-pin ph-bold ph-lg ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedNotes }}</template>
<div v-if="channel.pinnedNotes.length > 0" class="_gaps">
<MkNote v-for="note in channel.pinnedNotes" :key="note.id" class="_panel" :note="note"/>
</div>
@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps">
<div>
<MkInput v-model="searchQuery">
<template #prefix><i class="ti ti-search"></i></template>
<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
</MkInput>
<MkButton primary rounded style="margin-top: 8px;" @click="search()">{{ i18n.ts.search }}</MkButton>
</div>
@ -59,7 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.footer">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
<div class="_buttonsCenter">
<MkButton inline rounded primary gradate @click="openPostForm()"><i class="ti ti-pencil"></i> {{ i18n.ts.postToTheChannel }}</MkButton>
<MkButton inline rounded primary gradate @click="openPostForm()"><i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.postToTheChannel }}</MkButton>
</div>
</MkSpacer>
</div>
@ -169,7 +169,7 @@ async function search() {
const headerActions = $computed(() => {
if (channel && channel.userId) {
const share = {
icon: 'ti ti-share',
icon: 'ph-share-network ph-bold pg-lg',
text: i18n.ts.share,
handler: async (): Promise<void> => {
navigator.share({
@ -182,7 +182,7 @@ const headerActions = $computed(() => {
const canEdit = ($i && $i.id === channel.userId) || iAmModerator;
return canEdit ? [share, {
icon: 'ti ti-settings',
icon: 'ph-gear ph-bold pg-lg',
text: i18n.ts.edit,
handler: edit,
}] : [share];
@ -194,24 +194,24 @@ const headerActions = $computed(() => {
const headerTabs = $computed(() => [{
key: 'overview',
title: i18n.ts.overview,
icon: 'ti ti-info-circle',
icon: 'ph-info ph-bold ph-lg',
}, {
key: 'timeline',
title: i18n.ts.timeline,
icon: 'ti ti-home',
icon: 'ph-house ph-bold ph-lg',
}, {
key: 'featured',
title: i18n.ts.featured,
icon: 'ti ti-bolt',
icon: 'ph-lightning ph-bold pg-lg',
}, {
key: 'search',
title: i18n.ts.search,
icon: 'ti ti-search',
icon: 'ph-magnifying-glass ph-bold ph-lg',
}]);
definePageMetadata(computed(() => channel ? {
title: channel.name,
icon: 'ti ti-device-tv',
icon: 'ph-television ph-bold ph-lg',
} : null));
</script>