mirror/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-23 00:29:22 +09:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fix(frontend): 画面サイズが変わった際にnavbarが自動で折りたたまれない問題を修正 (#15042)

Browse Source 
* fix(frontend): 画面サイズが変わった際にnavbarが自動で折りたたまれない問題を修正

* Update Changelog

* fix
This commit is contained in:
かっこかり 2024-11-23 15:35:06 +09:00 committed by GitHub
parent 04b221409c
commit d91a1be562
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -4,7 +4,7 @@
- -
### Client ### Client
- - 画面サイズが変わった際にナビゲーションバーが自動で折りたたまれない問題を修正
### Server ### Server
- -

22
packages/frontend/src/ui/_common_/navbar.vue
View File

@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</component> </component>
</template> </template>
<div :class="$style.divider"></div> <div :class="$style.divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item" :activeClass="$style.active" to="/admin"> <MkA v-if="$i != null && ($i.isAdmin || $i.isModerator)" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item" :activeClass="$style.active" to="/admin">
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span> <i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
</MkA> </MkA>
<button class="_button" :class="$style.item" @click="more"> <button class="_button" :class="$style.item" @click="more">
@ -48,10 +48,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA> </MkA>
</div> </div>
<div :class="$style.bottom"> <div :class="$style.bottom">
<button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form @click="os.post"> <button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form @click="() => { os.post(); }">
<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span> <i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
</button> </button>
<button v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="_button" :class="[$style.account]" @click="openAccountMenu"> <button v-if="$i != null" v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="_button" :class="[$style.account]" @click="openAccountMenu">
<MkAvatar :user="$i" :class="$style.avatar"/><MkAcct class="_nowrap" :class="$style.acct" :user="$i"/> <MkAvatar :user="$i" :class="$style.avatar"/><MkAcct class="_nowrap" :class="$style.acct" :user="$i"/>
</button> </button>
</div> </div>
@ -83,8 +83,12 @@ import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js'; import { instance } from '@/instance.js';
import { getHTMLElementOrNull } from '@/scripts/get-dom-node-or-null.js';
const iconOnly = ref(false); const forceIconOnly = ref(window.innerWidth <= 1279);
const iconOnly = computed(() => {
return forceIconOnly.value || (defaultStore.reactiveState.menuDisplay.value === 'sideIcon');
});
const menu = computed(() => defaultStore.state.menu); const menu = computed(() => defaultStore.state.menu);
const otherMenuItemIndicated = computed(() => { const otherMenuItemIndicated = computed(() => {
@ -95,14 +99,10 @@ const otherMenuItemIndicated = computed(() => {
return false; return false;
}); });
const forceIconOnly = window.innerWidth <= 1279;
function calcViewState() { function calcViewState() {
iconOnly.value = forceIconOnly || (defaultStore.state.menuDisplay === 'sideIcon'); forceIconOnly.value = window.innerWidth <= 1279;
} }
calcViewState();
window.addEventListener('resize', calcViewState); window.addEventListener('resize', calcViewState);
watch(defaultStore.reactiveState.menuDisplay, () => { watch(defaultStore.reactiveState.menuDisplay, () => {
@ -120,8 +120,10 @@ function openAccountMenu(ev: MouseEvent) {
} }
function more(ev: MouseEvent) { function more(ev: MouseEvent) {
const target = getHTMLElementOrNull(ev.currentTarget ?? ev.target);
if (!target) return;
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
src: ev.currentTarget ?? ev.target, src: target,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });