feat: add opt-in pinch to zoom setting (#1557)
parent
22fea9d53a
commit
4c054a37fd
|
@ -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,
|
||||
|
|
|
@ -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 ?? ''
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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') }}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue