Merge branch 'develop' into feat/CW-2065
This commit is contained in:
Sivin Varghese
@@ -972,7 +972,7 @@ export default {
|
||||
|
||||
.conversations-list-wrap {
|
||||
flex-shrink: 0;
|
||||
flex-basis: clamp(32rem, 4vw + 34rem, 44rem);
|
||||
flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem);
|
||||
overflow: hidden;
|
||||
|
||||
&.hide {
|
||||
|
||||
@@ -343,11 +343,11 @@ export default {
|
||||
.error-message {
|
||||
color: var(--r-400);
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
font-size: 0.875rem;
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: 400;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: -1.6rem;
|
||||
margin-bottom: 0.625rem;
|
||||
margin-top: -1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -106,7 +106,7 @@ export default {
|
||||
.modal-container {
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
width: 48rem;
|
||||
width: 30rem;
|
||||
}
|
||||
}
|
||||
.modal-big {
|
||||
|
||||
@@ -77,7 +77,7 @@ export default {
|
||||
@import '~dashboard/assets/scss/mixins';
|
||||
|
||||
.ui-notification-container {
|
||||
max-width: 40rem;
|
||||
max-width: 25rem;
|
||||
position: absolute;
|
||||
right: var(--space-normal);
|
||||
top: var(--space-normal);
|
||||
@@ -94,7 +94,7 @@ export default {
|
||||
border-radius: var(--border-radius-medium);
|
||||
box-shadow: var(--shadow-large);
|
||||
|
||||
min-width: 24rem;
|
||||
min-width: 15rem;
|
||||
padding: var(--space-normal);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="row settings--section">
|
||||
<div class="row settings--section" :class="{ border: showBorder }">
|
||||
<div class="medium-4 small-12 title--section">
|
||||
<p class="sub-block-title">
|
||||
<p v-if="title" class="sub-block-title">
|
||||
{{ title }}
|
||||
</p>
|
||||
<p class="sub-head">
|
||||
<slot name="subTitle">
|
||||
<slot v-if="subTitle" name="subTitle">
|
||||
{{ subTitle }}
|
||||
</slot>
|
||||
</p>
|
||||
@@ -25,11 +25,15 @@ export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: '',
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: '',
|
||||
},
|
||||
showBorder: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
note: {
|
||||
type: String,
|
||||
@@ -43,9 +47,13 @@ export default {
|
||||
@import '~dashboard/assets/scss/variables';
|
||||
|
||||
.settings--section {
|
||||
border-bottom: 1px solid $color-border;
|
||||
display: flex;
|
||||
padding: $space-normal $space-normal $space-normal 0;
|
||||
padding: 0 $space-normal $space-normal 0;
|
||||
|
||||
&.border {
|
||||
padding-top: $space-normal;
|
||||
border-bottom: 1px solid $color-border;
|
||||
}
|
||||
|
||||
.sub-block-title {
|
||||
color: $color-woot;
|
||||
|
||||
@@ -50,15 +50,6 @@
|
||||
>
|
||||
<woot-dropdown-menu>
|
||||
<woot-dropdown-item v-if="!isPending">
|
||||
<woot-button
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
size="small"
|
||||
icon="book-clock"
|
||||
@click="() => toggleStatus(STATUS_TYPE.PENDING)"
|
||||
>
|
||||
{{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
@@ -69,6 +60,17 @@
|
||||
{{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
|
||||
</woot-button>
|
||||
</woot-dropdown-item>
|
||||
<woot-dropdown-item v-if="!isPending">
|
||||
<woot-button
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
size="small"
|
||||
icon="book-clock"
|
||||
@click="() => toggleStatus(STATUS_TYPE.PENDING)"
|
||||
>
|
||||
{{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
|
||||
</woot-button>
|
||||
</woot-dropdown-item>
|
||||
</woot-dropdown-menu>
|
||||
</div>
|
||||
<woot-modal
|
||||
@@ -258,11 +260,11 @@ export default {
|
||||
|
||||
.dropdown-pane {
|
||||
left: unset;
|
||||
top: 4.2rem;
|
||||
top: 2.625rem;
|
||||
margin-top: var(--space-micro);
|
||||
right: 0;
|
||||
max-width: 20rem;
|
||||
min-width: 15.6rem;
|
||||
max-width: 12.5rem;
|
||||
min-width: 9.75rem;
|
||||
|
||||
.dropdown-menu__item {
|
||||
margin-bottom: 0;
|
||||
|
||||
@@ -230,7 +230,7 @@ export default {
|
||||
|
||||
.account-selector--modal {
|
||||
.modal-container {
|
||||
width: 40rem;
|
||||
width: 25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -284,7 +284,7 @@ export default {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 6rem;
|
||||
height: 3.75rem;
|
||||
}
|
||||
|
||||
.current-user--options {
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
>
|
||||
<a
|
||||
:href="href"
|
||||
class="button small clear secondary"
|
||||
class="button small clear secondary custom-sidebar--button"
|
||||
:class="{ 'is-active': isActive }"
|
||||
@click="e => handleProfileSettingClick(e, navigate)"
|
||||
>
|
||||
@@ -64,7 +64,7 @@
|
||||
<woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
|
||||
<a
|
||||
href="/super_admin"
|
||||
class="button small clear secondary"
|
||||
class="button small clear secondary custom-sidebar--button"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
@click="$emit('close')"
|
||||
@@ -157,4 +157,9 @@ export default {
|
||||
top: unset;
|
||||
z-index: var(--z-index-low);
|
||||
}
|
||||
|
||||
.custom-sidebar--button {
|
||||
height: var(--space-large) !important;
|
||||
padding: var(--space-smaller) 0.675rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -260,7 +260,7 @@ export default {
|
||||
background: var(--white);
|
||||
border-right: 1px solid var(--s-50);
|
||||
height: 100%;
|
||||
width: 20rem;
|
||||
width: 12.5rem;
|
||||
flex-shrink: 0;
|
||||
overflow-y: hidden;
|
||||
position: unset;
|
||||
|
||||
@@ -52,8 +52,8 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.announcement-popup {
|
||||
max-width: 24rem;
|
||||
min-width: 16rem;
|
||||
max-width: 15rem;
|
||||
min-width: 10rem;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -13,9 +13,10 @@
|
||||
<div class="content-wrap">
|
||||
{{ content }}
|
||||
</div>
|
||||
<div class="image-wrap">
|
||||
<div v-if="src" class="image-wrap">
|
||||
<img :src="src" class="image" :class="{ activeimage: active }" />
|
||||
</div>
|
||||
<slot v-else />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -52,9 +53,9 @@ export default {
|
||||
border: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 34rem;
|
||||
max-width: 38rem;
|
||||
min-width: 24rem;
|
||||
max-height: 21.25rem;
|
||||
max-width: 23.75rem;
|
||||
min-width: 15rem;
|
||||
|
||||
.header--wrap {
|
||||
background: var(--s-50);
|
||||
@@ -62,7 +63,7 @@ export default {
|
||||
border-top-left-radius: var(--border-radius-normal);
|
||||
border-top-right-radius: var(--border-radius-normal);
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
height: 2.5rem;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-small);
|
||||
width: 100%;
|
||||
|
||||
@@ -61,7 +61,7 @@ export default {
|
||||
}
|
||||
|
||||
span {
|
||||
--space-one-point-five: 1.5rem;
|
||||
--space-one-point-five: 0.9375rem;
|
||||
background-color: var(--white);
|
||||
border-radius: 100%;
|
||||
box-shadow: var(--toggle-button-box-shadow);
|
||||
|
||||
@@ -75,7 +75,7 @@ export default {
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
margin-top: var(--space-normal);
|
||||
max-height: 20rem;
|
||||
max-height: 12.5rem;
|
||||
}
|
||||
|
||||
.preview-item {
|
||||
@@ -84,7 +84,7 @@ export default {
|
||||
background: var(--color-background-light);
|
||||
background: var(--b-50);
|
||||
border-radius: var(--border-radius-normal);
|
||||
width: 24rem;
|
||||
width: 15rem;
|
||||
padding: var(--space-smaller);
|
||||
margin-bottom: var(--space-one);
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@ export default {
|
||||
.option-item--inbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 3.8rem;
|
||||
height: 2.375rem;
|
||||
min-width: 0;
|
||||
padding: 0 var(--space-smaller);
|
||||
}
|
||||
|
||||
@@ -225,8 +225,8 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.audio-wave-wrapper {
|
||||
min-height: 8rem;
|
||||
height: 8rem;
|
||||
min-height: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
.video-js .vjs-control-bar {
|
||||
background-color: transparent;
|
||||
|
||||
@@ -468,8 +468,8 @@ export default {
|
||||
}
|
||||
|
||||
.ProseMirror-woot-style {
|
||||
min-height: 8rem;
|
||||
max-height: 12rem;
|
||||
min-height: 5rem;
|
||||
max-height: 7.5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -230,8 +230,8 @@ export default {
|
||||
}
|
||||
|
||||
.ProseMirror-woot-style {
|
||||
min-height: 8rem;
|
||||
max-height: 12rem;
|
||||
min-height: 5rem;
|
||||
max-height: 7.5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -241,6 +241,6 @@ export default {
|
||||
box-shadow: var(--shadow-large);
|
||||
border-radius: var(--border-radius-normal);
|
||||
border: 1px solid var(--color-border);
|
||||
min-width: 40rem;
|
||||
min-width: 25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -365,6 +365,6 @@ export default {
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 8rem;
|
||||
font-size: 5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
+1
-1
@@ -90,7 +90,7 @@ export default {
|
||||
margin-top: var(--space-smaller);
|
||||
padding: var(--space-normal);
|
||||
right: 0;
|
||||
width: 21rem;
|
||||
width: 13.125rem;
|
||||
|
||||
span {
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
@@ -176,23 +176,23 @@ export default {
|
||||
flex-basis: 100%;
|
||||
|
||||
@include breakpoint(medium up) {
|
||||
flex-basis: 28rem;
|
||||
flex-basis: 17.5rem;
|
||||
}
|
||||
|
||||
@include breakpoint(large up) {
|
||||
flex-basis: 30em;
|
||||
flex-basis: 18.75rem;
|
||||
}
|
||||
|
||||
@include breakpoint(xlarge up) {
|
||||
flex-basis: 31em;
|
||||
flex-basis: 19.375rem;
|
||||
}
|
||||
|
||||
@include breakpoint(xxlarge up) {
|
||||
flex-basis: 33rem;
|
||||
flex-basis: 20.625rem;
|
||||
}
|
||||
|
||||
@include breakpoint(xxxlarge up) {
|
||||
flex-basis: 40rem;
|
||||
flex-basis: 25rem;
|
||||
}
|
||||
|
||||
&::v-deep .contact--panel {
|
||||
|
||||
@@ -116,7 +116,7 @@ export default {
|
||||
|
||||
img {
|
||||
margin: var(--space-normal);
|
||||
width: 10rem;
|
||||
width: 6.25rem;
|
||||
}
|
||||
|
||||
span {
|
||||
|
||||
@@ -520,7 +520,7 @@ export default {
|
||||
|
||||
.image,
|
||||
.video {
|
||||
max-width: 32rem;
|
||||
max-width: 20rem;
|
||||
padding: var(--space-micro);
|
||||
|
||||
> img,
|
||||
@@ -534,13 +534,13 @@ export default {
|
||||
}
|
||||
}
|
||||
.video {
|
||||
height: 18rem;
|
||||
height: 11.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-image.is-text > .message-text__wrap,
|
||||
&.is-video.is-text > .message-text__wrap {
|
||||
max-width: 32rem;
|
||||
max-width: 20rem;
|
||||
padding: var(--space-small) var(--space-normal);
|
||||
}
|
||||
|
||||
|
||||
@@ -430,22 +430,22 @@ export default {
|
||||
.modal-mask {
|
||||
&::v-deep {
|
||||
.ProseMirror-woot-style {
|
||||
max-height: 40rem;
|
||||
max-height: 25rem;
|
||||
}
|
||||
|
||||
.reply-box {
|
||||
border: 1px solid var(--color-border);
|
||||
max-width: 120rem;
|
||||
max-width: 75rem;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.reply-box .reply-box__top {
|
||||
position: relative;
|
||||
min-height: 44rem;
|
||||
min-height: 27.5rem;
|
||||
}
|
||||
|
||||
.reply-box__top .input {
|
||||
min-height: 44rem;
|
||||
min-height: 27.5rem;
|
||||
}
|
||||
|
||||
.emoji-dialog {
|
||||
|
||||
@@ -112,7 +112,7 @@ export default {
|
||||
}
|
||||
|
||||
.scroll-wrap {
|
||||
padding: var(--space-larger) 13.6rem;
|
||||
padding: var(--space-larger) 8.5rem;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -96,7 +96,7 @@ export default {
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
line-height: 1.2;
|
||||
max-height: 20rem;
|
||||
max-height: 12.5rem;
|
||||
overflow: auto;
|
||||
padding: var(--space-small) var(--space-small) 0 var(--space-small);
|
||||
position: absolute;
|
||||
|
||||
+1
-1
@@ -71,6 +71,6 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.modal-content {
|
||||
padding: 2.5rem 3.2rem;
|
||||
padding: 1.5625rem 2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
+1
-1
@@ -125,7 +125,7 @@ export default {
|
||||
.template__list-container {
|
||||
background-color: var(--s-25);
|
||||
border-radius: var(--border-radius-medium);
|
||||
max-height: 30rem;
|
||||
max-height: 18.75rem;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-one);
|
||||
|
||||
|
||||
+1
-1
@@ -97,7 +97,7 @@ export default {
|
||||
button {
|
||||
position: absolute;
|
||||
top: var(--space-smaller);
|
||||
right: 16rem;
|
||||
right: 10rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -341,7 +341,7 @@ export default {
|
||||
display: flex;
|
||||
font-weight: var(--font-weight-bold);
|
||||
justify-content: center;
|
||||
min-width: 8rem;
|
||||
min-width: 5rem;
|
||||
padding: var(--space-smaller);
|
||||
}
|
||||
}
|
||||
|
||||
+4
-4
@@ -249,15 +249,15 @@ export default {
|
||||
}
|
||||
|
||||
.label-actions-box {
|
||||
--triangle-position: 8.5rem;
|
||||
--triangle-position: 5.3125rem;
|
||||
}
|
||||
.update-actions-box {
|
||||
--triangle-position: 5.6rem;
|
||||
--triangle-position: 3.5rem;
|
||||
}
|
||||
.agent-actions-box {
|
||||
--triangle-position: 2.8rem;
|
||||
--triangle-position: 1.75rem;
|
||||
}
|
||||
.team-actions-box {
|
||||
--triangle-position: 0.2rem;
|
||||
--triangle-position: 0.125rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -259,8 +259,8 @@ export default {
|
||||
justify-content: center;
|
||||
gap: var(--space-small);
|
||||
background: var(--s-25);
|
||||
height: 4rem;
|
||||
width: 5.2rem;
|
||||
height: 2.5rem;
|
||||
width: 3.25rem;
|
||||
border-radius: var(--border-radius-normal) 0 0 var(--border-radius-normal);
|
||||
padding: var(--space-small) var(--space-smaller) var(--space-small)
|
||||
var(--space-small);
|
||||
@@ -288,9 +288,9 @@ export default {
|
||||
z-index: var(--z-index-low);
|
||||
position: absolute;
|
||||
height: var(--space-giga);
|
||||
width: 20rem;
|
||||
width: 12.5rem;
|
||||
overflow-y: auto;
|
||||
top: 4rem;
|
||||
top: 2.5rem;
|
||||
border-radius: var(--border-radius-default);
|
||||
padding: 0 0 var(--space-smaller) 0;
|
||||
background-color: var(--white);
|
||||
@@ -314,7 +314,7 @@ export default {
|
||||
.country-dropdown--item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2.8rem;
|
||||
height: 1.75rem;
|
||||
padding: 0 var(--space-smaller);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -336,7 +336,7 @@ export default {
|
||||
}
|
||||
|
||||
.country-name {
|
||||
max-width: 12rem;
|
||||
max-width: 7.5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -85,7 +85,7 @@ export default {
|
||||
box-shadow: var(--shadow-medium);
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
max-height: 15.6rem;
|
||||
max-height: 9.75rem;
|
||||
overflow: auto;
|
||||
padding: var(--space-small) var(--space-small) 0;
|
||||
position: absolute;
|
||||
|
||||
@@ -138,7 +138,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: 40rem;
|
||||
min-width: 25rem;
|
||||
}
|
||||
|
||||
.forward-slash {
|
||||
|
||||
Reference in New Issue
Block a user