wip

src/client/components/global/header.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="fdidabkb" :class="{ slim: narrow, thin }" :key="key">
+<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }">
 	<template v-if="info">
 		<div class="titleContainer" @click="showTabsPopup">
 			<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -37,6 +37,7 @@
 import { defineComponent } from 'vue';
 import { popupMenu } from '@client/os';
 import { url } from '@client/config';
+import * as tinycolor from 'tinycolor2';
 
 export default defineComponent({
 	props: {
@@ -54,9 +55,9 @@ export default defineComponent({
 
 	data() {
 		return {
+			bg: null,
 			narrow: false,
 			height: 0,
-			key: 0,
 		};
 	},
 
@@ -75,13 +76,12 @@ export default defineComponent({
 		}
 	},
 
-	watch: {
-		info() {
-			this.key++;
-		},
-	},
-
 	mounted() {
+		const rawBg = this.info.bg || 'var(--bg)';
+		const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+		bg.setAlpha(0.85);
+		this.bg = bg.toRgbString();
+	
 		if (this.$el.parentElement == null) return;
 		this.narrow = this.$el.parentElement.offsetWidth < 500;
 		new ResizeObserver((entries, observer) => {
@@ -145,7 +145,12 @@ export default defineComponent({
 .fdidabkb {
 	--height: 60px;
 	display: flex;
+	position: sticky;
+	top: 0;
+	z-index: 1000;
 	width: 100%;
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
 
 	&.thin {
 		--height: 50px;

src/client/components/index.ts

@@ -13,6 +13,7 @@ import i18n from './global/i18n';
 import loading from './global/loading.vue';
 import error from './global/error.vue';
 import ad from './global/ad.vue';
+import header from './global/header.vue';
 
 export default function(app: App) {
 	app.component('I18n', i18n);
@@ -28,4 +29,5 @@ export default function(app: App) {
 	app.component('MkLoading', loading);
 	app.component('MkError', error);
 	app.component('MkAd', ad);
+	app.component('MkHeader', header);
 }

src/client/components/modal-page-window.vue

@@ -11,7 +11,7 @@
 			<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
 		</div>
 		<div class="body _flat_">
-			<XHeader v-if="!pageInfo?.hide" :info="pageInfo"/>
+			<MkHeader v-if="!pageInfo?.hide" :info="pageInfo"/>
 			<keep-alive>
 				<component :is="component" v-bind="props" :ref="changePage"/>
 			</keep-alive>
@@ -23,7 +23,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkModal from '@client/components/ui/modal.vue';
-import XHeader from '@client/ui/_common_/header.vue';
 import { popout } from '@client/scripts/popout';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';
@@ -34,7 +33,6 @@ import * as os from '@client/os';
 export default defineComponent({
 	components: {
 		MkModal,
-		XHeader,
 	},
 
 	inject: {

src/client/components/page-window.vue

@@ -16,7 +16,7 @@
 		<button v-if="history.length > 0" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
 	</template>
 	<div class="yrolvcoq _flat_">
-		<XHeader :info="pageInfo"/>
+		<MkHeader :info="pageInfo"/>
 		<component :is="component" v-bind="props" :ref="changePage"/>
 	</div>
 </XWindow>
@@ -25,7 +25,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XWindow from '@client/components/ui/window.vue';
-import XHeader from '@client/ui/_common_/header.vue';
 import { popout } from '@client/scripts/popout';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';
@@ -35,7 +34,6 @@ import * as symbols from '@client/symbols';
 export default defineComponent({
 	components: {
 		XWindow,
-		XHeader,
 	},
 
 	inject: {

src/client/pages/explore.vue

@@ -1,5 +1,8 @@
 <template>
-<div class="lznhrdub _root">
+<div>
+	<MkHeader :info="header"/>
+
+	<div class="lznhrdub _root">
 		<div>
 			<div class="_isolated">
 				<MkInput v-model="query" :debounce="true" type="search">
@@ -68,6 +71,7 @@
 				</MkFolder>
 			</template>
 		</div>
+	</div>
 </div>
 </template>
 
@@ -100,6 +104,10 @@ export default defineComponent({
 				title: this.$ts.explore,
 				icon: 'fas fa-hashtag'
 			},
+			header: {
+				title: this.$ts.explore,
+				icon: 'fas fa-hashtag'
+			},
 			pinnedUsers: { endpoint: 'pinned-users' },
 			popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
 				state: 'alive',

src/client/pages/instance/index.vue

@@ -79,7 +79,8 @@ export default defineComponent({
 	setup(props, context) {
 		const indexInfo = {
 			title: i18n.locale.instance,
-			icon: 'fas fa-cog'
+			icon: 'fas fa-cog',
+			bg: 'var(--bg)',
 		};
 		const INFO = ref(indexInfo);
 		const page = ref(props.initialPage);

src/client/pages/notifications.vue

@@ -1,6 +1,9 @@
 <template>
-<div class="clupoqwt" v-size="{ min: [800] }">
+<div>
+	<MkHeader :info="header"/>
+	<div class="clupoqwt" v-size="{ min: [800] }">
 		<XNotifications class="notifications" @before="before" @after="after" page/>
+	</div>
 </div>
 </template>
 
@@ -22,6 +25,11 @@ export default defineComponent({
 				title: this.$ts.notifications,
 				icon: 'fas fa-bell',
 				bg: 'var(--bg)',
+			},
+			header: {
+				title: this.$ts.notifications,
+				icon: 'fas fa-bell',
+				bg: 'var(--bg)',
 				actions: [{
 					text: this.$ts.markAllAsRead,
 					icon: 'fas fa-check',

src/client/pages/settings/index.vue

@@ -39,7 +39,7 @@
 		</div>
 	</div>
 	<div class="main">
-		<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
+		<component :is="component" :key="page" v-bind="pageProps"/>
 	</div>
 </div>
 </template>
@@ -74,16 +74,13 @@ export default defineComponent({
 			title: i18n.locale.settings,
 			icon: 'fas fa-cog',
 			bg: 'var(--bg)',
-			hide: true,
 		};
 		const INFO = ref(indexInfo);
 		const page = ref(props.initialPage);
 		const narrow = ref(false);
 		const view = ref(null);
 		const el = ref(null);
-		const onInfo = (viewInfo) => {
-			INFO.value = viewInfo;
-		};
+
 		const pageProps = ref({});
 		const component = computed(() => {
 			if (page.value == null) return null;
@@ -176,7 +173,6 @@ export default defineComponent({
 			narrow,
 			view,
 			el,
-			onInfo,
 			pageProps,
 			component,
 			emailNotConfigured,

src/client/pages/settings/profile.vue

@@ -78,7 +78,6 @@ export default defineComponent({
 				title: this.$ts.profile,
 				icon: 'fas fa-user',
 				bg: 'var(--bg)',
-				hide: true,
 			},
 			host,
 			langs,

src/client/pages/timeline.vue

@@ -1,5 +1,7 @@
 <template>
-<div class="cmuxhskf" v-hotkey.global="keymap" v-size="{ min: [800] }">
+<div v-hotkey.global="keymap">
+	<MkHeader :info="header"/>
+	<div class="cmuxhskf" v-size="{ min: [800] }">
 		<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
 		<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
 
@@ -14,6 +16,7 @@
 				@queue="queueUpdated"
 			/>
 		</div>
+	</div>
 </div>
 </template>
 
@@ -43,6 +46,11 @@ export default defineComponent({
 				title: this.$ts.timeline,
 				icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
 				bg: 'var(--bg)',
+			})),
+			header: computed(() => ({
+				title: this.$ts.timeline,
+				icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
+				bg: 'var(--bg)',
 				actions: [{
 					icon: 'fas fa-list-ul',
 					text: this.$ts.lists,

src/client/ui/chat/index.vue

@@ -74,7 +74,7 @@
 
 	<main class="main" @contextmenu.stop="onContextmenu">
 		<header class="header">
-			<XHeader class="header" :info="pageInfo" :menu="menu" :center="false" @click="onHeaderClick"/>
+			<MkHeader class="header" :info="pageInfo" :menu="menu" :center="false" @click="onHeaderClick"/>
 		</header>
 		<router-view v-slot="{ Component }">
 			<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
@@ -101,7 +101,6 @@ import XSidebar from '@client/ui/_common_/sidebar.vue';
 import XWidgets from './widgets.vue';
 import XCommon from '../_common_/common.vue';
 import XSide from './side.vue';
-import XHeader from '../_common_/header.vue';
 import XHeaderClock from './header-clock.vue';
 import * as os from '@client/os';
 import { router } from '@client/router';
@@ -117,7 +116,6 @@ export default defineComponent({
 		XSidebar,
 		XWidgets,
 		XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
-		XHeader,
 		XHeaderClock,
 	},
 

src/client/ui/chat/side.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mrajymqm _narrow_" v-if="component">
 	<header class="header" @contextmenu.prevent.stop="onContextmenu">
-		<XHeader class="title" :info="pageInfo" :center="false"/>
+		<MkHeader class="title" :info="pageInfo" :center="false"/>
 	</header>
 	<component :is="component" v-bind="props" :ref="changePage" class="body _flat_"/>
 </div>
@@ -9,7 +9,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XHeader from '../_common_/header.vue';
 import * as os from '@client/os';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';
@@ -18,7 +17,6 @@ import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
-		XHeader
 	},
 
 	provide() {

src/client/ui/deck/main-column.vue

@@ -6,7 +6,7 @@
 		</template>
 	</template>
 
-	<XHeader :info="pageInfo"/>
+	<MkHeader :info="pageInfo"/>
 	<router-view v-slot="{ Component }" class="_flat_">
 		<transition>
 			<keep-alive :include="['timeline']">
@@ -21,7 +21,6 @@
 import { defineComponent } from 'vue';
 import XColumn from './column.vue';
 import XNotes from '@client/components/notes.vue';
-import XHeader from '@client/ui/_common_/header.vue';
 import { deckStore } from '@client/ui/deck/deck-store';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
@@ -29,7 +28,6 @@ import * as symbols from '@client/symbols';
 export default defineComponent({
 	components: {
 		XColumn,
-		XHeader,
 		XNotes
 	},
 

src/client/ui/default.side.vue

@@ -7,7 +7,7 @@
 			<span class="title">{{ pageInfo.title }}</span>
 			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
 		</header>
-		<XHeader class="pageHeader" :info="pageInfo"/>
+		<MkHeader class="pageHeader" :info="pageInfo"/>
 		<component :is="component" v-bind="props" :ref="changePage"/>
 	</div>
 </div>
@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XHeader from './_common_/header.vue';
 import * as os from '@client/os';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';
@@ -23,10 +22,6 @@ import { url } from '@client/config';
 import * as symbols from '@client/symbols';
 
 export default defineComponent({
-	components: {
-		XHeader
-	},
-
 	provide() {
 		return {
 			navHook: (path) => {

src/client/ui/default.vue

@@ -14,7 +14,7 @@
 
 		<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
 			<header class="header" @click="onHeaderClick">
-				<XHeader :info="pageInfo" v-get-size="(w, h) => headerHeight = h" :thin="true"/>
+				<MkHeader :info="pageInfo" v-get-size="(w, h) => headerHeight = h" :thin="true"/>
 			</header>
 			<div class="content" :class="{ _flat_: !fullView }">
 				<router-view v-slot="{ Component }">
@@ -67,7 +67,6 @@ import { StickySidebar } from '@client/scripts/sticky-sidebar';
 import XSidebar from './default.sidebar.vue';
 import XDrawerSidebar from '@client/ui/_common_/sidebar.vue';
 import XCommon from './_common_/common.vue';
-import XHeader from './_common_/header.vue';
 import * as os from '@client/os';
 import { menuDef } from '@client/menu';
 import * as symbols from '@client/symbols';
@@ -80,7 +79,6 @@ export default defineComponent({
 		XCommon,
 		XSidebar,
 		XDrawerSidebar,
-		XHeader,
 		XHeaderMenu: defineAsyncComponent(() => import('./default.header.vue')),
 		XWidgets: defineAsyncComponent(() => import('./default.widgets.vue')),
 	},

src/client/ui/universal.vue

@@ -1,11 +1,8 @@
 <template>
-<div class="mk-app" :class="{ wallpaper }" :style="`--headerHeight:` + headerHeight + 'px'">
+<div class="mk-app" :class="{ wallpaper }">
 	<XSidebar ref="nav" class="sidebar"/>
 
 	<div class="contents" ref="contents" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
-		<header class="header" ref="header" @click="onHeaderClick" :style="{ background: pageInfo?.bg }">
-			<XHeader v-if="!pageInfo?.hide" :info="pageInfo" v-get-size="(w, h) => headerHeight = h"/>
-		</header>
 		<main ref="main">
 			<div class="content">
 				<router-view v-slot="{ Component }">
@@ -58,7 +55,6 @@ import { instanceName } from '@client/config';
 import { StickySidebar } from '@client/scripts/sticky-sidebar';
 import XSidebar from '@client/ui/_common_/sidebar.vue';
 import XCommon from './_common_/common.vue';
-import XHeader from './_common_/header.vue';
 import XSide from './default.side.vue';
 import * as os from '@client/os';
 import { menuDef } from '@client/menu';
@@ -70,7 +66,6 @@ export default defineComponent({
 	components: {
 		XCommon,
 		XSidebar,
-		XHeader,
 		XWidgets: defineAsyncComponent(() => import('./universal.widgets.vue')),
 		XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
 	},
@@ -86,7 +81,6 @@ export default defineComponent({
 	data() {
 		return {
 			pageInfo: null,
-			headerHeight: 0,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 			menuDef: menuDef,
 			navHidden: false,
@@ -152,9 +146,6 @@ export default defineComponent({
 		adjustUI() {
 			const navWidth = this.$refs.nav.$el.offsetWidth;
 			this.navHidden = navWidth === 0;
-			if (this.$refs.contents == null) return;
-			const width = this.$refs.contents.offsetWidth;
-			if (this.$refs.header) this.$refs.header.style.width = `${width}px`;
 		},
 
 		showNav() {
@@ -184,10 +175,6 @@ export default defineComponent({
 			if (window._scroll) window._scroll();
 		},
 
-		onHeaderClick() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
 		onContextmenu(e) {
 			const isLink = (el: HTMLElement) => {
 				if (el.tagName === 'A') return true;
@@ -263,8 +250,6 @@ export default defineComponent({
 	> .contents {
 		width: 100%;
 		min-width: 0;
-		--stickyTop: var(--headerHeight);
-		padding-top: var(--headerHeight);
 		background: var(--panel);
 
 		> .header {

src/client/ui/zen.vue

@@ -2,7 +2,7 @@
 <div class="mk-app">
 	<div class="contents">
 		<header class="header">
-			<XHeader :info="pageInfo"/>
+			<MkHeader :info="pageInfo"/>
 		</header>
 		<main ref="main">
 			<div class="content">
@@ -24,14 +24,12 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { host } from '@client/config';
-import XHeader from './_common_/header.vue';
 import XCommon from './_common_/common.vue';
 import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
 		XCommon,
-		XHeader,
 	},
 
 	data() {