diff --git a/apps/app/ui-tests-app/segmented-bar/all.xml b/apps/app/ui-tests-app/segmented-bar/all.xml index 68044d622..18fdbd57e 100644 --- a/apps/app/ui-tests-app/segmented-bar/all.xml +++ b/apps/app/ui-tests-app/segmented-bar/all.xml @@ -1,13 +1,13 @@ - + - + diff --git a/tns-core-modules/ui/segmented-bar/segmented-bar-common.ts b/tns-core-modules/ui/segmented-bar/segmented-bar-common.ts index d6423f015..927c891f9 100644 --- a/tns-core-modules/ui/segmented-bar/segmented-bar-common.ts +++ b/tns-core-modules/ui/segmented-bar/segmented-bar-common.ts @@ -77,14 +77,12 @@ export class SegmentedBar extends view.View implements definition.SegmentedBar { } get selectedBackgroundColor(): color.Color { - return this._getValue(SegmentedBar.selectedBackgroundColorProperty); + return this.style.selectedBackgroundColor; } set selectedBackgroundColor(value: color.Color) { - this._setValue(SegmentedBar.selectedBackgroundColorProperty, - value instanceof color.Color ? value : new color.Color(value)); + this.style.selectedBackgroundColor = value; } - - public static selectedBackgroundColorProperty = new dependencyObservable.Property("selectedBackgroundColor", "SegmentedBar", new proxy.PropertyMetadata(undefined)); + public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(undefined)); public static itemsProperty = new dependencyObservable.Property("items", "SegmentedBar", new proxy.PropertyMetadata(undefined)); public static selectedIndexChangedEvent = "selectedIndexChanged"; diff --git a/tns-core-modules/ui/segmented-bar/segmented-bar.android.ts b/tns-core-modules/ui/segmented-bar/segmented-bar.android.ts index 67acfcca0..b42a79aac 100644 --- a/tns-core-modules/ui/segmented-bar/segmented-bar.android.ts +++ b/tns-core-modules/ui/segmented-bar/segmented-bar.android.ts @@ -63,23 +63,6 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) { var tabHost = view.android; var tabIndex: number; - if (view.selectedBackgroundColor) { - ensureSegmentedBarColorDrawableClass(); - for (tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) { - var vg = tabHost.getTabWidget().getChildTabViewAt(tabIndex); - - var stateDrawable = new android.graphics.drawable.StateListDrawable(); - - var arr = (Array).create("int", 1); - arr[0] = R_ATTR_STATE_SELECTED; - var colorDrawable: android.graphics.drawable.ColorDrawable = new SegmentedBarColorDrawableClass(view.selectedBackgroundColor.android) - stateDrawable.addState(arr, colorDrawable); - stateDrawable.setBounds(0, 15, vg.getRight(), vg.getBottom()); - - vg.setBackgroundDrawable(stateDrawable); - } - } - for (tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) { var tabChild = tabHost.getTabWidget().getChildTabViewAt(tabIndex); var t = tabChild.getChildAt(1); @@ -292,6 +275,45 @@ export class SegmentedBarStyler implements style.Styler { }; } + // selectedBackgroundColor methods + private static setSelectedBackgroundColorProperty(v: view.View, newValue: any) { + ensureSegmentedBarColorDrawableClass(); + let tabHost = v._nativeView; + for (let tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) { + let vg = tabHost.getTabWidget().getChildTabViewAt(tabIndex); + + let stateDrawable = new android.graphics.drawable.StateListDrawable(); + + let arr = (Array).create("int", 1); + arr[0] = R_ATTR_STATE_SELECTED; + let colorDrawable: android.graphics.drawable.ColorDrawable = new SegmentedBarColorDrawableClass(newValue) + stateDrawable.addState(arr, colorDrawable); + stateDrawable.setBounds(0, 15, vg.getRight(), vg.getBottom()); + + vg.setBackground(stateDrawable); + } + } + + private static resetSelectedBackgroundColorProperty(v: view.View, nativeValue: Array) { + let tabHost = v._nativeView; + ensureSegmentedBarColorDrawableClass(); + for (let tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) { + let vg = tabHost.getTabWidget().getChildTabViewAt(tabIndex); + vg.setBackground(nativeValue[tabIndex]); + } + } + + private static getSelectedBackgroundColorProperty(v: view.View): Array { + var tabHost = v._nativeView; + let result = []; + for (let tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) { + let background = tabHost.getTabWidget().getChildTabViewAt(tabIndex).getBackground(); + result.push(background); + } + + return result; + } + public static registerHandlers() { style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler( SegmentedBarStyler.setColorProperty, @@ -301,6 +323,10 @@ export class SegmentedBarStyler implements style.Styler { SegmentedBarStyler.setFontInternalProperty, SegmentedBarStyler.resetFontInternalProperty, SegmentedBarStyler.getFontInternalProperty), "SegmentedBar"); + style.registerHandler(style.selectedBackgroundColorProperty, new style.StylePropertyChangedHandler( + SegmentedBarStyler.setSelectedBackgroundColorProperty, + SegmentedBarStyler.resetSelectedBackgroundColorProperty, + SegmentedBarStyler.getSelectedBackgroundColorProperty), "SegmentedBar"); } } diff --git a/tns-core-modules/ui/segmented-bar/segmented-bar.ios.ts b/tns-core-modules/ui/segmented-bar/segmented-bar.ios.ts index a22689d92..8d1238447 100644 --- a/tns-core-modules/ui/segmented-bar/segmented-bar.ios.ts +++ b/tns-core-modules/ui/segmented-bar/segmented-bar.ios.ts @@ -68,20 +68,6 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) { } (common.SegmentedBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged; -function onSelectedBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) { - var view = data.object; - if (!view.ios) { - return; - } - - ensureColor(); - - if (data.newValue instanceof color.Color) { - view.ios.tintColor = data.newValue.ios; - } -} -(common.SegmentedBar.selectedBackgroundColorProperty.metadata).onSetNativeValue = onSelectedBackgroundColorPropertyChanged; - export class SegmentedBarItem extends common.SegmentedBarItem { public _update() { if (this._parent) { @@ -209,6 +195,39 @@ export class SegmentedBarStyler implements style.Styler { return currentFont; } + //Selected background color methods + private static setSelectedBackgroundColorProperty(v: view.View, newValue: any) { + if (!v.ios) { + return; + } + + ensureColor(); + + if (newValue instanceof color.Color) { + v.ios.tintColor = newValue.ios; + } + } + + private static resetSelectedBackgroundColorProperty(v: view.View, nativeValue: any) { + if (!v.ios) { + return; + } + + ensureColor(); + + if (nativeValue instanceof color.Color) { + v.ios.tintColor = nativeValue.ios; + } + } + + private static getSelectedBackgroundColorProperty(v: view.View): any { + if (!v.ios) { + return; + } + + return v.ios.tintColor; + } + public static registerHandlers() { style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler( SegmentedBarStyler.setColorProperty, @@ -217,6 +236,10 @@ export class SegmentedBarStyler implements style.Styler { SegmentedBarStyler.setFontInternalProperty, SegmentedBarStyler.resetFontInternalProperty, SegmentedBarStyler.getNativeFontValue), "SegmentedBar"); + style.registerHandler(style.selectedBackgroundColorProperty, new style.StylePropertyChangedHandler( + SegmentedBarStyler.setSelectedBackgroundColorProperty, + SegmentedBarStyler.resetSelectedBackgroundColorProperty, + SegmentedBarStyler.getSelectedBackgroundColorProperty), "SegmentedBar"); } } diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts index 3d09a955e..02705bbc6 100644 --- a/tns-core-modules/ui/styling/style.d.ts +++ b/tns-core-modules/ui/styling/style.d.ts @@ -108,6 +108,9 @@ declare module "ui/styling/style" { public selectedTabTextColor: Color; public androidSelectedTabHighlightColor: Color; + //SegmentedBar-specific props + public selectedBackgroundColor: Color; + constructor(parentView: View); public _beginUpdate(); @@ -177,6 +180,8 @@ declare module "ui/styling/style" { export var selectedTabTextColorProperty: styleProperty.Property; export var androidSelectedTabHighlightColorProperty: styleProperty.Property; + export var selectedBackgroundColorProperty: 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; diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts index 4ca70ec54..6b4751415 100644 --- a/tns-core-modules/ui/styling/style.ts +++ b/tns-core-modules/ui/styling/style.ts @@ -864,6 +864,13 @@ export class Style extends DependencyObservable implements styling.Style { this._setValue(androidSelectedTabHighlightColorProperty, value); } + get selectedBackgroundColor(): Color { + return this._getValue(selectedBackgroundColorProperty); + } + set selectedBackgroundColor(value: Color) { + this._setValue(selectedBackgroundColorProperty, value); + } + public _updateTextDecoration() { if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) { this._applyProperty(textDecorationProperty, this._getValue(textDecorationProperty)); @@ -1132,6 +1139,11 @@ export var androidSelectedTabHighlightColorProperty = new styleProperty.Property new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals), converters.colorConverter); +// SegmentedBar-specific props +export var selectedBackgroundColorProperty = new styleProperty.Property("selectedBackgroundColor", "selected-background-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", diff --git a/tns-core-modules/ui/styling/styling.d.ts b/tns-core-modules/ui/styling/styling.d.ts index b2909c455..1ab8245fe 100644 --- a/tns-core-modules/ui/styling/styling.d.ts +++ b/tns-core-modules/ui/styling/styling.d.ts @@ -318,6 +318,11 @@ */ androidSelectedTabHighlightColor: color.Color; + /** + * Gets or sets the selected background color of a SegmentedBar. + */ + selectedBackgroundColor: color.Color; + //@private public _beginUpdate(); public _endUpdate();