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

* 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

View file

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