Skip to content

feat: flexbile font icon usage in tab navigation #7672

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
MartoYankov merged 10 commits into from
Aug 15, 2019
Merged

feat: flexbile font icon usage in tab navigation #7672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f5cc51e
wip: support font icons from image element
MartoYankov Aug 2, 2019
327c761
wip: add bottom navigation custom font icons
MartoYankov Aug 6, 2019
ae894bb
wip: implement color for all tabs
MartoYankov Aug 7, 2019
4e16c03
chore: merge master
MartoYankov Aug 8, 2019
ef6c6eb
wip: implement listeners for nested label
MartoYankov Aug 9, 2019
915125b
wip: add title getter and setter
MartoYankov Aug 10, 2019
143ac8d
wip: remove additional listeners
MartoYankov Aug 12, 2019
e40783b
wip: fix dep version tags
MartoYankov Aug 12, 2019
38a1b66
wip: fix tabstrip items binding
MartoYankov Aug 15, 2019
e440eeb
wip: remove default white color for tabcontentitem
MartoYankov Aug 15, 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
8 changes: 8 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
Expand Up @@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active {
color: yellowgreen;
}

TabStripItem.nested Label {
color: teal;
}

TabStripItem.nested:active Label {
color: yellowgreen;
}
15 changes: 12 additions & 3 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
Expand Up @@ -3,10 +3,13 @@
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
</ActionBar>

<BottomNavigation style="color: green;" automationText="tabNavigation" >
<BottomNavigation automationText="tabNavigation">
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip>

<TabContentItem class="special">
Expand All @@ -20,5 +23,11 @@
<Label text="Second View" />
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>
34 changes: 31 additions & 3 deletions e2e/ui-tests-app/app/bottom-navigation/font-icons-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,34 @@
font-size: 36;
}

.color {
color: blue;
}
TabStrip {
color: mediumvioletred;
}

TabStripItem {
color: skyblue;
}

TabStripItem:active {
color: darkblue;
}

TabStripItem.special Image {
color: lightgreen;
}

TabStripItem.special:active Image {
color: darkgreen;
}

TabStripItem.special Label {
color: gold;
}

TabStripItem.special:active Label {
color: darkgoldenrod;
}

TabStripItem:active .font-size {
font-size: 10;
}
57 changes: 43 additions & 14 deletions e2e/ui-tests-app/app/bottom-navigation/font-icons-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,61 @@
<ActionBar title="BottomNavigation font icons" icon="" class="action-bar">
</ActionBar>

<BottomNavigation class="font-awesome" automationText="tabNavigation" > <!-- TODO: The font-awesome class here should be removed -->
<BottomNavigation automationText="tabNavigation" >
<TabStrip>
<!-- font family + font size + color -->
<TabStripItem title="First" iconSource="font://&#xF10B;" class="special font-awesome font-size color"></TabStripItem>
<!-- font family + font size + color -->
<TabStripItem class="special">
<Label text="All Set"/>
<Image src="font://&#xF10B;" class="font-awesome font-size" />
</TabStripItem>

<!-- default font + valid char code -->
<TabStripItem title="Second" iconSource="font://&#xF10B;"></TabStripItem>
<TabStripItem>
<Label text="Invalid Font" />
<Image src="font://&#xF10B;" />
</TabStripItem>

<!-- font family + invalid char code -->
<TabStripItem title="Third" iconSource="font://&#xF556;" class="font-awesome font-size"></TabStripItem>
<TabStripItem>
<Label text="Invalid Char" />
<Image src="font://&#xF556;" class="font-awesome font-size"/>
</TabStripItem>
</TabStrip>

