From 32132e225c749e506285370a2a065bb71920ce59 Mon Sep 17 00:00:00 2001 From: Henry Jameson <me@hjkos.com> Date: Tue, 20 Nov 2018 20:58:20 +0300 Subject: [PATCH] localization and small fixes --- src/components/color_input/color_input.vue | 17 ++++--- .../opacity_input/opacity_input.vue | 17 ++++--- .../shadow_control/shadow_control.vue | 27 ++++++----- .../style_switcher/style_switcher.js | 1 + .../style_switcher/style_switcher.vue | 44 ++++++++--------- src/i18n/en.json | 47 ++++++++++++++++++- 6 files changed, 99 insertions(+), 54 deletions(-) diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue index ea9fb3c4..b756d265 100644 --- a/src/components/color_input/color_input.vue +++ b/src/components/color_input/color_input.vue @@ -1,17 +1,16 @@ <template> -<div class="color-control" :class="{ disabled: !present || disabled }"> +<div class="color-control style-control" :class="{ disabled: !present || disabled }"> <label :for="name" class="label"> {{label}} </label> <input - v-if="typeof fallback !== 'undefined'" - class="opt" - :id="name + '-o'" - type="checkbox" - :checked="present" - @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)" - > - <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label> + v-if="typeof fallback !== 'undefined'" + class="opt" + :id="name + '-o'" + type="checkbox" + :checked="present" + @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"> + <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label> <input :id="name" class="color-input" diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue index 91c4f5e9..e0567ec7 100644 --- a/src/components/opacity_input/opacity_input.vue +++ b/src/components/opacity_input/opacity_input.vue @@ -1,16 +1,15 @@ <template> -<div class="opacity-control" :class="{ disabled: !present || disabled }"> +<div class="opacity-control style-control" :class="{ disabled: !present || disabled }"> <label :for="name" class="label"> - {{$t('settings.opacity')}} + {{$t('settings.style.common.opacity')}} </label> <input - v-if="typeof fallback !== 'undefined'" - class="opt" - :id="name + '-o'" - type="checkbox" - :checked="present" - @input="$emit('input', !present ? fallback : undefined)" - > + v-if="typeof fallback !== 'undefined'" + class="opt" + :id="name + '-o'" + type="checkbox" + :checked="present" + @input="$emit('input', !present ? fallback : undefined)"> <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label> <input :id="name" diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index 6847278c..b99df35a 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -40,16 +40,17 @@ <div class="shadow-tweak"> <div :disabled="usingFallback" class="id-control"> - <label for="id" class="label"> - Shadow id + <label for="shadow-switcher" class="select"> + <select + v-model="selectedId" class="shadow-switcher" + :disabled="usingFallback" + id="shadow-switcher"> + <option v-for="(shadow, index) in cValue" :value="index"> + {{$t('settings.style.shadows.shadow_id', { value: index })}} + </option> + </select> + <i class="icon-down-open"/> </label> - <input - v-model="selectedId" - :disabled="usingFallback" - class="input-number" - type="number" - min="0" - :max="cValue.length - 1"> <button class="btn btn-default" :disabled="!present" @click="del"> <i class="icon-cancel"/> </button> @@ -65,7 +66,7 @@ </div> <div :disabled="!present" class="inset-control"> <label for="inset" class="label"> - Inset + {{$t('settings.style.shadows.inset')}} </label> <input v-model="selected.inset" @@ -78,7 +79,7 @@ </div> <div :disabled="!present" class="blur-control"> <label for="spread" class="label"> - Blur + {{$t('settings.style.shadows.blur')}} </label> <input v-model="selected.blur" @@ -98,7 +99,7 @@ </div> <div :disabled="!present" class="spread-control"> <label for="spread" class="label"> - Spread + {{$t('settings.style.shadows.spread')}} </label> <input v-model="selected.spread" @@ -118,7 +119,7 @@ <ColorInput v-model="selected.color" :disabled="!present" - label="Color" + :label="$t('settings.style.common.color')" name="shadow"/> <OpacityInput v-model="selected.alpha" diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index e523cd7b..7cb6197c 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -7,6 +7,7 @@ import ContrastRatio from '../contrast_ratio/contrast_ratio.vue' import OpacityInput from '../opacity_input/opacity_input.vue' import TabSwitcher from '../tab_switcher/tab_switcher.jsx' +// List of color values used in v1 const v1OnlyNames = [ 'bg', 'fg', diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index af816a23..fd5d830a 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -47,9 +47,9 @@ <p>{{$t('settings.theme_help')}}</p> <tab-switcher> - <div label="Basic" class="color-container"> + <div :label="$t('settings.style.basic_colors._tab_label')" class="color-container"> <div class="color-item"> - <h4>Main colors</h4> + <h4>{{ $t('settings.style.basic_colors.main') }}</h4> <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/> <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/> <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/> @@ -58,14 +58,14 @@ <ContrastRatio :contrast="previewContrast.bgLink"/> </div> <div class="color-item"> - <h4>Panel header, top bar, buttons, text fields</h4> + <h4>{{ $t('settings.style.basic_colors.foreground') }}</h4> <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/> <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/> <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/> - <p>See "Advanced" tab for more detailed control</p> + <p>{{ $t('settings.style.basic_colors.foreground_hint') }}</p> </div> <div class="color-item"> - <h4>Icons, alerts, etc.</h4> + <h4>{{ $t('settings.style.basic_colors.rgbo') }}</h4> <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/> <ContrastRatio :contrast="previewContrast.bgRed"/> <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/> @@ -80,25 +80,25 @@ </div> </div> - <div label="Advanced" class="color-container"> + <div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container"> <div class="color-item"> - <h4>Alerts</h4> - <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.error')" :fallback="previewTheme.colors.alertError"/> + <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4> + <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.style.advanced_colors.alert_error')" :fallback="previewTheme.colors.alertError"/> <ContrastRatio :contrast="previewContrast.alertError"/> </div> <div class="color-item"> - <h4>Badges</h4> - <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.notification')" :fallback="previewTheme.colors.badgeNotification"/> + <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4> + <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.style.advanced_colors.badge_notification')" :fallback="previewTheme.colors.badgeNotification"/> </div> <div class="color-item"> - <h4>Panel header</h4> + <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4> <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/> <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/> <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/> <ContrastRatio :contrast="previewContrast.panelText" large="1"/> </div> <div class="color-item"> - <h4>Top bar</h4> + <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4> <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/> <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/> <ContrastRatio :contrast="previewContrast.topBarText"/> @@ -106,33 +106,33 @@ <ContrastRatio :contrast="previewContrast.topBarLink"/> </div> <div class="color-item"> - <h4>Text fields</h4> + <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4> <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/> <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/> <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/> <ContrastRatio :contrast="previewContrast.inputText"/> </div> <div class="color-item"> - <h4>Buttons</h4> + <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4> <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/> <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/> <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/> <ContrastRatio :contrast="previewContrast.btnText"/> </div> <div class="color-item"> - <h4>Borders</h4> + <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4> <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/> <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/> </div> <div class="color-item"> - <h4>Faint text</h4> + <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4> <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/> <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/> - <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.panel')"/> + <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.style.advanced_colors.panel_header')"/> <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/> </div> </div> - <div label="Roundness" class="radius-container"> + <div :label="$t('settings.style.radii._tab_label')" class="radius-container"> <p>{{$t('settings.radii_help')}}</p> <div class="radius-item"> <label for="btnradius" class="theme-radius-lb">{{$t('settings.btnRadius')}}</label> @@ -170,20 +170,20 @@ <input id="tooltipradius-t" class="theme-radius-in" type="text" v-model="tooltipRadiusLocal"> </div> </div> - <div label="Shadow Realm" class="shadow-container"> + <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container"> <div> - Shadow + {{$t('settings.style.shadows.component')}} <label for="shadow-switcher" class="shadow-selector select"> <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher"> <option v-for="shadow in shadowsAvailable" :value="shadow"> - {{shadow}} + {{$t('settings.style.shadows.components.' + shadow)}} </option> </select> <i class="icon-down-open"/> </label> <label for="override" class="label"> - Override + {{$t('settings.style.shadows.override')}} </label> <input v-model="currentShadowOverriden" diff --git a/src/i18n/en.json b/src/i18n/en.json index d825dcc1..04e9977b 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -108,7 +108,6 @@ "follow_import_error": "Error importing followers", "follows_imported": "Follows imported! Processing them will take a while.", "foreground": "Foreground", - "opacity": "Opacity", "general": "General", "hide_attachments_in_convo": "Hide attachments in conversations", "hide_attachments_in_tl": "Hide attachments in timeline", @@ -162,6 +161,52 @@ "values": { "false": "no", "true": "yes" + }, + "style": { + "common": { + "color": "Color", + "opacity": "Opacity" + }, + "basic_colors": { + "_tab_label": "Basic", + "main": "Basic colors", + "foreground": "Panel header, top bar, buttons, text fields", + "foreground_hint": "See \"Advanced\" tab for more detailed control", + "rgbo": "Icons, accents, badges" + }, + "advanced_colors": { + "_tab_label": "Advanced", + "alert": "Alert background", + "alert_error": "Error", + "badge": "Badge background", + "badge_notification": "Notification", + "panel_header": "Panel header", + "top_bar": "Top bar", + "borders": "Borders", + "buttons": "Buttons", + "inputs": "Input fields", + "faint_text": "Faded text" + }, + "radii": { + "_tab_label": "Roundness" + }, + "shadows": { + "_tab_label": "Shadow and lighting", + "component": "Component", + "override": "Override", + "shadow_id": "Shadow #{value}", + "blur": "Blur", + "spread": "Spread", + "inset": "Inset", + "components": { + "panel": "Panel", + "button": "Button", + "button_hover": "Button (hover)", + "button_pressed": "Button (pressed)", + "button_pressed_hover": "Button (pressed+hover)", + "input_box": "Input field" + } + } } }, "timeline": {