framework7 7.0.8 → 8.0.0-beta.1

package/components/toolbar/toolbar.js

@@ -5,26 +5,22 @@ const Toolbar = {
     const app = this;
     const $tabbarEl = $(tabbarEl);
     if (app.theme === 'ios' && !$tabbarEl.hasClass('tabbar-highlight')) return;
-    if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-labels'))) return;
+    if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-icons'))) return;
     let $highlightEl = $tabbarEl.find('.tab-link-highlight');
     const tabLinksCount = $tabbarEl.find('.tab-link').length;
-
     if (tabLinksCount === 0) {
       $highlightEl.remove();
       return;
     }
-
     if ($highlightEl.length === 0) {
       $tabbarEl.children('.toolbar-inner').append('<span class="tab-link-highlight"></span>');
       $highlightEl = $tabbarEl.find('.tab-link-highlight');
     } else if ($highlightEl.next().length) {
       $tabbarEl.children('.toolbar-inner').append($highlightEl);
     }
-
     const $activeLink = $tabbarEl.find('.tab-link-active');
     let highlightWidth;
     let highlightTranslate;
-
     if ($tabbarEl.hasClass('tabbar-scrollable') && $activeLink && $activeLink[0]) {
       highlightWidth = `${$activeLink[0].offsetWidth}px`;
       highlightTranslate = `${$activeLink[0].offsetLeft}px`;
@@ -33,22 +29,18 @@ const Toolbar = {
       highlightWidth = `${100 / tabLinksCount}%`;
       highlightTranslate = `${(app.rtl ? -activeIndex : activeIndex) * 100}%`;
     }
-
     nextFrame(() => {
       $highlightEl.css('width', highlightWidth).transform(`translate3d(${highlightTranslate},0,0)`);
     });
   },
-
   init(tabbarEl) {
     const app = this;
     app.toolbar.setHighlight(tabbarEl);
   },
-
   hide(el, animate) {
     if (animate === void 0) {
       animate = true;
     }
-
     const app = this;
     const $el = $(el);
     if ($el.hasClass('toolbar-hidden')) return;
@@ -60,45 +52,36 @@ const Toolbar = {
     $el.trigger('toolbar:hide');
     app.emit('toolbarHide', $el[0]);
   },
-
   show(el, animate) {
     if (animate === void 0) {
       animate = true;
     }
-
     const app = this;
     const $el = $(el);
     if (!$el.hasClass('toolbar-hidden')) return;
-
     if (animate) {
       $el.addClass('toolbar-transitioning');
       $el.transitionEnd(() => {
         $el.removeClass('toolbar-transitioning');
       });
     }
-
     $el.removeClass('toolbar-hidden');
     $el.trigger('toolbar:show');
     app.emit('toolbarShow', $el[0]);
   },
-
   initToolbarOnScroll(pageEl) {
     const app = this;
     const $pageEl = $(pageEl);
     let $toolbarEl = $pageEl.parents('.view').children('.toolbar');
-
     if ($toolbarEl.length === 0) {
       $toolbarEl = $pageEl.find('.toolbar');
     }
-
     if ($toolbarEl.length === 0) {
-      $toolbarEl = $pageEl.parents('.views').children('.tabbar, .tabbar-labels');
+      $toolbarEl = $pageEl.parents('.views').children('.tabbar, .tabbar-icons');
     }
-
     if ($toolbarEl.length === 0) {
       return;
     }
-
     let previousScrollTop;
     let currentScrollTop;
     let scrollHeight;
@@ -106,22 +89,18 @@ const Toolbar = {
     let reachEnd;
     let action;
     let toolbarHidden;
-
     function handleScroll(e) {
       if ($pageEl.hasClass('page-with-card-opened')) return;
       if ($pageEl.hasClass('page-previous')) return;
       const scrollContent = this;
-
       if (e && e.target && e.target !== scrollContent) {
         return;
       }
-
       currentScrollTop = scrollContent.scrollTop;
       scrollHeight = scrollContent.scrollHeight;
       offsetHeight = scrollContent.offsetHeight;
       reachEnd = currentScrollTop + offsetHeight >= scrollHeight;
       toolbarHidden = $toolbarEl.hasClass('toolbar-hidden');
-
       if (reachEnd) {
         if (app.params.toolbar.showOnPageScrollEnd) {
           action = 'show';
@@ -137,7 +116,6 @@ const Toolbar = {
       } else {
         action = 'show';
       }
-
       if (action === 'show' && toolbarHidden) {
         app.toolbar.show($toolbarEl);
         toolbarHidden = false;
@@ -145,25 +123,20 @@ const Toolbar = {
         app.toolbar.hide($toolbarEl);
         toolbarHidden = true;
       }
-
       previousScrollTop = currentScrollTop;
     }
-
     $pageEl.on('scroll', '.page-content', handleScroll, true);
     $pageEl[0].f7ScrollToolbarHandler = handleScroll;
   }
-
 };
 export default {
   name: 'toolbar',
-
   create() {
     const app = this;
     bindMethods(app, {
       toolbar: Toolbar
     });
   },
-
   params: {
     toolbar: {
       hideOnPageScroll: false,
@@ -177,52 +150,42 @@ export default {
         page.$el.off('scroll', '.page-content', page.$el[0].f7ScrollToolbarHandler, true);
       }
     },
-
     pageBeforeIn(page) {
       const app = this;
       let $toolbarEl = page.$el.parents('.view').children('.toolbar');
-
       if ($toolbarEl.length === 0) {
-        $toolbarEl = page.$el.parents('.views').children('.tabbar, .tabbar-labels');
+        $toolbarEl = page.$el.parents('.views').children('.tabbar, .tabbar-icons');
       }
-
       if ($toolbarEl.length === 0) {
         $toolbarEl = page.$el.find('.toolbar');
       }
-
       if ($toolbarEl.length === 0) {
         return;
       }
-
       if (page.$el.hasClass('no-toolbar')) {
         app.toolbar.hide($toolbarEl);
       } else {
         app.toolbar.show($toolbarEl);
       }
     },
-
     pageInit(page) {
       const app = this;
-      page.$el.find('.tabbar, .tabbar-labels').each(tabbarEl => {
+      page.$el.find('.tabbar, .tabbar-icons').each(tabbarEl => {
         app.toolbar.init(tabbarEl);
       });
-
       if (app.params.toolbar.hideOnPageScroll || page.$el.find('.hide-toolbar-on-scroll').length || page.$el.hasClass('hide-toolbar-on-scroll') || page.$el.find('.hide-bars-on-scroll').length || page.$el.hasClass('hide-bars-on-scroll')) {
         if (page.$el.find('.keep-toolbar-on-scroll').length || page.$el.hasClass('keep-toolbar-on-scroll') || page.$el.find('.keep-bars-on-scroll').length || page.$el.hasClass('keep-bars-on-scroll')) {
           return;
         }
-
         app.toolbar.initToolbarOnScroll(page.el);
       }
     },
-
     init() {
       const app = this;
-      app.$el.find('.tabbar, .tabbar-labels').each(tabbarEl => {
+      app.$el.find('.tabbar, .tabbar-icons').each(tabbarEl => {
         app.toolbar.init(tabbarEl);
       });
     }
-
   },
   vnode: {
     tabbar: {
@@ -230,7 +193,6 @@ export default {
         const app = this;
         app.toolbar.init(vnode.elm);
       }
-
     }
   }
 };

package/components/toolbar/toolbar.less

@@ -11,7 +11,6 @@
   box-sizing: border-box;
   left: 0;
   height: var(--f7-toolbar-height);
-  background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
   background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
   color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
   font-size: var(--f7-toolbar-font-size);
@@ -31,6 +30,7 @@
     display: flex;
     line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
     height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
+    font-weight: var(--f7-toolbar-link-font-weight);
   }
   i.icon {
     display: block;
@@ -49,19 +49,16 @@
 }
 .toolbar-top,
 .ios .toolbar-top-ios,
-.md .toolbar-top-md,
-.aurora .toolbar-top-aurora {
+.md .toolbar-top-md {
   top: 0;
   .tab-link-highlight {
     bottom: 0;
   }
-  &.no-hairline,
-  &.no-border {
+  &.no-outline {
     &:after {
       display: none !important;
     }
   }
-  &.no-shadow,
   &.toolbar-hidden {
     &:before {
       display: none !important;
@@ -72,12 +69,10 @@
     backface-visibility: hidden;
   }
   .hairline(bottom, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
-  .bar-shadow-bottom(var(--f7-toolbar-top-shadow-image));
 }
 .toolbar-bottom,
 .ios .toolbar-bottom-ios,
-.md .toolbar-bottom-md,
-.aurora .toolbar-bottom-aurora {
+.md .toolbar-bottom-md {
   bottom: 0;
   height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
   .tab-link-highlight {
@@ -88,13 +83,11 @@
     top: 0;
     bottom: var(--f7-safe-area-bottom);
   }
-  &.no-hairline,
-  &.no-border {
+  &.no-outline {
     &:before {
       display: none !important;
     }
   }
-  &.no-shadow,
   &.toolbar-hidden {
     &:after {
       display: none !important;
@@ -102,7 +95,6 @@
   }
 
   .hairline(top, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
-  .bar-shadow-top(var(--f7-toolbar-bottom-shadow-image));
 }
 .toolbar-inner {
   position: absolute;
@@ -120,7 +112,7 @@
     calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
 }
 .tabbar,
-.tabbar-labels {
+.tabbar-icons {
   .views > & {
     z-index: 5001;
   }
@@ -153,7 +145,10 @@
     height: var(--f7-tabbar-icon-size);
     line-height: var(--f7-tabbar-icon-size);
   }
-  .tab-link-highlight {
+  .md &.tabbar-icons .tab-link-highlight {
+    display: none;
+  }
+  .md &:not(.tabbar-icons) .tab-link-highlight {
     position: absolute;
     left: 0;
     height: 2px;
@@ -167,12 +162,12 @@
     });
   }
 }
-.tabbar-labels {
-  --f7-toolbar-height: var(--f7-tabbar-labels-height);
+.tabbar-icons {
+  --f7-toolbar-height: var(--f7-tabbar-icons-height);
   .tab-link,
   .link {
     height: 100%;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
   }
   .tabbar-label {
@@ -190,7 +185,7 @@
 }
 @media (min-width: 768px) and (min-height: 600px) {
   :root {
-    --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
+    --f7-tabbar-icons-height: var(--f7-tabbar-icons-tablet-height);
     --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
   }
 }
@@ -222,38 +217,34 @@
 // Relation with page
 .toolbar-bottom,
 .ios .toolbar-bottom-ios,
-.md .toolbar-bottom-md,
-.aurora .toolbar-bottom-aurora {
+.md .toolbar-bottom-md {
   ~ * {
     --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
   }
-  &.tabbar-labels ~ * {
-    --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
+  &.tabbar-icons ~ * {
+    --f7-page-toolbar-bottom-offset: var(--f7-tabbar-icons-height);
   }
 }
 .toolbar-bottom,
 .ios .toolbar-bottom-ios,
-.md .toolbar-bottom-md,
-.aurora .toolbar-bottom-aurora {
+.md .toolbar-bottom-md {
   &.toolbar-hidden {
     transform: translate3d(0, 100%, 0);
   }
 }
 .toolbar-top,
 .ios .toolbar-top-ios,
-.md .toolbar-top-md,
-.aurora .toolbar-top-aurora {
+.md .toolbar-top-md {
   ~ * {
     --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
   }
-  &.tabbar-labels ~ * {
-    --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
+  &.tabbar-icons ~ * {
+    --f7-page-toolbar-top-offset: var(--f7-tabbar-icons-height);
   }
 }
 .toolbar-top,
 .ios .toolbar-top-ios,
-.md .toolbar-top-md,
-.aurora .toolbar-top-aurora {
+.md .toolbar-top-md {
   &.toolbar-hidden {
     transform: translate3d(0, -100%, 0);
   }
@@ -264,19 +255,16 @@
 .ios .navbar ~ .toolbar-top-ios,
 .ios .navbars ~ .toolbar-top-ios,
 .md .navbar ~ .toolbar-top-md,
-.aurora .navbar ~ .toolbar-top-aurora,
 .navbar ~ * .toolbar-top,
 .navbars ~ * .toolbar-top,
 .ios .navbar ~ * .toolbar-top-ios,
 .ios .navbars ~ * .toolbar-top-ios,
 .md .navbar ~ * .toolbar-top-md,
-.aurora .navbar ~ * .toolbar-top-aurora,
 .navbar ~ .page:not(.no-navbar) .toolbar-top,
 .navbars ~ .page:not(.no-navbar) .toolbar-top,
 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
 .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
-.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
-.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
+.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md {
   top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
   &.toolbar-hidden {
     transform: translate3d(
@@ -284,11 +272,11 @@
       calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))),
       0
     );
-    &.tabbar-labels {
+    &.tabbar-icons {
       transform: translate3d(
         0,
         calc(
-          -1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top))
+          -1 * (var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))
         ),
         0
       );
@@ -298,11 +286,9 @@
 .navbar-hidden + .toolbar-top:not(.toolbar-hidden),
 .ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
 .md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
-.aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
 .navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
 .ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
-.md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
-.aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
+.md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
   transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0);
 }
 .navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
@@ -310,8 +296,7 @@
 .md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
 .navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
 .ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
-.md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
-.aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
+.md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
   transform: translate3d(
     0,
     calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)),
@@ -325,6 +310,3 @@
 .if-md-theme({
   @import './toolbar-md.less';
 });
-.if-aurora-theme({
-  @import './toolbar-aurora.less';
-});