diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss index 650fa884d..7c344ce5b 100644 --- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss +++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss @@ -67,3 +67,8 @@ code { .margin-right-small { margin-right: var(--space-small); } + +input[type="checkbox"], +input[type="radio"] { + accent-color: var(--w-500); +} diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss index 52a50afb6..dc679b2c0 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss @@ -1,4 +1,5 @@ @keyframes left-shift-animation { + 0%, 100% { transform: translateX(0); @@ -13,70 +14,29 @@ @include flex; @include flex-shrink; border-bottom: 1px solid transparent; - border-left: $space-micro solid transparent; border-top: 1px solid transparent; cursor: pointer; - padding: 0 0 0 $space-normal; position: relative; &.active { animation: left-shift-animation 0.25s $swift-ease-out-function; - background: $color-background; - border-bottom-color: $color-border-light; - border-left-color: $color-woot; - border-top-color: $color-border-light; - .conversation--details { - border-top-color: transparent; - } - - + .conversation .conversation--details { + +.conversation::after { border-top-color: transparent; } } - &:first-child { - .conversation--details { - border-top-color: transparent; - } + &:first-child::after { + border-top-color: transparent; } &:last-child { - .conversation--details { + .message { border-bottom-color: $color-border-light; } } - .conversation--details { - @include border-light-bottom; - @include border-light-top; - border-bottom-color: transparent; - margin: 0 0 0 $space-one; - padding: $space-slab 0; - } - - .conversation--user { - font-size: $font-size-small; - margin-bottom: 0; - text-transform: capitalize; - - .label { - left: $space-micro; - max-width: $space-jumbo; - overflow: hidden; - position: relative; - text-overflow: ellipsis; - top: $space-micro; - white-space: nowrap; - } - } - .conversation--message { - color: $color-body; - font-size: $font-size-small; - font-weight: $font-weight-normal; - height: $space-medium; - line-height: $space-medium; margin: 0; max-width: 96%; overflow: hidden; @@ -119,24 +79,24 @@ } } - &.unread-chat { - .unread { - display: inline-block; - } + // &.unread-chat { + // .unread { + // display: inline-block; + // } - .conversation--message { - font-weight: $font-weight-bold; - } + // .conversation--message { + // font-weight: $font-weight-bold; + // } - .conversation--user { - font-weight: $font-weight-bold; - } - } + // .conversation--user { + // font-weight: $font-weight-bold; + // } + // } &.compact { padding-left: 0; - .conversation--details { + .message { border-radius: var(--border-radius-small); margin-left: 0; padding-left: var(--space-two); diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue index 23fefb8ff..797b9c0ce 100644 --- a/app/javascript/dashboard/components/ChatList.vue +++ b/app/javascript/dashboard/components/ChatList.vue @@ -786,6 +786,7 @@ export default { } .conversations-list { + padding-top: var(--space-small); // Prevent the list from scrolling if the submenu is opened &.is-context-menu-open { overflow: hidden !important; @@ -796,12 +797,7 @@ export default { flex-shrink: 0; width: 34rem; overflow: hidden; - @include breakpoint(large up) { - width: 36rem; - } - @include breakpoint(xlarge up) { - width: 35rem; - } + @include breakpoint(xxlarge up) { width: 38rem; } diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue index 6a0c7de4a..cb1dd010d 100644 --- a/app/javascript/dashboard/components/ui/Label.vue +++ b/app/javascript/dashboard/components/ui/Label.vue @@ -117,10 +117,10 @@ export default { height: var(--space-medium); &.small { - font-size: var(--font-size-micro); + font-size: var(--font-size-mini); padding: var(--space-micro) var(--space-smaller); line-height: 1.2; - letter-spacing: 0.15px; + height: var(--space-two); } .label--icon { @@ -199,8 +199,8 @@ export default { &.smooth { background: transparent; - border: 1px solid var(--s-75); - color: var(--s-800); + border: 1px solid var(--s-100); + color: var(--s-700); } } @@ -231,4 +231,10 @@ export default { border-radius: var(--border-radius-small); margin-right: var(--space-smaller); } +.label.small .label-color-dot { + width: var(--space-small); + height: var(--space-small); + border-radius: var(--border-radius-small); + margin-right: var(--space-smaller); +} diff --git a/app/javascript/dashboard/components/widgets/InboxName.vue b/app/javascript/dashboard/components/widgets/InboxName.vue index cb0b9fb06..1508d78f6 100644 --- a/app/javascript/dashboard/components/widgets/InboxName.vue +++ b/app/javascript/dashboard/components/widgets/InboxName.vue @@ -26,15 +26,15 @@ export default { diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue index 3f50c5577..1a60ecfcb 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue @@ -16,7 +16,7 @@ @@ -25,73 +25,99 @@ v-if="bulkActionCheck" :src="currentContact.thumbnail" :badge="inboxBadge" - class="columns" + class="sender-thumbnail" :username="currentContact.name" :status="currentContact.availability_status" - size="40px" + size="24px" /> -
-
- - +
+
+ +
+ + {{ chat.id }} +
+
+ - - {{ assignee.name }} - + icon="headset" + small + :title="assignee.name" + class="assignee-label" + />
-

- {{ currentContact.name }} -

-

- - - - - {{ parsedLastMessage }} +

+ +
+ + {{ unreadCount > 9 ? '9+' : unreadCount }} - +

- {{ this.$t(`${attachmentMessageContent}`) }} - - - {{ $t('CHAT_LIST.NO_CONTENT') }} - -

-

- - - {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }} - -

-
- - - - {{ unreadCount > 9 ? '9+' : unreadCount }} + + + + {{ parsedLastMessage }} + + + + {{ this.$t(`${attachmentMessageContent}`) }} + + + {{ $t('CHAT_LIST.NO_CONTENT') }} + +

+

+ + + {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }} + +

+
+ + + +
+
+
+
+ import { mapGetters } from 'vuex'; import { MESSAGE_TYPE } from 'widget/helpers/constants'; +import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin'; import messageFormatterMixin from 'shared/mixins/messageFormatterMixin'; import Thumbnail from '../Thumbnail'; import conversationMixin from '../../../mixins/conversations'; @@ -145,11 +172,12 @@ export default { }, mixins: [ - inboxMixin, - timeMixin, - conversationMixin, - messageFormatterMixin, alertMixin, + conversationMixin, + conversationLabelMixin, + inboxMixin, + messageFormatterMixin, + timeMixin, ], props: { activeLabel: { @@ -207,9 +235,15 @@ export default { currentUser: 'getCurrentUser', accountId: 'getCurrentAccountId', }), + + conversationId() { + return this.chat.id; + }, + bulkActionCheck() { return !this.hideThumbnail && !this.hovered && !this.selected; }, + chatMetadata() { return this.chat.meta || {}; }, @@ -370,81 +404,242 @@ export default { diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue index 12fb6210c..360dc8bc4 100644 --- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue +++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue @@ -186,16 +186,17 @@ export default {