LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Use Fluent SVG icons on the dashboard (#3482)

Browse Source
This commit is contained in:
Pranav Raj S
2021-11-30 21:03:18 -08:00
committed by GitHub
parent 98be3b33c1
commit c792cfc0be
151 changed files with 613 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
View File

@@ -21,7 +21,8 @@
/>
<div class="filter-actions">
<woot-button
icon="ion-plus"
icon="add"
icon-size="16"
color-scheme="success"
variant="smooth"
size="small"

69
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
View File

@@ -24,7 +24,7 @@
v-if="showAssignee && assignee.name"
class="label assignee-label text-truncate"
>
<i class="ion-person" />
<fluent-icon icon="person" size="12" />
{{ assignee.name }}
</span>
</div>
@@ -32,25 +32,41 @@
{{ currentContact.name }}
</h4>
<p v-if="lastMessageInChat" class="conversation--message">
<i v-if="isMessagePrivate" class="ion-locked last-message-icon" />
<i v-else-if="messageByAgent" class="ion-ios-undo last-message-icon" />
<i
<fluent-icon
v-if="isMessagePrivate"
size="16"
class="message--attachment-icon last-message-icon"
icon="lock-closed"
/>
<fluent-icon
v-else-if="messageByAgent"
size="16"
class="message--attachment-icon last-message-icon"
icon="arrow-reply"
/>
<fluent-icon
v-else-if="isMessageAnActivity"
class="ion-information-circled last-message-icon"
size="16"
class="message--attachment-icon last-message-icon"
icon="info"
/>
<span v-if="lastMessageInChat.content">
{{ parsedLastMessage }}
</span>
<span v-else-if="lastMessageInChat.attachments">
<i :class="`small-icon ${this.$t(`${attachmentIconKey}.ICON`)}`"></i>
{{ this.$t(`${attachmentIconKey}.CONTENT`) }}
<fluent-icon
size="16"
class="message--attachment-icon"
:icon="attachmentIcon"
/>
{{ this.$t(`${attachmentMessageContent}`) }}
</span>
<span v-else>
{{ $t('CHAT_LIST.NO_CONTENT') }}
</span>
</p>
<p v-else class="conversation--message">
<i class="ion-android-alert"></i>
<fluent-icon size="16" class="message--attachment-icon" icon="info" />
<span>
{{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
</span>
@@ -76,6 +92,15 @@ import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
import InboxName from '../InboxName';
import inboxMixin from 'shared/mixins/inboxMixin';
const ATTACHMENT_ICONS = {
image: 'image',
audio: 'headphones-sound-wave',
video: 'video',
file: 'document',
location: 'location',
fallback: 'link',
};
export default {
components: {
InboxName,
@@ -133,10 +158,18 @@ export default {
);
},
attachmentIconKey() {
lastMessageFileType() {
const lastMessage = this.lastMessageInChat;
const [{ file_type: fileType } = {}] = lastMessage.attachments;
return `CHAT_LIST.ATTACHMENTS.${fileType}`;
return fileType;
},
attachmentIcon() {
return ATTACHMENT_ICONS[this.lastMessageFileType];
},
attachmentMessageContent() {
return `CHAT_LIST.ATTACHMENTS.${this.lastMessageFileType}.CONTENT`;
},
isActiveChat() {
@@ -243,14 +276,10 @@ export default {
white-space: nowrap;
width: 60%;
}
.ion-earth {
font-size: var(--font-size-mini);
}
}
.last-message-icon {
color: var(--s-600);
font-size: var(--font-size-mini);
}
.conversation--metadata {
@@ -259,16 +288,22 @@ export default {
padding-right: var(--space-normal);
.label {
padding: var(--space-micro) 0 var(--space-micro) 0;
line-height: var(--space-slab);
font-weight: var(--font-weight-medium);
background: none;
color: var(--s-500);
font-size: var(--font-size-mini);
font-weight: var(--font-weight-medium);
line-height: var(--space-slab);
padding: var(--space-micro) 0 var(--space-micro) 0;
}
.assignee-label {
display: inline-flex;
max-width: 50%;
}
}
.message--attachment-icon {
margin-top: var(--space-minus-micro);
vertical-align: middle;
}
</style>

6
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
View File

@@ -11,10 +11,12 @@
<div class="user--profile__meta">
<h3 class="user--name text-truncate">
<span class="margin-right-smaller">{{ currentContact.name }}</span>
<i
<fluent-icon
v-if="!isHMACVerified"
v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
class="ion-android-alert text-y-800 fs-default"
class="text-y-800"
size="14"
icon="warning"
/>
</h3>
<div class="conversation--header--actions">

6
app/javascript/dashboard/components/widgets/conversation/Message.vue
View File

@@ -234,8 +234,8 @@ export default {
return {
email: this.contentAttributes.email,
cc: this.contentAttributes.cc_emails,
bcc: this.contentAttributes.bcc_emails
}
bcc: this.contentAttributes.bcc_emails,
};
},
hasAttachments() {
return !!(this.data.attachments && this.data.attachments.length > 0);
@@ -354,7 +354,7 @@ export default {
}
&.is-private .file.message-text__wrap {
.ion-document-text {
.file--icon {
color: var(--w-400);
}
.text-block-title {

6
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
View File

@@ -44,7 +44,11 @@
class="banner-close-button"
@click="removeTweetSelection"
>
<i v-tooltip="$t('CONVERSATION.REMOVE_SELECTION')" class="ion-close" />
<fluent-icon
v-tooltip="$t('CONVERSATION.REMOVE_SELECTION')"
size="16"
icon="dismiss"
/>
</button>
</div>
<ul class="conversation-panel">

6
app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
View File

@@ -4,20 +4,20 @@
v-if="!currentChat.muted"
v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
class="hollow secondary actions--button"
icon="ion-volume-mute"
icon="speaker-mute"
@click="mute"
/>
<woot-button
v-else
v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
class="hollow secondary actions--button"
icon="ion-volume-medium"
icon="speaker-1"
@click="unmute"
/>
<woot-button
v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
class="hollow secondary actions--button"
icon="ion-share"
icon="share"
@click="toggleEmailActionsModal"
/>
<resolve-action

49
app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
View File

@@ -2,38 +2,48 @@
<div class="message-text--metadata">
<span class="time">{{ readableTime }}</span>
<span v-if="showSentIndicator" class="time">
<i
<fluent-icon
v-tooltip.top-start="$t('CHAT_LIST.SENT')"
class="icon ion-checkmark"
icon="checkmark"
size="16"
/>
</span>
<i
<fluent-icon
v-if="isEmail"
v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
class="ion ion-android-mail"
icon="mail"
class="action--icon"
size="16"
/>
<i
<fluent-icon
v-if="isPrivate"
v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
class="icon ion-android-lock"
icon="lock-closed"
class="action--icon"
size="16"
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
/>
<i
v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
class="icon ion-reply cursor-pointer"
@click="onTweetReply"
/>
<button @click="onTweetReply">
<fluent-icon
v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
icon="arrow-reply"
class="action--icon cursor-pointer"
size="16"
/>
</button>
<a
v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
:href="linkToTweet"
target="_blank"
rel="noopener noreferrer nofollow"
>
<i
<fluent-icon
v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
class="icon ion-android-open cursor-pointer"
icon="open"
class="action--icon cursor-pointer"
size="16"
/>
</a>
</div>
@@ -129,7 +139,7 @@ export default {
}
}
.icon {
.action--icon {
color: var(--white);
}
}
@@ -143,7 +153,7 @@ export default {
}
.message-text--metadata {
align-items: flex-end;
align-items: flex-start;
display: flex;
.time {
@@ -153,10 +163,9 @@ export default {
line-height: 1.8;
}
i {
line-height: 1.4;
padding-right: var(--space-small);
padding-left: var(--space-small);
.action--icon {
margin-right: var(--space-small);
margin-left: var(--space-small);
color: var(--s-900);
}

2
app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="file message-text__wrap">
<div class="icon-wrap">
<i class="ion-document-text"></i>
<fluent-icon icon="document" class="file--icon" />
</div>
<div class="meta">
<h5 class="text-block-title">

8
app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
View File

@@ -13,11 +13,11 @@
@click="toggleQuotedContent"
>
<span v-if="showQuotedContent">
<i class="ion-chevron-up" />
<fluent-icon icon="chevron-up" class="fluent-icon" size="16" />
{{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
</span>
<span v-else>
<i class="ion-chevron-down" />
<fluent-icon icon="chevron-down" class="fluent-icon" size="16" />
{{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
</span>
</button>
@@ -104,5 +104,9 @@ export default {
font-size: var(--font-size-mini);
padding-bottom: var(--space-small);
padding-top: var(--space-small);
.fluent-icon {
margin-bottom: var(--space-minus-smaller);
}
}
</style>

3
app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
View File

@@ -72,7 +72,8 @@
/>
</div>
<woot-button
icon="ion-close"
icon="dismiss"
icon-size="16"
variant="clear"
color-scheme="secondary"
@click="removeFilter"