Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-11-19 15:29:59 +00:00
Code Issues Wiki Activity

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

Browse source
This commit is contained in:
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
composables/settings/definition.ts
View file

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

2
composables/setups.ts
View file

@ -5,6 +5,7 @@ export function setupPageHeader() {
const { locale, locales, t } = useI18n() const { locale, locales, t } = useI18n()
const colorMode = useColorMode() const colorMode = useColorMode()
const buildInfo = useBuildInfo() const buildInfo = useBuildInfo()
const enablePinchToZoom = usePreferences('enablePinchToZoom')
const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => { const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
acc[l.code!] = l.dir ?? 'auto' acc[l.code!] = l.dir ?? 'auto'
@ -15,6 +16,7 @@ export function setupPageHeader() {
htmlAttrs: { htmlAttrs: {
lang: () => locale.value, lang: () => locale.value,
dir: () => localeMap[locale.value] ?? 'auto', dir: () => localeMap[locale.value] ?? 'auto',
class: () => enablePinchToZoom.value ? ['enable-pinch-to-zoom'] : [],
}, },
titleTemplate: (title) => { titleTemplate: (title) => {
let titleTemplate = title ?? '' let titleTemplate = title ?? ''

1
locales/en.json
View file

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

1
locales/es.json
View file

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

6
pages/settings/preferences/index.vue
View file

@ -57,6 +57,12 @@ const userSettings = useUserSettings()
> >
{{ $t('settings.preferences.enable_autoplay') }} {{ $t('settings.preferences.enable_autoplay') }}
</SettingsToggleItem> </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> <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
<div i-ri-flask-line /> <div i-ri-flask-line />
{{ $t('settings.preferences.title') }} {{ $t('settings.preferences.title') }}

5
styles/global.css
View file

@ -186,6 +186,11 @@ html {
--at-apply: bg-base text-base; --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 { .sparkline--fill {
fill: var(--c-primary-active); fill: var(--c-primary-active);
opacity: 0.2; opacity: 0.2;