LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Support bigger font size in dashboard (#10974)

Browse Source 
# 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
This commit is contained in:
Sivin Varghese
2025-02-27 12:10:33 +05:30
committed by GitHub
parent a9de672932
commit 2556de1f38
66 changed files with 598 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/javascript/dashboard/components/SettingsSection.vue
View File

@@ -23,33 +23,34 @@ export default {
<template>
<div
class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
class="ml-0 mr-0 py-8 w-full"
:class="{
'border-b border-solid border-slate-50 dark:border-slate-700/30':
showBorder,
'border-b border-solid border-n-weak/60 dark:border-n-weak': showBorder,
}"
>
<div class="w-full xl:w-1/4 min-w-0 xl:max-w-[30%] pr-12">
<p
v-if="title"
class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
>
{{ title }}
</p>
<p
class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
>
<slot v-if="subTitle" name="subTitle">
{{ subTitle }}
</slot>
</p>
<p v-if="note">
<span class="font-semibold">{{ $t('INBOX_MGMT.NOTE') }}</span>
{{ note }}
</p>
</div>
<div class="w-full xl:w-1/2 min-w-0 xl:max-w-[50%]">
<slot />
<div class="grid grid-cols-1 lg:grid-cols-6 gap-6">
<div class="col-span-2 xl:col-span-1">
<p
v-if="title"
class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
>
{{ title }}
</p>
<p
class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
>
<slot v-if="subTitle" name="subTitle">
{{ subTitle }}
</slot>
</p>
<p v-if="note">
<span class="font-semibold">{{ $t('INBOX_MGMT.NOTE') }}</span>
{{ note }}
</p>
</div>
<div class="col-span-4 lg:col-span-4 2xl:col-span-3">
<slot />
</div>
</div>
</div>
</template>

9
app/javascript/dashboard/components/ui/PreviewCard.vue
View File

@@ -23,17 +23,16 @@ export default {
<template>
<div
class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-n-strong"
:class="{
'bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400':
'bg-woot-25 dark:bg-n-solid-2 border border-solid border-n-blue-border':
active,
}"
>
<div
class="flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600"
class="flex justify-between items-center rounded-t-md px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 border-b border-solid border-n-strong"
:class="{
'bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700':
active,
'bg-woot-50 border-b border-solid border-n-blue-border': active,
}"
>
<div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>

8
app/javascript/dashboard/components/ui/Switch.vue
View File

