From 082fbecebcb743c8f523987de1b3c1e8067e1544 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 29 Jan 2023 16:06:42 +0100
Subject: [PATCH] feat(settings): add pinch to zoom setting

---
 composables/settings/definition.ts   | 2 ++
 composables/setups.ts                | 2 ++
 locales/de-DE.json                   | 1 +
 locales/en.json                      | 1 +
 locales/es.json                      | 1 +
 pages/settings/preferences/index.vue | 6 ++++++
 styles/global.css                    | 8 ++++----
 7 files changed, 17 insertions(+), 4 deletions(-)

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') }}
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'disablePinchToZoom')"
+      @click="togglePreferences('disablePinchToZoom')"
+    >
+      {{ $t('settings.preferences.disable_pinch_to_zoom') }}
+    </SettingsToggleItem>
     <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
       <div i-ri-flask-line />
       {{ $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));
 }