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: localization and small fixes

---
 src/components/style_switcher/style_switcher.vue | 44 ++++++++++++------------
 1 file changed, 22 insertions(+), 22 deletions(-)

(limited to 'src/components/style_switcher/style_switcher.vue')

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"
-- 
cgit v1.2.3-70-g09d2