usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

header avatar clickable

This commit is contained in:
tamaina 2023-02-10 21:23:24 +00:00
parent 72792a949c
commit b240492fb1
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/frontend/src/components/global/MkPageHeader.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<div v-if="show" ref="el" :class="[$style.root]" :style="{ background: bg }"> <div v-if="show" ref="el" :class="[$style.root]" :style="{ background: bg }">
<div :class="[$style.upper, { [$style.slim]: narrow, [$style.thin]: thin_ }]"> <div :class="[$style.upper, { [$style.slim]: narrow, [$style.thin]: thin_ }]">
<div v-if="narrow && (props.displayMyAvatar || !hideTitle)" :class="$style.buttonsLeft"> <div v-if="narrow && props.displayMyAvatar && $i" class="_button" :class="$style.buttonsLeft" @click="openAccountMenu">
<MkAvatar v-if="props.displayMyAvatar && $i" :class="$style.avatar" :user="$i" :link="true" /> <MkAvatar :class="$style.avatar" :user="$i" />
</div> </div>
<div v-else-if="narrow && !hideTitle" :class="$style.buttonsLeft" />
<template v-if="metadata"> <template v-if="metadata">
<div v-if="!hideTitle" :class="$style.titleContainer"> <div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
<MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" indicator/> <MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i> <i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i>
@ -65,7 +67,7 @@ import tinycolor from 'tinycolor2';
import { scrollToTop } from '@/scripts/scroll'; import { scrollToTop } from '@/scripts/scroll';
import { globalEvents } from '@/events'; import { globalEvents } from '@/events';
import { injectPageMetadata } from '@/scripts/page-metadata'; import { injectPageMetadata } from '@/scripts/page-metadata';
import { $i } from '@/account'; import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
type Tab = { type Tab = {
key: string; key: string;
@ -120,6 +122,12 @@ const top = () => {
} }
}; };
function openAccountMenu(ev: MouseEvent) {
openAccountMenu_({
withExtraOperation: true,
}, ev);
}
function onTabMousedown(tab: Tab, ev: MouseEvent): void { function onTabMousedown(tab: Tab, ev: MouseEvent): void {
// ユーザビリティの観点からmousedown時にはonClickは呼ばない // ユーザビリティの観点からmousedown時にはonClickは呼ばない
if (tab.key) { if (tab.key) {
@ -330,7 +338,6 @@ onUnmounted(() => {
height: $size; height: $size;
vertical-align: bottom; vertical-align: bottom;
margin: 0 8px; margin: 0 8px;
pointer-events: none;
} }
.button { .button {