lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-08-22 14:07:28 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor: Convert Task Manager to use Components

Browse Source 
This currently behaves the same as it did before: It still recreates the
table contents every half a second. It should also look identical,
though it's possible I missed some small differences.

The component structure is:

TaskManagerTable
- Table
  - TaskManagerRow
  - TaskManagerRow
  - TaskManagerRow
  - ...

TaskManagerRow is implemented so that we can later move to modifying
them in place as the process tree changes, instead of having to replace
them all.

Otherwise, most of the code is just moved around, and not changed much.
This commit is contained in:
Sam Atkins
2024-05-10 17:41:01 +01:00
parent e304f6fc3a
commit cf605c8a38
2 changed files with 292 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/style.css
-110
View File
@@ -3830,113 +3830,3 @@ fieldset[name=number-code] {
gap: 10px;
justify-content: flex-end;
}
.taskmgr {
box-sizing: border-box;
/* could have been avoided with box-sizing: border-box */
height: calc(100% - 30px);
display: flex;
flex-direction: column;
--scale: 2pt;
--line-color: #6e6e6ebd;
}
.taskmgr * {
box-sizing: border-box;
}
.taskmgr table {
border-collapse: collapse;
}
.taskmgr-taskarea {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: rgba(255,255,255,0.8);
border: 2px inset rgba(127, 127, 127, 0.3);
overflow: auto;
}
.taskmgr-taskarea table thead {
}
.taskmgr-taskarea table th {
-webkit-box-shadow: 0 1px 4px -2px rgba(0,0,0,0.2);
box-shadow: 0 1px 4px -2px rgba(0,0,0,0.2);
backdrop-filter: blur(2px);
position: sticky;
z-index: 100;
padding: 0;
top: 0;
background-color: hsla(0, 0%, 100%, 0.8);
text-align: left;
}
.taskmgr-taskarea table th > span {
display: inline-block;
width: 100%;
/* we set borders on this span because */
/* borders fly away from sticky headers */
border-bottom: 1px solid #e0e0e0;
/* padding order: top right bottom left */
padding:
calc(10 * var(--scale))
calc(2.5 * var(--scale))
calc(5 * var(--scale))
calc(2.5 * var(--scale));
}
.taskmgr-taskarea table th:not(:last-of-type) > span {
/* we set borders on this span because */
/* borders fly away from sticky headers */
border-right: 1px solid #e0e0e0;
}
.taskmgr-taskarea table td {
border-bottom: 1px solid #e0e0e0;
}
.taskmgr-taskarea table td > span {
padding: 0 calc(2.5 * var(--scale));
}
.taskmgr-indentcell {
position: relative;
align-items: right;
width: calc(10 * var(--scale));
height: calc(10 * var(--scale));
}
.taskmgr-indentcell-trunk {
position: absolute;
top: 0;
left: calc(5 * var(--scale));
width: calc(5 * var(--scale));
height: calc(10 * var(--scale));
border-left: 2px solid var(--line-color);
}
.taskmgr-indentcell-branch {
position: absolute;
top: 0;
left: calc(5 * var(--scale));
width: calc(5 * var(--scale));
height: calc(5 * var(--scale));
border-left: 2px solid var(--line-color);
border-bottom: 2px solid var(--line-color);
border-radius: 0 0 0 calc(2.5 * var(--scale));
}
.taskmgr-task {
display: flex;
height: calc(10 * var(--scale));
line-height: calc(10 * var(--scale));
}
.taskmgr-task-title {
flex-grow: 1;
padding-left: calc(2.5 * var(--scale));
}