feat: Use Fluent SVG icons on the dashboard (#3482)
This commit is contained in:
Pranav Raj S
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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({
|
||||
|
||||
+3
-1
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user