8000 Segmented bar styles · jensWorkGit/NativeScript@e5f7c7e · GitHub
[go: up one dir, main page]
Skip to content

Commit e5f7c7e

Browse files
author
vakrilov
committed
Segmented bar styles
1 parent 1765afa commit e5f7c7e

File tree

7 files changed

+83
-76
lines changed

7 files changed

+83
-76
lines changed

‎tests/app/ui/segmented-bar/segmented-bar-tests-native.android.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export function checkNativeItemsTextColor(bar: segmentedBarModule.SegmentedBar):
1414
// isValid = bar.color && bar.color.android === t.getCurrentTextColor();
1515
// }
1616

17-
for(let i = 0, itemsLength = bar.items.length; i < itemsLength; i++) {
17+
for (let i = 0, itemsLength = bar.items.length; i < itemsLength; i++) {
1818
let textView = <android.widget.TextView>bar.items[0].nativeView;
1919
isValid = bar.color && bar.color.android === textView.getCurrentTextColor();
2020
}

‎tests/app/ui/segmented-bar/segmented-bar-tests.ts

Lines changed: 9 additions & 9 deletions
10000
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import * as TKUnit from "../../TKUnit";
22
import * as segmentedBarTestsNative from "./segmented-bar-tests-native";
3-
import {buildUIAndRunTest} from "../helper";
4-
import {View} from "ui/core/view";
5-
import {BindingOptions} from "ui/core/bindable";
6-
import {Observable} from "data/observable";
7-
import {Color} from "color";
3+
import { buildUIAndRunTest } from "../helper";
4+
import { View } from "ui/core/view";
5+
import { BindingOptions } from "ui/core/bindable";
6+
import { Observable } from "data/observable";
7+
import { Color } from "color";
88

99
// >> article-require-segmentedbar-module
1010
import * as segmentedBarModule from "ui/segmented-bar";
@@ -77,7 +77,7 @@ export var testWhenItemsAreBoundTheTextColorIsPreserved = function () {
7777
}
7878

7979
segmentedBar.bind(options, model);
80-
80+
8181
TKUnit.assert(segmentedBarTestsNative.checkNativeItemsTextColor(segmentedBar), "Items text color not preserved" + "; Expected: " + segmentedBar.color);
8282
});
8383
}
@@ -181,13 +181,13 @@ export var testSelectedIndexChangedIsReisedCorrectlyIfSelectedIndexIsSet = funct
181181
var newIndex;
182182
var segmentedBar = _createSegmentedBar();
183183

184-
segmentedBar.on(segmentedBarModule.SegmentedBar.selectedIndexChangedEvent, (args : segmentedBarModule.SelectedIndexChangedEventData) => {
184+
segmentedBar.on(segmentedBarModule.SegmentedBar.selectedIndexChangedEvent, (args: segmentedBarModule.SelectedIndexChangedEventData) => {
185185
oldIndex = args.oldIndex;
186186
newIndex = args.newIndex;
187187
});
188188

189189
segmentedBar.items = _createItems(10);
190-
190+
191191
buildUIAndRunTest(segmentedBar, function (views: Array<View>) {
192192
var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
193193

@@ -262,7 +262,7 @@ export function test_SettingNumberAsTitleFromXML_DoesNotThrow() {
262262
let item = new segmentedBarModule.SegmentedBarItem();
263263
(<any>item).title = 1;
264264
segmentedBar.items = [item];
265-
265+
266266
buildUIAndRunTest(segmentedBar, function (views: Array<View>) {
267267
TKUnit.assertEqual(item.title, "1");
268268
});

‎tns-core-modules/ui/builder/component-builder.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export function getComponentModule(elementName: string, namespace: string, attri
126126
throw new Error(`Css file with path "${cssFilePath}" cannot be found!`);
127127
}
128128
} else {
129-
throw new Error("Css file atribute is valid only for pages!");
129+
throw new Error("Css file attribute is valid only for pages!");
130130
}
131131
}
132132
}

‎tns-core-modules/ui/core/properties.ts

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function _isSet(cssProperty: CssProperty<any, any>, instance: Style): boo
2828

2929
export function _printUnregisteredProperties(): void {
3030
print(symbolPropertyMap);
31-
print(cssSymbolPropertyMap)
31+
print(cssSymbolPropertyMap);
3232
}
3333

3434
const enum ValueSource {
@@ -132,11 +132,11 @@ export class Property<T extends ViewBase, U> implements PropertyDescriptor, defi
132132
this.requestLayout();
133133
}
134134
}
135-
}
135+
};
136136

