TheCloneArmy/serverless-invoices
1
0
Fork 0
mirror of https://github.com/mokuappio/serverless-invoices.git synced 2025-10-29 08:51:07 -04:00
Code Issues Packages Projects Releases Wiki Activity

Footer with theme switch, data notice, upgrade cta and a github link

Browse Source
This commit is contained in:
Marek Fraczyk
2021-02-16 17:43:31 +02:00
parent 79e9705b01
commit e281835eee
4 changed files with 86 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/dashboard/Dashboard.vue
View File

@ -1,11 +1,46 @@
<template>
<div>
<div class="container-fluid app__content">
<div class="container app__content">
<div class="row justify-content-center">
<div class="min-vh-100 col-xl-10 col-xxl-8 pb-5">
<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">
<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>
@ -15,12 +50,16 @@
</template>
<script>
import { mapGetters } from 'vuex';
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,
@ -29,6 +68,20 @@ export default {
...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>