Sojan
parent
6186d14593
commit
2023d5d42b
20 changed files with 112 additions and 394 deletions
|
|
@ -10,8 +10,8 @@ class ConversationApi extends ApiClient {
|
|||
return axios.get(`${this.url}/${conversationID}/labels`);
|
||||
}
|
||||
|
||||
updateLabels(conversationID, labels) {
|
||||
return axios.post(`${this.url}/${conversationID}/labels`, { labels });
|
||||
createLabels(conversationID) {
|
||||
return axios.get(`${this.url}/${conversationID}/labels`);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import '~widget/assets/scss/mixins';
|
||||
|
||||
//borders
|
||||
@mixin border-nil() {
|
||||
border-color: transparent;
|
||||
|
|
@ -141,7 +139,7 @@
|
|||
}
|
||||
|
||||
@mixin elegent-shadow() {
|
||||
box-shadow: 0 10px 25px 0 rgba(49, 49, 93, 0.15);
|
||||
box-shadow: 0 10px 25px 0 rgba(49,49,93,0.15);
|
||||
}
|
||||
|
||||
@mixin elegant-card() {
|
||||
|
|
@ -183,55 +181,41 @@
|
|||
// .element{
|
||||
// @include arrow(top, #000, 50px);
|
||||
// }
|
||||
@mixin arrow($direction, $color, $size) {
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
content: '';
|
||||
@mixin arrow($direction, $color, $size){
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
content: '';
|
||||
|
||||
@if $direction=='top' {
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-bottom: $size solid $color;
|
||||
}
|
||||
|
||||
@else if $direction=='right' {
|
||||
border-top: $size solid transparent;
|
||||
border-bottom: $size solid transparent;
|
||||
border-left: $size solid $color;
|
||||
}
|
||||
|
||||
@else if $direction=='bottom' {
|
||||
border-top: $size solid $color;
|
||||
border-right: $size solid transparent;
|
||||
border-left: $size solid transparent;
|
||||
}
|
||||
|
||||
@else if $direction=='left' {
|
||||
border-top: $size solid transparent;
|
||||
border-right: $size solid $color;
|
||||
border-bottom: $size solid transparent;
|
||||
}
|
||||
|
||||
@else if $direction=='top-left' {
|
||||
border-top: $size solid $color;
|
||||
border-right: $size solid transparent;
|
||||
}
|
||||
|
||||
@else if $direction=='top-right' {
|
||||
border-top: $size solid $color;
|
||||
border-left: $size solid transparent;
|
||||
}
|
||||
|
||||
@else if $direction=='bottom-left' {
|
||||
border-bottom: $size solid $color;
|
||||
border-right: $size solid transparent;
|
||||
}
|
||||
|
||||
@else if $direction=='bottom-right' {
|
||||
border-bottom: $size solid $color;
|
||||
border-left: $size solid transparent;
|
||||
}
|
||||
@if $direction == 'top' {
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-bottom: $size solid $color;
|
||||
} @else if $direction == 'right' {
|
||||
border-top: $size solid transparent;
|
||||
border-bottom: $size solid transparent;
|
||||
border-left: $size solid $color;
|
||||
} @else if $direction == 'bottom' {
|
||||
border-top: $size solid $color;
|
||||
border-right: $size solid transparent;
|
||||
border-left: $size solid transparent;
|
||||
} @else if $direction == 'left' {
|
||||
border-top: $size solid transparent;
|
||||
border-right: $size solid $color;
|
||||
border-bottom: $size solid transparent;
|
||||
} @else if $direction == 'top-left' {
|
||||
border-top: $size solid $color;
|
||||
border-right: $size solid transparent;
|
||||
} @else if $direction == 'top-right' {
|
||||
border-top: $size solid $color;
|
||||
border-left: $size solid transparent;
|
||||
} @else if $direction == 'bottom-left' {
|
||||
border-bottom: $size solid $color;
|
||||
border-right: $size solid transparent;
|
||||
} @else if $direction == 'bottom-right' {
|
||||
border-bottom: $size solid $color;
|
||||
border-left: $size solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-ellipsis {
|
||||
|
|
|
|||
|
|
@ -53,16 +53,6 @@ $color-body: #3C4858;
|
|||
$color-heading: #1F2D3D;
|
||||
$color-extra-light-blue: #F5F7F9;
|
||||
|
||||
$primary-color: $color-woot;
|
||||
$secondary-color: #FF5216;
|
||||
$success-color: #13ce66;
|
||||
$warning-color: #ffc82c;
|
||||
$alert-color: #ff4949;
|
||||
|
||||
// Color-palettes
|
||||
|
||||
$color-primary-dark: darken($color-woot, 20%);
|
||||
|
||||
// Thumbnail
|
||||
$thumbnail-radius: 4rem;
|
||||
|
||||
|
|
@ -91,6 +81,3 @@ $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !d
|
|||
|
||||
// Ionicons
|
||||
$ionicons-font-path: '~ionicons/fonts';
|
||||
|
||||
// Transitions
|
||||
$transition-ease-in: all 0.250s ease-in;
|
||||
|
|
|
|||
|
|
@ -2,13 +2,7 @@
|
|||
margin-bottom: $space-normal;
|
||||
min-height: 38px;
|
||||
|
||||
&.multiselect--active {
|
||||
>.multiselect__tags {
|
||||
border-color: $color-woot;
|
||||
}
|
||||
}
|
||||
|
||||
>.multiselect__tags {
|
||||
> .multiselect__tags {
|
||||
@include margin(0);
|
||||
border: 1px solid $color-border;
|
||||
min-height: 44px;
|
||||
|
|
@ -19,34 +13,12 @@
|
|||
}
|
||||
|
||||
.multiselect__tag {
|
||||
|
||||
$vertical-space: $space-smaller+$space-micro;
|
||||
margin-top: $space-one;
|
||||
background: $color-background;
|
||||
color: $color-heading;
|
||||
padding: $vertical-space $space-medium $vertical-space $space-one;
|
||||
}
|
||||
|
||||
.multiselect__tag-icon {
|
||||
line-height: $space-medium + $space-micro;
|
||||
|
||||
&:after {
|
||||
color: $color-primary-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-background;
|
||||
|
||||
&:after {
|
||||
color: $color-woot;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__input {
|
||||
@include ghost-input;
|
||||
@include padding($zero);
|
||||
font-size: $font-size-small;
|
||||
|
||||
margin-bottom: $zero;
|
||||
}
|
||||
|
|
@ -69,50 +41,4 @@
|
|||
top: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__content .multiselect__option {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-normal;
|
||||
|
||||
&.multiselect__option--highlight {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-labels-wrap {
|
||||
|
||||
&.has-edited,
|
||||
&:hover {
|
||||
.multiselect {
|
||||
cursor: pointer;
|
||||
margin-top: $space-small;
|
||||
|
||||
>.multiselect__tags {
|
||||
border-color: $color-border;
|
||||
}
|
||||
|
||||
>.multiselect__select {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
|
||||
>.multiselect__select {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
>.multiselect__tags {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.multiselect--active {
|
||||
>.multiselect__tags {
|
||||
border-color: $color-woot;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,18 +24,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
>.icon {
|
||||
> .icon {
|
||||
font-size: $font-size-default;
|
||||
}
|
||||
|
||||
&.tiny {
|
||||
font-size: $font-size-mini;
|
||||
padding: $space-small $space-slab;
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: $space-larger;
|
||||
}
|
||||
}
|
||||
|
||||
.button--fixed-right-top {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
@include flex;
|
||||
@include flex-align($x: justify, $y: middle);
|
||||
@include border-normal-bottom;
|
||||
|
||||
// Resolve Button
|
||||
.button {
|
||||
@include margin(0);
|
||||
|
|
@ -45,7 +44,6 @@
|
|||
.user--name {
|
||||
@include margin(0);
|
||||
font-size: $font-size-medium;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.user--profile__meta {
|
||||
|
|
@ -66,7 +64,7 @@
|
|||
}
|
||||
|
||||
.button.resolve--button {
|
||||
>.icon {
|
||||
> .icon {
|
||||
padding-right: $space-small;
|
||||
font-size: $font-size-default;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,19 +47,16 @@
|
|||
@include background-gray;
|
||||
@include margin(0);
|
||||
@include border-normal-left;
|
||||
|
||||
.current-chat {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
flex-direction: column;
|
||||
@include flex-align(center, middle);
|
||||
|
||||
div {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
flex-direction: column;
|
||||
@include flex-align(center, middle);
|
||||
|
||||
img {
|
||||
@include margin($space-normal);
|
||||
width: 10rem;
|
||||
|
|
@ -90,7 +87,7 @@
|
|||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
>li {
|
||||
> li {
|
||||
@include flex;
|
||||
@include flex-shrink;
|
||||
@include margin($zero $zero $space-smaller);
|
||||
|
|
@ -150,7 +147,7 @@
|
|||
@include flex-align(right, null);
|
||||
|
||||
.wrap {
|
||||
margin-right: $space-normal;
|
||||
margin-right: $space-small;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
.tabs-title {
|
||||
a {
|
||||
font-size: $font-size-default;
|
||||
font-weight: $font-weight-medium;
|
||||
padding-bottom: $space-slab;
|
||||
padding-top: $space-slab;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
src="~dashboard/assets/images/fb-badge.png"
|
||||
/>
|
||||
<div
|
||||
v-else-if="status === 'online'"
|
||||
v-else-if="badge === 'Channel::WebWidget' && status === 'online'"
|
||||
class="source-badge user--online"
|
||||
:style="statusStyle"
|
||||
></div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
:username="chat.meta.sender.name"
|
||||
/>
|
||||
<div class="user--profile__meta">
|
||||
<h3 class="user--name text-truncate">
|
||||
<h3 v-if="!isContactPanelOpen" class="user--name text-truncate">
|
||||
{{ chat.meta.sender.name }}
|
||||
</h3>
|
||||
<button
|
||||
|
|
@ -93,9 +93,7 @@ export default {
|
|||
];
|
||||
},
|
||||
viewProfileButtonLabel() {
|
||||
return `${
|
||||
this.isContactPanelOpen ? 'Close' : 'Open'
|
||||
} Conversation Details`;
|
||||
return `${this.isContactPanelOpen ? 'Hide' : 'View'} Profile`;
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{
|
||||
"CONTACT_PANEL": {
|
||||
"CONVERSATION_TITLE": "Conversation Details",
|
||||
"BROWSER": "Browser",
|
||||
"OS": "Operating System",
|
||||
"INITIATED_FROM": "Initiated from",
|
||||
|
|
@ -11,10 +10,7 @@
|
|||
},
|
||||
"LABELS": {
|
||||
"NO_RECORDS_FOUND": "There are no labels associated to this conversation.",
|
||||
"TITLE": "Conversation Labels",
|
||||
"UPDATE_BUTTON": "Update Labels",
|
||||
"ADD_BUTTON": "Add Labels",
|
||||
"UPDATE_ERROR": "Couldn't update labels, try Again 🧐"
|
||||
"TITLE": "Labels"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
<template>
|
||||
<div class="contact-conversation--panel">
|
||||
<contact-details-item :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')" />
|
||||
<contact-details-item
|
||||
icon="ion-chatbubbles"
|
||||
:title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')"
|
||||
/>
|
||||
<div v-if="!uiFlags.isFetching">
|
||||
<p v-if="!previousConversations.length" class="no-results">
|
||||
<i v-if="!previousConversations.length">
|
||||
{{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
|
||||
</p>
|
||||
</i>
|
||||
<div v-else class="contact-conversation--list">
|
||||
<conversation-card
|
||||
v-for="conversation in previousConversations"
|
||||
|
|
@ -75,17 +78,11 @@ export default {
|
|||
@import '~dashboard/assets/scss/mixins';
|
||||
|
||||
.contact-conversation--panel {
|
||||
padding: $space-normal;
|
||||
padding-top: 0;
|
||||
@include border-normal-top;
|
||||
padding: $space-medium;
|
||||
}
|
||||
|
||||
.contact-conversation--list {
|
||||
margin-top: $space-normal;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
margin: 0;
|
||||
color: $color-gray;
|
||||
padding: 0 $space-small;
|
||||
margin-top: -$space-normal;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="conv-details--item">
|
||||
<h4 class="conv-details--item__label">
|
||||
<div class="conv-details--item__label">
|
||||
<i :class="icon" class="conv-details--item__icon"></i>
|
||||
{{ title }}
|
||||
</h4>
|
||||
</div>
|
||||
<div v-if="value" class="conv-details--item__value">
|
||||
{{ value }}
|
||||
</div>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
export default {
|
||||
props: {
|
||||
title: { type: String, required: true },
|
||||
icon: { type: String, default: '' },
|
||||
icon: { type: String, required: true },
|
||||
value: { type: [String, Number], default: '' },
|
||||
},
|
||||
};
|
||||
|
|
@ -32,18 +32,16 @@ export default {
|
|||
}
|
||||
|
||||
.conv-details--item__icon {
|
||||
padding-right: $space-smaller;
|
||||
padding-right: $space-micro;
|
||||
}
|
||||
|
||||
.conv-details--item__label {
|
||||
font-weight: $font-weight-medium;
|
||||
margin-bottom: $space-micro;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.conv-details--item__value {
|
||||
word-break: break-all;
|
||||
margin-top: $space-slab;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,12 +48,6 @@
|
|||
{{ contact.additional_attributes.description }}
|
||||
</div>
|
||||
</div>
|
||||
<conversation-labels :conversation-id="conversationId" />
|
||||
<contact-conversations
|
||||
v-if="contact.id"
|
||||
:contact-id="contact.id"
|
||||
:conversation-id="conversationId"
|
||||
/>
|
||||
<div v-if="browser" class="conversation--details">
|
||||
<contact-details-item
|
||||
v-if="browser.browser_name"
|
||||
|
|
@ -80,6 +74,13 @@
|
|||
icon="ion-clock"
|
||||
/>
|
||||
</div>
|
||||
<contact-conversations
|
||||
v-if="contact.id"
|
||||
:contact-id="contact.id"
|
||||
:conversation-id="conversationId"
|
||||
/>
|
||||
|
||||
<conversation-labels :conversation-id="conversationId" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -168,11 +169,9 @@ export default {
|
|||
}
|
||||
|
||||
.contact--profile {
|
||||
padding: $space-normal;
|
||||
width: 100%;
|
||||
padding: $space-normal $space-medium $zero;
|
||||
align-items: center;
|
||||
margin: $space-medium $space-normal 0;
|
||||
@include elegant-card;
|
||||
@include light-shadow;
|
||||
|
||||
.user-thumbnail-box {
|
||||
margin-right: $space-normal;
|
||||
|
|
@ -192,10 +191,9 @@ export default {
|
|||
|
||||
.contact--name {
|
||||
@include text-ellipsis;
|
||||
text-transform: capitalize;
|
||||
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: $font-size-medium;
|
||||
font-size: $font-size-default;
|
||||
}
|
||||
|
||||
.contact--email {
|
||||
|
|
@ -212,7 +210,8 @@ export default {
|
|||
}
|
||||
|
||||
.conversation--details {
|
||||
padding: $space-two $space-normal;
|
||||
padding: $space-medium;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.conversation--labels {
|
||||
|
|
|
|||
|
|
@ -1,51 +1,21 @@
|
|||
<template>
|
||||
<div
|
||||
class="contact-conversation--panel sidebar-labels-wrap"
|
||||
:class="hasEditedClass"
|
||||
>
|
||||
<div v-if="!conversationUiFlags.isFetching" class="wrap">
|
||||
<div class="contact-conversation--list">
|
||||
<label class="select-tags">
|
||||
{{ $t('CONTACT_PANEL.LABELS.TITLE') }}
|
||||
<p v-if="!savedLabels.length && !showLabelInput" class="no-results">
|
||||
{{ $t('CONTACT_PANEL.LABELS.NO_RECORDS_FOUND') }}
|
||||
<button
|
||||
type="button success"
|
||||
class="button nice tiny"
|
||||
@click="showLabelBox"
|
||||
>
|
||||
{{ $t('CONTACT_PANEL.LABELS.ADD_BUTTON') }}
|
||||
</button>
|
||||
</p>
|
||||
<multiselect
|
||||
v-if="showLabelInput || savedLabels.length"
|
||||
v-model="selectedLabels"
|
||||
:options="savedLabels"
|
||||
tag-placeholder="Add this as new tag"
|
||||
placeholder="Search or add a tag"
|
||||
:multiple="true"
|
||||
:taggable="true"
|
||||
@tag="addLabel"
|
||||
/>
|
||||
</label>
|
||||
<div class="row align-middle align-justify">
|
||||
<span v-if="labelUiFlags.isError" class="error">{{
|
||||
$t('CONTACT_PANEL.LABELS.UPDATE_ERROR')
|
||||
}}</span>
|
||||
<button
|
||||
v-if="hasEdited"
|
||||
type="button"
|
||||
class="button nice tiny"
|
||||
@click="onUpdateLabels"
|
||||
>
|
||||
<spinner v-if="labelUiFlags.isUpdating" size="tiny" />
|
||||
{{
|
||||
labelUiFlags.isUpdating
|
||||
? 'saving...'
|
||||
: $t('CONTACT_PANEL.LABELS.UPDATE_BUTTON')
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="contact-conversation--panel">
|
||||
<contact-details-item
|
||||
icon="ion-pricetags"
|
||||
:title="$t('CONTACT_PANEL.LABELS.TITLE')"
|
||||
/>
|
||||
<div v-if="!uiFlags.isFetching">
|
||||
<i v-if="!labels.length">
|
||||
{{ $t('CONTACT_PANEL.LABELS.NO_RECORDS_FOUND') }}
|
||||
</i>
|
||||
<div v-else class="contact-conversation--list">
|
||||
<span
|
||||
v-for="label in labels"
|
||||
:key="label"
|
||||
class="conversation--label label primary"
|
||||
>
|
||||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<spinner v-else></spinner>
|
||||
|
|
@ -54,11 +24,12 @@
|
|||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import Spinner from 'shared/components/Spinner';
|
||||
import ConversationAPI from '../../../api/conversations';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
import ContactDetailsItem from './ContactDetailsItem.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContactDetailsItem,
|
||||
Spinner,
|
||||
},
|
||||
props: {
|
||||
|
|
@ -67,75 +38,25 @@ export default {
|
|||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isSearching: false,
|
||||
selectedLabels: [],
|
||||
showLabelInput: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasEdited() {
|
||||
if (this.selectedLabels.length !== this.savedLabels.length) {
|
||||
return true;
|
||||
}
|
||||
const isSame = this.selectedLabels.every(label =>
|
||||
this.savedLabels.includes(label)
|
||||
labels() {
|
||||
return this.$store.getters['conversationLabels/getConversationLabels'](
|
||||
this.conversationId
|
||||
);
|
||||
return !isSame;
|
||||
},
|
||||
savedLabels() {
|
||||
const saved = this.$store.getters[
|
||||
'conversationLabels/getConversationLabels'
|
||||
](this.conversationId);
|
||||
return saved;
|
||||
},
|
||||
hasEditedClass() {
|
||||
return this.hasEdited ? 'has-edited' : '';
|
||||
},
|
||||
...mapGetters({
|
||||
conversationUiFlags: 'contactConversations/getUIFlags',
|
||||
labelUiFlags: 'conversationLabels/getUIFlags',
|
||||
uiFlags: 'contactConversations/getUIFlags',
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
conversationId(newConversationId, prevConversationId) {
|
||||
if (newConversationId && newConversationId !== prevConversationId) {
|
||||
this.$store
|
||||
.dispatch('conversationLabels/get', newConversationId)
|
||||
.then(() => {
|
||||
this.selectedLabels = [...this.savedLabels];
|
||||
});
|
||||
this.$store.dispatch('conversationLabels/get', newConversationId);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$store
|
||||
.dispatch('conversationLabels/get', this.conversationId)
|
||||
.then(() => {
|
||||
this.selectedLabels = [...this.savedLabels];
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
addLabel(label) {
|
||||
this.selectedLabels = [...this.selectedLabels, label];
|
||||
},
|
||||
asyncSearchLabels(query) {
|
||||
this.isSearching = true;
|
||||
ConversationAPI(query).then(response => {
|
||||
this.countries = response;
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
onUpdateLabels() {
|
||||
this.$store.dispatch('conversationLabels/update', {
|
||||
conversationId: this.conversationId,
|
||||
labels: this.selectedLabels,
|
||||
});
|
||||
},
|
||||
showLabelBox() {
|
||||
this.showLabelInput = true;
|
||||
},
|
||||
this.$store.dispatch('conversationLabels/get', this.conversationId);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -145,7 +66,12 @@ export default {
|
|||
@import '~dashboard/assets/scss/mixins';
|
||||
|
||||
.contact-conversation--panel {
|
||||
padding: $space-normal;
|
||||
@include border-normal-top;
|
||||
padding: $space-medium;
|
||||
}
|
||||
|
||||
.contact-conversation--list {
|
||||
margin-top: -$space-normal;
|
||||
}
|
||||
|
||||
.conversation--label {
|
||||
|
|
@ -154,36 +80,4 @@ export default {
|
|||
font-size: $font-size-small;
|
||||
padding: $space-smaller;
|
||||
}
|
||||
.wrap {
|
||||
margin-top: $space-slab;
|
||||
}
|
||||
|
||||
.select-tags {
|
||||
margin-top: $space-small;
|
||||
.multiselect {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
transition: $transition-ease-in;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: $space-small;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
margin: $space-normal 0 0 0;
|
||||
color: $color-gray;
|
||||
padding: 0 $space-small;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $alert-color;
|
||||
font-size: $font-size-mini;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ const state = {
|
|||
records: {},
|
||||
uiFlags: {
|
||||
isFetching: false,
|
||||
isUpdating: false,
|
||||
isError: false,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -40,30 +38,6 @@ export const actions = {
|
|||
});
|
||||
}
|
||||
},
|
||||
update: async ({ commit }, { conversationId, labels }) => {
|
||||
commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
|
||||
isUpdating: true,
|
||||
});
|
||||
try {
|
||||
const response = await ConversationAPI.updateLabels(
|
||||
conversationId,
|
||||
labels
|
||||
);
|
||||
commit(types.default.SET_CONVERSATION_LABELS, {
|
||||
id: conversationId,
|
||||
data: response.data.payload,
|
||||
});
|
||||
commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
|
||||
isUpdating: false,
|
||||
isError: false,
|
||||
});
|
||||
} catch (error) {
|
||||
commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
|
||||
isUpdating: false,
|
||||
isError: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const mutations = {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,7 @@
|
|||
<template>
|
||||
<span class="spinner" :class="size"></span>
|
||||
<span class="spinner small"></span>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
default: 'small',
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables';
|
||||
|
||||
|
|
@ -48,7 +39,7 @@ export default {
|
|||
vertical-align: middle;
|
||||
|
||||
&.message {
|
||||
padding: $space-one;
|
||||
padding: $space-normal;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
|
|
@ -72,17 +63,5 @@ export default {
|
|||
margin-top: -$space-small;
|
||||
}
|
||||
}
|
||||
|
||||
&.tiny {
|
||||
width: $space-one;
|
||||
height: $space-one;
|
||||
padding: 0 $space-smaller;
|
||||
|
||||
&:before {
|
||||
width: $space-one;
|
||||
height: $space-one;
|
||||
margin-top: -$space-small + $space-micro;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// scss-lint:disable PseudoElement SpaceBeforeBrace VendorPrefix
|
||||
$shadow-color-1: rgba(50, 50, 93, 0.08);
|
||||
$shadow-color-1: rgba(50, 50, 93, 0.2);
|
||||
$shadow-color-2: rgba(0, 0, 0, 0.07);
|
||||
$shadow-color-3: rgba(50, 50, 93, .08);
|
||||
$shadow-color-4: rgba(0, 0, 0, .05);
|
||||
|
|
|
|||
|
|
@ -101,10 +101,10 @@ export const SDK_CSS = ` .woot-widget-holder {
|
|||
width: 400px !important;
|
||||
min-height: 250px !important;
|
||||
max-height: 590px !important;
|
||||
-o-border-radius: 16px !important;
|
||||
-moz-border-radius: 16px !important;
|
||||
-webkit-border-radius: 16px !important;
|
||||
border-radius: 16px !important;
|
||||
-o-border-radius: 8px !important;
|
||||
-moz-border-radius: 8px !important;
|
||||
-webkit-border-radius: 8px !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<Thumbnail
|
||||
size="24px"
|
||||
:username="user.name"
|
||||
status="online"
|
||||
:src="user.avatar"
|
||||
has-border
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue