Skip to content

Commit c0b8db4

Browse files
MartoYankovMartoYankov
authored
feat: flexbile font icon usage in tab navigation (#7672)
1 parent 4d76fc6 commit c0b8db4

34 files changed

Lines changed: 725 additions & 344 deletions

‎e2e/ui-tests-app/app/bottom-navigation/color-page.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,11 @@ TabStripItem.special {
1717
TabStripItem.special:active {
1818
color: yellowgreen;
1919
}
20+
21+
TabStripItem.nested Label {
22+
color: teal;
23+
}
24+
25+
TabStripItem.nested:active Label {
26+
color: yellowgreen;
27+
}

‎e2e/ui-tests-app/app/bottom-navigation/color-page.xml‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@
33
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
44
</ActionBar>
55

6-
<BottomNavigation style="color: green;" automationText="tabNavigation" >
6+
<BottomNavigation automationText="tabNavigation">
77
<TabStrip>
8-
<TabStripItem title="First" class="special"></TabStripItem>
9-
<TabStripItem title="Second"></TabStripItem>
8+
<TabStripItem title="first" class="special"></TabStripItem>
9+
<TabStripItem title="second"></TabStripItem>
10+
<TabStripItem class="nested">
11+
<Label text="third" />
12+
</TabStripItem>
1013
</TabStrip>
1114

1215
<TabContentItem class="special">
@@ -20,5 +23,11 @@
2023
<Label text="Second View" />
2124
</GridLayout>
2225
</TabContentItem>
26+
27+
<TabContentItem>
28+
<GridLayout>
29+
<Label text="Third View" />
30+
</GridLayout>
31+
</TabContentItem>
2332
</BottomNavigation>
2433
</Page>

‎e2e/ui-tests-app/app/bottom-navigation/font-icons-page.css‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,34 @@
66
font-size: 36;
77
}
88

9-
.color {
10-
color: blue;
11-
}
9+
TabStrip {
10+
color: mediumvioletred;
11+
}
12+
13+
TabStripItem {
14+
color: skyblue;
15+
}
16+
17+
TabStripItem:active {
18+
color: darkblue;
19+
}
20+
21+
TabStripItem.special Image {
22+
color: lightgreen;
23+
}
24+
25+
TabStripItem.special:active Image {
26+
color: darkgreen;
27+
}
28+
29+
TabStripItem.special Label {
30+
color: gold;
31+
}
32+
33+
TabStripItem.special:active Label {
34+
color: darkgoldenrod;
35+
}
36+
37+
TabStripItem:active .font-size {
38+
font-size: 10;
39+
}

‎e2e/ui-tests-app/app/bottom-navigation/font-icons-page.xml‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,61 @@
33
<ActionBar title="BottomNavigation font icons" icon="" class="action-bar">
44
</ActionBar>
55

6-
<BottomNavigation class="font-awesome" automationText="tabNavigation" > <!-- TODO: The font-awesome class here should be removed -->
6+
<BottomNavigation automationText="tabNavigation" >
77
<TabStrip>
8-
<!-- font family + font size + color -->
9-
<TabStripItem title="First" iconSource="font://&#xF10B;" class="special font-awesome font-size color"></TabStripItem>
8+
<!-- font family + font size + color -->
9+
<TabStripItem class="special">
10+
<Label text="All Set"/>
11+
<Image src="font://&#xF10B;" class="font-awesome font-size" />
12+
</TabStripItem>
13+
1014
<!-- default font + valid char code -->
11-
<TabStripItem title="Second" iconSource="font://&#xF10B;"></TabStripItem>
15+
<TabStripItem>
16+
<Label text="Invalid Font" />
17+
<Image src="font://&#xF10B;" />
18+
</TabStripItem>
19+
1220
<!-- font family + invalid char code -->
13-
<TabStripItem title="Third" iconSource="font://&#xF556;" class="font-awesome font-size"></TabStripItem>
21+
<TabStripItem>
22+
<Label text="Invalid Char" />
23+
<Image src="font://&#xF556;" class="font-awesome font-size"/>
24+
</TabStripItem>
1425
</TabStrip>
1526

1627
<TabContentItem class="special">
17-
<GridLayout>
18-
<Label text="First View" />
19-
</GridLayout>
28+
<StackLayout>
29+
<Label text="char code: phone" />
30+
<Label text="font: Font Awesome" />
31+
<Label text="font size: 36" />
32+
<Label text="icon color inactive: lightgreen" />
33+
<Label text="icon color active: darkgreen" />
34+
<Label text="title color inactive: gold" />
35+
<Label text="title color active: darkgoldenrod" />
36+
</StackLayout>
2037
</TabContentItem>
2138

2239
<TabContentItem>
23-
<GridLayout>
24-
<Label text="Second View" />
25-
</GridLayout>
40+
<StackLayout>
41+
<Label text="char code: phone" />
42+
<Label text="font: default/invalid" />
43+
<Label text="font size: default" />
44+
<Label text="icon color inactive: skyblue" />
45+
<Label text="icon color active: darkblue" />
46+
<Label text="title color inactive: skyblue" />
47+
<Label text="title color active: darkblue" />
48+
</StackLayout>
2649
</TabContentItem>
2750

2851
<TabContentItem>
29-
<GridLayout>
30-
<Label text="Third View" />
31-
</GridLayout>
52+
<StackLayout>
53+
<Label text="char code: invalid" />
54+
<Label text="font: Font Awesome" />
55+
<Label text="font size: 36" />
56+
<Label text="icon color inactive: skyblue" />
57+
<Label text="icon color active: darkblue" />
58+
<Label text="title color inactive: skyblue" />
59+
<Label text="title color active: darkblue" />
60+
</StackLayout>
3261
</TabContentItem>
3362
</BottomNavigation>
3463
</Page>

‎e2e/ui-tests-app/app/bottom-navigation/font-page.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,11 @@ TabStripItem.special {
1717
TabStripItem.special:active {
1818
font: 16 monospace;
1919
}
20+
21+
TabStripItem.nested Label {
22+
font: 12 monospace;
23+
}
24+
25+
TabStripItem.nested:active Label {
26+
font: 16 monospace;
27+
}

‎e2e/ui-tests-app/app/bottom-navigation/font-page.xml‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<Page class="page">
22

3-
<ActionBar title="BottomNavigation FONT" icon="" class="action-bar">
3+
<ActionBar title="BottomNavigation font" class="action-bar">
44
</ActionBar>
55

6-
<BottomNavigation automationText="tabNavigation" >
6+
<BottomNavigation automationText="tabNavigation">
77
<TabStrip>
8-
<TabStripItem title="First" class="special"></TabStripItem>
9-
<TabStripItem title="Second"></TabStripItem>
8+
<TabStripItem title="first" class="special"></TabStripItem>
9+
<TabStripItem title="second"></TabStripItem>
10+
<TabStripItem class="nested">
11+
<Label text="third" />
12+
</TabStripItem>
1013
</TabStrip>
1114

1215
<TabContentItem class="special">
@@ -20,5 +23,11 @@
2023
<Label text="Second View" />
2124
</GridLayout>
2225
</TabContentItem>
26+
27+
<TabContentItem>
28+
<GridLayout>
29+
<Label text="Third View" />
30+
</GridLayout>
31+
</TabContentItem>
2332
</BottomNavigation>
2433
</Page>

‎e2e/ui-tests-app/app/bottom-navigation/icon-change-page.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
66
const newItem = bottomNav.tabStrip.items[args.newIndex];
77
if (newItem) {
88
newItem.iconSource = "res://icon";
9+
newItem.title = "selected";
910
}
1011

1112
const oldItem = bottomNav.tabStrip.items[args.oldIndex];
1213
if (oldItem) {
1314
oldItem.iconSource = "res://testlogo";
15+
oldItem.title = "unselected";
1416
}
1517
}

‎e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44

55
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" >
66
<TabStrip>
7-
<TabStripItem iconSource="res://icon"></TabStripItem>
8-
<TabStripItem iconSource="res://testlogo"></TabStripItem>
7+
<TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
8+
<TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
99
</TabStrip>
1010

1111
<TabContentItem>

‎e2e/ui-tests-app/app/bottom-navigation/text-transform-page.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,11 @@ TabStripItem.special {
1717
TabStripItem.special:active {
1818
text-transform: uppercase;
1919
}
20+
21+
TabStripItem.nested Label {
22+
text-transform: lowercase;
23+
}
24+
25+
TabStripItem.nested:active Label {
26+
text-transform: uppercase;
27+
}

‎e2e/ui-tests-app/app/bottom-navigation/text-transform-page.xml‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<Page class="page">
22

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

6-
<BottomNavigation automationText="tabNavigation" >
6+
<BottomNavigation automationText="tabNavigation">
77
<TabStrip>
88
<TabStripItem title="first" class="special"></TabStripItem>
99
<TabStripItem title="second"></TabStripItem>
10+
<TabStripItem class="nested">
11+
<Label text="third" />
12+
</TabStripItem>
1013
</TabStrip>
1114

1215
<TabContentItem class="special">
@@ -20,5 +23,11 @@
2023
<Label text="Second View" />
2124
</GridLayout>
2225
</TabContentItem>
26+
27+
<TabContentItem>
28+
<GridLayout>
29+
<Label text="Third View" />
30+
</GridLayout>
31+
</TabContentItem>
2332
</BottomNavigation>
2433
</Page>

0 commit comments

Comments
 (0)