137137
this.get = function (this: T): U {
138138
return key in this ? this[key] : defaultValue;
139-
}
139+
};
140140

141141
this.nativeValueChange = function (owner: T, value: U): void {
142142
const currentValue = key in owner ? owner[key] : defaultValue;
@@ -160,7 +160,7 @@ export class Property<T extends ViewBase, U> implements PropertyDescriptor, defi
160160
owner.requestLayout();
161161
}
162162
}
163-
}
163+
};
164164

165165
symbolPropertyMap[key] = this;
166166
}
@@ -219,7 +219,7 @@ export class CoercibleProperty<T extends ViewBase, U> implements PropertyDescrip
219219
const originalValue: U = coerceKey in target ? target[coerceKey] : defaultValue;
220220
// need that to AE8F make coercing but also fire change events
221221
this.set.call(target, originalValue);
222-
}
222+
};
223223

224224
this.set = function (this: T, value: U): void {
225225
const reset = value === unsetValue;
@@ -283,11 +283,11 @@ export class CoercibleProperty<T extends ViewBase, U> implements PropertyDescrip
283283
this.requestLayout();
284284
}
285285
}
286-
}
286+
};
287287

288288
this.get = function (): U {
289289
return key in this ? this[key] : defaultValue;
290-
}
290+
};
291291

292292
this.nativeValueChange = function (owner: T, value: U): void {
293293
const currentValue = key in owner ? owner[key] : defaultValue;
@@ -312,7 +312,7 @@ export class CoercibleProperty<T extends ViewBase, U> implements PropertyDescrip
312312
owner.requestLayout();
313313
}
314314
}
315-
}
315+
};
316316

317317
symbolPropertyMap[key] = this;
318318
}
@@ -387,7 +387,7 @@ export class InheritedProperty<T extends ViewBase, U> extends Property<T, U> imp
387387
return true;
388388
});
389389
}
390-
}
390+
};
391391

392392
const setInheritedValue = setFunc(ValueSource.Inherited);
393393
this.setInheritedValue = setInheritedValue;
@@ -403,6 +403,7 @@ export class CssProperty<T extends Style, U> implements definitions.CssProperty<
403403

404404
public readonly name: string;
405405
public readonly cssName: string;
406+
public readonly cssLocalName: string;
406407

407408
protected readonly cssValueDescriptor: PropertyDescriptor;
408409
protected readonly localValueDescriptor: PropertyDescriptor;
@@ -417,8 +418,8 @@ export class CssProperty<T extends Style, U> implements definitions.CssProperty<
417418
const name = options.name;
418419
this.name = name;
419420

420-
const cssName = `css-${options.cssName}`;
421-
this.cssName = cssName;
421+
this.cssName = `css-${options.cssName}`;
422+
this.cssLocalName = options.cssName;
422423

423424
const key = Symbol(name + ":propertyKey");
424425
this.key = key;
@@ -593,6 +594,9 @@ export class CssProperty<T extends Style, U> implements definitions.CssProperty<
593594
this.registered = true;
594595
Object.defineProperty(cls.prototype, this.name, this.localValueDescriptor);
595596
Object.defineProperty(cls.prototype, this.cssName, this.cssValueDescriptor);
597+
if (this.cssLocalName !== this.cssName) {
598+
Object.defineProperty(cls.prototype, this.cssLocalName, this.localValueDescriptor);
599+
}
596600
}
597601
}
598602

