feat(panel): limit resizable to max 100% width and support resizable …

…floating panels
framework7io · Jul 6, 2023 · 27ae4e1 · 27ae4e1
1 parent 81d2757
commit 27ae4e1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/core/components/panel/panel.less b/src/core/components/panel/panel.less
@@ -258,6 +258,9 @@ html {
 .with-panel-right-floating .panel-right {
   transform: translate3d(-8px, 0, 0);
 }
+.panel-resizable {
+  max-width: 100%;
+}
 .panel-resize-handler {
   position: absolute;
   top: 0;
@@ -269,14 +272,16 @@ html {
   .panel-resizable & {
     display: block;
   }
-  .panel-left.panel-cover & {
+  .panel-left.panel-cover &,
+  .panel-left.panel-floating & {
     right: -3px;
   }
   .panel-left.panel-reveal,
   .panel-left.panel-push & {
     right: 0;
   }
-  .panel-right.panel-cover & {
+  .panel-right.panel-cover &,
+  .panel-right.panel-floating & {
     left: -3px;
   }
   .panel-right.panel-reveal,

diff --git a/src/core/components/panel/resizable-panel.js b/src/core/components/panel/resizable-panel.js
@@ -27,6 +27,8 @@ function resizablePanel(panel) {
   let panelMaxWidth;
   let visibleByBreakpoint;
 
+  const isPushingPanel = effect !== 'cover' && effect !== 'floating';
+
   function transformCSSWidth(v) {
     if (!v) return null;
     if (v.indexOf('%') >= 0 || v.indexOf('vw') >= 0) {
@@ -60,13 +62,13 @@ function resizablePanel(panel) {
       $el.transition(0);
       $el.addClass('panel-resizing');
       $htmlEl.css('cursor', 'col-resize');
-      if (effect !== 'cover' || visibleByBreakpoint) {
+      if (isPushingPanel || visibleByBreakpoint) {
         $viewEl = $(panel.getViewEl());
         if (panel.$containerEl && panel.$containerEl.hasClass('page')) {
           $viewEl.add(panel.$containerEl.children('.page-content, .tabs, .fab'));
         }
       }
-      if (effect !== 'cover' && !visibleByBreakpoint) {
+      if (isPushingPanel && !visibleByBreakpoint) {
         $backdropEl.transition(0);
         $viewEl.transition(0);
       }
@@ -89,7 +91,7 @@ function resizablePanel(panel) {
 
     panel.resizableWidth = newPanelWidth;
     $el[0].style.width = `${newPanelWidth}px`;
-    if (effect !== 'cover' && !visibleByBreakpoint) {
+    if (isPushingPanel && !visibleByBreakpoint) {
       if ($viewEl) {
         $viewEl.transform(
           `translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`,
@@ -119,14 +121,14 @@ function resizablePanel(panel) {
 
     $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);
     $el[0].style.width = '';
-    if (effect !== 'cover' && !visibleByBreakpoint) {
+    if (isPushingPanel && !visibleByBreakpoint) {
       $viewEl.transform('');
       $backdropEl.transform('');
     }
     $el.removeClass('panel-resizing');
     nextFrame(() => {
       $el.transition('');
-      if (effect !== 'cover') {
+      if (isPushingPanel) {
         $backdropEl.transition('');
         if ($viewEl) $viewEl.transition('');
       }