transparent modal dialogs
This commit is contained in:
parent
b92ede3fe2
commit
4840fb609d
6 changed files with 72 additions and 7 deletions
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<Page>
|
<Page @loaded="onPageLoad" backgroundColor="transparent">
|
||||||
<GridLayout
|
<GridLayout
|
||||||
columns="*"
|
columns="*"
|
||||||
:rows="`auto, auto, ${stretch ? '*' : 'auto'}, auto`"
|
:rows="`auto, auto, ${stretch ? '*' : 'auto'}, auto`"
|
||||||
|
@ -64,6 +64,7 @@ import * as Toast from "nativescript-toast";
|
||||||
import { localize } from "@nativescript/localize";
|
import { localize } from "@nativescript/localize";
|
||||||
import { mapState, mapActions } from "vuex";
|
import { mapState, mapActions } from "vuex";
|
||||||
import ConfirmDialog from "./ConfirmDialog.vue";
|
import ConfirmDialog from "./ConfirmDialog.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ["title", "list", "stretch", "action", "helpIcon"],
|
props: ["title", "list", "stretch", "action", "helpIcon"],
|
||||||
data() {
|
data() {
|
||||||
|
@ -85,6 +86,16 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(["removeListItemAction"]),
|
...mapActions(["removeListItemAction"]),
|
||||||
|
onPageLoad(args) {
|
||||||
|
args.object._dialogFragment
|
||||||
|
.getDialog()
|
||||||
|
.getWindow()
|
||||||
|
.setBackgroundDrawable(
|
||||||
|
new android.graphics.drawable.ColorDrawable(
|
||||||
|
android.graphics.Color.TRANSPARENT
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
localized(item) {
|
localized(item) {
|
||||||
if (this.title !== "lang") return localize(item);
|
if (this.title !== "lang") return localize(item);
|
||||||
else return item;
|
else return item;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<Page>
|
<Page @loaded="onPageLoad" backgroundColor="transparent">
|
||||||
<GridLayout
|
<GridLayout
|
||||||
columns="*"
|
columns="*"
|
||||||
rows="auto, auto, auto, *, auto"
|
rows="auto, auto, auto, *, auto"
|
||||||
|
@ -118,6 +118,16 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onPageLoad(args) {
|
||||||
|
args.object._dialogFragment
|
||||||
|
.getDialog()
|
||||||
|
.getWindow()
|
||||||
|
.setBackgroundDrawable(
|
||||||
|
new android.graphics.drawable.ColorDrawable(
|
||||||
|
android.graphics.Color.TRANSPARENT
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
tapAction(recipe) {
|
tapAction(recipe) {
|
||||||
this.$modal.close(recipe.id);
|
this.$modal.close(recipe.id);
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<Page>
|
<Page @loaded="onPageLoad" backgroundColor="transparent">
|
||||||
<StackLayout class="dialogContainer" :class="appTheme">
|
<StackLayout class="dialogContainer" :class="appTheme">
|
||||||
<Label
|
<Label
|
||||||
class="er dialogIcon"
|
class="er dialogIcon"
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Application } from "@nativescript/core";
|
import { Application, Color } from "@nativescript/core";
|
||||||
import { mapState } from "vuex";
|
import { mapState } from "vuex";
|
||||||
export default {
|
export default {
|
||||||
props: [
|
props: [
|
||||||
|
@ -59,5 +59,17 @@ export default {
|
||||||
return this.isLightMode ? "#f0f0f0" : "#1A1A1A";
|
return this.isLightMode ? "#f0f0f0" : "#1A1A1A";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
onPageLoad(args) {
|
||||||
|
args.object._dialogFragment
|
||||||
|
.getDialog()
|
||||||
|
.getWindow()
|
||||||
|
.setBackgroundDrawable(
|
||||||
|
new android.graphics.drawable.ColorDrawable(
|
||||||
|
android.graphics.Color.TRANSPARENT
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<Page>
|
<Page @loaded="onPageLoad" backgroundColor="transparent">
|
||||||
<StackLayout class="dialogContainer" :class="appTheme">
|
<StackLayout class="dialogContainer" :class="appTheme">
|
||||||
<Label
|
<Label
|
||||||
class="er dialogIcon"
|
class="er dialogIcon"
|
||||||
|
@ -97,6 +97,16 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onPageLoad(args) {
|
||||||
|
args.object._dialogFragment
|
||||||
|
.getDialog()
|
||||||
|
.getWindow()
|
||||||
|
.setBackgroundDrawable(
|
||||||
|
new android.graphics.drawable.ColorDrawable(
|
||||||
|
android.graphics.Color.TRANSPARENT
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
setHrs(args) {
|
setHrs(args) {
|
||||||
let hr = "0" + this.hrs[args.object.selectedIndex];
|
let hr = "0" + this.hrs[args.object.selectedIndex];
|
||||||
this.selectedHrs = hr.slice(-2);
|
this.selectedHrs = hr.slice(-2);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<Page>
|
<Page @loaded="onPageLoad" backgroundColor="transparent">
|
||||||
<StackLayout class="dialogContainer" :class="appTheme">
|
<StackLayout class="dialogContainer" :class="appTheme">
|
||||||
<Label
|
<Label
|
||||||
class="er dialogIcon"
|
class="er dialogIcon"
|
||||||
|
@ -61,6 +61,16 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onPageLoad(args) {
|
||||||
|
args.object._dialogFragment
|
||||||
|
.getDialog()
|
||||||
|
.getWindow()
|
||||||
|
.setBackgroundDrawable(
|
||||||
|
new android.graphics.drawable.ColorDrawable(
|
||||||
|
android.graphics.Color.TRANSPARENT
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
focusField(args) {
|
focusField(args) {
|
||||||
args.object.focus();
|
args.object.focus();
|
||||||
setTimeout((e) => Utils.ad.showSoftInput(args.object.android), 1);
|
setTimeout((e) => Utils.ad.showSoftInput(args.object.android), 1);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<Page>
|
<Page @loaded="onPageLoad" backgroundColor="transparent">
|
||||||
<StackLayout class="dialogContainer" :class="appTheme">
|
<StackLayout class="dialogContainer" :class="appTheme">
|
||||||
<Label
|
<Label
|
||||||
class="er dialogIcon"
|
class="er dialogIcon"
|
||||||
|
@ -76,5 +76,17 @@ export default {
|
||||||
return this.isLightMode ? "#fff" : "#292929";
|
return this.isLightMode ? "#fff" : "#292929";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
onPageLoad(args) {
|
||||||
|
args.object._dialogFragment
|
||||||
|
.getDialog()
|
||||||
|
.getWindow()
|
||||||
|
.setBackgroundDrawable(
|
||||||
|
new android.graphics.drawable.ColorDrawable(
|
||||||
|
android.graphics.Color.TRANSPARENT
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue