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:
parent
1115bd18ed
commit
ba7f387dde
1 changed files with 45 additions and 28 deletions
|
@ -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,11 +133,13 @@
|
|||
}}
|
||||
</p>
|
||||
</label>
|
||||
<div v-if="greetingEnabled" class="settings-item">
|
||||
<greetings-editor
|
||||
v-if="greetingEnabled"
|
||||
v-model.trim="greetingMessage"
|
||||
:label="
|
||||
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
|
||||
$t(
|
||||
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
|
||||
)
|
||||
"
|
||||
:placeholder="
|
||||
$t(
|
||||
|
@ -145,7 +148,8 @@
|
|||
"
|
||||
:richtext="!textAreaChannels"
|
||||
/>
|
||||
<label class="medium-9 columns">
|
||||
</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>
|
||||
|
|
Loading…
Reference in a new issue