From de76a66c030b5ce6984767a3bef7d76913ec870a Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 25 Mar 2025 18:15:54 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=82=BF=E3=83=96?=
=?UTF-8?q?=E3=83=AC=E3=83=83=E3=83=88=E3=81=A7=E3=81=AE=E8=A1=A8=E7=A4=BA?=
=?UTF-8?q?=E6=99=82=E3=81=AB=E3=82=A6=E3=82=A3=E3=82=B8=E3=82=A7=E3=83=83?=
=?UTF-8?q?=E3=83=88=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=A7=E3=83=9A=E3=83=BC?=
=?UTF-8?q?=E3=82=B8=E4=B8=8B=E9=83=A8=E3=81=8C=E9=9A=A0=E3=82=8C=E3=81=AA?=
=?UTF-8?q?=E3=81=84=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/frontend/src/ui/universal.vue | 48 +++++++++++++++++---------
1 file changed, 32 insertions(+), 16 deletions(-)
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index c7dcf746c4..acd188ac0c 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -29,14 +29,15 @@ 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">
<XWidgets/>
</div>
- <button v-if="!isDesktop && !pageMetadata?.needWideArea && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
-
<Transition
:enterActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterActive : ''"
:leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
@@ -309,6 +310,35 @@ $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;
@@ -410,20 +440,6 @@ $widgets-hide-threshold: 1090px;
}
}
-.widgetButton {
- display: block;
- position: fixed;
- z-index: 1000;
- bottom: 32px;
- right: 32px;
- width: 64px;
- height: 64px;
- border-radius: 100%;
- box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
- font-size: 22px;
- background: var(--MI_THEME-panel);
-}
-
.widgetsDrawerBg {
z-index: 1001;
}