jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added attribute property viewer, incomplete

Browse Source
This commit is contained in:
Stefan Zermatten
2019-08-01 14:03:51 +02:00
parent e29c77dc67
commit 229a5dddcf
5 changed files with 98 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/imports/ui/library/LibraryContentsContainer.vue
View File

@@ -1,5 +1,5 @@
<template lang="html"> <template lang="html">
<v-card-text style="width: initial; max-width: 50%; min-width: 320px;"> <v-card-text style="width: initial; max-width: 100%; min-width: 320px;">
<tree-node-list <tree-node-list
v-if="libraryChildren" v-if="libraryChildren"
:children="libraryChildren" :children="libraryChildren"

28
app/imports/ui/pages/Library.vue
View File

@@ -6,25 +6,30 @@
</v-btn> </v-btn>
{{library && library.name || 'Library'}} {{library && library.name || 'Library'}}
<v-spacer/> <v-spacer/>
<v-btn-toggle>
<v-btn v-model="organize">
<v-icon class="mr-1">reorder</v-icon>
Organize
</v-btn>
</v-btn-toggle>
</template> </template>
<v-card class="ma-4 layout row"> <v-card class="ma-4 layout row">
<library-contents-container <div>
<v-toolbar>
<v-spacer/>
<v-btn-toggle>
<v-btn v-model="organize">
<v-icon class="mr-1">reorder</v-icon>
Organize
</v-btn>
</v-btn-toggle>
</v-toolbar>
<library-contents-container
:library-id="$route.params.id" :library-id="$route.params.id"
:organize="organize" :organize="organize"
@selected="e => selected = e" @selected="e => selected = e"
:selected-node-id="selected" :selected-node-id="selected"
/> />
</div>
<v-divider vertical/> <v-divider vertical/>
<v-card-text <v-card-text
style="flex-grow: 1;" style="flex-grow: 1;"
> >
<pre>{{selectedNode}}</pre> <property-viewer :model="selectedNode"/>
</v-card-text> </v-card-text>
</v-card> </v-card>
<v-btn fixed fab bottom right <v-btn fixed fab bottom right
@@ -40,6 +45,7 @@
<script> <script>
import ToolbarLayout from '/imports/ui/layouts/ToolbarLayout.vue'; import ToolbarLayout from '/imports/ui/layouts/ToolbarLayout.vue';
import LibraryContentsContainer from '/imports/ui/library/LibraryContentsContainer.vue'; import LibraryContentsContainer from '/imports/ui/library/LibraryContentsContainer.vue';
import PropertyViewer from '/imports/ui/properties/PropertyViewer.vue';
import LibraryNodes, { insertNode } from '/imports/api/library/LibraryNodes.js'; import LibraryNodes, { insertNode } from '/imports/api/library/LibraryNodes.js';
import Libraries from '/imports/api/library/Libraries.js'; import Libraries from '/imports/api/library/Libraries.js';
import { setDocToLastOrder } from '/imports/api/parenting/order.js'; import { setDocToLastOrder } from '/imports/api/parenting/order.js';
@@ -48,6 +54,7 @@
components: { components: {
ToolbarLayout, ToolbarLayout,
LibraryContentsContainer, LibraryContentsContainer,
PropertyViewer,
}, },
data(){ return { data(){ return {
organize: false, organize: false,
@@ -81,8 +88,7 @@
return Libraries.findOne(this.$route.params.id); return Libraries.findOne(this.$route.params.id);
}, },
selectedNode(){ selectedNode(){
let node = LibraryNodes.findOne(this.selected); return LibraryNodes.findOne(this.selected);
return JSON.stringify(node, null, 2);
} }
} }
}; };

4
app/imports/ui/properties/PropertyViewer.vue
View File

@@ -8,7 +8,11 @@
</template> </template>
<script> <script>
import propertyViewerIndex from '/imports/ui/properties/viewers/shared/propertyViewerIndex.js';
export default { export default {
components: {
...propertyViewerIndex,
},
props: { props: {
model: { model: {
type: Object, type: Object,

39
app/imports/ui/properties/viewers/AttributeViewer.vue Normal file
View File

@@ -0,0 +1,39 @@
<template lang="html">
<div class="attribute-viewer">
<div class="title">
{{model.name}}
</div>
<div class="caption">
({{model.variableName}})
</div>
</div>
</template>
<script>
import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
export default {
props: {
model: Object,
},
methods: {
numberToSignedString,
},
}
</script>
<style lang="css" scoped>
.ability-value {
font-weight: 600;
font-size: 24px !important;
color: rgba(0, 0, 0, 0.54);
}
.mod, .ability-value {
text-align: center;
width: 100%;
}
.attribute-value {
text-align: center;
}
</style>

37
app/imports/ui/properties/viewers/shared/propertyViewerIndex.js Normal file
View File

@@ -0,0 +1,37 @@
//import ActionViewer from '/imports/ui/properties/viewers/ActionViewer.vue';
import AttributeViewer from '/imports/ui/properties/viewers/AttributeViewer.vue';
//import BuffViewer from '/imports/ui/properties/viewers/BuffViewer.vue';
//import ContainerViewer from '/imports/ui/properties/viewers/ContainerViewer.vue';
//import ClassLevelViewer from '/imports/ui/properties/viewers/ClassLevelViewer.vue';
//import DamageMultiplierViewer from '/imports/ui/properties/viewers/DamageMultiplierViewer.vue';
//import EffectViewer from '/imports/ui/properties/viewers/EffectViewer.vue';
//import ExperienceViewer from '/imports/ui/properties/viewers/ExperienceViewer.vue';
//import FeatureViewer from '/imports/ui/properties/viewers/FeatureViewer.vue';
//import FolderViewer from '/imports/ui/properties/viewers/FolderViewer.vue';
//import ItemViewer from '/imports/ui/properties/viewers/ItemViewer.vue';
//import NoteViewer from '/imports/ui/properties/viewers/NoteViewer.vue';
//import ProficiencyViewer from '/imports/ui/properties/viewers/ProficiencyViewer.vue';
//import RollViewer from '/imports/ui/properties/viewers/RollViewer.vue';
//import SkillViewer from '/imports/ui/properties/viewers/SkillViewer.vue';
//import SpellListViewer from '/imports/ui/properties/viewers/SpellListViewer.vue';
//import SpellViewer from '/imports/ui/properties/viewers/SpellViewer.vue';
export default {
// action: ActionViewer,
attribute: AttributeViewer,
// buff: BuffViewer,
// container: ContainerViewer,
// classLevel: ClassLevelViewer,
// damageMultiplier: DamageMultiplierViewer,
// experience:ExperienceViewer,
// effect: EffectViewer,
// feature: FeatureViewer,
// folder: FolderViewer,
// item: ItemViewer,
// note: NoteViewer,
// proficiency: ProficiencyViewer,
// roll: RollViewer,
// skill: SkillViewer,
// spellList: SpellListViewer,
// spell: SpellViewer,
};