jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

First roll out of an AlertMessage control

Browse Source
This commit is contained in:
Matthew Raymer
2023-07-03 20:24:23 +08:00
parent 8d8635a3e6
commit 3c977a1f28
2 changed files with 11 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/AlertMessage.vue
View File

@@ -12,12 +12,12 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-facing-decorator"; import { Component, Prop, Vue } from "vue-facing-decorator";
@Component @Component
export default class AlertMessage extends Vue { export default class AlertMessage extends Vue {
alertTitle = ""; @Prop alertTitle = "";
alertMessage = ""; @Prop alertMessage = "";
public onClickClose() { public onClickClose() {
this.alertTitle = ""; this.alertTitle = "";

45
src/views/HomeView.vue
View File

@@ -106,18 +106,10 @@
</ul> </ul>
</div> </div>
</section> </section>
<AlertMessage
<!-- This same popup code is in many files. --> :alertTitle="alertTitle"
<div v-bind:class="computedAlertClassNames()"> :alertMessage="alertMessage"
<button ></AlertMessage>
class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@click="onClickClose()"
>
<fa icon="xmark"></fa>
</button>
<h4 class="font-bold pr-5">{{ alertTitle }}</h4>
<p>{{ alertMessage }}</p>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -131,9 +123,10 @@ import { accessToken } from "@/libs/crypto";
import { createAndSubmitGive, didInfo } from "@/libs/endorserServer"; import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";
import { Account } from "@/db/tables/accounts"; import { Account } from "@/db/tables/accounts";
import { Contact } from "@/db/tables/contacts"; import { Contact } from "@/db/tables/contacts";
import AlertMessage from "@/components/AlertMessage";
@Options({ @Options({
components: { GiftedDialog }, components: { GiftedDialog, AlertMessage },
}) })
export default class HomeView extends Vue { export default class HomeView extends Vue {
activeDid = ""; activeDid = "";
@@ -145,6 +138,8 @@ export default class HomeView extends Vue {
feedPreviousOldestId = null; feedPreviousOldestId = null;
feedLastViewedId = null; feedLastViewedId = null;
isHiddenSpinner = true; isHiddenSpinner = true;
alertTitle = "";
alertMessage = "";
// 'created' hook runs when the Vue instance is first created // 'created' hook runs when the Vue instance is first created
async created() { async created() {
@@ -342,29 +337,5 @@ export default class HomeView extends Vue {
"There was an error recording the give."; "There was an error recording the give.";
}); });
} }
// This same popup code is in many files.
alertMessage = "";
alertTitle = "";
public onClickClose() {
this.alertTitle = "";
this.alertMessage = "";
}
public computedAlertClassNames() {
return {
hidden: !this.alertMessage,
"dismissable-alert": true,
"bg-slate-100": true,
"p-5": true,
rounded: true,
"drop-shadow-lg": true,
fixed: true,
"top-3": true,
"inset-x-3": true,
"transition-transform": true,
"ease-in": true,
"duration-300": true,
};
}
} }
</script> </script>