From 3bdcdefc9bd697413c5ef4b3e0b606e045b8e612 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Nov 2018 20:18:49 +0300
Subject: better tooltips, localized, too

---
 src/components/contrast_ratio/contrast_ratio.vue | 28 +++++++++++++++++++-----
 1 file changed, 22 insertions(+), 6 deletions(-)

(limited to 'src/components/contrast_ratio/contrast_ratio.vue')

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>
 
-- 
cgit v1.2.3-70-g09d2