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

feat: Add the ability to toggle the secondary sidebar in all display breakpoints (#6118)

Browse source 
Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese 2022-12-23 03:37:11 +05:30 committed by GitHub
parent dbb6c0a074
commit 2af337be10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 72 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -59,12 +59,8 @@
.hamburger--menu {
cursor: pointer;
display: none;
display: block;
margin-right: $space-normal;
@media screen and (max-width: 1200px) {
display: block;
}
}
.header--icon {

22
app/javascript/dashboard/components/SidemenuIcon.vue
View file

@ -1,7 +1,12 @@
<template>
<button @click="onMenuItemClick">
<fluent-icon class="hamburger--menu" icon="list" />
</button>
<woot-button
size="small"
variant="clear"
color-scheme="secondary"
icon="list"
class="toggle-sidebar"
@click="onMenuItemClick"
/>
</template>
<script>
@ -16,13 +21,8 @@ export default {
};
</script>
<style scoped lang="scss">
.hamburger--menu {
cursor: pointer;
display: none;
margin-right: var(--space-normal);
@media screen and (max-width: 1200px) {
display: block;
}
.toggle-sidebar {
margin-right: var(--space-small);
margin-left: var(--space-minus-small);
}
</style>

9
app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
View file

@ -261,14 +261,7 @@ export default {
width: 20rem;
flex-shrink: 0;
overflow-y: hidden;
@include breakpoint(xlarge down) {
position: absolute;
}
@include breakpoint(xlarge up) {
position: unset;
}
position: unset;
&:hover {
overflow-y: hidden;

13
app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
View file

@ -1,10 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SidemenuIcon matches snapshot 1`] = `
<button>
<fluent-icon
class="hamburger--menu"
icon="list"
/>
</button>
<woot-button
class="toggle-sidebar"
color-scheme="secondary"
icon="list"
size="small"
variant="clear"
/>
`;

46
app/javascript/dashboard/routes/dashboard/Dashboard.vue
View file

@ -2,14 +2,14 @@
<div class="row app-wrapper">
<sidebar
:route="currentRoute"
:sidebar-class-name="sidebarClassName"
:show-secondary-sidebar="isSidebarOpen"
@open-notification-panel="openNotificationPanel"
@toggle-account-modal="toggleAccountModal"
@open-key-shortcut-modal="toggleKeyShortcutModal"
@close-key-shortcut-modal="closeKeyShortcutModal"
@show-add-label-popup="showAddLabelPopup"
/>
<section class="app-content columns" :class="contentClassName">
<section class="app-content columns">
<router-view />
<command-bar />
<account-selector
@ -46,6 +46,7 @@ import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAc
import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector';
import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel';
import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
export default {
components: {
@ -57,9 +58,9 @@ export default {
AddLabelModal,
NotificationPanel,
},
mixins: [uiSettingsMixin],
data() {
return {
isSidebarOpen: false,
isOnDesktop: true,
showAccountModal: false,
showCreateAccountModal: false,
@ -72,44 +73,22 @@ export default {
currentRoute() {
return ' ';
},
sidebarClassName() {
if (this.isOnDesktop) {
return '';
}
if (this.isSidebarOpen) {
return 'off-canvas is-open';
}
return 'off-canvas is-transition-push is-closed';
},
contentClassName() {
if (this.isOnDesktop) {
return '';
}
if (this.isSidebarOpen) {
return 'off-canvas-content is-open-left has-transition-push';
}
return 'off-canvas-content has-transition-push';
isSidebarOpen() {
const { show_secondary_sidebar: showSecondarySidebar } = this.uiSettings;
return showSecondarySidebar;
},
},
mounted() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
},
beforeDestroy() {
bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
if (window.innerWidth >= 1200) {
this.isOnDesktop = true;
} else {
this.isOnDesktop = false;
}
},
toggleSidebar() {
this.isSidebarOpen = !this.isSidebarOpen;
this.updateUISettings({
show_secondary_sidebar: !this.isSidebarOpen,
});
},
openCreateAccountModal() {
this.showAccountModal = false;
@ -142,8 +121,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.off-canvas-content.is-open-left {
transform: translateX(20rem);
}
</style>

42
app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
View file

@ -1,20 +1,22 @@
<template>
<div v-on-clickaway="closeSearch" class="search-wrap">
<div class="search" :class="{ 'is-active': showSearchBox }">
<woot-sidemenu-icon />
<div class="icon">
<fluent-icon icon="search" class="search--icon" size="28" />
<div class="search-header--wrap">
<woot-sidemenu-icon v-if="!showSearchBox" />
<div class="search" :class="{ 'is-active': showSearchBox }">
<div class="icon">
<fluent-icon icon="search" class="search--icon" size="28" />
</div>
<input
v-model="searchTerm"
class="search--input"
:placeholder="$t('CONVERSATION.SEARCH_MESSAGES')"
@focus="onSearch"
/>
<switch-layout
:is-on-expanded-layout="isOnExpandedLayout"
@toggle="$emit('toggle-conversation-layout')"
/>
</div>
<input
v-model="searchTerm"
class="search--input"
:placeholder="$t('CONVERSATION.SEARCH_MESSAGES')"
@focus="onSearch"
/>
<switch-layout
:is-on-expanded-layout="isOnExpandedLayout"
@toggle="$emit('toggle-conversation-layout')"
/>
</div>
<div v-if="showSearchBox" class="results-wrap">
<div class="show-results">
@ -153,14 +155,21 @@ export default {
<style lang="scss" scoped>
.search-wrap {
position: relative;
padding: var(--space-one) var(--space-normal) var(--space-smaller)
var(--space-normal);
}
.search-header--wrap {
display: flex;
justify-content: space-between;
min-height: var(--space-large);
}
.search {
display: flex;
flex: 1;
padding: 0;
border-bottom: 1px solid transparent;
padding: var(--space-one) var(--space-normal) var(--space-smaller)
var(--space-normal);
&:hover {
.search--icon {
@ -205,6 +214,7 @@ input::placeholder {
width: 100%;
max-height: 70vh;
overflow: auto;
left: 0;
}
.show-results {

54
app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
View file

@ -8,8 +8,7 @@
@close-key-shortcut-modal="closeKeyShortcutModal"
/>
<help-center-sidebar
v-if="portals.length"
:class="sidebarClassName"
v-if="showHelpCenterSidebar"
:header-title="headerTitle"
:portal-slug="selectedPortalSlug"
:locale-slug="selectedLocaleInPortal"
@ -19,7 +18,7 @@
@open-popover="openPortalPopover"
@open-modal="onClickOpenAddCategoryModal"
/>
<section class="app-content columns" :class="contentClassName">
<section class="app-content columns">
<router-view />
<command-bar />
<account-selector
@ -84,7 +83,6 @@ export default {
mixins: [portalMixin, uiSettingsMixin],
data() {
return {
isSidebarOpen: false,
isOnDesktop: true,
showShortcutModal: false,
showNotificationPanel: false,
@ -103,6 +101,15 @@ export default {
meta: 'portals/getMeta',
isFetching: 'portals/isFetchingPortals',
}),
isSidebarOpen() {
const {
show_help_center_secondary_sidebar: showSecondarySidebar,
} = this.uiSettings;
return showSecondarySidebar;
},
showHelpCenterSidebar() {
return this.portals.length === 0 ? false : this.isSidebarOpen;
},
selectedPortal() {
const slug = this.$route.params.portalSlug || this.lastActivePortalSlug;
if (slug) return this.$store.getters['portals/portalBySlug'](slug);
@ -112,24 +119,6 @@ export default {
selectedLocaleInPortal() {
return this.$route.params.locale || this.defaultPortalLocale;
},
sidebarClassName() {
if (this.isOnDesktop) {
return '';
}
if (this.isSidebarOpen) {
return 'off-canvas is-open';
}
return 'off-canvas is-transition-push is-closed';
},
contentClassName() {
if (this.isOnDesktop) {
return '';
}
if (this.isSidebarOpen) {
return 'off-canvas-content is-open-left has-transition-push';
}
return 'off-canvas-content has-transition-push';
},
selectedPortalName() {
return this.selectedPortal ? this.selectedPortal.name : '';
},
@ -248,8 +237,6 @@ export default {
},
mounted() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
const slug = this.$route.params.portalSlug;
@ -259,7 +246,6 @@ export default {
},
beforeDestroy() {
bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
window.removeEventListener('resize', this.handleResize);
},
updated() {
const slug = this.$route.params.portalSlug;
@ -272,15 +258,12 @@ export default {
}
},
methods: {
handleResize() {
if (window.innerWidth > 1200) {
this.isOnDesktop = true;
} else {
this.isOnDesktop = false;
}
},
toggleSidebar() {
this.isSidebarOpen = !this.isSidebarOpen;
if (this.portals.length > 0) {
this.updateUISettings({
show_help_center_secondary_sidebar: !this.isSidebarOpen,
});
}
},
async fetchPortalAndItsCategories() {
await this.$store.dispatch('portals/index');
@ -322,8 +305,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.off-canvas-content.is-open-left.has-transition-push {
transform: translateX(var(--space-giga));
}
</style>