diff --git a/src/UI/UIWindowTaskManager.js b/src/UI/UIWindowTaskManager.js
index f76469aa..21f65bb9 100644
--- a/src/UI/UIWindowTaskManager.js
+++ b/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 = $(`
+
+
+
+ ${headings.map(heading =>
+ `| ${heading} | `).join('')}
+
+
+
+
+ `)[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($('open')[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;
diff --git a/src/css/style.css b/src/css/style.css
index 9a09126f..cabcd58a 100644
--- a/src/css/style.css
+++ b/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));
diff --git a/src/initgui.js b/src/initgui.js
index 5c156975..83cf4ccb 100644
--- a/src/initgui.js
+++ b/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(){