pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(settings): synchronize button animation with arrows of number input

Browse Source
This commit is contained in:
Stevan
2026-02-12 15:31:37 +01:00
parent b4b38af4ab
commit a751c1a150
13 changed files with 226 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
View File

@@ -35,6 +35,9 @@ const confirmationModal = useConfirmationModal();
const isAnimating = ref(true);
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
const SLIDE_OFFSET = 96;
const SLIDE_DURATION = 0.25;
const ARROW_SLIDE_DELAY = 0.15;
@@ -60,6 +63,14 @@ const animateIntro = async () => {
.timeline()
.to(animation, { offsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
.to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0)
.call(
() => {
bLabel.value = $t("common.cancel");
aLabel.value = $t("common.reset");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
)
.to(
animation,
{ viewAllOffsetY: 0, duration: ARROW_SLIDE_DURATION, ease: "none" },
@@ -197,8 +208,8 @@ onRender((ctx) => {
<CommonButtons
:y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
:b-label="$t('common.cancel')"
:a-label="$t('common.reset')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB()"
@activate-a="handleReset()"
/>

16
app/components/Settings/BottomScreen/Menus/Clock/Date.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
import { useIntervalFn } from "@vueuse/core";
import gsap from "gsap";
const store = useSettingsStore();
@@ -12,6 +13,9 @@ useIntervalFn(() => {
const isAnimating = ref(true);
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
@@ -22,6 +26,14 @@ const animateIntro = async () => {
monthRef.value?.animateIntro(),
dayRef.value?.animateIntro(),
yearRef.value?.animateIntro(),
gsap.timeline().call(
() => {
bLabel.value = $t("common.cancel");
aLabel.value = $t("common.confirm");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
),
]);
isAnimating.value = false;
};
@@ -80,8 +92,8 @@ defineOptions({ render: () => null });
<CommonButtons
:y-offset="store.submenuButtonsOffsetY"
:b-label="$t('common.cancel')"
:a-label="$t('common.confirm')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB"
@activate-a="handleActivateA"
/>

17
app/components/Settings/BottomScreen/Menus/Clock/Time.vue
View File

@@ -23,6 +23,9 @@ const animation = reactive({
const isAnimating = ref(true);
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
const hourRef = useTemplateRef<InstanceType<typeof NumberInput>>("hour");
const minuteRef = useTemplateRef<InstanceType<typeof NumberInput>>("minute");
@@ -34,7 +37,15 @@ const animateIntro = async () => {
gsap
.timeline()
.to(animation, { offsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
.to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0),
.to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0)
.call(
() => {
bLabel.value = $t("common.cancel");
aLabel.value = $t("common.confirm");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
),
]);
isAnimating.value = false;
};
@@ -98,8 +109,8 @@ defineOptions({ render: () => null });
<CommonButtons
:y-offset="store.submenuButtonsOffsetY"
:b-label="$t('common.cancel')"
:a-label="$t('common.confirm')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB"
@activate-a="handleActivateA"
/>