KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
151 changed files with 613 additions and 617 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/dashboard/assets/scss/_utility-helpers.scss
View file

@ -6,6 +6,10 @@
margin-right: var(--space-smaller);
}
.margin-left-minus-slab {
margin-left: var(--space-minus-slab);
}
.fs-small {
font-size: var(--font-size-small);
}

5
app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
View file

@ -85,11 +85,6 @@
text-overflow: ellipsis;
white-space: nowrap;
width: 27rem;
.small-icon {
font-size: $font-size-mini;
vertical-align: top;
}
}
.conversation--meta {

2
app/javascript/dashboard/assets/scss/widgets/_modal.scss
View file

@ -19,7 +19,7 @@
cursor: pointer;
font-size: $font-size-big;
line-height: $space-normal;
padding: $space-normal $space-two;
padding: $space-normal;
position: absolute;
right: $space-micro;
top: $space-micro;

14
app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
View file

@ -31,6 +31,8 @@
.wrap,
.child-icon {
color: $color-gray;
&:hover {
color: $color-woot;
}
@ -62,7 +64,7 @@
.bottom-nav {
@include flex;
@include space-between-column;
@include padding($space-one $space-normal $space-one $space-one);
@include padding($space-one);
@include border-normal-top;
flex-direction: column;
position: relative;
@ -111,16 +113,6 @@
line-height: $global-lineheight;
}
.hamburger--menu {
cursor: pointer;
display: none;
margin-right: $space-normal;
@media screen and (max-width: 1200px) {
display: block;
}
}
.header--icon {
display: block;
margin-right: $space-normal;

4
app/javascript/dashboard/components/Accordion/AccordionItem.vue
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>

2
app/javascript/dashboard/components/ChatList.vue
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>

8
app/javascript/dashboard/components/CustomAttribute.vue
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"
/>

4
app/javascript/dashboard/components/Modal.vue
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>

2
app/javascript/dashboard/components/NetworkNotification.vue
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>

16
app/javascript/dashboard/components/SidemenuIcon.vue
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>

5
app/javascript/dashboard/components/buttons/Button.vue
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>

2
app/javascript/dashboard/components/buttons/FormSubmitButton.vue
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>

12
app/javascript/dashboard/components/buttons/ResolveAction.vue
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"
/>

26
app/javascript/dashboard/components/layout/Sidebar.vue
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;
}
}

27
app/javascript/dashboard/components/layout/SidebarItem.vue
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>

8
app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
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>

13
app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
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);
}

4
app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
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({

4
app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
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);
});
});

