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

SelectedBackgroundColor property exposed via css. (#2973)

Browse Source
This commit is contained in:
Nedyalko Nikolov
2016-10-28 10:26:10 +03:00
committed by Vladimir Enchev
parent e27995a889
commit c46f216d31
7 changed files with 107 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/app/ui-tests-app/segmented-bar/all.xml
View File

@ -1,13 +1,13 @@
<Page>
<StackLayout>
<SegmentedBar selectedIndex="2" style="color: yellow; background-color: blue; font-weight: bold; font-size: 20; font-style: italic; font-family: monospace;" selectedBackgroundColor="red">
<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;">
<SegmentedBar.items>
<SegmentedBarItem title="Item 1" />
<SegmentedBarItem title="Item 2" />
<SegmentedBarItem title="Item 3" />
</SegmentedBar.items>
</SegmentedBar>
<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">
<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;">
<SegmentedBar.items>
<SegmentedBarItem title="Item 1" />
<SegmentedBarItem title="Item 2" />

8
tns-core-modules/ui/segmented-bar/segmented-bar-common.ts
View File

@ -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(<any>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";

60
tns-core-modules/ui/segmented-bar/segmented-bar.android.ts
View File

@ -63,23 +63,6 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var tabHost = <android.widget.TabHost>view.android;
var tabIndex: number;
if (view.selectedBackgroundColor) {
ensureSegmentedBarColorDrawableClass();
for (tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
var vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
var stateDrawable = new android.graphics.drawable.StateListDrawable();
var arr = (<any>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 = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
var t = <android.widget.TextView>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 = <android.widget.TabHost>v._nativeView;
for (let tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
let vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
let stateDrawable = new android.graphics.drawable.StateListDrawable();
let arr = (<any>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<android.graphics.drawable.Drawable>) {
let tabHost = <android.widget.TabHost>v._nativeView;
ensureSegmentedBarColorDrawableClass();
for (let tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
let vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
vg.setBackground(nativeValue[tabIndex]);
}
}
private static getSelectedBackgroundColorProperty(v: view.View): Array<android.graphics.drawable.Drawable> {
var tabHost = <android.widget.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");
}
}

51
tns-core-modules/ui/segmented-bar/segmented-bar.ios.ts
View File

@ -68,20 +68,6 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
}
(<proxy.PropertyMetadata>common.SegmentedBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged;
function onSelectedBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <SegmentedBar>data.object;
if (!view.ios) {
return;
}
ensureColor();
if (data.newValue instanceof color.Color) {
view.ios.tintColor = data.newValue.ios;
}
}
(<proxy.PropertyMetadata>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");
}
}

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

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

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

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

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

@ -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();