Improve task manager style

src/UI/UIWindowTaskManager.js

@@ -40,6 +40,7 @@ const UIWindowTaskManager = async function UIWindowTaskManager () {
         selectable_body: true,
         draggable_body: false,
         allow_context_menu: true,
+        allow_native_ctxmenu: true,
         show_in_taskbar: false,
         window_class: 'window-alert',
         dominant: true,
@@ -115,6 +116,7 @@ const UIWindowTaskManager = async function UIWindowTaskManager () {
         el.appendChild(el_title);
 
         return {
+            el () { return el; },
             appendTo (parent) {
                 parent.appendChild(el);
                 return this;
@@ -122,18 +124,72 @@ const UIWindowTaskManager = async function UIWindowTaskManager () {
         };
     }
 
-    const el_tasklist = document.createElement('div');
-    el_tasklist.classList.add('taskmgr-tasklist');
+    // https://codepen.io/fomkin/pen/gOgoBVy
+    const Table = ({ headings }) => {
+        const el_table = $(`
+            <table>
+                <thead>
+                    <tr>
+                        ${headings.map(heading =>
+                            `<th><span>${heading}<span></th>`).join('')}
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+        `)[0];
+
+        const el_tbody = el_table.querySelector('tbody');
+
+        return {
+            el () { return el_table; },
+            add (el) {
+                if ( typeof el.el === 'function' ) el = el.el();
+                el_tbody.appendChild(el);
+                return this;
+            }
+        };
+    };
+
+    const Row = () => {
+        const el_tr = document.createElement('tr');
+        return {
+            attach (parent) {
+                parent.appendChild(el_tr);
+                return this;
+            },
+            el () { return el_tr; },
+            add (el) {
+                if ( typeof el.el === 'function' ) el = el.el();
+                const el_td = document.createElement('td');
+                el_td.appendChild(el);
+                el_tr.appendChild(el_td);
+                return this;
+            }
+        };
+    };
+
+    const el_taskarea = document.createElement('div');
+    el_taskarea.classList.add('taskmgr-taskarea');
+
+    const tasktable = Table({
+        headings: ['Name', 'Status']
+    });
+
+    el_taskarea.appendChild(tasktable.el());
+
     const iter_tasks = (items, { indent_level }) => {
         for ( let i=0 ; i < items.length; i++ ) {
+            const row = Row();
             const item = items[i];
-            Task({
+            row.add(Task({
                 placement: {
                     indent_level,
                     last_item: i === items.length - 1,
                 },
                 name: item.name
-            }).appendTo(el_tasklist);
+            }));
+            row.add($('<span>open</span>')[0])
+            tasktable.add(row);
             if ( item.children ) {
                 iter_tasks(item.children, {
                     indent_level: indent_level + 1
@@ -142,7 +198,7 @@ const UIWindowTaskManager = async function UIWindowTaskManager () {
         }
     };
     iter_tasks(sample_data, { indent_level: 0 });
-    w_body.appendChild(el_tasklist);
+    w_body.appendChild(el_taskarea);
 }
 
 export default UIWindowTaskManager;

src/css/style.css

@@ -3785,14 +3785,74 @@ label {
 
 .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-tasklist {
+.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 {
@@ -3823,7 +3883,6 @@ label {
 }
 
 .taskmgr-task {
-    border-bottom: 1px solid #e0e0e0;
     display: flex;
     height: calc(10 * var(--scale));
     line-height: calc(10 * var(--scale));

src/initgui.js

@@ -37,6 +37,7 @@ import determine_active_container_parent from './helpers/determine_active_contai
 import { ThemeService } from './services/ThemeService.js';
 import UIWindowThemeDialog from './UI/UIWindowThemeDialog.js';
 import { BroadcastService } from './services/BroadcastService.js';
+import UIWindowTaskManager from './UI/UIWindowTaskManager.js';
 
 const launch_services = async function () {
     const services_l_ = [];
@@ -56,6 +57,8 @@ const launch_services = async function () {
     for (const [_, instance] of services_l_) {
         await instance._init();
     }
+
+    UIWindowTaskManager();
 };
 
 window.initgui = async function(){