Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2026-02-04 10:35:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

better deletion styles

Browse Source
This commit is contained in:
Simon Martens
2026-01-09 06:05:19 +01:00
parent aff194f400
commit 492d398d27
7 changed files with 166 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
views/assets/scripts.js
View File

@@ -1561,7 +1561,7 @@ class kt extends HTMLElement {
const u = document.createElement("span"); const u = document.createElement("span");
u.className = "ml-1 text-xs text-gray-600", u.textContent = "(Neu)", l.appendChild(u); u.className = "ml-1 text-xs text-gray-600", u.textContent = "(Neu)", l.appendChild(u);
} }
return c && (l.classList.add("line-through", "decoration-2", "decoration-red-600", "text-gray-500"), r.classList.add("line-through", "decoration-2", "decoration-red-600", "text-gray-500")), o.setAttribute("aria-label", c ? `Undo remove ${e.name}` : `Remove ${e.name}`), o.dataset.id = t, o.disabled = this.hasAttribute("disabled"), o.innerHTML = c ? '<span class="text-xs inline-flex items-center"><i class="ri-arrow-go-back-line"></i></span>' : "&times;", o.addEventListener("click", (u) => { return c && (n.classList.add("bg-red-100"), n.style.position = "relative"), o.setAttribute("aria-label", c ? `Undo remove ${e.name}` : `Remove ${e.name}`), o.dataset.id = t, o.disabled = this.hasAttribute("disabled"), o.innerHTML = c ? '<span class="text-xs inline-flex items-center"><i class="ri-arrow-go-back-line"></i></span>' : "&times;", o.addEventListener("click", (u) => {
u.stopPropagation(), this._handleDeleteSelectedItem(t); u.stopPropagation(), this._handleDeleteSelectedItem(t);
}), n; }), n;
} }
@@ -2135,14 +2135,14 @@ class $e extends HTMLElement {
if (!e || e.getAttribute(v) !== "true") if (!e || e.getAttribute(v) !== "true")
return; return;
const s = t.querySelector("[data-delete-label]"); const s = t.querySelector("[data-delete-label]");
s && (s.textContent = s.getAttribute("data-delete-hover") || "Rückgängig", s.classList.add("text-orange-700")); s && (s.textContent = s.getAttribute("data-delete-hover") || "Rückgängig");
const n = t.querySelector("i"); const n = t.querySelector("i");
n && (n.classList.remove("hidden"), n.classList.add("ri-arrow-go-back-line"), n.classList.remove("ri-delete-bin-line")); n && (n.classList.remove("hidden"), n.classList.add("ri-arrow-go-back-line"), n.classList.remove("ri-delete-bin-line"));
}), t.addEventListener("mouseleave", () => { }), t.addEventListener("mouseleave", () => {
const e = t.closest(`.${p}`), s = t.querySelector("[data-delete-label]"); const e = t.closest(`.${p}`), s = t.querySelector("[data-delete-label]");
if (!s) if (!s)
return; return;
s.classList.remove("text-orange-700"), e && e.getAttribute(v) === "true" ? s.textContent = s.getAttribute("data-delete-active") || "Wird entfernt" : s.textContent = s.getAttribute("data-delete-default") || "Entfernen"; e && e.getAttribute(v) === "true" ? s.textContent = s.getAttribute("data-delete-active") || "Wird entfernt" : s.textContent = s.getAttribute("data-delete-default") || "Entfernen";
const n = t.querySelector("i"); const n = t.querySelector("i");
n && (e && e.getAttribute(v) === "true" ? (n.classList.add("hidden"), n.classList.remove("ri-delete-bin-line", "ri-arrow-go-back-line")) : (n.classList.remove("hidden"), n.classList.add("ri-delete-bin-line"), n.classList.remove("ri-arrow-go-back-line"))); n && (e && e.getAttribute(v) === "true" ? (n.classList.add("hidden"), n.classList.remove("ri-delete-bin-line", "ri-arrow-go-back-line")) : (n.classList.remove("hidden"), n.classList.add("ri-delete-bin-line"), n.classList.remove("ri-arrow-go-back-line")));
})); }));
@@ -2181,9 +2181,7 @@ class $e extends HTMLElement {
this._resetToOriginal(i), this._setRowMode(i, "summary"); this._resetToOriginal(i), this._setRowMode(i, "summary");
} }
_setRowRemoved(i, t) { _setRowRemoved(i, t) {
i.setAttribute(v, t ? "true" : "false"), i.classList.toggle("bg-red-50", t), i.querySelectorAll("[data-items-strike]").forEach((n) => { i.setAttribute(v, t ? "true" : "false"), i.classList.toggle("bg-red-50", t), i.querySelectorAll("[data-delete-label]").forEach((n) => {
n.classList.toggle("line-through", t), n.classList.toggle("decoration-2", t), n.classList.toggle("decoration-red-600", t), n.classList.toggle("text-gray-500", t);
}), i.querySelectorAll("[data-delete-label]").forEach((n) => {
const l = t ? n.getAttribute("data-delete-active") || "Wird entfernt" : n.getAttribute("data-delete-default") || "Entfernen"; const l = t ? n.getAttribute("data-delete-active") || "Wird entfernt" : n.getAttribute("data-delete-default") || "Entfernen";
n.textContent = l; n.textContent = l;
}), i.querySelectorAll(`.${yt} i`).forEach((n) => { }), i.querySelectorAll(`.${yt} i`).forEach((n) => {
@@ -2716,8 +2714,8 @@ class Ke extends HTMLElement {
h && u && u.replaceWith(h), this._initForm(), this._initPlaces(), this._initSaveHandling(); h && u && u.replaceWith(h), this._initForm(), this._initPlaces(), this._initSaveHandling();
} }
} }
const ze = "[data-role='relation-add-toggle']", We = "[data-role='relation-add-panel']", Ge = "[data-role='relation-add-close']", je = "[data-role='relation-add-apply']", Je = "[data-role='relation-add-error']", Qe = "[data-role='relation-add-row']", Xe = "[data-role='relation-add-select']", Ye = "[data-role='relation-type-select']", Ze = "[data-role='relation-uncertain']", ti = "template[data-role='relation-new-template']", ei = "[data-role='relation-new-delete']", wt = "[data-rel-row]", ii = "[data-rel-strike]"; const ze = "[data-role='relation-add-toggle']", We = "[data-role='relation-add-panel']", Ge = "[data-role='relation-add-close']", je = "[data-role='relation-add-apply']", Je = "[data-role='relation-add-error']", Qe = "[data-role='relation-add-row']", Xe = "[data-role='relation-add-select']", Ye = "[data-role='relation-type-select']", Ze = "[data-role='relation-uncertain']", ti = "template[data-role='relation-new-template']", ei = "[data-role='relation-new-delete']", wt = "[data-rel-row]";
class si extends HTMLElement { class ii extends HTMLElement {
constructor() { constructor() {
super(), this._pendingItem = null, this._pendingApply = !1; super(), this._pendingItem = null, this._pendingApply = !1;
} }
@@ -2790,11 +2788,9 @@ class si extends HTMLElement {
const t = i.getAttribute("data-delete-toggle"), e = this.querySelector(`#${CSS.escape(t)}`); const t = i.getAttribute("data-delete-toggle"), e = this.querySelector(`#${CSS.escape(t)}`);
if (!e) if (!e)
return; return;
e.checked = !e.checked, i.classList.toggle("opacity-60", e.checked); e.checked = !e.checked;
const s = i.closest(wt); const s = i.closest(wt);
s && (s.classList.toggle("bg-red-50", e.checked), s.querySelectorAll(ii).forEach((r) => { s && s.classList.toggle("bg-red-50", e.checked);
r.classList.toggle("is-removed", e.checked), r.classList.toggle("text-gray-500", e.checked);
}));
const n = i.querySelector("[data-delete-label]"); const n = i.querySelector("[data-delete-label]");
n && (n.textContent = e.checked ? n.getAttribute("data-delete-active") || "Wird entfernt" : n.getAttribute("data-delete-default") || "Entfernen"); n && (n.textContent = e.checked ? n.getAttribute("data-delete-active") || "Wird entfernt" : n.getAttribute("data-delete-default") || "Entfernen");
const l = i.querySelector("i"); const l = i.querySelector("i");
@@ -2804,43 +2800,43 @@ class si extends HTMLElement {
if (!e || !e.checked) if (!e || !e.checked)
return; return;
const s = i.querySelector("[data-delete-label]"); const s = i.querySelector("[data-delete-label]");
s && (s.textContent = s.getAttribute("data-delete-hover") || "Rückgängig", s.classList.add("text-orange-700"), s.classList.remove("text-gray-500")); s && (s.textContent = s.getAttribute("data-delete-hover") || "Rückgängig");
const n = i.querySelector("i"); const n = i.querySelector("i");
n && (n.classList.remove("hidden"), n.classList.add("ri-arrow-go-back-line"), n.classList.remove("ri-delete-bin-line")); n && (n.classList.remove("hidden"), n.classList.add("ri-arrow-go-back-line"), n.classList.remove("ri-delete-bin-line"));
}), i.addEventListener("mouseleave", () => { }), i.addEventListener("mouseleave", () => {
const t = i.getAttribute("data-delete-toggle"), e = this.querySelector(`#${CSS.escape(t)}`), s = i.querySelector("[data-delete-label]"); const t = i.getAttribute("data-delete-toggle"), e = this.querySelector(`#${CSS.escape(t)}`), s = i.querySelector("[data-delete-label]");
if (!s) if (!s)
return; return;
s.classList.remove("text-orange-700"), e && e.checked ? s.textContent = s.getAttribute("data-delete-active") || "Wird entfernt" : s.textContent = s.getAttribute("data-delete-default") || "Entfernen"; e && e.checked ? s.textContent = s.getAttribute("data-delete-active") || "Wird entfernt" : s.textContent = s.getAttribute("data-delete-default") || "Entfernen";
const n = i.querySelector("i"); const n = i.querySelector("i");
n && (e && e.checked ? (n.classList.add("hidden"), n.classList.remove("ri-delete-bin-line", "ri-arrow-go-back-line")) : (n.classList.remove("hidden"), n.classList.add("ri-delete-bin-line"), n.classList.remove("ri-arrow-go-back-line"))); n && (e && e.checked ? (n.classList.add("hidden"), n.classList.remove("ri-delete-bin-line", "ri-arrow-go-back-line")) : (n.classList.remove("hidden"), n.classList.add("ri-delete-bin-line"), n.classList.remove("ri-arrow-go-back-line")));
}); });
}); });
} }
} }
const ni = "filter-list", ai = "scroll-button", li = "tool-tip", ri = "abbrev-tooltips", oi = "int-link", di = "popup-image", hi = "tab-list", ci = "filter-pill", ui = "image-reel", mi = "multi-select-places", _i = "multi-select-simple", pi = "single-select-remote", Rt = "reset-button", fi = "div-manager", gi = "items-editor", bi = "almanach-edit-page", Ei = "relations-editor"; const si = "filter-list", ni = "scroll-button", ai = "tool-tip", li = "abbrev-tooltips", ri = "int-link", oi = "popup-image", di = "tab-list", hi = "filter-pill", ci = "image-reel", ui = "multi-select-places", mi = "multi-select-simple", _i = "single-select-remote", Rt = "reset-button", pi = "div-manager", fi = "items-editor", gi = "almanach-edit-page", bi = "relations-editor";
customElements.define(oi, zt); customElements.define(ri, zt);
customElements.define(ri, L); customElements.define(li, L);
customElements.define(ni, Ht); customElements.define(si, Ht);
customElements.define(ai, Ft); customElements.define(ni, Ft);
customElements.define(li, Vt); customElements.define(ai, Vt);
customElements.define(di, Ut); customElements.define(oi, Ut);
customElements.define(hi, Kt); customElements.define(di, Kt);
customElements.define(ci, Pt); customElements.define(hi, Pt);
customElements.define(ui, Wt); customElements.define(ci, Wt);
customElements.define(mi, xt); customElements.define(ui, xt);
customElements.define(_i, kt); customElements.define(mi, kt);
customElements.define(pi, Ve); customElements.define(_i, Ve);
customElements.define(Rt, Le); customElements.define(Rt, Le);
customElements.define(fi, Te); customElements.define(pi, Te);
customElements.define(gi, $e); customElements.define(fi, $e);
customElements.define(bi, Ke); customElements.define(gi, Ke);
customElements.define(Ei, si); customElements.define(bi, ii);
function Si() { function Ei() {
const a = window.location.pathname, i = window.location.search, t = a + i; const a = window.location.pathname, i = window.location.search, t = a + i;
return encodeURIComponent(t); return encodeURIComponent(t);
} }
function vi(a = 5e3, i = 100) { function Si(a = 5e3, i = 100) {
return new Promise((t, e) => { return new Promise((t, e) => {
let s = 0; let s = 0;
const n = setInterval(() => { const n = setInterval(() => {
@@ -2848,8 +2844,8 @@ function vi(a = 5e3, i = 100) {
}, i); }, i);
}); });
} }
async function Li(a) { async function vi(a) {
const i = await vi(), t = document.getElementById("qr"); const i = await Si(), t = document.getElementById("qr");
t && (t.innerHTML = "", t.classList.add("hidden"), new i(t, { t && (t.innerHTML = "", t.classList.add("hidden"), new i(t, {
text: a, text: a,
width: 1280, width: 1280,
@@ -2861,7 +2857,7 @@ async function Li(a) {
t.classList.remove("hidden"); t.classList.remove("hidden");
}, 20)); }, 20));
} }
function yi(a) { function Li(a) {
a && (a.addEventListener("focus", (i) => { a && (a.addEventListener("focus", (i) => {
i.preventDefault(), a.select(); i.preventDefault(), a.select();
}), a.addEventListener("mousedown", (i) => { }), a.addEventListener("mousedown", (i) => {
@@ -2874,7 +2870,7 @@ function yi(a) {
a.select(); a.select();
})); }));
} }
function Ai() { function yi() {
document.body.addEventListener("htmx:responseError", function(a) { document.body.addEventListener("htmx:responseError", function(a) {
const i = a.detail.requestConfig; const i = a.detail.requestConfig;
if (i.boosted) { if (i.boosted) {
@@ -2884,7 +2880,7 @@ function Ai() {
} }
}); });
} }
function Ii(a, i) { function Ai(a, i) {
if (!(a instanceof HTMLElement)) { if (!(a instanceof HTMLElement)) {
console.warn("Target must be an HTMLElement."); console.warn("Target must be an HTMLElement.");
return; return;
@@ -2922,7 +2918,7 @@ function Bt(a) {
R(a); R(a);
}); });
} }
function Ti(a) { function Ii(a) {
if (!(a instanceof HTMLTextAreaElement)) { if (!(a instanceof HTMLTextAreaElement)) {
console.warn("DisconnectTextareaAutoResize: Provided element is not a textarea."); console.warn("DisconnectTextareaAutoResize: Provided element is not a textarea.");
return; return;
@@ -2931,22 +2927,22 @@ function Ti(a) {
R(a); R(a);
}); });
} }
function Ci(a) { function Ti(a) {
!(a instanceof HTMLTextAreaElement) && a.classList.contains("no-enter") || a.addEventListener("keydown", Mt); !(a instanceof HTMLTextAreaElement) && a.classList.contains("no-enter") || a.addEventListener("keydown", Mt);
} }
function wi(a) { function Ci(a) {
!(a instanceof HTMLTextAreaElement) && a.classList.contains("no-enter") || a.removeEventListener("keydown", Mt); !(a instanceof HTMLTextAreaElement) && a.classList.contains("no-enter") || a.removeEventListener("keydown", Mt);
} }
function xi(a, i) { function wi(a, i) {
for (const t of a) for (const t of a)
if (t.type === "childList") { if (t.type === "childList") {
for (const e of t.addedNodes) for (const e of t.addedNodes)
e.nodeType === Node.ELEMENT_NODE && e.matches("textarea") && (Bt(e), R(e)); e.nodeType === Node.ELEMENT_NODE && e.matches("textarea") && (Bt(e), R(e));
for (const e of t.removedNodes) for (const e of t.removedNodes)
e.nodeType === Node.ELEMENT_NODE && e.matches("textarea") && (wi(e), Ti(e)); e.nodeType === Node.ELEMENT_NODE && e.matches("textarea") && (Ci(e), Ii(e));
} }
} }
function ki(a) { function xi(a) {
if (!(a instanceof HTMLFormElement)) { if (!(a instanceof HTMLFormElement)) {
console.warn("FormLoad: Provided element is not a form."); console.warn("FormLoad: Provided element is not a form.");
return; return;
@@ -2956,8 +2952,8 @@ function ki(a) {
Bt(s), R(s); Bt(s), R(s);
const t = document.querySelectorAll("textarea.no-enter"); const t = document.querySelectorAll("textarea.no-enter");
for (const s of t) for (const s of t)
Ci(s); Ti(s);
new MutationObserver(xi).observe(a, { new MutationObserver(wi).observe(a, {
childList: !0, childList: !0,
subtree: !0 subtree: !0
}); });
@@ -2968,12 +2964,12 @@ document.addEventListener("keydown", (a) => {
const i = a.target; const i = a.target;
i instanceof HTMLElement && i.matches("textarea.no-enter") && a.preventDefault(); i instanceof HTMLElement && i.matches("textarea.no-enter") && a.preventDefault();
}); });
window.ShowBoostedErrors = Ai; window.ShowBoostedErrors = yi;
window.GenQRCode = Li; window.GenQRCode = vi;
window.SelectableInput = yi; window.SelectableInput = Li;
window.PathPlusQuery = Si; window.PathPlusQuery = Ei;
window.HookupRBChange = Ii; window.HookupRBChange = Ai;
window.FormLoad = ki; window.FormLoad = xi;
export { export {
L as AbbreviationTooltips, L as AbbreviationTooltips,
Ke as AlmanachEditPage, Ke as AlmanachEditPage,
@@ -2985,7 +2981,7 @@ export {
xt as MultiSelectRole, xt as MultiSelectRole,
kt as MultiSelectSimple, kt as MultiSelectSimple,
Ut as PopupImage, Ut as PopupImage,
si as RelationsEditor, ii as RelationsEditor,
Ft as ScrollButton, Ft as ScrollButton,
Ve as SingleSelectRemote, Ve as SingleSelectRemote,
Kt as TabList, Kt as TabList,

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

32
views/routes/almanach/edit/body.gohtml
View File

@@ -303,9 +303,9 @@ type AlmanachResult struct {
{{- $rel := index $model.result.EntriesSeries $s.Id -}} {{- $rel := index $model.result.EntriesSeries $s.Id -}}
{{- if $rel -}} {{- if $rel -}}
<div data-rel-row class="entries-series-row border border-stone-200 rounded-xs bg-stone-50 px-3 py-2"> <div data-rel-row class="entries-series-row border border-stone-200 rounded-xs bg-stone-50 px-3 py-2">
<div class="grid grid-cols-[1fr_14rem_8rem_7rem] gap-3 items-center"> <div class="grid grid-cols-[1fr_14rem_5.5rem_7rem] gap-3 items-center">
<div data-rel-strike class="relation-strike flex flex-col min-w-0"> <div data-rel-strike class="relation-strike flex flex-col min-w-0">
<a data-rel-link href="/reihe/{{ $s.MusenalmID }}" class="text-base font-bold text-gray-800 no-underline hover:text-slate-900 truncate"> <a data-rel-link href="/reihe/{{ $s.MusenalmID }}" class="text-base text-gray-800 no-underline hover:text-slate-900 truncate">
<span data-rel-name>{{- $s.Title -}}</span> <span data-rel-name>{{- $s.Title -}}</span>
</a> </a>
{{- if $s.Pseudonyms -}} {{- if $s.Pseudonyms -}}
@@ -330,7 +330,7 @@ type AlmanachResult struct {
<div class="flex justify-end"> <div class="flex justify-end">
<button <button
type="button" type="button"
class="text-sm text-red-700 hover:text-red-900" class="text-sm"
data-delete-toggle="entries_series_delete_{{ $rel.Id }}"> data-delete-toggle="entries_series_delete_{{ $rel.Id }}">
<i class="ri-delete-bin-line mr-1"></i> <i class="ri-delete-bin-line mr-1"></i>
<span class="no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span> <span class="no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span>
@@ -350,7 +350,7 @@ type AlmanachResult struct {
<div data-role="relation-add-row" class="mt-2"></div> <div data-role="relation-add-row" class="mt-2"></div>
<div data-role="relation-add-panel" class="mt-2 hidden"> <div data-role="relation-add-panel" class="mt-2 hidden">
<div class="border border-stone-200 rounded-xs bg-stone-50 px-3 py-2"> <div class="border border-stone-200 rounded-xs bg-stone-50 px-3 py-2">
<div class="grid grid-cols-[1fr_14rem_8rem_7rem] gap-3 items-center"> <div class="grid grid-cols-[1fr_14rem_5.5rem_7rem] gap-3 items-center">
<div class="min-w-0"> <div class="min-w-0">
<label for="series-add-select" class="sr-only">Reihe suchen</label> <label for="series-add-select" class="sr-only">Reihe suchen</label>
<single-select-remote <single-select-remote
@@ -392,9 +392,9 @@ type AlmanachResult struct {
</div> </div>
<template data-role="relation-new-template"> <template data-role="relation-new-template">
<div data-rel-row class="border border-stone-200 rounded-xs bg-stone-50 px-3 py-2"> <div data-rel-row class="border border-stone-200 rounded-xs bg-stone-50 px-3 py-2">
<div class="grid grid-cols-[1fr_14rem_8rem_7rem] gap-3 items-center"> <div class="grid grid-cols-[1fr_14rem_5.5rem_7rem] gap-3 items-center">
<div data-rel-strike class="relation-strike flex flex-col min-w-0"> <div data-rel-strike class="relation-strike flex flex-col min-w-0">
<div class="text-base font-bold text-gray-800 truncate"> <div class="text-base text-gray-800 truncate">
<a data-rel-link class="no-underline hover:text-slate-900"> <a data-rel-link class="no-underline hover:text-slate-900">
<span data-rel-name></span> <span data-rel-name></span>
</a> </a>
@@ -431,17 +431,17 @@ type AlmanachResult struct {
{{- range $i, $r := $model.result.EntriesAgents -}} {{- range $i, $r := $model.result.EntriesAgents -}}
{{- $a := index $model.result.Agents $r.Agent -}} {{- $a := index $model.result.Agents $r.Agent -}}
<div data-rel-row class="entries-agent-row border border-stone-200 rounded-xs bg-stone-50 px-3 py-2"> <div data-rel-row class="entries-agent-row border border-stone-200 rounded-xs bg-stone-50 px-3 py-2">
<div class="grid grid-cols-[1fr_14rem_8rem_7rem] gap-3 items-center"> <div class="grid grid-cols-[1fr_14rem_5.5rem_7rem] gap-3 items-center">
<div data-rel-strike class="relation-strike flex flex-col min-w-0"> <div data-rel-strike class="relation-strike flex flex-col min-w-0">
{{- if $a -}} {{- if $a -}}
<a data-rel-link href="/person/{{ $a.Id }}" class="text-base font-bold text-gray-800 no-underline hover:text-slate-900 truncate"> <a data-rel-link href="/person/{{ $a.Id }}" class="text-base text-gray-800 no-underline hover:text-slate-900 truncate">
<span data-rel-name>{{- $a.Name -}}</span> <span data-rel-name>{{- $a.Name -}}</span>
</a> </a>
{{- if $a.BiographicalData -}} {{- if $a.BiographicalData -}}
<div data-rel-detail-container class="text-xs text-gray-600 truncate"><span data-rel-detail>{{- $a.BiographicalData -}}</span></div> <div data-rel-detail-container class="text-xs text-gray-600 truncate"><span data-rel-detail>{{- $a.BiographicalData -}}</span></div>
{{- end -}} {{- end -}}
{{- else -}} {{- else -}}
<div class="text-base font-bold text-gray-800">Unbekannte Person</div> <div class="text-base text-gray-800">Unbekannte Person</div>
{{- end -}} {{- end -}}
</div> </div>
<div data-rel-strike class="relation-strike"> <div data-rel-strike class="relation-strike">
@@ -462,7 +462,7 @@ type AlmanachResult struct {
<div class="flex justify-end"> <div class="flex justify-end">
<button <button
type="button" type="button"
class="text-sm text-red-700 hover:text-red-900" class="text-sm"
data-delete-toggle="entries_agents_delete_{{ $r.Id }}"> data-delete-toggle="entries_agents_delete_{{ $r.Id }}">
<i class="ri-delete-bin-line mr-1"></i> <i class="ri-delete-bin-line mr-1"></i>
<span class="no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span> <span class="no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span>
@@ -481,7 +481,7 @@ type AlmanachResult struct {
<div data-role="relation-add-row" class="mt-2"></div> <div data-role="relation-add-row" class="mt-2"></div>
<div data-role="relation-add-panel" class="mt-2 hidden"> <div data-role="relation-add-panel" class="mt-2 hidden">
<div class="border border-stone-200 rounded-xs bg-stone-50 px-3 py-2"> <div class="border border-stone-200 rounded-xs bg-stone-50 px-3 py-2">
<div class="grid grid-cols-[1fr_14rem_8rem_7rem] gap-3 items-center"> <div class="grid grid-cols-[1fr_14rem_5.5rem_7rem] gap-3 items-center">
<div class="min-w-0"> <div class="min-w-0">
<label for="agents-add-select" class="sr-only">Akteur suchen</label> <label for="agents-add-select" class="sr-only">Akteur suchen</label>
<single-select-remote <single-select-remote
@@ -523,9 +523,9 @@ type AlmanachResult struct {
</div> </div>
<template data-role="relation-new-template"> <template data-role="relation-new-template">
<div data-rel-row class="border border-stone-200 rounded-xs bg-stone-50 px-3 py-2"> <div data-rel-row class="border border-stone-200 rounded-xs bg-stone-50 px-3 py-2">
<div class="grid grid-cols-[1fr_14rem_8rem_7rem] gap-3 items-center"> <div class="grid grid-cols-[1fr_14rem_5.5rem_7rem] gap-3 items-center">
<div data-rel-strike class="relation-strike flex flex-col min-w-0"> <div data-rel-strike class="relation-strike flex flex-col min-w-0">
<div class="text-base font-bold text-gray-800 truncate"> <div class="text-base text-gray-800 truncate">
<a data-rel-link class="no-underline hover:text-slate-900"> <a data-rel-link class="no-underline hover:text-slate-900">
<span data-rel-name></span> <span data-rel-name></span>
</a> </a>
@@ -740,7 +740,7 @@ type AlmanachResult struct {
<button type="button" class="items-edit-button text-gray-700 hover:text-gray-900" aria-label="Bearbeiten"> <button type="button" class="items-edit-button text-gray-700 hover:text-gray-900" aria-label="Bearbeiten">
<i class="ri-edit-line"></i> <i class="ri-edit-line"></i>
</button> </button>
<button type="button" class="items-remove-button text-red-700 hover:text-red-900" aria-label="Entfernen"> <button type="button" class="items-remove-button" aria-label="Entfernen">
<i class="ri-delete-bin-line"></i> <i class="ri-delete-bin-line"></i>
<span class="ml-1 text-sm no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span> <span class="ml-1 text-sm no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span>
</button> </button>
@@ -787,7 +787,7 @@ type AlmanachResult struct {
<button type="button" class="items-cancel-button resetbutton w-auto px-2 py-1 text-base"> <button type="button" class="items-cancel-button resetbutton w-auto px-2 py-1 text-base">
<i class="ri-close-line mr-2"></i> Abbrechen <i class="ri-close-line mr-2"></i> Abbrechen
</button> </button>
<button type="button" class="items-remove-button resetbutton w-auto px-2 py-1 text-base text-red-700 hover:text-red-900"> <button type="button" class="items-remove-button resetbutton w-auto px-2 py-1 text-base">
<i class="ri-delete-bin-line mr-2"></i> <i class="ri-delete-bin-line mr-2"></i>
<span class="no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span> <span class="no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span>
</button> </button>
@@ -839,7 +839,7 @@ type AlmanachResult struct {
<button type="button" class="items-edit-button text-gray-700 hover:text-gray-900" aria-label="Bearbeiten"> <button type="button" class="items-edit-button text-gray-700 hover:text-gray-900" aria-label="Bearbeiten">
<i class="ri-edit-line"></i> <i class="ri-edit-line"></i>
</button> </button>
<button type="button" class="items-remove-button text-red-700 hover:text-red-900" aria-label="Entfernen"> <button type="button" class="items-remove-button" aria-label="Entfernen">
<i class="ri-delete-bin-line"></i> <i class="ri-delete-bin-line"></i>
<span class="ml-1 text-sm no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span> <span class="ml-1 text-sm no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span>
</button> </button>

103
views/transform/form.css
View File

@@ -46,16 +46,109 @@
position: relative; position: relative;
} }
.relation-strike.is-removed::after, /* Diagonal hatching pattern for deleted relations, items, and pills */
.entries-agent-strike.is-removed::after { [data-rel-row],
.items-row,
.mss-selected-item-pill.bg-red-100 {
position: relative;
}
[data-rel-row].bg-red-50::before,
.items-row.bg-red-50::before,
.mss-selected-item-pill.bg-red-100::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0;
left: 0; left: 0;
right: 0; right: 0;
top: 50%; bottom: 0;
transform: translateY(-50%); background: repeating-linear-gradient(
border-top: 2px solid #dc2626; -45deg,
transparent,
transparent 6px,
rgba(220, 38, 38, 0.2) 6px,
rgba(220, 38, 38, 0.2) 10px
);
border-radius: 0.25rem;
pointer-events: none; pointer-events: none;
z-index: 1;
}
[data-rel-row] > *,
.items-row > *,
.mss-selected-item-pill.bg-red-100 > * {
position: relative;
z-index: 2;
}
/* Apply hatching to items heading when row is deleted */
.items-row.bg-red-50 .items-summary > div.bg-stone-100 {
position: relative;
background: transparent;
}
.items-row.bg-red-50 .items-summary > div.bg-stone-100::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
-45deg,
#f5f5f4,
#f5f5f4 6px,
rgba(220, 38, 38, 0.25) 6px,
rgba(220, 38, 38, 0.25) 10px
);
border-radius: 0.25rem;
pointer-events: none;
z-index: 0;
}
.items-row.bg-red-50 .items-summary > div.bg-stone-100 > * {
position: relative;
z-index: 1;
}
/* Ensure buttons are above the hatching */
[data-rel-row] button,
.items-row button {
position: relative;
z-index: 10;
}
/* Default styling for delete buttons */
[data-delete-toggle],
.items-remove-button {
@apply text-red-700 transition-colors;
}
[data-delete-toggle]:hover,
.items-remove-button:hover {
@apply text-red-900;
}
/* Style delete/revert button in removed state */
[data-rel-row].bg-red-50 [data-delete-toggle],
.items-row.bg-red-50 .items-remove-button {
@apply bg-red-600 text-white px-2 py-1 rounded-xs transition-colors;
}
[data-rel-row].bg-red-50 [data-delete-toggle]:hover,
.items-row.bg-red-50 .items-remove-button:hover {
@apply bg-orange-500 text-white;
}
/* Reduce padding for items delete button */
.items-row.bg-red-50 .items-remove-button {
@apply px-1.5 py-0.5;
}
/* Ensure all text inside delete buttons is white in removed state */
[data-rel-row].bg-red-50 [data-delete-toggle] *,
.items-row.bg-red-50 .items-remove-button * {
@apply text-white;
} }
/* Multi-Select-Role example styles */ /* Multi-Select-Role example styles */

8
views/transform/items-editor.js
View File

@@ -99,7 +99,6 @@ export class ItemsEditor extends HTMLElement {
const label = btn.querySelector("[data-delete-label]"); const label = btn.querySelector("[data-delete-label]");
if (label) { if (label) {
label.textContent = label.getAttribute("data-delete-hover") || "Rückgängig"; label.textContent = label.getAttribute("data-delete-hover") || "Rückgängig";
label.classList.add("text-orange-700");
} }
const icon = btn.querySelector("i"); const icon = btn.querySelector("i");
if (icon) { if (icon) {
@@ -114,7 +113,6 @@ export class ItemsEditor extends HTMLElement {
if (!label) { if (!label) {
return; return;
} }
label.classList.remove("text-orange-700");
if (row && row.getAttribute(REMOVED_ROW_STATE) === "true") { if (row && row.getAttribute(REMOVED_ROW_STATE) === "true") {
label.textContent = label.getAttribute("data-delete-active") || "Wird entfernt"; label.textContent = label.getAttribute("data-delete-active") || "Wird entfernt";
} else { } else {
@@ -197,12 +195,6 @@ export class ItemsEditor extends HTMLElement {
_setRowRemoved(row, removed) { _setRowRemoved(row, removed) {
row.setAttribute(REMOVED_ROW_STATE, removed ? "true" : "false"); row.setAttribute(REMOVED_ROW_STATE, removed ? "true" : "false");
row.classList.toggle("bg-red-50", removed); row.classList.toggle("bg-red-50", removed);
row.querySelectorAll("[data-items-strike]").forEach((el) => {
el.classList.toggle("line-through", removed);
el.classList.toggle("decoration-2", removed);
el.classList.toggle("decoration-red-600", removed);
el.classList.toggle("text-gray-500", removed);
});
row.querySelectorAll("[data-delete-label]").forEach((label) => { row.querySelectorAll("[data-delete-label]").forEach((label) => {
const nextLabel = removed const nextLabel = removed

4
views/transform/multi-select-simple.js
View File

@@ -601,8 +601,8 @@ export class MultiSelectSimple extends HTMLElement {
textEl.appendChild(newBadge); textEl.appendChild(newBadge);
} }
if (isRemoved) { if (isRemoved) {
textEl.classList.add("line-through", "decoration-2", "decoration-red-600", "text-gray-500"); pillEl.classList.add("bg-red-100");
detailEl.classList.add("line-through", "decoration-2", "decoration-red-600", "text-gray-500"); pillEl.style.position = "relative";
} }
deleteBtn.setAttribute("aria-label", isRemoved ? `Undo remove ${itemData.name}` : `Remove ${itemData.name}`); deleteBtn.setAttribute("aria-label", isRemoved ? `Undo remove ${itemData.name}` : `Remove ${itemData.name}`);
deleteBtn.dataset.id = itemId; deleteBtn.dataset.id = itemId;

8
views/transform/relations-editor.js
View File

@@ -208,15 +208,10 @@ export class RelationsEditor extends HTMLElement {
return; return;
} }
checkbox.checked = !checkbox.checked; checkbox.checked = !checkbox.checked;
button.classList.toggle("opacity-60", checkbox.checked);
const row = button.closest(ROLE_REL_ROW); const row = button.closest(ROLE_REL_ROW);
if (row) { if (row) {
row.classList.toggle("bg-red-50", checkbox.checked); row.classList.toggle("bg-red-50", checkbox.checked);
row.querySelectorAll(ROLE_REL_STRIKE).forEach((el) => {
el.classList.toggle("is-removed", checkbox.checked);
el.classList.toggle("text-gray-500", checkbox.checked);
});
} }
const label = button.querySelector("[data-delete-label]"); const label = button.querySelector("[data-delete-label]");
@@ -248,8 +243,6 @@ export class RelationsEditor extends HTMLElement {
const label = button.querySelector("[data-delete-label]"); const label = button.querySelector("[data-delete-label]");
if (label) { if (label) {
label.textContent = label.getAttribute("data-delete-hover") || "Rückgängig"; label.textContent = label.getAttribute("data-delete-hover") || "Rückgängig";
label.classList.add("text-orange-700");
label.classList.remove("text-gray-500");
} }
const icon = button.querySelector("i"); const icon = button.querySelector("i");
if (icon) { if (icon) {
@@ -266,7 +259,6 @@ export class RelationsEditor extends HTMLElement {
if (!label) { if (!label) {
return; return;
} }
label.classList.remove("text-orange-700");
if (checkbox && checkbox.checked) { if (checkbox && checkbox.checked) {
label.textContent = label.getAttribute("data-delete-active") || "Wird entfernt"; label.textContent = label.getAttribute("data-delete-active") || "Wird entfernt";
} else { } else {