From ddb1971819559b42fb66114a4faaba69c48eb2e2 Mon Sep 17 00:00:00 2001 From: AddisonDunn Date: Mon, 16 Dec 2024 09:44:58 -0500 Subject: [PATCH 01/37] WIP --- .../js/formplayer/menus/controller.js | 1 + .../cloudcare/js/formplayer/menus/views.js | 122 ++++++++++++++---- .../partials/menu/persistent_menu.html | 53 ++++---- .../scss/formplayer-webapp/menu.scss | 14 +- .../commcarehq/_variables_bootstrap3.scss | 7 +- 5 files changed, 137 insertions(+), 60 deletions(-) diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js index cd79a170e972..e70d0d6662ea 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js @@ -160,6 +160,7 @@ hqDefine("cloudcare/js/formplayer/menus/controller", [ FormplayerFrontend.regions.getRegion('persistentMenu').show( views.PersistentMenuView({ collection: _toMenuCommands(menuResponse.persistentMenu, [], menuResponse.selections), + sidebarEnabled: sidebarEnabled, }).render()); } else { FormplayerFrontend.regions.getRegion('persistentMenu').empty(); diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js index 25e3d0c1ba79..ede1d5fd5a92 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js @@ -1571,31 +1571,44 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ events: { 'click #app-main': 'onClickAppMain', }, + setOffcanvasOrCollapsed: function (smallScreenEnabled) { + if (sessionStorage.showPersistentMenu !== 'false' && !smallScreenEnabled) { + this.makeOffcanvas(); + } + }, handleSmallScreenChange: function (smallScreenEnabled) { - const offcanvas = 'offcanvas'; - const collapse = 'collapse'; - const containerDesktopClasses = collapse + ' position-relative'; - const containerMobileClasses = offcanvas + ' offcanvas-start'; - if (smallScreenEnabled) { - $('#persistent-menu-container').removeClass(containerDesktopClasses + ' show'); - $('#persistent-menu-container').addClass(containerMobileClasses); - $('#persistent-menu-arrow-toggle').attr('aria-expanded', false); - $('#persistent-menu-close-button').removeAttr('data-bs-toggle'); - $('#persistent-menu-close-button').attr('data-bs-dismiss', offcanvas); - $('#persistent-menu-arrow-toggle').attr('data-bs-toggle', offcanvas); - } else { - $('#persistent-menu-container').removeClass(containerMobileClasses); - $('#persistent-menu-container').addClass(containerDesktopClasses); - if (sessionStorage.showPersistentMenu !== 'false') { - $('#persistent-menu-container').addClass('show'); + if (sessionStorage.showPersistentMenu) { + if (smallScreenEnabled) { + this.makeOffcanvas(false); + } else { + this.makeCollapse(true); } - $('#persistent-menu-arrow-toggle').attr('aria-expanded', true); - $('#persistent-menu-close-button').removeAttr('data-bs-dismiss'); - $('#persistent-menu-close-button').attr('data-bs-toggle', collapse); - $('#persistent-menu-arrow-toggle').attr('data-bs-toggle', collapse); } }, - initialize: function () { + makeOffcanvas: function () { + $('#persistent-menu-container').removeClass('show'); + $('#persistent-menu-container').removeClass(this.containerCollapseClasses); + $('#persistent-menu-container').addClass(this.containerOffcanvasClasses); + $('#persistent-menu-arrow-toggle').attr('aria-expanded', false); + $('#persistent-menu-arrow-toggle').attr('data-bs-toggle', this.offcanvas); + }, + makeCollapse: function () { + // $('#persistent-menu-container').removeClass('show'); + $('#persistent-menu-container').removeClass(this.containerOffcanvasClasses); + $('#persistent-menu-container').addClass(this.collapse); + // if (sessionStorage.showPersistentMenu !== 'false') { + // $('#persistent-menu-container').addClass('show'); + // } + // $('#persistent-menu-arrow-toggle').attr('aria-expanded', true); + // $('#persistent-menu-arrow-toggle').attr('data-bs-toggle', this.collapse); + }, + initialize: function (options) { + this.sidebarEnabled = options.sidebarEnabled; + this.menuExpanded; + this.offcanvas = 'offcanvas'; + this.collapse = 'collapse'; + this.containerCollapseClasses = this.collapse + ' position-relative'; + this.containerOffcanvasClasses = this.offcanvas + ' offcanvas-start'; self.smallScreenListener = cloudcareUtils.smallScreenListener(smallScreenEnabled => { this.handleSmallScreenChange(smallScreenEnabled); }); @@ -1604,14 +1617,69 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ onRender: function () { this.showChildView('menu', new PersistentMenuListView({collection: this.collection})); }, + showMenu: function () { + $('#persistent-menu-container').addClass('show'); + $('#persistent-menu-container').css('width', ''); + $('#persistent-menu-container-content').removeClass('d-none'); + this.menuExpanded = true; + }, + hideMenu: function () { + $('#persistent-menu-container').removeClass('show'); + $('#persistent-menu-container').css('width', '30px'); + $('#persistent-menu-container-content').addClass('d-none'); + this.menuExpanded = false; + }, + lockMenu: function () { + $('#persistent-menu-container').removeClass('position-absolute'); + $('#persistent-menu-container').addClass('position-relative'); + sessionStorage.showPersistentMenu = true; + }, + deLockMenu: function () { + $('#persistent-menu-container').removeClass('position-relative'); + $('#persistent-menu-container').addClass('position-absolute'); + sessionStorage.showPersistentMenu = false; + }, + flipArrowRight: function () { + $('#persistent-menu-arrow-toggle').find('i').removeClass('fa-chevron-left'); + $('#persistent-menu-arrow-toggle').find('i').addClass('fa-chevron-right'); + }, + flipArrowLeft: function () { + $('#persistent-menu-arrow-toggle').find('i').removeClass('fa-chevron-right'); + $('#persistent-menu-arrow-toggle').find('i').addClass('fa-chevron-left'); + }, onAttach: function () { - this.handleSmallScreenChange(cloudcareUtils.smallScreenIsEnabled()); - $('#persistent-menu-container').on('hidden.bs.collapse', function () { - sessionStorage.showPersistentMenu = false; - }); - $('#persistent-menu-container').on('show.bs.collapse', function () { - sessionStorage.showPersistentMenu = true; + const self = this; + this.makeCollapse(sessionStorage.showPersistentMenu); + const smallScreenEnabledOnStartup = cloudcareUtils.smallScreenIsEnabled(); + if (sessionStorage.showPersistentMenu === 'true' && !smallScreenEnabledOnStartup && !this.sidebarEnabled) { + this.showMenu(); + } + $('#persistent-menu-arrow-toggle').click(function () { + if (!self.menuExpanded) { + self.showMenu(); + self.flipArrowLeft(); + self.lockMenu(); + } else if (self.menuExpanded && sessionStorage.showPersistentMenu === 'true') { + self.hideMenu(); + self.deLockMenu(); + self.flipArrowRight(); + } else if (self.menuExpanded && sessionStorage.showPersistentMenu !== 'true') { + self.flipArrowLeft(); + self.lockMenu(); + } }); + $('#persistent-menu-container').hover( + function () { + if (!this.menuExpanded) { + self.showMenu(); + } + }, + function () { + if (sessionStorage.showPersistentMenu !== 'true') { + self.hideMenu(); + } + } + ); }, templateContext: function () { const appId = formplayerUtils.currentUrlToObject().appId, diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html index 8327fce92af1..2ed96ed42fed 100644 --- a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html +++ b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html @@ -1,32 +1,35 @@ {% load i18n %} diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss index 5bf9dc2e8e1d..9fd0d022f7b1 100644 --- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss +++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss @@ -23,8 +23,11 @@ } #persistent-menu-container { - padding: 1.5rem 1.5rem 2.5rem 2.5rem; + padding: 1.5rem; font-size: 14px; + overflow-x: visible; + overflow-y: scroll; + z-index: $zindex-persistent-menu-nav; } #persistent-menu-container .btn-close { @@ -32,10 +35,11 @@ top: 15px; } -.persistent-menu-toggle { - color: white; - background-color: $cc-brand-mid; - padding: $spacer / 2; +#persistent-menu-arrow-toggle { + color: black; + z-index: $zindex-persistent-menu-nav + 1; + // background-color: $cc-brand-mid; + // padding: $spacer / 2; &:hover { background-color: $cc-brand-low; } diff --git a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss index 59154afa396d..6e95f4581256 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss +++ b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss @@ -56,16 +56,17 @@ $zindexDashboardSpinner: 500; $zindexAccountingPricingTableHeader: 800; // Other Zindecies +$zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals +$zindex-cloudcare-debugger: 1040; +$zindex-persistent-menu-nav: 1030; $zindex-navbar: 1000; -$zindex-report-loading: 100; $zindex-app-preview: 998; $zindex-navbar-cloudcare: 995; $zindex-persistent-tile-cloudcare: 993; $zindex-formplayer-progress: 990; -$zindex-cloudcare-debugger: 1005; +$zindex-report-loading: 100; $zindex-formplayer-scroll-to-bottom: 5; $zindex-formplayer-anchored-submit: 4; -$zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals $zindex-next-error: 5; // Above the sticky submit button $cursor-disabled: 'not-allowed'; From aefba48bda8d18c079cf04ec28988ccc533f297c Mon Sep 17 00:00:00 2001 From: robert-costello Date: Fri, 20 Dec 2024 11:53:30 -0500 Subject: [PATCH 02/37] add method to get width for animation --- .../cloudcare/js/formplayer/menus/views.js | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js index ede1d5fd5a92..f94106390974 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js @@ -1617,6 +1617,30 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ onRender: function () { this.showChildView('menu', new PersistentMenuListView({collection: this.collection})); }, + getPersistantMenuRegionWidth: function() { + const contentPlusContainer = $('#content-plus-persistent-menu-container'); + + const persistentMenuRegionClone = $('#persistent-menu-region').clone(); + persistentMenuRegionClone.attr("id","pmr-clone"); + persistentMenuRegionClone.prependTo(contentPlusContainer); + + const containerClone = persistentMenuRegionClone.find('#persistent-menu-container'); + containerClone.attr("id","pmc-clone"); + containerClone.css({'width': '', 'padding': '1.5rem', 'visibility': 'hidden'}); + containerClone.removeClass('position-absolute'); + containerClone.addClass('position-relative'); + + const containerContentClone = containerClone.find('#persistent-menu-container-content'); + containerContentClone.attr("id","pmcc-clone"); + containerContentClone.removeClass('d-none'); + + const regionWidth = persistentMenuRegionClone.outerWidth(); + + sessionStorage.setItem('persistantMenuRegionWidth', regionWidth) + persistentMenuRegionClone.remove(); + + return regionWidth; + }, showMenu: function () { $('#persistent-menu-container').addClass('show'); $('#persistent-menu-container').css('width', ''); From 183e18c2e30ef16695d67863feffd3668d16e33f Mon Sep 17 00:00:00 2001 From: robert-costello Date: Fri, 20 Dec 2024 11:56:22 -0500 Subject: [PATCH 03/37] use new method for animation and incorporate sessionStorage --- .../static/cloudcare/js/formplayer/menus/views.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js index f94106390974..b321d360066b 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js @@ -1613,6 +1613,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ this.handleSmallScreenChange(smallScreenEnabled); }); self.smallScreenListener.listen(); + sessionStorage.removeItem('persistantMenuRegionWidth'); }, onRender: function () { this.showChildView('menu', new PersistentMenuListView({collection: this.collection})); @@ -1642,8 +1643,13 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ return regionWidth; }, showMenu: function () { - $('#persistent-menu-container').addClass('show'); - $('#persistent-menu-container').css('width', ''); + let persistantMenuRegionWidth = sessionStorage.getItem('persistantMenuRegionWidth'); + if (!persistantMenuRegionWidth) { + persistantMenuRegionWidth = this.getPersistantMenuRegionWidth() + } + const persistentMenuContainer = $('#persistent-menu-container'); + persistentMenuContainer.css('transition', 'width 0.25s'); + persistentMenuContainer.css('width', persistantMenuRegionWidth); $('#persistent-menu-container-content').removeClass('d-none'); this.menuExpanded = true; }, From 81f5b4e24ea021a39bf6abcbae0abaf5894c1e52 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Fri, 20 Dec 2024 11:57:36 -0500 Subject: [PATCH 04/37] use consts and a little cleanup --- .../cloudcare/js/formplayer/menus/views.js | 49 +++++++++---------- 1 file changed, 24 insertions(+), 25 deletions(-) diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js index b321d360066b..c0631f1302f4 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js @@ -1586,21 +1586,14 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ } }, makeOffcanvas: function () { - $('#persistent-menu-container').removeClass('show'); - $('#persistent-menu-container').removeClass(this.containerCollapseClasses); - $('#persistent-menu-container').addClass(this.containerOffcanvasClasses); - $('#persistent-menu-arrow-toggle').attr('aria-expanded', false); - $('#persistent-menu-arrow-toggle').attr('data-bs-toggle', this.offcanvas); + const persistentMenuContainer = $('#persistent-menu-container'); + persistentMenuContainer.removeClass(this.containerCollapseClasses); + persistentMenuContainer.addClass(this.containerOffCanvasClasses); }, makeCollapse: function () { - // $('#persistent-menu-container').removeClass('show'); - $('#persistent-menu-container').removeClass(this.containerOffcanvasClasses); - $('#persistent-menu-container').addClass(this.collapse); - // if (sessionStorage.showPersistentMenu !== 'false') { - // $('#persistent-menu-container').addClass('show'); - // } - // $('#persistent-menu-arrow-toggle').attr('aria-expanded', true); - // $('#persistent-menu-arrow-toggle').attr('data-bs-toggle', this.collapse); + const persistentMenuContainer = $('#persistent-menu-container'); + persistentMenuContainer.removeClass(this.containerOffCanvasClasses); + persistentMenuContainer.addClass(this.collapse); }, initialize: function (options) { this.sidebarEnabled = options.sidebarEnabled; @@ -1608,7 +1601,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ this.offcanvas = 'offcanvas'; this.collapse = 'collapse'; this.containerCollapseClasses = this.collapse + ' position-relative'; - this.containerOffcanvasClasses = this.offcanvas + ' offcanvas-start'; + this.containerOffCanvasClasses = this.offcanvas + ' offcanvas-start'; self.smallScreenListener = cloudcareUtils.smallScreenListener(smallScreenEnabled => { this.handleSmallScreenChange(smallScreenEnabled); }); @@ -1654,8 +1647,8 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ this.menuExpanded = true; }, hideMenu: function () { - $('#persistent-menu-container').removeClass('show'); - $('#persistent-menu-container').css('width', '30px'); + const persistentMenuContainer = $('#persistent-menu-container'); + persistentMenuContainer.css('width', '30px'); $('#persistent-menu-container-content').addClass('d-none'); this.menuExpanded = false; }, @@ -1670,21 +1663,27 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ sessionStorage.showPersistentMenu = false; }, flipArrowRight: function () { - $('#persistent-menu-arrow-toggle').find('i').removeClass('fa-chevron-left'); - $('#persistent-menu-arrow-toggle').find('i').addClass('fa-chevron-right'); + const arrowToggle = $('#persistent-menu-arrow-toggle'); + arrowToggle.find('i').removeClass('fa-chevron-left'); + arrowToggle.find('i').addClass('fa-chevron-right'); }, flipArrowLeft: function () { - $('#persistent-menu-arrow-toggle').find('i').removeClass('fa-chevron-right'); - $('#persistent-menu-arrow-toggle').find('i').addClass('fa-chevron-left'); + const arrowToggle = $('#persistent-menu-arrow-toggle'); + arrowToggle.find('i').removeClass('fa-chevron-right'); + arrowToggle.find('i').addClass('fa-chevron-left'); }, onAttach: function () { const self = this; - this.makeCollapse(sessionStorage.showPersistentMenu); const smallScreenEnabledOnStartup = cloudcareUtils.smallScreenIsEnabled(); - if (sessionStorage.showPersistentMenu === 'true' && !smallScreenEnabledOnStartup && !this.sidebarEnabled) { - this.showMenu(); + const arrowToggle = $('#persistent-menu-arrow-toggle'); + self.makeCollapse(sessionStorage.showPersistentMenu); + + if (sessionStorage.showPersistentMenu === 'true' && !smallScreenEnabledOnStartup) { + self.showMenu(); + self.flipArrowLeft(); + self.lockMenu(); } - $('#persistent-menu-arrow-toggle').click(function () { + arrowToggle.click(function () { if (!self.menuExpanded) { self.showMenu(); self.flipArrowLeft(); @@ -1700,7 +1699,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ }); $('#persistent-menu-container').hover( function () { - if (!this.menuExpanded) { + if (!self.menuExpanded) { self.showMenu(); } }, From dd993b6d0abd0e158c52bfe4b46a0b68542cad9a Mon Sep 17 00:00:00 2001 From: robert-costello Date: Fri, 20 Dec 2024 11:58:36 -0500 Subject: [PATCH 05/37] tweak styling --- .../templates/cloudcare/partials/menu/persistent_menu.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html index 2ed96ed42fed..19b7417cc2b0 100644 --- a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html +++ b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html @@ -1,7 +1,7 @@ {% load i18n %} From e2aa510448a09b8cfd6d010f8bd022cca7edef81 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Wed, 8 Jan 2025 12:29:08 -0500 Subject: [PATCH 26/37] add listener to show contents after expand transistion. This allows text to wrap while keeping the text from jumping during transition --- .../static/cloudcare/js/formplayer/menus/views.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js index 06cfacf4debe..b1f711e9ec64 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js @@ -1655,6 +1655,15 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ $('#persistent-menu-container-content').addClass('d-none'); this.menuExpanded = false; }, + menuCollapseExpandTransitionListener: function () { + const persistentMenuContentContainer = $('#persistent-menu-container-content'); + const targetElement = $('#persistent-menu-container')[0] + targetElement.addEventListener('transitionend', (event) => { + if (this.menuExpanded && event.target == targetElement) { + persistentMenuContentContainer.removeClass('d-none'); + } + }); + }, lockMenu: function () { const persistantMenuRegionWidth = this.getPersistantMenuRegionWidth(); const persistentMenuRegion = $('#persistent-menu-region'); @@ -1687,6 +1696,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ const smallScreenEnabledOnStartup = cloudcareUtils.smallScreenIsEnabled(); const arrowToggle = $('#persistent-menu-arrow-toggle'); self.makeCollapse(sessionStorage.showPersistentMenu); + self.menuCollapseExpandTransitionListener(); if (this.splitScreenToggleEnabled && !sessionStorage.getItem('handledDefaultClosed')) { self.hideMenu(); From 0f85b57bbb3efcdc88544dc0104ab8ef92fa7aa6 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Wed, 8 Jan 2025 12:30:12 -0500 Subject: [PATCH 27/37] make sure contents are shown on first load of menu --- .../static/cloudcare/js/formplayer/menus/views.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js index b1f711e9ec64..50753dad403f 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js @@ -1638,14 +1638,16 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ } return persistantMenuRegionWidth; }, - showMenu: function () { + showMenu: function (firstLoad=false) { const persistantMenuRegionWidth = this.getPersistantMenuRegionWidth(); const persistentMenuContainer = $('#persistent-menu-container'); if (sessionStorage.showPersistentMenu === "false") { persistentMenuContainer.css('transition', 'width 0.25s'); } + if (firstLoad) { + $('#persistent-menu-container-content').removeClass('d-none'); + } persistentMenuContainer.css('width', persistantMenuRegionWidth); - $('#persistent-menu-container-content').removeClass('d-none'); this.menuExpanded = true; }, hideMenu: function () { @@ -1704,7 +1706,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ self.flipArrowRight(); sessionStorage.setItem('handledDefaultClosed', true); } else if (sessionStorage.showPersistentMenu === 'true' && !smallScreenEnabledOnStartup) { - self.showMenu(); + self.showMenu(true); self.flipArrowLeft(); self.lockMenu(); } From 64a1e974ce1e5f653624f9dcb4dee111faee6132 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Wed, 8 Jan 2025 12:31:36 -0500 Subject: [PATCH 28/37] keep menu drop-downs above persitsent menu nav --- .../static/cloudcare/scss/formplayer-common/navigation.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/navigation.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/navigation.scss index 434a33aa8485..d2037f73f5bc 100644 --- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/navigation.scss +++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/navigation.scss @@ -12,6 +12,7 @@ #hq-navigation { transition: all 1s; + z-index: 1060; } .bg-cc-light-warm-accent-extra-hi { From fcc104ac5a62aca2393a52e85d54f12dfcc78f45 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Wed, 8 Jan 2025 12:33:04 -0500 Subject: [PATCH 29/37] add var for arrow --- .../hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss | 2 +- .../hqwebapp/static/hqwebapp/less/_hq/includes/variables.less | 1 + .../static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss index 6888c60fbf88..b8cefabc0945 100644 --- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss +++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss @@ -41,7 +41,7 @@ #persistent-menu-arrow-toggle { color: black; - z-index: $zindex-persistent-menu-nav + 1; + z-index: $zindex-persistent-menu-nav-arrow; background-color: $call-to-action-hi; &:hover { background-color: $call-to-action-mid; diff --git a/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less b/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less index 13ae08b6ed9c..1d33156ef17d 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less +++ b/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less @@ -109,6 +109,7 @@ @zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals @zindex-cloudcare-debugger: 1040; @zindex-persistent-menu-nav: 1030; +@zindex-persistent-menu-nav-arrow: @zindex-persistent-menu-nav + 1; @zindex-navbar: 1000; @zindex-app-preview: 998; @zindex-navbar-cloudcare: 995; diff --git a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss index caf1605c788c..5a78d3c9abb2 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss +++ b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss @@ -59,6 +59,7 @@ $zindexAccountingPricingTableHeader: 800; $zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals $zindex-cloudcare-debugger: 1040; $zindex-persistent-menu-nav: 1030; +$zindex-persistent-menu-nav-arrow: $zindex-persistent-menu-nav + 1; $zindex-navbar: 1000; $zindex-app-preview: 998; $zindex-navbar-cloudcare: 995; From 63fb0db0569949bb14a14507f36418296233cd37 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Wed, 8 Jan 2025 12:39:36 -0500 Subject: [PATCH 30/37] lint --- .../cloudcare/static/cloudcare/js/formplayer/menus/views.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js index 50753dad403f..013ca210fe98 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js @@ -1638,7 +1638,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ } return persistantMenuRegionWidth; }, - showMenu: function (firstLoad=false) { + showMenu: function (firstLoad = false) { const persistantMenuRegionWidth = this.getPersistantMenuRegionWidth(); const persistentMenuContainer = $('#persistent-menu-container'); if (sessionStorage.showPersistentMenu === "false") { @@ -1659,9 +1659,9 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ }, menuCollapseExpandTransitionListener: function () { const persistentMenuContentContainer = $('#persistent-menu-container-content'); - const targetElement = $('#persistent-menu-container')[0] + const targetElement = $('#persistent-menu-container')[0]; targetElement.addEventListener('transitionend', (event) => { - if (this.menuExpanded && event.target == targetElement) { + if (this.menuExpanded && event.target === targetElement) { persistentMenuContentContainer.removeClass('d-none'); } }); From 1ee34371903edd72f36bcaf5ec13e83a5732a59a Mon Sep 17 00:00:00 2001 From: robert-costello Date: Wed, 8 Jan 2025 18:03:38 +0000 Subject: [PATCH 31/37] "Bootstrap 5 Migration - Rebuilt diffs" --- .../imports/includes_variables._variables.style.diff.txt | 3 ++- .../includes_variables._variables_bootstrap3.style.diff.txt | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt index aa3344777b11..9e51bbdc8989 100644 --- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt +++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt @@ -1,6 +1,6 @@ --- +++ -@@ -1,125 +1,232 @@ +@@ -1,126 +1,232 @@ -@import "@{b3-import-variables}"; - -// Nunito Sans is used on dimagi.com and embedded in hqwebapp/base.html @@ -193,6 +193,7 @@ -@zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals -@zindex-cloudcare-debugger: 1040; -@zindex-persistent-menu-nav: 1030; +-@zindex-persistent-menu-nav-arrow: @zindex-persistent-menu-nav + 1; -@zindex-navbar: 1000; -@zindex-app-preview: 998; -@zindex-navbar-cloudcare: 995; diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt index 1f30e3f7ec4c..ed0f54a6ebbe 100644 --- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt +++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt @@ -1,6 +1,6 @@ --- +++ -@@ -1,125 +1,72 @@ +@@ -1,126 +1,73 @@ -@import "@{b3-import-variables}"; +/* +These are Boostrap 3 variables that were carried over in the @@ -154,6 +154,7 @@ -@zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals -@zindex-cloudcare-debugger: 1040; -@zindex-persistent-menu-nav: 1030; +-@zindex-persistent-menu-nav-arrow: @zindex-persistent-menu-nav + 1; -@zindex-navbar: 1000; -@zindex-app-preview: 998; -@zindex-navbar-cloudcare: 995; @@ -166,6 +167,7 @@ +$zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals +$zindex-cloudcare-debugger: 1040; +$zindex-persistent-menu-nav: 1030; ++$zindex-persistent-menu-nav-arrow: $zindex-persistent-menu-nav + 1; +$zindex-navbar: 1000; +$zindex-app-preview: 998; +$zindex-navbar-cloudcare: 995; From 5b2b51c780a712a9b9fd298cb84a105770e07f01 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Thu, 9 Jan 2025 13:47:36 -0500 Subject: [PATCH 32/37] hide menu region when user navigates home with breadcrumbs .breadcrumbs and persistent menu nav should work together while both are available. --- .../apps/cloudcare/static/cloudcare/js/formplayer/apps/views.js | 1 + 1 file changed, 1 insertion(+) diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/views.js index 7fc527b5368f..c3464617a299 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/views.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/views.js @@ -123,6 +123,7 @@ hqDefine("cloudcare/js/formplayer/apps/views", [ this.shouldShowIncompleteForms = options.shouldShowIncompleteForms; sessionStorage.removeItem('handledDefaultClosed'); sessionStorage.removeItem('persistantMenuRegionWidth'); + $('#persistent-menu-region').css('width', ''); }, templateContext: function () { From a1b3dc5ae48035d45f90fbddc0b9513d40d4dfd3 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Thu, 9 Jan 2025 14:49:58 -0500 Subject: [PATCH 33/37] add border top when there are cloudcare notifications, if not remove to avoid doubled border. otherwise there is a right border and no top border which looks strange --- .../cloudcare/js/formplayer/menus/views.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js index 013ca210fe98..243ebc03dd6d 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js @@ -1666,6 +1666,22 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ } }); }, + cloudcareNotificationListener: function () { + const persistentMenuContainer = $('#persistent-menu-container'); + const cloudcareNotifications = $("#cloudcare-notifications"); + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.type === 'childList') { + if (cloudcareNotifications.children().length > 0) { + persistentMenuContainer.addClass('border-top'); + } else { + persistentMenuContainer.removeClass('border-top'); + } + } + }); + }); + observer.observe(cloudcareNotifications[0], { childList: true }); + }, lockMenu: function () { const persistantMenuRegionWidth = this.getPersistantMenuRegionWidth(); const persistentMenuRegion = $('#persistent-menu-region'); @@ -1699,6 +1715,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ const arrowToggle = $('#persistent-menu-arrow-toggle'); self.makeCollapse(sessionStorage.showPersistentMenu); self.menuCollapseExpandTransitionListener(); + self.cloudcareNotificationListener(); if (this.splitScreenToggleEnabled && !sessionStorage.getItem('handledDefaultClosed')) { self.hideMenu(); From 5422c2e2472ba88d8595bcf13e0aa884e40ff3a1 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Thu, 9 Jan 2025 14:50:50 -0500 Subject: [PATCH 34/37] check for cloudcare notifications on first render and add border top if needed --- .../cloudcare/static/cloudcare/js/formplayer/menus/views.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js index 243ebc03dd6d..4eaabc6c7fa2 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js @@ -1716,6 +1716,9 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ self.makeCollapse(sessionStorage.showPersistentMenu); self.menuCollapseExpandTransitionListener(); self.cloudcareNotificationListener(); + if ($("#cloudcare-notifications").children().length > 0) { + $('#persistent-menu-container').addClass('border-top'); + } if (this.splitScreenToggleEnabled && !sessionStorage.getItem('handledDefaultClosed')) { self.hideMenu(); From 61a75ae2d5b1ceefdf67bf2cf6c0e2a476f48138 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Fri, 10 Jan 2025 11:56:18 -0500 Subject: [PATCH 35/37] fix indent --- .../cloudcare/static/cloudcare/js/formplayer/menus/views.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js index 4eaabc6c7fa2..80bd5d46a5bc 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js @@ -1680,7 +1680,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [ } }); }); - observer.observe(cloudcareNotifications[0], { childList: true }); + observer.observe(cloudcareNotifications[0], { childList: true }); }, lockMenu: function () { const persistantMenuRegionWidth = this.getPersistantMenuRegionWidth(); From 27ff0046946e6675065579d215c135be9a9d9a58 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Fri, 10 Jan 2025 11:58:24 -0500 Subject: [PATCH 36/37] add var for hq nav bar z-index --- .../static/cloudcare/scss/formplayer-common/navigation.scss | 2 +- .../hqwebapp/static/hqwebapp/less/_hq/includes/variables.less | 1 + .../static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/navigation.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/navigation.scss index d2037f73f5bc..c7cd284e48de 100644 --- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/navigation.scss +++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/navigation.scss @@ -12,7 +12,7 @@ #hq-navigation { transition: all 1s; - z-index: 1060; + z-index: $zindex-hq-navigation; } .bg-cc-light-warm-accent-extra-hi { diff --git a/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less b/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less index 1d33156ef17d..a40b06d48e84 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less +++ b/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less @@ -106,6 +106,7 @@ @zindexAccountingPricingTableHeader: 800; // Other Zindecies +@zindex-hq-navigation: 1060; @zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals @zindex-cloudcare-debugger: 1040; @zindex-persistent-menu-nav: 1030; diff --git a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss index 5a78d3c9abb2..952d095d6192 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss +++ b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss @@ -56,6 +56,7 @@ $zindexDashboardSpinner: 500; $zindexAccountingPricingTableHeader: 800; // Other Zindecies +$zindex-hq-navigation: 1060; $zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals $zindex-cloudcare-debugger: 1040; $zindex-persistent-menu-nav: 1030; From 0c1b9f6f9d30fae8f498aa6fdd5e0bff686ed480 Mon Sep 17 00:00:00 2001 From: robert-costello Date: Fri, 10 Jan 2025 16:58:55 +0000 Subject: [PATCH 37/37] "Bootstrap 5 Migration - Rebuilt diffs" --- .../imports/includes_variables._variables.style.diff.txt | 3 ++- .../includes_variables._variables_bootstrap3.style.diff.txt | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt index 7515366a1ce0..60f4bbc7057e 100644 --- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt +++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt @@ -1,6 +1,6 @@ --- +++ -@@ -1,126 +1,236 @@ +@@ -1,127 +1,236 @@ -@import "@{b3-import-variables}"; - -// Nunito Sans is used on dimagi.com and embedded in hqwebapp/base.html @@ -190,6 +190,7 @@ -@zindexAccountingPricingTableHeader: 800; - -// Other Zindecies +-@zindex-hq-navigation: 1060; -@zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals -@zindex-cloudcare-debugger: 1040; -@zindex-persistent-menu-nav: 1030; diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt index ed0f54a6ebbe..b6e7c02ea4f7 100644 --- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt +++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt @@ -1,6 +1,6 @@ --- +++ -@@ -1,126 +1,73 @@ +@@ -1,127 +1,74 @@ -@import "@{b3-import-variables}"; +/* +These are Boostrap 3 variables that were carried over in the @@ -151,6 +151,7 @@ +$zindexAccountingPricingTableHeader: 800; // Other Zindecies +-@zindex-hq-navigation: 1060; -@zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals -@zindex-cloudcare-debugger: 1040; -@zindex-persistent-menu-nav: 1030; @@ -164,6 +165,7 @@ -@zindex-formplayer-scroll-to-bottom: 5; -@zindex-next-error: 5; // Above the sticky submit button -@zindex-formplayer-anchored-submit: 4; ++$zindex-hq-navigation: 1060; +$zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals +$zindex-cloudcare-debugger: 1040; +$zindex-persistent-menu-nav: 1030;