97 lines
2.1 KiB
Vue
97 lines
2.1 KiB
Vue
<template>
|
|
<v-app-bar
|
|
app
|
|
class="character-sheet-printed-toolbar"
|
|
:color="toolbarColor"
|
|
:dark="isDark"
|
|
:light="!isDark"
|
|
clipped-right
|
|
:extended="$vuetify.breakpoint.smAndUp"
|
|
:tabs="$vuetify.breakpoint.smAndUp"
|
|
dense
|
|
>
|
|
<v-app-bar-nav-icon @click="toggleDrawer" />
|
|
<v-btn
|
|
icon
|
|
:to="characterUrl"
|
|
>
|
|
<v-icon>mdi-arrow-left</v-icon>
|
|
</v-btn>
|
|
<v-toolbar-title>
|
|
<v-fade-transition mode="out-in">
|
|
<div :key="$store.state.pageTitle">
|
|
{{ $store.state.pageTitle }}
|
|
</div>
|
|
</v-fade-transition>
|
|
</v-toolbar-title>
|
|
<v-spacer />
|
|
<div
|
|
slot="extension"
|
|
style="width: 100%"
|
|
>
|
|
<v-btn
|
|
class="print-fab"
|
|
color="accent"
|
|
elevation="4"
|
|
fab
|
|
@click="print"
|
|
>
|
|
<v-icon>mdi-printer</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
</v-app-bar>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import Creatures from '/imports/api/creature/creatures/Creatures.js';
|
|
import { mapMutations } from 'vuex';
|
|
import isDarkColor from '/imports/client/ui/utility/isDarkColor.js';
|
|
import getThemeColor from '/imports/client/ui/utility/getThemeColor.js';
|
|
import getCreatureUrlName from '/imports/api/creature/creatures/getCreatureUrlName.js';
|
|
|
|
export default {
|
|
inject: {
|
|
context: { default: {} }
|
|
},
|
|
computed: {
|
|
creatureId() {
|
|
return this.$route.params.id;
|
|
},
|
|
toolbarColor() {
|
|
if (this.creature && this.creature.color) {
|
|
return this.creature.color;
|
|
} else {
|
|
return getThemeColor('secondary');
|
|
}
|
|
},
|
|
isDark() {
|
|
return isDarkColor(this.toolbarColor);
|
|
},
|
|
characterUrl() {
|
|
if (!this.creature) return;
|
|
return `/character/${this.creature._id}/${getCreatureUrlName(this.creature)}`;
|
|
},
|
|
},
|
|
methods: {
|
|
...mapMutations([
|
|
'toggleDrawer',
|
|
]),
|
|
print() {
|
|
print();
|
|
},
|
|
},
|
|
meteor: {
|
|
creature() {
|
|
return Creatures.findOne(this.creatureId);
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.print-fab {
|
|
position: absolute;
|
|
bottom: -24px;
|
|
right: 24px;
|
|
}
|
|
</style> |