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

feat(settings): improve button animations

Browse Source
This commit is contained in:
Stevan
2026-02-08 22:58:18 +01:00
parent a7e0f079c9
commit 5ba3fa6447
7 changed files with 13 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,7 +38,7 @@ const isAnimating = ref(true);
const SLIDE_OFFSET = 96; const SLIDE_OFFSET = 96;
const SLIDE_DURATION = 0.25; const SLIDE_DURATION = 0.25;
const ARROW_SLIDE_DELAY = 0.15; const ARROW_SLIDE_DELAY = 0.15;
const ARROW_SLIDE_DURATION = 0.15; const ARROW_SLIDE_DURATION = 0.167;
const VIEW_ALL_OFFSET = -20; const VIEW_ALL_OFFSET = -20;
const animation = reactive({ const animation = reactive({

18
app/components/Settings/BottomScreen/Menus/Menus.vue
View File

@@ -233,12 +233,12 @@ const selectorXOffset = computed(() => {
const handleActivateB = () => { const handleActivateB = () => {
if (settingsStore.isIntro || settingsStore.isOutro) return; if (settingsStore.isIntro || settingsStore.isOutro) return;
settingsStore.animateOutro();
};
const handleActivateA = () => { if (isSubmenuSelected.value) {
if (settingsStore.isIntro || settingsStore.isOutro) return;
select(getParentMenu(selected.value)); select(getParentMenu(selected.value));
} else {
settingsStore.animateOutro();
}
}; };
</script> </script>
@@ -275,16 +275,8 @@ const handleActivateA = () => {
/> />
<CommonButtons <CommonButtons
v-if="isSubmenuSelected"
:y-offset="settingsStore.barOffsetY" :y-offset="settingsStore.barOffsetY"
:b-label="$t('common.goBack')" :b-label="isSubmenuSelected ? $t('common.goBack') : $t('common.quit')"
:a-label="$t('common.select')"
@activate-b="handleActivateA()"
/>
<CommonButtons
v-else
:y-offset="settingsStore.barOffsetY"
:b-label="$t('common.quit')"
:a-label="$t('common.select')" :a-label="$t('common.select')"
@activate-b="handleActivateB()" @activate-b="handleActivateB()"
/> />

2
app/components/Settings/BottomScreen/Menus/Options/2048.vue
View File

@@ -70,7 +70,7 @@ const BOARD_SIZE = 4;
const SLIDE_OFFSET = 96; const SLIDE_OFFSET = 96;
const SLIDE_DURATION = 0.25; const SLIDE_DURATION = 0.25;
const SCORE_OFFSET = -20; const SCORE_OFFSET = -20;
const SCORE_DURATION = 0.15; const SCORE_DURATION = 0.167;
const isAnimating = ref(true); const isAnimating = ref(true);

2
app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
View File

@@ -70,7 +70,7 @@ const isAnimating = ref(true);
const AREA_FADE_DURATION = 0.2; const AREA_FADE_DURATION = 0.2;
const SCORE_OFFSET = -20; const SCORE_OFFSET = -20;
const SCORE_DURATION = 0.15; const SCORE_DURATION = 0.167;
const animation = reactive({ const animation = reactive({
areaOpacity: 0, areaOpacity: 0,

2
app/components/Settings/BottomScreen/Menus/User/Snake.vue
View File

@@ -17,7 +17,7 @@ const BOARD_SLIDE_OFFSET = 96;
const BOARD_SLIDE_DURATION = 0.25; const BOARD_SLIDE_DURATION = 0.25;
const TEXT_FADE_DURATION = 0.15; const TEXT_FADE_DURATION = 0.15;
const SCORE_OFFSET = -20; const SCORE_OFFSET = -20;
const SCORE_DURATION = 0.15; const SCORE_DURATION = 0.167;
const isAnimating = ref(true); const isAnimating = ref(true);

2
app/components/Settings/BottomScreen/NumberInput.vue
View File

@@ -83,7 +83,7 @@ const squareWidth = computed(() => upImage.value.rect.width);
const SLIDE_OFFSET = 96; const SLIDE_OFFSET = 96;
const SLIDE_DURATION = 0.25; const SLIDE_DURATION = 0.25;
const ARROW_SLIDE_DELAY = 0.15; const ARROW_SLIDE_DELAY = 0.15;
const ARROW_SLIDE_DURATION = 0.15; const ARROW_SLIDE_DURATION = 0.167;
const isAnimating = ref(true); const isAnimating = ref(true);

4
app/stores/confirmationModal.ts
View File

@@ -2,8 +2,8 @@ import gsap from "gsap";
const MODAL_MAX_Y_OFFSET = 106; const MODAL_MAX_Y_OFFSET = 106;
const BUTTONS_MAX_Y_OFFSET = 20; const BUTTONS_MAX_Y_OFFSET = 20;
const BUTTONS_TIME = 0.1; const BUTTONS_TIME = 0.167;
const MODAL_TIME = 0.225; const MODAL_TIME = 0.25;
export const useConfirmationModal = defineStore("confirmationModal", { export const useConfirmationModal = defineStore("confirmationModal", {
state: () => ({ state: () => ({