@@ -634,7 +638,7 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
634638
if (reset) {
635639
// If unsetValue - we want to reset this property.
636640
let parent = view.parent;
637-
let style = parent ? parent.style : null
641+
let style = parent ? parent.style : null;
638642
// If we have parent and it has non-default value we use as our inherited value.
639643
if (style && style[sourceKey] > ValueSource.Default) {
640644
newValue = style[name];
@@ -712,7 +716,7 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
712716
return true;
713717
});
714718
}
715-
}
719+
};
716720

717721
const setDefaultFunc = setFunc(ValueSource.Default);
718722
const setInheritedFunc = setFunc(ValueSource.Inherited);
@@ -731,6 +735,7 @@ export class ShorthandProperty<T extends Style, P> implements definitions.Shorth
731735
public readonly key: symbol;
732736
public readonly name: string;
733737
public readonly cssName: string;
738+
public readonly cssLocalName: string;
734739

735740
protected readonly cssValueDescriptor: PropertyDescriptor;
736741
protected readonly localValueDescriptor: PropertyDescriptor;
@@ -739,14 +744,13 @@ export class ShorthandProperty<T extends Style, P> implements definitions.Shorth
739744
public readonly sourceKey: symbol;
740745

741746
constructor(options: definitions.ShorthandPropertyOptions<P>) {
742-
const name = options.name;
743-
this.name = name;
747+
this.name = options.name;
744748

745-
const key = Symbol(name + ":propertyKey");
749+
const key = Symbol(this.name + ":propertyKey");
746750
this.key = key;
747751

748-
const cssName = `css-${options.cssName}`;
749-
this.cssName = cssName;
752+
this.cssName = `css-${options.cssName}`;
753+
this.cssLocalName = `${options.cssName}`;
750754

751755
const converter = options.converter;
752756

@@ -792,6 +796,9 @@ export class ShorthandProperty<T extends Style, P> implements definitions.Shorth
792796
this.registered = true;
793797
Object.defineProperty(cls.prototype, this.name, this.localValueDescriptor);
794798
Object.defineProperty(cls.prototype, this.cssName, this.cssValueDescriptor);
799+
if (this.cssLocalName !== this.cssName) {
800+
Object.defineProperty(cls.prototype, this.cssLocalName, this.localValueDescriptor);
801+
}
795802
}
796803
}
797804

@@ -958,5 +965,5 @@ export function makeParser<T>(isValid: (value: any) => boolean): (value: any) =>
958965
} else {
959966
throw new Error("Invalid value: " + value);
960967
}
961-
}
968+
};
962969
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { SegmentedBar as SegmentedBarDefinition, SegmentedBarItem as SegmentedBarItemDefinition, SelectedIndexChangedEventData } from "ui/segmented-bar";
22
import {
33
ViewBase, View, AddChildFromBuilder, AddArrayFromBuilder,
4-
Property, CoercibleProperty, CssProperty, Color, Style
4+
Property, CoercibleProperty, InheritedCssProperty, Color, Style
55
} from "ui/core/view";
66

77
export * from "ui/core/view";
@@ -45,7 +45,9 @@ export abstract class SegmentedBarBase extends View implements SegmentedBarDefin
4545
if (!this.items) {
4646
this.items = new Array<SegmentedBarItemBase>();
4747
}
48-
this.items.push(<SegmentedBarItemBase>value);
48+
let item = <SegmentedBarItemBase>value;
49+
this.items.push(item);
50+
this._addView(item);
4951
selectedIndexProperty.coerce(this);
5052
}
5153
}
@@ -111,5 +113,5 @@ export const itemsProperty = new Property<SegmentedBarBase, SegmentedBarItemDefi
111113
});
112114
itemsProperty.register(SegmentedBarBase);
113115

