tweak ui

8 files changed, 9 insertions, 382 deletions

diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
deleted file mode 100644
index ca3d47dc76..0000000000
--- a/src/client/ui/_common_/header.vue
+++ /dev/null
@@ -1,295 +0,0 @@
-<template>
-<div class="fdidabkb" :class="{ slim: narrow, thin }" :key="key">
-	<template v-if="info">
-		<div class="titleContainer" @click="showTabsPopup">
-			<i v-if="info.icon" class="icon" :class="info.icon"></i>
-			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
-
-			<div class="title">
-				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
-				<div v-else-if="info.title" class="title">{{ info.title }}</div>
-				<div class="subtitle" v-if="!narrow && info.subtitle">
-					{{ info.subtitle }}
-				</div>
-				<div class="subtitle activeTab" v-if="narrow && hasTabs">
-					{{ info.tabs.find(tab => tab.active)?.title }}
-					<i class="chevron fas fa-chevron-down"></i>
-				</div>
-			</div>
-		</div>
-		<div class="tabs" v-if="!narrow">
-			<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
-				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
-			</button>
-		</div>
-	</template>
-	<div class="buttons right">
-		<template v-if="info && info.actions && !narrow">
-			<button v-for="action in info.actions" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
-		</template>
-		<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { popupMenu } from '@client/os';
-import { url } from '@client/config';
-
-export default defineComponent({
-	props: {
-		info: {
-			required: true
-		},
-		menu: {
-			required: false
-		},
-		thin: {
-			required: false,
-			default: false
-		},
-	},
-
-	data() {
-		return {
-			narrow: false,
-			height: 0,
-			key: 0,
-		};
-	},
-
-	computed: {
-		hasTabs(): boolean {
-			return this.info.tabs && this.info.tabs.length > 0;
-		},
-
-		shouldShowMenu() {
-			if (this.info == null) return false;
-			if (this.info.actions != null && this.narrow) return true;
-			if (this.info.menu != null) return true;
-			if (this.info.share != null) return true;
-			if (this.menu != null) return true;
-			return false;
-		}
-	},
-
-	watch: {
-		info() {
-			this.key++;
-		},
-	},
-
-	mounted() {
-		if (this.$el.parentElement == null) return;
-		this.narrow = this.$el.parentElement.offsetWidth < 500;
-		new ResizeObserver((entries, observer) => {
-			this.narrow = this.$el.parentElement.offsetWidth < 500;
-		}).observe(this.$el.parentElement);
-	},
-
-	methods: {
-		share() {
-			navigator.share({
-				url: url + this.info.path,
-				...this.info.share,
-			});
-		},
-
-		showMenu(ev) {
-			let menu = this.info.menu ? this.info.menu() : [];
-			if (this.narrow && this.info.actions) {
-				menu = [...this.info.actions.map(x => ({
-					text: x.text,
-					icon: x.icon,
-					action: x.handler
-				})), menu.length > 0 ? null : undefined, ...menu];
-			}
-			if (this.info.share) {
-				if (menu.length > 0) menu.push(null);
-				menu.push({
-					text: this.$ts.share,
-					icon: 'fas fa-share-alt',
-					action: this.share
-				});
-			}
-			if (this.menu) {
-				if (menu.length > 0) menu.push(null);
-				menu = menu.concat(this.menu);
-			}
-			popupMenu(menu, ev.currentTarget || ev.target);
-		},
-
-		showTabsPopup(ev) {
-			if (!this.hasTabs) return;
-			if (!this.narrow) return;
-			ev.preventDefault();
-			ev.stopPropagation();
-			const menu = this.info.tabs.map(tab => ({
-				text: tab.title,
-				icon: tab.icon,
-				action: tab.onClick,
-			}));
-			popupMenu(menu, ev.currentTarget || ev.target);
-		},
-
-		preventDrag(ev) {
-			ev.stopPropagation();
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.fdidabkb {
-	--height: 60px;
-	display: flex;
-	width: 100%;
-
-	&.thin {
-		--height: 50px;
-	}
-
-	&.slim {
-		text-align: center;
-
-		> .titleContainer {
-			margin: 0 auto;
-		}
-
-		> .buttons {
-			&.right {
-				margin-left: 0;
-			}
-		}
-	}
-
-	> .buttons {
-		--margin: 8px;
-		display: flex;
-    align-items: center;
-		height: var(--height);
-		margin: 0 var(--margin);
-
-		&.right {
-			margin-left: auto;
-		}
-
-		&:empty {
-			width: var(--height);
-		}
-
-		> .button {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			height: calc(var(--height) - (var(--margin) * 2));
-			width: calc(var(--height) - (var(--margin) * 2));
-			box-sizing: border-box;
-			position: relative;
-			border-radius: 5px;
-
-			&:hover {
-				background: rgba(0, 0, 0, 0.05);
-			}
-
-			&.highlighted {
-				color: var(--accent);
-			}
-		}
-	}
-
-	> .titleContainer {
-		display: flex;
-		align-items: center;
-		overflow: auto;
-		white-space: nowrap;
-		text-align: left;
-		font-weight: bold;
-		flex-shrink: 0;
-		margin-left: 24px;
-
-		> .avatar {
-			$size: 32px;
-			display: inline-block;
-			width: $size;
-			height: $size;
-			vertical-align: bottom;
-			margin: 0 8px;
-			pointer-events: none;
-		}
-
-		> .icon {
-			margin-right: 8px;
-		}
-
-		> .title {
-			min-width: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			line-height: 1.1;
-
-			> .subtitle {
-				opacity: 0.6;
-				font-size: 0.8em;
-				font-weight: normal;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-
-				&.activeTab {
-					text-align: center;
-
-					> .chevron {
-						display: inline-block;
-						margin-left: 6px;
-					}
-				}
-			}
-		}
-	}
-
-	> .tabs {
-		margin-left: 16px;
-		font-size: 0.8em;
-		overflow: auto;
-		white-space: nowrap;
-
-		> .tab {
-			display: inline-block;
-			position: relative;
-			padding: 0 10px;
-			height: 100%;
-			font-weight: normal;
-			opacity: 0.7;
-
-			&:hover {
-				opacity: 1;
-			}
-
-			&.active {
-				opacity: 1;
-
-				&:after {
-					content: "";
-					display: block;
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					right: 0;
-					margin: 0 auto;
-					width: 100%;
-					height: 3px;
-					background: var(--accent);
-				}
-			}
-
-			> .icon + .title {
-				margin-left: 8px;
-			}
-		}
-	}
-}
-</style>
diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue
index 7090c9486a..4194a9919f 100644
--- a/src/client/ui/chat/index.vue
+++ b/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,
 	},
 
diff --git a/src/client/ui/chat/side.vue b/src/client/ui/chat/side.vue
index 3e8904596d..d920e5b77c 100644
--- a/src/client/ui/chat/side.vue
+++ b/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() {
diff --git a/src/client/ui/deck/main-column.vue b/src/client/ui/deck/main-column.vue
index 42d963cda6..4c1fa255a6 100644
--- a/src/client/ui/deck/main-column.vue
+++ b/src/client/ui/deck/main-column.vue
@@ -6,7 +6,6 @@
 		</template>
 	</template>
 
-	<XHeader :info="pageInfo"/>
 	<router-view v-slot="{ Component }" class="_flat_">
 		<transition>
 			<keep-alive :include="['timeline']">
@@ -21,7 +20,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 +27,6 @@ import * as symbols from '@client/symbols';
 export default defineComponent({
 	components: {
 		XColumn,
-		XHeader,
 		XNotes
 	},
 
diff --git a/src/client/ui/default.side.vue b/src/client/ui/default.side.vue
index c453781e80..c7d2abff26 100644
--- a/src/client/ui/default.side.vue
+++ b/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) => {
diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue
index 4ceb3e1650..6fc8cba3c9 100644
--- a/src/client/ui/default.vue
+++ b/src/client/ui/default.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--headerHeight:` + headerHeight + 'px'">
-	<XHeaderMenu v-if="showMenuOnTop"/>
+<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
+	<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
 
 	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
 		<template v-if="!isMobile">
@@ -13,9 +13,6 @@
 		</template>
 
 		<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"/>
-			</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,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 +76,6 @@ export default defineComponent({
 		XCommon,
 		XSidebar,
 		XDrawerSidebar,
-		XHeader,
 		XHeaderMenu: defineAsyncComponent(() => import('./default.header.vue')),
 		XWidgets: defineAsyncComponent(() => import('./default.widgets.vue')),
 	},
@@ -88,8 +83,8 @@ export default defineComponent({
 	data() {
 		return {
 			pageInfo: null,
-			headerHeight: 0,
 			menuDef: menuDef,
+			globalHeaderHeight: 0,
 			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 			widgetsShowing: false,
@@ -194,10 +189,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;
@@ -282,10 +273,6 @@ export default defineComponent({
 				border: none;
 				width: 100%;
 				border-radius: 0;
-
-				> .header {
-					width: 100%;
-				}
 			}
 		}
 	}
@@ -325,29 +312,6 @@ export default defineComponent({
 			border-radius: 0;
 			overflow: clip;
 			--margin: 12px;
-
-			> .header {
-				position: sticky;
-				z-index: 1000;
-				top: var(--globalHeaderHeight, 0px);
-				-webkit-backdrop-filter: var(--blur, blur(32px));
-				backdrop-filter: var(--blur, blur(32px));
-				background-color: var(--header);
-				border-bottom: solid 0.5px var(--divider);
-			}
-
-			> .content {
-				--stickyTop: calc(var(--globalHeaderHeight, 0px) + var(--headerHeight));
-			}
-
-			@media (max-width: 850px) {
-				padding-top: var(--headerHeight);
-
-				> .header {
-					position: fixed;
-					width: calc(100% - #{$nav-icon-only-width});
-				}
-			}
 		}
 
 		> .widgets {
@@ -369,12 +333,11 @@ export default defineComponent({
 		}
 
 		&.withGlobalHeader {
-			--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
-
 			> .main {
 				margin-top: 0;
 				border: solid 1px var(--divider);
 				border-radius: var(--radius);
+				--stickyTop: var(--globalHeaderHeight);
 			}
 
 			> .widgets {
diff --git a/src/client/ui/universal.vue b/src/client/ui/universal.vue
index 5b51752dda..7c25d71bb3 100644
--- a/src/client/ui/universal.vue
+++ b/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,22 +250,8 @@ export default defineComponent({
 	> .contents {
 		width: 100%;
 		min-width: 0;
-		--stickyTop: var(--headerHeight);
-		padding-top: var(--headerHeight);
 		background: var(--panel);
 
-		> .header {
-			position: fixed;
-			z-index: 1000;
-			top: 0;
-			//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;
 
diff --git a/src/client/ui/zen.vue b/src/client/ui/zen.vue
index 3756ddb5c3..98e2b8dac6 100644
--- a/src/client/ui/zen.vue
+++ b/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() {