framework7 7.0.8 → 8.0.0-beta.1

package/components/panel/panel.less

@@ -4,9 +4,9 @@
 .panel-backdrop {
   position: absolute;
   left: 0;
-  top: var(--f7-appbar-app-offset, 0px);
+  top: 0px;
   width: 100%;
-  height: calc(100% - var(--f7-appbar-app-offset, 0px));
+  height: 100%;
   opacity: 0;
   z-index: 5999;
   visibility: hidden;
@@ -27,8 +27,8 @@
   z-index: 1000;
   box-sizing: border-box;
   position: absolute;
-  top: var(--f7-appbar-app-offset, 0px);
-  height: calc(100% - var(--f7-appbar-app-offset, 0px));
+  top: 0px;
+  height: 100%;
   transform: translate3d(0, 0, 0);
   width: var(--f7-panel-width);
   background-color: var(--f7-panel-bg-color);
@@ -73,59 +73,49 @@
     }
   }
 }
-.panel-cover {
+.panel-cover,
+.panel-floating {
   z-index: 6000;
 }
+.panel-floating {
+  overflow: hidden;
+  border-radius: 16px;
+  height: auto;
+  top: calc(8px + var(--f7-safe-area-top, 0px));
+  bottom: calc(8px + var(--f7-safe-area-bottom, 0px));
+  .views,
+  .view {
+    --f7-safe-area-top: 0px;
+    --f7-safe-area-bottom: 0px;
+  }
+}
+.page .panel-floating {
+  top: calc(8px + var(--f7-page-navbar-offset, 0px));
+  bottom: calc(8px + var(--f7-safe-area-bottom, 0px));
+  .page {
+    --f7-page-navbar-offset: 0px;
+  }
+  .navbar ~ *,
+  .navbars ~ * {
+    --f7-page-navbar-offset: calc(var(--f7-navbar-height));
+  }
+}
 .panel-left {
   left: 0;
   width: var(--f7-panel-left-width, var(--f7-panel-width));
   &.panel-cover,
+  &.panel-floating,
   &.panel-push {
     transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
-    &:after {
-      left: 100%;
-      background: linear-gradient(to right, var(--f7-panel-shadow));
-      .with-panel-left-cover & {
-        opacity: 1;
-      }
-    }
-  }
-  &.panel-reveal {
-    &:after {
-      right: 0;
-      transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
-      background: linear-gradient(to left, var(--f7-panel-shadow));
-      .with-panel-left-reveal & {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-      }
-    }
   }
 }
 .panel-right {
   right: 0;
   width: var(--f7-panel-right-width, var(--f7-panel-width));
   &.panel-cover,
+  &.panel-floating,
   &.panel-push {
     transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
-    &:after {
-      right: 100%;
-      background: linear-gradient(to left, var(--f7-panel-shadow));
-      .with-panel-right-cover & {
-        opacity: 1;
-      }
-    }
-  }
-  &.panel-reveal {
-    &:after {
-      left: 0;
-      background: linear-gradient(to right, var(--f7-panel-shadow));
-      transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
-      .with-panel-right-reveal & {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-      }
-    }
   }
 }
 .panel-in-breakpoint {
@@ -134,10 +124,15 @@
   &:after {
     display: none;
   }
-  &.panel-cover {
+  &.panel-cover,
+  &.panel-floating {
     z-index: 5900;
   }
 }
+.panel,
+.panel-backdrop {
+  transition-timing-function: var(--f7-panel-transition-timing-function);
+}
 html {
   &.with-panel-left-reveal,
   &.with-panel-right-reveal,
@@ -148,6 +143,7 @@ html {
     .framework7-root > .view {
       transition-duration: var(--f7-panel-transition-duration);
       transition-property: transform;
+      transition-timing-function: var(--f7-panel-transition-timing-function);
     }
   }
   &.with-panel {
@@ -181,7 +177,8 @@ html {
   .panel-push {
     z-index: 1;
   }
-  > .panel-cover {
+  > .panel-cover,
+  > .panel-floating {
     z-index: 300;
   }
   &.with-panel-left-reveal,
@@ -193,6 +190,7 @@ html {
     > .tabs {
       transition-duration: var(--f7-panel-transition-duration);
       transition-property: transform;
+      transition-timing-function: var(--f7-panel-transition-timing-function);
     }
   }
   &.with-panel-left-reveal,
@@ -210,8 +208,6 @@ html {
     }
   }
 }
-.with-panel-left-reveal,
-.with-panel-right-reveal,
 .with-panel-closing {
   .panel-backdrop-in {
     visibility: visible;
@@ -219,8 +215,12 @@ html {
     opacity: 0;
   }
 }
+.with-panel-left-reveal,
+.with-panel-right-reveal,
 .with-panel-left-cover,
 .with-panel-right-cover,
+.with-panel-left-floating,
+.with-panel-right-floating,
 .with-panel-left-push,
 .with-panel-right-push {
   .panel-backdrop-in {
@@ -229,6 +229,7 @@ html {
     opacity: 1;
   }
 }
+
 .with-panel-left-reveal,
 .with-panel-left-push {
   .panel-backdrop-in {
@@ -245,10 +246,16 @@ html {
 .with-panel-left-push .panel-left {
   transform: translate3d(0px, 0, 0);
 }
+.with-panel-left-floating .panel-left {
+  transform: translate3d(8px, 0, 0);
+}
 .with-panel-right-cover .panel-right,
 .with-panel-right-push .panel-right {
   transform: translate3d(0px, 0, 0);
 }
+.with-panel-right-floating .panel-right {
+  transform: translate3d(-8px, 0, 0);
+}
 .panel-resize-handler {
   position: absolute;
   top: 0;
@@ -324,12 +331,14 @@ html.with-modal-popup-push .framework7-root,
 html.with-modal-popup-push-closing .framework7-root {
   --f7-panelPushScale: var(--f7-popup-push-scale);
   --f7-panelPushTransitionDuration: var(--f7-popup-transition-duration);
+  --f7-panelPushTransitionTimingFunction: var(--f7-popup-transition-timing-function);
   --f7-panelPushBorderRadius: var(--f7-popup-push-border-radius);
 }
 html.with-modal-sheet-push .framework7-root,
 html.with-modal-sheet-push-closing .framework7-root {
   --f7-panelPushScale: var(--f7-sheet-push-scale);
   --f7-panelPushTransitionDuration: var(--f7-sheet-transition-duration);
+  --f7-panelPushTransitionTimingFunction: var(--f7-sheet-transition-timing-function);
   --f7-panelPushBorderRadius: var(--f7-sheet-push-border-radius);
 }
 html.with-modal-popup-push .framework7-root,
@@ -337,6 +346,7 @@ html.with-modal-sheet-push .framework7-root {
   > .panel-in,
   > .panel-out {
     transition-duration: var(--f7-panelPushTransitionDuration);
+    transition-timing-function: var(--f7-panelPushTransitionTimingFunction);
 
     &.panel-reveal.panel-left,
     &.panel-push.panel-left {
@@ -367,6 +377,7 @@ html.with-modal-sheet-push .framework7-root {
 html.with-modal-popup-push-closing .framework7-root > .panel-in,
 html.with-modal-sheet-push-closing .framework7-root > .panel-in {
   transition-duration: var(--f7-panelPushTransitionDuration);
+  transition-timing-function: var(--f7-panelPushTransitionTimingFunction);
   &.panel-reveal.panel-left,
   &.panel-push.panel-left {
     transform-origin: 50vw center;
@@ -383,6 +394,3 @@ html.with-modal-sheet-push-closing .framework7-root > .panel-in {
 .if-md-theme({
   @import './panel-md.less';
 });
-.if-aurora-theme({
-  @import './panel-aurora.less';
-});

package/components/panel/resizable-panel.js

@@ -1,7 +1,6 @@
 import $ from '../../shared/dom7.js';
 import { extend, nextFrame } from '../../shared/utils.js';
 import { getSupport } from '../../shared/get-support.js';
-
 function resizablePanel(panel) {
   const app = panel.app;
   const support = getSupport();
@@ -28,23 +27,18 @@ function resizablePanel(panel) {
   let panelMinWidth;
   let panelMaxWidth;
   let visibleByBreakpoint;
-
   function transformCSSWidth(v) {
     if (!v) return null;
-
     if (v.indexOf('%') >= 0 || v.indexOf('vw') >= 0) {
       return parseInt(v, 10) / 100 * app.width;
     }
-
     const newV = parseInt(v, 10);
     if (Number.isNaN(newV)) return null;
     return newV;
   }
-
   function isResizable() {
     return panel.resizable && $el.hasClass('panel-resizable');
   }
-
   function handleTouchStart(e) {
     if (!isResizable()) return;
     touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
@@ -55,118 +49,95 @@ function resizablePanel(panel) {
     panelMaxWidth = transformCSSWidth($el.css('max-width'));
     visibleByBreakpoint = $el.hasClass('panel-in-breakpoint');
   }
-
   function handleTouchMove(e) {
     if (!isTouched) return;
     const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
-
     if (!isMoved) {
       panelWidth = $el[0].offsetWidth;
       $el.transition(0);
       $el.addClass('panel-resizing');
       $htmlEl.css('cursor', 'col-resize');
-
       if (effect !== 'cover' || visibleByBreakpoint) {
         $viewEl = $(panel.getViewEl());
-
         if (panel.$containerEl && panel.$containerEl.hasClass('page')) {
           $viewEl.add(panel.$containerEl.children('.page-content, .tabs, .fab'));
         }
       }
-
       if (effect !== 'cover' && !visibleByBreakpoint) {
         $backdropEl.transition(0);
         $viewEl.transition(0);
       }
     }
-
     isMoved = true;
     e.preventDefault();
     touchesDiff = pageX - touchesStart.x;
     let newPanelWidth = side === 'left' ? panelWidth + touchesDiff : panelWidth - touchesDiff;
-
     if (panelMinWidth && !Number.isNaN(panelMinWidth)) {
       newPanelWidth = Math.max(newPanelWidth, panelMinWidth);
     }
-
     if (panelMaxWidth && !Number.isNaN(panelMaxWidth)) {
       newPanelWidth = Math.min(newPanelWidth, panelMaxWidth);
     }
-
     newPanelWidth = Math.min(Math.max(newPanelWidth, 0), app.width);
     panel.resizableWidth = newPanelWidth;
     $el[0].style.width = `${newPanelWidth}px`;
-
     if (effect !== 'cover' && !visibleByBreakpoint) {
       if ($viewEl) {
         $viewEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);
       }
-
       if ($backdropEl) {
         $backdropEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);
       }
     } else if (visibleByBreakpoint && $viewEl) {
       $viewEl.css(`margin-${side}`, `${newPanelWidth}px`);
     }
-
     $el.trigger('panel:resize', newPanelWidth);
     panel.emit('local::resize panelResize', panel, newPanelWidth);
   }
-
   function handleTouchEnd() {
     $('html').css('cursor', '');
-
     if (!isTouched || !isMoved) {
       isTouched = false;
       isMoved = false;
       return;
     }
-
     isTouched = false;
     isMoved = false;
     $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);
     $el[0].style.width = '';
-
     if (effect !== 'cover' && !visibleByBreakpoint) {
       $viewEl.transform('');
       $backdropEl.transform('');
     }
-
     $el.removeClass('panel-resizing');
     nextFrame(() => {
       $el.transition('');
-
       if (effect !== 'cover') {
         $backdropEl.transition('');
         if ($viewEl) $viewEl.transition('');
       }
     });
   }
-
   function handleResize() {
     if (!panel.opened || !panel.resizableWidth) return;
     panelMinWidth = transformCSSWidth($el.css('min-width'));
     panelMaxWidth = transformCSSWidth($el.css('max-width'));
-
     if (panelMinWidth && !Number.isNaN(panelMinWidth) && panel.resizableWidth < panelMinWidth) {
       panel.resizableWidth = Math.max(panel.resizableWidth, panelMinWidth);
     }
-
     if (panelMaxWidth && !Number.isNaN(panelMaxWidth) && panel.resizableWidth > panelMaxWidth) {
       panel.resizableWidth = Math.min(panel.resizableWidth, panelMaxWidth);
     }
-
     panel.resizableWidth = Math.min(Math.max(panel.resizableWidth, 0), app.width);
     $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);
   }
-
   if (panel.$el.find('.panel-resize-handler').length === 0) {
     panel.$el.append('<div class="panel-resize-handler"></div>');
   }
-
   panel.$resizeHandlerEl = panel.$el.children('.panel-resize-handler');
-  $el.addClass('panel-resizable'); // Add Events
+  $el.addClass('panel-resizable');
 
+  // Add Events
   const passive = support.passiveListener ? {
     passive: true
   } : false;
@@ -185,5 +156,4 @@ function resizablePanel(panel) {
     panel.off('beforeOpen', handleResize);
   });
 }
-
 export default resizablePanel;