From d39bb412f3306e9fd0f75c1404bd93af3b4b8aa4 Mon Sep 17 00:00:00 2001 From: KernelDeimos Date: Sat, 13 Apr 2024 19:36:47 -0400 Subject: [PATCH] Begin work on task manager --- src/UI/UIDesktop.js | 12 ++- src/UI/UIWindowTaskManager.js | 148 ++++++++++++++++++++++++++++++++ src/UI/UIWindowThemeDialog.js | 7 ++ src/css/style.css | 51 +++++++++++ src/i18n/translations/en.js | 1 + src/services/InstanceService.js | 5 ++ 6 files changed, 223 insertions(+), 1 deletion(-) create mode 100644 src/UI/UIWindowTaskManager.js create mode 100644 src/services/InstanceService.js diff --git a/src/UI/UIDesktop.js b/src/UI/UIDesktop.js index 182abb76..933d1294 100644 --- a/src/UI/UIDesktop.js +++ b/src/UI/UIDesktop.js @@ -35,6 +35,7 @@ import new_context_menu_item from "../helpers/new_context_menu_item.js" import refresh_item_container from "../helpers/refresh_item_container.js" import changeLanguage from "../i18n/i18nChangeLanguage.js" import UIWindowSettings from "./Settings/UIWindowSettings.js" +import UIWindowTaskManager from "./UIWindowTaskManager.js" async function UIDesktop(options){ let h = ''; @@ -1182,7 +1183,7 @@ $(document).on('click', '.user-options-menu-btn', async function(e){ } }, //-------------------------------------------------- - // Change Password + // Settings //-------------------------------------------------- { html: i18n('settings'), @@ -1191,6 +1192,15 @@ $(document).on('click', '.user-options-menu-btn', async function(e){ } }, //-------------------------------------------------- + // Task Manager + //-------------------------------------------------- + { + html: i18n('task-manager'), + onClick: async function(){ + UIWindowTaskManager(); + } + }, + //-------------------------------------------------- // Contact Us //-------------------------------------------------- { diff --git a/src/UI/UIWindowTaskManager.js b/src/UI/UIWindowTaskManager.js new file mode 100644 index 00000000..f76469aa --- /dev/null +++ b/src/UI/UIWindowTaskManager.js @@ -0,0 +1,148 @@ +import UIWindow from "./UIWindow.js"; + +const UIWindowTaskManager = async function UIWindowTaskManager () { + const sample_data = [ + { + name: 'root', + children: [ + { + name: 'terminal', + children: [ + { + name: 'phoenix' + } + ], + children: [ + { + name: 'ai-plugin' + } + ] + }, + { + name: 'editor' + } + ] + } + ]; + + const w = await UIWindow({ + title: i18n('task_manager'), + icon: null, + uid: null, + is_dir: false, + message: 'message', + // body_icon: options.body_icon, + // backdrop: options.backdrop ?? false, + is_resizable: true, + is_droppable: false, + has_head: true, + stay_on_top: true, + selectable_body: true, + draggable_body: false, + allow_context_menu: true, + show_in_taskbar: false, + window_class: 'window-alert', + dominant: true, + body_content: '', + width: 350, + // parent_uuid: options.parent_uuid, + // ...options.window_options, + window_css:{ + height: 'initial', + }, + body_css: { + width: 'initial', + padding: '20px', + // 'background-color': `hsla( + // var(--primary-hue), + // calc(max(var(--primary-saturation) - 15%, 0%)), + // calc(min(100%,var(--primary-lightness) + 20%)), .91)`, + 'background-color': `hsla( + var(--primary-hue), + var(--primary-saturation), + var(--primary-lightness), + var(--primary-alpha))`, + 'backdrop-filter': 'blur(3px)', + + } + }); + const w_body = w.querySelector('.window-body'); + w_body.classList.add('taskmgr'); + + const Indent = ({ has_trunk, has_branch }) => { + const el = document.createElement('div'); + el.classList.add('taskmgr-indentcell'); + if ( has_trunk ) { + // Add new child element + const el_indentcell_child = document.createElement('div'); + el_indentcell_child.classList.add('taskmgr-indentcell-trunk'); + el.appendChild(el_indentcell_child); + } + if ( has_branch ) { + const el_indentcell_child = document.createElement('div'); + el_indentcell_child.classList.add('taskmgr-indentcell-branch'); + el.appendChild(el_indentcell_child); + } + + return { + appendTo (parent) { + parent.appendChild(el); + return this; + } + }; + }; + + const Task = ({ placement, name }) => { + const { indent_level, last_item } = placement; + + const el = document.createElement('div'); + el.classList.add('taskmgr-task'); + + for ( let i=0; i < indent_level; i++ ) { + const last_cell = i === indent_level - 1; + console.log('last_cell', last_cell); + console.log('last_item', last_item); + Indent({ + has_trunk: (last_cell && ( ! last_item )) || + ! last_cell, + has_branch: last_cell + }).appendTo(el); + } + + const el_title = document.createElement('div'); + el_title.classList.add('taskmgr-task-title'); + el_title.innerText = name; + el.appendChild(el_title); + + return { + appendTo (parent) { + parent.appendChild(el); + return this; + } + }; + } + + const el_tasklist = document.createElement('div'); + el_tasklist.classList.add('taskmgr-tasklist'); + const iter_tasks = (items, { indent_level }) => { + for ( let i=0 ; i < items.length; i++ ) { + const item = items[i]; + Task({ + placement: { + indent_level, + last_item: i === items.length - 1, + }, + name: item.name + }).appendTo(el_tasklist); + if ( item.children ) { + iter_tasks(item.children, { + indent_level: indent_level + 1 + }); + } + } + }; + iter_tasks(sample_data, { indent_level: 0 }); + w_body.appendChild(el_tasklist); +} + +export default UIWindowTaskManager; diff --git a/src/UI/UIWindowThemeDialog.js b/src/UI/UIWindowThemeDialog.js index 5f507daa..67bfb9b1 100644 --- a/src/UI/UIWindowThemeDialog.js +++ b/src/UI/UIWindowThemeDialog.js @@ -1,4 +1,5 @@ import UIWindow from "./UIWindow.js"; +import UIWindowColorPicker from "./UIWindowColorPicker.js"; const UIWindowThemeDialog = async function UIWindowThemeDialog () { const services = globalThis.services; @@ -112,6 +113,12 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () { svc_theme.reset(); }) ; + Button({ label: i18n('reset_colors') }) + .appendTo(w_body) + .onPress(() => { + UIWindowColorPicker(); + }) + ; Slider({ label: i18n('hue'), diff --git a/src/css/style.css b/src/css/style.css index 7096bae2..9a09126f 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -3781,4 +3781,55 @@ label { flex-direction: row; gap: 10px; justify-content: flex-end; +} + +.taskmgr { + box-sizing: border-box; + + --scale: 2pt; + --line-color: #6e6e6ebd; +} + +.taskmgr-tasklist { + background-color: rgba(255,255,255,0.8); + border: 2px inset rgba(127, 127, 127, 0.3); +} + +.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 { + border-bottom: 1px solid #e0e0e0; + 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)); } \ No newline at end of file diff --git a/src/i18n/translations/en.js b/src/i18n/translations/en.js index 8e2c5c3a..0bfbf314 100644 --- a/src/i18n/translations/en.js +++ b/src/i18n/translations/en.js @@ -201,6 +201,7 @@ const en = { storage_usage: "Storage Usage", storage_puter_used: 'used by Puter', taking_longer_than_usual: 'Taking a little longer than usual. Please wait...', + task_manager: "Task Manager", terms: "Terms", text_document: 'Text document', tos_fineprint: `By clicking 'Create Free Account' you agree to Puter's {{link=terms}}Terms of Service{{/link}} and {{link=privacy}}Privacy Policy{{/link}}.`, diff --git a/src/services/InstanceService.js b/src/services/InstanceService.js new file mode 100644 index 00000000..25498270 --- /dev/null +++ b/src/services/InstanceService.js @@ -0,0 +1,5 @@ +import { Service } from "../definitions"; + +export class InstanceService extends Service { + // +} \ No newline at end of file