9
app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
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>
`;

25
app/javascript/dashboard/components/ui/Label.vue
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>

2
app/javascript/dashboard/components/ui/Wizard.vue
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">

5
app/javascript/dashboard/components/ui/WootButton.vue
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: '',

9
app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
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>

6
app/javascript/dashboard/components/widgets/BackButton.vue
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>

38
app/javascript/dashboard/components/widgets/InboxIconWithName.vue
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>

23
app/javascript/dashboard/components/widgets/InboxListItem.vue
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>

11
app/javascript/dashboard/components/widgets/InboxName.vue
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>

11
app/javascript/dashboard/components/widgets/SearchBox.vue
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>

20
app/javascript/dashboard/components/widgets/TableFooter.vue
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>

11
app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
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>

4
app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
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')"

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"

8
app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
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 {

23
app/javascript/dashboard/helper/inbox.js
View file

@ -3,32 +3,35 @@ import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
export const getInboxClassByType = (type, phoneNumber) => {
switch (type) {
case INBOX_TYPES.WEB:
return 'ion-earth';
return 'globe-desktop';
case INBOX_TYPES.FB:
return 'ion-social-facebook';
return 'brand-facebook';
case INBOX_TYPES.TWITTER:
return 'ion-social-twitter';
return 'brand-twitter';
case INBOX_TYPES.TWILIO:
return phoneNumber.startsWith('whatsapp')
? 'ion-social-whatsapp-outline'
: 'ion-android-textsms';
? 'brand-whatsapp'
: 'brand-sms';
case INBOX_TYPES.WHATSAPP:
return 'ion-social-whatsapp-outline';
return 'brand-whatsapp';
case INBOX_TYPES.API:
return 'ion-cloud';
return 'cloud';
case INBOX_TYPES.EMAIL:
return 'ion-ios-email';
return 'mail';
case INBOX_TYPES.TELEGRAM:
return 'ion-ios-navigate';
return 'brand-telegram';
case INBOX_TYPES.LINE:
return 'brand-line';
default:
return 'ion-ios-chatbubble';
return 'chat';
}
};

16
app/javascript/dashboard/helper/specs/inbox.spec.js
View file

@ -3,33 +3,35 @@ import { getInboxClassByType } from '../inbox';
describe('#Inbox Helpers', () => {
describe('getInboxClassByType', () => {
it('should return correct class for web widget', () => {
expect(getInboxClassByType('Channel::WebWidget')).toEqual('ion-earth');
expect(getInboxClassByType('Channel::WebWidget')).toEqual(
'globe-desktop'
);
});
it('should return correct class for fb page', () => {
expect(getInboxClassByType('Channel::FacebookPage')).toEqual(
'ion-social-facebook'
'brand-facebook'
);
});
it('should return correct class for twitter profile', () => {
expect(getInboxClassByType('Channel::TwitterProfile')).toEqual(
'ion-social-twitter'
'brand-twitter'
);
});
it('should return correct class for twilio sms', () => {
expect(getInboxClassByType('Channel::TwilioSms', '')).toEqual(
'ion-android-textsms'
'brand-sms'
);
});
it('should return correct class for whatsapp', () => {
expect(getInboxClassByType('Channel::TwilioSms', 'whatsapp')).toEqual(
'ion-social-whatsapp-outline'
'brand-whatsapp'
);
});
it('should return correct class for Api', () => {
expect(getInboxClassByType('Channel::Api')).toEqual('ion-cloud');
expect(getInboxClassByType('Channel::Api')).toEqual('cloud');
});
it('should return correct class for Email', () => {
expect(getInboxClassByType('Channel::Email')).toEqual('ion-ios-email');
expect(getInboxClassByType('Channel::Email')).toEqual('mail');
});
});
});

6
app/javascript/dashboard/i18n/locale/ar/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "رسالة صورة"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "رسالة صوتية"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "رسالة فيديو"
},
"file": {
"ICON": "ion-document",
"CONTENT": "مرفقات"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "الموقع الجغرافي"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "قام بمشاركة رابط"
}
},

6
app/javascript/dashboard/i18n/locale/ca/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Missatge d'imatge"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Missatge d'àudio"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Missatge de vídeo"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Fitxer adjunt"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Ubicació"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "ha compartit una URL"
}
},

6
app/javascript/dashboard/i18n/locale/cs/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Zpráva obrázku"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Zvuková zpráva"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Video zpráva"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Přílohu souboru"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Poloha"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "sdílel URL"
}
},

6
app/javascript/dashboard/i18n/locale/da/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Billedbesked"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Lydbesked"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Video besked"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Fil Vedhæftning"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Lokation"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "har delt en URL"
}
},

6
app/javascript/dashboard/i18n/locale/de/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Bildnachricht"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Audio-Nachricht"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Videonachricht"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Dateianhang"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Ort"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "hat eine URL geteilt"
}
},

6
app/javascript/dashboard/i18n/locale/el/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Μήνυμα εικόνας"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Μήνυμα ήχου"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Μήνυμα βίντεο"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Επισυναπτόμενο αρχείο"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Θέση"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "έχει μοιράσει ένα σύνδεσμο"
}
},

6
app/javascript/dashboard/i18n/locale/en/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Picture message"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Audio message"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Video message"
},
"file": {
"ICON": "ion-document",
"CONTENT": "File Attachment"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Location"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "has shared a url"
}
},

6
app/javascript/dashboard/i18n/locale/es/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Mensaje de imagen"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Mensaje de audio"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Mensaje de vídeo"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Archivo adjunto"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Ubicación"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "ha compartido una url"
}
},

6
app/javascript/dashboard/i18n/locale/fa/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "پیام تصویری"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "پیام صوتی"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "پیام ویدیویی"
},
"file": {
"ICON": "ion-document",
"CONTENT": "فایل الصاقی"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "مکان"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "یک آدرس URL به اشتراک گذاشته شده"
}
},

6
app/javascript/dashboard/i18n/locale/fi/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Kuvaviesti"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Ääniviesti"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Videoviesti"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Liite"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Sijainti"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "on jakanut URL-osoitteen"
}
},

6
app/javascript/dashboard/i18n/locale/fr/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Message image"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Message audio"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Message vidéo"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Pièce jointe"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Localisation"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "a partagé une URL"
}
},

6
app/javascript/dashboard/i18n/locale/he/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "הודעת תמונה"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "הודעות קוליות"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "הודעות וידאו"
},
"file": {
"ICON": "ion-document",
"CONTENT": "קובץ מצורף"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "מיקום"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "שיתף קישור"
}
},

6
app/javascript/dashboard/i18n/locale/hi/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Picture message"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Audio message"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Video message"
},
"file": {
"ICON": "ion-document",
"CONTENT": "File Attachment"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Location"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "has shared a url"
}
},

6
app/javascript/dashboard/i18n/locale/hu/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Képüzenet"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Hangüzenet"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Videoüzenet"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Csatolt file"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Hely"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "megosztott URL-t tartalmaz"
}
},

6
app/javascript/dashboard/i18n/locale/id/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Pesan gambar"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Pesan audio"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Pesan video"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Lampiran File"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Lokasi"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "telah membagikan url"
}
},

6
app/javascript/dashboard/i18n/locale/it/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Messaggio immagine"
},
"audio": {
"ICON": "-quantità-alto",
"CONTENT": "Messaggio audio"
},
"video": {
"ICON": "videocam",
"CONTENT": "Messaggio video"
},
"file": {
"ICON": "e-documento",
"CONTENT": "File Allegato"
},
"location": {
"ICON": "Posizione-ios",
"CONTENT": "Localizzazione"
},
"fallback": {
"ICON": "e-link",
"CONTENT": "ha condiviso un url"
}
},

6
app/javascript/dashboard/i18n/locale/ja/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "画像メッセージ"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "音声メッセージ"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "ビデオ メッセージ"
},
"file": {
"ICON": "ion-document",
"CONTENT": "添付ファイル"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "場所"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "URLを共有しています"
}
},

6
app/javascript/dashboard/i18n/locale/ko/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "사진 메시지"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "음성 메시지"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "영상 메시지"
},
"file": {
"ICON": "ion-document",
"CONTENT": "파일 첨부"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "장소"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "URL을 공유함"
}
},

6
app/javascript/dashboard/i18n/locale/ml/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "ചിത്ര സന്ദേശം"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "ഓഡിയോ സന്ദേശം"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "വീഡിയോ സന്ദേശം"
},
"file": {
"ICON": "ion-document",
"CONTENT": "ഫയൽ അറ്റാച്ചുമെന്റ്"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "സ്ഥാനം"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "ഒരു യു. ആർ. എൽ പങ്കിട്ടു"
}
},

6
app/javascript/dashboard/i18n/locale/ne/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Picture message"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Audio message"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Video message"
},
"file": {
"ICON": "ion-document",
"CONTENT": "File Attachment"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Location"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "has shared a url"
}
},

6
app/javascript/dashboard/i18n/locale/nl/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Bericht met foto"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Audiobericht"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Videobericht"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Bestandsbijlage"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Locatie"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "heeft een url gedeeld"
}
},

6
app/javascript/dashboard/i18n/locale/no/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Bildemelding"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Lydmelding"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Video beskjed"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Vedlegg"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Plassering"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "har delt en URL"
}
},

6
app/javascript/dashboard/i18n/locale/pl/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Wiadomość obrazkowa"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Wiadomość audio"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Wiadomość wideo"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Załącznik pliku"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Lokalizacja"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "udostępnił adres url"
}
},

6
app/javascript/dashboard/i18n/locale/pt/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Mensagem de imagem"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Mensagem de áudio"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Mensagem de vídeo"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Arquivo anexo"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Local:"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "compartilhou uma url"
}
},

6
app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Mensagem de imagem"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Mensagem de áudio"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Mensagem de vídeo"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Arquivo anexo"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Localização"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "compartilhou uma URL"
}
},

6
app/javascript/dashboard/i18n/locale/ru/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Изображение"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Аудиосообщение"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Видео"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Прикрепленный файл"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Местоположение"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "поделился ссылкой"
}
},

6
app/javascript/dashboard/i18n/locale/sk/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Picture message"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Audio message"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Video message"
},
"file": {
"ICON": "ion-document",
"CONTENT": "File Attachment"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Location"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "has shared a url"
}
},

6
app/javascript/dashboard/i18n/locale/sv/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Bildmeddelande"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Ljudmeddelande"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Videomeddelande"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Bifogad fil"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Plats"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "har delat en webbadress"
}
},

6
app/javascript/dashboard/i18n/locale/ta/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "பட செய்தி"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "ஆடியோ செய்தி"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "வீடியோ செய்தி"
},
"file": {
"ICON": "ion-document",
"CONTENT": "பைல் இணைப்புகள்"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "இருப்பிடம்"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "ஒரு URL ஐப் பகிர்ந்துள்ளார்"
}
},

6
app/javascript/dashboard/i18n/locale/th/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "ข้อความภาพ"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "ข้อความเสียง"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "ข้อความวิดิโอ"
},
"file": {
"ICON": "ion-document",
"CONTENT": "เเนบไฟล์"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "สถานที่"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "ได้เเชร์ลิ้ง"
}
},

6
app/javascript/dashboard/i18n/locale/tr/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Görsel mesaj"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Sesli mesaj"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Video mesajı"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Dosya eklentisi"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Yer"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "bir url paylaştı"
}
},

6
app/javascript/dashboard/i18n/locale/uk/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Повідомлення з картинкою"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Аудіо-повідомлення"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Відеоповідомлення"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Повідомлення з файлом"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Місцезнаходження"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "поділився посиланням"
}
},

6
app/javascript/dashboard/i18n/locale/vi/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "Tin nhắn hình ảnh"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "Tin nhắn thoại"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "Tin nhắn video"
},
"file": {
"ICON": "ion-document",
"CONTENT": "Tập tin đính kèm"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "Địa điểm"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "có một đường dẫn chia sẻ"
}
},

6
app/javascript/dashboard/i18n/locale/zh/chatlist.json
View file

@ -53,27 +53,21 @@
],
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "图片消息"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "音频消息"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "视频消息"
},
"file": {
"ICON": "ion-document",
"CONTENT": "附件"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "位置"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "分享了一个网址"
}
},

6
app/javascript/dashboard/i18n/locale/zh_CN/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "图片消息"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "音频消息"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "视频消息"
},
"file": {
"ICON": "ion-document",
"CONTENT": "附件"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "位置"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "分享了一个网址"
}
},

6
app/javascript/dashboard/i18n/locale/zh_TW/chatlist.json
View file

@ -54,27 +54,21 @@
},
"ATTACHMENTS": {
"image": {
"ICON": "ion-image",
"CONTENT": "圖片訊息"
},
"audio": {
"ICON": "ion-volume-high",
"CONTENT": "聲音訊息"
},
"video": {
"ICON": "ion-ios-videocam",
"CONTENT": "影片訊息"
},
"file": {
"ICON": "ion-document",
"CONTENT": "附件"
},
"location": {
"ICON": "ion-ios-location",
"CONTENT": "位置"
},
"fallback": {
"ICON": "ion-link",
"CONTENT": "分享了一個網址"
}
},

6
app/javascript/dashboard/i18n/sidebarItems/campaigns.js
View file

@ -4,21 +4,21 @@ const campaigns = accountId => ({
routes: ['settings_account_campaigns', 'one_off'],
menuItems: {
back: {
icon: 'ion-ios-arrow-back',
icon: 'chevron-left',
label: 'HOME',
hasSubMenu: false,
toStateName: 'home',
toState: frontendURL(`accounts/${accountId}/dashboard`),
},
ongoingCampaigns: {
icon: 'ion-arrow-swap',
icon: 'arrow-swap',
label: 'ONGOING',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
toStateName: 'settings_account_campaigns',
},
onOffCampaigns: {
icon: 'ion-radio-waves',
icon: 'sound-source',
label: 'ONE_OFF',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/campaigns/one_off`),

