5.4.5 release

framework7io · Feb 21, 2020 · 748731f · 748731f
1 parent 601e395
commit 748731f
Show file tree

Hide file tree

Showing 86 changed files with 637 additions and 314 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,20 @@
 
 # Change Log
 
+# [v5.4.5](https://github.com/framework7io/framework7/compare/v5.4.2...v5.4.5) - February 21, 2020
+ * Core
+ * FAB (Floatin Action Button)
+ * Now it supports backdrop, by adding `<div clas="fab-backdrop"></div>` element on same level as FAB element
+ * Page
+ * Added custom CSS properties for custom transitions durations: `--f7-page-parallax-transition-duration`, `--f7-page-cover-transition-duration`, `--f7-page-dive-transition-duration`, `--f7-page-fade-transition-duration`, `--f7-page-flip-transition-duration`, `--f7-page-push-transition-duration`
+ * Preloader
+ * New methods `app.preloader.showIn(el, color)` and `app.preloader.hideIn(el)` to show/hide preloader overlay in specific element
+ * Request
+ * Now it uses "native" XHR timeout
+ * React, Vue, Svelte
+ * Added `<FabBackdrop />` component
+ * Minor fixes
+
 # [v5.4.2](https://github.com/framework7io/framework7/compare/v5.4.1...v5.4.2) - February 16, 2020
  * Core
  * Card

diff --git a/packages/core/components/actions.css b/packages/core/components/actions.css
diff --git a/packages/core/components/actions.rtl.css b/packages/core/components/actions.rtl.css
diff --git a/packages/core/components/actions/actions.less b/packages/core/components/actions/actions.less
@@ -12,6 +12,7 @@
  max-height: 100%;
  .scrollable();
  transition-property: transform;
+ will-change: transform;
  &.modal-in, &.modal-out {
  transition-duration: 300ms;
  }

diff --git a/packages/core/components/dialog.css b/packages/core/components/dialog.css
diff --git a/packages/core/components/dialog.rtl.css b/packages/core/components/dialog.rtl.css
diff --git a/packages/core/components/dialog/dialog.less b/packages/core/components/dialog/dialog.less
@@ -22,6 +22,7 @@
  color: var(--f7-dialog-text-color);
  font-size: var(--f7-dialog-font-size);
  background: var(--f7-dialog-bg-color);
+ will-change: transform, opacity;
  .ios-translucent-modals(var(--f7-dialog-bg-color-rgb));
  &.modal-in {
  opacity: 1;

diff --git a/packages/core/components/fab.css b/packages/core/components/fab.css
diff --git a/packages/core/components/fab.js b/packages/core/components/fab.js
diff --git a/packages/core/components/fab.rtl.css b/packages/core/components/fab.rtl.css
diff --git a/packages/core/components/fab/fab.js b/packages/core/components/fab/fab.js
@@ -150,6 +150,7 @@ const Fab = {
  } else {
  $fabEl.addClass('fab-opened');
  }
+ $fabEl.siblings('.fab-backdrop').addClass('backdrop-in');
  $fabEl.trigger('fab:open');
  },
  close(fabEl = '.fab-opened') {
@@ -165,6 +166,7 @@ const Fab = {
  } else {
  $fabEl.removeClass('fab-opened');
  }
+ $fabEl.siblings('.fab-backdrop').removeClass('backdrop-in');
  $fabEl.trigger('fab:close');
  },
  toggle(fabEl) {
@@ -203,5 +205,9 @@ export default {
  const app = this;
  app.fab.close(data.fab);
  },
+ '.fab-backdrop': function close() {
+ const app = this;
+ app.fab.close();
+ },
  },
 };
diff --git a/packages/core/components/fab/fab.less b/packages/core/components/fab/fab.less
@@ -1,6 +1,8 @@
 /* === FAB === */
 @import url('./fab-vars.less');
