mirrors/akkoma-fe
1
0
Fork 1
mirror of https://akkoma.dev/AkkomaGang/akkoma-fe.git synced 2024-11-09 01:49:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

better tooltips, localized, too

Browse source
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>
<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">
<i class="icon-thumbs-up-alt"/>
</span>
@ -11,14 +11,14 @@
<i class="icon-attention"/>
</span>
</span>
<span class="rating" v-if="contrast && large" :title="`Contrast is ${contrast.text} (18pt+)`">
<span v-if="contrast.aaa">
<span class="rating" v-if="contrast && large" :title="hint_18pt">
<span v-if="contrast.laaa">
<i class="icon-thumbs-up-alt"/>
</span>
<span v-if="!contrast.aaa && contrast.aa">
<span v-if="!contrast.laaa && contrast.laa">
<i class="icon-adjust"/>
</span>
<span v-if="!contrast.aaa && !contrast.aa">
<span v-if="!contrast.laaa && !contrast.laa">
<i class="icon-attention"/>
</span>
</span>
@ -29,7 +29,23 @@
export default {
props: [
'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>

14
src/i18n/en.json
View file

@ -165,7 +165,19 @@
"style": {
"common": {
"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": {
"_tab_label": "Basic",