From 7e85de351ef6a2a3b85ee417c3033ea8e4aed585 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Thu, 29 Oct 2015 15:27:12 +0200
Subject: [PATCH] IOS stylers

---
 CrossPlatformModules.csproj            |  5 +++
 apps/ui-tests-app/action-bar/all.ts    |  5 +++
 apps/ui-tests-app/action-bar/all.xml   |  2 +-
 apps/ui-tests-app/action-bar/clean.xml | 13 +++++++
 apps/ui-tests-app/action-bar/color.ts  |  5 +++
 apps/ui-tests-app/action-bar/color.xml |  4 +--
 ui/action-bar/action-bar.d.ts          |  5 +++
 ui/action-bar/action-bar.ios.ts        | 18 ++++++++++
 ui/styling/stylers.ios.ts              | 49 +++++++++++++++++++++-----
 9 files changed, 95 insertions(+), 11 deletions(-)
 create mode 100644 apps/ui-tests-app/action-bar/all.ts
 create mode 100644 apps/ui-tests-app/action-bar/clean.xml
 create mode 100644 apps/ui-tests-app/action-bar/color.ts

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 8699cc45e..e0dc05e2a 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -192,6 +192,9 @@
     <Content Include="apps\ui-tests-app\action-bar\all.xml">
       <SubType>Designer</SubType>
     </Content>
+    <Content Include="apps\ui-tests-app\action-bar\clean.xml">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="apps\ui-tests-app\tab-view\background.xml">
       <SubType>Designer</SubType>
     </Content>
@@ -214,6 +217,8 @@
       <SubType>Designer</SubType>
     </Content>
     <Content Include="apps\ui-tests-app\app.css" />
+    <TypeScriptCompile Include="apps\ui-tests-app\action-bar\all.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\action-bar\color.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\nordic\nordic.ts">
       <DependentUpon>nordic.xml</DependentUpon>
     </TypeScriptCompile>
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
index a0936859c..240f51268 100644
--- a/apps/ui-tests-app/action-bar/all.xml
+++ b/apps/ui-tests-app/action-bar/all.xml
@@ -8,6 +8,6 @@
     </ActionBar>
   </Page.actionBar>
   <StackLayout>
-    <Button text="do nothing"/>
+    <Button text="go to cleared page" tap="navigate"/>
   </StackLayout>
 </Page>
\ 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 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing"/>
+  </StackLayout>
+</Page>
\ 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
index a5510dc10..7ee62326c 100644
--- a/apps/ui-tests-app/action-bar/color.xml
+++ b/apps/ui-tests-app/action-bar/color.xml
@@ -1,6 +1,6 @@
 <Page>
   <Page.actionBar>
-    <ActionBar title="Page Title" style="background-color: green;">
+    <ActionBar title="Page Title" style="color: green;">
       <NavigationButton text="go back"/>
       <ActionBar.actionItems>
         <ActionItem text="ITEM" />
@@ -8,6 +8,6 @@
     </ActionBar>
   </Page.actionBar>
   <StackLayout>
-    <Button text="do nothing"/>
+    <Button text="go to cleared page" tap="navigate"/>
   </StackLayout>
 </Page>
\ 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 = <any>{ [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.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;
-            (<any>bar).titleTextAttributes = { [NSForegroundColorAttributeName]: newValue };
+            var navBar = topFrame.ios.controller.navigationBar;
+            navBar.titleTextAttributes = <any>{ [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;
-            (<any>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");
     }
 }