yume/paricafe
1
0
Fork 0
mirror of https://github.com/paricafe/misskey.git synced 2025-04-09 04:59:34 -05:00
Code Issues Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2025-03-25 20:06:46 +09:00
parent 0e417e51ac
commit 97fddf2a80
2 changed files with 22 additions and 35 deletions
packages/frontend/src/ui
_common_
navbar.vue
universal.vue

19
packages/frontend/src/ui/_common_/navbar.vue
View file

@ -48,6 +48,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA>
</div>
<div :class="$style.bottom">
<button v-if="showWidgetButton" class="_button" :class="[$style.widget]" @click="() => emit('widgetButtonClick')">
<i class="ti ti-apps ti-fw"></i>
</button>
<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>
@ -104,6 +107,14 @@ import { $i } from '@/i.js';
const router = useRouter();
const props = defineProps<{
showWidgetButton?: boolean;
}>();
const emit = defineEmits<{
(ev: 'widgetButtonClick'): void;
}>();
const forceIconOnly = ref(window.innerWidth <= 1279);
const iconOnly = computed(() => {
return forceIconOnly.value || (store.r.menuDisplay.value === 'sideIcon');
@ -560,6 +571,14 @@ function menuEdit() {
backdrop-filter: var(--MI-blur, blur(8px));
}
.widget {
display: block;
position: relative;
width: 100%;
height: 52px;
text-align: center;
}
.post {
display: block;
position: relative;

38
packages/frontend/src/ui/universal.vue
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="$style.root">
<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
<XSidebar v-if="!isMobile" :class="$style.sidebar" :showWidgetButton="!isDesktop" @widgetButtonClick="widgetsShowing = true"/>
<div :class="$style.contents" @contextmenu.stop="onContextmenu">
<div>
@ -29,9 +29,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
</div>
<div v-else-if="!isDesktop" ref="navFooter" :class="$style.navForTablet">
<button :class="$style.navForTabletWidgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
</div>
</div>
<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
@ -281,7 +278,7 @@ $widgets-hide-threshold: 1090px;
.transition_widgetsDrawer_enterFrom,
.transition_widgetsDrawer_leaveTo {
opacity: 0;
transform: translateX(240px);
transform: translateX(-240px);
}
.root {
@ -310,35 +307,6 @@ $widgets-hide-threshold: 1090px;
min-height: 0;
}
.navForTablet {
display: flex;
padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
width: 100%;
box-sizing: border-box;
background: var(--MI_THEME-bg);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.navForTabletWidgetButton {
position: relative;
padding: 0;
aspect-ratio: 1;
width: 100%;
max-width: 60px;
margin-left: auto;
border-radius: 100%;
background: var(--MI_THEME-panel);
color: var(--MI_THEME-fg);
&:hover {
background: var(--MI_THEME-panelHighlight);
}
&:active {
background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
}
}
.nav {
padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
display: grid;
@ -447,7 +415,7 @@ $widgets-hide-threshold: 1090px;
.widgetsDrawer {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1001;
width: 310px;
height: 100dvh;