wip

src/client/components/global/header.vue

@@ -1,10 +1,5 @@
 <template>
-<div class="fdidabkb" :class="{ slim: titleOnly || narrow }" :style="`--height:${height};`" :key="key">
-	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
-		<div class="buttons left" v-if="backButton">
-			<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
-		</div>
-	</transition>
+<div class="fdidabkb" :class="{ slim: titleOnly || narrow }" :style="{ background: bg }">
 	<template v-if="info">
 		<div class="titleContainer" @click="showTabsPopup">
 			<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -43,20 +38,14 @@
 import { defineComponent } from 'vue';
 import { popupMenu } from '@client/os';
 import { url } from '@client/config';
+import * as symbols from '@client/symbols';
+import * as tinycolor from 'tinycolor2';
 
 export default defineComponent({
 	props: {
-		info: {
-			required: true
-		},
 		menu: {
 			required: false
 		},
-		backButton: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
 		closeButton: {
 			type: Boolean,
 			required: false,
@@ -71,9 +60,10 @@ export default defineComponent({
 
 	data() {
 		return {
+			info: null,
+			bg: null,
 			narrow: false,
 			height: 0,
-			key: 0,
 		};
 	},
 
@@ -92,17 +82,16 @@ export default defineComponent({
 		}
 	},
 
-	watch: {
-		info() {
-			this.key++;
-		},
+	created() {
+		this.info = this.$parent[symbols.PAGE_INFO];
+		const bg = tinycolor(this.info.bg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(this.info.bg.slice(4, -1)) : this.info.bg);
+		bg.setAlpha(0.85);
+		this.bg = bg.toRgbString();
 	},
 
 	mounted() {
-		this.height = this.$el.parentElement.offsetHeight + 'px';
 		this.narrow = this.titleOnly || this.$el.parentElement.offsetWidth < 500;
 		new ResizeObserver((entries, observer) => {
-			this.height = this.$el.parentElement.offsetHeight + 'px';
 			this.narrow = this.titleOnly || this.$el.parentElement.offsetWidth < 500;
 		}).observe(this.$el);
 	},
@@ -161,7 +150,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .fdidabkb {
+	position: sticky;
+	top: 0;
+	z-index: 1000;
 	display: flex;
+	-webkit-backdrop-filter: var(--blur, blur(16px));
+	backdrop-filter: var(--blur, blur(16px));
+	--height: 60px;
 
 	&.slim {
 		text-align: center;
@@ -220,6 +215,7 @@ export default defineComponent({
 		text-align: left;
 		font-weight: bold;
 		flex-shrink: 0;
+		margin-left: 16px;
 
 		> .avatar {
 			$size: 32px;

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

@@ -18,7 +18,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';
@@ -29,7 +28,6 @@ import * as os from '@client/os';
 export default defineComponent({
 	components: {
 		MkModal,
-		XHeader,
 	},
 
 	inject: {

src/client/components/page-window.vue

@@ -19,7 +19,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';
@@ -29,7 +28,6 @@ import * as symbols from '@client/symbols';
 export default defineComponent({
 	components: {
 		XWindow,
-		XHeader,
 	},
 
 	inject: {

src/client/pages/notifications.vue

@@ -1,6 +1,9 @@
 <template>
-<div class="clupoqwt" v-size="{ min: [800] }">
-	<XNotifications class="notifications" @before="before" @after="after" page/>
+<div>
+	<MkHeader></MkHeader>
+	<div class="clupoqwt" v-size="{ min: [800] }">
+		<XNotifications class="notifications" @before="before" @after="after"/>
+	</div>
 </div>
 </template>
 
@@ -47,13 +50,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .clupoqwt {
-	&.min-width_800px {
-		background: var(--bg);
-		padding: 32px 0;
+	padding: 16px;
 
+	&.min-width_800px {
 		> .notifications {
 			max-width: 800px;
 			margin: 0 auto;
+			border-radius: var(--radius);
 		}
 	}
 }

src/client/pages/settings/index.vue

@@ -39,6 +39,7 @@
 		</div>
 	</div>
 	<div class="main">
+		<h1 v-if="INFO" style="font-size: 1.3em; margin: 32px 0 0 32px;"><span style="opacity: 0.6;">設定</span> / {{ INFO.title }}</h1>
 		<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
 	</div>
 </div>
@@ -170,6 +171,7 @@ export default defineComponent({
 		const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
 
 		return {
+			INFO,
 			[symbols.PAGE_INFO]: INFO,
 			page,
 			narrow,

src/client/pages/timeline.vue

@@ -1,5 +1,7 @@
 <template>
-<div class="cmuxhskf" v-hotkey.global="keymap" v-size="{ min: [800] }">
+<div>
+	<MkHeader></MkHeader>
+	<div class="cmuxhskf" v-hotkey.global="keymap" 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>
 

src/client/pages/user/index.vue

@@ -1,5 +1,8 @@
 <template>
-<transition name="fade" mode="out-in">
+<div>
+	<MkHeader></MkHeader>
+
+	<transition name="fade" mode="out-in">
 		<div class="ftskorzw wide" v-if="user && narrow === false">
 			<MkRemoteCaution v-if="user.host != null" :href="user.url"/>
 
@@ -186,7 +189,8 @@
 		</div>
 		<MkError v-else-if="error" @retry="fetch()"/>
 		<MkLoading v-else/>
-</transition>
+	</transition>
+</div>
 </template>
 
 <script lang="ts">

src/client/ui/chat/index.vue

@@ -101,7 +101,7 @@ 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 XHeader from '../../components/global/header.vue';
 import XHeaderClock from './header-clock.vue';
 import * as os from '@client/os';
 import { router } from '@client/router';

src/client/ui/chat/side.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XHeader from '../_common_/header.vue';
+import XHeader from '../../components/global/header.vue';
 import * as os from '@client/os';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';

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

@@ -18,7 +18,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';
@@ -26,7 +25,6 @@ import * as symbols from '@client/symbols';
 export default defineComponent({
 	components: {
 		XColumn,
-		XHeader,
 		XNotes
 	},
 

src/client/ui/default.side.vue

@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XHeader from './_common_/header.vue';
+import XHeader from '../components/global/header.vue';
 import * as os from '@client/os';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';

src/client/ui/default.vue

@@ -13,9 +13,6 @@
 		</template>
 
 		<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
-			<header class="header" @click="onHeaderClick">
-				<XHeader :info="pageInfo" :back-button="true" @back="back()"/>
-			</header>
 			<div class="content" :class="{ _flat_: !fullView }">
 				<router-view v-slot="{ Component }">
 					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
@@ -67,7 +64,7 @@ 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 XHeader from '../components/global/header.vue';
 import * as os from '@client/os';
 import { menuDef } from '@client/menu';
 import * as symbols from '@client/symbols';

src/client/ui/universal.vue

@@ -3,9 +3,6 @@
 	<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 :info="pageInfo" :back-button="true" @back="back()"/>
-		</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取得できなくて面倒になる
 	},
@@ -153,7 +148,6 @@ export default defineComponent({
 			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() {
@@ -243,7 +237,6 @@ export default defineComponent({
 }
 
 .mk-app {
-	$header-height: 58px; // TODO: どこかに集約したい
 	$ui-font-size: 1em; // TODO: どこかに集約したい
 	$widgets-hide-threshold: 1090px;
 
@@ -263,37 +256,11 @@ export default defineComponent({
 	> .contents {
 		width: 100%;
 		min-width: 0;
-		--stickyTop: #{$header-height};
-		padding-top: $header-height;
 		background: var(--panel);
 
-		> .header {
-			position: fixed;
-			z-index: 1000;
-			top: 0;
-			height: $header-height;
-			width: 100%;
-			line-height: $header-height;
-			text-align: center;
-			font-weight: bold;
-			//background-color: var(--panel);
-			-webkit-backdrop-filter: var(--blur, blur(32px));
-			backdrop-filter: var(--blur, blur(32px));
-			background-color: var(--header);
-			border-bottom: solid 0.5px var(--divider);
-			user-select: none;
-		}
-
 		> main {
 			min-width: 0;
 
-			> .content {
-				> * {
-					// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-					min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
-				}
-			}
-
 			> .spacer {
 				height: 82px;
 

src/client/ui/zen.vue

@@ -24,7 +24,7 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { host } from '@client/config';
-import XHeader from './_common_/header.vue';
+import XHeader from '../components/global/header.vue';
 import XCommon from './_common_/common.vue';
 import * as symbols from '@client/symbols';