1
0
forked from mirror/misskey

enhance(frontend): デッキ表示時にサイドバーを展開・折りたたみできるように (#14983)

* enhance(frontend): デッキ表示時にサイドバーを展開・折りたたみできるように

* wip

* wip

* Update navbar.vue

* ✌️

* Update CHANGELOG.md

* 🎨

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
おさむのひと 2024-11-18 10:36:51 +09:00 committed by GitHub
parent eed45c7915
commit 0df6c79172
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 65 additions and 7 deletions

View File

@ -27,6 +27,7 @@
- Enhance: ノート詳細画面にロールのバッジを表示
- Enhance: 過去に送信したフォローリクエストを確認できるように
(Based on https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/663)
- Enhance: サイドバーを簡単に展開・折りたたみできるように ( #14981 )
- Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正
- Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正
(Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768)

View File

@ -100,10 +100,6 @@ function reset() {
}));
}
watch(menuDisplay, async () => {
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
});
const headerActions = computed(() => []);
const headerTabs = computed(() => []);

View File

@ -56,6 +56,21 @@ SPDX-License-Identifier: AGPL-3.0-only
</button>
</div>
</div>
<button v-if="!forceIconOnly" class="_button" :class="$style.toggleButton" @click="toggleIconOnly">
<!--
<svg viewBox="0 0 16 48" :class="$style.toggleButtonShape">
<g transform="matrix(0.333333,0,0,0.222222,0.000895785,13.3333)">
<path d="M23.935,-24C37.223,-24 47.995,-7.842 47.995,12.09C47.995,34.077 47.995,62.07 47.995,84.034C47.995,93.573 45.469,102.721 40.972,109.466C36.475,116.211 30.377,120 24.018,120L23.997,120C10.743,120 -0.003,136.118 -0.003,156C-0.003,156 -0.003,156 -0.003,156L-0.003,-60L-0.003,-59.901C-0.003,-50.379 2.519,-41.248 7.007,-34.515C11.496,-27.782 17.584,-24 23.931,-24C23.932,-24 23.934,-24 23.935,-24Z" style="fill:var(--MI_THEME-navBg);"/>
</g>
</svg>
-->
<svg viewBox="0 0 16 64" :class="$style.toggleButtonShape">
<g transform="matrix(0.333333,0,0,0.222222,0.000895785,21.3333)">
<path d="M47.488,7.995C47.79,10.11 47.943,12.266 47.943,14.429C47.997,26.989 47.997,84 47.997,84C47.997,84 44.018,118.246 23.997,133.5C-0.374,152.07 -0.003,192 -0.003,192L-0.003,-96C-0.003,-96 0.151,-56.216 23.997,-37.5C40.861,-24.265 46.043,-1.243 47.488,7.995Z" style="fill:var(--MI_THEME-navBg);"/>
</g>
</svg>
<i :class="'ti ' + `ti-chevron-${ iconOnly ? 'right' : 'left' }`" style="font-size: 12px; margin-left: -8px;"></i>
</button>
</div>
</template>
@ -80,9 +95,11 @@ const otherMenuItemIndicated = computed(() => {
return false;
});
const calcViewState = () => {
iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
};
const forceIconOnly = window.innerWidth <= 1279;
function calcViewState() {
iconOnly.value = forceIconOnly || (defaultStore.state.menuDisplay === 'sideIcon');
}
calcViewState();
@ -92,6 +109,10 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
calcViewState();
});
function toggleIconOnly() {
defaultStore.set('menuDisplay', iconOnly.value ? 'sideFull' : 'sideIcon');
}
function openAccountMenu(ev: MouseEvent) {
openAccountMenu_({
withExtraOperation: true,
@ -133,6 +154,38 @@ function more(ev: MouseEvent) {
contain: strict;
display: flex;
flex-direction: column;
direction: rtl; //
}
.top {
direction: ltr;
}
.middle {
direction: ltr;
}
.bottom {
direction: ltr;
}
.toggleButton {
position: fixed;
bottom: 20px;
left: var(--nav-width);
z-index: 1001;
width: 16px;
height: 64px;
box-sizing: border-box;
}
.toggleButtonShape {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 16px;
height: 64px;
}
.root:not(.iconOnly) {
@ -363,6 +416,10 @@ function more(ev: MouseEvent) {
position: relative;
font-size: 0.9em;
}
.toggleButton {
left: var(--nav-width);
}
}
.root.iconOnly {
@ -563,5 +620,9 @@ function more(ev: MouseEvent) {
font-size: 10px;
}
}
.toggleButton {
left: var(--nav-icon-only-width);
}
}
</style>