From 6b6483c9fc2efd23a8c26ce058cdbd53e44bd7c3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 29 Dec 2020 11:47:36 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=88=E3=83=AB=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E9=9D=9E=E8=A1=A8=E7=A4=BA=E3=82=AA=E3=83=97=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                     |  1 +
 src/client/components/note.vue        |  2 +-
 src/client/pages/settings/general.vue |  2 ++
 src/client/store.ts                   |  4 ++++
 src/client/ui/default.vue             | 11 +++++++----
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 767708bae3..3899a0bda5 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -670,6 +670,7 @@ center: "中央"
 wide: "広い"
 narrow: "狭い"
 reloadToApplySetting: "設定はページリロード後に反映されます。今すぐリロードしますか？"
+showTitlebar: "タイトルバーを表示する"
 
 _aboutMisskey:
   about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 780034ec68..1089c8979c 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -36,7 +36,7 @@
 			<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
 		</div>
 	</div>
-	<article class="article" @contextmenu="onContextmenu">
+	<article class="article" @contextmenu.prevent.stop="onContextmenu">
 		<MkAvatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
 			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 6d9ef8a3e2..ae4d9f82d3 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -1,5 +1,6 @@
 <template>
 <FormBase>
+	<FormSwitch v-model:value="titlebar">{{ $ts.showTitlebar }}</FormSwitch>
 	<FormSwitch v-model:value="showFixedPostForm">{{ $ts.showFixedPostForm }}</FormSwitch>
 
 	<FormSelect v-model:value="lang">
@@ -133,6 +134,7 @@ export default defineComponent({
 		useOsNativeEmojis: defaultStore.makeGetterSetter('useOsNativeEmojis'),
 		disableShowingAnimatedImages: defaultStore.makeGetterSetter('disableShowingAnimatedImages'),
 		loadRawImages: defaultStore.makeGetterSetter('loadRawImages'),
+		titlebar: defaultStore.makeGetterSetter('titlebar'),
 		imageNewTab: defaultStore.makeGetterSetter('imageNewTab'),
 		nsfw: defaultStore.makeGetterSetter('nsfw'),
 		disablePagesScript: defaultStore.makeGetterSetter('disablePagesScript'),
diff --git a/src/client/store.ts b/src/client/store.ts
index 363abe4b7f..2f134d8f48 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -180,6 +180,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'full' as 'full' | 'icon'
 	},
+	titlebar: {
+		where: 'device',
+		default: true
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期
diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue
index 1a3c336f39..796e0d54f5 100644
--- a/src/client/ui/default.vue
+++ b/src/client/ui/default.vue
@@ -2,8 +2,8 @@
 <div class="mk-app" :class="{ wallpaper }">
 	<XSidebar ref="nav" class="sidebar"/>
 
-	<div class="contents" ref="contents">
-		<header class="header" ref="header" @contextmenu.prevent.stop="onContextmenu" @click="onHeaderClick">
+	<div class="contents" ref="contents" :class="{ withHeader: $store.state.titlebar }" @contextmenu.prevent.stop="onContextmenu">
+		<header v-if="$store.state.titlebar" class="header" ref="header" @click="onHeaderClick">
 			<XHeader :info="pageInfo"/>
 		</header>
 		<main ref="main">
@@ -162,7 +162,7 @@ export default defineComponent({
 			this.navHidden = navWidth === 0;
 			if (this.$refs.contents == null) return;
 			const width = this.$refs.contents.offsetWidth;
-			this.$refs.header.style.width = `${width}px`;
+			if (this.$refs.header) this.$refs.header.style.width = `${width}px`;
 		},
 
 		showNav() {
@@ -256,7 +256,10 @@ export default defineComponent({
 	> .contents {
 		width: 100%;
 		min-width: 0;
-		padding-top: $header-height;
+
+		&.withHeader {
+			padding-top: $header-height;
+		}
 
 		> .header {
 			position: fixed;