12
app/javascript/dashboard/i18n/sidebarItems/common.js
View file

@ -17,7 +17,7 @@ const common = accountId => ({
],
menuItems: {
assignedToMe: {
icon: 'ion-chatbox-working',
icon: 'chat',
label: 'CONVERSATIONS',
hasSubMenu: false,
key: '',
@ -26,35 +26,35 @@ const common = accountId => ({
toStateName: 'home',
},
contacts: {
icon: 'ion-person',
icon: 'book-contacts',
label: 'CONTACTS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/contacts`),
toStateName: 'contacts_dashboard',
},
notifications: {
icon: 'ion-ios-bell',
icon: 'alert',
label: 'NOTIFICATIONS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/notifications`),
toStateName: 'notifications_dashboard',
},
report: {
icon: 'ion-arrow-graph-up-right',
icon: 'arrow-trending-lines',
label: 'REPORTS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/reports`),
toStateName: 'settings_account_reports',
},
campaigns: {
icon: 'ion-speakerphone',
icon: 'megaphone',
label: 'CAMPAIGNS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/campaigns`),
toStateName: 'settings_account_campaigns',
},
settings: {
icon: 'ion-settings',
icon: 'settings',
label: 'SETTINGS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings`),

4
app/javascript/dashboard/i18n/sidebarItems/contacts.js
View file

@ -8,14 +8,14 @@ const contacts = accountId => ({
],
menuItems: {
back: {
icon: 'ion-ios-arrow-back',
icon: 'chevron-left',
label: 'HOME',
hasSubMenu: false,
toStateName: 'home',
toState: frontendURL(`accounts/${accountId}/dashboard`),
},
contacts: {
icon: 'ion-person',
icon: 'contact-card-group',
label: 'ALL_CONTACTS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/contacts`),

14
app/javascript/dashboard/i18n/sidebarItems/reports.js
View file

@ -11,49 +11,49 @@ const reports = accountId => ({
],
menuItems: {
back: {
icon: 'ion-ios-arrow-back',
icon: 'chevron-left',
label: 'HOME',
hasSubMenu: false,
toStateName: 'home',
toState: frontendURL(`accounts/${accountId}/dashboard`),
},
reportOverview: {
icon: 'ion-arrow-graph-up-right',
icon: 'arrow-trending-lines',
label: 'REPORTS_OVERVIEW',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/reports/overview`),
toStateName: 'settings_account_reports',
},
csatReports: {
icon: 'ion-happy',
icon: 'emoji',
label: 'CSAT',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/reports/csat`),
toStateName: 'csat_reports',
},
agentReports: {
icon: 'ion-person-stalker',
icon: 'people',
label: 'REPORTS_AGENT',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/reports/agent`),
toStateName: 'agent_reports',
},
labelReports: {
icon: 'ion-pricetags',
icon: 'tag',
label: 'REPORTS_LABEL',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/reports/label`),
toStateName: 'label_reports',
},
inboxReports: {
icon: 'ion-archive',
icon: 'mail-inbox-all',
label: 'REPORTS_INBOX',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/reports/inboxes`),
toStateName: 'inbox_reports',
},
teamReports: {
icon: 'ion-ios-people',
icon: 'people-team',
label: 'REPORTS_TEAM',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/reports/teams`),

22
app/javascript/dashboard/i18n/sidebarItems/settings.js
View file

@ -32,42 +32,42 @@ const settings = accountId => ({
],
menuItems: {
back: {
icon: 'ion-ios-arrow-back',
icon: 'chevron-left',
label: 'HOME',
hasSubMenu: false,
toStateName: 'home',
toState: frontendURL(`accounts/${accountId}/dashboard`),
},
agents: {
icon: 'ion-person-stalker',
icon: 'people',
label: 'AGENTS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
toStateName: 'agent_list',
},
teams: {
icon: 'ion-ios-people',
icon: 'people-team',
label: 'TEAMS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
toStateName: 'settings_teams_list',
},
inboxes: {
icon: 'ion-archive',
icon: 'mail-inbox-all',
label: 'INBOXES',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
toStateName: 'settings_inbox_list',
},
labels: {
icon: 'ion-pricetags',
icon: 'tag',
label: 'LABELS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
toStateName: 'labels_list',
},
attributes: {
icon: 'ion-code',
icon: 'code',
label: 'CUSTOM_ATTRIBUTES',
hasSubMenu: false,
toState: frontendURL(
@ -76,14 +76,14 @@ const settings = accountId => ({
toStateName: 'attributes_list',
},
automation: {
icon: 'ion-wrench',
icon: 'autocorrect',
label: 'AUTOMATION',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
toStateName: 'automation_list',
},
cannedResponses: {
icon: 'ion-chatbox-working',
icon: 'chat-multiple',
label: 'CANNED_RESPONSES',
hasSubMenu: false,
toState: frontendURL(
@ -92,21 +92,21 @@ const settings = accountId => ({
toStateName: 'canned_list',
},
settings_integrations: {
icon: 'ion-flash',
icon: 'flash-on',
label: 'INTEGRATIONS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/integrations`),
toStateName: 'settings_integrations',
},
settings_applications: {
icon: 'ion-asterisk',
icon: 'star-emphasis',
label: 'APPLICATIONS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/applications`),
toStateName: 'settings_applications',
},
general_settings_index: {
icon: 'ion-gear-a',
icon: 'settings',
label: 'ACCOUNT_SETTINGS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/general`),

2
app/javascript/dashboard/mixins/specs/attributeFixtures.js
View file

@ -18,7 +18,7 @@ export default [
attribute_model: 'conversation_attribute',
created_at: '2021-09-16T13:06:47.329Z',
default_value: null,
icon: 'ion-calculator',
icon: 'fluent-calculator',
id: 10,
updated_at: '2021-09-22T10:42:25.873Z',
value: 2021,

2
app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
View file

@ -70,7 +70,7 @@ describe('attributeMixin', () => {
attribute_model: 'conversation_attribute',
created_at: '2021-09-16T13:06:47.329Z',
default_value: null,
icon: 'ion-calculator',
icon: 'fluent-calculator',
id: 10,
updated_at: '2021-09-22T10:42:25.873Z',
value: 2021,

2
app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
View file

@ -36,7 +36,7 @@
variant="clear link"
size="small"
color-scheme="secondary"
icon="ion-compose"
icon="edit"
class-names="edit-button"
@click="onEdit"
/>

10
app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
View file

@ -10,10 +10,11 @@
</h5>
<p class="option__body">
<span v-if="email" class="email-icon-wrap">
<i class="icon ion-email" />{{ email }}
<fluent-icon class="merge-contact--icon" icon="mail" size="12" />
{{ email }}
</span>
<span v-if="phoneNumber" class="phone-icon-wrap">
<i class="icon ion-ios-telephone" />
<fluent-icon class="merge-contact--icon" icon="call" size="12" />
{{ phoneNumber }}
</span>
<span v-if="!phoneNumber && !email">{{ '---' }}</span>
@ -102,4 +103,9 @@ export default {
width: auto;
}
}
.merge-contact--icon {
margin-bottom: var(--space-minus-micro);
margin-right: var(--space-micro);
}
</style>

14
app/javascript/dashboard/modules/contact/components/ContactFields.vue
View file

@ -1,9 +1,11 @@
<template>
<div class="contact-fields">
<h3 class="block-title title">{{ $t('CONTACTS_PAGE.FIELDS') }}</h3>
<h3 class="block-title title">
{{ $t('CONTACTS_PAGE.FIELDS') }}
</h3>
<attribute
:label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
icon="ion-email"
icon="mail"
emoji=""
:value="contact.email"
:show-edit="true"
@ -11,7 +13,7 @@
/>
<attribute
:label="$t('CONTACT_PANEL.PHONE_NUMBER')"
icon="ion-ios-telephone"
icon="call"
emoji=""
:value="contact.phone_number"
:show-edit="true"
@ -20,7 +22,7 @@
<attribute
v-if="additionalAttributes.location"
:label="$t('CONTACT_PANEL.LOCATION')"
icon="ion-map"
icon="map"
emoji="🌍"
:value="additionalAttributes.location"
:show-edit="true"
@ -33,7 +35,7 @@
>
<attribute
:label="attribute"
icon="ion-arrow-right-c"
icon="chevron-right"
:value="customAttributes[attribute]"
:show-edit="true"
@update="value => onCustomAttributeUpdate(attribute, value)"
@ -42,7 +44,7 @@
<woot-button
size="small"
variant="link"
icon="ion-plus"
icon="add"
@click="handleCustomCreate"
>
{{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}

2
app/javascript/dashboard/modules/contact/components/ContactIntro.vue
View file

@ -33,7 +33,7 @@
<woot-button
variant="hollow"
size="small expanded"
icon="ion-compose"
icon="edit"
@click="onEditClick"
>
{{ $t('EDIT_CONTACT.BUTTON_LABEL') }}

6
app/javascript/dashboard/modules/contact/components/MergeContact.vue
View file

@ -33,7 +33,7 @@
<div class="child-contact-wrap">
<div class="child-arrow">
<i class="ion-ios-arrow-up up" />
<fluent-icon icon="arrow-up" class="up" size="17" />
</div>
<div
class="child-contact multiselect-wrap--medium"
@ -213,8 +213,8 @@ export default {
.up {
position: absolute;
top: -11px;
left: var(--space-normal);
top: var(--space-minus-smaller);
left: var(--space-slab);
}
.footer {

9
app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
View file

@ -1,8 +1,7 @@
<template>
<div class="context-menu">
<woot-button
icon="ion-more"
size="large"
icon="more-vertical"
class="button--delete-message"
color-scheme="secondary"
variant="link"
@ -19,7 +18,8 @@
<woot-button
variant="clear"
size="small"
icon="ion-ios-copy-outline"
icon="clipboard"
icon-size="16"
@click="handleCopy"
>
{{ $t('CONVERSATION.CONTEXT_MENU.COPY') }}
@ -30,7 +30,8 @@
variant="clear"
color-scheme="alert"
size="small"
icon="ion-trash-a"
icon="delete"
icon-size="16"
@click="handleDelete"
>
{{ $t('CONVERSATION.CONTEXT_MENU.DELETE') }}

3
app/javascript/dashboard/modules/notes/components/ContactNote.vue
View file

@ -19,7 +19,8 @@
v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
variant="smooth"
size="tiny"
icon="ion-trash-b"
icon="delete"
icon-size="16"
color-scheme="secondary"
@click="onDelete"
/>

2
app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
View file

@ -4,7 +4,7 @@
:class="{ 'border-left': showAvatar }"
>
<span v-if="showAvatar" class="close-button" @click="onClose">
<i class="ion-android-close close-icon" />
<fluent-icon icon="dismiss" class="close-icon" />
</span>
<contact-info
:show-avatar="showAvatar"

3
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
View file

@ -34,6 +34,7 @@ import Spinner from 'shared/components/Spinner.vue';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
import timeMixin from 'dashboard/mixins/time';
import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
export default {
components: {
@ -228,7 +229,7 @@ export default {
rel="noopener noreferrer nofollow"
href={`https://${profile}.com/${profiles[profile]}`}
>
<i class={`ion-social-${profile}`} />
<FluentIcon icon={`brand-${profile}`} />
</a>
)
)}

6
app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
View file

@ -8,7 +8,7 @@
</div>
<div class="right-aligned-wrap">
<div class="search-wrap">
<i class="ion-ios-search-strong search-icon" />
<fluent-icon icon="search" class="search-icon" />
<input
type="text"
:placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
@ -28,7 +28,7 @@
<woot-button
color-scheme="success"
icon="ion-android-add-circle"
icon="add-circle"
class="margin-right-small"
data-testid="create-new-contact"
@click="onToggleCreate"
@ -38,7 +38,7 @@
<woot-button
color-scheme="info"
icon="ion-android-upload"
icon="cloud-backup"
@click="onToggleImport"
>
{{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}

2
app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
View file

@ -25,7 +25,7 @@
<woot-button
variant="smooth"
size="small"
icon="ion-compose"
icon="edit"
color-scheme="secondary"
class="action-button"
@click="onEdit"

10
app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
View file

@ -1,8 +1,10 @@
<template>
<div class="medium-3 bg-white contact--panel">
<span class="close-button" @click="onPanelToggle">
<i class="ion-chevron-right" />
</span>
<woot-button
icon="chevron-right"
class="close-button clear secondary"
@click="onPanelToggle"
/>
<contact-info :contact="contact" :channel-type="channelType" />
<draggable
:list="conversationSidebarItems"
@ -254,7 +256,7 @@ export default {
.close-button {
position: absolute;
right: $space-two;
top: $space-slab + $space-two;
top: $space-slab;
font-size: $font-size-default;
color: $color-heading;
z-index: 9989;

Some files were not shown because too many files have changed in this diff Show more