fix: color mode settings button (#648)

zio/stable
Joaquín Sánchez 2022-12-29 20:27:11 +01:00 committed by GitHub
parent 87eebd520e
commit 524f7005aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 62 additions and 12 deletions

View File

@ -12,19 +12,21 @@ function setColorMode(mode: ColorMode) {
<div flex="~ gap4" w-full> <div flex="~ gap4" w-full>
<button <button
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
:tabindex="colorMode.value === 'dark' ? 0 : -1"
:class="colorMode.value === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'" :class="colorMode.value === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode('dark')" @click="setColorMode('dark')"
> >
<div i-ri:moon-line /> <div i-ri:moon-line />
Dark Mode {{ $t('settings.interface.dark_mode') }}
</button> </button>
<button <button
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
:tabindex="colorMode.value === 'light' ? 0 : -1"
:class="colorMode.value === 'light' ? 'pointer-events-none' : 'filter-saturate-0'" :class="colorMode.value === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode('light')" @click="setColorMode('light')"
> >
<div i-ri:sun-line /> <div i-ri:sun-line />
Light Mode {{ $t('settings.interface.light_mode') }}
</button> </button>
</div> </div>
</template> </template>

View File

@ -225,8 +225,10 @@
}, },
"interface": { "interface": {
"color_mode": "Color Mode", "color_mode": "Color Mode",
"dark_mode": "Dark Mode",
"font_size": "Font Size", "font_size": "Font Size",
"label": "Interface" "label": "Interface",
"light_mode": "Light Mode"
}, },
"language": { "language": {
"display_language": "Display Language", "display_language": "Display Language",
@ -251,6 +253,8 @@
}, },
"select_a_settings": "Select a settings", "select_a_settings": "Select a settings",
"users": { "users": {
"export": "Export User Tokens",
"import": "Import User Tokens",
"label": "Logged in users" "label": "Logged in users"
} }
}, },

View File

@ -225,8 +225,10 @@
}, },
"interface": { "interface": {
"color_mode": "Color Mode", "color_mode": "Color Mode",
"dark_mode": "Dark Mode",
"font_size": "Font Size", "font_size": "Font Size",
"label": "Interface" "label": "Interface",
"light_mode": "Light Mode"
}, },
"language": { "language": {
"display_language": "Display Language", "display_language": "Display Language",
@ -251,6 +253,8 @@
}, },
"select_a_settings": "Select a settings", "select_a_settings": "Select a settings",
"users": { "users": {
"export": "Export User Tokens",
"import": "Import User Tokens",
"label": "Logged in users" "label": "Logged in users"
} }
}, },

View File

@ -205,11 +205,49 @@
"search_desc": "Buscar personas y etiquetas" "search_desc": "Buscar personas y etiquetas"
}, },
"settings": { "settings": {
"about": {
"label": "Acerca de"
},
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "Avatar en Avatar", "avatar_on_avatar": "Avatar en Avatar",
"github_cards": "GitHub Cards", "github_cards": "Tarjetas GitHub",
"user_picker": "User Picker", "title": "Características experimentales",
"virtual_scroll": "Virtual Scrolling" "user_picker": "Selector de usuarios",
"virtual_scroll": "Desplazamiento virtual"
},
"interface": {
"color_mode": "Modos de color",
"dark_mode": "Modo Oscuro",
"font_size": "Tamaño de Letra",
"label": "Interfaz",
"light_mode": "Modo Claro"
},
"language": {
"display_language": "Idioma de la pantalla",
"label": "Idioma"
},
"preferences": {
"label": "Preferencias"
},
"profile": {
"appearance": {
"bio": "Bio",
"description": "Editar avatar, nombre de usuario, perfil, etc.",
"display_name": "Nombre a mostrar",
"label": "Apariencia",
"title": "Editar perfil"
},
"featured_tags": {
"description": "Las personas pueden navegar por sus publicaciones públicas con estos hashtags.",
"label": "Hashtags destacados"
},
"label": "Perfil"
},
"select_a_settings": "Seleccionar una configuración",
"users": {
"export": "Exportar tokens de usuario",
"import": "Importar tokens de usuario",
"label": "Usuarios conectados"
} }
}, },
"state": { "state": {

View File

@ -10,10 +10,12 @@
<p font-medium>{{ $t('settings.interface.font_size') }}</p> <p font-medium>{{ $t('settings.interface.font_size') }}</p>
<SettingsFontSize select-settings /> <SettingsFontSize select-settings />
</label> </label>
<label space-y-2> <div space-y-2>
<p font-medium>{{ $t('settings.interface.color_mode') }}</p> <p font-medium>
{{ $t('settings.interface.color_mode') }}
</p>
<SettingsColorMode /> <SettingsColorMode />
</label> </div>
</div> </div>
</MainContent> </MainContent>
</template> </template>

View File

@ -79,12 +79,12 @@ async function importTokens() {
<div my4 border="t base" /> <div my4 border="t base" />
<button btn-text flex="~ gap-2" items-center @click="exportTokens"> <button btn-text flex="~ gap-2" items-center @click="exportTokens">
<div i-ri-download-2-line /> <div i-ri-download-2-line />
Export User Tokens {{ $t('settings.users.export') }}
</button> </button>
</template> </template>
<button btn-text flex="~ gap-2" items-center @click="importTokens"> <button btn-text flex="~ gap-2" items-center @click="importTokens">
<div i-ri-upload-2-line /> <div i-ri-upload-2-line />
Import User Tokens {{ $t('settings.users.import') }}
</button> </button>
</div> </div>
</MainContent> </MainContent>