ActionBar and TabView colors

CrossPlatformModules.csproj

@@ -189,6 +189,30 @@
       <SubType>Designer</SubType>
     </Content>
     <Content Include="apps\tests\pages\tab-view.xml" />
+    <Content Include="apps\ui-tests-app\action-bar\all.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\tab-view\background.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\tab-view\all.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\tab-view\tabsBackground.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\tab-view\selected.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\tab-view\color.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\action-bar\background.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\action-bar\color.xml">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="apps\ui-tests-app\app.css" />
     <TypeScriptCompile Include="apps\ui-tests-app\nordic\nordic.ts">
       <DependentUpon>nordic.xml</DependentUpon>
@@ -995,6 +1019,9 @@
     <Content Include="apps\ui-tests-app\layouts\wrap.xml" />
     <Content Include="apps\ui-tests-app\css\background.xml" />
     <Content Include="apps\ui-tests-app\image-view\roundbtn.xml" />
+    <Content Include="apps\ui-tests-app\mainPage.xml">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="apps\ui-tests-app\nordic\nordic.xml" />
     <Content Include="apps\ui-tests-app\pages\handlers.xml" />
     <Content Include="apps\ui-tests-app\pages\htmlview.xml" />
@@ -2004,7 +2031,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

apps/ui-tests-app/action-bar/all.xml

@@ -0,0 +1,13 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title" style="background-color: blue; color: yellow;">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing"/>
+  </StackLayout>
+</Page>

apps/ui-tests-app/action-bar/background.xml

@@ -0,0 +1,13 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title" style="background-color: green;">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing"/>
+  </StackLayout>
+</Page>

apps/ui-tests-app/action-bar/color.xml

@@ -0,0 +1,13 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title" style="background-color: green;">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing"/>
+  </StackLayout>
+</Page>

apps/ui-tests-app/mainPage.ts

@@ -1,48 +1,89 @@
 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<string, string>();
 
-    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 = <pages.Page>args.object;
+    page.bindingContext = VM;
 
-    var page = new pages.Page();
-    page.content = grid;
-    return page;
-}
+}
+
+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("actAll", "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("tabAll", "tab-view/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");

apps/ui-tests-app/mainPage.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+  <GridLayout rows="auto, *">
+    <Button text="Run" tap="selectExample" />
+    <TextView row="1" text="{{ selected }}"/>
+  </GridLayout>
+</Page>

apps/ui-tests-app/tab-view/all.xml

@@ -0,0 +1,20 @@
+<Page>
+  <TabView style="color: yellow; background-color: green;" selectedColor="red" tabsBackgroundColor="blue">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

apps/ui-tests-app/tab-view/background.xml

@@ -0,0 +1,20 @@
+<Page>
+  <TabView style="background-color: green;">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

apps/ui-tests-app/tab-view/color.xml

@@ -0,0 +1,20 @@
+<Page>
+  <TabView style="color: green;">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

apps/ui-tests-app/tab-view/selected.xml

@@ -0,0 +1,20 @@
+<Page>
+  <TabView selectedColor="green">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

apps/ui-tests-app/tab-view/tabsBackground.xml

@@ -0,0 +1,20 @@
+<Page>
+  <TabView selectedColor="green">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

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));
+
 (<proxy.PropertyMetadata>selectedIndexProperty.metadata).onSetNativeValue = function (data: dependencyObservable.PropertyChangeData) {
     var tabView = <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<any>) {
@@ -177,6 +186,14 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
             value instanceof color.Color ? value : new color.Color(<any>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(<any>value));
+    }
+
     public _onSelectedIndexPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
         var index = this.selectedIndex;
         if (types.isUndefined(index)) {

ui/tab-view/tab-view.android.ts

@@ -150,6 +150,14 @@ function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeD
 }
 (<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
 
+function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var tabLayout = (<TabView>data.object)._getAndroidTabView();
+    if (tabLayout && data.newValue instanceof color.Color) {
+        tabLayout.setBackgroundColor(data.newValue.android);
+    }
+}
+(<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
+
 export class TabView extends common.TabView {
     private _grid: org.nativescript.widgets.GridLayout;
     private _tabLayout: org.nativescript.widgets.TabLayout;

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.
          */

ui/tab-view/tab-view.ios.ts

@@ -105,6 +105,14 @@ function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeD
 }
 (<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
 
+function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var tabView = <TabView>data.object;
+    if (data.newValue instanceof color.Color) {
+        tabView.ios.tabBar.barTintColor = data.newValue.ios;
+    }
+}
+(<proxy.PropertyMetadata>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 = <TabViewItem>newItems[i];
 
@@ -205,6 +215,9 @@ export class TabView extends common.TabView {
                     (<any>tabBarItem).titlePositionAdjustment = { horizontal: 0, vertical: -20 };
                 }
             }
+            tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.UIControlStateNormal);
+            tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.UIControlStateSelected);
+
             newController.tabBarItem = tabBarItem;
             newControllers.addObject(newController);
         }