Skip to content

Commit c46f216

Browse files
Nedyalko Nikolovenchev
Nedyalko Nikolov
authored and
enchev
committed
SelectedBackgroundColor property exposed via css. (#2973)
1 parent e27995a commit c46f216

File tree

7 files changed

+107
-38
lines changed

7 files changed

+107
-38
lines changed

‎apps/app/ui-tests-app/segmented-bar/all.xml

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<Page>
22
<StackLayout>
3-
<SegmentedBar selectedIndex="2" style="color: yellow; background-color: blue; font-weight: bold; font-size: 20; font-style: italic; font-family: monospace;" selectedBackgroundColor="red">
3+
<SegmentedBar selectedIndex="2" style="color: yellow; background-color: blue; font-weight: bold; font-size: 20; font-style: italic; font-family: monospace; selected-background-color: red;">
44
<SegmentedBar.items>
55
<SegmentedBarItem title="Item 1" />
66
<SegmentedBarItem title="Item 2" />
77
<SegmentedBarItem title="Item 3" />
88
</SegmentedBar.items>
99
</SegmentedBar>
10-
<SegmentedBar selectedIndex="2" style="margin: 5; color: yellow; background-color: blue; font-weight: bold; font-size: 20; font-style: italic; font-family: monospace; height: 72; border-width: 2; border-radius: 7; border-color:green;" selectedBackgroundColor="red">
10+
<SegmentedBar selectedIndex="2" style="margin: 5; color: yellow; background-color: blue; font-weight: bold; font-size: 20; font-style: italic; font-family: monospace; height: 72; border-width: 2; border-radius: 7; border-color:green; selected-background-color: red;">
1111
<SegmentedBar.items>
1212
<SegmentedBarItem title="Item 1" />
1313
<SegmentedBarItem title="Item 2" />

‎tns-core-modules/ui/segmented-bar/segmented-bar-common.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,12 @@ export class SegmentedBar extends view.View implements definition.SegmentedBar {
7777
}
7878

7979
get selectedBackgroundColor(): color.Color {
80-
return this._getValue(SegmentedBar.selectedBackgroundColorProperty);
80+
return this.style.selectedBackgroundColor;
8181
}
8282
set selectedBackgroundColor(value: color.Color) {
83-
this._setValue(SegmentedBar.selectedBackgroundColorProperty,
84-
value instanceof color.Color ? value : new color.Color(<any>value));
83+
this.style.selectedBackgroundColor = value;
8584
}
86-
87-
public static selectedBackgroundColorProperty = new dependencyObservable.Property("selectedBackgroundColor", "SegmentedBar", new proxy.PropertyMetadata(undefined));
85+
8886
public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(undefined));
8987
public static itemsProperty = new dependencyObservable.Property("items", "SegmentedBar", new proxy.PropertyMetadata(undefined));
9088
public static selectedIndexChangedEvent = "selectedIndexChanged";

‎tns-core-modules/ui/segmented-bar/segmented-bar.android.ts

+43-17
Original file line numberDiff line numberDiff line change
@@ -63,23 +63,6 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
6363
var tabHost = <android.widget.TabHost>view.android;
6464
var tabIndex: number;
6565

66-
if (view.selectedBackgroundColor) {
67-
ensureSegmentedBarColorDrawableClass();
68-
for (tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
69-
var vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
70-
71-
var stateDrawable = new android.graphics.drawable.StateListDrawable();
72-
73-
var arr = (<any>Array).create("int", 1);
74-
arr[0] = R_ATTR_STATE_SELECTED;
75-
var colorDrawable: android.graphics.drawable.ColorDrawable = new SegmentedBarColorDrawableClass(view.selectedBackgroundColor.android)
76-
stateDrawable.addState(arr, colorDrawable);
77-
stateDrawable.setBounds(0, 15, vg.getRight(), vg.getBottom());
78-
79-
vg.setBackgroundDrawable(stateDrawable);
80-
}
81-
}
82-
8366
for (tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
8467
var tabChild = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
8568
var t = <android.widget.TextView>tabChild.getChildAt(1);
@@ -292,6 +275,45 @@ export class SegmentedBarStyler implements style.Styler {
292275
};
293276
}
294277

