From 4840fb609d7dfd09971fe329d20324d0322c267a Mon Sep 17 00:00:00 2001
From: vishnuraghavb <design@vishnuraghav.com>
Date: Wed, 10 Mar 2021 21:29:50 +0530
Subject: [PATCH] transparent modal dialogs

---
 app/components/modal/ActionDialog.vue           | 13 ++++++++++++-
 app/components/modal/ActionDialogWithSearch.vue | 12 +++++++++++-
 app/components/modal/ConfirmDialog.vue          | 16 ++++++++++++++--
 app/components/modal/ListPicker.vue             | 12 +++++++++++-
 app/components/modal/PromptDialog.vue           | 12 +++++++++++-
 app/components/modal/ShareChooser.vue           | 14 +++++++++++++-
 6 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/app/components/modal/ActionDialog.vue b/app/components/modal/ActionDialog.vue
index ddcd3262..f4ef9c84 100644
--- a/app/components/modal/ActionDialog.vue
+++ b/app/components/modal/ActionDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <GridLayout
       columns="*"
       :rows="`auto, auto, ${stretch ? '*' : 'auto'}, auto`"
@@ -64,6 +64,7 @@ import * as Toast from "nativescript-toast";
 import { localize } from "@nativescript/localize";
 import { mapState, mapActions } from "vuex";
 import ConfirmDialog from "./ConfirmDialog.vue";
+
 export default {
   props: ["title", "list", "stretch", "action", "helpIcon"],
   data() {
@@ -85,6 +86,16 @@ export default {
   },
   methods: {
     ...mapActions(["removeListItemAction"]),
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
     localized(item) {
       if (this.title !== "lang") return localize(item);
       else return item;
diff --git a/app/components/modal/ActionDialogWithSearch.vue b/app/components/modal/ActionDialogWithSearch.vue
index 752b12d5..92dc20bb 100644
--- a/app/components/modal/ActionDialogWithSearch.vue
+++ b/app/components/modal/ActionDialogWithSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <GridLayout
       columns="*"
       rows="auto, auto, auto, *, auto"
@@ -118,6 +118,16 @@ export default {
     },
   },
   methods: {
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
     tapAction(recipe) {
       this.$modal.close(recipe.id);
     },
diff --git a/app/components/modal/ConfirmDialog.vue b/app/components/modal/ConfirmDialog.vue
index a103d379..c3ea59fa 100644
--- a/app/components/modal/ConfirmDialog.vue
+++ b/app/components/modal/ConfirmDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <StackLayout class="dialogContainer" :class="appTheme">
       <Label
         class="er dialogIcon"
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import { Application } from "@nativescript/core";
+import { Application, Color } from "@nativescript/core";
 import { mapState } from "vuex";
 export default {
   props: [
@@ -59,5 +59,17 @@ export default {
       return this.isLightMode ? "#f0f0f0" : "#1A1A1A";
     },
   },
+  methods: {
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
+  },
 };
 </script>
diff --git a/app/components/modal/ListPicker.vue b/app/components/modal/ListPicker.vue
index 613ad25a..8ac2bcb4 100644
--- a/app/components/modal/ListPicker.vue
+++ b/app/components/modal/ListPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <StackLayout class="dialogContainer" :class="appTheme">
       <Label
         class="er dialogIcon"
@@ -97,6 +97,16 @@ export default {
     },
   },
   methods: {
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
     setHrs(args) {
       let hr = "0" + this.hrs[args.object.selectedIndex];
       this.selectedHrs = hr.slice(-2);
diff --git a/app/components/modal/PromptDialog.vue b/app/components/modal/PromptDialog.vue
index 034b801b..a8119ceb 100644
--- a/app/components/modal/PromptDialog.vue
+++ b/app/components/modal/PromptDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <StackLayout class="dialogContainer" :class="appTheme">
       <Label
         class="er dialogIcon"
@@ -61,6 +61,16 @@ export default {
     },
   },
   methods: {
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
     focusField(args) {
       args.object.focus();
       setTimeout((e) => Utils.ad.showSoftInput(args.object.android), 1);
diff --git a/app/components/modal/ShareChooser.vue b/app/components/modal/ShareChooser.vue
index f0ac003b..6a91336a 100644
--- a/app/components/modal/ShareChooser.vue
+++ b/app/components/modal/ShareChooser.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <StackLayout class="dialogContainer" :class="appTheme">
       <Label
         class="er dialogIcon"
@@ -76,5 +76,17 @@ export default {
       return this.isLightMode ? "#fff" : "#292929";
     },
   },
+  methods: {
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
+  },
 };
 </script>