Uses Thumbnail groupn component
This commit is contained in:
Nithin David
parent
c235070e61
commit
9cb78775dd
3 changed files with 24 additions and 29 deletions
|
|
@ -343,5 +343,10 @@
|
|||
"SUCCESS_MESSAGE": "Contact merged successfully",
|
||||
"ERROR_MESSAGE": "Could not merge contacts, try again!"
|
||||
}
|
||||
},
|
||||
"CONVERSATION_SUBSCRIBERS": {
|
||||
"NO_RECORDS_FOUND": "No results found",
|
||||
"ADD_SUBSCRIBERS": "Select subscribers",
|
||||
"REMANING_SUBSCRIBERS_TEXT": "+%{agentCount} others"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,22 @@
|
|||
<template>
|
||||
<div class="subscribers-wrap">
|
||||
<div class="subscribers--collapsed">
|
||||
<div class="overlapping-thumbnails">
|
||||
<thumbnail
|
||||
v-for="participant in participantList"
|
||||
:key="participant.id"
|
||||
:src="participant.thumbnail"
|
||||
:username="participant.name"
|
||||
:has-border="true"
|
||||
size="24px"
|
||||
class="subscriber-thumbnail"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ThumbnailGroup
|
||||
:more-thumbnails-text="
|
||||
$t('CONVERSATION_SUBSCRIBERS.REMANING_SUBSCRIBERS_TEXT', {
|
||||
agentCount: moreAgentCount,
|
||||
})
|
||||
"
|
||||
:users-list="participantList"
|
||||
/>
|
||||
<woot-button
|
||||
icon="add"
|
||||
icon="headset-add"
|
||||
size="small"
|
||||
variant="link"
|
||||
@click="onOpenDropdown"
|
||||
>
|
||||
{{ `Add participans ` }}
|
||||
{{ $t('CONVERSATION_SUBSCRIBERS.ADD_SUBSCRIBERS') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,7 +26,7 @@
|
|||
<div :class="{ 'dropdown-pane--open': showDropDown }" class="dropdown-pane">
|
||||
<div class="dropdown__header">
|
||||
<h4 class="text-block-title text-truncate">
|
||||
{{ `Select subscribers` }}
|
||||
{{ $t('CONVERSATION_SUBSCRIBERS.ADD_SUBSCRIBERS') }}
|
||||
</h4>
|
||||
<woot-button
|
||||
icon="dismiss"
|
||||
|
|
@ -51,12 +48,12 @@
|
|||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import ThumbnailGroup from 'dashboard/components/widgets/ThumbnailGroup';
|
||||
import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems';
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Thumbnail,
|
||||
ThumbnailGroup,
|
||||
MultiselectDropdownItems,
|
||||
},
|
||||
props: {
|
||||
|
|
@ -90,6 +87,10 @@ export default {
|
|||
this.updateParticipant();
|
||||
},
|
||||
},
|
||||
moreAgentCount() {
|
||||
const maxThumbnailCount = 4;
|
||||
return this.participantList.length - maxThumbnailCount;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
conversationId() {
|
||||
|
|
@ -171,22 +172,10 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.overlapping-thumbnails {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.subscriber-thumbnail {
|
||||
position: relative;
|
||||
box-shadow: var(--shadow-small);
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: var(--space-minus-smaller);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-pane {
|
||||
box-sizing: border-box;
|
||||
top: var(--space-large);
|
||||
top: var(--space-minus-smaller);
|
||||
width: 100%;
|
||||
}
|
||||
.dropdown__header {
|
||||
|
|
|
|||
|
|
@ -99,6 +99,7 @@
|
|||
"folder-outline": "M8.207 4c.46 0 .908.141 1.284.402l.156.12L12.022 6.5h7.728a2.25 2.25 0 0 1 2.229 1.938l.016.158.005.154v9a2.25 2.25 0 0 1-2.096 2.245L19.75 20H4.25a2.25 2.25 0 0 1-2.245-2.096L2 17.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h3.957Zm1.44 5.979a2.25 2.25 0 0 1-1.244.512l-.196.009-4.707-.001v7.251c0 .38.282.694.648.743l.102.007h15.5a.75.75 0 0 0 .743-.648l.007-.102v-9a.75.75 0 0 0-.648-.743L19.75 8h-7.729L9.647 9.979ZM8.207 5.5H4.25a.75.75 0 0 0-.743.648L3.5 6.25v2.749L8.207 9a.75.75 0 0 0 .395-.113l.085-.06 1.891-1.578-1.89-1.575a.75.75 0 0 0-.377-.167L8.207 5.5Z",
|
||||
"globe-desktop-outline": "M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z",
|
||||
"globe-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999ZM14.939 16.5H9.06c.652 2.414 1.786 4.002 2.939 4.002s2.287-1.588 2.939-4.002Zm-7.43 0H4.785a8.532 8.532 0 0 0 4.094 3.411c-.522-.82-.953-1.846-1.27-3.015l-.102-.395Zm11.705 0h-2.722c-.324 1.335-.792 2.5-1.373 3.411a8.528 8.528 0 0 0 3.91-3.127l.185-.283ZM7.094 10H3.735l-.005.017a8.525 8.525 0 0 0-.233 1.984c0 1.056.193 2.067.545 3h3.173a20.847 20.847 0 0 1-.123-5Zm8.303 0H8.603a18.966 18.966 0 0 0 .135 5h6.524a18.974 18.974 0 0 0 .135-5Zm4.868 0h-3.358c.062.647.095 1.317.095 2a20.3 20.3 0 0 1-.218 3h3.173a8.482 8.482 0 0 0 .544-3c0-.689-.082-1.36-.236-2ZM8.88 4.09l-.023.008A8.531 8.531 0 0 0 4.25 8.5h3.048c.314-1.752.86-3.278 1.583-4.41ZM12 3.499l-.116.005C10.62 3.62 9.396 5.622 8.83 8.5h6.342c-.566-2.87-1.783-4.869-3.045-4.995L12 3.5Zm3.12.59.107.175c.669 1.112 1.177 2.572 1.475 4.237h3.048a8.533 8.533 0 0 0-4.339-4.29l-.291-.121Z",
|
||||
"headset-add-outline": "M23 6.5C23 3.46243 20.5376 1 17.5 1C14.4624 1 12 3.46243 12 6.5C12 9.53757 14.4624 12 17.5 12C20.5376 12 23 9.53757 23 6.5ZM18.0006 7.00001L18.0011 9.50352C18.0011 9.77966 17.7773 10.0035 17.5011 10.0035C17.225 10.0035 17.0011 9.77966 17.0011 9.50352L17.0006 7.00001H14.4956C14.2197 7.00001 13.9961 6.77615 13.9961 6.50001C13.9961 6.22387 14.2197 6.00001 14.4956 6.00001H17.0005L17 3.49927C17 3.22313 17.2239 2.99927 17.5 2.99927C17.7761 2.99927 18 3.22313 18 3.49927L18.0005 6.00001H20.4966C20.7725 6.00001 20.9961 6.22387 20.9961 6.50001C20.9961 6.77615 20.7725 7.00001 20.4966 7.00001H18.0006ZM17.5 13C18.0163 13 18.5185 12.9398 19 12.8261V15C19 16.0544 18.1841 16.9182 17.1493 16.9945L17 17H15C14.4872 17 14.0645 16.614 14.0067 16.1166L14 16V12L14.0002 11.9783C14.4634 12.2748 14.9666 12.5142 15.5 12.6865V15.5H17C17.2455 15.5 17.4496 15.3231 17.4919 15.0899L17.5 15V13ZM12.0218 3.00003C11.7171 3.47601 11.4727 3.99433 11.2994 4.5442C8.59265 4.88833 6.5 7.19978 6.5 10V11H9C9.55228 11 10 11.4477 10 12V16C10 16.5523 9.55228 17 9 17H6.5V17.25C6.5 18.4409 7.42516 19.4156 8.59595 19.4948L8.75 19.5L9.87812 19.4997C10.1871 18.626 11.0204 18 12 18C13.2426 18 14.25 19.0074 14.25 20.25C14.25 21.4926 13.2426 22.5 12 22.5C11.0201 22.5 10.1864 21.8735 9.87776 20.9992L8.75 21C6.74574 21 5.10873 19.4276 5.0052 17.4492L5 17.25V10C5 6.13401 8.13401 3 12 3L12.0218 3.00003ZM12 19.5C11.5858 19.5 11.25 19.8358 11.25 20.25C11.25 20.6642 11.5858 21 12 21C12.4142 21 12.75 20.6642 12.75 20.25C12.75 19.8358 12.4142 19.5 12 19.5ZM8.5 12.5H6.5V15.5H8.5V12.5Z",
|
||||
"headphones-sound-wave-outline": "M3.5 12a8.5 8.5 0 0 1 17 0v2h-2.25a.75.75 0 0 0-.75.75v6.5c0 .414.336.75.75.75H19a3 3 0 0 0 3-3v-7c0-5.523-4.477-10-10-10S2 6.477 2 12v7a3 3 0 0 0 3 3h.75a.75.75 0 0 0 .75-.75v-6.5a.75.75 0 0 0-.75-.75H3.5v-2Zm17 3.5V19a1.5 1.5 0 0 1-1.5 1.5v-5h1.5ZM3.5 19v-3.5H5v5A1.5 1.5 0 0 1 3.5 19Zm9.25-7.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Zm-4 2.25a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5a.75.75 0 0 1 .75-.75Zm7.25.75a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z",
|
||||
"image-outline": "M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm.58 16.401-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07-5.807 5.687c.182.064.378.099.582.099h11.5c.203 0 .399-.035.58-.099l-5.805-5.686L18.33 19.4ZM17.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .208.036.408.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116 5.822 5.702c.067-.186.104-.386.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75Zm-2.498 2a2.252 2.252 0 1 1 0 4.504 2.252 2.252 0 0 1 0-4.504Zm0 1.5a.752.752 0 1 0 0 1.504.752.752 0 0 0 0-1.504Z",
|
||||
"info-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5Zm-.004 7a.75.75 0 0 1 .744.648l.007.102.003 5.502a.75.75 0 0 1-1.493.102l-.007-.101-.003-5.502a.75.75 0 0 1 .75-.75ZM12 7.003a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997Z",
|
||||
|
|
|
|||
Loading…
Reference in a new issue