localization and small fixes

This commit is contained in:
Henry Jameson 2018-11-20 20:58:20 +03:00
parent cb8218c3c1
commit 32132e225c
6 changed files with 99 additions and 54 deletions

View File

@ -1,5 +1,5 @@
<template> <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 :for="name" class="label">
{{label}} {{label}}
</label> </label>
@ -9,8 +9,7 @@
: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 <input
:id="name" :id="name"

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="opacity-control" :class="{ disabled: !present || disabled }"> <div class="opacity-control style-control" :class="{ disabled: !present || disabled }">
<label :for="name" class="label"> <label :for="name" class="label">
{{$t('settings.opacity')}} {{$t('settings.style.common.opacity')}}
</label> </label>
<input <input
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
@ -9,8 +9,7 @@
: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> <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
<input <input
:id="name" :id="name"

View File

@ -40,16 +40,17 @@
<div class="shadow-tweak"> <div class="shadow-tweak">
<div :disabled="usingFallback" class="id-control"> <div :disabled="usingFallback" class="id-control">
<label for="id" class="label"> <label for="shadow-switcher" class="select">
Shadow id <select
</label> v-model="selectedId" class="shadow-switcher"
<input
v-model="selectedId"
:disabled="usingFallback" :disabled="usingFallback"
class="input-number" id="shadow-switcher">
type="number" <option v-for="(shadow, index) in cValue" :value="index">
min="0" {{$t('settings.style.shadows.shadow_id', { value: index })}}
:max="cValue.length - 1"> </option>
</select>
<i class="icon-down-open"/>
</label>
<button class="btn btn-default" :disabled="!present" @click="del"> <button class="btn btn-default" :disabled="!present" @click="del">
<i class="icon-cancel"/> <i class="icon-cancel"/>
</button> </button>
@ -65,7 +66,7 @@
</div> </div>
<div :disabled="!present" class="inset-control"> <div :disabled="!present" class="inset-control">
<label for="inset" class="label"> <label for="inset" class="label">
Inset {{$t('settings.style.shadows.inset')}}
</label> </label>
<input <input
v-model="selected.inset" v-model="selected.inset"
@ -78,7 +79,7 @@
</div> </div>
<div :disabled="!present" class="blur-control"> <div :disabled="!present" class="blur-control">
<label for="spread" class="label"> <label for="spread" class="label">
Blur {{$t('settings.style.shadows.blur')}}
</label> </label>
<input <input
v-model="selected.blur" v-model="selected.blur"
@ -98,7 +99,7 @@
</div> </div>
<div :disabled="!present" class="spread-control"> <div :disabled="!present" class="spread-control">
<label for="spread" class="label"> <label for="spread" class="label">
Spread {{$t('settings.style.shadows.spread')}}
</label> </label>
<input <input
v-model="selected.spread" v-model="selected.spread"
@ -118,7 +119,7 @@
<ColorInput <ColorInput
v-model="selected.color" v-model="selected.color"
:disabled="!present" :disabled="!present"
label="Color" :label="$t('settings.style.common.color')"
name="shadow"/> name="shadow"/>
<OpacityInput <OpacityInput
v-model="selected.alpha" v-model="selected.alpha"

View File

