Ability Score filters + restyling

src/module/applications/compendium-browser.js

@@ -92,7 +92,7 @@ export class CompendiumBrowserVueApplication extends Application {
 			// Reactivate the listeners if we need to.
 			if (!this.vueListenersActive) {
 				setTimeout(() => {
-					this.activateVueListeners($(this.form), true);
+					this.activateVueListeners(true);
 				}, 150);
 			}
 			return;
@@ -112,7 +112,7 @@ export class CompendiumBrowserVueApplication extends Application {
 			this.vueRoot = this.vueApp.mount(`[data-appid="${this.appId}"] .compendium-browser-mount`);
 			// @todo Find a better solution than a timeout.
 			setTimeout(() => {
-				this.activateVueListeners($(this.form), false);
+				this.activateVueListeners();
 			}, 150);
 		}
 
@@ -142,37 +142,14 @@ export class CompendiumBrowserVueApplication extends Application {
 
 	/**
 	 * Activate additional listeners on the rendered Vue app.
-	 * @param {jQuery} html
 	 */
-	activateVueListeners(html, repeat = false) {
+	activateVueListeners(repeat = false) {
-		if (!this.options.editable) {
-			html.find("input,select,textarea").attr("disabled", true);
-			return;
-		}
-
-		if (html.find(".archmage-v2-vue").length > 0) {
 		this.vueListenersActive = true;
-		}
 
 		// Place one-time executions after this line.
 		if (repeat) return;
 
 		// Input listeners.
-		let inputs = '.section input[type="text"], .section input[type="number"]';
+		this.element.find(".filtercontainer h3").click(async (ev) => await $(ev.target.nextElementSibling).toggle(100));
-		html.on("focus", inputs, (event) => this._onFocus(event));
-	}
-
-	/**
-	 * Handle focus events.
-	 *
-	 * @param {*} event
-	 */
-	_onFocus(event) {
-		let target = event.currentTarget;
-		setTimeout(function () {
-			if (target == document.activeElement) {
-				$(target).trigger("select");
-			}
-		}, 100);
 	}
 }

src/styles/compendium-browser.less

@@ -60,17 +60,10 @@
 		}
 	}
 	.control-area {
-		position: sticky;
 		height: 100%;
-		overflow: auto;
 		flex: 2;
-		button {
+		.controls {
-			background: rgba(0, 0, 0, 0.05);
+			overflow: hidden auto;
-			border: 1px solid #bbb;
-			border-radius: 5px;
-			margin-top: 5px;
-			padding: 2px;
-		}
 			.filtercontainer {
 				border: 1px solid #bbb;
 				border-radius: 5px;
@@ -126,6 +119,18 @@
 				}
 			}
 		}
+		footer {
+			flex: 0;
+			padding: 1rem 0 3px;
+		}
+		button {
+			background: rgba(0, 0, 0, 0.05);
+			border: 1px solid #bbb;
+			border-radius: 5px;
+			margin-top: 5px;
+			padding: 2px;
+		}
+	}
 	.list-area {
 		position: sticky;
 		height: 100%;
@@ -134,17 +139,11 @@
 			flex: 0;
 			text-align: center;
 		}
-	}
+
-	.browser {
-		height: 100%;
-		overflow-y: hidden !important;
-		.window-content {
-			overflow-y: hidden !important;
-		}
 		ul {
 			float: right;
 			display: block;
-			min-width: 335px;
+			// min-width: 335px;
 			margin: 0;
 			height: 100%;
 			overflow: auto;
@@ -153,6 +152,10 @@
 				display: none;
 			}
 			li {
+				&:hover {
+					cursor: pointer;
+				}
+
 				span {
 					white-space: nowrap;
 					overflow: hidden;
@@ -178,6 +181,13 @@
 				}
 			}
 		}
+	}
+	.browser {
+		height: 100%;
+		overflow-y: hidden !important;
+		.window-content {
+			overflow-y: hidden !important;
+		}
 		.spacer {
 			display: inline-block;
 			min-width: 5px;
@@ -328,6 +338,14 @@
 					}
 				}
 			}
