mirror of
https://github.com/mokuappio/serverless-invoices.git
synced 2025-10-28 16:31:07 -04:00
88 lines
3.5 KiB
Vue
88 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="container app__content">
|
|
<div class="row justify-content-center">
|
|
<div class="d-flex flex-column justify-content-between col-12 min-vh-100 pt-5 pb-2">
|
|
<transition name="fade" mode="out-in">
|
|
<router-view/>
|
|
</transition>
|
|
<footer class="col-12 d-flex justify-content-between align-items-center text-secondary px-0 mt-3 d-print-none">
|
|
<button class="btn btn-sm text-secondary" @click="toggleTheme">
|
|
Lights {{ theme === 'dark' ? 'on' : 'off' }}
|
|
<i class="material-icons material-icons-round md-14 align-text-bottom ml-1">
|
|
{{ theme === 'dark' ? 'wb_sunny' : 'brightness_2' }}
|
|
</i>
|
|
</button>
|
|
<div>
|
|
<small v-b-tooltip.hover
|
|
title="All your data is saved in your browser and not on any server.
|
|
This application is truly serverless and we do not have access to any of your data."
|
|
class="pointer">
|
|
What about my data?
|
|
</small>
|
|
<small class="pl-2">
|
|
Made with
|
|
<i class="material-icons material-icons-round md-14 align-text-bottom">favorite</i>
|
|
by
|
|
<a href="https://mokuapp.io/" class="text-secondary" target="_blank">Moku</a>.
|
|
</small>
|
|
<a href="https://github.com/mokuappio/serverless-invoices"
|
|
class="btn btn-sm btn--icon ml-2"
|
|
target="_blank">
|
|
<img src="@/assets/img/github.png"
|
|
alt="Serverless Invoices Github"
|
|
v-if="theme === 'dark'">
|
|
<img src="@/assets/img/github-dark.png"
|
|
alt="Serverless Invoices Github"
|
|
v-else>
|
|
</a>
|
|
<a href="https://app.mokuapp.io/"
|
|
class="btn btn-sm btn-primary ml-2"
|
|
target="_blank">Upgrade</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ClientModal v-if="team"/>
|
|
<BankAccountModal v-if="team"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapState } from 'vuex';
|
|
import ClientModal from '@/components/clients/ClientModal';
|
|
import BankAccountModal from '@/components/bank-accounts/BankAccountModal';
|
|
import { VBTooltip } from 'bootstrap-vue';
|
|
|
|
|
|
export default {
|
|
directives: {
|
|
'b-tooltip': VBTooltip,
|
|
},
|
|
components: {
|
|
BankAccountModal,
|
|
ClientModal,
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
team: 'teams/team',
|
|
}),
|
|
...mapState({
|
|
theme: state => state.themes.theme,
|
|
}),
|
|
},
|
|
methods: {
|
|
toggleTheme() {
|
|
if (this.theme === 'light') {
|
|
this.$store.commit('themes/theme', 'dark');
|
|
} else {
|
|
this.$store.commit('themes/theme', 'light');
|
|
}
|
|
localStorage.setItem('theme', this.theme);
|
|
document.documentElement.setAttribute('data-theme', this.theme);
|
|
},
|
|
},
|
|
};
|
|
</script>
|