Ad/persistent menu mouseover

corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/views.js

@@ -1,4 +1,4 @@
 'use strict';
 hqDefine("cloudcare/js/formplayer/apps/views", [
     'jquery',
     'underscore',
@@ -121,6 +121,9 @@
 
         initialize: function (options) {
             this.shouldShowIncompleteForms = options.shouldShowIncompleteForms;
+            sessionStorage.removeItem('handledDefaultClosed');
+            sessionStorage.removeItem('persistantMenuRegionWidth');
+            $('#persistent-menu-region').css('width', '');
         },
 
         templateContext: function () {

corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js

@@ -1,4 +1,4 @@
 'use strict';
 hqDefine("cloudcare/js/formplayer/menus/controller", [
     'jquery',
     'underscore',
@@ -167,6 +167,7 @@
             FormplayerFrontend.regions.getRegion('persistentMenu').show(
                 views.PersistentMenuView({
                     collection: _toMenuCommands(menuResponse.persistentMenu, [], menuResponse.selections),
+                    sidebarEnabled: sidebarEnabled,
                 }).render());
         } else {
             FormplayerFrontend.regions.getRegion('persistentMenu').empty();

corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js

@@ -1,4 +1,4 @@
 'use strict';
 hqDefine("cloudcare/js/formplayer/menus/views", [
     'jquery',
     'underscore',
@@ -1572,30 +1572,33 @@
             'click #app-main': 'onClickAppMain',
         },
         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();
+                } else {
+                    this.makeCollapse();
                 }
-                $('#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 () {
+            const persistentMenuContainer = $('#persistent-menu-container');
+            persistentMenuContainer.removeClass(this.containerCollapseClasses);
+            persistentMenuContainer.addClass(this.containerOffCanvasClasses);
+        },
+        makeCollapse: function () {
+            const persistentMenuContainer = $('#persistent-menu-container');
+            persistentMenuContainer.removeClass(this.containerOffCanvasClasses);
+            persistentMenuContainer.addClass(this.collapse);
+        },
+        initialize: function (options) {
+            $('#persistent-menu-region').removeClass('d-none');
+            this.sidebarEnabled = options.sidebarEnabled;
+            this.menuExpanded;
+            this.splitScreenToggleEnabled = toggles.toggleEnabled('SPLIT_SCREEN_CASE_SEARCH'),
+            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 +1607,155 @@
         onRender: function () {
             this.showChildView('menu', new PersistentMenuListView({collection: this.collection}));
         },
-        onAttach: function () {
-            this.handleSmallScreenChange(cloudcareUtils.smallScreenIsEnabled());
-            $('#persistent-menu-container').on('hidden.bs.collapse', function () {
-                sessionStorage.showPersistentMenu = false;
+        calcPersistantMenuRegionWidth: 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();
+
+            persistentMenuRegionClone.remove();
+
+            return regionWidth;
+        },
+        getPersistantMenuRegionWidth: function () {
+            let persistantMenuRegionWidth = sessionStorage.getItem('persistantMenuRegionWidth');
+            if (!persistantMenuRegionWidth) {
+                persistantMenuRegionWidth = this.calcPersistantMenuRegionWidth();
+                sessionStorage.setItem('persistantMenuRegionWidth', persistantMenuRegionWidth);
+            }
+            return persistantMenuRegionWidth;
+        },
+        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);
+            this.menuExpanded = true;
+        },
+        hideMenu: function () {
+            const persistentMenuContainer = $('#persistent-menu-container');
+            persistentMenuContainer.css('transition', 'width 0.25s');
+            persistentMenuContainer.css('width', '100%');
+            $('#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');
+                    }
+                });
+        },
+        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');
+                        }
+                    }
+                });
             });
