diff options
| author | Henry Jameson <me@hjkos.com> | 2018-11-21 20:18:49 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2018-11-21 20:18:49 +0300 |
| commit | 3bdcdefc9bd697413c5ef4b3e0b606e045b8e612 (patch) | |
| tree | 57aebbd184aab8ccfdcb5ae5ed12581d7a5c9e6d /src/components/contrast_ratio/contrast_ratio.vue | |
| parent | dc3df7bc4e91abf4a911e4c5ecc0c627d00dcfb1 (diff) | |
better tooltips, localized, too
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> |