Skip to content

feat: add css support for tabs widget #7491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
manoldonev merged 1 commit into from
Jul 10, 2019
Merged

feat: add css support for tabs widget #7491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions e2e/ui-tests-app/app/tabs/background-color-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
18 changes: 9 additions & 9 deletions e2e/ui-tests-app/app/tabs/background-color-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
19 changes: 19 additions & 0 deletions e2e/ui-tests-app/app/tabs/color-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
Tabs {
color: gold;
}

TabContentItem.special {
color: olive;
}

TabStrip {
color: skyblue;
}

TabStripItem.special {
color: teal;
}

TabStripItem.special:active {
color: yellowgreen;
}
21 changes: 11 additions & 10 deletions e2e/ui-tests-app/app/tabs/color-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 19 additions & 0 deletions e2e/ui-tests-app/app/tabs/font-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
24 changes: 24 additions & 0 deletions e2e/ui-tests-app/app/tabs/font-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions e2e/ui-tests-app/app/tabs/highlight-color-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
TabStrip {
highlight-color: crimson;
}
24 changes: 24 additions & 0 deletions e2e/ui-tests-app/app/tabs/highlight-color-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 8 additions & 5 deletions e2e/ui-tests-app/app/tabs/main-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
19 changes: 19 additions & 0 deletions e2e/ui-tests-app/app/tabs/text-transform-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
24 changes: 24 additions & 0 deletions e2e/ui-tests-app/app/tabs/text-transform-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 15 additions & 0 deletions ...ore-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabLayout.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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();
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
}
Expand Down
36 changes: 36 additions & 0 deletions tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
26 changes: 26 additions & 0 deletions tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions tns-core-modules/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Loading