scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 03:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update create SLA modal design (#9182)

Browse Source 
---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Shivam Mishra
2024-04-09 09:32:01 +05:30
committed by GitHub
parent 8fe3c91813
commit 626f487232
5 changed files with 50 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/dashboard/components/Modal.vue
View File

@@ -7,7 +7,13 @@
@mousedown="handleMouseDown"
>
<div
:class="modalContainerClassName"
:class="{
'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
'rounded-xl w-[37.5rem]': !fullWidth,
'items-center rounded-none flex h-full justify-center w-full':
fullWidth,
[size]: true,
}"
@mouse.stop
@mousedown="event => event.stopPropagation()"
>
@@ -16,7 +22,7 @@
color-scheme="secondary"
icon="dismiss"
variant="clear"
class="absolute ltr:right-2 rtl:left-2 top-2 z-10"
class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
@click="close"
/>
<slot />
@@ -60,15 +66,6 @@ export default {
};
},
computed: {
modalContainerClassName() {
let className =
'modal-container rtl:text-right shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem] bg-white dark:bg-slate-800 skip-context-menu';
if (this.fullWidth) {
return `${className} items-center rounded-none flex h-full justify-center w-full`;
}
return `${className} ${this.size}`;
},
modalClassName() {
const modalClassNameMap = {
centered: '',

8
app/javascript/dashboard/components/ModalHeader.vue
View File

@@ -1,21 +1,21 @@
<template>
<div class="flex flex-col items-start pt-8 px-8 pb-0">
<div class="flex flex-col items-start px-8 pt-8 pb-0">
<img v-if="headerImage" :src="headerImage" alt="No image" />
<h2
ref="modalHeaderTitle"
class="text-slate-800 text-lg font-semibold dark:text-slate-50"
class="text-base font-semibold leading-6 text-slate-800 dark:text-slate-50"
>
{{ headerTitle }}
</h2>
<p
v-if="headerContent"
ref="modalHeaderContent"
class="w-full break-words text-slate-600 mt-2 text-sm dark:text-slate-300"
class="w-full mt-2 text-sm leading-5 break-words text-slate-600 dark:text-slate-300"
>
{{ headerContent }}
<span
v-if="headerContentValue"
class="font-semibold text-sm text-slate-600 dark:text-slate-300"
class="text-sm font-semibold text-slate-600 dark:text-slate-300"
>
{{ headerContentValue }}
</span>

2
app/javascript/dashboard/i18n/locale/en/sla.json
View File

@@ -65,7 +65,7 @@
},
"ADD": {
"TITLE": "Add SLA",
"DESC": "SLAs: Friendly promises for great service!",
"DESC": "Friendly promises for great service!",
"API": {
"SUCCESS_MESSAGE": "SLA added successfully",
"ERROR_MESSAGE": "There was an error, please try again"

32
app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
View File

@@ -5,6 +5,11 @@
v-model="name"
:class="{ error: $v.name.$error }"
class="w-full"
:styles="{
borderRadius: '12px',
padding: '6px 12px',
fontSize: '14px',
}"
:label="$t('SLA.FORM.NAME.LABEL')"
:placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
:error="getSlaNameErrorMessage"
@@ -13,6 +18,11 @@
<woot-input
v-model="description"
class="w-full"
:styles="{
borderRadius: '12px',
padding: '6px 12px',
fontSize: '14px',
}"
:label="$t('SLA.FORM.DESCRIPTION.LABEL')"
:placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
/>
@@ -29,23 +39,29 @@
@isInValid="handleIsInvalid(index, $event)"
/>
<div class="flex items-center w-full gap-2">
<input id="sla_bh" v-model="onlyDuringBusinessHours" type="checkbox" />
<label for="sla_bh">
<div
class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
>
<span for="sla_bh" class="text-slate-700 dark:text-slate-200">
{{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
</label>
</span>
<woot-switch id="sla_bh" v-model="onlyDuringBusinessHours" />
</div>
<div class="flex items-center justify-end w-full gap-2 px-0 py-2">
<div class="flex items-center justify-end w-full gap-2 mt-8">
<woot-button
class="px-4 rounded-xl button clear outline-woot-200/50 outline"
@click.prevent="onClose"
>
{{ $t('SLA.FORM.CANCEL') }}
</woot-button>
<woot-button
:is-disabled="isSubmitDisabled"
class="px-4 rounded-xl"
:is-loading="uiFlags.isUpdating"
>
{{ submitLabel }}
</woot-button>
<woot-button class="button clear" @click.prevent="onClose">
{{ $t('SLA.FORM.CANCEL') }}
</woot-button>
</div>
</form>
</div>

20
app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
View File

@@ -1,18 +1,24 @@
<template>
<div class="relative mt-2 w-full">
<div class="flex items-center w-full gap-3">
<woot-input
v-model="thresholdTime"
:class="{ error: $v.thresholdTime.$error }"
class="w-full [&>input]:pr-24"
class="flex-grow"
:styles="{
borderRadius: '12px',
padding: '6px 12px',
fontSize: '14px',
}"
:label="label"
:placeholder="placeholder"
:error="getThresholdTimeErrorMessage"
@input="onThresholdTimeChange"
/>
<div class="absolute right-px h-9 top-[27px] flex items-center">
<!-- the mt-7 handles the label offset -->
<div class="mt-7">
<select
v-model="thresholdUnitValue"
class="h-full rounded-[4px] hover:cursor-pointer font-medium border-1 border-solid bg-transparent border-transparent dark:border-transparent mb-0 py-0 pl-2 pr-7 text-slate-600 dark:text-slate-300 dark:focus:border-woot-500 focus:border-woot-500 text-sm"
class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
@change="onThresholdUnitChange"
>
<option
@@ -56,9 +62,9 @@ export default {
thresholdTime: this.threshold || '',
thresholdUnitValue: this.thresholdUnit,
options: [
{ value: 'Minutes', label: 'Minutes' },
{ value: 'Hours', label: 'Hours' },
{ value: 'Days', label: 'Days' },
{ value: 'Minutes', label: 'minutes' },
{ value: 'Hours', label: 'hours' },
{ value: 'Days', label: 'days' },
],
};
},