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;`
This commit is contained in:
parent
8a09de6b28
commit
c97dc7fe93
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"/>
|
||||||
|
|
Loading…
Reference in New Issue