Replaced spell library spell selection highlighting with checkboxes

Makes it more intuitive that multiple items can be selected

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

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

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

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

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

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