mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-05 13:37:55 +00:00
2556de1f38
# Pull Request Template ## Description Fixes https://linear.app/chatwoot/issue/CW-4091/accessibility-improvement-support-bigger-font-size-for-the-dashboard ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### **Loom video** https://www.loom.com/share/1ab781859fa748a5ad54aacbacd127b4?sid=a7dd9164-a6de-462f-bff7-1b25e9c55b4f ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
105 lines
2.5 KiB
Vue
105 lines
2.5 KiB
Vue
<script>
|
|
/* eslint no-console: 0 */
|
|
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
|
|
|
export default {
|
|
mixins: [globalConfigMixin],
|
|
props: {
|
|
items: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
computed: {
|
|
classObject() {
|
|
return 'w-full';
|
|
},
|
|
activeIndex() {
|
|
return this.items.findIndex(i => i.route === this.$route.name);
|
|
},
|
|
},
|
|
methods: {
|
|
isActive(item) {
|
|
return this.items.indexOf(item) === this.activeIndex;
|
|
},
|
|
isOver(item) {
|
|
return this.items.indexOf(item) < this.activeIndex;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<transition-group
|
|
name="wizard-items"
|
|
tag="div"
|
|
class="wizard-box"
|
|
:class="classObject"
|
|
>
|
|
<div
|
|
v-for="item in items"
|
|
:key="item.route"
|
|
class="item"
|
|
:class="{ active: isActive(item), over: isOver(item) }"
|
|
>
|
|
<div class="flex items-center">
|
|
<h3
|
|
class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
|
|
>
|
|
{{ item.title }}
|
|
</h3>
|
|
<span
|
|
v-if="isOver(item)"
|
|
class="ml-1 text-green-500 dark:text-green-500"
|
|
>
|
|
<fluent-icon icon="checkmark" />
|
|
</span>
|
|
</div>
|
|
<span class="step">
|
|
{{ items.indexOf(item) + 1 }}
|
|
</span>
|
|
<p class="pl-6 m-0 text-sm text-slate-600 dark:text-slate-300">
|
|
{{ item.body }}
|
|
</p>
|
|
</div>
|
|
</transition-group>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.wizard-box {
|
|
.item {
|
|
@apply cursor-pointer after:bg-slate-75 before:bg-slate-75 dark:after:bg-slate-600 dark:before:bg-slate-600 py-4 pr-4 pl-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5;
|
|
|
|
&.active {
|
|
h3 {
|
|
@apply text-n-blue-text dark:text-n-blue-text;
|
|
}
|
|
|
|
.step {
|
|
@apply bg-n-brand dark:bg-n-brand;
|
|
}
|
|
}
|
|
|
|
&.over {
|
|
&::after {
|
|
@apply bg-n-brand dark:bg-n-brand;
|
|
}
|
|
|
|
.step {
|
|
@apply bg-n-brand dark:bg-n-brand;
|
|
}
|
|
|
|
& + .item {
|
|
&::before {
|
|
@apply bg-n-brand dark:bg-n-brand;
|
|
}
|
|
}
|
|
}
|
|
|
|
.step {
|
|
@apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-[999] absolute text-center text-white dark:text-white text-xxs top-5;
|
|
}
|
|
}
|
|
}
|
|
</style>
|