localization and small fixes

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'"
+    v-if="typeof fallback !== 'undefined'"
-  class="opt"
+    class="opt"
-  :id="name + '-o'"
+    :id="name + '-o'"
-      type="checkbox"
+    type="checkbox"
-  :checked="present"
+    :checked="present"
-           @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+    @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)">
-           >
+  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
-           <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
   <input
     :id="name"
     class="color-input"

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'"
+    v-if="typeof fallback !== 'undefined'"
-  class="opt"
+    class="opt"
-  :id="name + '-o'"
+    :id="name + '-o'"
-      type="checkbox"
+    type="checkbox"
-  :checked="present"
+    :checked="present"
-           @input="$emit('input', !present ? fallback : undefined)"
+    @input="$emit('input', !present ? fallback : undefined)">
-           >
   <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
   <input
     :id="name"

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">
+      <label for="shadow-switcher" class="select">
-        Shadow id
+        <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"

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',

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>
+          <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
-          <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.error')" :fallback="previewTheme.colors.alertError"/>
+          <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>
+          <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
-          <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.notification')" :fallback="previewTheme.colors.badgeNotification"/>
+          <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"

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": {