114-
export const selectedBackgroundColorProperty = new CssProperty<Style, Color>({ name: "selectedBackgroundColor", cssName: "selected-background-color", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) })
116+
export const selectedBackgroundColorProperty = new InheritedCssProperty<Style, Color>({ name: "selectedBackgroundColor", cssName: "selected-background-color", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
115117
selectedBackgroundColorProperty.register(Style);

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

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export * from "./segmented-bar-common";
88
const R_ID_TABS = 0x01020013;
99
const R_ID_TABCONTENT = 0x01020011;
1010
const R_ATTR_STATE_SELECTED = 0x010100a1;
11+
const TITLE_TEXT_VIEW_ID = 16908310; // http://developer.android.com/reference/android/R.id.html#title
1112

1213
let apiLevel: number;
1314
// TODO: Move this into widgets.
@@ -56,9 +57,13 @@ export class SegmentedBarItem extends SegmentedBarItemBase {
5657
return this._textView;
5758
}
5859

59-
public setNativeView(textView: android.widget.TextView): void {
60-
this._textView = textView;
61-
if (textView) {
60+
public setupNativeView(tabIndex: number): void {
61+
// TabHost.TabSpec.setIndicator DOES NOT WORK once the title has been set.
62+
// http://stackoverflow.com/questions/2935781/modify-tab-indicator-dynamically-in-android
63+
const titleTextView = <android.widget.TextView>this.parent.android.getTabWidget().getChildAt(tabIndex).findViewById(TITLE_TEXT_VIEW_ID);
64+
65+
this._textView = titleTextView;
66+
if (titleTextView) {
6267
applyNativeSetters(this);
6368
if (this.titleDirty) {
6469
this._update();
@@ -68,15 +73,6 @@ export class SegmentedBarItem extends SegmentedBarItemBase {
6873

6974
private titleDirty: boolean;
7075
public _update(): void {
71-
// if (this._parent && this._parent.android) {
72-
// // TabHost.TabSpec.setIndicator DOES NOT WORK once the title has been set.
73-
// // http://stackoverflow.com/questions/2935781/modify-tab-indicator-dynamically-in-android
74-
// const tabIndex = this._parent.items.indexOf(this);
75-
// const titleTextViewId = 16908310; // http://developer.android.com/reference/android/R.id.html#title
76-
// const titleTextView = <android.widget.TextView>this._parent.android.getTabWidget().getChildAt(tabIndex).findViewById(titleTextViewId);
77-
// titleTextView.setText(this.title || "");
78-
// }
79-
8076
const tv = this._textView;
8177
if (tv) {
8278
let title = this.title;
@@ -168,15 +164,12 @@ class TabContentFactory extends java.lang.Object implements android.widget.TabHo
168164
let owner = this.owner.get();
169165
if (owner) {
170166
let tv = new android.widget.TextView(owner._context);
171-
let index = parseInt(tag);
172-
// This is collapsed by default and made visibile
167+
// This is collapsed by default and made visible
173168
// by android when TabItem becomes visible/selected.
174-
// TODO: Try commenting visigility change.
169+
// TODO: Try commenting visibility change.
175170
tv.setVisibility(android.view.View.GONE);
176171
tv.setMaxLines(1);
177172
tv.setEllipsize(android.text.TextUtils.TruncateAt.END);
178-
179-
(<SegmentedBarItem>owner.items[index]).setNativeView(tv);
180173
return tv;
181174
} else {
182175
throw new Error(`Invalid owner: ${this.owner}`);
@@ -233,6 +226,7 @@ export class SegmentedBar extends SegmentedBarBase {
233226
let tabHost = this.android;
234227
this._addingTab = true;
235228
tabHost.addTab(tab);
229+
tabItem.setupNativeView(index);
236230
this._addingTab = false;
237231
}
238232

0 commit comments

Comments
 (0)
0