shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve hidden completed parent display
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-03 23:11:16 +02:00
parent ee1c8afa9a
commit 3772db12e2
2 changed files with 61 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

16
website/src/features/toolboxes/modules/TaskPlannerModule.jsx
View file

@ -640,7 +640,21 @@ function TaskPlannerBranch({
if (data.hideCompleted && task.checked) { if (data.hideCompleted && task.checked) {
if (!hasVisibleDescendants(task.id)) return null; if (!hasVisibleDescendants(task.id)) return null;
return ( return (
<li className="task-planner-hidden-parent-children" key={`${task.id}:visible-children`}> <li className="task-planner-hidden-parent" key={`${task.id}:visible-children`}>
<div className="task-planner-hidden-parent-line">
<input
type="checkbox"
checked={task.checked}
onChange={(event) => onUpdateTask(task.id, (current) => ({
...current,
checked: event.target.checked,
checkedAt: event.target.checked ? Date.now() : 0
}))}
aria-label={`${textContent.uncheckTitle || "Marquer non effectué"} ${task.title}`}
/>
<span title={task.title}>{task.title}</span>
<small>{getTaskTypeLabel(task.type, textContent)}</small>
</div>
<ul className="task-planner-list task-planner-child-list">{nestedBranch}</ul> <ul className="task-planner-list task-planner-child-list">{nestedBranch}</ul>
</li> </li>
); );

49
website/src/styles/_toolboxes.scss
View file

@ -2020,18 +2020,25 @@ textarea:focus {
position: relative; position: relative;
} }
.task-planner-hidden-parent-children { .task-planner-hidden-parent {
position: relative; position: relative;
display: grid; display: grid;
gap: 8px;
min-width: 0; min-width: 0;
padding: 10px;
border: 1px solid rgba(165, 180, 252, 0.1);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(148, 163, 184, 0.035), transparent 56%),
rgba(5, 7, 17, 0.28);
} }
.task-planner-hidden-parent-children > .task-planner-child-list { .task-planner-hidden-parent > .task-planner-child-list {
margin-top: 0; margin-top: 0;
} }
.task-planner-child-list > .task-planner-item::before, .task-planner-child-list > .task-planner-item::before,
.task-planner-child-list > .task-planner-hidden-parent-children::before { .task-planner-child-list > .task-planner-hidden-parent::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 25px; top: 25px;
@ -2041,6 +2048,42 @@ textarea:focus {
background: rgba(246, 196, 83, 0.46); background: rgba(246, 196, 83, 0.46);
} }
.task-planner-hidden-parent-line {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
min-height: 34px;
padding: 6px 10px;
border: 1px solid rgba(165, 180, 252, 0.08);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(148, 163, 184, 0.04), transparent 58%),
rgba(5, 7, 17, 0.24);
opacity: 0.76;
}
.task-planner-hidden-parent-line > input[type="checkbox"] {
justify-self: center;
}
.task-planner-hidden-parent-line > span {
min-width: 0;
overflow: hidden;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
font-weight: 800;
text-decoration: line-through;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-planner-hidden-parent-line > small {
color: rgba(180, 189, 211, 0.62);
font-size: var(--font-size-xs);
font-weight: 900;
}
.task-planner-empty { .task-planner-empty {
padding: var(--space-4); padding: var(--space-4);
border: 1px dashed rgba(165, 180, 252, 0.18); border: 1px dashed rgba(165, 180, 252, 0.18);