fix: Update route permissions in the new primary menu (#3499)
* fix: Display rolewise primary sidebar * Fix issues with roles * Fix active style * Fix accessible menu * Fix key missing * Changes menu icon size Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
This commit is contained in:
Pranav Raj S
GitHub
parent
b826319776
commit
8b4134c790
23 changed files with 282 additions and 349 deletions
|
|
@ -1,41 +1,37 @@
|
|||
<template>
|
||||
<aside class="woot-sidebar" :class="{ 'only-primary': !showSecondaryMenu }">
|
||||
<aside class="woot-sidebar">
|
||||
<primary-sidebar
|
||||
:logo-source="globalConfig.logo"
|
||||
:installation-name="globalConfig.installationName"
|
||||
:account-id="accountId"
|
||||
:menu-items="primaryMenuItems"
|
||||
:active-menu-item="activePrimaryMenu.key"
|
||||
@toggle-accounts="toggleAccountModal"
|
||||
@key-shortcut-modal="toggleKeyShortcutModal"
|
||||
/>
|
||||
|
||||
<secondary-sidebar
|
||||
v-if="showSecondaryMenu"
|
||||
:account-id="accountId"
|
||||
:inboxes="inboxes"
|
||||
:account-labels="accountLabels"
|
||||
:labels="labels"
|
||||
:teams="teams"
|
||||
:menu-items="primaryMenuItems"
|
||||
:menu-config="activeSecondaryMenu"
|
||||
:current-role="currentRole"
|
||||
@add-label="showAddLabelPopup"
|
||||
/>
|
||||
|
||||
<woot-key-shortcut-modal
|
||||
v-if="showShortcutModal"
|
||||
@close="closeKeyShortcutModal"
|
||||
@clickaway="closeKeyShortcutModal"
|
||||
/>
|
||||
|
||||
<account-selector
|
||||
:show-account-modal="showAccountModal"
|
||||
@close-account-modal="toggleAccountModal"
|
||||
@show-create-account-modal="openCreateAccountModal"
|
||||
/>
|
||||
|
||||
<add-account-modal
|
||||
:show="showCreateAccountModal"
|
||||
@close-account-create-modal="closeCreateAccountModal"
|
||||
/>
|
||||
|
||||
<woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
|
||||
<add-label-modal @close="hideAddLabelPopup" />
|
||||
</woot-modal>
|
||||
|
|
@ -46,14 +42,14 @@
|
|||
import { mapGetters } from 'vuex';
|
||||
|
||||
import adminMixin from '../../mixins/isAdmin';
|
||||
import { getSidebarItems } from '../../i18n/default-sidebar';
|
||||
import { getSidebarItems } from './config/default-sidebar';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
|
||||
import AccountSelector from './sidebarComponents/AccountSelector.vue';
|
||||
import AddAccountModal from './sidebarComponents/AddAccountModal.vue';
|
||||
import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
|
||||
import PrimarySidebar from 'dashboard/modules/sidebar/components/Primary';
|
||||
import SecondarySidebar from 'dashboard/modules/sidebar/components/Secondary';
|
||||
import PrimarySidebar from './sidebarComponents/Primary';
|
||||
import SecondarySidebar from './sidebarComponents/Secondary';
|
||||
import WootKeyShortcutModal from 'components/widgets/modal/WootKeyShortcutModal';
|
||||
import {
|
||||
hasPressedAltAndCKey,
|
||||
|
|
@ -93,38 +89,34 @@ export default {
|
|||
inboxes: 'inboxes/getInboxes',
|
||||
accountId: 'getCurrentAccountId',
|
||||
currentRole: 'getCurrentRole',
|
||||
accountLabels: 'labels/getLabelsOnSidebar',
|
||||
labels: 'labels/getLabelsOnSidebar',
|
||||
teams: 'teams/getMyTeams',
|
||||
}),
|
||||
|
||||
sideMenuItems() {
|
||||
sideMenuConfig() {
|
||||
return getSidebarItems(this.accountId);
|
||||
},
|
||||
primaryMenuItems() {
|
||||
const menuItems = Object.values(
|
||||
getSidebarItems(this.accountId).common.menuItems
|
||||
const menuItems = this.sideMenuConfig.primaryMenu;
|
||||
return menuItems.filter(menuItem =>
|
||||
menuItem.roles.includes(this.currentRole)
|
||||
);
|
||||
},
|
||||
activeSecondaryMenu() {
|
||||
const { secondaryMenu } = this.sideMenuConfig;
|
||||
const { name: currentRoute } = this.$route;
|
||||
|
||||
return menuItems;
|
||||
const activeSecondaryMenu =
|
||||
secondaryMenu.find(menuItem =>
|
||||
menuItem.routes.includes(currentRoute)
|
||||
) || {};
|
||||
return activeSecondaryMenu;
|
||||
},
|
||||
currentRoute() {
|
||||
return this.$store.state.route.name;
|
||||
},
|
||||
shouldShowNotificationsSideMenu() {
|
||||
return this.sideMenuItems.notifications.routes.includes(
|
||||
this.currentRoute
|
||||
);
|
||||
},
|
||||
shouldShowProfileSideMenu() {
|
||||
return (
|
||||
this.currentRoute === 'profile_settings_index' ||
|
||||
this.currentRoute === 'profile_settings'
|
||||
);
|
||||
},
|
||||
showSecondaryMenu() {
|
||||
if (this.shouldShowNotificationsSideMenu) return false;
|
||||
if (this.shouldShowProfileSideMenu) return false;
|
||||
return true;
|
||||
activePrimaryMenu() {
|
||||
const activePrimaryMenu =
|
||||
this.primaryMenuItems.find(
|
||||
menuItem => menuItem.key === this.activeSecondaryMenu.parentNav
|
||||
) || {};
|
||||
return activePrimaryMenu;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -169,23 +161,11 @@ export default {
|
|||
}
|
||||
},
|
||||
isCurrentRouteSameAsNavigation(routeName) {
|
||||
return router.currentRoute && router.currentRoute.name === routeName;
|
||||
return this.$route.name === routeName;
|
||||
},
|
||||
toggleSupportChatWindow() {
|
||||
window.$chatwoot.toggle();
|
||||
},
|
||||
filterMenuItemsByRole(menuItems) {
|
||||
if (!this.currentRole) {
|
||||
return [];
|
||||
}
|
||||
return menuItems.filter(
|
||||
menuItem =>
|
||||
window.roleWiseRoutes[this.currentRole].indexOf(
|
||||
menuItem.toStateName
|
||||
) > -1
|
||||
);
|
||||
},
|
||||
|
||||
toggleAccountModal() {
|
||||
this.showAccountModal = !this.showAccountModal;
|
||||
},
|
||||
|
|
@ -208,12 +188,8 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.woot-sidebar {
|
||||
background: white;
|
||||
background: var(--white);
|
||||
display: flex;
|
||||
|
||||
&.only-primary {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-menu {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
import conversations from './sidebarItems/conversations';
|
||||
import contacts from './sidebarItems/contacts';
|
||||
import reports from './sidebarItems/reports';
|
||||
import campaigns from './sidebarItems/campaigns';
|
||||
import settings from './sidebarItems/settings';
|
||||
import notifications from './sidebarItems/notifications';
|
||||
import primaryMenu from './sidebarItems/primaryMenu';
|
||||
|
||||
export const getSidebarItems = accountId => ({
|
||||
primaryMenu: primaryMenu(accountId),
|
||||
secondaryMenu: [
|
||||
conversations(accountId),
|
||||
contacts(accountId),
|
||||
reports(accountId),
|
||||
campaigns(accountId),
|
||||
settings(accountId),
|
||||
notifications(accountId),
|
||||
],
|
||||
});
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { frontendURL } from '../../helper/URLHelper';
|
||||
import { frontendURL } from '../../../../helper/URLHelper';
|
||||
|
||||
const campaigns = accountId => ({
|
||||
parentNav: 'campaigns',
|
||||
routes: ['settings_account_campaigns', 'one_off'],
|
||||
menuItems: [
|
||||
{
|
||||
|
|
@ -1,27 +1,21 @@
|
|||
import { frontendURL } from '../../helper/URLHelper';
|
||||
import { frontendURL } from '../../../../helper/URLHelper';
|
||||
|
||||
const contacts = accountId => ({
|
||||
parentNav: 'contacts',
|
||||
routes: [
|
||||
'contacts_dashboard',
|
||||
'contact_profile_dashboard',
|
||||
'contacts_labels_dashboard',
|
||||
],
|
||||
menuItems: {
|
||||
back: {
|
||||
icon: 'chevron-left',
|
||||
label: 'HOME',
|
||||
hasSubMenu: false,
|
||||
toStateName: 'home',
|
||||
toState: frontendURL(`accounts/${accountId}/dashboard`),
|
||||
},
|
||||
contacts: {
|
||||
menuItems: [
|
||||
{
|
||||
icon: 'contact-card-group',
|
||||
label: 'ALL_CONTACTS',
|
||||
hasSubMenu: false,
|
||||
toState: frontendURL(`accounts/${accountId}/contacts`),
|
||||
toStateName: 'contacts_dashboard',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export default contacts;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { frontendURL } from '../../../../helper/URLHelper';
|
||||
|
||||
const conversations = accountId => ({
|
||||
parentNav: 'conversations',
|
||||
routes: [
|
||||
'home',
|
||||
'inbox_dashboard',
|
||||
'inbox_conversation',
|
||||
'conversation_through_inbox',
|
||||
'notifications_dashboard',
|
||||
'label_conversations',
|
||||
'conversations_through_label',
|
||||
'team_conversations',
|
||||
'conversations_through_team',
|
||||
],
|
||||
menuItems: [
|
||||
{
|
||||
icon: 'chat',
|
||||
label: 'ALL_CONVERSATIONS',
|
||||
key: 'conversations',
|
||||
toState: frontendURL(`accounts/${accountId}/dashboard`),
|
||||
toolTip: 'Conversation from all subscribed inboxes',
|
||||
toStateName: 'home',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export default conversations;
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
const notifications = () => ({
|
||||
parentNav: 'notifications',
|
||||
routes: ['notifications_index'],
|
||||
menuItems: {},
|
||||
menuItems: [],
|
||||
});
|
||||
|
||||
export default notifications;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import { frontendURL } from '../../../../helper/URLHelper';
|
||||
|
||||
const primaryMenuItems = accountId => [
|
||||
{
|
||||
icon: 'chat',
|
||||
key: 'conversations',
|
||||
label: 'CONVERSATIONS',
|
||||
toState: frontendURL(`accounts/${accountId}/dashboard`),
|
||||
toStateName: 'home',
|
||||
roles: ['administrator', 'agent'],
|
||||
},
|
||||
{
|
||||
icon: 'book-contacts',
|
||||
key: 'contacts',
|
||||
label: 'CONTACTS',
|
||||
toState: frontendURL(`accounts/${accountId}/contacts`),
|
||||
toStateName: 'contacts_dashboard',
|
||||
roles: ['administrator', 'agent'],
|
||||
},
|
||||
{
|
||||
icon: 'arrow-trending-lines',
|
||||
key: 'reports',
|
||||
label: 'REPORTS',
|
||||
toState: frontendURL(`accounts/${accountId}/reports`),
|
||||
toStateName: 'settings_account_reports',
|
||||
roles: ['administrator'],
|
||||
},
|
||||
{
|
||||
icon: 'megaphone',
|
||||
key: 'campaigns',
|
||||
label: 'CAMPAIGNS',
|
||||
toState: frontendURL(`accounts/${accountId}/campaigns`),
|
||||
toStateName: 'settings_account_campaigns',
|
||||
roles: ['administrator'],
|
||||
},
|
||||
{
|
||||
icon: 'settings',
|
||||
key: 'settings',
|
||||
label: 'SETTINGS',
|
||||
toState: frontendURL(`accounts/${accountId}/settings`),
|
||||
toStateName: 'settings_home',
|
||||
roles: ['administrator', 'agent'],
|
||||
},
|
||||
];
|
||||
|
||||
export default primaryMenuItems;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const profileSettings = () => ({
|
||||
parentNav: 'profileSettings',
|
||||
routes: ['profile_settings_index'],
|
||||
menuItems: [],
|
||||
});
|
||||
|
||||
export default profileSettings;
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { frontendURL } from '../../helper/URLHelper';
|
||||
import { frontendURL } from '../../../../helper/URLHelper';
|
||||
|
||||
const reports = accountId => ({
|
||||
parentNav: 'reports',
|
||||
routes: [
|
||||
'settings_account_reports',
|
||||
'csat_reports',
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { frontendURL } from '../../helper/URLHelper';
|
||||
import { frontendURL } from '../../../../helper/URLHelper';
|
||||
|
||||
const settings = accountId => ({
|
||||
parentNav: 'settings',
|
||||
routes: [
|
||||
'agent_list',
|
||||
'canned_list',
|
||||
|
|
@ -30,43 +31,36 @@ const settings = accountId => ({
|
|||
'settings_teams_edit_finish',
|
||||
'automation_list',
|
||||
],
|
||||
menuItems: {
|
||||
back: {
|
||||
icon: 'chevron-left',
|
||||
label: 'HOME',
|
||||
hasSubMenu: false,
|
||||
toStateName: 'home',
|
||||
toState: frontendURL(`accounts/${accountId}/dashboard`),
|
||||
},
|
||||
agents: {
|
||||
menuItems: [
|
||||
{
|
||||
icon: 'people',
|
||||
label: 'AGENTS',
|
||||
hasSubMenu: false,
|
||||
toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
|
||||
toStateName: 'agent_list',
|
||||
},
|
||||
teams: {
|
||||
{
|
||||
icon: 'people-team',
|
||||
label: 'TEAMS',
|
||||
hasSubMenu: false,
|
||||
toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
|
||||
toStateName: 'settings_teams_list',
|
||||
},
|
||||
inboxes: {
|
||||
{
|
||||
icon: 'mail-inbox-all',
|
||||
label: 'INBOXES',
|
||||
hasSubMenu: false,
|
||||
toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
|
||||
toStateName: 'settings_inbox_list',
|
||||
},
|
||||
labels: {
|
||||
{
|
||||
icon: 'tag',
|
||||
label: 'LABELS',
|
||||
hasSubMenu: false,
|
||||
toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
|
||||
toStateName: 'labels_list',
|
||||
},
|
||||
attributes: {
|
||||
{
|
||||
icon: 'code',
|
||||
label: 'CUSTOM_ATTRIBUTES',
|
||||
hasSubMenu: false,
|
||||
|
|
@ -75,14 +69,14 @@ const settings = accountId => ({
|
|||
),
|
||||
toStateName: 'attributes_list',
|
||||
},
|
||||
automation: {
|
||||
{
|
||||
icon: 'autocorrect',
|
||||
label: 'AUTOMATION',
|
||||
hasSubMenu: false,
|
||||
toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
|
||||
toStateName: 'automation_list',
|
||||
},
|
||||
cannedResponses: {
|
||||
{
|
||||
icon: 'chat-multiple',
|
||||
label: 'CANNED_RESPONSES',
|
||||
hasSubMenu: false,
|
||||
|
|
@ -91,28 +85,28 @@ const settings = accountId => ({
|
|||
),
|
||||
toStateName: 'canned_list',
|
||||
},
|
||||
settings_integrations: {
|
||||
{
|
||||
icon: 'flash-on',
|
||||
label: 'INTEGRATIONS',
|
||||
hasSubMenu: false,
|
||||
toState: frontendURL(`accounts/${accountId}/settings/integrations`),
|
||||
toStateName: 'settings_integrations',
|
||||
},
|
||||
settings_applications: {
|
||||
{
|
||||
icon: 'star-emphasis',
|
||||
label: 'APPLICATIONS',
|
||||
hasSubMenu: false,
|
||||
toState: frontendURL(`accounts/${accountId}/settings/applications`),
|
||||
toStateName: 'settings_applications',
|
||||
},
|
||||
general_settings_index: {
|
||||
{
|
||||
icon: 'settings',
|
||||
label: 'ACCOUNT_SETTINGS',
|
||||
hasSubMenu: false,
|
||||
toState: frontendURL(`accounts/${accountId}/settings/general`),
|
||||
toStateName: 'general_settings_index',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export default settings;
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import PrimaryNavItem from 'dashboard/modules/sidebar/components/PrimaryNavItem';
|
||||
import PrimaryNavItem from './PrimaryNavItem';
|
||||
|
||||
export default {
|
||||
components: { PrimaryNavItem },
|
||||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
}),
|
||||
unreadCount() {
|
||||
if (!this.notificationMetadata.unreadCount) {
|
||||
return '0';
|
||||
return '';
|
||||
}
|
||||
|
||||
return this.notificationMetadata.unreadCount < 100
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
size="small"
|
||||
icon="ion-help-buoy"
|
||||
icon="chat-help"
|
||||
@click="$emit('show-support-chat-window')"
|
||||
>
|
||||
{{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
:icon="menuItem.icon"
|
||||
:name="menuItem.label"
|
||||
:to="menuItem.toState"
|
||||
:is-child-menu-active="isMenuActive(menuItem, $route.name)"
|
||||
:is-child-menu-active="menuItem.key === activeMenuItem"
|
||||
/>
|
||||
</nav>
|
||||
<div class="menu vertical user-menu">
|
||||
|
|
@ -31,9 +31,9 @@
|
|||
<script>
|
||||
import Logo from './Logo';
|
||||
import PrimaryNavItem from './PrimaryNavItem';
|
||||
import OptionsMenu from 'dashboard/components/layout/sidebarComponents/OptionsMenu';
|
||||
import AgentDetails from 'dashboard/components/layout/sidebarComponents/AgentDetails';
|
||||
import NotificationBell from 'dashboard/components/layout/sidebarComponents/NotificationBell';
|
||||
import OptionsMenu from './OptionsMenu';
|
||||
import AgentDetails from './AgentDetails';
|
||||
import NotificationBell from './NotificationBell';
|
||||
|
||||
import { frontendURL } from 'dashboard/helper/URLHelper';
|
||||
|
||||
|
|
@ -62,6 +62,10 @@ export default {
|
|||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
activeMenuItem: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -79,18 +83,6 @@ export default {
|
|||
toggleSupportChatWindow() {
|
||||
window.$chatwoot.toggle();
|
||||
},
|
||||
isMenuActive(menuItem, currentRouteName) {
|
||||
const { key = '' } = menuItem;
|
||||
|
||||
if (currentRouteName === key) return true;
|
||||
// Conversations route is defaulted as home
|
||||
// TODO: Needs to ewfactor old statenames to follow a structure while key naming.
|
||||
if (currentRouteName.includes('inbox') && key === 'conversations')
|
||||
return true;
|
||||
if (currentRouteName.includes('conversations') && key === 'conversations')
|
||||
return true;
|
||||
return false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,67 +1,34 @@
|
|||
<template>
|
||||
<div class="main-nav secondary-menu">
|
||||
<div v-if="menuConfig.menuItems.length" class="main-nav secondary-menu">
|
||||
<transition-group name="menu-list" tag="ul" class="menu vertical">
|
||||
<sidebar-item
|
||||
v-if="shouldShowConversationsSideMenu"
|
||||
:key="inboxSection.toState"
|
||||
:menu-item="inboxSection"
|
||||
<secondary-nav-item
|
||||
v-for="menuItem in accessibleMenuItems"
|
||||
:key="menuItem.toState"
|
||||
:menu-item="menuItem"
|
||||
/>
|
||||
<sidebar-item
|
||||
v-if="shouldShowTeamsSideMenu"
|
||||
:key="teamSection.toState"
|
||||
:menu-item="teamSection"
|
||||
/>
|
||||
<sidebar-item
|
||||
v-if="shouldShowConversationsSideMenu"
|
||||
:key="labelSection.toState"
|
||||
:menu-item="labelSection"
|
||||
<secondary-nav-item
|
||||
v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
|
||||
:key="menuItem.key"
|
||||
:menu-item="menuItem"
|
||||
@add-label="showAddLabelPopup"
|
||||
/>
|
||||
<sidebar-item
|
||||
v-if="shouldShowContactSideMenu"
|
||||
:key="contactLabelSection.key"
|
||||
:menu-item="contactLabelSection"
|
||||
@add-label="showAddLabelPopup"
|
||||
/>
|
||||
<sidebar-item
|
||||
v-if="shouldShowCampaignSideMenu"
|
||||
:key="campaignSubSection.key"
|
||||
:menu-item="campaignSubSection"
|
||||
/>
|
||||
<sidebar-item
|
||||
v-if="shouldShowReportsSideMenu"
|
||||
:key="reportsSubSection.key"
|
||||
:menu-item="reportsSubSection"
|
||||
/>
|
||||
<sidebar-item
|
||||
v-if="shouldShowSettingsSideMenu"
|
||||
:key="settingsSubMenu.key"
|
||||
:menu-item="settingsSubMenu"
|
||||
/>
|
||||
<sidebar-item
|
||||
v-if="shouldShowNotificationsSideMenu"
|
||||
:key="notificationsSubMenu.key"
|
||||
:menu-item="notificationsSubMenu"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { frontendURL } from '../../../helper/URLHelper';
|
||||
import SidebarItem from 'dashboard/components/layout/SidebarItem';
|
||||
import routesMixin from 'dashboard/modules/sidebar/mixins/routes.mixin';
|
||||
import SecondaryNavItem from './SecondaryNavItem.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SidebarItem,
|
||||
SecondaryNavItem,
|
||||
},
|
||||
mixins: [routesMixin],
|
||||
props: {
|
||||
accountId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
accountLabels: {
|
||||
labels: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
|
|
@ -73,12 +40,27 @@ export default {
|
|||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
menuItems: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
menuConfig: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
currentRole: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
accessibleMenuItems() {
|
||||
if (!this.currentRole) {
|
||||
return [];
|
||||
}
|
||||
return this.menuConfig.menuItems.filter(
|
||||
menuItem =>
|
||||
window.roleWiseRoutes[this.currentRole].indexOf(
|
||||
menuItem.toStateName
|
||||
) > -1
|
||||
);
|
||||
},
|
||||
inboxSection() {
|
||||
return {
|
||||
icon: 'folder',
|
||||
|
|
@ -87,7 +69,6 @@ export default {
|
|||
newLink: true,
|
||||
newLinkTag: 'NEW_INBOX',
|
||||
key: 'inbox',
|
||||
cssClass: 'menu-title align-justify',
|
||||
toState: frontendURL(`accounts/${this.accountId}/settings/inboxes/new`),
|
||||
toStateName: 'settings_inbox_new',
|
||||
newLinkRouteName: 'settings_inbox_new',
|
||||
|
|
@ -109,12 +90,11 @@ export default {
|
|||
newLink: true,
|
||||
newLinkTag: 'NEW_LABEL',
|
||||
key: 'label',
|
||||
cssClass: 'menu-title align-justify',
|
||||
toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
|
||||
toStateName: 'labels_list',
|
||||
showModalForNewItem: true,
|
||||
modalName: 'AddLabel',
|
||||
children: this.accountLabels.map(label => ({
|
||||
children: this.labels.map(label => ({
|
||||
id: label.id,
|
||||
label: label.title,
|
||||
color: label.color,
|
||||
|
|
@ -133,12 +113,11 @@ export default {
|
|||
key: 'label',
|
||||
newLink: true,
|
||||
newLinkTag: 'NEW_LABEL',
|
||||
cssClass: 'menu-title align-justify',
|
||||
toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
|
||||
toStateName: 'labels_list',
|
||||
showModalForNewItem: true,
|
||||
modalName: 'AddLabel',
|
||||
children: this.accountLabels.map(label => ({
|
||||
children: this.labels.map(label => ({
|
||||
id: label.id,
|
||||
label: label.title,
|
||||
color: label.color,
|
||||
|
|
@ -149,9 +128,6 @@ export default {
|
|||
})),
|
||||
};
|
||||
},
|
||||
campaignSubSection() {
|
||||
return this.getSubSectionByKey('campaigns');
|
||||
},
|
||||
teamSection() {
|
||||
return {
|
||||
icon: 'people-team',
|
||||
|
|
@ -160,7 +136,6 @@ export default {
|
|||
newLink: true,
|
||||
newLinkTag: 'NEW_TEAM',
|
||||
key: 'team',
|
||||
cssClass: 'menu-title align-justify teams-sidebar-menu',
|
||||
toState: frontendURL(`accounts/${this.accountId}/settings/teams/new`),
|
||||
toStateName: 'settings_teams_new',
|
||||
newLinkRouteName: 'settings_teams_new',
|
||||
|
|
@ -172,41 +147,18 @@ export default {
|
|||
})),
|
||||
};
|
||||
},
|
||||
|
||||
notificationsSubMenu() {
|
||||
additionalSecondaryMenuItems() {
|
||||
let conversationMenuItems = [this.inboxSection, this.labelSection];
|
||||
if (this.teams.length) {
|
||||
conversationMenuItems = [this.teamSection, ...conversationMenuItems];
|
||||
}
|
||||
return {
|
||||
icon: 'alert',
|
||||
label: 'NOTIFICATIONS',
|
||||
hasSubMenu: false,
|
||||
cssClass: 'menu-title align-justify',
|
||||
key: 'notifications',
|
||||
children: [],
|
||||
conversations: conversationMenuItems,
|
||||
contacts: [this.contactLabelSection],
|
||||
};
|
||||
},
|
||||
settingsSubMenu() {
|
||||
return this.getSubSectionByKey('settings');
|
||||
},
|
||||
reportsSubSection() {
|
||||
return this.getSubSectionByKey('reports');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getSubSectionByKey(subSectionKey) {
|
||||
const menuItems = Object.values(
|
||||
this.sideMenuItems[subSectionKey].menuItems
|
||||
);
|
||||
const campaignItem = this.menuItems.find(
|
||||
({ key }) => key === subSectionKey
|
||||
);
|
||||
|
||||
return {
|
||||
...campaignItem,
|
||||
children: menuItems.map(item => ({
|
||||
...item,
|
||||
label: this.$t(`SIDEBAR.${item.label}`),
|
||||
})),
|
||||
};
|
||||
},
|
||||
showAddLabelPopup() {
|
||||
this.$emit('add-label');
|
||||
},
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
@click="navigate"
|
||||
>
|
||||
<span v-if="icon" class="badge--icon">
|
||||
<fluent-icon class="inbox-icon" :icon="icon" size="10" />
|
||||
<fluent-icon class="inbox-icon" :icon="icon" size="12" />
|
||||
</span>
|
||||
<span
|
||||
v-if="labelColor"
|
||||
|
|
@ -73,7 +73,8 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$badge-size: var(--space-slab);
|
||||
$badge-size: var(--space-normal);
|
||||
$label-badge-size: var(--space-slab);
|
||||
|
||||
.button {
|
||||
margin: var(--space-small) 0;
|
||||
|
|
@ -117,8 +118,6 @@ $badge-size: var(--space-slab);
|
|||
.badge--label,
|
||||
.badge--icon {
|
||||
display: inline-flex;
|
||||
min-width: $badge-size;
|
||||
height: $badge-size;
|
||||
border-radius: var(--border-radius-small);
|
||||
margin-right: var(--space-smaller);
|
||||
background: var(--s-100);
|
||||
|
|
@ -126,7 +125,15 @@ $badge-size: var(--space-slab);
|
|||
|
||||
.badge--icon {
|
||||
align-items: center;
|
||||
height: $badge-size;
|
||||
justify-content: center;
|
||||
min-width: $badge-size;
|
||||
}
|
||||
|
||||
.badge--label {
|
||||
height: $label-badge-size;
|
||||
min-width: $label-badge-size;
|
||||
margin-left: var(--space-smaller);
|
||||
}
|
||||
|
||||
.badge.secondary {
|
||||
|
|
@ -1,16 +1,24 @@
|
|||
<template>
|
||||
<li :class="computedClass" class="sidebar-item">
|
||||
<a
|
||||
class="sub-menu-title"
|
||||
:class="getMenuItemClass"
|
||||
data-tooltip
|
||||
aria-haspopup="true"
|
||||
:title="menuItem.toolTip"
|
||||
>
|
||||
<li class="sidebar-item">
|
||||
<span v-if="hasSubMenu" class="secondary-menu--title fs-small">
|
||||
{{ $t(`SIDEBAR.${menuItem.label}`) }}
|
||||
</a>
|
||||
<ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
|
||||
<secondary-nav-item
|
||||
</span>
|
||||
<router-link
|
||||
v-else
|
||||
class="secondary-menu--title secondary-menu--link fs-small"
|
||||
:class="computedClass"
|
||||
:to="menuItem.toState"
|
||||
>
|
||||
<fluent-icon
|
||||
:icon="menuItem.icon"
|
||||
class="secondary-menu--icon"
|
||||
size="14"
|
||||
/>
|
||||
{{ $t(`SIDEBAR.${menuItem.label}`) }}
|
||||
</router-link>
|
||||
|
||||
<ul v-if="hasSubMenu" class="nested vertical menu">
|
||||
<secondary-child-nav-item
|
||||
v-for="child in menuItem.children"
|
||||
:key="child.id"
|
||||
:to="child.toState"
|
||||
|
|
@ -20,7 +28,7 @@
|
|||
:icon="computedInboxClass(child)"
|
||||
/>
|
||||
<router-link
|
||||
v-if="menuItem.newLink"
|
||||
v-if="showItem(menuItem)"
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
:to="menuItem.toState"
|
||||
custom
|
||||
|
|
@ -46,13 +54,13 @@
|
|||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
import adminMixin from '../../mixins/isAdmin';
|
||||
import adminMixin from '../../../mixins/isAdmin';
|
||||
import { getInboxClassByType } from 'dashboard/helper/inbox';
|
||||
|
||||
import SecondaryNavItem from 'dashboard/modules/sidebar/components/SecondaryNavItem';
|
||||
import SecondaryChildNavItem from './SecondaryChildNavItem';
|
||||
|
||||
export default {
|
||||
components: { SecondaryNavItem },
|
||||
components: { SecondaryChildNavItem },
|
||||
mixins: [adminMixin],
|
||||
props: {
|
||||
menuItem: {
|
||||
|
|
@ -62,10 +70,8 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapGetters({ activeInbox: 'getSelectedInbox' }),
|
||||
getMenuItemClass() {
|
||||
return this.menuItem.cssClass
|
||||
? `side-menu ${this.menuItem.cssClass}`
|
||||
: 'side-menu';
|
||||
hasSubMenu() {
|
||||
return !!this.menuItem.children;
|
||||
},
|
||||
computedClass() {
|
||||
// If active Inbox is present
|
||||
|
|
@ -76,7 +82,7 @@ export default {
|
|||
this.$store.state.route.name === 'inbox_conversation' &&
|
||||
this.menuItem.toStateName === 'home'
|
||||
) {
|
||||
return 'active';
|
||||
return 'is-active';
|
||||
}
|
||||
return ' ';
|
||||
},
|
||||
|
|
@ -88,14 +94,6 @@ export default {
|
|||
const classByType = getInboxClassByType(type, phoneNumber);
|
||||
return classByType;
|
||||
},
|
||||
computedChildClass(child) {
|
||||
if (!child.truncateLabel) return '';
|
||||
return 'text-truncate';
|
||||
},
|
||||
computedChildTitle(child) {
|
||||
if (!child.truncateLabel) return false;
|
||||
return child.label;
|
||||
},
|
||||
newLinkClick(e, navigate) {
|
||||
if (this.menuItem.newLinkRouteName) {
|
||||
navigate(e);
|
||||
|
|
@ -114,17 +112,46 @@ export default {
|
|||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.sidebar-item {
|
||||
margin: var(--space-small) 0;
|
||||
margin: var(--space-smaller) 0 0;
|
||||
}
|
||||
.sub-menu-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--space-small);
|
||||
margin-bottom: var(--space-smaller);
|
||||
|
||||
.secondary-menu--title {
|
||||
color: var(--s-600);
|
||||
display: flex;
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--space-two);
|
||||
text-transform: uppercase;
|
||||
margin: var(--space-small) 0;
|
||||
padding: 0 var(--space-small);
|
||||
}
|
||||
|
||||
.secondary-menu--link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: var(--space-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-radius: var(--border-radius-normal);
|
||||
|
||||
&:hover {
|
||||
background: var(--s-25);
|
||||
color: var(--s-600);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--w-300);
|
||||
}
|
||||
|
||||
&.router-link-exact-active,
|
||||
&.is-active {
|
||||
background: var(--w-25);
|
||||
color: var(--w-500);
|
||||
border-color: var(--w-25);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-menu--icon {
|
||||
margin-right: var(--space-smaller);
|
||||
min-width: var(--space-normal);
|
||||
}
|
||||
|
||||
.sub-menu-link {
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import common from './sidebarItems/common';
|
||||
import contacts from './sidebarItems/contacts';
|
||||
import reports from './sidebarItems/reports';
|
||||
import campaigns from './sidebarItems/campaigns';
|
||||
import settings from './sidebarItems/settings';
|
||||
import notifications from './sidebarItems/notifications';
|
||||
|
||||
// TODO - find hasSubMenu usage - July/2021
|
||||
|
||||
export const getSidebarItems = accountId => ({
|
||||
common: common(accountId),
|
||||
contacts: contacts(accountId),
|
||||
reports: reports(accountId),
|
||||
campaigns: campaigns(accountId),
|
||||
settings: settings(accountId),
|
||||
notifications: notifications(accountId),
|
||||
});
|
||||
|
|
@ -135,6 +135,7 @@
|
|||
},
|
||||
"SIDEBAR": {
|
||||
"CONVERSATIONS": "Conversations",
|
||||
"ALL_CONVERSATIONS": "All Conversations",
|
||||
"REPORTS": "Reports",
|
||||
"SETTINGS": "Settings",
|
||||
"CONTACTS": "Contacts",
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
import { frontendURL } from '../../helper/URLHelper';
|
||||
|
||||
const common = accountId => ({
|
||||
routes: [
|
||||
'home',
|
||||
'inbox_dashboard',
|
||||
'inbox_conversation',
|
||||
'conversation_through_inbox',
|
||||
'notifications_dashboard',
|
||||
'profile_settings',
|
||||
'profile_settings_index',
|
||||
'label_conversations',
|
||||
'conversations_through_label',
|
||||
'team_conversations',
|
||||
'conversations_through_team',
|
||||
'notifications_index',
|
||||
],
|
||||
menuItems: {
|
||||
assignedToMe: {
|
||||
icon: 'chat',
|
||||
label: 'CONVERSATIONS',
|
||||
hasSubMenu: true,
|
||||
key: 'conversations',
|
||||
toState: frontendURL(`accounts/${accountId}/dashboard`),
|
||||
toolTip: 'Conversation from all subscribed inboxes',
|
||||
toStateName: 'home',
|
||||
},
|
||||
contacts: {
|
||||
key: 'contacts',
|
||||
icon: 'book-contacts',
|
||||
label: 'CONTACTS',
|
||||
hasSubMenu: true,
|
||||
toState: frontendURL(`accounts/${accountId}/contacts`),
|
||||
toStateName: 'contacts_dashboard',
|
||||
},
|
||||
reports: {
|
||||
key: 'reports',
|
||||
icon: 'arrow-trending-lines',
|
||||
label: 'REPORTS',
|
||||
hasSubMenu: true,
|
||||
toState: frontendURL(`accounts/${accountId}/reports`),
|
||||
toStateName: 'settings_account_reports',
|
||||
},
|
||||
campaigns: {
|
||||
key: 'campaigns',
|
||||
icon: 'megaphone',
|
||||
label: 'CAMPAIGNS',
|
||||
hasSubMenu: true,
|
||||
toState: frontendURL(`accounts/${accountId}/campaigns`),
|
||||
toStateName: 'settings_account_campaigns',
|
||||
},
|
||||
settings: {
|
||||
key: 'settings',
|
||||
icon: 'settings',
|
||||
label: 'SETTINGS',
|
||||
hasSubMenu: true,
|
||||
toState: frontendURL(`accounts/${accountId}/settings`),
|
||||
toStateName: 'settings_home',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default common;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import { getSidebarItems } from 'dashboard/i18n/default-sidebar';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
currentRoute() {
|
||||
return this.$store.state.route.name;
|
||||
},
|
||||
sideMenuItems() {
|
||||
return getSidebarItems(this.accountId);
|
||||
},
|
||||
shouldShowConversationsSideMenu() {
|
||||
return this.sideMenuItems.common.routes.includes(this.currentRoute);
|
||||
},
|
||||
shouldShowContactSideMenu() {
|
||||
return this.sideMenuItems.contacts.routes.includes(this.currentRoute);
|
||||
},
|
||||
shouldShowCampaignSideMenu() {
|
||||
return this.sideMenuItems.campaigns.routes.includes(this.currentRoute);
|
||||
},
|
||||
shouldShowSettingsSideMenu() {
|
||||
return this.sideMenuItems.settings.routes.includes(this.currentRoute);
|
||||
},
|
||||
shouldShowReportsSideMenu() {
|
||||
return this.sideMenuItems.reports.routes.includes(this.currentRoute);
|
||||
},
|
||||
shouldShowNotificationsSideMenu() {
|
||||
return this.sideMenuItems.notifications.routes.includes(
|
||||
this.currentRoute
|
||||
);
|
||||
},
|
||||
shouldShowTeamsSideMenu() {
|
||||
return this.shouldShowConversationsSideMenu && this.teams.length;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
"book-contacts-outline": "M15.5 12.25a.75.75 0 0 0-.75-.75h-5a.75.75 0 0 0-.75.75v.5c0 1 1.383 1.75 3.25 1.75s3.25-.75 3.25-1.75v-.5ZM14 8.745C14 7.78 13.217 7 12.25 7s-1.75.779-1.75 1.745a1.75 1.75 0 1 0 3.5 0ZM4 4.5A2.5 2.5 0 0 1 6.5 2H18a2.5 2.5 0 0 1 2.5 2.5v14.25a.75.75 0 0 1-.75.75H5.5a1 1 0 0 0 1 1h13.25a.75.75 0 0 1 0 1.5H6.5A2.5 2.5 0 0 1 4 19.5v-15Zm1.5 0V18H19V4.5a1 1 0 0 0-1-1H6.5a1 1 0 0 0-1 1Z",
|
||||
"building-bank-outline": "M13.032 2.325a1.75 1.75 0 0 0-2.064 0L3.547 7.74c-.978.713-.473 2.26.736 2.26H4.5v5.8A2.75 2.75 0 0 0 3 18.25v1.5c0 .413.336.75.75.75h16.5a.75.75 0 0 0 .75-.75v-1.5a2.75 2.75 0 0 0-1.5-2.45V10h.217c1.21 0 1.713-1.547.736-2.26l-7.421-5.416Zm-1.18 1.211a.25.25 0 0 1 .295 0L18.95 8.5H5.05l6.803-4.964ZM18 10v5.5h-2V10h2Zm-3.5 0v5.5h-1.75V10h1.75Zm-3.25 0v5.5H9.5V10h1.75Zm-5.5 7h12.5c.69 0 1.25.56 1.25 1.25V19h-15v-.75c0-.69.56-1.25 1.25-1.25ZM6 15.5V10h2v5.5H6Z",
|
||||
"call-outline": "m7.056 2.418 1.167-.351a2.75 2.75 0 0 1 3.302 1.505l.902 2.006a2.75 2.75 0 0 1-.633 3.139L10.3 10.11a.25.25 0 0 0-.078.155c-.044.397.225 1.17.845 2.245.451.781.86 1.33 1.207 1.637.242.215.375.261.432.245l2.01-.615a2.75 2.75 0 0 1 3.034 1.02l1.281 1.776a2.75 2.75 0 0 1-.339 3.605l-.886.84a3.75 3.75 0 0 1-3.587.889c-2.754-.769-5.223-3.093-7.435-6.924-2.215-3.836-2.992-7.14-2.276-9.913a3.75 3.75 0 0 1 2.548-2.652Zm.433 1.437a2.25 2.25 0 0 0-1.529 1.59c-.602 2.332.087 5.261 2.123 8.788 2.033 3.522 4.222 5.582 6.54 6.23a2.25 2.25 0 0 0 2.151-.534l.887-.84a1.25 1.25 0 0 0 .154-1.639l-1.28-1.775a1.25 1.25 0 0 0-1.38-.464l-2.015.617c-1.17.348-2.232-.593-3.372-2.568C9 11.93 8.642 10.9 8.731 10.099c.047-.416.24-.8.546-1.086l1.494-1.393a1.25 1.25 0 0 0 .288-1.427l-.902-2.006a1.25 1.25 0 0 0-1.5-.684l-1.168.352Z",
|
||||
"chat-help-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.587-1.112l-3.826 1.067a1.25 1.25 0 0 1-1.54-1.54l1.068-3.823A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5A8.5 8.5 0 0 0 3.5 12c0 1.47.373 2.883 1.073 4.137l.15.27-1.112 3.984 3.987-1.112.27.15A8.5 8.5 0 1 0 12 3.5Zm0 12a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-8.75a2.75 2.75 0 0 1 2.75 2.75c0 1.01-.297 1.574-1.051 2.359l-.169.171c-.622.622-.78.886-.78 1.47a.75.75 0 0 1-1.5 0c0-1.01.297-1.574 1.051-2.359l.169-.171c.622-.622.78-.886.78-1.47a1.25 1.25 0 0 0-2.493-.128l-.007.128a.75.75 0 0 1-1.5 0A2.75 2.75 0 0 1 12 6.75Z",
|
||||
"chat-multiple-outline": "M9.562 3a7.5 7.5 0 0 0-6.798 10.673l-.724 2.842a1.25 1.25 0 0 0 1.504 1.524c.75-.18 1.903-.457 2.93-.702A7.5 7.5 0 1 0 9.561 3Zm-6 7.5a6 6 0 1 1 3.33 5.375l-.244-.121-.264.063c-.923.22-1.99.475-2.788.667l.69-2.708.07-.276-.13-.253a5.971 5.971 0 0 1-.664-2.747Zm11 10.5c-1.97 0-3.762-.759-5.1-2h.1c.718 0 1.415-.089 2.08-.257.865.482 1.86.757 2.92.757.96 0 1.866-.225 2.67-.625l.243-.121.264.063c.922.22 1.966.445 2.74.61-.175-.751-.414-1.756-.642-2.651l-.07-.276.13-.253a5.971 5.971 0 0 0 .665-2.747 5.995 5.995 0 0 0-2.747-5.042 8.44 8.44 0 0 0-.8-2.047 7.503 7.503 0 0 1 4.344 10.263c.253 1.008.509 2.1.671 2.803a1.244 1.244 0 0 1-1.467 1.5 132.62 132.62 0 0 1-2.913-.64 7.476 7.476 0 0 1-3.088.663Z",
|
||||
"chat-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.587-1.112l-3.826 1.067a1.25 1.25 0 0 1-1.54-1.54l1.068-3.823A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5A8.5 8.5 0 0 0 3.5 12c0 1.47.373 2.883 1.073 4.137l.15.27-1.112 3.984 3.987-1.112.27.15A8.5 8.5 0 1 0 12 3.5ZM8.75 13h4.498a.75.75 0 0 1 .102 1.493l-.102.007H8.75a.75.75 0 0 1-.102-1.493L8.75 13h4.498H8.75Zm0-3.5h6.505a.75.75 0 0 1 .101 1.493l-.101.007H8.75a.75.75 0 0 1-.102-1.493L8.75 9.5h6.505H8.75Z",
|
||||
"checkmark-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-1.25 9.94 4.47-4.47a.75.75 0 0 1 1.133.976l-.073.084-5 5a.75.75 0 0 1-.976.073l-.084-.073-2.5-2.5a.75.75 0 0 1 .976-1.133l.084.073 1.97 1.97 4.47-4.47-4.47 4.47Z",
|
||||
|
|
@ -73,6 +74,7 @@
|
|||
"video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
|
||||
"warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",
|
||||
|
||||
|
||||
"brand-whatsapp-outline": "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
|
||||
"brand-twitter-outline": "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z",
|
||||
"brand-facebook-outline": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
|
||||
|
|
|
|||
Loading…
Reference in a new issue