fix: If desktop view is false then the view not getting updated (#6214)

* fix: Desktop view is false then the view not getting updated

* chore: Handle sidebar in small screen

* fix: Scroll issue in touch screens
This commit is contained in:
Sivin Varghese
2023-01-10 15:36:16 +05:30
committed by GitHub
parent add33d032c
commit e7a52c3a46
3 changed files with 26 additions and 11 deletions

View File

@@ -81,8 +81,12 @@
} }
.conversations-list { .conversations-list {
@include scroll-on-hover; overflow-y: auto;
flex: 1 1; flex: 1 1;
@include breakpoint(large up) {
@include scroll-on-hover;
}
} }
.chat-list__top { .chat-list__top {

View File

@@ -23,6 +23,6 @@ export default {
}, },
DOCS_URL: '//www.chatwoot.com/docs/product/', DOCS_URL: '//www.chatwoot.com/docs/product/',
TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json', TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
SMALL_SCREEN_BREAKPOINT: 992, SMALL_SCREEN_BREAKPOINT: 1024,
}; };
export const DEFAULT_REDIRECT_URL = '/app/'; export const DEFAULT_REDIRECT_URL = '/app/';

View File

@@ -62,13 +62,12 @@ export default {
mixins: [uiSettingsMixin], mixins: [uiSettingsMixin],
data() { data() {
return { return {
isOnDesktop: true,
showAccountModal: false, showAccountModal: false,
showCreateAccountModal: false, showCreateAccountModal: false,
showAddLabelModal: false, showAddLabelModal: false,
showShortcutModal: false, showShortcutModal: false,
isNotificationPanel: false, isNotificationPanel: false,
isDesktopView: false, displayLayoutType: '',
}; };
}, },
computed: { computed: {
@@ -85,14 +84,25 @@ export default {
} = this.uiSettings; } = this.uiSettings;
return conversationDisplayType; return conversationDisplayType;
}, },
previouslyUsedSidebarView() {
const {
previously_used_sidebar_view: showSecondarySidebar,
} = this.uiSettings;
return showSecondarySidebar;
},
}, },
watch: { watch: {
isDesktopView() { displayLayoutType() {
const { LAYOUT_TYPES } = wootConstants; const { LAYOUT_TYPES } = wootConstants;
this.updateUISettings({ this.updateUISettings({
conversation_display_type: !this.isDesktopView conversation_display_type:
? LAYOUT_TYPES.EXPANDED this.displayLayoutType === LAYOUT_TYPES.EXPANDED
: this.previouslyUsedDisplayType, ? LAYOUT_TYPES.EXPANDED
: this.previouslyUsedDisplayType,
show_secondary_sidebar:
this.displayLayoutType === LAYOUT_TYPES.EXPANDED
? false
: this.previouslyUsedSidebarView,
}); });
}, },
}, },
@@ -108,7 +118,7 @@ export default {
methods: { methods: {
handleResize() { handleResize() {
const { SMALL_SCREEN_BREAKPOINT } = wootConstants; const { SMALL_SCREEN_BREAKPOINT, LAYOUT_TYPES } = wootConstants;
let throttled = false; let throttled = false;
const delay = 150; const delay = 150;
@@ -120,15 +130,16 @@ export default {
setTimeout(() => { setTimeout(() => {
throttled = false; throttled = false;
if (window.innerWidth <= SMALL_SCREEN_BREAKPOINT) { if (window.innerWidth <= SMALL_SCREEN_BREAKPOINT) {
this.isDesktopView = false; this.displayLayoutType = LAYOUT_TYPES.EXPANDED;
} else { } else {
this.isDesktopView = true; this.displayLayoutType = LAYOUT_TYPES.CONDENSED;
} }
}, delay); }, delay);
}, },
toggleSidebar() { toggleSidebar() {
this.updateUISettings({ this.updateUISettings({
show_secondary_sidebar: !this.isSidebarOpen, show_secondary_sidebar: !this.isSidebarOpen,
previously_used_sidebar_view: !this.isSidebarOpen,
}); });
}, },
openCreateAccountModal() { openCreateAccountModal() {