akkoma-fe/src/components/contrast_ratio/contrast_ratio.vue

88 lines
2.1 KiB
Vue
Raw Normal View History

2018-10-09 21:07:28 +00:00
<template>
2019-07-05 07:17:44 +00:00
<span
v-if="contrast"
class="contrast-ratio"
>
<span
:title="hint"
class="rating"
>
<span v-if="contrast.aaa">
<i class="icon-thumbs-up-alt" />
</span>
<span v-if="!contrast.aaa && contrast.aa">
<i class="icon-adjust" />
</span>
<span v-if="!contrast.aaa && !contrast.aa">
<i class="icon-attention" />
</span>
2018-11-13 13:30:01 +00:00
</span>
2019-07-05 07:17:44 +00:00
<span
v-if="contrast && large"
class="rating"
:title="hint_18pt"
>
<span v-if="contrast.laaa">
<i class="icon-thumbs-up-alt" />
</span>
<span v-if="!contrast.laaa && contrast.laa">
<i class="icon-adjust" />
</span>
<span v-if="!contrast.laaa && !contrast.laa">
<i class="icon-attention" />
</span>
2018-10-09 21:07:28 +00:00
</span>
</span>
</template>
<script>
export default {
props: {
large: {
required: false
},
2020-01-19 22:37:45 +00:00
// TODO: Make theme switcher compute theme initially so that contrast
// component won't be called without contrast data
contrast: {
2020-01-19 22:37:45 +00:00
required: false,
type: Object
}
},
2018-11-21 17:18:49 +00:00
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 })
}
}
2018-10-09 21:07:28 +00:00
}
</script>
<style lang="scss">
.contrast-ratio {
display: flex;
2018-11-14 19:20:42 +00:00
justify-content: flex-end;
2018-10-09 21:07:28 +00:00
2018-11-21 19:01:34 +00:00
margin-top: -4px;
margin-bottom: 5px;
2018-10-09 21:07:28 +00:00
.label {
margin-right: 1em;
}
.rating {
display: inline-block;
text-align: center;
}
}
</style>