akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 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
app/javascript/dashboard/components/Accordion/AccordionItem.vue
+2 -2
View File
@@ -10,8 +10,8 @@
<div class="button-icon--wrap">
<slot name="button" />
<div class="chevron-icon__wrap">
<i v-if="isOpen" class="ion-minus chevron-icon"></i>
<i v-else class="ion-plus chevron-icon"></i>
<fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
<fluent-icon v-else size="24" icon="add" type="solid" />
</div>
</div>
</button>
app/javascript/dashboard/components/ChatList.vue
+1 -1
View File
@@ -27,7 +27,7 @@ l<template>
class="btn-filter"
@click="onToggleAdvanceFiltersModal"
>
<i class="icon ion-ios-settings-strong" />
<fluent-icon icon="filter" />
</woot-button>
</div>
</div>
app/javascript/dashboard/components/CustomAttribute.vue
+4 -4
View File
@@ -23,7 +23,7 @@
variant="link"
size="medium"
color-scheme="secondary"
icon="ion-trash-a"
icon="delete"
class-names="delete-button"
@click="onDelete"
/>
@@ -44,7 +44,7 @@
@keyup.enter="onUpdate"
/>
<div class="input-group-button">
<woot-button size="small" icon="ion-checkmark" @click="onUpdate" />
<woot-button size="small" icon="checkmark" @click="onUpdate" />
</div>
</div>
<span v-if="shouldShowErrorMessage" class="error-message">
@@ -75,7 +75,7 @@
variant="link"
size="small"
color-scheme="secondary"
icon="ion-clipboard"
icon="clipboard"
class-names="edit-button"
@click="onCopy"
/>
@@ -85,7 +85,7 @@
variant="link"
size="small"
color-scheme="secondary"
icon="ion-compose"
icon="edit"
class-names="edit-button"
@click="onEdit"
/>
app/javascript/dashboard/components/Modal.vue
+3 -1
View File
@@ -7,7 +7,9 @@
@click="onBackDropClick"
>
<div :class="modalContainerClassName" @click.stop>
<i class="ion-android-close modal--close" @click="close"></i>
<button class="modal--close" @click="close">
<fluent-icon icon="dismiss" />
</button>
<slot />
</div>
</div>
app/javascript/dashboard/components/NetworkNotification.vue
+1 -1
View File
@@ -23,7 +23,7 @@
{{ $t('NETWORK.BUTTON.REFRESH') }}
</button>
<button class="ui-close-button" @click="closeNotification">
<i class="ui-close-icon icon ion-ios-close-outline" />
<fluent-icon icon="dismiss-circle" class="ui-close-icon " />
</button>
</div>
</div>
app/javascript/dashboard/components/SidemenuIcon.vue
+12 -4
View File
@@ -1,5 +1,7 @@
<template>
<i class="ion-android-menu hamburger--menu" @click="onMenuItemClick" />
<button @click="onMenuItemClick">
<fluent-icon class="hamburger--menu" icon="list" />
</button>
</template>
<script>
@@ -13,8 +15,14 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.ion-android-menu {
font-size: var(--font-size-big);
<style scoped lang="scss">
.hamburger--menu {
cursor: pointer;
display: none;
margin-right: var(--space-normal);
@media screen and (max-width: 1200px) {
display: block;
}
}
</style>
app/javascript/dashboard/components/buttons/Button.vue
+3 -2
View File
@@ -1,9 +1,10 @@
<template>
<button :type="type" class="button nice" :class="variant" @click="onClick">
<i
<fluent-icon
v-if="!isLoading && icon"
class="icon"
:class="buttonIconClass + ' ' + icon"
:class="buttonIconClass"
:icon="icon"
/>
<spinner v-if="isLoading" />
<slot></slot>
app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+1 -1
View File
@@ -6,7 +6,7 @@
:class="computedClass"
@click="onClick"
>
<i v-if="!!iconClass" :class="iconClass" class="icon" />
<fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
<span>{{ buttonText }}</span>
<spinner v-if="loading" />
</button>
app/javascript/dashboard/components/buttons/ResolveAction.vue
+8 -4
View File
@@ -5,8 +5,9 @@
v-if="isOpen"
class-names="resolve"
color-scheme="success"
icon="ion-checkmark"
icon="checkmark"
emoji="✅"
icon-size="16"
:is-loading="isLoading"
@click="onCmdResolveConversation"
>
@@ -16,8 +17,9 @@
v-else-if="isResolved"
class-names="resolve"
color-scheme="warning"
icon="ion-refresh"
icon="arrow-redo"
emoji="👀"
icon-size="16"
:is-loading="isLoading"
@click="onCmdOpenConversation"
>
@@ -27,7 +29,8 @@
v-else-if="showOpenButton"
class-names="resolve"
color-scheme="primary"
icon="ion-person"
icon="person"
icon-size="16"
:is-loading="isLoading"
@click="onCmdOpenConversation"
>
@@ -38,7 +41,8 @@
ref="arrowDownButton"
:color-scheme="buttonClass"
:disabled="isLoading"
icon="ion-arrow-down-b"
icon="chevron-down"
icon-size="16"
emoji="🔽"
@click="openDropdown"
/>
app/javascript/dashboard/components/layout/Sidebar.vue
+13 -13
View File
@@ -45,7 +45,7 @@
<div class="bottom-nav app-context-menu" @click="toggleOptions">
<agent-details @show-options="toggleOptions" />
<notification-bell />
<span class="current-user--options icon ion-android-more-vertical" />
<fluent-icon class="current-user--options" icon="more-vertical" />
<options-menu
:show="showOptionsMenu"
@toggle-accounts="toggleAccountModal"
@@ -107,14 +107,14 @@ import router from '../../routes';
export default {
components: {
AgentDetails,
SidebarItem,
AvailabilityStatus,
NotificationBell,
OptionsMenu,
AccountSelector,
AddAccountModal,
AddLabelModal,
AgentDetails,
AvailabilityStatus,
NotificationBell,
OptionsMenu,
SidebarItem,
WootKeyShortcutModal,
},
mixins: [adminMixin, alertMixin, eventListenerMixins],
@@ -173,7 +173,7 @@ export default {
},
inboxSection() {
return {
icon: 'ion-folder',
icon: 'folder',
label: 'INBOXES',
hasSubMenu: true,
newLink: true,
@@ -193,7 +193,7 @@ export default {
},
labelSection() {
return {
icon: 'ion-pound',
icon: 'number-symbol',
label: 'LABELS',
hasSubMenu: true,
newLink: true,
@@ -216,7 +216,7 @@ export default {
},
contactLabelSection() {
return {
icon: 'ion-pound',
icon: 'number-symbol',
label: 'TAGGED_WITH',
hasSubMenu: true,
key: 'label',
@@ -239,7 +239,7 @@ export default {
},
teamSection() {
return {
icon: 'ion-ios-people',
icon: 'people-team',
label: 'TEAMS',
hasSubMenu: true,
newLink: true,
@@ -354,11 +354,11 @@ export default {
cursor: pointer;
padding: $space-small $space-large;
.ion-ios-checkmark {
font-size: $font-size-big;
.selected--account {
margin-top: -$space-smaller;
& + .account--details {
padding-left: $space-normal;
padding-left: $space-normal - $space-micro;
}
}
app/javascript/dashboard/components/layout/SidebarItem.vue
+13 -14
View File
@@ -13,14 +13,20 @@
:title="menuItem.toolTip"
>
<div class="wrap">
<i :class="menuItem.icon" />
<fluent-icon
size="18"
:icon="menuItem.icon"
class="margin-right-small"
/>
{{ $t(`SIDEBAR.${menuItem.label}`) }}
</div>
<span
<button
v-if="showItem(menuItem)"
class="child-icon ion-android-add-circle"
class="child-icon"
@click.prevent="newLinkClick(menuItem)"
/>
>
<fluent-icon icon="add-circle" size="16" />
</button>
</a>
<ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
<router-link
@@ -32,10 +38,11 @@
>
<a href="#" :class="computedChildClass(child)">
<div class="wrap">
<i
<fluent-icon
v-if="menuItem.key === 'inbox'"
class="inbox-icon"
:class="computedInboxClass(child)"
size="14"
:icon="computedInboxClass(child)"
/>
<span
v-if="child.color"
@@ -143,12 +150,4 @@ export default {
min-width: $space-normal;
width: $space-normal;
}
.inbox-icon {
position: relative;
top: -1px;
&.ion-ios-email {
font-size: var(--font-size-medium);
}
}
</style>
app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+7 -1
View File
@@ -14,7 +14,13 @@
class="account-selector"
>
<a :href="`/app/accounts/${account.id}/dashboard`">
<i v-if="account.id === accountId" class="ion ion-ios-checkmark" />
<fluent-icon
v-if="account.id === accountId"
class="selected--account"
icon="checkmark-circle"
type="solid"
size="24"
/>
<label :for="account.name" class="account--details">
<div class="account--name">{{ account.name }}</div>
<div class="account--role">{{ account.role }}</div>
app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+7 -6
View File
@@ -12,7 +12,7 @@
<div v-if="!hasAccounts" class="alert-wrap">
<div class="callout alert">
<div class="icon-wrap">
<i class="ion-alert-circled"></i>
<fluent-icon icon="warning" />
</div>
{{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
</div>
@@ -102,18 +102,19 @@ export default {
},
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.alert-wrap {
margin: var(--space-zero) var(--space-large);
margin-top: var(--space-medium);
font-size: var(--font-size-small);
margin: var(--space-medium) var(--space-large) var(--space-zero);
.callout {
align-items: center;
border-radius: var(--border-radius-normal);
display: flex;
justify-content: center;
}
}
.icon-wrap {
font-size: var(--font-size-big);
margin-left: var(--space-smaller);
margin-right: var(--space-slab);
}
app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+3 -1
View File
@@ -1,10 +1,12 @@
<template>
<span class="notifications icon ion-ios-bell" @click.stop="showNotification">
<span class="notifications" @click.stop="showNotification">
<fluent-icon icon="alert" />
<span v-if="unreadCount" class="unread-badge">{{ unreadCount }}</span>
</span>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters({
app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
+3 -1
View File
@@ -7,10 +7,12 @@ import i18n from 'dashboard/i18n';
import WootModal from 'dashboard/components/Modal';
import WootModalHeader from 'dashboard/components/ModalHeader';
import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
const localVue = createLocalVue();
localVue.component('woot-modal', WootModal);
localVue.component('woot-modal-header', WootModalHeader);
localVue.component('fluent-icon', FluentIcon);
localVue.use(Vuex);
localVue.use(VueI18n);
@@ -84,7 +86,7 @@ describe('accountSelctor', () => {
});
it('first account item is checked', () => {
const accountFirstItem = accountSelector.find('.account-selector .ion');
const accountFirstItem = accountSelector.find('.account-selector svg');
expect(accountFirstItem.exists()).toBe(true);
});
});
app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
+6 -3
View File
@@ -1,7 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SidemenuIcon matches snapshot 1`] = `
<i
class="ion-android-menu hamburger--menu"
/>
<button>
<fluent-icon
class="hamburger--menu"
icon="list"
/>
</button>
`;
app/javascript/dashboard/components/ui/Label.vue
+21 -4
View File
@@ -1,13 +1,23 @@
<template>
<div :class="labelClass" :style="labelStyle" :title="description">
<i v-if="icon" class="label--icon" :class="icon" @click="onClick" />
<button v-if="icon" class="label-action--button" @click="onClick">
<fluent-icon :icon="icon" size="12" class="label--icon" />
</button>
<span v-if="!href">{{ title }}</span>
<a v-else :href="href" :style="anchorStyle">{{ title }}</a>
<i v-if="showClose" class="close--icon ion-close" @click="onClick" />
<button
v-if="showClose"
class="label-action--button"
:style="{ color: textColor }"
@click="onClick"
>
<fluent-icon icon="dismiss" size="12" class="close--icon" />
</button>
</div>
</template>
<script>
import { getContrastingTextColor } from '@chatwoot/utils';
export default {
props: {
title: {
@@ -79,6 +89,8 @@ export default {
@import '~dashboard/assets/scss/variables';
.label {
display: inline-flex;
align-items: center;
font-weight: var(--font-weight-medium);
margin-right: var(--space-smaller);
margin-bottom: var(--space-smaller);
@@ -89,11 +101,12 @@ export default {
.label--icon {
cursor: pointer;
margin-right: var(--space-smaller);
}
.label--icon,
.close--icon {
font-size: var(--font-size-micro);
cursor: pointer;
margin-left: var(--space-smaller);
}
&.small .label--icon,
@@ -150,4 +163,8 @@ export default {
}
}
}
.label-action--button {
margin-bottom: var(--space-minus-micro);
}
</style>
app/javascript/dashboard/components/ui/Wizard.vue
+1 -1
View File
@@ -14,7 +14,7 @@
<h3>
{{ item.title }}
<span v-if="isOver(item)" class="completed">
<i class="ion-checkmark"></i>
<fluent-icon icon="checkmark" />
</span>
</h3>
<span class="step">
app/javascript/dashboard/components/ui/WootButton.vue
+5
View File
@@ -11,6 +11,7 @@
class="icon"
:emoji="emoji"
:icon="icon"
:icon-size="iconSize"
/>
<span v-if="$slots.default" class="button__content"><slot></slot></span>
</button>
@@ -35,6 +36,10 @@ export default {
type: String,
default: '',
},
iconSize: {
type: [Number, String],
default: 20,
},
emoji: {
type: String,
default: '',
app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+4 -5
View File
@@ -24,12 +24,11 @@
</span>
</div>
<div class="remove-file-wrap">
<button
class="remove--attachment"
<woot-button
class="remove--attachment clear secondary"
icon="dismiss"
@click="() => onRemoveAttachment(index)"
>
<i class="ion-android-close"></i>
</button>
/>
</div>
</div>
</div>
app/javascript/dashboard/components/widgets/BackButton.vue
+4 -2
View File
@@ -1,7 +1,8 @@
<template>
<span class="back-button ion-ios-arrow-left" @click.capture="goBack">
<button class="back-button" @click.capture="goBack">
<fluent-icon icon="chevron-left" />
{{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
</span>
</button>
</template>
<script>
import router from '../../routes/index';
@@ -28,3 +29,4 @@ export default {
},
};
</script>
<style scoped></style>
app/javascript/dashboard/components/widgets/InboxIconWithName.vue
-38
View File
@@ -1,38 +0,0 @@
<template>
<div class="inbox">
<i :class="icon" />
<span>{{ inbox.name }}</span>
</div>
</template>
<script>
import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
export default {
props: {
inbox: {
type: Object,
default: () => {},
},
},
computed: {
icon() {
if (this.inbox.channel_type === INBOX_TYPES.WEB) {
return 'icon ion-earth';
}
return 'icon ion-android-textsms';
},
},
};
</script>
<style scoped lang="scss">
.inbox {
display: flex;
align-items: center;
.icon {
margin-right: var(--space-micro);
min-width: var(--space-normal);
position: relative;
top: -1px;
}
}
</style>
app/javascript/dashboard/components/widgets/InboxListItem.vue
-23
View File
@@ -1,23 +0,0 @@
<template>
<div class="inbox-item">
<img src="~dashboard/assets/images/no_page_image.png" alt="No Page Image" />
<div class="item--details columns">
<h4 class="item--name">
{{ inbox.label }}
</h4>
<p class="item--sub">
Facebook
</p>
</div>
<!-- <span class="ion-chevron-right arrow"></span> -->
</div>
</template>
<script>
/* eslint no-console: 0 */
// import WootSwitch from '../ui/Switch';
export default {
props: ['inbox'],
created() {},
};
</script>
app/javascript/dashboard/components/widgets/InboxName.vue
+8 -3
View File
@@ -1,8 +1,8 @@
<template>
<span class="inbox--name">
<i :class="computedInboxClass" />
<div class="inbox--name">
<fluent-icon class="inbox--icon" :icon="computedInboxClass" size="12" />
{{ inbox.name }}
</span>
</div>
</template>
<script>
import { getInboxClassByType } from 'dashboard/helper/inbox';
@@ -25,6 +25,7 @@ export default {
</script>
<style scoped>
.inbox--name {
display: inline-flex;
padding: var(--space-micro) 0;
line-height: var(--space-slab);
font-weight: var(--font-weight-medium);
@@ -32,4 +33,8 @@ export default {
color: var(--s-500);
font-size: var(--font-size-mini);
}
.inbox--icon {
margin-right: var(--space-micro);
}
</style>
app/javascript/dashboard/components/widgets/SearchBox.vue
-11
View File
@@ -1,11 +0,0 @@
<template>
<div class="search">
<i class="icon ion-ios-search-strong" />
<input class="input" type="email" :placeholder="$t('CHAT_LIST.SEARCH.INPUT')">
</div>
</template>
<script>
export default {
};
</script>
app/javascript/dashboard/components/widgets/TableFooter.vue
+14 -6
View File
@@ -20,8 +20,12 @@
:is-disabled="hasFirstPage"
@click="onFirstPage"
>
<i class="ion-chevron-left" />
<i class="ion-chevron-left" />
<fluent-icon icon="chevron-left" size="18" />
<fluent-icon
icon="chevron-left"
size="18"
class="margin-left-minus-slab"
/>
</woot-button>
<woot-button
size="small"
@@ -30,7 +34,7 @@
:is-disabled="hasPrevPage"
@click="onPrevPage"
>
<i class="ion-chevron-left" />
<fluent-icon icon="chevron-left" size="18" />
</woot-button>
<woot-button
size="small"
@@ -47,7 +51,7 @@
:is-disabled="hasNextPage"
@click="onNextPage"
>
<i class="ion-chevron-right" />
<fluent-icon icon="chevron-right" size="18" />
</woot-button>
<woot-button
size="small"
@@ -57,8 +61,12 @@
:is-disabled="hasLastPage"
@click="onLastPage"
>
<i class="ion-chevron-right" />
<i class="ion-chevron-right" />
<fluent-icon icon="chevron-right" size="18" />
<fluent-icon
icon="chevron-right"
size="18"
class="margin-left-minus-slab"
/>
</woot-button>
</div>
</div>
app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+7 -4
View File
@@ -3,11 +3,12 @@
<div class="left-wrap">
<woot-button
:title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
icon="ion-happy-outline"
icon="emoji"
emoji="😊"
color-scheme="secondary"
variant="smooth"
size="small"
:icon-size="14"
@click="toggleEmojiPicker"
/>
@@ -24,8 +25,9 @@
v-if="showAttachButton"
class-names="button--upload"
:title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
icon="ion-android-attach"
icon="attach"
emoji="📎"
:icon-size="14"
color-scheme="secondary"
variant="smooth"
size="small"
@@ -33,8 +35,9 @@
</file-upload>
<woot-button
v-if="enableRichEditor && !isOnPrivateNote"
icon="ion-quote"
icon="quote"
emoji="🖊️"
:icon-size="16"
color-scheme="secondary"
variant="smooth"
size="small"
@@ -46,7 +49,7 @@
v-show="$refs.upload && $refs.upload.dropActive"
class="modal-mask"
>
<i class="ion-ios-cloud-upload-outline icon"></i>
<fluent-icon icon="cloud-backup" />
<h4 class="page-sub-title">
{{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
</h4>
app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+2 -2
View File
@@ -30,7 +30,7 @@
v-if="popoutReplyBox"
variant="clear"
size="large"
icon="ion-android-close"
icon="dismiss"
color-scheme="secondary"
class-names="popout-button"
@click="$emit('click')"
@@ -39,7 +39,7 @@
v-else
variant="clear"
size="large"
icon="ion-arrow-resize"
icon="resize-large"
color-scheme="secondary"
class-names="popout-button"
@click="$emit('click')"
app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+2 -1
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"
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+52 -17
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>
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+4 -2
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">
app/javascript/dashboard/components/widgets/conversation/Message.vue
+3 -3
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 {
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+5 -1
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">
app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+3 -3
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
app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+29 -20
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);
}
app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+1 -1
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">
app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+6 -2
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>
app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
+2 -1
View File
@@ -72,7 +72,8 @@
/>
</div>
<woot-button
icon="ion-close"
icon="dismiss"
icon-size="16"
variant="clear"
color-scheme="secondary"
@click="removeFilter"
app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+5 -3
View File
@@ -16,7 +16,9 @@
</p>
</div>
</div>
<i class="ion-android-close modal--close" @click="$emit('close')"></i>
<button class="cursor-pointer" @click="$emit('close')">
<fluent-icon icon="dismiss" />
</button>
</div>
<div class="shortcut__wrap">
@@ -111,14 +113,14 @@ export default {
}
.header-wrap {
align-items: flex-start;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-slab);
}
.title-shortcut-key__wrap {
display: flex;
margin-bottom: var(--space-small);
}
.page-title {