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

103
views/transform/form.css
View File

@@ -46,16 +46,109 @@
position: relative;
}
.relation-strike.is-removed::after,
.entries-agent-strike.is-removed::after {
/* Diagonal hatching pattern for deleted relations, items, and pills */
[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: "";
position: absolute;
top: 0;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
border-top: 2px solid #dc2626;
bottom: 0;
background: repeating-linear-gradient(
-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;
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 */

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

@@ -99,7 +99,6 @@ export class ItemsEditor extends HTMLElement {
const label = btn.querySelector("[data-delete-label]");
if (label) {
label.textContent = label.getAttribute("data-delete-hover") || "Rückgängig";
label.classList.add("text-orange-700");
}
const icon = btn.querySelector("i");
if (icon) {
@@ -114,7 +113,6 @@ export class ItemsEditor extends HTMLElement {
if (!label) {
return;
}
label.classList.remove("text-orange-700");
if (row && row.getAttribute(REMOVED_ROW_STATE) === "true") {
label.textContent = label.getAttribute("data-delete-active") || "Wird entfernt";
} else {
@@ -197,12 +195,6 @@ export class ItemsEditor extends HTMLElement {
_setRowRemoved(row, removed) {
row.setAttribute(REMOVED_ROW_STATE, removed ? "true" : "false");
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) => {
const nextLabel = removed

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

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

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

@@ -208,15 +208,10 @@ export class RelationsEditor extends HTMLElement {
return;
}
checkbox.checked = !checkbox.checked;
button.classList.toggle("opacity-60", checkbox.checked);
const row = button.closest(ROLE_REL_ROW);
if (row) {
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]");
@@ -248,8 +243,6 @@ export class RelationsEditor extends HTMLElement {
const label = button.querySelector("[data-delete-label]");
if (label) {
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");
if (icon) {
@@ -266,7 +259,6 @@ export class RelationsEditor extends HTMLElement {
if (!label) {
return;
}
label.classList.remove("text-orange-700");
if (checkbox && checkbox.checked) {
label.textContent = label.getAttribute("data-delete-active") || "Wird entfernt";
} else {