278+
// selectedBackgroundColor methods
279+
private static setSelectedBackgroundColorProperty(v: view.View, newValue: any) {
280+
ensureSegmentedBarColorDrawableClass();
281+
let tabHost = <android.widget.TabHost>v._nativeView;
282+
for (let tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
283+
let vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
284+
285+
let stateDrawable = new android.graphics.drawable.StateListDrawable();
286+
287+
let arr = (<any>Array).create("int", 1);
288+
arr[0] = R_ATTR_STATE_SELECTED;
289+
let colorDrawable: android.graphics.drawable.ColorDrawable = new SegmentedBarColorDrawableClass(newValue)
290+
stateDrawable.addState(arr, colorDrawable);
291+
stateDrawable.setBounds(0, 15, vg.getRight(), vg.getBottom());
292+
293+
vg.setBackground(stateDrawable);
294+
}
295+
}
296+
297+
private static resetSelectedBackgroundColorProperty(v: view.View, nativeValue: Array<android.graphics.drawable.Drawable>) {
298+
let tabHost = <android.widget.TabHost>v._nativeView;
299+
ensureSegmentedBarColorDrawableClass();
300+
for (let tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
301+
let vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
302+
vg.setBackground(nativeValue[tabIndex]);
303+
}
304+
}
305+
306+
private static getSelectedBackgroundColorProperty(v: view.View): Array<android.graphics.drawable.Drawable> {
307+
var tabHost = <android.widget.TabHost>v._nativeView;
308+
let result = [];
309+
for (let tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
310+
let background = tabHost.getTabWidget().getChildTabViewAt(tabIndex).getBackground();
311+
result.push(background);
312+
}
313+
314+
return result;
315+
}
316+
295317
public static registerHandlers() {
296318
style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
297319
SegmentedBarStyler.setColorProperty,
@@ -301,6 +323,10 @@ export class SegmentedBarStyler implements style.Styler {
301323
SegmentedBarStyler.setFontInternalProperty,
302324
SegmentedBarStyler.resetFontInternalProperty,
303325
SegmentedBarStyler.getFontInternalProperty), "SegmentedBar");
326+
style.registerHandler(style.selectedBackgroundColorProperty, new style.StylePropertyChangedHandler(
327+
SegmentedBarStyler.setSelectedBackgroundColorProperty,
328+
SegmentedBarStyler.resetSelectedBackgroundColorProperty,
329+
SegmentedBarStyler.getSelectedBackgroundColorProperty), "SegmentedBar");
304330
}
305331
}
306332

‎tns-core-modules/ui/segmented-bar/segmented-bar.ios.ts

