moris/misskey
1
0
Fork 0
forked from mirror/misskey
Code Pull Requests 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
-
- 画面サイズが変わった際にナビゲーションバーが自動で折りたたまれない問題を修正
### Server
-

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

@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</component>
</template>
<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>
</MkA>
<button class="_button" :class="$style.item" @click="more">
@ -48,10 +48,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA>
</div>
<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>
</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"/>
</button>
</div>
@ -83,8 +83,12 @@ import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.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 otherMenuItemIndicated = computed(() => {
@ -95,14 +99,10 @@ const otherMenuItemIndicated = computed(() => {
return false;
});
const forceIconOnly = window.innerWidth <= 1279;
function calcViewState() {
iconOnly.value = forceIconOnly || (defaultStore.state.menuDisplay === 'sideIcon');
forceIconOnly.value = window.innerWidth <= 1279;
}
calcViewState();
window.addEventListener('resize', calcViewState);
watch(defaultStore.reactiveState.menuDisplay, () => {
@ -120,8 +120,10 @@ function openAccountMenu(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')), {
src: ev.currentTarget ?? ev.target,
src: target,
}, {
closed: () => dispose(),
});