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

Replaced spell library spell selection highlighting with checkboxes

Browse Source 
Makes it more intuitive that multiple items can be selected
This commit is contained in:
Stefan Zermatten
2017-09-08 09:47:43 +02:00
parent f600999c5f
commit e4ac400cbd
3 changed files with 18 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
rpg-docs/client/views/character/spells/spellsLibraryDialog/spellLibraryDialog.css
View File

@@ -1,7 +1,3 @@
.spell-library-dialog .spell.selected {
background-color: #e4e4e4;
}
.spell-library-dialog .category-header { .spell-library-dialog .category-header {
font-size: 16px; font-size: 16px;
} }
@@ -13,11 +9,3 @@
.spell-library-dialog .category-header iron-icon.open { .spell-library-dialog .category-header iron-icon.open {
transform: rotate(90deg); transform: rotate(90deg);
} }
.spell-library-dialog table {
border-collapse: collapse;
}
.spell-library-dialog .library-spell td {
position: relative;
}

32
rpg-docs/client/views/character/spells/spellsLibraryDialog/spellLibraryDialog.html
View File

@@ -13,13 +13,11 @@
<div class="spells" style="padding:8px"> <div class="spells" style="padding:8px">
{{#if searchTerm}} {{#if searchTerm}}
{{#if searchSpells.count}} {{#if searchSpells.count}}
<table style="width: 100%"> <div>
<tbody> {{#each spell in searchSpells}}
{{#each spell in searchSpells}} {{>librarySpell spell=spell selected=(isSelected spell)}}
{{>librarySpell spell=spell selected=(isSelected spell)}} {{/each}}
{{/each}} </div>
</tbody>
</table>
{{else}}{{#if searchReady}} {{else}}{{#if searchReady}}
No spells match "{{searchTerm}}" No spells match "{{searchTerm}}"
{{/if}}{{/if}} {{/if}}{{/if}}
@@ -36,13 +34,11 @@
{{name}} {{name}}
</div> </div>
<iron-collapse opened={{isOpen key}}> <iron-collapse opened={{isOpen key}}>
<table style="width: 100%"> <div>
<tbody> {{#each spell in (spellsInCategory key)}}
{{#each spell in (spellsInCategory key)}} {{>librarySpell spell=spell selected=(isSelected spell)}}
{{>librarySpell spell=spell selected=(isSelected spell)}} {{/each}}
{{/each}} </div>
</tbody>
</table>
{{#unless ready key}} {{#unless ready key}}
<paper-spinner active></paper-spinner> <paper-spinner active></paper-spinner>
{{/unless}} {{/unless}}
@@ -59,10 +55,10 @@
</template> </template>
<template name="librarySpell"> <template name="librarySpell">
<tr class="spell library-spell {{#if selected}}selected{{/if}}"> <div style="margin: ">
<td class="spellName"> <paper-checkbox class="spell library-spell" checked={{selected}} style="padding: 2px 0 2px 16px; width: 100%;">
{{spell.name}} {{spell.name}}
<paper-ripple></paper-ripple> <paper-ripple></paper-ripple>
</td> </paper-checkbox>
</tr> </div>
</template> </template>

8
rpg-docs/client/views/character/spells/spellsLibraryDialog/spellLibraryDialog.js
View File

@@ -62,6 +62,10 @@ Template.spellLibraryDialog.helpers({
const selected = Template.instance().selectedSpells.get(); const selected = Template.instance().selectedSpells.get();
return _.contains(selected, spell._id); return _.contains(selected, spell._id);
}, },
selectedCount(){
const selected = Template.instance().selectedSpells.get();
return selected && selected.length;
},
isOpen(key){ isOpen(key){
const cats = Template.instance().categoriesOpen.get(); const cats = Template.instance().categoriesOpen.get();
return _.contains(cats, key); return _.contains(cats, key);
@@ -109,10 +113,6 @@ Template.spellLibraryDialog.events({
selected.push(spellId); selected.push(spellId);
} }
template.selectedSpells.set(selected); template.selectedSpells.set(selected);
console.log("selectedSpells", Template.instance().selectedSpells.get());
console.log("spellId", this.spell._id);
}, },
"click #backButton": function(event, template){ "click #backButton": function(event, template){
popDialogStack(); popDialogStack();