@@ -38,20 +38,20 @@ export default {
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 19px;
height: 1.188rem;
position: relative;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 34px;
width: 2.125rem;
&.active {
background-color: var(--w-500);
}
&.small {
width: 22px;
height: 14px;
width: 1.375rem;
height: 0.875rem;
span {
height: var(--space-one);

39
app/javascript/dashboard/components/ui/Tabs/Tabs.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, provide, onMounted, computed } from 'vue';
import { useEventListener } from '@vueuse/core';
import { ref, useTemplateRef, provide, computed, watch } from 'vue';
import { useElementSize } from '@vueuse/core';
const props = defineProps({
index: {
@@ -19,6 +19,12 @@ const props = defineProps({
const emit = defineEmits(['change']);
const tabsContainer = useTemplateRef('tabsContainer');
const tabsList = useTemplateRef('tabsList');
const { width: containerWidth } = useElementSize(tabsContainer);
const { width: listWidth } = useElementSize(tabsList);
const hasScroll = ref(false);
const activeIndex = computed({
@@ -34,20 +40,16 @@ provide('updateActiveIndex', index => {
});
const computeScrollWidth = () => {
// TODO: use useElementSize from vueuse
const tabElement = document.querySelector('.tabs');
if (tabElement) {
hasScroll.value = tabElement.scrollWidth > tabElement.clientWidth;
if (tabsContainer.value && tabsList.value) {
hasScroll.value = tabsList.value.scrollWidth > tabsList.value.clientWidth;
}
};
const onScrollClick = direction => {
// TODO: use useElementSize from vueuse
const tabElement = document.querySelector('.tabs');
if (tabElement) {
let scrollPosition = tabElement.scrollLeft;
if (tabsContainer.value && tabsList.value) {
let scrollPosition = tabsList.value.scrollLeft;
scrollPosition += direction === 'left' ? -100 : 100;
tabElement.scrollTo({
tabsList.value.scrollTo({
top: 0,
left: scrollPosition,
behavior: 'smooth',
@@ -55,14 +57,19 @@ const onScrollClick = direction => {
}
};
useEventListener(window, 'resize', computeScrollWidth);
onMounted(() => {
computeScrollWidth();
});
// Watch for changes in element sizes with immediate execution
watch(
[containerWidth, listWidth],
() => {
computeScrollWidth();
},
{ immediate: true }
);
</script>
<template>
<div
ref="tabsContainer"
:class="{
'tabs--container--with-border': border,
'tabs--container--compact': isCompact,
@@ -76,7 +83,7 @@ onMounted(() => {
>
<fluent-icon icon="chevron-left" :size="16" />
</button>
<ul :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
<ul ref="tabsList" :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
<slot />
</ul>
<button

10
app/javascript/dashboard/components/ui/Wizard.vue
View File

@@ -72,26 +72,26 @@ export default {
&.active {
h3 {
@apply text-woot-500 dark:text-woot-500;
@apply text-n-blue-text dark:text-n-blue-text;
}
.step {
@apply bg-woot-500 dark:bg-woot-500;
@apply bg-n-brand dark:bg-n-brand;
}
}
&.over {
&::after {
@apply bg-woot-500 dark:bg-woot-500;
@apply bg-n-brand dark:bg-n-brand;
}
.step {
@apply bg-woot-500 dark:bg-woot-500;
@apply bg-n-brand dark:bg-n-brand;
}
& + .item {
&::before {
@apply bg-woot-500 dark:bg-woot-500;
@apply bg-n-brand dark:bg-n-brand;
}
}
}

4
app/javascript/dashboard/components/widgets/AutomationActionInput.vue
View File

@@ -201,10 +201,10 @@ export default {
<style lang="scss" scoped>
.filter {
@apply bg-slate-50 dark:bg-slate-800 p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
@apply bg-n-slate-3 dark:bg-n-solid-3 p-2 border border-solid border-n-strong dark:border-n-strong rounded-md mb-2;
&.is-a-macro {
@apply mb-0 bg-white dark:bg-slate-700 p-0 border-0 rounded-none;
@apply mb-0 bg-n-slate-2 dark:bg-n-solid-3 p-0 border-0 rounded-none;
}
}

2
app/javascript/dashboard/components/widgets/FilterInput/Index.vue
View File

@@ -128,7 +128,7 @@ export default {
getInputErrorClass(errorMessage) {
return errorMessage
? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
: 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
: 'bg-n-slate-3 dark:bg-n-solid-3 border-n-strong dark:border-n-strong';
},
},
};

2
app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
View File

@@ -14,7 +14,7 @@ export default {
</script>
<template>
<div class="pt-4 pb-0 px-8 border-b border-solid border-n-weak">
<div class="pt-4 pb-0 px-8 border-b border-solid border-n-weak/60">
<h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
{{ headerTitle }}
</h2>

2
app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
View File

@@ -85,7 +85,7 @@ export default {
</script>
<template>
<div class="flex justify-between h-[52px] gap-2 ltr:pl-3 rtl:pr-3">
<div class="flex justify-between h-[3.25rem] gap-2 ltr:pl-3 rtl:pr-3">
<EditorModeToggle
:mode="mode"
class="mt-3"

2
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
View File

@@ -411,7 +411,7 @@ export default {
}
.checkbox-wrapper {
@apply h-10 w-10 flex items-center justify-center rounded-full cursor-pointer mt-4;
@apply flex items-center justify-center rounded-full cursor-pointer mt-4;
input[type='checkbox'] {
@apply m-0 cursor-pointer;

2
app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
View File

@@ -53,7 +53,7 @@ const showCopilotTab = computed(() =>
<template>
<div
class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[320px] w-[320px] 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-80 min-w-80 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
>
<div v-if="showCopilotTab" class="p-2">
<TabBar

6
app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
View File

@@ -45,7 +45,7 @@ const statusDesiredOrder = [
];
const isCreating = ref(false);
const inputStyles = { borderRadius: '12px', fontSize: '14px' };
const inputStyles = { borderRadius: '0.75rem', fontSize: '0.875rem' };
const formState = reactive({
title: '',
@@ -209,7 +209,7 @@ onMounted(getTeams);
v-model="formState.title"
:class="{ error: v$.title.$error }"
class="w-full"
:styles="{ ...inputStyles, padding: '6px 12px' }"
:styles="{ ...inputStyles, padding: '0.375rem 0.75rem' }"
:label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.LABEL')"
:placeholder="
$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.PLACEHOLDER')
@@ -221,7 +221,7 @@ onMounted(getTeams);
{{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL') }}
<textarea
v-model="formState.description"
:style="{ ...inputStyles, padding: '8px 12px' }"
:style="{ ...inputStyles, padding: '0.5rem 0.75rem' }"
rows="3"
class="text-sm"
:placeholder="