Skip to content

Commit df068d2

Browse files
committed
feat: allow disabling animations and transitions
respects initially the prefers-reduced motion setting closes #92
1 parent 79674f0 commit df068d2

File tree

16 files changed

+59
-36
lines changed

16 files changed

+59
-36
lines changed

src/app/App.vue

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import LoadingScreen from '@components/misc/loading-screen/LoadingScreen.vue';
1313
import { useAppElement, useMediaQuery, useSquircle } from '@composables';
1414
import { useStorage } from '@storage/index';
1515
import { useSettingsStore } from '@store/settings';
16-
import { computed, nextTick, watch, watchEffect } from 'vue';
16+
import { computed, nextTick, watch } from 'vue';
1717
import { useI18n } from 'vue-i18n';
1818
import { useRouter } from 'vue-router';
1919
@@ -28,25 +28,29 @@ const root = useSquircle(computed(() => (['minimized', 'mobile'].includes(media.
2828
2929
const preventDefault = (event: Event) => event.preventDefault();
3030
31-
watchEffect(() => {
32-
app.classList.add(state.appearance.theme);
33-
34-
nextTick(() => {
35-
const appColor = getComputedStyle(app).getPropertyValue('--app-background').trim();
36-
document
37-
.querySelectorAll('[data-meta="theme-color"]')
38-
.forEach((el) => ((el as HTMLMetaElement).content = appColor));
39-
});
40-
});
41-
4231
watch(
4332
() => state.appearance.theme,
44-
(_, oldTheme) => app.classList.remove(oldTheme)
33+
(newTheme, oldTheme) => {
34+
app.classList.add(newTheme);
35+
36+
if (oldTheme) {
37+
app.classList.remove(oldTheme);
38+
}
39+
40+
nextTick(() => {
41+
const appColor = getComputedStyle(app).getPropertyValue('--app-background').trim();
42+
document
43+
.querySelectorAll('[data-meta="theme-color"]')
44+
.forEach((el) => ((el as HTMLMetaElement).content = appColor));
45+
});
46+
},
47+
{ immediate: true }
4548
);
4649
4750
watch(
4851
() => state.appearance.animations,
49-
(enabled) => app.classList[enabled ? 'remove' : 'add']('reducedMotion')
52+
(enabled) => app.classList[enabled ? 'remove' : 'add']('reducedMotion'),
53+
{ immediate: true }
5054
);
5155
5256
watch(status, (v) => {

src/app/components/base/check-box/CheckBox.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ const inputId = uuid();
3838
.label {
3939
display: flex;
4040
flex-direction: column;
41+
justify-items: flex-start;
42+
flex-grow: 1;
4143
font-weight: var(--font-weight-l);
4244
font-size: var(--font-size-xs);
4345
user-select: none;

src/app/pages/navigation/settings/SettingsButton.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
:class="classes"
55
textual
66
color="dimmed"
7-
:icon="RiEqualizerLine"
7+
:icon="RiSettings4Line"
88
@click="showSettingsDialog = true"
99
/>
1010
<SettingsDialog :open="showSettingsDialog" @close="showSettingsDialog = false" />
@@ -13,7 +13,7 @@
1313
<script lang="ts" setup>
1414
import SettingsDialog from '@app/pages/navigation/settings/SettingsDialog.vue';
1515
import Button from '@components/base/button/Button.vue';
16-
import { RiEqualizerLine } from '@remixicon/vue';
16+
import { RiSettings4Line } from '@remixicon/vue';
1717
import { ClassNames } from '@utils';
1818
import { computed, ref } from 'vue';
1919
import { useI18n } from 'vue-i18n';

src/app/pages/navigation/settings/SettingsDialog.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,12 @@
2222
@update:model-value="setMonthOffset($event as number)"
2323
/>
2424

25+
<CheckBox
26+
:label="t('navigation.settings.showAnimationsAndTransitions')"
27+
:model-value="settings.appearance.animations"
28+
@update:model-value="setAnimations"
29+
/>
30+
2531
<CheckBox
2632
:label="t('navigation.settings.carryOverNetSavings')"
2733
:sub-label="t('navigation.settings.carryOverNetSavingsInfo')"
@@ -55,7 +61,7 @@ defineProps<{
5561
}>();
5662
5763
const { t, locale } = useI18n();
58-
const { setMonthOffset, setCarryOver, state: settings } = useSettingsStore();
64+
const { setMonthOffset, setCarryOver, setAnimations, state: settings } = useSettingsStore();
5965
const { changeCurrency, changeLocale, state } = useDataStore();
6066
const monthNames = useMonthNames();
6167

src/i18n/locales/cze.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,8 @@
8585
"currency": "Měna",
8686
"firstMonthOfYear": "První měsíc roku",
8787
"carryOverNetSavings": "Přenést čisté úspory",
88-
"carryOverNetSavingsInfo": "Pokud je povoleno, čisté úspory se přenesou do následujícího roku."
88+
"carryOverNetSavingsInfo": "Pokud je povoleno, čisté úspory se přenesou do následujícího roku.",
89+
"showAnimationsAndTransitions": "Zobrazit animace a přechody"
8990
},
9091
"status": {
9192
"synchronizationFailedDueToNetworkError": "Synchronizace selhala kvůli síťové chybě!",

src/i18n/locales/de.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,8 @@
8585
"currency": "Währung",
8686
"firstMonthOfYear": "Erster Monat des Jahres",
8787
"carryOverNetSavings": "Nettoersparnisse übertragen",
88-
"carryOverNetSavingsInfo": "Wenn diese Option aktiviert ist, werden die Nettoersparnisse des Vorjahres in das neue Jahr übertragen."
88+
"carryOverNetSavingsInfo": "Wenn diese Option aktiviert ist, werden die Nettoersparnisse des Vorjahres in das neue Jahr übertragen.",
89+
"showAnimationsAndTransitions": "Animationen und Übergänge anzeigen"
8990
},
9091
"status": {
9192
"synchronizationFailedDueToNetworkError": "Synchronisierung fehlgeschlagen, bitte überprüfen Sie Ihre Netzwerkverbindung!",

src/i18n/locales/en.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,8 @@
8585
"currency": "Currency",
8686
"firstMonthOfYear": "First month of the year",
8787
"carryOverNetSavings": "Carry over net savings",
88-
"carryOverNetSavingsInfo": "If enabled, the net savings from the previous year will be carried over to the next year."
88+
"carryOverNetSavingsInfo": "If enabled, the net savings from the previous year will be carried over to the next year.",
89+
"showAnimationsAndTransitions": "Show animations and transitions"
8990
},
9091
"status": {
9192
"synchronizationFailedDueToNetworkError": "Synchronization failed due to network error!",

src/i18n/locales/es.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,8 @@
8585
"currency": "Moneda",
8686
"firstMonthOfYear": "Primer mes del año",
8787
"carryOverNetSavings": "Llevar ahorros netos",
88-
"carryOverNetSavingsInfo": "Si está habilitado, los ahorros netos se llevarán al siguiente año."
88+
"carryOverNetSavingsInfo": "Si está habilitado, los ahorros netos se llevarán al siguiente año.",
89+
"showAnimationsAndTransitions": "Mostrar animaciones y transiciones"
8990
},
9091
"status": {
9192
"synchronizationFailedDueToNetworkError": "¡La sincronización falló debido a un error de red!",

src/i18n/locales/hu.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,8 @@
8585
"currency": "Pénznem",
8686
"firstMonthOfYear": "Az év első hónapja",
8787
"carryOverNetSavings": "Nettó megtakarítások átvitele",
88-
"carryOverNetSavingsInfo": "Ha a nettó megtakarításokat átvisszük az új évre, akkor az előző év záróegyenlegét az új év első hónapjában a nettó megtakarításokhoz adja hozzá."
88+
"carryOverNetSavingsInfo": "Ha a nettó megtakarításokat átvisszük az új évre, akkor az előző év záróegyenlegét az új év első hónapjában a nettó megtakarításokhoz adja hozzá.",
89+
"showAnimationsAndTransitions": "Animációk és átmenetek megjelenítése"
8990
},
9091
"status": {
9192
"synchronizationFailedDueToNetworkError": "A szinkronizálás hálózati hiba miatt meghiúsult!",

src/i18n/locales/it.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,8 @@
8585
"currency": "Valuta",
8686
"firstMonthOfYear": "Primo mese dell'anno",
8787
"carryOverNetSavings": "Portare risparmi netti",
88-
"carryOverNetSavingsInfo": "Se attivato, il saldo netto di fine anno verrà trasferito come saldo iniziale per l'anno successivo."
88+
"carryOverNetSavingsInfo": "Se attivato, il saldo netto di fine anno verrà trasferito come saldo iniziale per l'anno successivo.",
89+
"showAnimationsAndTransitions": "Mostra animazioni e transizioni"
8990
},
9091
"status": {
9192
"synchronizationFailedDueToNetworkError": "Sincronizzazione fallita a causa di un errore di rete!",

0 commit comments

Comments
 (0)