From d448b1fd2543bfd22548ddab14a77ba85c99a319 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 21 Aug 2019 19:27:08 +0530 Subject: [PATCH 1/4] feat: allow toggle sidebar to be persistent using local storage Co-authored-by: Sahil Khan --- frappe/public/js/frappe/list/base_list.js | 18 ++++++++++++++++-- frappe/public/js/frappe/list/list_sidebar.js | 2 ++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js index 42c356c358..369f1a0eb1 100644 --- a/frappe/public/js/frappe/list/base_list.js +++ b/frappe/public/js/frappe/list/base_list.js @@ -3,6 +3,7 @@ frappe.provide('frappe.views'); frappe.views.BaseList = class BaseList { constructor(opts) { Object.assign(this, opts); + this.show_sidebar = JSON.parse(localStorage.show_sidebar || 'true'); } show() { @@ -199,13 +200,26 @@ frappe.views.BaseList = class BaseList { } toggle_side_bar() { - this.list_sidebar.parent.toggleClass('hide'); - this.page.current_view.find('.layout-main-section-wrapper').toggleClass('col-md-10 col-md-12'); + this.show_sidebar = !this.show_sidebar + localStorage.show_sidebar = this.show_sidebar; + this.list_sidebar.parent.toggle(this.show_sidebar); + this.set_list_width() + } + + set_list_width() { + if (!this.show_sidebar) { + cur_list.page.current_view.find('.layout-main-section-wrapper').removeClass('col-md-10') + cur_list.page.current_view.find('.layout-main-section-wrapper').addClass('col-md-12') + } else { + cur_list.page.current_view.find('.layout-main-section-wrapper').removeClass('col-md-12') + cur_list.page.current_view.find('.layout-main-section-wrapper').addClass('col-md-10') + } } setup_main_section() { return frappe.run_serially([ this.setup_list_wrapper, + this.set_list_width, this.setup_filter_area, this.setup_sort_selector, this.setup_result_area, diff --git a/frappe/public/js/frappe/list/list_sidebar.js b/frappe/public/js/frappe/list/list_sidebar.js index 45f23611b4..dc9b885c70 100644 --- a/frappe/public/js/frappe/list/list_sidebar.js +++ b/frappe/public/js/frappe/list/list_sidebar.js @@ -22,6 +22,8 @@ frappe.views.ListSidebar = class ListSidebar { this.sidebar = $('') .html(sidebar_content) .appendTo(this.page.sidebar.empty()); + let show_sidebar = JSON.parse(localStorage.show_sidebar || 'true'); + this.sidebar.toggle(show_sidebar) this.setup_reports(); this.setup_list_filter(); From 8f733173e2427d7df5e22f0fda40e4fea003a148 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 21 Aug 2019 19:42:38 +0530 Subject: [PATCH 2/4] refactor: fixed sidebar visibility after refresh --- frappe/public/js/frappe/list/base_list.js | 17 ++++++----------- frappe/public/js/frappe/list/list_sidebar.js | 2 -- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js index 369f1a0eb1..d99ab79a4a 100644 --- a/frappe/public/js/frappe/list/base_list.js +++ b/frappe/public/js/frappe/list/base_list.js @@ -202,24 +202,19 @@ frappe.views.BaseList = class BaseList { toggle_side_bar() { this.show_sidebar = !this.show_sidebar localStorage.show_sidebar = this.show_sidebar; - this.list_sidebar.parent.toggle(this.show_sidebar); - this.set_list_width() + this.show_or_hide_sidebar() } - set_list_width() { - if (!this.show_sidebar) { - cur_list.page.current_view.find('.layout-main-section-wrapper').removeClass('col-md-10') - cur_list.page.current_view.find('.layout-main-section-wrapper').addClass('col-md-12') - } else { - cur_list.page.current_view.find('.layout-main-section-wrapper').removeClass('col-md-12') - cur_list.page.current_view.find('.layout-main-section-wrapper').addClass('col-md-10') - } + show_or_hide_sidebar() { + this.list_sidebar.parent.toggleClass('hide', !this.show_sidebar); + cur_list.page.current_view.find('.layout-main-section-wrapper').toggleClass('col-md-10', this.show_sidebar) + cur_list.page.current_view.find('.layout-main-section-wrapper').toggleClass('col-md-12', this.show_sidebar) } setup_main_section() { return frappe.run_serially([ this.setup_list_wrapper, - this.set_list_width, + this.show_or_hide_sidebar, this.setup_filter_area, this.setup_sort_selector, this.setup_result_area, diff --git a/frappe/public/js/frappe/list/list_sidebar.js b/frappe/public/js/frappe/list/list_sidebar.js index dc9b885c70..45f23611b4 100644 --- a/frappe/public/js/frappe/list/list_sidebar.js +++ b/frappe/public/js/frappe/list/list_sidebar.js @@ -22,8 +22,6 @@ frappe.views.ListSidebar = class ListSidebar { this.sidebar = $('') .html(sidebar_content) .appendTo(this.page.sidebar.empty()); - let show_sidebar = JSON.parse(localStorage.show_sidebar || 'true'); - this.sidebar.toggle(show_sidebar) this.setup_reports(); this.setup_list_filter(); From ca6eae5794be0019c5e7e2a3860beedd0c3c577f Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 22 Aug 2019 12:35:19 +0530 Subject: [PATCH 3/4] feat: added sidebar visibility class to body for consistent layout across pages --- frappe/public/js/frappe/list/base_list.js | 11 +++++------ frappe/public/less/desk.less | 12 ++++++++++++ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js index d99ab79a4a..8d5a7b5770 100644 --- a/frappe/public/js/frappe/list/base_list.js +++ b/frappe/public/js/frappe/list/base_list.js @@ -3,7 +3,6 @@ frappe.provide('frappe.views'); frappe.views.BaseList = class BaseList { constructor(opts) { Object.assign(this, opts); - this.show_sidebar = JSON.parse(localStorage.show_sidebar || 'true'); } show() { @@ -200,15 +199,15 @@ frappe.views.BaseList = class BaseList { } toggle_side_bar() { - this.show_sidebar = !this.show_sidebar - localStorage.show_sidebar = this.show_sidebar; + let show_sidebar = JSON.parse(localStorage.show_sidebar || 'true'); + show_sidebar = !show_sidebar + localStorage.show_sidebar = show_sidebar; this.show_or_hide_sidebar() } show_or_hide_sidebar() { - this.list_sidebar.parent.toggleClass('hide', !this.show_sidebar); - cur_list.page.current_view.find('.layout-main-section-wrapper').toggleClass('col-md-10', this.show_sidebar) - cur_list.page.current_view.find('.layout-main-section-wrapper').toggleClass('col-md-12', this.show_sidebar) + let show_sidebar = JSON.parse(localStorage.show_sidebar || 'true'); + $(document.body).toggleClass('no-sidebar', !show_sidebar); } setup_main_section() { diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less index 4c5ca5bba8..5a515b6e84 100644 --- a/frappe/public/less/desk.less +++ b/frappe/public/less/desk.less @@ -1081,6 +1081,18 @@ body.full-width { } } +body.no-sidebar { + @media (min-width: @screen-md) { + .layout-side-section { + display: none; + } + + .layout-main-section-wrapper { + width: 100% !important; + } + } +} + // utilities .whitespace-nowrap { From ac1f2d81c9cc1260090f2454ace356768e0fff0d Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 22 Aug 2019 12:36:53 +0530 Subject: [PATCH 4/4] style: linitng fixes --- frappe/public/js/frappe/list/base_list.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js index 8d5a7b5770..fef7f954bc 100644 --- a/frappe/public/js/frappe/list/base_list.js +++ b/frappe/public/js/frappe/list/base_list.js @@ -200,9 +200,9 @@ frappe.views.BaseList = class BaseList { toggle_side_bar() { let show_sidebar = JSON.parse(localStorage.show_sidebar || 'true'); - show_sidebar = !show_sidebar + show_sidebar = !show_sidebar; localStorage.show_sidebar = show_sidebar; - this.show_or_hide_sidebar() + this.show_or_hide_sidebar(); } show_or_hide_sidebar() {