localization and small fixes
This commit is contained in:
Henry Jameson
parent
cb8218c3c1
commit
32132e225c
6 changed files with 99 additions and 54 deletions
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue