Merge pull request #3211 from NativeScript/zhecheva/dialog-button-backgroundColor

Background of the buttons inside dialog can be modified with CSS

apps/app/ui-tests-app/issues/issue-3211.css

@@ -0,0 +1,4 @@
+Button {
+    background-color: yellow;
+    color: cyan;
+}

apps/app/ui-tests-app/issues/issue-3211.ts

@@ -0,0 +1,12 @@
+import { alert } from "ui/dialogs";
+
+export function onTap() {
+     var options = {
+            title: "Race selection",
+            message: "Race chosen: Unicorn",
+            okButtonText: "OK"
+        };
+        alert(options).then(() => {
+            console.log("Race chosen!");
+        });
+}

apps/app/ui-tests-app/issues/issue-3211.xml

@@ -0,0 +1,5 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+    <StackLayout>
+        <Button text="alert me" tap="onTap" margin="15"/>
+    </StackLayout>
+</Page>

apps/app/ui-tests-app/issues/main-page.ts

@@ -19,6 +19,7 @@ export function pageLoaded(args: EventData) {
     examples.set("3113", "issues/issue-3113");
     examples.set("3164", "issues/issue-3164");
     examples.set("3175", "issues/issue-3175");
+    examples.set("3211", "issues/issue-3211");
 
     let viewModel = new SubMainPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;

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

@@ -60,6 +60,18 @@ export function getButtonColor(): color.Color {
     return buttonColor;
 }
 
+var buttonBackgroundColor: color.Color;
+export function getButtonBackgroundColor(): color.Color {
+    if (!buttonBackgroundColor) {
+        var btn = new button.Button();
+        applySelectors(btn);
+        buttonBackgroundColor = btn.backgroundColor;
+        btn.onUnloaded();
+    }
+
+    return buttonBackgroundColor;
+}
+
 var textFieldColor: color.Color;
 export function getTextFieldColor(): color.Color {
     if (!textFieldColor) {

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

@@ -41,15 +41,22 @@ function showDialog(builder: android.app.AlertDialog.Builder) {
     }
 
     let buttonColor = dialogsCommon.getButtonColor();
-    if (buttonColor) {
+    let buttonBackgroundColor = dialogsCommon.getButtonBackgroundColor();
+    if (buttonColor || buttonBackgroundColor) {
         let buttons : android.widget.Button[] = [];
         for (let i = 0; i < 3; i++) {
             let id = dlg.getContext().getResources().getIdentifier("android:id/button" + i, null, null);
             buttons[i] = <android.widget.Button>dlg.findViewById(id);
         }
+
         buttons.forEach(button => {
             if (button) {
-                button.setTextColor(buttonColor.android);
+                if (buttonColor) {
+                    button.setTextColor(buttonColor.android);
+                }
+                if (buttonBackgroundColor) {
+                    button.setBackgroundColor(buttonBackgroundColor.android);
+                }
             }
         });
     }