desea/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

localization and small fixes

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/color_input/color_input.vue
View file

@ -1,5 +1,5 @@
<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>
@ -9,8 +9,7 @@
:id="name + '-o'"
type="checkbox"
: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>
<input
:id="name"

7
src/components/opacity_input/opacity_input.vue
View file

@ -1,7 +1,7 @@
<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'"
@ -9,8 +9,7 @@
:id="name + '-o'"
type="checkbox"
: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"

27
src/components/shadow_control/shadow_control.vue
View file

@ -40,16 +40,17 @@
<div class="shadow-tweak">
<div :disabled="usingFallback" class="id-control">
<label for="id" class="label">
Shadow id
</label>
<input
v-model="selectedId"
<label for="shadow-switcher" class="select">
<select
v-model="selectedId" class="shadow-switcher"
:disabled="usingFallback"
class="input-number"
type="number"
min="0"
:max="cValue.length - 1">
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>
<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"

1
src/components/style_switcher/style_switcher.js
View file

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

44
src/components/style_switcher/style_switcher.vue
View file

@ -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"

47
src/i18n/en.json
View file

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