mirror of
https://github.com/misskey-dev/misskey.git
synced 2025-01-30 03:52:15 +09:00
MkPageHeader大改造
This commit is contained in:
parent
7b29e36d64
commit
e396a53027
@ -1,37 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="show" ref="el" :class="[$style.root, { [$style.slim]: narrow, [$style.thin]: thin_ }]" :style="{ background: bg }" @click="onClick">
|
<div v-if="show" ref="el" :class="[$style.root]" :style="{ background: bg }">
|
||||||
<div v-if="narrow" :class="$style.buttonsLeft">
|
<div :class="[$style.upper, { [$style.slim]: narrow, [$style.thin]: thin_ }]" @click="onClick">
|
||||||
<MkAvatar v-if="props.displayMyAvatar && $i" :class="$style.avatar" :user="$i"/>
|
<div v-if="narrow" :class="$style.buttonsLeft">
|
||||||
</div>
|
<MkAvatar v-if="props.displayMyAvatar && $i" :class="$style.avatar" :user="$i" :link="true"/>
|
||||||
<template v-if="metadata">
|
</div>
|
||||||
<div v-if="!hideTitle" :class="$style.titleContainer" @click="showTabsPopup">
|
<template v-if="metadata">
|
||||||
<MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
|
<div v-if="!hideTitle" :class="$style.titleContainer" @click="showTabsPopup">
|
||||||
<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i>
|
<MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
|
||||||
|
<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i>
|
||||||
|
|
||||||
<div :class="$style.title">
|
<div :class="$style.title">
|
||||||
<MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true"/>
|
<MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true"/>
|
||||||
<div v-else-if="metadata.title">{{ metadata.title }}</div>
|
<div v-else-if="metadata.title">{{ metadata.title }}</div>
|
||||||
<div v-if="!narrow && metadata.subtitle" :class="$style.subtitle">
|
<div v-if="metadata.subtitle" :class="$style.subtitle">
|
||||||
{{ metadata.subtitle }}
|
{{ metadata.subtitle }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="narrow && hasTabs" :class="[$style.subtitle, $style.activeTab]">
|
|
||||||
{{ tabs.find(tab => tab.key === props.tab)?.title }}
|
|
||||||
<i class="ti ti-chevron-down" :class="$style.chevron"></i>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="!narrow || hideTitle" :class="$style.tabs">
|
||||||
|
<div ref="tabHighlightEl" :class="$style.tabHighlight"></div>
|
||||||
|
<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
|
||||||
|
<i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i>
|
||||||
|
<span v-if="!tab.iconOnly" :class="$style.tabTitle">{{ tab.title }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div v-if="narrow || (actions && actions.length > 0)" :class="$style.buttonsRight">
|
||||||
|
<template v-for="action in actions">
|
||||||
|
<button v-tooltip.noDelay="action.text" class="_button" :class="[$style.button, { [$style.highlighted]: action.highlighted }]" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!narrow || hideTitle" :class="$style.tabs">
|
</div>
|
||||||
|
<div v-if="narrow && hasTabs" :class="$style.lower">
|
||||||
|
<div :class="$style.tabs">
|
||||||
<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
|
<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
|
||||||
<i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i>
|
<i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i>
|
||||||
<span v-if="!tab.iconOnly" :class="$style.tabTitle">{{ tab.title }}</span>
|
<span v-if="!tab.iconOnly" :class="$style.tabTitle">{{ tab.title }}</span>
|
||||||
</button>
|
</button>
|
||||||
<div ref="tabHighlightEl" :class="$style.tabHighlight"></div>
|
<div ref="tabHighlightEl" :class="$style.tabHighlight"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
<div :class="$style.buttonsRight">
|
|
||||||
<template v-for="action in actions">
|
|
||||||
<button v-tooltip.noDelay="action.text" class="_button" :class="[$style.button, { [$style.highlighted]: action.highlighted }]" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -154,7 +161,7 @@ onMounted(() => {
|
|||||||
const parentRect = tabEl.parentElement.getBoundingClientRect();
|
const parentRect = tabEl.parentElement.getBoundingClientRect();
|
||||||
const rect = tabEl.getBoundingClientRect();
|
const rect = tabEl.getBoundingClientRect();
|
||||||
tabHighlightEl.style.width = rect.width + 'px';
|
tabHighlightEl.style.width = rect.width + 'px';
|
||||||
tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px';
|
tabHighlightEl.style.left = (rect.left - parentRect.left + tabEl.parentElement.scrollLeft) + 'px';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, {
|
}, {
|
||||||
@ -180,15 +187,28 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
.root {
|
.root {
|
||||||
--height: 50px;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||||
backdrop-filter: var(--blur, blur(15px));
|
backdrop-filter: var(--blur, blur(15px));
|
||||||
border-bottom: solid 0.5px var(--divider);
|
border-bottom: solid 0.5px var(--divider);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upper,
|
||||||
|
.lower {
|
||||||
|
width: 100%;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upper {
|
||||||
|
--height: 50px;
|
||||||
|
display: flex;
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
&.thin {
|
&.thin {
|
||||||
--height: 42px;
|
--height: 42px;
|
||||||
|
|
||||||
@ -205,6 +225,7 @@ onUnmounted(() => {
|
|||||||
> .titleContainer {
|
> .titleContainer {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
> *:first-child {
|
> *:first-child {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
@ -217,6 +238,11 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lower {
|
||||||
|
--height: 40px;
|
||||||
|
height: var(--height);
|
||||||
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
--margin: 8px;
|
--margin: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -278,7 +304,7 @@ onUnmounted(() => {
|
|||||||
.titleContainer {
|
.titleContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
max-width: 400px;
|
max-width: min(30vw, 400px);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@ -330,15 +356,19 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: 16px;
|
margin: 0;
|
||||||
|
height: var(--height);
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
scrollbar-width: thin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
display: inline-block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
Loading…
Reference in New Issue
Block a user