mirror of
https://github.com/HeyPuter/puter
synced 2024-11-14 22:06:00 +00:00
Begin work on task manager
This commit is contained in:
KernelDeimos
parent
e71b586fe5
commit
d39bb412f3
@ -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
|
||||
//--------------------------------------------------
|
||||
{
|
||||
|
||||
148
src/UI/UIWindowTaskManager.js
Normal file
148
src/UI/UIWindowTaskManager.js
Normal file
@ -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;
|
||||
@ -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'),
|
||||
|
||||
@ -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));
|
||||
}
|
||||
@ -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}}.`,
|
||||
|
||||
5
src/services/InstanceService.js
Normal file
5
src/services/InstanceService.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { Service } from "../definitions";
|
||||
|
||||
export class InstanceService extends Service {
|
||||
//
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user