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

nolimits4web · nolimits4web · commit 3a141ad8cb1c · 2021-12-13T15:39:14.000+03:00
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);

Original file line number	Diff line number	Diff line change
`@@ -202,11 +202,13 @@ const Tab = {`
`202`	`202`	`if ($tabLinkEl && $tabLinkEl.length > 0) {`
`203`	`203`	`$tabLinkEl.addClass('tab-link-active');`
`204`	`204`	`// Material Highlight`
`205`		`- if (app.theme !== 'ios' && app.toolbar) {`
`206`		`- const $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels');`
`207`		`- if ($tabbarEl.length > 0) {`
`208`		`- app.toolbar.setHighlight($tabbarEl);`
`209`		`- }`
	`205`	`+ const $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels');`
	`206`	`+ const hasHighlight =`
	`207`	`+ app.toolbar &&`
	`208`	`+ $tabbarEl.length > 0 &&`
	`209`	`+ ($tabbarEl.hasClass('tabbar-highlight') \|\| app.theme !== 'ios');`
	`210`	`+ if (hasHighlight) {`
	`211`	`+ app.toolbar.setHighlight($tabbarEl);`
`210`	`212`	`}`
`211`	`213`	`}`
`212`	`214`	`}`