javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: flexbile font icon usage in tab navigation (#7672)

Browse Source
This commit is contained in:
Martin Yankov
2019-08-15 17:32:48 +03:00
committed by GitHub
parent 4d76fc691e
commit c0b8db4098
34 changed files with 727 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
e2e/ui-tests-app/app/bottom-navigation/color-page.css
View File

@@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active {
color: yellowgreen;
}
TabStripItem.nested Label {
color: teal;
}
TabStripItem.nested:active Label {
color: yellowgreen;
}

15
e2e/ui-tests-app/app/bottom-navigation/color-page.xml
View File

@@ -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">
@@ -20,5 +23,11 @@
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

34
e2e/ui-tests-app/app/bottom-navigation/font-icons-page.css
View File

@@ -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
e2e/ui-tests-app/app/bottom-navigation/font-icons-page.xml
View File

@@ -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
e2e/ui-tests-app/app/bottom-navigation/font-page.css
View File

@@ -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
e2e/ui-tests-app/app/bottom-navigation/font-page.xml
View File

@@ -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">
@@ -20,5 +23,11 @@
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

2
e2e/ui-tests-app/app/bottom-navigation/icon-change-page.ts
View File

@@ -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
e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
View File

@@ -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>

8
e2e/ui-tests-app/app/bottom-navigation/text-transform-page.css
View File

@@ -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
e2e/ui-tests-app/app/bottom-navigation/text-transform-page.xml
View File

@@ -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">
@@ -20,5 +23,11 @@
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

8
e2e/ui-tests-app/app/tabs/color-page.css
View File

@@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active {
color: yellowgreen;
}
TabStripItem.nested Label {
color: teal;
}
TabStripItem.nested:active Label {
color: yellowgreen;
}

17
e2e/ui-tests-app/app/tabs/color-page.xml
View File

@@ -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">
@@ -20,5 +23,11 @@
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>

34
e2e/ui-tests-app/app/tabs/font-icons-page.css
View File

@@ -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
e2e/ui-tests-app/app/tabs/font-icons-page.xml
View File

@@ -3,32 +3,61 @@
<ActionBar title="Tabs font icons" icon="" class="action-bar">
</ActionBar>
<Tabs class="font-awesome" automationText="tabNavigation" > <!-- TODO: The font-awesome class here should be removed -->
<Tabs 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>
</Tabs>
</Page>

8
e2e/ui-tests-app/app/tabs/font-page.css
View File

@@ -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;
}

15
e2e/ui-tests-app/app/tabs/font-page.xml
View File

@@ -1,12 +1,15 @@
<Page class="page">
<ActionBar title="Tabs font" icon="" class="action-bar">
<ActionBar title="Tabs font" class="action-bar">
</ActionBar>
<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">
@@ -20,5 +23,11 @@
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>

2
e2e/ui-tests-app/app/tabs/icon-change-page.ts
View File

@@ -6,10 +6,12 @@ export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const newItem = tabsNav.tabStrip.items[args.newIndex];
if (newItem) {
newItem.iconSource = "res://icon";
newItem.title = "selected";
}
const oldItem = tabsNav.tabStrip.items[args.oldIndex];
if (oldItem) {
oldItem.iconSource = "res://testlogo";
oldItem.title = "unselected";
}
}

4
e2e/ui-tests-app/app/tabs/icon-change-page.xml
View File

@@ -4,8 +4,8 @@
<Tabs 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>

8
e2e/ui-tests-app/app/tabs/text-transform-page.css
View File

@@ -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
e2e/ui-tests-app/app/tabs/text-transform-page.xml
View File

@@ -1,12 +1,15 @@
<Page class="page">
<ActionBar title="Tabs text-transform" icon="" class="action-bar">
<ActionBar title="Tabs text-transform" class="action-bar">
</ActionBar>
<Tabs automationText="tabNavigation" >
<Tabs automationText="tabNavigation">
<TabStrip>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip>
<TabContentItem class="special">
@@ -20,5 +23,11 @@
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>