feat: add css support for tabs widget (#7491)

MartoYankov · manoldonev · commit 30fc58542515 · 2019-07-10T19:22:55.000+03:00
diff --git a/e2e/ui-tests-app/app/tabs/background-color-page.css b/e2e/ui-tests-app/app/tabs/background-color-page.css
@@ -2,6 +2,18 @@ Tabs {
   background-color: gold;
 }
 
+TabContentItem.special {
+  background-color: olive;
+}
+
 TabStrip {
   background-color: skyblue;
+}
+
+TabStripItem.special {
+  background-color: teal;
+}
+
+TabStripItem.special:active {
+  background-color: yellowgreen;
 }
diff --git a/e2e/ui-tests-app/app/tabs/background-color-page.xml b/e2e/ui-tests-app/app/tabs/background-color-page.xml
@@ -5,20 +5,20 @@
 
   <Tabs>
     <TabStrip>
-      <TabStripItem title="First"></TabStripItem>
-      <TabStripItem title="Second"></TabStripItem>
+        <TabStripItem title="First" class="special"></TabStripItem>
+        <TabStripItem title="Second"></TabStripItem>
     </TabStrip>
 
-    <TabContentItem>
-      <GridLayout>
-        <Label text="First View" />
-      </GridLayout>
+    <TabContentItem class="special">
+        <GridLayout>
+          <Label text="First View" />
+        </GridLayout>
     </TabContentItem>
 
     <TabContentItem>
-      <GridLayout>
-        <Label text="Second View" />
-      </GridLayout>
+        <GridLayout>
+          <Label text="Second View" />
+        </GridLayout>
     </TabContentItem>
   </Tabs>
 </Page>
diff --git a/e2e/ui-tests-app/app/tabs/color-page.css b/e2e/ui-tests-app/app/tabs/color-page.css
@@ -0,0 +1,19 @@
+Tabs {
+  color: gold;
+}
+
+TabContentItem.special {
+  color: olive;
+}
+
+TabStrip {
+  color: skyblue;
+}
+
+TabStripItem.special {
+  color: teal;
+}
+
+TabStripItem.special:active {
+  color: yellowgreen;
+}
diff --git a/e2e/ui-tests-app/app/tabs/color-page.xml b/e2e/ui-tests-app/app/tabs/color-page.xml
@@ -1,23 +1,24 @@
 <Page class="page">
+
   <ActionBar title="Tabs color" icon="" class="action-bar">
   </ActionBar>
 
-  <Tabs style="color: green;">
+  <Tabs>
     <TabStrip>
-      <TabStripItem title="First"></TabStripItem>
-      <TabStripItem title="Second"></TabStripItem>
+        <TabStripItem title="First" class="special"></TabStripItem>
+        <TabStripItem title="Second"></TabStripItem>
     </TabStrip>
 
-    <TabContentItem>
-      <GridLayout>
-        <Label text="First View" />
-      </GridLayout>
+    <TabContentItem class="special">
+        <GridLayout>
+          <Label text="First View" />
+        </GridLayout>
     </TabContentItem>
 
     <TabContentItem>
-      <GridLayout>
-        <Label text="Second View" />
-      </GridLayout>
+        <GridLayout>
+          <Label text="Second View" />
+        </GridLayout>
     </TabContentItem>
   </Tabs>
 </Page>
diff --git a/e2e/ui-tests-app/app/tabs/font-page.css b/e2e/ui-tests-app/app/tabs/font-page.css
@@ -0,0 +1,19 @@
+Tabs {
+  font: 24 'Times New Roman', Times, serif;
+}
+
+TabContentItem.special {
+  font: italic bold 12 Georgia, serif;
+}
+
+TabStrip {
+  font: 15 arial, sans-serif;
+}
+
+TabStripItem.special {
+  font: 12 monospace;
+}
+
+TabStripItem.special:active {
+  font: 16 monospace;
+}
diff --git a/e2e/ui-tests-app/app/tabs/font-page.xml b/e2e/ui-tests-app/app/tabs/font-page.xml
@@ -0,0 +1,24 @@
+<Page class="page">
+
+  <ActionBar title="Tabs font" icon="" class="action-bar">
+  </ActionBar>
+
+  <Tabs>
+    <TabStrip>
+        <TabStripItem title="First" class="special"></TabStripItem>
+        <TabStripItem title="Second"></TabStripItem>
+    </TabStrip>
+
+    <TabContentItem class="special">
+        <GridLayout>
+          <Label text="First View" />
+        </GridLayout>
+    </TabContentItem>
+
+    <TabContentItem>
+        <GridLayout>
+          <Label text="Second View" />
+        </GridLayout>
+    </TabContentItem>
+  </Tabs>
+</Page>
diff --git a/e2e/ui-tests-app/app/tabs/highlight-color-page.css b/e2e/ui-tests-app/app/tabs/highlight-color-page.css
@@ -0,0 +1,3 @@
+TabStrip {
+  highlight-color: crimson;
+}
diff --git a/e2e/ui-tests-app/app/tabs/highlight-color-page.xml b/e2e/ui-tests-app/app/tabs/highlight-color-page.xml
@@ -0,0 +1,24 @@
+<Page class="page">
+
+  <ActionBar title="Tabs highlight-color" icon="" class="action-bar">
+  </ActionBar>
+
+  <Tabs>
+    <TabStrip>
+        <TabStripItem title="First" class="special"></TabStripItem>
+        <TabStripItem title="Second"></TabStripItem>
+    </TabStrip>
+
+    <TabContentItem class="special">
+        <GridLayout>
+          <Label text="First View" />
+        </GridLayout>
+    </TabContentItem>
+
+    <TabContentItem>
+        <GridLayout>
+          <Label text="Second View" />
+        </GridLayout>
+    </TabContentItem>
+  </Tabs>
+</Page>
diff --git a/e2e/ui-tests-app/app/tabs/main-page.ts b/e2e/ui-tests-app/app/tabs/main-page.ts
@@ -13,12 +13,15 @@ export function pageLoaded(args: EventData) {
 export function loadExamples() {
     const examples = new Map<string, string>();
     examples.set("tabs", "tabs/tabs-page");
-    examples.set("issue-5470", "tabs/issue-5470");
+    examples.set("issue-5470", "tabs/issue-5470-page");
     examples.set("background-color", "tabs/background-color-page");
-    examples.set("color", "tabs/color");
-    examples.set("icon-title-placement", "tabs/icon-title-placement");
-    examples.set("icon-change", "tabs/icon-change");
-    examples.set("swipe-enabled", "tabs/swipe-enabled");
+    examples.set("color", "tabs/color-page");
+    examples.set("font", "tabs/font-page");
+    examples.set("text-transform", "tabs/text-transform-page");
+    examples.set("highlight-color", "tabs/highlight-color-page");
+    examples.set("icon-title-placement", "tabs/icon-title-placement-page");
+    examples.set("icon-change", "tabs/icon-change-page");
+    examples.set("swipe-enabled", "tabs/swipe-enabled-page");
     examples.set("strip-item", "tabs/tab-strip-item-page");
     examples.set("strip-items", "tabs/tab-strip-items-page");
     examples.set("tabs-position", "tabs/tabs-position-page");
diff --git a/e2e/ui-tests-app/app/tabs/text-transform-page.css b/e2e/ui-tests-app/app/tabs/text-transform-page.css
@@ -0,0 +1,19 @@
+Tabs {
+  text-transform: lowercase;
+}
+
+TabContentItem.special {
+  text-transform: uppercase;
+}
+
+TabStrip {
+  text-transform: capitalize;
+}
+
+TabStripItem.special {
+  text-transform: lowercase;
+}
+
+TabStripItem.special:active {
+  text-transform: uppercase;
+}
diff --git a/e2e/ui-tests-app/app/tabs/text-transform-page.xml b/e2e/ui-tests-app/app/tabs/text-transform-page.xml
@@ -0,0 +1,24 @@
+<Page class="page">
+
+  <ActionBar title="Tabs text-transform" icon="" class="action-bar">
+  </ActionBar>
+
+  <Tabs>
+    <TabStrip>
+        <TabStripItem title="first" class="special"></TabStripItem>
+        <TabStripItem title="second"></TabStripItem>
+    </TabStrip>
+
+    <TabContentItem class="special">
+        <GridLayout>
+          <Label text="First View" />
+        </GridLayout>
+    </TabContentItem>
+
+    <TabContentItem>
+        <GridLayout>
+          <Label text="Second View" />
+        </GridLayout>
+    </TabContentItem>
+  </Tabs>
+</Page>
diff --git a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabLayout.java b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabLayout.java
@@ -284,6 +284,10 @@ private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, Tab
             textView.setVisibility(GONE);
         }
 
+        if (tabItem.backgroundColor != 0) {
+            ll.setBackgroundColor(tabItem.backgroundColor);
+        }
+
         if (imgView.getVisibility() == VISIBLE && textView.getVisibility() == VISIBLE) {
             ll.setMinimumHeight((int) (LARGE_MIN_HEIGHT * density));
         } else {
@@ -297,6 +301,14 @@ private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, Tab
         }
     }
 
+    public void onTap(int position) {
+        // to be overridden in JS
+    }
+
+    public void onSelectedPositionChange(int position, int prevPosition) {
+        // to be overridden in JS
+    }
+
     private void populateTabStrip() {
         final PagerAdapter adapter = mViewPager.getAdapter();
         final OnClickListener tabClickListener = new TabClickListener();
@@ -370,6 +382,8 @@ public void onPageScrolled(int position, float positionOffset, int positionOffse
                 return;
             }
 
+            int prevPosition = mTabStrip.getSelectedPosition();
+            onSelectedPositionChange(position, prevPosition);
             mTabStrip.onViewPagerPageChanged(position, positionOffset);
 
             View selectedTitle = mTabStrip.getChildAt(position);
@@ -411,6 +425,7 @@ private class TabClickListener implements OnClickListener {
         public void onClick(View v) {
             for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                 if (v == mTabStrip.getChildAt(i)) {
+                    onTap(i);
                     mViewPager.setCurrentItem(i);
                     return;
                 }
diff --git a/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts b/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts
@@ -108,6 +108,42 @@ export class TabNavigationBase extends View {
      */
     setTabBarColor(value: any): void
 
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    getTabBarFontInternal(): any
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    setTabBarFontInternal(value: any): void
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    getTabBarTextTransform(): any
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    setTabBarTextTransform(value: any): void
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    getTabBarHighlightColor(): any
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    setTabBarHighlightColor(value: any)
+
     /**
      * @private
      * Method is intended to be overridden by inheritors and used as "protected"
diff --git a/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts b/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
@@ -119,6 +119,32 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
         // overridden by inheritors
     }
 
+    public getTabBarFontInternal(): any {
+        // overridden by inheritors
+        return null;
+    }
+
+    public setTabBarFontInternal(value: any): void {
+        // overridden by inheritors
+    }
+
+    public getTabBarTextTransform(): any {
+        // overridden by inheritors
+        return null;
+    }
+
+    public setTabBarTextTransform(value: any): void {
+        // overridden by inheritors
+    }
+
+    public getTabBarHighlightColor(): any {
+        // overridden by inheritors
+    }
+
+    public setTabBarHighlightColor(value: any) {
+        // overridden by inheritors
+    }
+
     public getTabBarColor(): any {
         // overridden by inheritors
         return null;
diff --git a/tns-core-modules/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts b/tns-core-modules/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts
@@ -139,13 +139,13 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
         return tabStripParent && tabStripParent.setTabBarItemFontInternal(this, value);
     }
 
-    [textTransformProperty.getDefault](): "default" {
+    [textTransformProperty.getDefault](): any {
         const parent = <TabStrip>this.parent;
         const tabStripParent = parent && <TabNavigationBase>parent.parent;
 
         return tabStripParent && tabStripParent.getTabBarItemTextTransform(this);
     }
-    [textTransformProperty.setNative](value: TextTransform | "default") {
+    [textTransformProperty.setNative](value: any) {
         const parent = <TabStrip>this.parent;
         const tabStripParent = parent && <TabNavigationBase>parent.parent;
         
diff --git a/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts b/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts
diff --git a/tns-core-modules/ui/tabs/tabs-common.ts b/tns-core-modules/ui/tabs/tabs-common.ts
diff --git a/tns-core-modules/ui/tabs/tabs.android.ts b/tns-core-modules/ui/tabs/tabs.android.ts
diff --git a/tns-core-modules/ui/tabs/tabs.ios.ts b/tns-core-modules/ui/tabs/tabs.ios.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+TabStrip {`
	`2`	`+ highlight-color: crimson;`
	`3`	`+}`