diff options
| author | あずき⪥™ <44765629+melt-adzuki@users.noreply.github.com> | 2022-08-13 17:41:17 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-08-13 17:41:17 +0900 |
| commit | c97dc7fe933f62615984dc1e1f00d89358964460 (patch) | |
| tree | 19196087fb63a60da02a85e19aa1e9d6a85bd508 /packages/client | |
| parent | Add following badge to user preview popup (#9048) (diff) | |
| download | misskey-c97dc7fe933f62615984dc1e1f00d89358964460.tar.gz misskey-c97dc7fe933f62615984dc1e1f00d89358964460.tar.bz2 misskey-c97dc7fe933f62615984dc1e1f00d89358964460.zip | |
feat: show header with current user avatar on TL (#9051)
* feat: show header with current user avatar on TL
* refactor(client): use displayMyAvatar prop instead of metadata
* refactor(client): prefer v-if to `display: none;`
Diffstat (limited to 'packages/client')
| -rw-r--r-- | packages/client/src/components/global/page-header.vue | 21 | ||||
| -rw-r--r-- | packages/client/src/pages/timeline.vue | 2 |
2 files changed, 21 insertions, 2 deletions
diff --git a/packages/client/src/components/global/page-header.vue b/packages/client/src/components/global/page-header.vue index 106e216b9b..ba75b2446b 100644 --- a/packages/client/src/components/global/page-header.vue +++ b/packages/client/src/components/global/page-header.vue @@ -1,5 +1,8 @@ <template> <div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick"> + <div v-if="narrow" class="buttons left"> + <MkAvatar v-if="props.displayMyAvatar && $i" class="avatar" :user="$i" :disable-preview="true"/> + </div> <template v-if="metadata"> <div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup"> <MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/> @@ -41,6 +44,7 @@ import { scrollToTop } from '@/scripts/scroll'; import { i18n } from '@/i18n'; import { globalEvents } from '@/events'; import { injectPageMetadata } from '@/scripts/page-metadata'; +import { $i } from '@/account'; type Tab = { key?: string | null; @@ -59,6 +63,7 @@ const props = defineProps<{ handler: (ev: MouseEvent) => void; }[]; thin?: boolean; + displayMyAvatar?: boolean; }>(); const emit = defineEmits<{ @@ -197,7 +202,6 @@ onUnmounted(() => { > .titleContainer { flex: 1; margin: 0 auto; - margin-left: var(--height); > *:first-child { margin-left: auto; @@ -213,9 +217,24 @@ onUnmounted(() => { --margin: 8px; display: flex; align-items: center; + min-width: var(--height); height: var(--height); margin: 0 var(--margin); + &.left { + margin-right: auto; + + > .avatar { + $size: 32px; + display: inline-block; + width: $size; + height: $size; + vertical-align: bottom; + margin: 0 8px; + pointer-events: none; + } + } + &.right { margin-left: auto; } diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue index f62ab95b5b..1c62964a5f 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -1,6 +1,6 @@ <template> <MkStickyContainer> - <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs"/></template> + <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template> <MkSpacer :content-max="800"> <div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf"> <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> |