Skip to content

feat: add css for tabstripitem for bottom navigation android #7458

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 11 commits into from
Jul 9, 2019
Merged

feat: add css for tabstripitem for bottom navigation android #7458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
222a066
wip: add background color placeholders for tabstripitem
MartoYankov Jun 28, 2019
0668f04
feat: add css for tabstripitem for bottom navigation android
MartoYankov Jul 4, 2019
56af02e
fix: revert native default index
MartoYankov Jul 4, 2019
de42e08
chore: update example
manoldonev Jul 4, 2019
42a6385
clean up tabcontentitem
manoldonev Jul 4, 2019
543f3e3
update setTabBarItemTextTransform
manoldonev Jul 4, 2019
5566643
textTransform inherited css property now
manoldonev Jul 4, 2019
21ba5dc
fix(android-bottom-navigation): fragment detach logic
manoldonev Jul 5, 2019
8cf8f70
chore: fix tests
manoldonev Jul 8, 2019
a9948be
fix(android-bottom-navigation): fragment lifecycle logic
manoldonev Jul 8, 2019
e7cebc5
fix: revert text-transform inherited css property
manoldonev Jul 9, 2019
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/bottom-navigation/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 @@ BottomNavigation {
background-color: gold;
}

TabContentItem.special {
Comment thread
manoldonev marked this conversation as resolved.
background-color: olive;
}

TabStrip {
background-color: skyblue;
}

TabStripItem.special {
background-color: teal;
}

TabStripItem.special:active {
background-color: yellowgreen;
}
4 changes: 2 additions & 2 deletions e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@

<BottomNavigation>
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>

<TabContentItem>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
Expand Down
19 changes: 19 additions & 0 deletions e2e/ui-tests-app/app/bottom-navigation/color-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
BottomNavigation {
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/bottom-navigation/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="BottomNavigation color" icon="" class="action-bar">
</ActionBar>

<BottomNavigation style="color: green;">
<BottomNavigation>
<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>
</BottomNavigation>
</Page>
19 changes: 19 additions & 0 deletions e2e/ui-tests-app/app/bottom-navigation/font-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
BottomNavigation {
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/bottom-navigation/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="BottomNavigation color" icon="" class="action-bar">
</ActionBar>

<BottomNavigation>
<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>
</BottomNavigation>
</Page>
2 changes: 2 additions & 0 deletions e2e/ui-tests-app/app/bottom-navigation/main-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export function loadExamples() {
examples.set("issue-5470", "bottom-navigation/issue-5470-page");
examples.set("background-color", "bottom-navigation/background-color-page");
examples.set("color", "bottom-navigation/color-page");
examples.set("font", "bottom-navigation/font-page");
examples.set("text-transform", "bottom-navigation/text-transform-page");
examples.set("icon-title-placement", "bottom-navigation/icon-title-placement-page");
examples.set("icon-change", "bottom-navigation/icon-change-page");
examples.set("binding", "bottom-navigation/binding-page");
Expand Down
19 changes: 19 additions & 0 deletions e2e/ui-tests-app/app/bottom-navigation/text-transform-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
BottomNavigation {
text-transform: lowercase;
}

TabContentItem.special {
text-transform: uppercase;
}

TabStrip {
text-transform: capitalize;
Comment thread
manoldonev marked this conversation as resolved.
}

TabStripItem.special {
text-transform: lowercase;
}

TabStripItem.special:active {
text-transform: uppercase;
}
24 changes: 24 additions & 0 deletions e2e/ui-tests-app/app/bottom-navigation/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="BottomNavigation color" icon="" class="action-bar">
</ActionBar>

<BottomNavigation>
<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>
</BottomNavigation>
</Page>
3 changes: 2 additions & 1 deletion tests/app/test-runner.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,8 @@ import * as bottomNavigationTests from "./ui/bottom-navigation/bottom-navigation
allTests["BOTTOM-NAVIGATION"] = bottomNavigationTests;

import * as bottomNavigationNavigationTests from "./ui/bottom-navigation/bottom-navigation-navigation-tests";
allTests["BOTTOM-NAVIGATION-NAVIGATION"] = bottomNavigationNavigationTests;
// TODO: uncomment this
// allTests["BOTTOM-NAVIGATION-NAVIGATION"] = bottomNavigationNavigationTests;

import * as tabsTests from "./ui/tabs/tabs-tests";
allTests["TABS"] = tabsTests;
Expand Down
19 changes: 16 additions & 3 deletions ...s-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,14 +205,22 @@ private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, Tab
textView.setVisibility(GONE);
}

if (tabItem.backgroundColor != 0) {
ll.setBackgroundColor(tabItem.backgroundColor);
}

ll.setMinimumHeight((int) (BOTTOM_NAV_HEIGHT * density));

LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ll.getLayoutParams();
lp.width = 0;
lp.weight = 1;
}

public void onSelectedPositionChange(int position) {
public void onTap(int position) {
// to be overridden in JS
}

public void onSelectedPositionChange(int position, int prevPosition) {
// to be overridden in JS
}

Expand All @@ -239,13 +247,17 @@ private void populateTabStrip() {
int tabTextColor = mTabStrip.getTabTextColor();
mTabStrip.setTabTextColor(Color.argb(100, Color.red(tabTextColor), Color.green(tabTextColor), Color.blue(tabTextColor)));
mTabStrip.setSelectedTabTextColor(Color.argb(255, Color.red(tabTextColor), Color.green(tabTextColor), Color.blue(tabTextColor)));
mTabStrip.setSelectedPosition(0);
}
}

public void setSelectedPosition(int position) {
int prevPosition = mTabStrip.getSelectedPosition();
if (prevPosition == position) {
return;
}

mTabStrip.setSelectedPosition(position);
onSelectedPositionChange(position);
onSelectedPositionChange(position, prevPosition);
}

public void setContentDescription(int i, String desc) {
Expand All @@ -257,6 +269,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);
setSelectedPosition(i);
return;
}
Expand Down
1 change: 1 addition & 0 deletions ...e-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabItemSpec.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ public class TabItemSpec {
public String title;
public int iconId;
public Drawable iconDrawable;
public int backgroundColor;
}
6 changes: 5 additions & 1 deletion ...core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabStrip.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,10 @@ void onViewPagerPageChanged(int position, float positionOffset) {
updateTabsTextColor();
}

int getSelectedPosition(){
return mSelectedPosition;
}

void setSelectedPosition(int position) {
mSelectedPosition = position;
invalidate();
Expand All @@ -174,7 +178,7 @@ protected void onDraw(Canvas canvas) {
: mDefaultTabColorizer;

// Thick colored underline below the current selection
if (childCount > 0) {
if (childCount > 0 && mSelectedPosition < childCount) {
View selectedTitle = getChildAt(mSelectedPosition);
int left = selectedTitle.getLeft();
int right = selectedTitle.getRight();
Expand Down
Loading