fix(style): Styles are not applied to dialogs (#5612)

tns-core-modules/ui/dialogs/dialogs-common.ts

@@ -1,4 +1,4 @@
-// Deifinitions.
+// Types.
 import { View } from "../core/view";
 import { Color } from "../../color";
 import { Page } from "../page";
@@ -42,77 +42,68 @@ export function getCurrentPage(): Page {
     if (topmostFrame) {
         return topmostFrame.currentPage;
     }
-    
+
     return undefined;
 }
 
-function applySelectors(view: View) {
+function applySelectors<T extends View>(view: T, callback: (view: T) => void) {
     let currentPage = getCurrentPage();
     if (currentPage) {
         let styleScope = currentPage._styleScope;
         if (styleScope) {
-            styleScope.matchSelectors(view);
+            view._inheritStyleScope(styleScope);
+            view.onLoaded();
+            callback(view);
+            view.onUnloaded();
         }
     }
 }
 
-let buttonColor: Color;
+let button: View;
-let buttonBackgroundColor: Color;
+let label: View;
+let textField: View;
 
-function getButtonColors(): void {
+export function getButtonColors(): { color: Color, backgroundColor: Color } {
-    const Button = require("ui/button").Button;
+    if (!button) {
-    const btn = new Button();
+        const Button = require("ui/button").Button;
-    applySelectors(btn);
+        button = new Button;
-    buttonColor = btn.color;
-    buttonBackgroundColor = btn.backgroundColor;
-    btn.onUnloaded();
-}
-
-// NOTE: This will fail if app.css is changed.
-export function getButtonColor(): Color {
-    if (!buttonColor) {
-        getButtonColors();
     }
 
-    return buttonColor;
+    let buttonColor: Color;
+    let buttonBackgroundColor: Color;
+    applySelectors(button, (btn) => {
+        buttonColor = btn.color;
+        buttonBackgroundColor = <Color>btn.backgroundColor;
+    });
+    return { color: buttonColor, backgroundColor: buttonBackgroundColor };
 }
 
-// NOTE: This will fail if app.css is changed.
-export function getButtonBackgroundColor(): Color {
-    if (!buttonBackgroundColor) {
-        getButtonColors();
-    }
-
-    return buttonBackgroundColor;
-}
-
-let textFieldColor: Color;
-export function getTextFieldColor(): Color {
-    if (!textFieldColor) {
-        const TextField = require("ui/text-field").TextField;
-        const tf = new TextField();
-        applySelectors(tf);
-        textFieldColor = tf.color;
-        tf.onUnloaded();
-    }
-
-    return textFieldColor;
-}
-
-let labelColor: Color;
-// NOTE: This will fail if app.css is changed.
 export function getLabelColor(): Color {
-    if (!labelColor) {
+    if (!label) {
         const Label = require("ui/label").Label;
-        let lbl = new Label();
+        label = new Label;
-        applySelectors(lbl);
-        labelColor = lbl.color;
-        lbl.onUnloaded();
     }
 
+    let labelColor: Color;
+    applySelectors(label, (lbl) => {
+        labelColor = lbl.color;
+    });
     return labelColor;
 }
 
+export function getTextFieldColor(): Color {
+    if (!textField) {
+        const TextField = require("ui/text-field").TextField;
+        textField = new TextField();
+    }
+
+    let textFieldColor: Color;
+    applySelectors(textField, (tf) => {
+        textFieldColor = tf.color;
+    });
+    return textFieldColor;
+}
+
 export function isDialogOptions(arg): boolean {
     return arg && (arg.message || arg.title);
 }

tns-core-modules/ui/dialogs/dialogs.android.ts

@@ -2,7 +2,7 @@
  * Android specific dialogs functions implementation.
  */
 import { DialogOptions, ConfirmOptions, PromptOptions, PromptResult, LoginOptions, LoginResult, ActionOptions } from ".";
-import { getLabelColor, getButtonColor, getButtonBackgroundColor, isDialogOptions, inputType, ALERT, OK, CONFIRM, CANCEL, PROMPT, LOGIN } from "./dialogs-common";
+import { getLabelColor, getButtonColors, isDialogOptions, inputType, ALERT, OK, CONFIRM, CANCEL, PROMPT, LOGIN } from "./dialogs-common";
 import { android as androidApp } from "../../application";
 
 export * from "./dialogs-common";
@@ -43,9 +43,9 @@ function showDialog(builder: android.app.AlertDialog.Builder) {
         }
     }
 
-    let buttonColor = getButtonColor();
+    let { color, backgroundColor } = getButtonColors();
-    let buttonBackgroundColor = getButtonBackgroundColor();
+
-    if (buttonColor) {
+    if (color) {
         let buttons: android.widget.Button[] = [];
         for (let i = 0; i < 3; i++) {
             let id = dlg.getContext().getResources().getIdentifier("android:id/button" + i, null, null);
@@ -54,11 +54,11 @@ function showDialog(builder: android.app.AlertDialog.Builder) {
 
         buttons.forEach(button => {
             if (button) {
-                if (buttonColor) {
+                if (color) {
-                    button.setTextColor(buttonColor.android);
+                    button.setTextColor(color.android);
                 }
-                if (buttonBackgroundColor) {
+                if (backgroundColor) {
-                    button.setBackgroundColor(buttonBackgroundColor.android);
+                    button.setBackgroundColor(backgroundColor.android);
                 }
             }
         });

tns-core-modules/ui/dialogs/dialogs.ios.ts

@@ -3,7 +3,7 @@
  */
 
 import { ConfirmOptions, PromptOptions, PromptResult, LoginOptions, LoginResult, ActionOptions } from ".";
-import { getCurrentPage, getLabelColor, getButtonColor, getTextFieldColor, isDialogOptions, inputType, ALERT, OK, CONFIRM, CANCEL, PROMPT, LOGIN } from "./dialogs-common";
+import { getCurrentPage, getLabelColor, getButtonColors, getTextFieldColor, isDialogOptions, inputType, ALERT, OK, CONFIRM, CANCEL, PROMPT, LOGIN } from "./dialogs-common";
 import { isString, isDefined, isFunction } from "../../utils/types";
 
 export * from "./dialogs-common";
@@ -162,13 +162,14 @@ export function login(arg: any): Promise<LoginResult> {
             let passwordTextField: UITextField;
             let alertController = UIAlertController.alertControllerWithTitleMessagePreferredStyle(options.title, options.message, UIAlertControllerStyle.Alert);
 
+            let textFieldColor = getTextFieldColor();
+            
             alertController.addTextFieldWithConfigurationHandler((arg: UITextField) => {
                 arg.placeholder = "Login";
                 arg.text = isString(options.userName) ? options.userName : "";
 
-                let color = getTextFieldColor();
+                if (textFieldColor) {
-                if (color) {
+                    arg.textColor = arg.tintColor = textFieldColor.ios;
-                    arg.textColor = arg.tintColor = color.ios;
                 }
             });
 
@@ -177,9 +178,8 @@ export function login(arg: any): Promise<LoginResult> {
                 arg.secureTextEntry = true;
                 arg.text = isString(options.password) ? options.password : "";
 
-                let color = getTextFieldColor();
+                if (textFieldColor) {
-                if (color) {
+                    arg.textColor = arg.tintColor = textFieldColor.ios;
-                    arg.textColor = arg.tintColor = color.ios;
                 }
             });
 
@@ -214,7 +214,7 @@ function showUIAlertController(alertController: UIAlertController) {
                 alertController.popoverPresentationController.permittedArrowDirections = 0;
             }
 
-            let color = getButtonColor();
+            let color = getButtonColors().color;
             if (color) {
                 alertController.view.tintColor = color.ios;
             }