Greatly improved look and feel of site navigation
This commit is contained in:
Thaum Rystra
@@ -1,33 +1,34 @@
|
||||
<template lang="html">
|
||||
<div class="creature-form">
|
||||
<text-field
|
||||
label="Name"
|
||||
:value="model.name"
|
||||
@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
|
||||
:error-messages="errors.name"
|
||||
:debounce-time="debounceTime"
|
||||
/>
|
||||
<text-field
|
||||
label="Alignment"
|
||||
:value="model.alignment"
|
||||
@change="(value, ack) => $emit('change', {path: ['alignment'], value, ack})"
|
||||
:error-messages="errors.alignment"
|
||||
:debounce-time="debounceTime"
|
||||
/>
|
||||
<text-field
|
||||
label="Gender"
|
||||
:value="model.gender"
|
||||
@change="(value, ack) => $emit('change', {path: ['gender'], value, ack})"
|
||||
:error-messages="errors.gender"
|
||||
:debounce-time="debounceTime"
|
||||
/>
|
||||
<text-field
|
||||
label="Picture URL"
|
||||
:value="model.picture"
|
||||
@change="(value, ack) => $emit('change', {path: ['picture'], value, ack})"
|
||||
:error-messages="errors.picture"
|
||||
:debounce-time="debounceTime"
|
||||
/>
|
||||
<div class="creature-form">
|
||||
<text-field
|
||||
label="Name"
|
||||
:value="model.name"
|
||||
:error-messages="errors.name"
|
||||
:debounce-time="debounceTime"
|
||||
@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
|
||||
/>
|
||||
<text-field
|
||||
label="Alignment"
|
||||
:value="model.alignment"
|
||||
:error-messages="errors.alignment"
|
||||
:debounce-time="debounceTime"
|
||||
@change="(value, ack) => $emit('change', {path: ['alignment'], value, ack})"
|
||||
/>
|
||||
<text-field
|
||||
label="Gender"
|
||||
:value="model.gender"
|
||||
:error-messages="errors.gender"
|
||||
:debounce-time="debounceTime"
|
||||
@change="(value, ack) => $emit('change', {path: ['gender'], value, ack})"
|
||||
/>
|
||||
<text-field
|
||||
label="Picture URL"
|
||||
:value="model.picture"
|
||||
:error-messages="errors.picture"
|
||||
:debounce-time="debounceTime"
|
||||
@change="(value, ack) => $emit('change', {path: ['picture'], value, ack})"
|
||||
/>
|
||||
<!--
|
||||
<form-sections>
|
||||
<form-section name="settings">
|
||||
<v-switch
|
||||
@@ -50,7 +51,8 @@
|
||||
/>
|
||||
</form-section>
|
||||
</form-sections>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,115 +1,46 @@
|
||||
<template>
|
||||
<div class="character-sheet layout column">
|
||||
<v-toolbar
|
||||
app
|
||||
clipped-left
|
||||
:color="creature.color || 'secondary'"
|
||||
:dark="isDarkColor(creature.color || theme.primary)"
|
||||
>
|
||||
<v-btn
|
||||
v-if="showMenuButton"
|
||||
flat
|
||||
icon
|
||||
@click="toggleDrawer"
|
||||
<div class="character-sheet fill-height">
|
||||
<v-fade-transition mode="out-in">
|
||||
<div
|
||||
v-if="$subReady.singleCharacter"
|
||||
key="character-tabs"
|
||||
class="fill-height"
|
||||
>
|
||||
<v-icon>menu</v-icon>
|
||||
</v-btn>
|
||||
<div class="flex">
|
||||
{{ creature.name }}
|
||||
<v-tabs-items
|
||||
v-model="tabs"
|
||||
>
|
||||
<v-tab-item>
|
||||
<stats-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<features-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<inventory-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<spells-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<persona-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<tree-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</div>
|
||||
<v-btn
|
||||
flat
|
||||
icon
|
||||
@click="recompute(creature._id)"
|
||||
<div
|
||||
v-else
|
||||
key="character-loading"
|
||||
class="fill-height layout justify-center align-center"
|
||||
>
|
||||
<v-icon>refresh</v-icon>
|
||||
</v-btn>
|
||||
<v-menu
|
||||
bottom
|
||||
left
|
||||
transition="slide-y-transition"
|
||||
data-id="creature-menu"
|
||||
>
|
||||
<template #activator="{ on }">
|
||||
<v-btn
|
||||
icon
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-tile @click="deleteCharacter">
|
||||
<v-list-tile-title>
|
||||
<v-icon>delete</v-icon> Delete
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="showCharacterForm">
|
||||
<v-list-tile-title>
|
||||
<v-icon>create</v-icon> Edit details
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="showShareDialog">
|
||||
<v-list-tile-title>
|
||||
<v-icon>share</v-icon> Sharing
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-tabs
|
||||
slot="extension"
|
||||
v-model="tab"
|
||||
centered
|
||||
grow
|
||||
>
|
||||
<v-tab>
|
||||
Stats
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
Features
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
Inventory
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
Spells
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
Persona
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
Tree
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</v-toolbar>
|
||||
<v-content
|
||||
v-if="$subReady.singleCharacter"
|
||||
class="flex"
|
||||
>
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item>
|
||||
<stats-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<features-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<inventory-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<spells-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<persona-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<tree-tab :creature-id="creatureId" />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</v-content>
|
||||
<v-content v-else>
|
||||
<v-progress-circular indeterminate />
|
||||
</v-content>
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
color="primary"
|
||||
size="64"
|
||||
/>
|
||||
</div>
|
||||
</v-fade-transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -139,70 +70,26 @@
|
||||
TreeTab,
|
||||
},
|
||||
props: {
|
||||
showMenuButton: Boolean,
|
||||
creatureId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
tabs: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
reactiveProvide: {
|
||||
name: 'computationContext',
|
||||
include: ['creature'],
|
||||
},
|
||||
data(){return {
|
||||
theme,
|
||||
tab: 0,
|
||||
}},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'toggleDrawer',
|
||||
]),
|
||||
recompute(charId){
|
||||
recomputeCreature.call({charId});
|
||||
},
|
||||
showCharacterForm(){
|
||||
this.$store.commit('pushDialogStack', {
|
||||
component: 'creature-form-dialog',
|
||||
elementId: 'creature-menu',
|
||||
data: {
|
||||
_id: this.creatureId,
|
||||
},
|
||||
});
|
||||
},
|
||||
showShareDialog(){
|
||||
this.$store.commit('pushDialogStack', {
|
||||
component: 'share-dialog',
|
||||
elementId: 'creature-menu',
|
||||
data: {
|
||||
docRef: {
|
||||
id: this.creatureId,
|
||||
collection: 'creatures',
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
deleteCharacter(){
|
||||
let that = this;
|
||||
this.$store.commit('pushDialogStack', {
|
||||
component: 'delete-confirmation-dialog',
|
||||
elementId: 'creature-menu',
|
||||
data: {
|
||||
name: this.creature.name,
|
||||
typeName: 'Character'
|
||||
},
|
||||
callback(confirmation){
|
||||
if(!confirmation) return;
|
||||
removeCreature.call({charId: that.creatureId}, (error) => {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
} else {
|
||||
that.$router.push('/characterList');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
isDarkColor,
|
||||
onMounted(){
|
||||
this.$store.commit('setPageTitle', this.creature && this.creature.name || 'Character Sheet');
|
||||
},
|
||||
watch: {
|
||||
'creature.name'(value){
|
||||
this.$store.commit('setPageTitle', value || 'Character Sheet');
|
||||
},
|
||||
},
|
||||
meteor: {
|
||||
$subscribe: {
|
||||
@@ -216,18 +103,3 @@
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-tabs__bar {
|
||||
background: none !important;
|
||||
}
|
||||
.v-tabs__container--grow .v-tabs__div {
|
||||
max-width: 180px !important;
|
||||
}
|
||||
.v-window-item, .v-window, .v-window__container {
|
||||
height: 100%;
|
||||
}
|
||||
.v-window-item {
|
||||
padding: 0.1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
<template lang="html">
|
||||
<v-tabs
|
||||
slot="extension"
|
||||
:value="value"
|
||||
centered
|
||||
grow
|
||||
max="100px"
|
||||
@change="e => $emit('input', e)"
|
||||
>
|
||||
<v-tab>
|
||||
Stats
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
Features
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
Inventory
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
Spells
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
Persona
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
Tree
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.v-tabs__container--grow .v-tabs__div {
|
||||
max-width: 120px !important;
|
||||
}
|
||||
</style>
|
||||
127
app/imports/ui/creature/character/CharacterSheetToolbarItems.vue
Normal file
127
app/imports/ui/creature/character/CharacterSheetToolbarItems.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template lang="html">
|
||||
<v-toolbar-items>
|
||||
<v-btn
|
||||
flat
|
||||
icon
|
||||
@click="recompute(creature._id)"
|
||||
>
|
||||
<v-icon>refresh</v-icon>
|
||||
</v-btn>
|
||||
<v-menu
|
||||
bottom
|
||||
left
|
||||
transition="slide-y-transition"
|
||||
data-id="creature-menu"
|
||||
>
|
||||
<template #activator="{ on }">
|
||||
<v-btn
|
||||
icon
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-tile @click="deleteCharacter">
|
||||
<v-list-tile-title>
|
||||
<v-icon>delete</v-icon> Delete
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="showCharacterForm">
|
||||
<v-list-tile-title>
|
||||
<v-icon>create</v-icon> Edit details
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="showShareDialog">
|
||||
<v-list-tile-title>
|
||||
<v-icon>share</v-icon> Sharing
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-toolbar-items>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Creatures from '/imports/api/creature/Creatures.js';
|
||||
import removeCreature from '/imports/api/creature/removeCreature.js';
|
||||
import isDarkColor from '/imports/ui/utility/isDarkColor.js';
|
||||
import { mapMutations } from 'vuex';
|
||||
import { theme } from '/imports/ui/theme.js';
|
||||
import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
|
||||
|
||||
export default {
|
||||
data(){return {
|
||||
theme,
|
||||
}},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'toggleDrawer',
|
||||
]),
|
||||
recompute(charId){
|
||||
recomputeCreature.call({charId});
|
||||
},
|
||||
showCharacterForm(){
|
||||
this.$store.commit('pushDialogStack', {
|
||||
component: 'creature-form-dialog',
|
||||
elementId: 'creature-menu',
|
||||
data: {
|
||||
_id: this.creatureId,
|
||||
},
|
||||
});
|
||||
},
|
||||
showShareDialog(){
|
||||
this.$store.commit('pushDialogStack', {
|
||||
component: 'share-dialog',
|
||||
elementId: 'creature-menu',
|
||||
data: {
|
||||
docRef: {
|
||||
id: this.creatureId,
|
||||
collection: 'creatures',
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
deleteCharacter(){
|
||||
let that = this;
|
||||
this.$store.commit('pushDialogStack', {
|
||||
component: 'delete-confirmation-dialog',
|
||||
elementId: 'creature-menu',
|
||||
data: {
|
||||
name: this.creature.name,
|
||||
typeName: 'Character'
|
||||
},
|
||||
callback(confirmation){
|
||||
if(!confirmation) return;
|
||||
removeCreature.call({charId: that.creatureId}, (error) => {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
} else {
|
||||
that.$router.push('/characterList');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
isDarkColor,
|
||||
},
|
||||
computed: {
|
||||
creatureId(){
|
||||
return this.$route.params.id;
|
||||
},
|
||||
},
|
||||
meteor: {
|
||||
$subscribe: {
|
||||
'singleCharacter'(){
|
||||
return [this.creatureId];
|
||||
},
|
||||
},
|
||||
creature(){
|
||||
return Creatures.findOne(this.creatureId) || {};
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user