moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better tooltips, localized, too

This commit is contained in:
Henry Jameson 2018-11-21 20:18:49 +03:00
parent dc3df7bc4e
commit 3bdcdefc9b
2 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/contrast_ratio/contrast_ratio.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<span v-if="contrast" class="contrast-ratio"> <span v-if="contrast" class="contrast-ratio">
<span :title="`Contrast is ${contrast.text}`" class="rating"> <span :title="hint" class="rating">
<span v-if="contrast.aaa"> <span v-if="contrast.aaa">
<i class="icon-thumbs-up-alt"/> <i class="icon-thumbs-up-alt"/>
</span> </span>
@ -11,14 +11,14 @@
<i class="icon-attention"/> <i class="icon-attention"/>
</span> </span>
</span> </span>
<span class="rating" v-if="contrast && large" :title="`Contrast is ${contrast.text} (18pt+)`"> <span class="rating" v-if="contrast && large" :title="hint_18pt">
<span v-if="contrast.aaa"> <span v-if="contrast.laaa">
<i class="icon-thumbs-up-alt"/> <i class="icon-thumbs-up-alt"/>
</span> </span>
<span v-if="!contrast.aaa && contrast.aa"> <span v-if="!contrast.laaa && contrast.laa">
<i class="icon-adjust"/> <i class="icon-adjust"/>
</span> </span>
<span v-if="!contrast.aaa && !contrast.aa"> <span v-if="!contrast.laaa && !contrast.laa">
<i class="icon-attention"/> <i class="icon-attention"/>
</span> </span>
</span> </span>
@ -29,7 +29,23 @@
export default { export default {
props: [ props: [
'large', 'contrast' 'large', 'contrast'
] ],
computed: {
hint () {
const levelVal = this.contrast.aaa ? 'aaa' : (this.contrast.aa ? 'aa' : 'bad')
const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
const context = this.$t('settings.style.common.contrast.context.text')
const ratio = this.contrast.text
return this.$t('settings.style.common.contrast.hint', { level, context, ratio })
},
hint_18pt () {
const levelVal = this.contrast.laaa ? 'aaa' : (this.contrast.laa ? 'aa' : 'bad')
const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
const context = this.$t('settings.style.common.contrast.context.18pt')
const ratio = this.contrast.text
return this.$t('settings.style.common.contrast.hint', { level, context, ratio })
}
}
} }
</script> </script>

14
src/i18n/en.json
View File

@ -165,7 +165,19 @@
"style": { "style": {
"common": { "common": {
"color": "Color", "color": "Color",
"opacity": "Opacity" "opacity": "Opacity",
"contrast": {
"hint": "Contrast ratio is {ratio}, it {level} {context}",
"level": {
"aa": "meets Level AA guideline (minimal)",
"aaa": "meets Level AAA guideline (recommended)",
"bad": "doesn't meet any accessibility guidelines"
},
"context": {
"18pt": "for large (18pt+) text",
"text": "for text"
}
}
}, },
"basic_colors": { "basic_colors": {
"_tab_label": "Basic", "_tab_label": "Basic",