feat(tabbar): allow tabbar to have highlight in iOS theme with extra …

…`tabbar-highlight` class
framework7io · Dec 13, 2021 · 3a141ad · 3a141ad
1 parent 8e89a6a
commit 3a141ad
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 33 deletions.
diff --git a/src/core/components/tabs/tabs.js b/src/core/components/tabs/tabs.js
@@ -202,11 +202,13 @@ const Tab = {
       if ($tabLinkEl && $tabLinkEl.length > 0) {
         $tabLinkEl.addClass('tab-link-active');
         // Material Highlight
-        if (app.theme !== 'ios' && app.toolbar) {
-          const $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels');
-          if ($tabbarEl.length > 0) {
-            app.toolbar.setHighlight($tabbarEl);
-          }
+        const $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels');
+        const hasHighlight =
+          app.toolbar &&
+          $tabbarEl.length > 0 &&
+          ($tabbarEl.hasClass('tabbar-highlight') || app.theme !== 'ios');
+        if (hasHighlight) {
+          app.toolbar.setHighlight($tabbarEl);
         }
       }
     }

diff --git a/src/core/components/toolbar/toolbar-aurora.less b/src/core/components/toolbar/toolbar-aurora.less
@@ -10,19 +10,6 @@
   }
   .tabbar,
   .tabbar-labels {
-    .tab-link-highlight {
-      position: absolute;
-      left: 0;
-      height: 2px;
-      background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
-      transition-duration: 300ms;
-      .ltr({
-        left: 0;
-      });
-      .rtl({
-        right: 0;
-      });
-    }
     .toolbar-inner {
       padding-left: 0;
       padding-right: 0;

diff --git a/src/core/components/toolbar/toolbar-md.less b/src/core/components/toolbar/toolbar-md.less
@@ -26,19 +26,6 @@
       overflow: hidden;
       position: relative;
     }
-    .tab-link-highlight {
-      position: absolute;
-      left: 0;
-      height: 2px;
-      background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
-      transition-duration: 300ms;
-      .ltr({
-        left: 0;
-      });
-      .rtl({
-        right: 0;
-      });
-    }
   }
 
   .tabbar-labels {

diff --git a/src/core/components/toolbar/toolbar.js b/src/core/components/toolbar/toolbar.js
@@ -4,9 +4,8 @@ import { nextFrame, bindMethods } from '../../shared/utils';
 const Toolbar = {
   setHighlight(tabbarEl) {
     const app = this;
-    if (app.theme === 'ios') return;
-
     const $tabbarEl = $(tabbarEl);
+    if (app.theme === 'ios' && !$tabbarEl.hasClass('tabbar-highlight')) return;
 
     if (
       $tabbarEl.length === 0 ||

diff --git a/src/core/components/toolbar/toolbar.less b/src/core/components/toolbar/toolbar.less
@@ -153,6 +153,19 @@
     height: var(--f7-tabbar-icon-size);
     line-height: var(--f7-tabbar-icon-size);
   }
+  .tab-link-highlight {
+    position: absolute;
+    left: 0;
+    height: 2px;
+    background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
+    transition-duration: 300ms;
+    .ltr({
+      left: 0;
+    });
+    .rtl({
+      right: 0;
+    });
+  }
 }
 .tabbar-labels {
   --f7-toolbar-height: var(--f7-tabbar-labels-height);