KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: New sidebar component for help-center (#5017)

Browse source 
* feat: New sidebar component for help-center

* chore: Review fixes

* chore: Minor fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Sivin Varghese 2022-07-18 11:16:36 +05:30 • committed by GitHub
parent 21a8b79aa5
commit f004db3d26
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 511 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

83
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
View file

@ -1,8 +1,14 @@
<template>
<li class="sidebar-item">
<span v-if="hasSubMenu" class="secondary-menu--title fs-small">
{{ $t(`SIDEBAR.${menuItem.label}`) }}
</span>
<div v-if="hasSubMenu" class="secondary-menu--wrap">
<span class="secondary-menu--title fs-small">
{{ $t(`SIDEBAR.${menuItem.label}`) }}
</span>
<div v-if="isHelpCenterSidebar" class="submenu-icons">
<fluent-icon icon="search" class="submenu-icon" size="16" />
<fluent-icon icon="add" class="submenu-icon" size="16" />
</div>
</div>
<router-link
v-else
class="secondary-menu--title secondary-menu--link fs-small"
@ -15,6 +21,13 @@
size="14"
/>
{{ $t(`SIDEBAR.${menuItem.label}`) }}
<span
v-if="isHelpCenterSidebar"
class="count-view"
:class="computedClass"
>
{{ `${menuItem.count}` }}
</span>
<span
v-if="menuItem.label === 'AUTOMATION'"
data-view-component="true"
@ -35,6 +48,8 @@
:should-truncate="child.truncateLabel"
:icon="computedInboxClass(child)"
:warning-icon="computedInboxErrorClass(child)"
:is-help-center-sidebar="isHelpCenterSidebar"
:child-item-count="child.count"
/>
<router-link
v-if="showItem(menuItem)"
@ -79,6 +94,10 @@ export default {
type: Object,
default: () => ({}),
},
isHelpCenterSidebar: {
type: Boolean,
default: false,
},
},
computed: {
...mapGetters({ activeInbox: 'getSelectedInbox' }),
@ -120,17 +139,19 @@ export default {
// If active Inbox is present
// donot highlight conversations
if (this.activeInbox) return ' ';
if (
this.isInboxConversation ||
this.isTeamsSettings ||
this.isInboxsSettings ||
this.isIntegrationsSettings ||
this.isApplicationsSettings
) {
return 'is-active';
if (this.hasSubMenu) {
if (
this.isInboxConversation ||
this.isTeamsSettings ||
this.isInboxsSettings ||
this.isIntegrationsSettings ||
this.isApplicationsSettings
) {
return 'is-active';
}
return ' ';
}
return ' ';
return '';
},
},
methods: {
@ -170,6 +191,11 @@ export default {
margin: var(--space-smaller) 0 0;
}
.secondary-menu--wrap {
display: flex;
justify-content: space-between;
}
.secondary-menu--title {
color: var(--s-600);
display: flex;
@ -242,6 +268,7 @@ export default {
color: var(--w-500);
}
}
.beta {
padding-right: var(--space-smaller) !important;
padding-left: var(--space-smaller) !important;
@ -255,4 +282,34 @@ export default {
color: var(--g-800);
border-color: var(--g-700);
}
.count-view {
background: var(--s-50);
border-radius: var(--border-radius-normal);
color: var(--s-600);
font-size: var(--font-size-micro);
font-weight: var(--font-weight-bold);
margin-left: var(--space-smaller);
padding: var(--space-zero) var(--space-smaller);
&.is-active {
background: var(--w-50);
color: var(--w-500);
}
}
.submenu-icons {
display: flex;
align-items: center;
.submenu-icon {
margin-left: var(--space-small);
color: var(--s-600);
&:hover {
cursor: pointer;
color: var(--w-500);
}
}
}
</style>