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

Used custom labels on tree tab buttons to prevent tooltip formatting shenanigans

Browse Source
This commit is contained in:
Thaum Rystra
2020-05-08 15:59:59 +02:00
parent 4d0ff52853
commit 5f87bbc4f5
2 changed files with 158 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/imports/ui/components/LabeledFab.vue
View File

@@ -1,8 +1,13 @@
<template>
<v-btn fab small @click="$emit('click')">
<v-icon>{{icon}}</v-icon>
<v-btn
fab
small
v-bind="$attrs"
@click="$emit('click')"
>
<v-icon>{{ icon }}</v-icon>
<span id="label">
{{label}}
{{ label }}
</span>
</v-btn>
</template>
@@ -12,8 +17,9 @@
* Because speed dials only work well with v-btn's as children, this hacky
* component creates a v-btn with a label.
*/
console.log('labeled fab reporting for duty')
export default {
props: ["icon", "label"],
props: ['icon', 'label'],
}
</script>

286
app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
View File

@@ -1,102 +1,112 @@
<template lang="html">
<div class="tree-tab">
<v-card class="ma-4 layout row" data-id="creature-tree-card">
<div>
<v-toolbar flat dense>
<v-spacer/>
<v-switch
label="Organize"
class="mx-3"
v-model="organize"
:disabled="organizeDisabled"
style="flex-grow: 0; height: 32px;"
/>
</v-toolbar>
<v-combobox
v-model="filterString"
:items="filterOptions"
prepend-inner-icon="search"
class="mx-4"
hide-no-data
hide-selected
multiple
clearable
small-chips
deletable-chips
ref="searchBox"
/>
<creature-properties-tree
class="pt-0"
:root="{collection: 'creatures', id: creatureId}"
:organize="organize"
@selected="e => selected = e"
:selected-node-id="selected"
:filter="filter"
style="min-width: 320px;"
/>
</div>
<v-divider vertical/>
<div style="width: 100%; background-color: inherit;" data-id="selected-node-card">
<v-toolbar dense flat>
<property-icon :type="selectedProperty && selectedProperty.type" class="mr-2"/>
<div class="title">
{{getPropertyName(selectedProperty && selectedProperty.type)}}
</div>
<v-spacer/>
<v-btn flat icon @click="editCreatureProperty" v-if="selectedProperty">
<v-icon>create</v-icon>
</v-btn>
</v-toolbar>
<v-card-text>
<property-viewer :model="selectedProperty"/>
</v-card-text>
</div>
</v-card>
<v-speed-dial
<v-card
class="ma-4 layout row"
data-id="creature-tree-card"
>
<div>
<v-toolbar
flat
dense
>
<v-spacer />
<v-switch
v-model="organize"
label="Organize"
class="mx-3"
:disabled="organizeDisabled"
style="flex-grow: 0; height: 32px;"
/>
</v-toolbar>
<v-combobox
ref="searchBox"
v-model="filterString"
:items="filterOptions"
prepend-inner-icon="search"
class="mx-4"
hide-no-data
hide-selected
multiple
clearable
small-chips
deletable-chips
/>
<creature-properties-tree
class="pt-0"
:root="{collection: 'creatures', id: creatureId}"
:organize="organize"
:selected-node-id="selected"
:filter="filter"
style="min-width: 320px;"
@selected="e => selected = e"
/>
</div>
<v-divider vertical />
<div
style="width: 100%; background-color: inherit;"
data-id="selected-node-card"
>
<v-toolbar
dense
flat
>
<property-icon
:type="selectedProperty && selectedProperty.type"
class="mr-2"
/>
<div class="title">
{{ getPropertyName(selectedProperty && selectedProperty.type) }}
</div>
<v-spacer />
<v-btn
v-if="selectedProperty"
flat
icon
@click="editCreatureProperty"
>
<v-icon>create</v-icon>
</v-btn>
</v-toolbar>
<v-card-text>
<property-viewer :model="selectedProperty" />
</v-card-text>
</div>
</v-card>
<v-speed-dial
v-model="fab"
fixed
fixed
bottom="bottom"
right="right"
>
<template v-slot:activator>
<template #activator>
<v-btn
v-model="fab"
color="primary"
fab
data-id="insert-creature-property-fab"
data-id="insert-creature-property-fab"
>
<v-icon>add</v-icon>
<v-icon>close</v-icon>
</v-btn>
</template>
<v-tooltip disabled left :value="true" :nudge-left="16">
Property from library
<v-btn
slot="activator"
color="primary"
small fab
@click="propertyFromLibrary"
>
<v-icon>book</v-icon>
</v-btn>
</v-tooltip>
<v-tooltip disabled left :value="true" :nudge-left="16">
New property
<v-btn
slot="activator"
color="primary"
small fab
@click="insertCreatureProperty"
>
<v-icon>edit</v-icon>
</v-btn>
</v-tooltip>
<labeled-fab
color="primary"
label="Property from library"
icon="book"
@click="propertyFromLibrary"
/>
<labeled-fab
color="primary"
label="New property"
icon="edit"
@click="insertCreatureProperty"
/>
</v-speed-dial>
</div>
</template>
<script>
import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
import CreatureProperties, {
insertProperty,
insertPropertyFromLibraryNode
@@ -105,12 +115,19 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
import { setDocToLastOrder } from '/imports/api/parenting/order.js';
import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
import { getPropertyName } from '/imports/constants/PROPERTIES.js';
import LabeledFab from '/imports/ui/components/LabeledFab.vue';
export default {
components: {
CreaturePropertiesTree,
PropertyViewer,
PropertyIcon,
LabeledFab,
},
props: {
creatureId: {
type: String,
},
},
data(){ return {
organize: false,
@@ -140,63 +157,6 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
{text: 'Items', value: 'item'},
],
};},
props: {
creatureId: {
type: String,
},
},
methods: {
insertCreatureProperty(){
let that = this;
this.$store.commit('pushDialogStack', {
component: 'creature-property-creation-dialog',
elementId: 'insert-creature-property-fab',
callback(creatureProperty){
if (!creatureProperty) return;
creatureProperty.parent = {collection: "creatures", id: that.creatureId};
creatureProperty.ancestors = [ {collection: "creatures", id: that.creatureId}];
setDocToLastOrder({collection: CreatureProperties, doc: creatureProperty});
let creaturePropertyId = insertProperty.call({creatureProperty});
return creaturePropertyId;
}
});
},
propertyFromLibrary(){
let that = this;
this.$store.commit('pushDialogStack', {
component: 'creature-property-from-library-dialog',
elementId: 'insert-creature-property-fab',
callback(libraryNode){
if (!libraryNode) return;
let propertyId = insertPropertyFromLibraryNode.call({
nodeId: libraryNode._id,
parentRef: {collection: 'creatures', id: that.creatureId},
});
return;
}
});
},
editCreatureProperty(){
let that = this;
this.$store.commit('pushDialogStack', {
component: 'creature-property-dialog',
elementId: 'selected-node-card',
data: {
_id: this.selected,
startInEditTab: true,
},
});
},
getPropertyName,
},
meteor: {
selectedProperty(){
return CreatureProperties.findOne({
_id: this.selected,
removed: {$ne: true}
});
}
},
computed: {
filter(){
if (!this.filterString.length) return;
@@ -207,8 +167,8 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
typeFilters.push(filter.value);
} else {
// escape string
let term = filter.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );
var reg = new RegExp( '.*' + term + '.*', 'i' );
let term = filter.replace( /[-/\\^$*+?.()|[\]{}]/g, '\\$&' );
var reg = new RegExp( '.*' + term + '.*', 'i' );
nameFilters.push(reg)
}
});
@@ -227,6 +187,56 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
this.organizeDisabled = false;
}
},
},
methods: {
insertCreatureProperty(){
let that = this;
this.$store.commit('pushDialogStack', {
component: 'creature-property-creation-dialog',
elementId: 'insert-creature-property-fab',
callback(creatureProperty){
if (!creatureProperty) return;
creatureProperty.parent = {collection: 'creatures', id: that.creatureId};
creatureProperty.ancestors = [ {collection: 'creatures', id: that.creatureId}];
setDocToLastOrder({collection: CreatureProperties, doc: creatureProperty});
let creaturePropertyId = insertProperty.call({creatureProperty});
return creaturePropertyId;
}
});
},
propertyFromLibrary(){
let that = this;
this.$store.commit('pushDialogStack', {
component: 'creature-property-from-library-dialog',
elementId: 'insert-creature-property-fab',
callback(libraryNode){
if (!libraryNode) return;
insertPropertyFromLibraryNode.call({
nodeId: libraryNode._id,
parentRef: {collection: 'creatures', id: that.creatureId},
});
}
});
},
editCreatureProperty(){
this.$store.commit('pushDialogStack', {
component: 'creature-property-dialog',
elementId: 'selected-node-card',
data: {
_id: this.selected,
startInEditTab: true,
},
});
},
getPropertyName,
},
meteor: {
selectedProperty(){
return CreatureProperties.findOne({
_id: this.selected,
removed: {$ne: true}
});
}
}
};
</script>