diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 9872c4ef1..10a884de1 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -189,7 +189,39 @@
Designer
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+
nordic.xml
@@ -995,6 +1027,9 @@
+
+ Designer
+
diff --git a/apps/ui-tests-app/action-bar/all.ts b/apps/ui-tests-app/action-bar/all.ts
new file mode 100644
index 000000000..ac77dc39d
--- /dev/null
+++ b/apps/ui-tests-app/action-bar/all.ts
@@ -0,0 +1,5 @@
+import frame = require("ui/frame");
+
+export function navigate(args) {
+ frame.topmost().navigate("action-bar/clean");
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/action-bar/all.xml b/apps/ui-tests-app/action-bar/all.xml
new file mode 100644
index 000000000..240f51268
--- /dev/null
+++ b/apps/ui-tests-app/action-bar/all.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/action-bar/background.xml b/apps/ui-tests-app/action-bar/background.xml
new file mode 100644
index 000000000..a5510dc10
--- /dev/null
+++ b/apps/ui-tests-app/action-bar/background.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/action-bar/clean.xml b/apps/ui-tests-app/action-bar/clean.xml
new file mode 100644
index 000000000..f31afa226
--- /dev/null
+++ b/apps/ui-tests-app/action-bar/clean.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/action-bar/color.ts b/apps/ui-tests-app/action-bar/color.ts
new file mode 100644
index 000000000..ac77dc39d
--- /dev/null
+++ b/apps/ui-tests-app/action-bar/color.ts
@@ -0,0 +1,5 @@
+import frame = require("ui/frame");
+
+export function navigate(args) {
+ frame.topmost().navigate("action-bar/clean");
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/action-bar/color.xml b/apps/ui-tests-app/action-bar/color.xml
new file mode 100644
index 000000000..7ee62326c
--- /dev/null
+++ b/apps/ui-tests-app/action-bar/color.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/mainPage.ts b/apps/ui-tests-app/mainPage.ts
index 8bf87fabf..9f12c5d41 100644
--- a/apps/ui-tests-app/mainPage.ts
+++ b/apps/ui-tests-app/mainPage.ts
@@ -1,48 +1,91 @@
import button = require("ui/button");
-import dialogs = require("ui/dialogs");
import frame = require("ui/frame");
import gridModule = require("ui/layouts/grid-layout");
import pages = require("ui/page");
import text = require("ui/text-view");
import fs = require("file-system");
import trace = require("trace");
+import observable = require("data/observable");
+import view = require("ui/core/view");
+import dialogs = require("ui/dialogs");
trace.enable();
trace.setCategories(trace.categories.Test);
-var list: string[] = ["pages", "bindings", "css", "dialogs", "image-view", "layouts", "modal-view", "nordic", "web-view"];
-
-// basePath is auto-changed when building multiple apps
var basePath = "";
-export function createPage() {
- var txtInput = new text.TextView();
- var btn = new button.Button();
- btn.text = "Run";
- btn.on(button.Button.tapEvent, function () {
- var filePath, fileName, i = 0;
- while (i < list.length) {
- filePath = fs.path.join(__dirname, list[i], txtInput.text);
- if ((fs.File.exists(filePath + ".xml") || (fs.File.exists(filePath + ".js")))) {
- fileName = basePath + list[i] + "/" + txtInput.text;
- break;
- }
- i++;
- }
- if (i < list.length) {
- frame.topmost().navigate(fileName);
- } else {
- dialogs.alert("Cannot find page: " + txtInput.text);
- }
- });
+var VM = new observable.Observable();
+var examples = new Map();
- var grid = new gridModule.GridLayout();
- grid.addRow(new gridModule.ItemSpec(1, gridModule.GridUnitType.auto));
- grid.addRow(new gridModule.ItemSpec());
- gridModule.GridLayout.setRow(txtInput, 1);
- grid.addChild(btn);
- grid.addChild(txtInput);
+export function pageLoaded(args) {
+ var page = args.object;
+ page.bindingContext = VM;
- var page = new pages.Page();
- page.content = grid;
- return page;
-}
\ No newline at end of file
+}
+
+export function selectExample() {
+ var ex: string = VM.get("selected");
+ if (examples.has(ex)) {
+ frame.topmost().navigate(basePath + examples.get(ex));
+ }
+ else {
+ dialogs.alert("Cannot find example: " + ex);
+ }
+}
+
+examples.set("basics", "bindings/basics");
+
+examples.set("actColor", "action-bar/color");
+examples.set("actBG", "action-bar/background");
+examples.set("actStyle", "action-bar/all");
+
+examples.set("tabColor", "tab-view/color");
+examples.set("tabBG", "tab-view/background");
+examples.set("tabTabsBG", "tab-view/tabsBackground");
+examples.set("tabSelected", "tab-view/selected");
+examples.set("tabStyle", "tab-view/all");
+
+examples.set("segmentedStyle", "segmented-bar/all");
+
+examples.set("basics", "bindings/basics");
+examples.set("xmlbasics", "bindings/xmlbasics");
+
+examples.set("background", "css/background");
+examples.set("import", "css/import");
+examples.set("radius", "css/radius");
+examples.set("styles", "css/styles");
+
+examples.set("dialogs", "dialogs/dialogs");
+examples.set("view-model", "dialogs/view-model");
+
+examples.set("roundbtn", "image-view/roundbtn");
+
+examples.set("absolute", "layouts/absolute");
+examples.set("dock", "layouts/dock");
+examples.set("grid", "layouts/grid");
+examples.set("myview", "layouts/myview");
+examples.set("stack", "layouts/stack");
+examples.set("wrap", "layouts/wrap");
+
+examples.set("login-page", "modal-view/login-page");
+examples.set("modalview", "modal-view/modalview");
+
+examples.set("nordic", "nordic/nordic");
+
+examples.set("text", "pages/text");
+examples.set("background", "pages/background");
+examples.set("console", "pages/console");
+examples.set("gestures", "pages/gestures");
+examples.set("handlers", "pages/handlers");
+examples.set("htmlview", "pages/htmlview");
+examples.set("i61", "pages/i61");
+examples.set("i73", "pages/i73");
+examples.set("i86", "pages/i86");
+examples.set("listview_binding", "pages/listview_binding");
+examples.set("switchandprogress", "pages/switchandprogress");
+examples.set("textfield", "pages/textfield");
+
+examples.set("webview", "web-view/webview");
+examples.set("webviewhtmlwithimages", "web-view/webviewhtmlwithimages");
+examples.set("webviewlocalfile", "web-view/webviewlocalfile");
+
+//VM.set("selected", "tabAll");
\ No newline at end of file
diff --git a/apps/ui-tests-app/mainPage.xml b/apps/ui-tests-app/mainPage.xml
new file mode 100644
index 000000000..9e64e6a5e
--- /dev/null
+++ b/apps/ui-tests-app/mainPage.xml
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/segmented-bar/all.xml b/apps/ui-tests-app/segmented-bar/all.xml
new file mode 100644
index 000000000..d145934da
--- /dev/null
+++ b/apps/ui-tests-app/segmented-bar/all.xml
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/tab-view/all.xml b/apps/ui-tests-app/tab-view/all.xml
new file mode 100644
index 000000000..5825d3d9b
--- /dev/null
+++ b/apps/ui-tests-app/tab-view/all.xml
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/tab-view/background.xml b/apps/ui-tests-app/tab-view/background.xml
new file mode 100644
index 000000000..547492011
--- /dev/null
+++ b/apps/ui-tests-app/tab-view/background.xml
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/tab-view/color.xml b/apps/ui-tests-app/tab-view/color.xml
new file mode 100644
index 000000000..e4dec7a65
--- /dev/null
+++ b/apps/ui-tests-app/tab-view/color.xml
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/tab-view/selected.xml b/apps/ui-tests-app/tab-view/selected.xml
new file mode 100644
index 000000000..3a8a12f60
--- /dev/null
+++ b/apps/ui-tests-app/tab-view/selected.xml
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/tab-view/tabsBackground.xml b/apps/ui-tests-app/tab-view/tabsBackground.xml
new file mode 100644
index 000000000..9b74b46dc
--- /dev/null
+++ b/apps/ui-tests-app/tab-view/tabsBackground.xml
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ui/action-bar/action-bar.d.ts b/ui/action-bar/action-bar.d.ts
index ac16df5b4..1b85ccb80 100644
--- a/ui/action-bar/action-bar.d.ts
+++ b/ui/action-bar/action-bar.d.ts
@@ -203,4 +203,9 @@ declare module "ui/action-bar" {
export class NavigationButton extends ActionItemBase {
}
+
+ //@private
+ export function _setNavBarColor(navBar: UINavigationBar, color: UIColor);
+ export function _setNavBarBackgroundColor(navBar: UINavigationBar, color: UIColor);
+ //@endprivate
}
\ No newline at end of file
diff --git a/ui/action-bar/action-bar.ios.ts b/ui/action-bar/action-bar.ios.ts
index 6c26af345..2040c9f1d 100644
--- a/ui/action-bar/action-bar.ios.ts
+++ b/ui/action-bar/action-bar.ios.ts
@@ -80,6 +80,9 @@ export class ActionBar extends common.ActionBar {
// Populate action items
this.populateMenuItems(navigationItem);
+
+ // update colors explicitly - they may have to be cleared form a previous page
+ this.updateColors(navigationBar);
}
private populateMenuItems(navigationItem: UINavigationItem) {
@@ -129,6 +132,21 @@ export class ActionBar extends common.ActionBar {
return barButtonItem;
}
+ private updateColors(navBar: UINavigationBar) {
+ var color = this.color;
+ if (color) {
+ navBar.titleTextAttributes = { [NSForegroundColorAttributeName]: color.ios };
+ navBar.tintColor = color.ios;
+ }
+ else {
+ navBar.titleTextAttributes = null;
+ navBar.tintColor = null;
+ }
+
+ var bgColor = this.backgroundColor;
+ navBar.barTintColor = bgColor ? bgColor.ios : null;
+ }
+
public _onTitlePropertyChanged() {
if (!this.page) {
return;
diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts
index 7568f0847..265b2f356 100644
--- a/ui/styling/stylers.android.ts
+++ b/ui/styling/stylers.android.ts
@@ -766,6 +766,7 @@ export class ActionBarStyler implements definition.stylers.Styler {
private static setColorProperty(view: view.View, newValue: any) {
var toolbar = (view._nativeView);
toolbar.setTitleTextColor(newValue);
+
}
private static resetColorProperty(view: view.View, nativeValue: any) {
diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts
index ec4d24df2..c6a0e988d 100644
--- a/ui/styling/stylers.ios.ts
+++ b/ui/styling/stylers.ios.ts
@@ -16,6 +16,14 @@ interface TextUIView {
textColor: UIColor;
}
+var ignorePropertyHandler = new stylersCommon.StylePropertyChangedHandler(
+ (view, val) => {
+ // empty
+ },
+ (view, val) => {
+ // empty
+ });
+
export class DefaultStyler implements definition.stylers.Styler {
//Background methods
private static setBackgroundInternalProperty(view: view.View, newValue: any) {
@@ -537,13 +545,13 @@ export class SwitchStyler implements definition.stylers.Styler {
SwitchStyler.resetColorProperty,
SwitchStyler.getNativeColorValue), "Switch");
- var bkgHandler = new stylersCommon.StylePropertyChangedHandler(
+ style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
SwitchStyler.setBackgroundColorProperty,
SwitchStyler.resetBackgroundColorProperty,
- SwitchStyler.getBackgroundColorProperty);
+ SwitchStyler.getBackgroundColorProperty), "Switch");
- style.registerHandler(style.backgroundColorProperty, bkgHandler, "Switch");
- style.registerHandler(style.backgroundInternalProperty, bkgHandler, "Switch");
+ // Ignore the default backgroundInternalProperty handler
+ style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "Switch");
}
}
@@ -634,16 +642,35 @@ export class ActionBarStyler implements definition.stylers.Styler {
private static setColorProperty(view: view.View, newValue: any) {
var topFrame = frame.topmost();
if (topFrame) {
- var bar = topFrame.ios.controller.navigationBar;
- (bar).titleTextAttributes = { [NSForegroundColorAttributeName]: newValue };
+ var navBar = topFrame.ios.controller.navigationBar;
+ navBar.titleTextAttributes = { [NSForegroundColorAttributeName]: newValue };
+ navBar.tintColor = newValue;
}
}
private static resetColorProperty(view: view.View, nativeValue: any) {
var topFrame = frame.topmost();
if (topFrame) {
- var bar = topFrame.ios.controller.navigationBar;
- (bar).titleTextAttributes = null;
+ var navBar = topFrame.ios.controller.navigationBar;
+ navBar.titleTextAttributes = null;
+ navBar.tintColor = null;
+ }
+ }
+
+ // background-color
+ private static setBackgroundColorProperty(view: view.View, newValue: any) {
+ var topFrame = frame.topmost();
+ if (topFrame) {
+ var navBar = topFrame.ios.controller.navigationBar;
+ navBar.barTintColor = newValue;
+ }
+ }
+
+ private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
+ var topFrame = frame.topmost();
+ if (topFrame) {
+ var navBar = topFrame.ios.controller.navigationBar;
+ navBar.barTintColor = null;
}
}
@@ -651,6 +678,12 @@ export class ActionBarStyler implements definition.stylers.Styler {
style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
ActionBarStyler.setColorProperty,
ActionBarStyler.resetColorProperty), "ActionBar");
+
+ style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
+ ActionBarStyler.setBackgroundColorProperty,
+ ActionBarStyler.resetBackgroundColorProperty), "ActionBar");
+
+ style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "ActionBar");
}
}
diff --git a/ui/tab-view/tab-view-common.ts b/ui/tab-view/tab-view-common.ts
index eac3fcbd3..00736e749 100644
--- a/ui/tab-view/tab-view-common.ts
+++ b/ui/tab-view/tab-view-common.ts
@@ -58,6 +58,7 @@ 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";
@@ -83,6 +84,13 @@ var selectedColorProperty = new dependencyObservable.Property(
undefined,
dependencyObservable.PropertyMetadataSettings.None));
+var tabsBackgroundColorProperty = new dependencyObservable.Property(
+ TABS_BACKGROUND_COLOR,
+ TAB_VIEW,
+ new proxy.PropertyMetadata(
+ undefined,
+ dependencyObservable.PropertyMetadataSettings.None));
+
(selectedIndexProperty.metadata).onSetNativeValue = function (data: dependencyObservable.PropertyChangeData) {
var tabView = data.object;
tabView._onSelectedIndexPropertyChangedSetNativeValue(data);
@@ -97,6 +105,7 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
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) {
@@ -177,6 +186,14 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
value instanceof color.Color ? value : new color.Color(value));
}
+ get tabsBackgroundColor(): color.Color {
+ return this._getValue(TabView.tabsBackgroundColorProperty);
+ }
+ set tabsBackgroundColor(value: color.Color) {
+ this._setValue(TabView.tabsBackgroundColorProperty,
+ value instanceof color.Color ? value : new color.Color(value));
+ }
+
public _onSelectedIndexPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
var index = this.selectedIndex;
if (types.isUndefined(index)) {
diff --git a/ui/tab-view/tab-view.android.ts b/ui/tab-view/tab-view.android.ts
index 4f9515217..77982bc36 100644
--- a/ui/tab-view/tab-view.android.ts
+++ b/ui/tab-view/tab-view.android.ts
@@ -150,6 +150,14 @@ function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeD
}
(common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
+function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+ var tabLayout = (data.object)._getAndroidTabView();
+ if (tabLayout && data.newValue instanceof color.Color) {
+ tabLayout.setBackgroundColor(data.newValue.android);
+ }
+}
+(common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
+
export class TabView extends common.TabView {
private _grid: org.nativescript.widgets.GridLayout;
private _tabLayout: org.nativescript.widgets.TabLayout;
diff --git a/ui/tab-view/tab-view.d.ts b/ui/tab-view/tab-view.d.ts
index 2e80b72f0..f97073152 100644
--- a/ui/tab-view/tab-view.d.ts
+++ b/ui/tab-view/tab-view.d.ts
@@ -66,6 +66,11 @@ declare module "ui/tab-view" {
*/
selectedColor: color.Color;
+ /**
+ * Gets or sets the color used for background of the tab items.
+ */
+ tabsBackgroundColor: color.Color;
+
/**
* 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.
*/
diff --git a/ui/tab-view/tab-view.ios.ts b/ui/tab-view/tab-view.ios.ts
index 4d93255e6..2b4b93a87 100644
--- a/ui/tab-view/tab-view.ios.ts
+++ b/ui/tab-view/tab-view.ios.ts
@@ -105,6 +105,14 @@ function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeD
}
(common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
+function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+ var tabView = data.object;
+ if (data.newValue instanceof color.Color) {
+ tabView.ios.tabBar.barTintColor = data.newValue.ios;
+ }
+}
+(common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
+
export class TabView extends common.TabView {
private _ios: UITabBarControllerImpl;
private _delegate: UITabBarControllerDelegateImpl;
@@ -179,6 +187,8 @@ export class TabView extends common.TabView {
var newControllers: NSMutableArray = NSMutableArray.alloc().initWithCapacity(length);
var newController: UIViewController;
+ var states = getTitleAttributesForStates(this);
+
for (i = 0; i < length; i++) {
item = newItems[i];
@@ -205,6 +215,9 @@ export class TabView extends common.TabView {
(tabBarItem).titlePositionAdjustment = { horizontal: 0, vertical: -20 };
}
}
+ tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.UIControlStateNormal);
+ tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.UIControlStateSelected);
+
newController.tabBarItem = tabBarItem;
newControllers.addObject(newController);
}
@@ -311,6 +324,8 @@ 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 < this.items.length; i++) {