diff options
Diffstat (limited to 'src/components/contrast_ratio/contrast_ratio.vue')
| -rw-r--r-- | src/components/contrast_ratio/contrast_ratio.vue | 28 |
1 files changed, 22 insertions, 6 deletions
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue index 9a93dcd0..f4f9ea86 100644 --- a/src/components/contrast_ratio/contrast_ratio.vue +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -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> |