+37-14
Original file line numberDiff line numberDiff line change
@@ -68,20 +68,6 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
6868
}
6969
(<proxy.PropertyMetadata>common.SegmentedBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged;
7070

71-
function onSelectedBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
72-
var view = <SegmentedBar>data.object;
73-
if (!view.ios) {
74-
return;
75-
}
76-
77-
ensureColor();
78-
79-
if (data.newValue instanceof color.Color) {
80-
view.ios.tintColor = data.newValue.ios;
81-
}
82-
}
83-
(<proxy.PropertyMetadata>common.SegmentedBar.selectedBackgroundColorProperty.metadata).onSetNativeValue = onSelectedBackgroundColorPropertyChanged;
84-
8571
export class SegmentedBarItem extends common.SegmentedBarItem {
8672
public _update() {
8773
if (this._parent) {
@@ -209,6 +195,39 @@ export class SegmentedBarStyler implements style.Styler {
209195
return currentFont;
210196
}
211197

198+
//Selected background color methods
199+
private static setSelectedBackgroundColorProperty(v: view.View, newValue: any) {
200+
if (!v.ios) {
201+
return;
202+
}
203+
204+
ensureColor();
205+
206+
if (newValue instanceof color.Color) {
207+
v.ios.tintColor = newValue.ios;
208+
}
209+
}
210+
211+
private static resetSelectedBackgroundColorProperty(v: view.View, nativeValue: any) {
212+
if (!v.ios) {
213+
return;
214+
}
215+
216+
ensureColor();
217+
218+
if (nativeValue instanceof color.Color) {
219+
v.ios.tintColor = nativeValue.ios;
220+
}
221+
}
222+
223+
private static getSelectedBackgroundColorProperty(v: view.View): any {
224+
if (!v.ios) {
225+
return;
226+
}
227+
228+
return v.ios.tintColor;
229+
}
230+
212231
public static registerHandlers() {
213232
style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
214233
SegmentedBarStyler.setColorProperty,
@@ -217,6 +236,10 @@ export class SegmentedBarStyler implements style.Styler {
217236
SegmentedBarStyler.setFontInternalProperty,
218237
SegmentedBarStyler.resetFontInternalProperty,
219238
SegmentedBarStyler.getNativeFontValue), "SegmentedBar");
239+
style.registerHandler(style.selectedBackgroundColorProperty, new style.StylePropertyChangedHandler(
240+
SegmentedBarStyler.setSelectedBackgroundColorProperty,
241+
SegmentedBarStyler.resetSelectedBackgroundColorProperty,
242+
SegmentedBarStyler.getSelectedBackgroundColorProperty), "SegmentedBar");
220243
}
221244
}
222245

‎tns-core-modules/ui/styling/style.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,9 @@ declare module "ui/styling/style" {
108108
public selectedTabTextColor: Color;
109109
public androidSelectedTabHighlightColor: Color;
110110

111+
//SegmentedBar-specific props
112+
public selectedBackgroundColor: Color;
113+
111114
constructor(parentView: View);
112115

113116
public _beginUpdate();
@@ -177,6 +180,8 @@ declare module "ui/styling/style" {
177180
export var selectedTabTextColorProperty: styleProperty.Property;
178181
export var androidSelectedTabHighlightColorProperty: styleProperty.Property;
179182

183+
export var selectedBackgroundColorProperty: styleProperty.Property;
184+
180185
// Helper property holding most layout related properties available in CSS.
181186
// When layout related properties are set in CSS we chache them and send them to the native view in a single call.
182187
export var nativeLayoutParamsProperty: styleProperty.Property;

‎tns-core-modules/ui/styling/style.ts

+12
Original file line numberDiff line numberDiff line change
@@ -864,6 +864,13 @@ export class Style extends DependencyObservable implements styling.Style {
864864
this._setValue(androidSelectedTabHighlightColorProperty, value);
865865
}
866866

867+
get selectedBackgroundColor(): Color {
868+
return this._getValue(selectedBackgroundColorProperty);
869+
}
870+
set selectedBackgroundColor(value: Color) {
871+
this._setValue(selectedBackgroundColorProperty, value);
872+
}
873+
867874
public _updateTextDecoration() {
868875
if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) {
869876
this._applyProperty(textDecorationProperty, this._getValue(textDecorationProperty));
@@ -1132,6 +1139,11 @@ export var androidSelectedTabHighlightColorProperty = new styleProperty.Property
11321139
new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
11331140
converters.colorConverter);
11341141

1142+
// SegmentedBar-specific props
1143+
export var selectedBackgroundColorProperty = new styleProperty.Property("selectedBackgroundColor", "selected-background-color",
1144+
new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
1145+
converters.colorConverter);
1146+
11351147
// Helper property holding most layout related properties available in CSS.
11361148
// When layout related properties are set in CSS we chache them and send them to the native view in a single call.
11371149
export var nativeLayoutParamsProperty = new styleProperty.Property("nativeLayoutParams", "nativeLayoutParams",

‎tns-core-modules/ui/styling/styling.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,11 @@
318318
*/
319319
androidSelectedTabHighlightColor: color.Color;
320320

321+
/**
322+
* Gets or sets the selected background color of a SegmentedBar.
323+
*/
324+
selectedBackgroundColor: color.Color;
325+
321326
//@private
322327
public _beginUpdate();
323328
public _endUpdate();

0 commit comments

Comments
 (0)