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;