diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts index c3940ee1..a74b9f06 100644 --- a/composables/settings/definition.ts +++ b/composables/settings/definition.ts @@ -16,6 +16,7 @@ export interface PreferencesSettings { hideAccountHoverCard: boolean grayscaleMode: boolean enableAutoplay: boolean + disablePinchToZoom: boolean experimentalVirtualScroller: boolean experimentalGitHubCards: boolean experimentalUserPicker: boolean @@ -72,6 +73,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = { hideAccountHoverCard: false, grayscaleMode: false, enableAutoplay: true, + disablePinchToZoom: false, experimentalVirtualScroller: true, experimentalGitHubCards: true, experimentalUserPicker: true, diff --git a/composables/setups.ts b/composables/setups.ts index 732be5a8..bbb10ed7 100644 --- a/composables/setups.ts +++ b/composables/setups.ts @@ -5,6 +5,7 @@ export function setupPageHeader() { const { locale, locales, t } = useI18n() const colorMode = useColorMode() const buildInfo = useBuildInfo() + const disablePinchToZoom = usePreferences('disablePinchToZoom') const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => { acc[l.code!] = l.dir ?? 'auto' @@ -15,6 +16,7 @@ export function setupPageHeader() { htmlAttrs: { lang: () => locale.value, dir: () => localeMap[locale.value] ?? 'auto', + class: () => disablePinchToZoom.value ? ['disable-pinch-to-zoom'] : [], }, titleTemplate: (title) => { let titleTemplate = title ?? '' diff --git a/locales/de-DE.json b/locales/de-DE.json index 56474539..78c6d5d9 100644 --- a/locales/de-DE.json +++ b/locales/de-DE.json @@ -330,6 +330,7 @@ }, "notifications_settings": "Benachrichtigungen", "preferences": { + "disable_pinch_to_zoom": "Deaktiviere das Zoomen mit zwei Fingern", "enable_autoplay": "Autoplay aktivieren", "github_cards": "GitHub Cards", "hide_boost_count": "Boost-Zähler ausblenden", diff --git a/locales/en.json b/locales/en.json index 2072472b..af9b181b 100644 --- a/locales/en.json +++ b/locales/en.json @@ -376,6 +376,7 @@ }, "notifications_settings": "Notifications", "preferences": { + "disable_pinch_to_zoom": "Disable pinch to zoom", "enable_autoplay": "Enable Autoplay", "github_cards": "GitHub Cards", "grayscale_mode": "Grayscale mode", diff --git a/locales/es.json b/locales/es.json index c9ecb26e..0c82245d 100644 --- a/locales/es.json +++ b/locales/es.json @@ -369,6 +369,7 @@ }, "notifications_settings": "Notificaciones", "preferences": { + "disable_pinch_to_zoom": "Deshabilitar pellizcar para hacer zoom", "enable_autoplay": "Habilitar auto-reproducción", "github_cards": "Tarjetas GitHub", "grayscale_mode": "Modo escala de grises", diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue index dde8f452..2cf5d1ce 100644 --- a/pages/settings/preferences/index.vue +++ b/pages/settings/preferences/index.vue @@ -57,6 +57,12 @@ const userSettings = useUserSettings() > {{ $t('settings.preferences.enable_autoplay') }} + + {{ $t('settings.preferences.disable_pinch_to_zoom') }} +

{{ $t('settings.preferences.title') }} diff --git a/styles/global.css b/styles/global.css index 42422eae..7381a457 100644 --- a/styles/global.css +++ b/styles/global.css @@ -185,7 +185,7 @@ html { --at-apply: bg-base text-base; } -body { +html.disable-pinch-to-zoom body { /* Prevent arbitrary zooming on mobile devices */ touch-action: pan-x pan-y; } @@ -214,8 +214,8 @@ footer { clip-path: url(#avatar-mask); } -/* -Grayscale mode +/* +Grayscale mode Setting each element filter to a different var allows controlling them individually */ @@ -230,7 +230,7 @@ allows controlling them individually [data-mode="grayscale"] .poll-wrapper { filter: grayscale(var(--poll-grayscale, 1)); } -[data-mode="grayscale"] .status-actions, +[data-mode="grayscale"] .status-actions, [data-mode="grayscale"] .status-boosted { filter: grayscale(var(--status-grayscale, 1)); }