diff --git a/src/module/apps/compendium-browser/index.ts b/src/module/apps/compendium-browser/index.ts index ddfade78dfd..0c9edf663f6 100644 --- a/src/module/apps/compendium-browser/index.ts +++ b/src/module/apps/compendium-browser/index.ts @@ -4,7 +4,19 @@ import { ActionType, ItemType } from "@item/base/data/index.ts"; import { PHYSICAL_ITEM_TYPES } from "@item/physical/values.ts"; import { BaseSpellcastingEntry } from "@item/spellcasting-entry/index.ts"; import type { UserPF2e } from "@module/user/document.ts"; -import { ErrorPF2e, htmlQuery, htmlQueryAll, isBlank, isObject, localizer, objectHasKey, setHasElement } from "@util"; +import { + ErrorPF2e, + createHTMLElement, + fontAwesomeIcon, + htmlClosest, + htmlQuery, + htmlQueryAll, + isBlank, + isObject, + localizer, + objectHasKey, + setHasElement, +} from "@util"; import { getSelectedOrOwnActors } from "@util/token-actor-utils.ts"; import Tagify from "@yaireo/tagify"; import noUiSlider from "nouislider"; @@ -596,13 +608,14 @@ class CompendiumBrowser extends Application { tagify.on("click", (event) => { const target = event.detail.event.target as HTMLElement; if (!target) return; - - const value = event.detail.data.value; - const selected = data.selected.find((s) => s.value === value); - if (selected) { - const current = !!selected.not; - selected.not = !current; - this.render(); + const action = htmlClosest(target, "[data-action]")?.dataset?.action; + if (action === "toggle-not") { + const value = event.detail.data.value; + const selected = data.selected.find((s) => s.value === value); + if (selected) { + selected.not = !selected.not; + this.render(); + } } }); tagify.on("change", (event) => { @@ -632,6 +645,17 @@ class CompendiumBrowser extends Application { } }); } + + for (const tag of htmlQueryAll(container, "tag")) { + const icon = fontAwesomeIcon("ban", { style: "solid" }); + icon.classList.add("fa-2xs"); + const notButton = createHTMLElement("a", { + classes: ["conjunction-not-button"], + children: [icon], + dataset: { action: "toggle-not" }, + }); + tag.appendChild(notButton); + } } } diff --git a/src/styles/_tags.scss b/src/styles/_tags.scss index 14773927fdd..1d8a53fc1f4 100644 --- a/src/styles/_tags.scss +++ b/src/styles/_tags.scss @@ -218,6 +218,31 @@ tags.tags.paizo-style { text-decoration: line-through; text-decoration-color: var(--color-text-trait); } + + &-button { + order: 4; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50px; + cursor: pointer; + background: var(--tag-remove-btn-bg); + color: var(--tag-remove-btn-color); + + width: 14px; + height: 14px; + // Not needed for Firefox + -webkit-padding-before: 2px; + margin-left: 2px; + + overflow: hidden; + transition: 0.2s ease-out; + + &:hover { + color: white; + background: var(--tag-remove-btn-bg--hover); + } + } } tag {