<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
<StackLayout>
<Label text="char code: phone" />
<Label text="font: Font Awesome" />
<Label text="font size: 36" />
<Label text="icon color inactive: lightgreen" />
<Label text="icon color active: darkgreen" />
<Label text="title color inactive: gold" />
<Label text="title color active: darkgoldenrod" />
</StackLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
<StackLayout>
<Label text="char code: phone" />
<Label text="font: default/invalid" />
<Label text="font size: default" />
<Label text="icon color inactive: skyblue" />
<Label text="icon color active: darkblue" />
<Label text="title color inactive: skyblue" />
<Label text="title color active: darkblue" />
</StackLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
<StackLayout>
<Label text="char code: invalid" />
<Label text="font: Font Awesome" />
<Label text="font size: 36" />
<Label text="icon color inactive: skyblue" />
<Label text="icon color active: darkblue" />
<Label text="title color inactive: skyblue" />
<Label text="title color active: darkblue" />
</StackLayout>
</TabContentItem>
</BottomNavigation>
</Page>
8 changes: 8 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
Expand Up @@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active {
font: 16 monospace;
}

TabStripItem.nested Label {
font: 12 monospace;
}

TabStripItem.nested:active Label {
font: 16 monospace;
}
17 changes: 13 additions & 4 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
@@ -1,12 +1,15 @@
<Page class="page">

<ActionBar title="BottomNavigation FONT" icon="" class="action-bar">
<ActionBar title="BottomNavigation font" class="action-bar">
</ActionBar>

<BottomNavigation automationText="tabNavigation" >
<BottomNavigation automationText="tabNavigation">
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip>

<TabContentItem class="special">
Expand All @@ -20,5 +23,11 @@
<Label text="Second View" />
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>
2 changes: 2 additions & 0 deletions e2e/ui-tests-app/app/bottom-navigation/icon-change-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const newItem = bottomNav.tabStrip.items[args.newIndex];
if (newItem) {
newItem.iconSource = "res://icon";
newItem.title = "selected";
}

const oldItem = bottomNav.tabStrip.items[args.oldIndex];
if (oldItem) {
oldItem.iconSource = "res://testlogo";
oldItem.title = "unselected";
}
}
4 changes: 2 additions & 2 deletions e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@

<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" >
<TabStrip>
<TabStripItem iconSource="res://icon"></TabStripItem>
<TabStripItem iconSource="res://testlogo"></TabStripItem>
<TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
<TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
</TabStrip>

<TabContentItem>
Expand Down
8 changes: 8 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
Expand Up @@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active {
text-transform: uppercase;
}

TabStripItem.nested Label {
text-transform: lowercase;
}

TabStripItem.nested:active Label {
text-transform: uppercase;
}
13 changes: 11 additions & 2 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
@@ -1,12 +1,15 @@
<Page class="page">

<ActionBar title="BottomNavigation Text Transform" icon="" class="action-bar">
<ActionBar title="BottomNavigation text-transform" class="action-bar">
</ActionBar>

<BottomNavigation automationText="tabNavigation" >
<BottomNavigation automationText="tabNavigation">
<TabStrip>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip>

<TabContentItem class="special">
Expand All @@ -20,5 +23,11 @@
<Label text="Second View" />
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>
8 changes: 8 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
Expand Up @@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active {
color: yellowgreen;
}

TabStripItem.nested Label {
color: teal;
}

TabStripItem.nested:active Label {
color: yellowgreen;
}
17 changes: 13 additions & 4 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,12 +1,15 @@
<Page class="page">

<ActionBar title="Tabs color" icon="" class="action-bar">
<ActionBar title="Tabs color" class="action-bar">
</ActionBar>

<Tabs automationText="tabNavigation" >
<Tabs automationText="tabNavigation">
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip>

<TabContentItem class="special">
Expand All @@ -20,5 +23,11 @@
<Label text="Second View" />
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>
34 changes: 31 additions & 3 deletions e2e/ui-tests-app/app/tabs/font-icons-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,34 @@
font-size: 36;
}

.color {
color: blue;
}
TabStrip {
color: mediumvioletred;
}

TabStripItem {
color: skyblue;
}

TabStripItem:active {
color: darkblue;
}

TabStripItem.special Image {
color: lightgreen;
}

TabStripItem.special:active Image {
color: darkgreen;
}

TabStripItem.special Label {
color: gold;
}

TabStripItem.special:active Label {
color: darkgoldenrod;
}

TabStripItem:active .font-size {
font-size: 10;
}
Loading