@ -7,6 +7,7 @@ import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
import OpacityInput from '../opacity_input/opacity_input.vue' import OpacityInput from '../opacity_input/opacity_input.vue'
import TabSwitcher from '../tab_switcher/tab_switcher.jsx' import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
// List of color values used in v1
const v1OnlyNames = [ const v1OnlyNames = [
'bg', 'bg',
'fg', 'fg',

View File

@ -47,9 +47,9 @@
<p>{{$t('settings.theme_help')}}</p> <p>{{$t('settings.theme_help')}}</p>
<tab-switcher> <tab-switcher>
<div label="Basic" class="color-container"> <div :label="$t('settings.style.basic_colors._tab_label')" class="color-container">
<div class="color-item"> <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')"/> <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/> <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/>
<ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/> <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
@ -58,14 +58,14 @@
<ContrastRatio :contrast="previewContrast.bgLink"/> <ContrastRatio :contrast="previewContrast.bgLink"/>
</div> </div>
<div class="color-item"> <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="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
<ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/> <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"/> <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>
<div class="color-item"> <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')"/> <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
<ContrastRatio :contrast="previewContrast.bgRed"/> <ContrastRatio :contrast="previewContrast.bgRed"/>
<ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/> <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
@ -80,25 +80,25 @@
</div> </div>
</div> </div>
<div label="Advanced" class="color-container"> <div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container">
<div class="color-item"> <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"/> <ContrastRatio :contrast="previewContrast.alertError"/>
</div> </div>
<div class="color-item"> <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>
<div class="color-item"> <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')"/> <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/> <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')"/> <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
<ContrastRatio :contrast="previewContrast.panelText" large="1"/> <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
</div> </div>
<div class="color-item"> <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="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/> <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
<ContrastRatio :contrast="previewContrast.topBarText"/> <ContrastRatio :contrast="previewContrast.topBarText"/>
@ -106,33 +106,33 @@
<ContrastRatio :contrast="previewContrast.topBarLink"/> <ContrastRatio :contrast="previewContrast.topBarLink"/>
</div> </div>
<div class="color-item"> <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')"/> <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/> <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')"/> <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
<ContrastRatio :contrast="previewContrast.inputText"/> <ContrastRatio :contrast="previewContrast.inputText"/>
</div> </div>
<div class="color-item"> <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')"/> <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/> <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')"/> <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
<ContrastRatio :contrast="previewContrast.btnText"/> <ContrastRatio :contrast="previewContrast.btnText"/>
</div> </div>
<div class="color-item"> <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"/> <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/>
<OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/> <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/>
</div> </div>
<div class="color-item"> <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="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="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"/> <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/>
</div> </div>
</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> <p>{{$t('settings.radii_help')}}</p>
<div class="radius-item"> <div class="radius-item">
<label for="btnradius" class="theme-radius-lb">{{$t('settings.btnRadius')}}</label> <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"> <input id="tooltipradius-t" class="theme-radius-in" type="text" v-model="tooltipRadiusLocal">
</div> </div>
</div> </div>
<div label="Shadow Realm" class="shadow-container"> <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
<div> <div>
Shadow {{$t('settings.style.shadows.component')}}
<label for="shadow-switcher" class="shadow-selector select"> <label for="shadow-switcher" class="shadow-selector select">
<select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher"> <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
<option v-for="shadow in shadowsAvailable" <option v-for="shadow in shadowsAvailable"
:value="shadow"> :value="shadow">
{{shadow}} {{$t('settings.style.shadows.components.' + shadow)}}
</option> </option>
</select> </select>
<i class="icon-down-open"/> <i class="icon-down-open"/>
</label> </label>
<label for="override" class="label"> <label for="override" class="label">
Override {{$t('settings.style.shadows.override')}}
</label> </label>
<input <input
v-model="currentShadowOverriden" v-model="currentShadowOverriden"

View File

@ -108,7 +108,6 @@
"follow_import_error": "Error importing followers", "follow_import_error": "Error importing followers",
"follows_imported": "Follows imported! Processing them will take a while.", "follows_imported": "Follows imported! Processing them will take a while.",
"foreground": "Foreground", "foreground": "Foreground",
"opacity": "Opacity",
"general": "General", "general": "General",
"hide_attachments_in_convo": "Hide attachments in conversations", "hide_attachments_in_convo": "Hide attachments in conversations",
"hide_attachments_in_tl": "Hide attachments in timeline", "hide_attachments_in_tl": "Hide attachments in timeline",
@ -162,6 +161,52 @@
"values": { "values": {
"false": "no", "false": "no",
"true": "yes" "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": { "timeline": {