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 => + ``).join('')} + + + +
${heading}
+ `)[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(){