Action bar title color stylers

apps/action-bar-demo/main-page.ts

@@ -7,3 +7,14 @@ export function itemTap(args: observable.EventData) {
     });
 }
  
+export function setStyle(args) {
+    var page = args.object.actionBar.page;
+
+    page.css = "ActionBar { color: red; }";
+}
+
+export function clearStyle(args) {
+    var page = args.object.actionBar.page;
+
+    page.css = "Page { background-color: red; }";
+}

apps/action-bar-demo/main-page.xml

@@ -3,7 +3,8 @@
   <Page.actionBar>
     <ActionBar title="Title" class="custom-action-bar">
       <ActionBar.actionItems>
-        <ActionItem text="hi" />
+        <ActionItem text="set" tap="setStyle"/>
+        <ActionItem text="clear" tap="clearStyle"/>
       </ActionBar.actionItems>
     </ActionBar>
   </Page.actionBar>

ui/action-bar/action-bar.ios.ts

@@ -129,7 +129,7 @@ export class ActionBar extends common.ActionBar {
 
         return barButtonItem;
     }
-
+    
     public _onTitlePropertyChanged() {
         if (!this.page) {
             return;
@@ -178,6 +178,11 @@ export class ActionBar extends common.ActionBar {
         view.View.layoutChild(this, this.titleView, 0, 0, right - left, this._navigationBarHeight);
         super.onLayout(left, top, right, bottom);
     }
+
+    public _shouldApplyStyleHandlers() {
+        var topFrame = frameModule.topmost();
+        return !!topFrame;
+    }
 }
 
 class TapBarItemHandlerImpl extends NSObject {

ui/core/view-common.ts

@@ -1092,6 +1092,11 @@ export class View extends proxy.ProxyObject implements definition.View {
         return this._isVisibleCache;
     }
 
+    public _shouldApplyStyleHandlers() {
+        // If we have native view we are ready to apply style handelr;
+        return !!this._nativeView;
+    }
+
     public focus(): boolean {
         return undefined;
     }

ui/core/view.d.ts

@@ -479,6 +479,7 @@ declare module "ui/core/view" {
         _onDetached(force?: boolean): void;
         _createUI(): void;
 
+        _shouldApplyStyleHandlers();
         _checkMetadataOnPropertyChanged(metadata: dependencyObservable.PropertyMetadata);
 
         _updateLayout(): void;

ui/styling/style.ts

@@ -617,7 +617,7 @@ export class Style extends DependencyObservable implements styling.Style {
 
     private _applyStyleProperty(property: Property, newValue: any) {
 
-        if (!this._view._nativeView) {
+        if (!this._view._shouldApplyStyleHandlers()) {
             return;
         }
 

ui/styling/stylers.android.ts

@@ -621,6 +621,28 @@ export class SearchBarStyler implements definition.stylers.Styler {
     }
 }
 
+export class ActionBarStyler implements definition.stylers.Styler {
+    // color
+    private static setColorProperty(view: view.View, newValue: any) {
+        var toolbar = (<android.support.v7.widget.Toolbar>view._nativeView);
+        toolbar.setTitleTextColor(newValue);
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        // there is no toolbar.getTitleTextColor - so default to black
+        if (types.isNullOrUndefined(nativeValue)) {
+            nativeValue = android.graphics.Color.BLACK;
+        }
+        (<android.support.v7.widget.Toolbar>view._nativeView).setTitleTextColor(nativeValue);
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            ActionBarStyler.setColorProperty,
+            ActionBarStyler.resetColorProperty), "ActionBar");
+    }
+}
+
 // Register all styler at the end.
 export function _registerDefaultStylers() {
     style.registerNoStylingClass("Frame");
@@ -630,4 +652,5 @@ export function _registerDefaultStylers() {
     ActivityIndicatorStyler.registerHandlers();
     SegmentedBarStyler.registerHandlers();
     SearchBarStyler.registerHandlers();
+    ActionBarStyler.registerHandlers();
 }

ui/styling/stylers.ios.ts

@@ -5,6 +5,7 @@ import stylersCommon = require("./stylers-common");
 import enums = require("ui/enums");
 import font = require("ui/styling/font");
 import background = require("ui/styling/background");
+import frame = require("ui/frame");
 
 global.moduleMerge(stylersCommon, exports);
 
@@ -474,6 +475,31 @@ export class SearchBarStyler implements definition.stylers.Styler {
     }
 }
 
+export class ActionBarStyler implements definition.stylers.Styler {
+    // color
+    private static setColorProperty(view: view.View, newValue: any) {
+        var topFrame = frame.topmost();
+        if (topFrame) {
+            var bar = topFrame.ios.controller.navigationBar;
+            (<any>bar).titleTextAttributes = { [NSForegroundColorAttributeName]: newValue };
+        }
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        var topFrame = frame.topmost();
+        if (topFrame) {
+            var bar = topFrame.ios.controller.navigationBar;
+            (<any>bar).titleTextAttributes = null;
+        }
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            ActionBarStyler.setColorProperty,
+            ActionBarStyler.resetColorProperty), "ActionBar");
+    }
+}
+
 function setTextAlignment(view: TextUIView, value: string) {
     switch (value) {
         case enums.TextAlignment.left:
@@ -499,4 +525,5 @@ export function _registerDefaultStylers() {
     TextViewStyler.registerHandlers();
     SegmentedBarStyler.registerHandlers();
     SearchBarStyler.registerHandlers();
+    ActionBarStyler.registerHandlers();
 }