AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 82 Pull requests 20 Projects Releases 1 Wiki Activity

layout fixes

Browse source
This commit is contained in:
Henry Jameson 2018-11-21 22:01:34 +03:00
parent 18e0828ee7
commit 92afd6af12
4 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/contrast_ratio/contrast_ratio.vue
View file

@ -54,6 +54,9 @@ export default {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top: -4px;
margin-bottom: 5px;
.label { .label {
margin-right: 1em; margin-right: 1em;
} }

17
src/components/style_switcher/style_switcher.scss
View file

@ -59,6 +59,10 @@
color: var(--cRed, $fallback--cRed); color: var(--cRed, $fallback--cRed);
} }
.tab-switcher {
margin: 0 -1em;
}
.apply-container, .apply-container,
.radius-container, .radius-container,
.color-container, .color-container,
@ -75,10 +79,19 @@
} }
.color-container{ .color-container{
> h4 {
width: 99%;
}
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
} }
.color-container,
.shadow-container,
.radius-container {
margin: 1em 1em 0;
}
.presets-container, .presets-container,
.shadow-selector { .shadow-selector {
display: flex; display: flex;
@ -139,10 +152,6 @@
display:flex; display:flex;
align-items: baseline; align-items: baseline;
} }
h4 {
margin-top: 1em;
}
} }
.radius-item { .radius-item {

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

@ -48,9 +48,9 @@
<p>{{$t('settings.theme_help')}}</p> <p>{{$t('settings.theme_help')}}</p>
<keep-alive> <keep-alive>
<tab-switcher key="style-tweak"> <tab-switcher key="style-tweak">
<div :label="$t('settings.style.basic_colors._tab_label')" class="color-container"> <div :label="$t('settings.style.common_colors._tab_label')" class="color-container">
<h4>{{ $t('settings.style.common_colors.main') }}</h4>
<div class="color-item"> <div class="color-item">
<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')"/>
@ -59,21 +59,19 @@
<ContrastRatio :contrast="previewContrast.bgLink"/> <ContrastRatio :contrast="previewContrast.bgLink"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<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>{{ $t('settings.style.basic_colors.foreground_hint') }}</p> <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
</div> </div>
<h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
<div class="color-item"> <div class="color-item">
<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')"/>
<ContrastRatio :contrast="previewContrast.bgBlue"/> <ContrastRatio :contrast="previewContrast.bgBlue"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>.</h4>
<ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/> <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
<ContrastRatio :contrast="previewContrast.bgGreen"/> <ContrastRatio :contrast="previewContrast.bgGreen"/>
<ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/> <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>

6
src/i18n/en.json
View file

@ -179,9 +179,9 @@
} }
} }
}, },
"basic_colors": { "common_colors": {
"_tab_label": "Basic", "_tab_label": "Common",
"main": "Basic colors", "main": "Common colors",
"foreground": "Panel header, top bar, buttons, text fields", "foreground": "Panel header, top bar, buttons, text fields",
"foreground_hint": "See \"Advanced\" tab for more detailed control", "foreground_hint": "See \"Advanced\" tab for more detailed control",
"rgbo": "Icons, accents, badges" "rgbo": "Icons, accents, badges"