-            $('#persistent-menu-container').on('show.bs.collapse', function () {
-                sessionStorage.showPersistentMenu = true;
+            observer.observe(cloudcareNotifications[0], { childList: true });
+        },
+        lockMenu: function () {
+            const persistantMenuRegionWidth = this.getPersistantMenuRegionWidth();
+            const persistentMenuRegion = $('#persistent-menu-region');
+            const persistentMenuContainer = $('#persistent-menu-container');
+            persistentMenuRegion.css('width', persistantMenuRegionWidth);
+            persistentMenuContainer.removeClass('position-absolute');
+            persistentMenuContainer.addClass('position-relative');
+            sessionStorage.showPersistentMenu = true;
+        },
+        unlockMenu: function () {
+            const persistentMenuRegion = $('#persistent-menu-region');
+            const persistentMenuContainer = $('#persistent-menu-container');
+            persistentMenuContainer.removeClass('position-relative');
+            persistentMenuContainer.addClass('position-absolute');
+            persistentMenuRegion.css('width', '');
+            sessionStorage.showPersistentMenu = false;
+        },
+        flipArrowRight: function () {
+            const arrowToggle = $('#persistent-menu-arrow-toggle');
+            arrowToggle.find('i').removeClass('fa-chevron-left');
+            arrowToggle.find('i').addClass('fa-chevron-right');
+        },
+        flipArrowLeft: function () {
+            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;
+            const smallScreenEnabledOnStartup = cloudcareUtils.smallScreenIsEnabled();
+            const arrowToggle = $('#persistent-menu-arrow-toggle');
+            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();
+                self.unlockMenu();
+                self.flipArrowRight();
+                sessionStorage.setItem('handledDefaultClosed', true);
+            } else if (sessionStorage.showPersistentMenu === 'true' && !smallScreenEnabledOnStartup) {
+                self.showMenu(true);
+                self.flipArrowLeft();
+                self.lockMenu();
+            }
+            arrowToggle.click(function () {
+                if (!self.menuExpanded) {
+                    self.showMenu();
+                    self.flipArrowLeft();
+                    self.lockMenu();
+                } else if (self.menuExpanded && sessionStorage.showPersistentMenu === 'true') {
+                    self.hideMenu();
+                    self.unlockMenu();
+                    self.flipArrowRight();
+                } else if (self.menuExpanded && sessionStorage.showPersistentMenu !== 'true') {
+                    self.flipArrowLeft();
+                    self.lockMenu();
+                }
             });
+            $('#persistent-menu-container').hover(
+                function () {
+                    if (!self.menuExpanded) {
+                        self.showMenu();
+                    }
+                },
+                function () {
+                    if (sessionStorage.showPersistentMenu !== 'true') {
+                        self.hideMenu();
+                    }
+                }
+            );
         },
         templateContext: function () {
             const appId = formplayerUtils.currentUrlToObject().appId,

corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html

@@ -105,7 +105,7 @@
       <div id="breadcrumb-region" class="print-container"></div>
       <section id="cloudcare-notifications" class="container notifications-container"></section>
       <div id="content-plus-persistent-menu-container" class="flex-grow-1 d-lg-flex">
-        <div id="persistent-menu-region" class="d-print-none"></div>
+        <div id="persistent-menu-region" class="d-print-none d-none position-relative"></div>
         <div id="content-plus-version-info-container" class="h-100 flex-grow-1 overflow-scroll d-lg-flex-column">
           <div id="sidebar-and-content" class="d-lg-flex justify-content-center m-3">
             <div id="sidebar-region" class="noprint-sub-container me-3"></div>

corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html

@@ -1,32 +1,33 @@
 {% load i18n %}
 
 <script type="text/template" id="persistent-menu-template">
-  <button id="persistent-menu-arrow-toggle"
-     role="button"
-     aria-label="Expand Persistent Menu"
-     tabindex="1"
-     data-bs-target="#persistent-menu-container"
-     aria-expanded="true"
-     aria-controls="persistent-menu-container"
-     class="position-fixed top-50 start-0 rounded-end persistent-menu-toggle">
-    <i class="fa fa-chevron-right"></i>
-  </button>
-  <div id="persistent-menu-container" class="bg-white h-100 position-relative overflow-scroll"
+  <div id="persistent-menu-container" class="d-none d-lg-block bg-white h-100 position-absolute border-end border-dark-subtle border-1"
+    style="width: 30px;"
     aria-labelledby="persistent-menu-label">
-    <button type="button" id="persistent-menu-close-button" class="btn-close text-reset position-absolute"
-      data-bs-target="#persistent-menu-container" aria-label="Close"></button>
-    <h2 class="title position-relative me-4" id="persistent-menu-label">
-      <% if (imageUri) { %>
-        <i class="fcc persistent-menu-image align-self-start flex-shrink-0" aria-hidden="true"
-            style="background-image: url('<%- imageUri %>');"></i>
-      <% } else { %>
-        <i class="fcc fcc-flower persistent-menu-image" aria-hidden="true"></i>
-      <% } %>
-      <a id="app-main" class="align-middle stretched-link text-reset" href="#">
-        <%- appName %>
-      </a>
-    </h2>
-    <div id="persistent-menu-content" class="persistent-menu"></div>
+    <button id="persistent-menu-arrow-toggle"
+      role="button"
+      aria-label="Expand Persistent Menu"
+      tabindex="1"
+      aria-expanded="true"
+      aria-controls="persistent-menu-container"
+      class="btn btn-outline-primary me-1 rounded-circle position-absolute top-50 end-0">
+      <i class="fa fs-3 fa-chevron-right"></i>
+      <span></span>
+    </button>
+    <div id="persistent-menu-container-content" class="d-none text-break">
+      <h2 class="title position-relative me-4" id="persistent-menu-label">
+        <% if (imageUri) { %>
+          <i class="fcc persistent-menu-image align-self-start flex-shrink-0" aria-hidden="true"
+              style="background-image: url('<%- imageUri %>');"></i>
+        <% } else { %>
+          <i class="fcc fcc-flower persistent-menu-image" aria-hidden="true"></i>
+        <% } %>
+        <a id="app-main" class="align-middle stretched-link text-reset" href="#">
+          <%- appName %>
+        </a>
+      </h2>
+      <div id="persistent-menu-content" class="persistent-menu" style="padding-right: 10px"></div>
+    </div>
   </div>
 </script>
 

corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/navigation.scss

@@ -12,6 +12,7 @@
 
 #hq-navigation {
   transition: all 1s;
+  z-index: $zindex-hq-navigation;
 }
 
 .bg-cc-light-warm-accent-extra-hi {

corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss

@@ -12,6 +12,10 @@
   padding-bottom: 6px;
 }
 
+#persistent-menu-region {
+  width: 5%;
+}
+
 #persistent-menu-region > div {
   height: 100%;
 }
@@ -23,21 +27,24 @@
 }
 
 #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 {
   right: 15px;
   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-arrow;
+  background-color: $call-to-action-hi;
   &:hover {
-    background-color: $cc-brand-low;
+    background-color: $call-to-action-mid;
   }
 }
 

corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less

@@ -106,13 +106,19 @@
 @zindexAccountingPricingTableHeader:  800;
 
 // Other Zindecies
-@zindex-report-loading:               100;
+@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;
+@zindex-persistent-menu-nav-arrow:   @zindex-persistent-menu-nav + 1;
+@zindex-navbar:                      1000;
 @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-next-error:                     5;  // Above the sticky submit button
 @zindex-formplayer-anchored-submit:     4;
 
 

corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss

@@ -56,16 +56,19 @@ $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;
+$zindex-persistent-menu-nav-arrow:   $zindex-persistent-menu-nav + 1;
 $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
+$zindex-formplayer-anchored-submit:     4;
 
 $cursor-disabled: 'not-allowed';