XWIKI-23286: Panel toggles and handles inconsistencies

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js

@@ -190,14 +190,19 @@ require(['jquery', 'jquery-ui'], function($) {
       return valueIsSimilarToDefault(document.body.style.getPropertyValue('--panel-column-' + side + '-width'), side);
     };
     let updateLocalStorageValueForSide = function (side) {
+      // If the panel is not here, do not take any action on local storage.
+      // The user cannot act on or view the width preference, it should not be updated.
+      if ($('#' + side + 'Panels').length === 0) return;
       // We only update the local storage when the last value is different enough from the default value.
       // This is important to keep this as long as we don't have a proper UI to reset the panel column size.
       // IMO it makes sense to keep it even when we eventually have this reset UI.
       if (!currentValueIsSimilarToDefault(side)) {
         localStorage.setItem(localStoragePrefix + side,
           document.body.style.getPropertyValue('--panel-column-' + side + '-width'));
       } else {
-        // If the values are similar, we remove whatever was stored in the localStorage.
+        // If the values are similar and the panel is actually here, we remove whatever was stored in the localStorage.
+        // The panels are not in the DOM if: it's deactivated for everyone by admins or this page layout doesn't contain
+        // panels.
         localStorage.removeItem(localStoragePrefix + side);
       }
     };

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less

@@ -36,13 +36,11 @@
   & #leftPanels {
     order: 1;
     width: ~"var(--panel-column-left-width)";
-    padding-right: ~"calc(var(--grid-gutter-width) / 2)";
   }
 
-  & #rightPanels, & #editPanels {
+  & #rightPanels {
     order: 3;
     width: ~"var(--panel-column-right-width)";
-    padding-left: ~"calc(var(--grid-gutter-width) / 2)";
   }
 
   /* Depending on the admin parameters, we want to change the default size. */
@@ -62,10 +60,15 @@
   /* The functionality to hide the panel takes precedence over the panel size defaults. 
     This ruleset should come after the rules for .panel-left-width-<WIDTH> */
   &.hideleft {
-    -/**/-panel-column-left-width: 0;
-
-    & #leftPanels {
-      display: none;
+    /* When the screen is small enough, we keep panels shown.
+      Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. 
+      ie. this media query does not short-circuit the admin preference. */
+    @media (min-width: @screen-md-min) {
+      -/**/-panel-column-left-width: 0;
+
+      & #leftPanels {
+        display: none;
+      }
     }
   }
 
@@ -80,19 +83,29 @@
   /* The functionality to hide the panel takes precedence over the panel size defaults. 
     This ruleset should come after the rules for .panel-right-width-<WIDTH> */
   &.hideright {
-    -/**/-panel-column-right-width: 0;
-
-    & #rightPanels {
-      display: none;
+    /* When the screen is small enough, we keep panels shown.
+      Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. 
+      ie. this media query does not short-circuit the admin preference. */
+    @media (min-width: @screen-md-min) {
+      -/**/-panel-column-right-width: 0;
+
+      & #rightPanels {
+        display: none;
+      }
     }
   }
 
   &.hidelefthideright {
-    -/**/-panel-column-left-width: 0;
-    -/**/-panel-column-right-width: 0;
-
-    & #leftPanels, & #rightPanels {
-      display: none;
+    /* When the screen is small enough, we keep panels shown.
+      Note that templates to generate panel columns only generate them if the panels are not hidden by admin choice. 
+      ie. this media query does not short-circuit the admin preference. */
+    @media (min-width: @screen-md-min) {
+      -/**/-panel-column-left-width: 0;
+      -/**/-panel-column-right-width: 0;
+
+      & #leftPanels, & #rightPanels {
+        display: none;
+      }
     }
   }
 
@@ -162,8 +175,7 @@
   resize: vertical;
 }
 
-.main, #editcolumn,
-#leftPanels, #rightPanels, #editPanels {
+.main, #editcolumn, #leftPanels, #rightPanels {
   position: relative;
   padding-top: (@grid-gutter-width / 2);
   padding-bottom: (@grid-gutter-width / 2);
@@ -213,6 +225,15 @@ again or the page is reloaded (because the toggler is hidden until then). */
   #rightPanelsToggle:hover, #rightPanelsToggle:focus {
     opacity: 1;
   }
+
+  /* When the display is large enough, we add padding on the outer sides of the panel columns. */
+  #leftPanels {
+    padding-right: ~"calc(var(--grid-gutter-width) / 2)";
+  }
+
+  #rightPanels {
+    padding-left: ~"calc(var(--grid-gutter-width) / 2)";
+  }
 }
 
 body#body #rightPanelsToggle {

xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/editpanels.vm

@@ -35,8 +35,14 @@
   #set ($editorPanels = $editorPanelsHistory)
 #end
 #if ($!editorPanels != '')
+  ## Similar to the toggle defined in rightpanels.vm
+  <button id="rightPanelsToggle" class="btn btn-default" 
+  title="$escapetool.xml($services.localization.render('panels.column.right.toggle.hint'))" type="button">
+    $services.icon.renderHTML('caret-right')
+    <span class="sr-only">$services.localization.render('panels.column.right.toggle.hint')</span>
+  </button>
   #set ($editorPanels = $editorPanels.split(','))
-  <div id="editPanels" class="panels editor">
+  <div id="rightPanels" class="panels editor">
 
   ## Convert the list of panels to panel (UIExtension) IDs
   #set ($panelIDList = [])
@@ -57,7 +63,9 @@
       $services.rendering.render($panelUIExtension.execute(), "xhtml/1.0")
     #end
   #end
-
+  ## Similar to the resize handle defined in rightpanels.vm
+  <span role="button" tabindex="0" class="ui-resizable-handle ui-resizable-w"
+       title="$escapetool.xml($services.localization.render('panels.column.right.resizeHandle.hint'))"></span>
   </div>
 #end
 #end