feat: add opt-in pinch to zoom setting (#1557)

zio/stable
Joaquín Sánchez 2023-02-01 15:43:27 +01:00 committed by GitHub
parent 22fea9d53a
commit 4c054a37fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 17 additions and 0 deletions

View File

@ -16,6 +16,7 @@ export interface PreferencesSettings {
hideAccountHoverCard: boolean
grayscaleMode: boolean
enableAutoplay: boolean
enablePinchToZoom: boolean
experimentalVirtualScroller: boolean
experimentalGitHubCards: boolean
experimentalUserPicker: boolean
@ -72,6 +73,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
hideAccountHoverCard: false,
grayscaleMode: false,
enableAutoplay: true,
enablePinchToZoom: false,
experimentalVirtualScroller: true,
experimentalGitHubCards: true,
experimentalUserPicker: true,

View File

@ -5,6 +5,7 @@ export function setupPageHeader() {
const { locale, locales, t } = useI18n()
const colorMode = useColorMode()
const buildInfo = useBuildInfo()
const enablePinchToZoom = usePreferences('enablePinchToZoom')
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: () => enablePinchToZoom.value ? ['enable-pinch-to-zoom'] : [],
},
titleTemplate: (title) => {
let titleTemplate = title ?? ''

View File

@ -377,6 +377,7 @@
"notifications_settings": "Notifications",
"preferences": {
"enable_autoplay": "Enable Autoplay",
"enable_pinch_to_zoom": "Enable pinch to zoom",
"github_cards": "GitHub Cards",
"grayscale_mode": "Grayscale mode",
"hide_account_hover_card": "Hide account hover card",

View File

@ -370,6 +370,7 @@
"notifications_settings": "Notificaciones",
"preferences": {
"enable_autoplay": "Habilitar auto-reproducción",
"enable_pinch_to_zoom": "Habilitar pellizcar para hacer zoom",
"github_cards": "Tarjetas GitHub",
"grayscale_mode": "Modo escala de grises",
"hide_account_hover_card": "Ocultar tarjeta flotante de cuenta",

View File

@ -57,6 +57,12 @@ const userSettings = useUserSettings()
>
{{ $t('settings.preferences.enable_autoplay') }}
</SettingsToggleItem>
<SettingsToggleItem
:checked="getPreferences(userSettings, 'enablePinchToZoom')"
@click="togglePreferences('enablePinchToZoom')"
>
{{ $t('settings.preferences.enable_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') }}

View File

@ -186,6 +186,11 @@ html {
--at-apply: bg-base text-base;
}
html:not(.enable-pinch-to-zoom) body {
/* Prevent arbitrary zooming on mobile devices */
touch-action: pan-x pan-y;
}
.sparkline--fill {
fill: var(--c-primary-active);
opacity: 0.2;