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

Add support for TabView CSS

Browse Source 
TabView {
    tab-text-color: green;
    tab-background-color: yellow;
    selected-tab-text-color: red;
    android-selected-tab-highlight-color: orange;
    text-transform: uppercase;
}
This commit is contained in:
Rossen Hristov
2016-10-24 11:10:15 +03:00
parent 8d178754a2
commit 9fc143ee03
13 changed files with 427 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/app/ui-tests-app/css/main-page.ts
View File

@ -36,6 +36,7 @@ export function pageLoaded(args: EventData) {
examples.set("all-uniform-border", "css/all-uniform-border");
examples.set("all-non-uniform-border", "css/all-non-uniform-border");
//examples.set("border-playground", "css/border-playground");
examples.set("tab-view", "css/tab-view");
let viewModel = new SubMianPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;

13
apps/app/ui-tests-app/css/tab-view.ts Normal file
View File

@ -0,0 +1,13 @@
import view = require("ui/core/view");
import pages = require("ui/page");
export function applyTap(args) {
var page = <pages.Page>(<view.View>args.object).page;
var css = "#test-element { " + args.object.tag + " }";
page.css = css;
}
export function resetTap(args) {
var page = <pages.Page>(<view.View>args.object).page;
page.css = "";
}

32
apps/app/ui-tests-app/css/tab-view.xml Normal file
View File

@ -0,0 +1,32 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<TabView id="test-element">
<TabView.items>
<TabViewItem title="IteM onE">
<TabViewItem.view>
<StackLayout>
<Button text="tab-text-color: green;" tap="applyTap" tag="tab-text-color: green;" style.fontSize="8"/>
<Button text="tab-background-color: yellow;" tap="applyTap" tag="tab-background-color: yellow;" style.fontSize="8"/>
<Button text="selected-tab-text-color: red;" tap="applyTap" tag="selected-tab-text-color: red;" style.fontSize="8"/>
<Button text="android-selected-tab-highlight-color: orange;" tap="applyTap" tag="android-selected-tab-highlight-color: orange;" style.fontSize="8"/>
<Button text="text-transform: uppercase;" tap="applyTap" tag="text-transform: uppercase;" style.fontSize="8"/>
<Button text="text-transform: lowercase;" tap="applyTap" tag="text-transform: lowercase;" style.fontSize="8"/>
<Button text="text-transform: capitalize;" tap="applyTap" tag="text-transform: capitalize;" style.fontSize="8"/>
<Button text="text-transform: none;" tap="applyTap" tag="text-transform: none;" style.fontSize="8"/>
<Button text="all" tap="applyTap" tag="tab-text-color: green; tab-background-color: yellow; selected-tab-text-color: red; android-selected-tab-highlight-color: orange; text-transform: uppercase;" style.fontSize="8"/>
<Button text="reset" tap="resetTap" style.fontSize="8"/>
</StackLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="IteM twO">
<TabViewItem.view>
<Label text="Item 2"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="IteM threE">
<TabViewItem.view>
<Label text="Item 3"/>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

11
tns-core-modules/ui/styling/style.d.ts vendored
View File

@ -102,6 +102,12 @@ declare module "ui/styling/style" {
public letterSpacing: number;
public zIndex: number;
// TabView-specific props
public tabTextColor: Color;
public tabBackgroundColor: Color;
public selectedTabTextColor: Color;
public androidSelectedTabHighlightColor: Color;
constructor(parentView: View);
public _beginUpdate();
@ -166,6 +172,11 @@ declare module "ui/styling/style" {
export var letterSpacingProperty: styleProperty.Property;
export var zIndexProperty: styleProperty.Property;
export var tabTextColorProperty: styleProperty.Property;
export var tabBackgroundColorProperty: styleProperty.Property;
export var selectedTabTextColorProperty: styleProperty.Property;
export var androidSelectedTabHighlightColorProperty: styleProperty.Property;
// Helper property holding most layout related properties available in CSS.
// When layout related properties are set in CSS we chache them and send them to the native view in a single call.
export var nativeLayoutParamsProperty: styleProperty.Property;

47
tns-core-modules/ui/styling/style.ts
View File

@ -835,6 +835,35 @@ export class Style extends DependencyObservable implements styling.Style {
this._setValue(zIndexProperty, value);
}
// TabView-specific properties
get tabTextColor(): Color {
return this._getValue(tabTextColorProperty);
}
set tabTextColor(value: Color) {
this._setValue(tabTextColorProperty, value);
}
get tabBackgroundColor(): Color {
return this._getValue(tabBackgroundColorProperty);
}
set tabBackgroundColor(value: Color) {
this._setValue(tabBackgroundColorProperty, value);
}
get selectedTabTextColor(): Color {
return this._getValue(selectedTabTextColorProperty);
}
set selectedTabTextColor(value: Color) {
this._setValue(selectedTabTextColorProperty, value);
}
get androidSelectedTabHighlightColor(): Color {
return this._getValue(androidSelectedTabHighlightColorProperty);
}
set androidSelectedTabHighlightColor(value: Color) {
this._setValue(androidSelectedTabHighlightColorProperty, value);
}
public _updateTextDecoration() {
if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) {
this._applyProperty(textDecorationProperty, this._getValue(textDecorationProperty));
@ -1086,6 +1115,23 @@ export var letterSpacingProperty = new styleProperty.Property("letterSpacing", "
export var zIndexProperty = new styleProperty.Property("zIndex", "z-index",
new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isFloatValueValid), converters.floatConverter);
//TabView-specific props
export var tabTextColorProperty = new styleProperty.Property("tabTextColor", "tab-text-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
converters.colorConverter);
export var tabBackgroundColorProperty = new styleProperty.Property("tabBackgroundColor", "tab-background-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
converters.colorConverter);
export var selectedTabTextColorProperty = new styleProperty.Property("selectedTabTextColor", "selected-tab-text-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
converters.colorConverter);
export var androidSelectedTabHighlightColorProperty = new styleProperty.Property("androidSelectedTabHighlightColor", "android-selected-tab-highlight-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
converters.colorConverter);
// Helper property holding most layout related properties available in CSS.
// When layout related properties are set in CSS we chache them and send them to the native view in a single call.
export var nativeLayoutParamsProperty = new styleProperty.Property("nativeLayoutParams", "nativeLayoutParams",
@ -1703,3 +1749,4 @@ function onBorderRadiusChanged(value: any): Array<styleProperty.KeyValuePair<sty
styleProperty.registerShorthandCallback("border-color", onBorderColorChanged);
styleProperty.registerShorthandCallback("border-width", onBorderWidthChanged);
styleProperty.registerShorthandCallback("border-radius", onBorderRadiusChanged);

21
tns-core-modules/ui/styling/styling.d.ts vendored
View File

@ -297,6 +297,27 @@
*/
letterSpacing: number;
// TabView-specific props
/**
* Gets or sets the tab text color TabView style property
*/
tabTextColor: color.Color;
/**
* Gets or sets the tab background color TabView style property
*/
tabBackgroundColor: color.Color;
/**
* Gets or sets the selected tab text color TabView style property
*/
selectedTabTextColor: color.Color;
/**
* Gets or sets the selected tab highlight color TabView style property for Android
*/
androidSelectedTabHighlightColor: color.Color;
//@private
public _beginUpdate();
public _endUpdate();

65
tns-core-modules/ui/tab-view/tab-view-common.ts
View File

@ -62,8 +62,6 @@ export class TabViewItem extends Bindable implements definition.TabViewItem {
var TAB_VIEW = "TabView";
var ITEMS = "items";
var SELECTED_INDEX = "selectedIndex";
var SELECTED_COLOR = "selectedColor";
var TABS_BACKGROUND_COLOR = "tabsBackgroundColor";
export module knownCollections {
export var items = "items";
@ -71,8 +69,6 @@ export module knownCollections {
var itemsProperty = new Property(ITEMS, TAB_VIEW, new PropertyMetadata(undefined, AffectsLayout));
var selectedIndexProperty = new Property(SELECTED_INDEX, TAB_VIEW, new PropertyMetadata(undefined, AffectsLayout));
var selectedColorProperty = new Property(SELECTED_COLOR, TAB_VIEW, new PropertyMetadata(undefined));
var tabsBackgroundColorProperty = new Property(TABS_BACKGROUND_COLOR, TAB_VIEW, new PropertyMetadata(undefined));
(<PropertyMetadata>selectedIndexProperty.metadata).onSetNativeValue = function (data: PropertyChangeData) {
var tabView = <TabView>data.object;
@ -87,8 +83,6 @@ var tabsBackgroundColorProperty = new Property(TABS_BACKGROUND_COLOR, TAB_VIEW,
export class TabView extends View implements definition.TabView, AddArrayFromBuilder {
public static itemsProperty = itemsProperty;
public static selectedIndexProperty = selectedIndexProperty;
public static selectedColorProperty = selectedColorProperty;
public static tabsBackgroundColorProperty = tabsBackgroundColorProperty;
public static selectedIndexChangedEvent = "selectedIndexChanged";
public _addArrayFromBuilder(name: string, value: Array<any>) {
@ -180,20 +174,67 @@ export class TabView extends View implements definition.TabView, AddArrayFromBui
this._setValue(TabView.selectedIndexProperty, value);
}
// [Deprecated. Please use `selectedTabTextColor` to color the titles of the tabs on both platforms and `androidSelectedTabHighlightColor` to color the horizontal line at the bottom of the tab on Android.]
get selectedColor(): color.Color {
return this._getValue(TabView.selectedColorProperty);
// Avoid breaking changes and keep the old behavior until we remove this prop
if (isAndroid){
return this.style.androidSelectedTabHighlightColor;
}
else {
return this.style.selectedTabTextColor;
}
}
set selectedColor(value: color.Color) {
this._setValue(TabView.selectedColorProperty,
value instanceof color.Color ? value : new color.Color(<any>value));
// Avoid breaking changes and keep the old behavior until we remove this prop
if (isAndroid){
this.style.androidSelectedTabHighlightColor = value;;
}
else {
this.style.selectedTabTextColor = value;
}
}
// [Deprecated. Please use `tabBackgroundColor` instead]
get tabsBackgroundColor(): color.Color {
return this._getValue(TabView.tabsBackgroundColorProperty);
return this.style.tabBackgroundColor;
}
set tabsBackgroundColor(value: color.Color) {
this._setValue(TabView.tabsBackgroundColorProperty,
value instanceof color.Color ? value : new color.Color(<any>value));
this.style.tabBackgroundColor = value;
}
get tabTextColor(): color.Color {
return this.style.tabTextColor;
}
set tabTextColor(value: color.Color) {
this.style.tabTextColor = value;
}
get tabBackgroundColor(): color.Color {
return this.style.tabBackgroundColor;
}
set tabBackgroundColor(value: color.Color) {
this.style.tabBackgroundColor = value;
}
get selectedTabTextColor(): color.Color {
return this.style.selectedTabTextColor;
}
set selectedTabTextColor(value: color.Color) {
this.style.selectedTabTextColor = value;
}
get androidSelectedTabHighlightColor(): color.Color {
return this.style.androidSelectedTabHighlightColor;
}
set androidSelectedTabHighlightColor(value: color.Color) {
this.style.androidSelectedTabHighlightColor = value;
}
get textTransform(): string {
return this.style.textTransform;
}
set textTransform(value: string) {
this.style.textTransform = value;
}
public _onSelectedIndexPropertyChangedSetNativeValue(data: PropertyChangeData) {

176
tns-core-modules/ui/tab-view/tab-view.android.ts
View File

@ -5,8 +5,6 @@ import view = require("ui/core/view");
import trace = require("trace");
import types = require("utils/types");
import utils = require("utils/utils");
import proxy = require("ui/core/proxy");
import color = require("color");
import style = require("ui/styling/style");
import font = require("ui/styling/font");
import * as imageSourceModule from "image-source";
@ -174,22 +172,6 @@ function ensurePageChangedListenerClass() {
PageChangedListenerClass = PageChangedListener;
}
function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var tabLayout = (<TabView>data.object)._getAndroidTabView();
if (tabLayout && data.newValue instanceof color.Color) {
tabLayout.setSelectedIndicatorColors([data.newValue.android]);
}
}
(<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var tabLayout = (<TabView>data.object)._getAndroidTabView();
if (tabLayout && data.newValue instanceof color.Color) {
tabLayout.setBackgroundColor(data.newValue.android);
}
}
(<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
export class TabView extends common.TabView {
private _grid: org.nativescript.widgets.GridLayout;
private _tabLayout: org.nativescript.widgets.TabLayout;
@ -353,44 +335,6 @@ export class TabView extends common.TabView {
}
export class TabViewStyler implements style.Styler {
// color
private static setColorProperty(v: view.View, newValue: any) {
var tab = <definition.TabView>v;
if (tab.items && tab.items.length > 0) {
var tabLayout = tab._getAndroidTabView();
for (var i = 0; i < tab.items.length; i++) {
tabLayout.getTextViewForItemAt(i).setTextColor(newValue);
}
}
}
private static resetColorProperty(v: view.View, nativeValue: any) {
if (types.isNullOrUndefined(nativeValue)) {
return;
}
var tab = <definition.TabView>v;
if (tab.items && tab.items.length > 0) {
var tabLayout = tab._getAndroidTabView();
for (var i = 0; i < tab.items.length; i++) {
tabLayout.getTextViewForItemAt(i).setTextColor(nativeValue);
}
}
}
private static getColorProperty(v: view.View): any {
var tab = <definition.TabView>v;
var tv: android.widget.TextView = tab._getAndroidTabView().getTextViewForItemAt(0);
if (tv) {
return tv.getTextColors().getDefaultColor();
}
else {
return null;
}
}
// font
private static setFontInternalProperty(v: view.View, newValue: any, nativeValue?: any) {
@ -448,16 +392,128 @@ export class TabViewStyler implements style.Styler {
}
}
// tab-text-color
private static setTabTextColorProperty(v: view.View, newValue: any) {
var tabLayout = (<definition.TabView>v)._getAndroidTabView();
tabLayout.setTabTextColor(types.isNumber(newValue) ? new java.lang.Integer(newValue) : newValue);
}
private static resetTabTextColorProperty(v: view.View, nativeValue: any) {
var tabLayout = (<definition.TabView>v)._getAndroidTabView();
tabLayout.setTabTextColor(types.isNumber(nativeValue) ? new java.lang.Integer(nativeValue) : nativeValue);
}
private static getTabTextColorProperty(v: view.View): any {
var tabLayout = (<definition.TabView>v)._getAndroidTabView();
return tabLayout.getTabTextColor();
}
//tab-background-color
private static setTabBackgroundColorProperty(v: view.View, newValue: any) {
var tabLayout = (<definition.TabView>v)._getAndroidTabView();
tabLayout.setBackgroundColor(newValue);
}
private static resetTabBackgroundColorProperty(v: view.View, nativeValue: any) {
var tabLayout = (<definition.TabView>v)._getAndroidTabView();
tabLayout.setBackgroundColor(nativeValue);
}
private static getTabBackgroundColorProperty(v: view.View): any {
var tabLayout = (<definition.TabView>v)._getAndroidTabView();
let background = tabLayout.getBackground();
if (background instanceof android.graphics.drawable.ColorDrawable){
return (<android.graphics.drawable.ColorDrawable>background).getColor();
}
return null;
}
//selected-tab-text-color
private static setSelectedTabTextColorProperty(v: view.View, newValue: any) {
var tabLayout = (<definition.TabView>v)._getAndroidTabView();
tabLayout.setSelectedTabTextColor(types.isNumber(newValue) ? new java.lang.Integer(newValue) : newValue);
}
private static resetSelectedTabTextColorProperty(v: view.View, nativeValue: any) {
var tabLayout = (<definition.TabView>v)._getAndroidTabView();
tabLayout.setSelectedTabTextColor(types.isNumber(nativeValue) ? new java.lang.Integer(nativeValue) : nativeValue);
}
private static getSelectedTabTextColorProperty(v: view.View): any {
var tabLayout = (<definition.TabView>v)._getAndroidTabView();
return tabLayout.getSelectedTabTextColor();
}
// android-selected-tab-highlight-color-property
private static setAndroidSelectedTabHighlightColorProperty(v: view.View, newValue: any) {
let tabLayout = (<TabView>v)._getAndroidTabView();
tabLayout.setSelectedIndicatorColors([newValue]);
}
private static resetAndroidSelectedTabHighlightColorProperty(v: view.View, nativeValue: any) {
let tabLayout = (<TabView>v)._getAndroidTabView();
tabLayout.setSelectedIndicatorColors([nativeValue]);
}
private static getAndroidSelectedTabHighlightColorProperty(v: view.View): any {
let tabLayout = (<TabView>v)._getAndroidTabView();
let selectedIndicatorColors = tabLayout.getSelectedIndicatorColors();
return selectedIndicatorColors.length > 0 ? selectedIndicatorColors[0] : null;
}
// text-transform
private static setTextTransformProperty(v: view.View, newValue: any) {
let tabView = <TabView>v;
let tabLayout = tabView._getAndroidTabView();
for (let i = 0; i < tabView.items.length; i++) {
let textView = tabLayout.getTextViewForItemAt(i);
let str = tabView.items[i].title;
let result = utils.ad.getTransformedString(newValue, textView, str);
textView.setText(result);
}
}
private static resetTextTransformProperty(v: view.View, nativeValue: any) {
let tabView = <TabView>v;
let tabLayout = tabView._getAndroidTabView();
for (let i = 0; i < tabView.items.length; i++) {
let textView = tabLayout.getTextViewForItemAt(i);
let str = tabView.items[i].title;
let result = utils.ad.getTransformedString(nativeValue, textView, str);
textView.setText(result);
}
}
public static registerHandlers() {
style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setColorProperty,
TabViewStyler.resetColorProperty,
TabViewStyler.getColorProperty), "TabView");
style.registerHandler(style.fontInternalProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setFontInternalProperty,
TabViewStyler.resetFontInternalProperty,
TabViewStyler.getNativeFontInternalValue), "TabView");
style.registerHandler(style.tabTextColorProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setTabTextColorProperty,
TabViewStyler.resetTabTextColorProperty,
TabViewStyler.getTabTextColorProperty), "TabView");
style.registerHandler(style.tabBackgroundColorProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setTabBackgroundColorProperty,
TabViewStyler.resetTabBackgroundColorProperty,
TabViewStyler.getTabBackgroundColorProperty), "TabView");
style.registerHandler(style.selectedTabTextColorProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setSelectedTabTextColorProperty,
TabViewStyler.resetSelectedTabTextColorProperty,
TabViewStyler.getSelectedTabTextColorProperty), "TabView");
style.registerHandler(style.androidSelectedTabHighlightColorProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setAndroidSelectedTabHighlightColorProperty,
TabViewStyler.resetAndroidSelectedTabHighlightColorProperty,
TabViewStyler.getAndroidSelectedTabHighlightColorProperty), "TabView");
style.registerHandler(style.textTransformProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setTextTransformProperty,
TabViewStyler.resetTextTransformProperty), "TabView");
}
}

30
tns-core-modules/ui/tab-view/tab-view.d.ts vendored
View File

@ -49,7 +49,6 @@ declare module "ui/tab-view" {
class TabView extends view.View {
public static itemsProperty: dependencyObservable.Property;
public static selectedIndexProperty: dependencyObservable.Property;
public static selectedColorProperty: dependencyObservable.Property;
/**
* Gets or sets the items of the TabView.
@ -62,15 +61,40 @@ declare module "ui/tab-view" {
selectedIndex: number;
/**
* Gets or sets the color used for selected item.
* [Deprecated. Please use `selectedTabTextColor` to color the titles of the tabs on both platforms and `androidSelectedTabHighlightColor` to color the horizontal line at the bottom of the tab on Android.] Gets or sets the color used for selected item.
*/
selectedColor: color.Color;
/**
* Gets or sets the color used for background of the tab items.
* [Deprecated. Please use `tabBackgroundColor` instead] Gets or sets the color used for background of the tab items.
*/
tabsBackgroundColor: color.Color;
/**
* Gets or sets the text color of the tabs titles.
*/
tabTextColor: color.Color;
/**
* Gets or sets the background color of the tabs.
*/
tabBackgroundColor: color.Color;
/**
* Gets or sets the text color of the selected tab title.
*/
selectedTabTextColor: color.Color;
/**
* Gets or sets the color of the horizontal line drawn below the currently selected tab on Android.
*/
androidSelectedTabHighlightColor: color.Color;
/**
* Gets or sets the text transform of the tab titles.
*/
textTransform: string;
/**
* Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
*/

134
tns-core-modules/ui/tab-view/tab-view.ios.ts
View File

@ -4,12 +4,10 @@ import dependencyObservable = require("ui/core/dependency-observable");
import trace = require("trace");
import view = require("ui/core/view");
import types = require("utils/types");
import proxy = require("ui/core/proxy");
import color = require("color");
import * as imageSourceModule from "image-source";
import style = require("ui/styling/style");
import { Page } from "ui/page";
import * as utils from "utils/utils";
import getter = utils.ios.getter;
@ -145,20 +143,6 @@ export class TabViewItem extends common.TabViewItem {
}
}
function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var tabView = <TabView>data.object;
tabView._updateIOSTabBarColorsAndFonts();
}
(<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var tabView = <TabView>data.object;
if (data.newValue instanceof color.Color) {
tabView.ios.tabBar.barTintColor = data.newValue.ios;
}
}
(<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
export class TabView extends common.TabView {
public _ios: UITabBarControllerImpl;
private _delegate: UITabBarControllerDelegateImpl;
@ -416,27 +400,42 @@ export class TabView extends common.TabView {
}
var tabBar = this.ios.tabBar;
tabBar.tintColor = this.selectedColor ? this.selectedColor.ios : null;
var states = getTitleAttributesForStates(this);
for (var i = 0; i < tabBar.items.count; i++) {
var item = <UITabBarItem>tabBar.items[i];
item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
}
}
public _updateIOSTabBarTextTransform(newValue: string): void {
if (!this.items) {
return;
}
var tabBar = this.ios.tabBar;
for (let i = 0; i < tabBar.items.count; i++) {
let item = <UITabBarItem>tabBar.items[i];
if (types.isNullOrUndefined(newValue)){
// Reset to original
item.title = this.items[i].title;
}
else {
item.title = utils.ios.getTransformedText({text: this.items[i].title}, this.items[i].title, newValue);
}
}
}
}
function getTitleAttributesForStates(tabView: TabView): { normalState: any, selectedState: any } {
var normalState = {};
if (tabView.color instanceof color.Color) {
normalState[UITextAttributeTextColor] = tabView.color.ios;
if (tabView.tabTextColor instanceof color.Color) {
normalState[UITextAttributeTextColor] = tabView.tabTextColor.ios;
}
var selectedState = {};
if (tabView.selectedColor instanceof color.Color) {
selectedState[UITextAttributeTextColor] = tabView.selectedColor.ios;
if (tabView.selectedTabTextColor instanceof color.Color) {
selectedState[UITextAttributeTextColor] = tabView.selectedTabTextColor.ios;
}
else {
selectedState[UITextAttributeTextColor] = tabView.ios.tabBar.tintColor;
@ -454,17 +453,6 @@ function getTitleAttributesForStates(tabView: TabView): { normalState: any, sele
}
export class TabViewStyler implements style.Styler {
// color
private static setColorProperty(v: view.View, newValue: any) {
var tab = <definition.TabView>v;
tab._updateIOSTabBarColorsAndFonts();
}
private static resetColorProperty(v: view.View, nativeValue: any) {
var tab = <definition.TabView>v;
tab._updateIOSTabBarColorsAndFonts();
}
// font
private static setFontInternalProperty(v: view.View, newValue: any, nativeValue?: any) {
var tab = <definition.TabView>v;
@ -495,15 +483,85 @@ export class TabViewStyler implements style.Styler {
return currentFont;
}
public static registerHandlers() {
style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setColorProperty,
TabViewStyler.resetColorProperty), "TabView");
// tab-text-color
private static setTabTextColorProperty(v: view.View, newValue: any) {
var tabView = <definition.TabView>v;
tabView._updateIOSTabBarColorsAndFonts();
}
private static resetTabTextColorProperty(v: view.View, nativeValue: any) {
var tabView = <definition.TabView>v;
tabView._updateIOSTabBarColorsAndFonts();
}
// tab-background-color
private static setTabBackgroundColorProperty(v: view.View, newValue: any) {
let tabView = <TabView>v;
tabView.ios.tabBar.barTintColor = newValue;
}
private static resetTabBackgroundColorProperty(v: view.View, nativeValue: any) {
let tabView = <TabView>v;
tabView.ios.tabBar.barTintColor = nativeValue;
}
private static getTabBackgroundColorProperty(v: view.View): any {
let tabView = <TabView>v;
return tabView.ios.tabBar.barTintColor;
}
// selected-tab-text-color
private static setSelectedTabTextColorProperty(v: view.View, newValue: any) {
var tabView = <definition.TabView>v;
tabView.ios.tabBar.tintColor = newValue;
tabView._updateIOSTabBarColorsAndFonts();
}
private static resetSelectedTabTextColorProperty(v: view.View, nativeValue: any) {
var tabView = <definition.TabView>v;
tabView.ios.tabBar.tintColor = nativeValue;
tabView._updateIOSTabBarColorsAndFonts();
}
private static getSelectedTabTextColorProperty(v: view.View) {
var tabView = <definition.TabView>v;
return tabView.ios.tabBar.tintColor;
}
// text-transform
private static setTextTransformProperty(v: view.View, newValue: any) {
var tabView = <TabView>v;
tabView._updateIOSTabBarTextTransform(newValue);
}
private static resetTextTransformProperty(v: view.View, nativeValue: any) {
var tabView = <TabView>v;
tabView._updateIOSTabBarTextTransform(nativeValue);
}
public static registerHandlers() {
style.registerHandler(style.fontInternalProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setFontInternalProperty,
TabViewStyler.resetFontInternalProperty,
TabViewStyler.getNativeFontValue), "TabView");
style.registerHandler(style.tabTextColorProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setTabTextColorProperty,
TabViewStyler.resetTabTextColorProperty), "TabView");
style.registerHandler(style.tabBackgroundColorProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setTabBackgroundColorProperty,
TabViewStyler.resetTabBackgroundColorProperty,
TabViewStyler.getTabBackgroundColorProperty), "TabView");
style.registerHandler(style.selectedTabTextColorProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setSelectedTabTextColorProperty,
TabViewStyler.resetSelectedTabTextColorProperty,
TabViewStyler.getSelectedTabTextColorProperty), "TabView");
style.registerHandler(style.textTransformProperty, new style.StylePropertyChangedHandler(
TabViewStyler.setTextTransformProperty,
TabViewStyler.resetTextTransformProperty), "TabView");
}
}

2
tns-core-modules/utils/utils.android.ts
View File

@ -99,7 +99,7 @@ export module ad {
}
}
function getTransformedString(textTransform: string, view, stringToTransform: string): string {
export function getTransformedString(textTransform: string, view, stringToTransform: string): string {
let result: string;
switch (textTransform) {

1
tns-core-modules/utils/utils.d.ts vendored
View File

@ -81,6 +81,7 @@
export function setTextTransform(view, value: string);
export function setWhiteSpace(view, value: string);
export function setTextDecoration(view, value: string);
export function getTransformedString(textTransform: string, view, stringToTransform: string): string;
/**
* Gets the native Android application instance.

5
tns-platform-declarations/android/org.nativescript.widgets.d.ts vendored
View File

@ -343,6 +343,11 @@
constructor(context: android.content.Context, attrs: android.util.IAttributeSet, defStyle: number);
setSelectedIndicatorColors(color: Array<number>): void;
getSelectedIndicatorColors(): Array<number>;
setTabTextColor(color: java.lang.Integer): void;
getTabTextColor(): java.lang.Integer;
setSelectedTabTextColor(color: java.lang.Integer): void;
getSelectedTabTextColor(): java.lang.Integer;
setItems(items: Array<TabItemSpec>, viewPager: android.support.v4.view.ViewPager): void;
updateItemAt(position: number, itemSpec: TabItemSpec): void;