-
+.fab-backdrop {
+ z-index: 1400;
+}
 .fab {
  position: absolute;
  z-index: 1500;

diff --git a/packages/core/components/modal/modal.less b/packages/core/components/modal/modal.less
@@ -8,6 +8,7 @@
 .popover-backdrop,
 .popup-backdrop,
 .preloader-backdrop,
-.sheet-backdrop {
+.sheet-backdrop,
+.fab-backdrop {
  .modal-backdrop();
-}
+}
diff --git a/packages/core/components/navbar/navbar.less b/packages/core/components/navbar/navbar.less
@@ -185,6 +185,7 @@
  box-sizing: border-box;
  padding: var(--f7-safe-area-top) calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-left) + var(--f7-safe-area-left));
  transform: translate3d(0,0,0);
+ z-index: 10;
 }
 .views, .view, .page, .navbars {
  > .navbar {

diff --git a/packages/core/components/page/page-transitions/cover-v.less b/packages/core/components/page/page-transitions/cover-v.less
@@ -6,18 +6,18 @@
 }
 .router-transition-f7-cover-v-forward {
  .page-next {
- animation: f7-cover-v-next-to-current 450ms forwards;
+ animation: f7-cover-v-next-to-current var(--f7-page-cover-transition-duration) forwards;
  }
  .page-current {
- animation: f7-cover-v-current-to-prev 450ms forwards;
+ animation: f7-cover-v-current-to-prev var(--f7-page-cover-transition-duration) forwards;
  }
 }
 .router-transition-f7-cover-v-backward {
  .page-current {
- animation: f7-cover-v-current-to-next 450ms forwards;
+ animation: f7-cover-v-current-to-next var(--f7-page-cover-transition-duration) forwards;
  }
  .page-previous {
- animation: f7-cover-v-prev-to-current 450ms forwards;
+ animation: f7-cover-v-prev-to-current var(--f7-page-cover-transition-duration) forwards;
  }
 }
 @keyframes f7-cover-v-next-to-current {

diff --git a/packages/core/components/page/page-transitions/cover.less b/packages/core/components/page/page-transitions/cover.less
@@ -6,18 +6,18 @@
 }
 .router-transition-f7-cover-forward {
  .page-next {
- animation: f7-cover-next-to-current 450ms forwards;
+ animation: f7-cover-next-to-current var(--f7-page-cover-transition-duration) forwards;
  }
  .page-current {
- animation: f7-cover-current-to-prev 450ms forwards;
+ animation: f7-cover-current-to-prev var(--f7-page-cover-transition-duration) forwards;
  }
 }
 .router-transition-f7-cover-backward {
  .page-current {
- animation: f7-cover-current-to-next 450ms forwards;
+ animation: f7-cover-current-to-next var(--f7-page-cover-transition-duration) forwards;
  }
  .page-previous {
- animation: f7-cover-prev-to-current 450ms forwards;
+ animation: f7-cover-prev-to-current var(--f7-page-cover-transition-duration) forwards;
  }
 }
 @keyframes f7-cover-next-to-current {

diff --git a/packages/core/components/page/page-transitions/dive.less b/packages/core/components/page/page-transitions/dive.less
@@ -6,18 +6,18 @@
 }
 .router-transition-f7-dive-forward {
  .page-next {
- animation: f7-dive-next-to-current 500ms forwards;
+ animation: f7-dive-next-to-current var(--f7-page-dive-transition-duration) forwards;
  }
  .page-current {
- animation: f7-dive-current-to-prev 500ms forwards;
+ animation: f7-dive-current-to-prev var(--f7-page-dive-transition-duration) forwards;
  }
 }
 .router-transition-f7-dive-backward {
  .page-current {
- animation: f7-dive-current-to-next 500ms forwards;
+ animation: f7-dive-current-to-next var(--f7-page-dive-transition-duration) forwards;
  }
  .page-previous {
- animation: f7-dive-prev-to-current 500ms forwards;
+ animation: f7-dive-prev-to-current var(--f7-page-dive-transition-duration) forwards;
  }
 }
 @keyframes f7-dive-next-to-current {

diff --git a/packages/core/components/page/page-transitions/fade.less b/packages/core/components/page/page-transitions/fade.less
@@ -6,18 +6,18 @@
 .router-transition-f7-fade-forward {
  .page-next {
  opacity: 0 !important;
- animation: f7-fade-in 500ms forwards;
+ animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
  }
  .page-current {
- animation: f7-fade-out 500ms forwards;
+ animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
  }
 }
 .router-transition-f7-fade-backward {
  .page-current {
- animation: f7-fade-out 500ms forwards;
+ animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
  }
  .page-previous {
- animation: f7-fade-in 500ms forwards;
+ animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
  }
 }
 @keyframes f7-fade-in {

diff --git a/packages/core/components/page/page-transitions/flip.less b/packages/core/components/page/page-transitions/flip.less
@@ -9,18 +9,18 @@
 }
 .router-transition-f7-flip-forward {
  .page-next {
- animation: f7-flip-next-to-current 700ms forwards;
+ animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
  }
  .page-current {
- animation: f7-flip-current-to-prev 700ms forwards;
+ animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
  }
 }
 .router-transition-f7-flip-backward {
  .page-current {
- animation: f7-flip-current-to-next 700ms forwards;
+ animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
  }
  .page-previous {
- animation: f7-flip-prev-to-current 700ms forwards;
+ animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
  }
 }
 @keyframes f7-flip-next-to-current {

diff --git a/packages/core/components/page/page-transitions/parallax.less b/packages/core/components/page/page-transitions/parallax.less
@@ -1,18 +1,18 @@
 // f7-parallax
 .router-transition-f7-parallax-forward {
  .page-next {
- animation: f7-parallax-next-to-current 500ms forwards;
+ animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards;
  }
  .page-current {
- animation: f7-parallax-current-to-prev 500ms forwards;
+ animation: f7-parallax-current-to-prev var(--f7-page-parallax-transition-duration) forwards;
  }
 }
 .router-transition-f7-parallax-backward {
  .page-current {
- animation: f7-parallax-current-to-next 500ms forwards;
+ animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards;
  }
  .page-previous {
- animation: f7-parallax-prev-to-current 500ms forwards;
+ animation: f7-parallax-prev-to-current var(--f7-page-parallax-transition-duration) forwards;
  }
 }
 @keyframes f7-parallax-next-to-current {

diff --git a/packages/core/components/page/page-transitions/push.less b/packages/core/components/page/page-transitions/push.less
@@ -1,18 +1,18 @@
 // f7-Push
 .router-transition-f7-push-forward {
  .page-next {
- animation: f7-push-next-to-current 500ms forwards;
+ animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards;
  }
  .page-current {
- animation: f7-push-current-to-prev 500ms forwards;
+ animation: f7-push-current-to-prev var(--f7-page-push-transition-duration) forwards;
  }
 }
 .router-transition-f7-push-backward {
  .page-current {
- animation: f7-push-current-to-next 500ms forwards;
+ animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards;
  }
  .page-previous {
- animation: f7-push-prev-to-current 500ms forwards;
+ animation: f7-push-prev-to-current var(--f7-page-push-transition-duration) forwards;
  }
 }
 @keyframes f7-push-next-to-current {

diff --git a/packages/core/components/page/page-vars.less b/packages/core/components/page/page-vars.less
@@ -3,6 +3,12 @@
  --f7-page-master-border-color: rgba(0,0,0,0.1);
  --f7-page-master-border-width: 1px;
  --f7-page-swipeback-transition-duration: 300ms;
+ --f7-page-parallax-transition-duration: 500ms;
+ --f7-page-cover-transition-duration: 450ms;
+ --f7-page-dive-transition-duration: 500ms;
+ --f7-page-fade-transition-duration: 500ms;
+ --f7-page-flip-transition-duration: 700ms;
+ --f7-page-push-transition-duration: 500ms;
  /*
  --f7-page-content-extra-padding-top: 0px;
  --f7-page-content-extra-padding-bottom: 0px;