Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

added contrasts for rgbo

Browse source
This commit is contained in:
Henry Jameson 2018-10-21 15:25:21 +03:00
parent 4b7b7d9905
commit 7b657fcccd
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -128,7 +128,7 @@ export default {
avatarAltRadius: this.avatarAltRadiusLocal, avatarAltRadius: this.avatarAltRadiusLocal,
tooltipRadius: this.tooltipRadiusLocal, tooltipRadius: this.tooltipRadiusLocal,
attachmentRadius: this.attachmentRadiusLocal attachmentRadius: this.attachmentRadiusLocal
}, }
} }
}, },
preview () { preview () {
@ -170,6 +170,11 @@ export default {
link: hex2rgb(colors.link), link: hex2rgb(colors.link),
topBarLink: hex2rgb(colors.topBarLink), topBarLink: hex2rgb(colors.topBarLink),
red: hex2rgb(colors.cRed),
green: hex2rgb(colors.cGreen),
blue: hex2rgb(colors.cBlue),
orange: hex2rgb(colors.cOrange)
} }
const bgs = { const bgs = {
@ -182,8 +187,11 @@ export default {
const ratios = { const ratios = {
bgText: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.text), fgs.text), bgText: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.text), fgs.text),
bgLink: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.link), fgs.link), bgLink: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.link), fgs.link),
bgRed: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.red), fgs.red),
bgGreen: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.green), fgs.green),
bgBlue: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.blue), fgs.blue),
bgOrange: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.orange), fgs.orange),
// User Profile
tintText: getContrastRatio(worstCase(bgs.bg, 0.5, fgs.panelText), fgs.text), tintText: getContrastRatio(worstCase(bgs.bg, 0.5, fgs.panelText), fgs.text),
panelText: getContrastRatio(worstCase(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText), panelText: getContrastRatio(worstCase(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText),
@ -378,10 +386,10 @@ export default {
this.fgColorLocal = this.selected[2] this.fgColorLocal = this.selected[2]
this.textColorLocal = this.selected[3] this.textColorLocal = this.selected[3]
this.linkColorLocal = this.selected[4] this.linkColorLocal = this.selected[4]
this.redColorLocal = this.selected[5] this.cRedColorLocal = this.selected[5]
this.greenColorLocal = this.selected[6] this.cGreenColorLocal = this.selected[6]
this.blueColorLocal = this.selected[7] this.cBlueColorLocal = this.selected[7]
this.orangeColorLocal = this.selected[8] this.cOrangeColorLocal = this.selected[8]
} }
} }
} }

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

@ -64,11 +64,15 @@
</div> </div>
<div class="color-item"> <div class="color-item">
<ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/> <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
<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"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/> <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
<ContrastRatio :contrast="previewContrast.bgGreen"/>
<ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/> <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
<ContrastRatio :contrast="previewContrast.bgOrange"/>
</div> </div>
<div class="color-item wide"> <div class="color-item wide">
<h4>Alert opacity</h4> <h4>Alert opacity</h4>