+
+			&:hover {
+				.npc-line {
+					.npc-name {
+						text-shadow: 0 0 8px var(--color-shadow-primary);
+					}
+				}
+			}
 		}
 	}
 	.settings {

src/vue/components/dialogs/compendium-browser/CompendiumBrowserCreatures.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="npc-browser browser flexrow">
-		<section class="control-area">
+		<section class="control-area flexcol">
+			<div class="controls">
 				<div class="filtercontainer">
 					<!-- Name filter. -->
 					<div class="filter">
@@ -16,13 +17,11 @@
 							</select>
 						</dd>
 					</dl>
-
-				<!-- Reset. -->
-				<button type="reset" @click="resetFilters()">{{ game.i18n.localize('Reset Filters') }}</button>
 				</div>
 
 				<div class="filtercontainer">
 					<h3>{{ game.i18n.localize('General') }}</h3>
+					<div class="filters">
 						<!-- Level range slider. -->
 						<div class="filter">
 							<label class="unit-title" for="compendiumBrowser.level">{{ game.i18n.localize('Challenge Rating') }}</label>
@@ -73,7 +72,27 @@
 							/>
 						</div>
 					</div>
+				</div>
 
+				<div class="filtercontainer">
+					<h3>{{ game.i18n.localize('Ability Scores') }}</h3>
+					<div class="filters">
+						<div v-for="(ability, key) in abilities" class="filter">
+							<label class="unit-title" for="compendiumBrowser.str">{{ ability.label }}</label>
+							<div class="level-range flexrow">
+								<div class="level-label"><span>{{ ability.range[0] }}</span><span v-if="ability.range[0] !== ability.range[1]"> - {{ ability.range[1] }}</span></div>
+								<div class="level-input slider-wrapper flexrow">
+									<Slider v-model="abilities[key].range" :min="1" :max="30" :tooltips="false"/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<footer>
+				<!-- Reset. -->
+				<button type="reset" @click="resetFilters()">{{ game.i18n.localize('Reset Filters') }}</button>
+			</footer>
 		</section>
 
 		<div class="list-area flexcol">
@@ -89,9 +108,7 @@
 					</div>
 					<div class="npc-line">
 						<!-- First row is the title. -->
-						<div class="npc-name">
+						<div class="npc-name">[{{ game.dnd5e.utils.formatCR(entry.system.details.cr) }}] {{ entry.name }}</div>
-							<a>[{{ game.dnd5e.utils.formatCR(entry.system.details.cr) }}] {{ entry.name }}</a>
-						</div>
 						<!-- Second row is supplemental info. -->
 						<div class="npc-tags flexrow">
 							<div class="numbers flexrow">
@@ -147,6 +164,8 @@ export default {
 		}
 	},
 	data() {
+		const abilities = {};
+		Object.entries(CONFIG.DND5E.abilities).forEach(([k, v]) => abilities[k] = { label: v.label, range: [1, 30] });
 		return {
 			// Props used for infinite scroll and pagination.
 			observer: null,
@@ -171,6 +190,7 @@ export default {
 			// Mixed decimals and ints aren't supported by the slider, so
 			// just use 0 for all CRs below 1.
 			crRange: [0, 30],
+			abilities,
 			legact: '',
 			legres: '',
 			size: [],
@@ -267,6 +287,14 @@ export default {
 				result = result.filter(entry => this.creatureType.includes(entry.system.details.type.value));
 			}
 
+			Object.entries(this.abilities)
+				.forEach(([k, v]) => {
+					result = result.filter((entry) =>
+						Number(entry.system.abilities[k].value) >= v.range[0] &&
+						Number(entry.system.abilities[k].value) <= v.range[1]
+					)
+				});
+
 			// Reflow pager.
 			if (result.length > this.pager.perPage) {
 				this.pager.totalRows = result.length;