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

feat: Updates sidebar to accomodate sub menu (#3416)

Browse source 
* Enhancement: Updates sidebar to a new design (#2733)

* feat: Changes primary navbar to new design (#2598)

* feat: updates design for secondary navbar (#2612)

* Changes primary nvbar to new design

* Updates design for contexual sidebar

* Fixes issues with JSON

* Remove duplication of notificatons in Navigation

* Fixes broken tests

* Fixes broken tests

* Update app/javascript/dashboard/components/layout/AvailabilityStatus.vue

* Update app/javascript/dashboard/components/layout/AvailabilityStatus.vue

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/modules/sidebar/components/Secondary.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Chore: Update design changes to features

* Fixes menu transitions and refactors code

* Refactors sidebar routeing logic

* lint error fixes

* Fixes dropdown menu styles

* Fixes secondary new item links

* Fixes lint scss issues

* fixes linter issues

* Fixes broken test cases

* Update AvailabilityStatus.spec.js

* Review feedbacks

* Fixes add modal for label

* Add tooltip for primary menu item

* Tooltip for notifications

* Adds tooltip for primary menu items

* Review fixes

* Review fixes

* Fix merge issues

* fixes logo size for login pages

* fixes Merge breaks with styles

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Nithin David Thomas 2021-12-01 12:45:39 +05:30 • committed by GitHub
parent c792cfc0be
commit b01d032d0d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 1119 additions and 562 deletions
Download patch file Download diff file Expand all files Collapse all files

64
app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
View file

@ -2,15 +2,19 @@
<transition name="menu-slide">
<div
v-if="show"
v-on-clickaway="() => $emit('close')"
class="dropdown-pane dropdowm--top"
v-on-clickaway="onClickAway"
class="dropdown-pane"
:class="{ 'dropdown-pane--open': show }"
>
<availability-status />
<li class="divider" />
<woot-dropdown-menu>
<woot-dropdown-item v-if="showChangeAccountOption">
<woot-button
variant="clear"
color-scheme="secondary"
size="small"
class=" change-accounts--button"
icon="arrow-swap"
@click="$emit('toggle-accounts')"
>
{{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
@ -19,36 +23,50 @@
<woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
<woot-button
variant="clear"
color-scheme="secondary"
size="small"
class=" change-accounts--button"
icon="ion-help-buoy"
@click="$emit('show-support-chat-window')"
>
Contact Support
{{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
</woot-button>
</woot-dropdown-item>
<woot-dropdown-item>
<woot-button
variant="clear"
color-scheme="secondary"
size="small"
class=" change-accounts--button"
@click="$emit('key-shortcut-modal')"
icon="keyboard"
@click="handleKeyboardHelpClick"
>
{{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
</woot-button>
</woot-dropdown-item>
<woot-dropdown-item>
<router-link
v-slot="{ href, isActive, navigate }"
:to="`/app/accounts/${accountId}/profile/settings`"
class="button clear small change-accounts--button"
custom
>
{{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
<a
:href="href"
class="button small clear secondary"
:class="{ 'is-active': isActive }"
@click="e => handleProfileSettingClick(e, navigate)"
>
<fluent-icon icon="person" class="icon icon--font" />
<span class="button__content">
{{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
</span>
</a>
</router-link>
</woot-dropdown-item>
<woot-dropdown-item>
<woot-button
variant="clear"
color-scheme="secondary"
size="small"
class=" change-accounts--button"
icon="power"
@click="logout"
>
{{ $t('SIDEBAR_ITEMS.LOGOUT') }}
@ -63,13 +81,15 @@
import { mixin as clickaway } from 'vue-clickaway';
import { mapGetters } from 'vuex';
import Auth from '../../../api/auth';
import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus';
export default {
components: {
WootDropdownMenu,
WootDropdownItem,
AvailabilityStatus,
},
mixins: [clickaway],
props: {
@ -88,18 +108,34 @@ export default {
if (this.globalConfig.createNewAccountFromDashboard) {
return true;
}
return this.currentUser.accounts.length > 1;
const { accounts = [] } = this.currentUser;
return accounts.length > 1;
},
},
methods: {
handleProfileSettingClick(e, navigate) {
this.$emit('close');
navigate(e);
},
handleKeyboardHelpClick() {
this.$emit('key-shortcut-modal');
this.$emit('close');
},
logout() {
Auth.logout();
},
onClickAway() {
if (this.show) this.$emit('close');
},
},
};
</script>
<style lang="scss" scoped>
.dropdown-pane {
right: 0;
left: var(--space-slab);
bottom: var(--space-larger);
min-width: 16.8rem;
z-index: var(--z-index-much-higher);
}
</style>