Skip to content

Commit

Permalink
Merge branch 'version-2-dev' into version-2
Browse files Browse the repository at this point in the history
  • Loading branch information
ThaumRystra committed Dec 2, 2022
2 parents ee1b876 + ef26153 commit 8aa5ee8
Show file tree
Hide file tree
Showing 23 changed files with 371 additions and 144 deletions.
56 changes: 39 additions & 17 deletions app/imports/client/ui/creature/character/CharacterSheetToolbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,27 +39,45 @@
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list v-if="editPermission">
<v-list-item @click="deleteCharacter">
<v-list>
<v-list-item :to="printUrl">
<v-list-item-title>
<v-icon>mdi-delete</v-icon> Delete
<v-icon left>
mdi-printer
</v-icon> Print
</v-list-item-title>
</v-list-item>
<v-list-item @click="showCharacterForm">
<v-list-item-title>
<v-icon>mdi-pencil</v-icon> Edit details
</v-list-item-title>
</v-list-item>
<v-list-item @click="showShareDialog">
<v-list-item-title>
<v-icon>mdi-share-variant</v-icon> Sharing
</v-list-item-title>
</v-list-item>
</v-list>
<v-list v-else>
<v-list-item @click="unshareWithMe">
<template v-if="editPermission">
<v-list-item @click="deleteCharacter">
<v-list-item-title>
<v-icon left>
mdi-delete
</v-icon> Delete
</v-list-item-title>
</v-list-item>
<v-list-item @click="showCharacterForm">
<v-list-item-title>
<v-icon left>
mdi-pencil
</v-icon> Edit details
</v-list-item-title>
</v-list-item>
<v-list-item @click="showShareDialog">
<v-list-item-title>
<v-icon left>
mdi-share-variant
</v-icon> Sharing
</v-list-item-title>
</v-list-item>
</template>
<v-list-item
v-else
@click="unshareWithMe"
>
<v-list-item-title>
<v-icon>mdi-delete</v-icon> Unshare with me
<v-icon left>
mdi-delete
</v-icon> Unshare with me
</v-list-item-title>
</v-list-item>
</v-list>
Expand Down Expand Up @@ -144,6 +162,7 @@ import isDarkColor from '/imports/client/ui/utility/isDarkColor.js';
import CharacterSheetFab from '/imports/client/ui/creature/character/CharacterSheetFab.vue';
import getThemeColor from '/imports/client/ui/utility/getThemeColor.js';
import SharedIcon from '/imports/client/ui/components/SharedIcon.vue';
import getCreatureUrlName from '/imports/api/creature/creatures/getCreatureUrlName.js';
export default {
components: {
Expand All @@ -167,6 +186,9 @@ export default {
isDark() {
return isDarkColor(this.toolbarColor);
},
printUrl() {
return `/print-character/${this.creature._id}/${getCreatureUrlName(this.creature)}`;
},
},
methods: {
...mapMutations([
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
{{ creature.alignment }} {{ background }}
</div>
<dir v-if="race || creature.gender">
{{ race }} {{ creature.gender }}
{{ creature.gender }} {{ race }}
</dir>
<div v-if="level && classes && classes.length === 1">
Level {{ level }} {{ classes[0].name }}
Expand Down Expand Up @@ -236,9 +236,41 @@ export default {
color: black;
font-size: 11pt;
}
.character-sheet-printed * {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
cursor: unset !important;
}
.page {
padding: 4px;
}
.character-sheet-printed .column-layout, .character-sheet-printed .column-layout.wide-columns {
position:relative;
width: 100%;
widows: 0;
orphans: 0;
-webkit-column-fill: balance-all;
column-fill: balance-all;
}
.character-sheet-printed .column-layout>div {
position:relative;
display: block;
width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-column-break-inside: avoid;
break-inside: avoid;
page-break-inside: avoid;
}
.character-sheet-printed .column-layout>div>* {
-webkit-column-break-inside: avoid;
break-inside: avoid;
page-break-inside: avoid;
}
.character-sheet-printed .inactive {
opacity: 1 !important;
}
Expand All @@ -253,8 +285,6 @@ export default {
background-image: url(/crown-dice-logo-cropped-transparent.png);
background-size: contain;
background-position: 0 center;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.character-sheet-printed .v-divider {
Expand All @@ -265,7 +295,6 @@ export default {
.character-sheet-printed .double-border {
position: relative;
padding: 11px 10px;
page-break-inside: avoid;
}
.character-sheet-printed .double-border::before {
Expand All @@ -286,8 +315,8 @@ export default {
.character-sheet-printed .octagon-border {
position: relative;
padding: 4px 20px;
page-break-inside: avoid;
}
.character-sheet-printed .octagon-border::before {
content: "";
position: absolute;
Expand Down Expand Up @@ -326,6 +355,9 @@ export default {
}
}
@media print {
.v-main, .v-application, .v-application--wrap, .character-sheet-printed {
display: block;
}
header {
display: none !important;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<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>
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
>
<div
:key="container._id"
class="span-all container-header"
class="span-all"
>
<printed-container
class="octagon-border"
Expand Down Expand Up @@ -232,22 +232,6 @@ export default {
</script>

<style lang="css" scoped>
.octagon-border {
position: relative;
padding: 4px 20px;
page-break-inside: avoid;
}
.octagon-border::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-image: url(/images/print/octagonBorder.png) 124 118 fill;
border-image-width: 22px;
z-index: -1;
}
.label {
font-size: 14pt;
Expand All @@ -262,9 +246,4 @@ export default {
.inventory-stat > .v-icon {
margin-right: 8px;
}
.container-header {
page-break-after: avoid;
page-break-inside: avoid;
}
</style>
Loading

0 comments on commit 8aa5ee8

Please sign in to comment.