SWREI/switched
0
0
Fork 0
Code

feat: show header with current user avatar on TL (#9051)

Browse Source 
* 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;`
This commit is contained in:
あずき⪥™ 2022-08-13 17:41:17 +09:00 committed by GitHub
parent 8a09de6b28
commit c97dc7fe93
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/client/src/components/global/page-header.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick"> <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"> <template v-if="metadata">
<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup"> <div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
<MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/> <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 { i18n } from '@/i18n';
import { globalEvents } from '@/events'; import { globalEvents } from '@/events';
import { injectPageMetadata } from '@/scripts/page-metadata'; import { injectPageMetadata } from '@/scripts/page-metadata';
import { $i } from '@/account';
type Tab = { type Tab = {
key?: string | null; key?: string | null;
@ -59,6 +63,7 @@ const props = defineProps<{
handler: (ev: MouseEvent) => void; handler: (ev: MouseEvent) => void;
}[]; }[];
thin?: boolean; thin?: boolean;
displayMyAvatar?: boolean;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
@ -197,7 +202,6 @@ onUnmounted(() => {
> .titleContainer { > .titleContainer {
flex: 1; flex: 1;
margin: 0 auto; margin: 0 auto;
margin-left: var(--height);
> *:first-child { > *:first-child {
margin-left: auto; margin-left: auto;
@ -213,9 +217,24 @@ onUnmounted(() => {
--margin: 8px; --margin: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
min-width: var(--height);
height: var(--height); height: var(--height);
margin: 0 var(--margin); 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 { &.right {
margin-left: auto; margin-left: auto;
} }

2
packages/client/src/pages/timeline.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<MkStickyContainer> <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"> <MkSpacer :content-max="800">
<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf"> <div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>