Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <template>
<q-page padding class="row flex justify-center">
<q-card
class="col-xs-12 col-sm-10 col-md-8 col-lg-6 "
v-dm-class="{ dark: 'bg-grey-9', light: 'bg-green-1' }"
>
<div class="row q-px-md">
<div class="col col-12 q-py-md">
<span class="text-h3">Settings</span>
</div>
<div class="col col-12 q-py-sm flex column" v-if="deferredPrompt">
<span class="text-h5 q-pb-sm">Add To Homescreen</span>
<q-btn
@click="addToHomeScreen"
icon="fas fa-home"
label="Add App To Home Screen"
color="info"
/>
</div>
<div>
<span class="text-h5 q-pb-sm">Dark Mode</span>
<q-toggle v-model="darkMode"></q-toggle>
</div>
</div>
</q-card>
</q-page>
</template>
<script lang="ts">
import { mapGetters } from "vuex";
import { GettersName, ActionsName, MutationsName } from "src/store";
import { Component, Vue, Mixins } from "vue-property-decorator";
import { darkModeClassDirectives } from "src/directives/darkModeClass";
@Component({
name: "SettingsPage",
directives: {
"dm-class": darkModeClassDirectives
},
computed: {
...mapGetters({
deferredPrompt: GettersName.settings.getDeferredPrompt
})
}
})
class SettingsPage extends Vue {
get darkMode() {
return this.$store.state.settings.darkMode;
}
set darkMode(val: boolean) {
this.$store.dispatch(ActionsName.settings.storeDarkMode, val);
}
public addToHomeScreen() {
window.deferredPrompt.prompt();
window.deferredPrompt.userChoice.then(() => {
window.deferredPrompt = null;
});
}
}
export default SettingsPage;
</script>
<style></style>
|