diff --git a/src/gui/src/UI/Components/Table.js b/src/gui/src/UI/Components/Table.js
deleted file mode 100644
index dcd5e0a6f..000000000
--- a/src/gui/src/UI/Components/Table.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Copyright (C) 2024-present Puter Technologies Inc.
- *
- * This file is part of Puter.
- *
- * Puter is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published
- * by the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see .
- */
-
-
-const Component = use('util.Component');
-
-/**
- * A table with a sticky header
- */
-export default def(class Table extends Component {
- static ID = 'ui.component.Table';
-
- static PROPERTIES = {
- headings: { value: [] },
- scale: { value: '2pt' },
- rows: { value: [] },
- }
-
- static CSS = /*css*/`
- table {
- box-sizing: border-box;
- border-collapse: collapse;
- width: 100%;
- }
-
- thead th {
- box-shadow: 0 1px 4px -2px rgba(0,0,0,0.2);
- backdrop-filter: blur(2px);
- position: sticky;
- z-index: 100;
- padding:
- calc(10 * var(--scale))
- calc(2.5 * var(--scale))
- calc(5 * var(--scale))
- calc(2.5 * var(--scale));
- top: 0;
- background-color: hsla(0, 0%, 100%, 0.8);
- text-align: left;
- border-bottom: 1px solid #e0e0e0;
- }
-
- thead th:not(:last-of-type) {
- /* we set borders on this span because */
- /* borders fly away from sticky headers */
- border-right: 1px solid #e0e0e0;
- }
-
- tbody > * {
- border-bottom: 1px solid #e0e0e0;
- padding: 0 calc(2.5 * var(--scale));
- vertical-align: middle;
- }
- `;
-
- create_template ({ template }) {
- $(template).html(`
-
- `);
- }
-
- on_ready ({ listen }) {
- listen('headings', headings => {
- $(this.dom_).find('.headings')
- .html(headings.map(heading => `| ${heading} | `).join(''))
- });
-
- listen('scale', scale => {
- $(this.dom_).css('--scale', scale);
- });
-
- listen('rows', rows => {
- const tbody = $(this.dom_).find('tbody')[0];
- $(tbody).find('[slot=rows]').detach();
- for (const row of rows) {
- row.setAttribute('slot', 'rows');
- row.attach(tbody);
- }
- });
- }
-});
diff --git a/src/gui/src/UI/UIWindowTaskManager.js b/src/gui/src/UI/UIWindowTaskManager.js
index 084165a85..2b877c85f 100644
--- a/src/gui/src/UI/UIWindowTaskManager.js
+++ b/src/gui/src/UI/UIWindowTaskManager.js
@@ -21,7 +21,6 @@ import UIAlert from "./UIAlert.js";
import UIContextMenu from "./UIContextMenu.js";
import { Component, defineComponent } from '../util/Component.js';
import UIComponentWindow from './UIComponentWindow.js';
-import Table from './Components/Table.js';
const end_process = async (uuid, force) => {
const svc_process = globalThis.services.get('process');
@@ -78,49 +77,68 @@ class TaskManagerTable extends Component {
border: 2px inset rgba(127, 127, 127, 0.3);
overflow: auto;
}
+
+ table {
+ box-sizing: border-box;
+ border-collapse: collapse;
+ width: 100%;
+ }
+
+ thead th {
+ box-shadow: 0 1px 4px -2px rgba(0,0,0,0.2);
+ backdrop-filter: blur(2px);
+ position: sticky;
+ z-index: 100;
+ padding:
+ calc(10 * var(--scale))
+ calc(2.5 * var(--scale))
+ calc(5 * var(--scale))
+ calc(2.5 * var(--scale));
+ top: 0;
+ background-color: hsla(0, 0%, 100%, 0.8);
+ text-align: left;
+ border-bottom: 1px solid #e0e0e0;
+ }
+
+ thead th:not(:last-of-type) {
+ border-right: 1px solid #e0e0e0;
+ }
+
+ tbody > tr > td {
+ border-bottom: 1px solid #e0e0e0;
+ padding: 0 calc(2.5 * var(--scale));
+ vertical-align: middle;
+ }
`;
#svc_process = globalThis.services.get('process');
create_template ({ template }) {
$(template).html(`
-
+
+
+
+ | ${i18n('taskmgr_header_name')} |
+ ${i18n('taskmgr_header_type')} |
+ ${i18n('taskmgr_header_status')} |
+
+
+
+
+
`);
}
on_ready ({ listen }) {
- this.table = new Table({
- headings: [
- i18n('taskmgr_header_name'),
- i18n('taskmgr_header_type'),
- i18n('taskmgr_header_status'),
- ]
- });
- this.table.attach(this.dom_.querySelector('.taskmgr-taskarea'));
-
listen('tasks', tasks => {
const row_data = this.#iter_tasks(tasks, { indent_level: 0, is_last_item_stack: [] });
- const new_uuids = row_data.map(it => it.uuid);
+ const tbody = $(this.dom_).find('.taskmgr-taskarea');
+ tbody.empty();
- const old_rows = this.table.get('rows');
-
- const rows = [];
for (const data of row_data) {
- // Try to reuse old row
- const old_row = old_rows.find(it => data.uuid === it.get('uuid'));
- if (old_row) {
- for (const property in data) {
- old_row.set(property, data[property]);
- }
- rows.push(old_row);
- continue;
- }
-
- // Create a new row
- rows.push(new TaskManagerRow(data));
+ const row = new TaskManagerRow(data);
+ row.attach(tbody[0]);
}
-
- this.table.set('rows', rows);
});
}