KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Reduces clutter in inbox settings page (#3960)

Browse source 
* chore: Reduces clutter in inbox settings page

* Fix spacing issues

Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Nithin David Thomas 2022-02-11 08:38:42 +05:30 committed by GitHub
parent 1115bd18ed
commit ba7f387dde
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 45 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
View file

@ -22,13 +22,14 @@
<woot-avatar-uploader <woot-avatar-uploader
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')" :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
:src="avatarUrl" :src="avatarUrl"
class="settings-item"
delete-avatar delete-avatar
@change="handleImageUpload" @change="handleImageUpload"
@onAvatarDelete="handleAvatarDelete" @onAvatarDelete="handleAvatarDelete"
/> />
<woot-input <woot-input
v-model.trim="selectedInboxName" v-model.trim="selectedInboxName"
class="medium-9 columns" class="medium-9 columns settings-item"
:label="inboxNameLabel" :label="inboxNameLabel"
:placeholder="inboxNamePlaceHolder" :placeholder="inboxNamePlaceHolder"
/> />
@ -47,7 +48,7 @@
<woot-input <woot-input
v-if="isAPIInbox" v-if="isAPIInbox"
v-model.trim="webhookUrl" v-model.trim="webhookUrl"
class="medium-9 columns" class="medium-9 columns settings-item"
:class="{ error: $v.webhookUrl.$error }" :class="{ error: $v.webhookUrl.$error }"
:label=" :label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL') $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
@ -65,7 +66,7 @@
<woot-input <woot-input
v-if="isAWebWidgetInbox" v-if="isAWebWidgetInbox"
v-model.trim="channelWebsiteUrl" v-model.trim="channelWebsiteUrl"
class="medium-9 columns" class="medium-9 columns settings-item"
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')" :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
:placeholder=" :placeholder="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER') $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
@ -74,7 +75,7 @@
<woot-input <woot-input
v-if="isAWebWidgetInbox" v-if="isAWebWidgetInbox"
v-model.trim="channelWelcomeTitle" v-model.trim="channelWelcomeTitle"
class="medium-9 columns" class="medium-9 columns settings-item"
:label=" :label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL') $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
" "
@ -88,7 +89,7 @@
<woot-input <woot-input
v-if="isAWebWidgetInbox" v-if="isAWebWidgetInbox"
v-model.trim="channelWelcomeTagline" v-model.trim="channelWelcomeTagline"
class="medium-9 columns" class="medium-9 columns settings-item"
:label=" :label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL') $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
" "
@ -99,12 +100,12 @@
" "
/> />
<label v-if="isAWebWidgetInbox" class="medium-9 columns"> <label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }} {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
<woot-color-picker v-model="inbox.widget_color" /> <woot-color-picker v-model="inbox.widget_color" />
</label> </label>
<label class="medium-9 columns"> <label class="medium-9 columns settings-item">
{{ {{
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL') $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
}} }}
@ -132,11 +133,13 @@
}} }}
</p> </p>
</label> </label>
<div v-if="greetingEnabled" class="settings-item">
<greetings-editor <greetings-editor
v-if="greetingEnabled"
v-model.trim="greetingMessage" v-model.trim="greetingMessage"
:label=" :label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL') $t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
)
" "
:placeholder=" :placeholder="
$t( $t(
@ -145,7 +148,8 @@
" "
:richtext="!textAreaChannels" :richtext="!textAreaChannels"
/> />
<label class="medium-9 columns"> </div>
<label class="medium-9 columns settings-item">
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }} {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
<select v-model="replyTime"> <select v-model="replyTime">
<option key="in_a_few_minutes" value="in_a_few_minutes"> <option key="in_a_few_minutes" value="in_a_few_minutes">
@ -168,7 +172,7 @@
</p> </p>
</label> </label>
<label v-if="isAWebWidgetInbox" class="medium-9 columns"> <label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }} {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
<select v-model="emailCollectEnabled"> <select v-model="emailCollectEnabled">
<option :value="true"> <option :value="true">
@ -185,7 +189,7 @@
</p> </p>
</label> </label>
<label class="medium-9 columns"> <label class="medium-9 columns settings-item">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }} {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
<select v-model="autoAssignment"> <select v-model="autoAssignment">
<option :value="true"> <option :value="true">
@ -200,7 +204,7 @@
</p> </p>
</label> </label>
<label class="medium-9 columns"> <label class="medium-9 columns settings-item">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }} {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
<select v-model="csatSurveyEnabled"> <select v-model="csatSurveyEnabled">
<option :value="true"> <option :value="true">
@ -215,7 +219,7 @@
</p> </p>
</label> </label>
<label v-if="isAWebWidgetInbox" class="medium-9 columns"> <label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }} {{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
<select v-model="allowMessagesAfterResolved"> <select v-model="allowMessagesAfterResolved">
<option :value="true"> <option :value="true">
@ -234,7 +238,7 @@
</p> </p>
</label> </label>
<label v-if="isAWebWidgetInbox" class="medium-9 columns"> <label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }} {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
<select v-model="continuityViaEmail"> <select v-model="continuityViaEmail">
<option :value="true"> <option :value="true">
@ -256,7 +260,10 @@
<label v-if="isAWebWidgetInbox"> <label v-if="isAWebWidgetInbox">
{{ $t('INBOX_MGMT.FEATURES.LABEL') }} {{ $t('INBOX_MGMT.FEATURES.LABEL') }}
</label> </label>
<div v-if="isAWebWidgetInbox" class="widget--feature-flag"> <div
v-if="isAWebWidgetInbox"
class="widget--feature-flag settings-item"
>
<input <input
v-model="selectedFeatureFlags" v-model="selectedFeatureFlags"
type="checkbox" type="checkbox"
@ -267,7 +274,7 @@
{{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }} {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
</label> </label>
</div> </div>
<div v-if="isAWebWidgetInbox"> <div v-if="isAWebWidgetInbox" class="settings-item settings-item">
<input <input
v-model="selectedFeatureFlags" v-model="selectedFeatureFlags"
type="checkbox" type="checkbox"
@ -750,4 +757,14 @@ export default {
.widget--feature-flag { .widget--feature-flag {
padding-top: var(--space-small); padding-top: var(--space-small);
} }
.settings-item {
padding-bottom: var(--space-normal);
.help-text {
font-style: normal;
color: var(--b-500);
padding-bottom: var(--space-smaller);
}
}
</style> </style>