mirror of
https://github.com/HeyPuter/puter
synced 2024-11-14 22:06:00 +00:00
Introduce a general-purpose progress window
We have 7 of these, which all have very similar code. Let's deduplicate them! :^)
This commit is contained in:
Sam Atkins
parent
df3f7e9a6e
commit
52ddfc8801
125
src/UI/UIWindowProgress.js
Normal file
125
src/UI/UIWindowProgress.js
Normal file
@ -0,0 +1,125 @@
|
||||
/**
|
||||
* Copyright (C) 2024 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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import UIWindow from './UIWindow.js'
|
||||
import Placeholder from '../util/Placeholder.js';
|
||||
import Button from './Components/Button.js';
|
||||
|
||||
/**
|
||||
* General purpose progress dialog.
|
||||
* @param operation_id If provided, is saved in the data-operation-id attribute, for later lookup.
|
||||
* @param show_progress Enable a progress bar, and display `(foo%)` after the status message
|
||||
* @param on_cancel A callback run when the Cancel button is clicked. Without it, no Cancel button will appear.
|
||||
* @returns {Promise<{set_progress: *, set_status: *, close: *, element: Element}>} Object for managing the progress dialog
|
||||
* @constructor
|
||||
* TODO: Error display
|
||||
* TODO: Debouncing logic (show only after a delay, then hide only after a delay)
|
||||
*/
|
||||
async function UIWindowProgress({
|
||||
operation_id = null,
|
||||
show_progress = false,
|
||||
on_cancel = null,
|
||||
} = {}){
|
||||
const placeholder_cancel_btn = Placeholder();
|
||||
|
||||
let h = '';
|
||||
h += `<div ${operation_id ? `data-operation-id="${operation_id}"` : ''}>`;
|
||||
h += `<div style="display: flex; align-items: center;">`;
|
||||
// spinner
|
||||
h += `<svg style="margin-right: 7px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
|
||||
// Progress report
|
||||
h += `<div style="font-size:15px; overflow: hidden; flex-grow: 1; text-overflow: ellipsis; white-space: nowrap;">
|
||||
<span class="progress-msg">${i18n('preparing')}</span>`;
|
||||
if (show_progress) {
|
||||
h += ` (<span class="progress-percent">0%</span>)`;
|
||||
}
|
||||
h += `</div>`;
|
||||
h +=`</div>`;
|
||||
if (show_progress) {
|
||||
h += `<div class="progress-bar-container" style="margin-top:20px;">`;
|
||||
h += `<div class="progress-bar"></div>`;
|
||||
h += `</div>`;
|
||||
}
|
||||
if (on_cancel) {
|
||||
h += `<div style="display: flex; justify-content: flex-end;">`;
|
||||
h += placeholder_cancel_btn.html;
|
||||
h += `</div>`;
|
||||
}
|
||||
h += `</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
uid: null,
|
||||
is_dir: false,
|
||||
body_content: h,
|
||||
has_head: false,
|
||||
selectable_body: false,
|
||||
draggable_body: true,
|
||||
allow_context_menu: false,
|
||||
is_resizable: false,
|
||||
is_droppable: false,
|
||||
init_center: true,
|
||||
allow_native_ctxmenu: false,
|
||||
allow_user_select: false,
|
||||
window_class: 'window-progress',
|
||||
width: 450,
|
||||
dominant: true,
|
||||
window_css:{
|
||||
height: 'initial',
|
||||
},
|
||||
body_css: {
|
||||
padding: '22px',
|
||||
width: 'initial',
|
||||
'background-color': `hsla(
|
||||
var(--primary-hue),
|
||||
var(--primary-saturation),
|
||||
var(--primary-lightness),
|
||||
var(--primary-alpha))`,
|
||||
'backdrop-filter': 'blur(3px)',
|
||||
}
|
||||
});
|
||||
|
||||
if (on_cancel) {
|
||||
const cancel_btn = new Button({
|
||||
label: i18n('cancel'),
|
||||
style: 'small',
|
||||
on_click: () => {
|
||||
$(el_window).close();
|
||||
on_cancel();
|
||||
},
|
||||
});
|
||||
cancel_btn.attach(placeholder_cancel_btn);
|
||||
}
|
||||
|
||||
return {
|
||||
element: el_window,
|
||||
set_status: (text) => {
|
||||
el_window.querySelector('.progress-msg').innerHTML = text;
|
||||
},
|
||||
set_progress: (percent) => {
|
||||
el_window.querySelector('.progress-bar').style.width = `${percent}%`;
|
||||
el_window.querySelector('.progress-percent').innerText = `${percent}%`;
|
||||
},
|
||||
close: () => {
|
||||
$(el_window).close();
|
||||
},
|
||||
// TODO: show_error(), which replaces the window content with a title, error message, and OK button
|
||||
};
|
||||
}
|
||||
|
||||
export default UIWindowProgress;
|
||||
@ -2708,17 +2708,19 @@ fieldset[name=number-code] {
|
||||
}
|
||||
}
|
||||
|
||||
.upload-progress-bar-container, .download-progress-bar-container {
|
||||
.progress-bar-container, .upload-progress-bar-container, .download-progress-bar-container {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
height: 17px;
|
||||
border: 1px solid rgb(40 109 157);
|
||||
border-radius: 3px;
|
||||
background-color: white;
|
||||
box-shadow: inset -1px 3px 4px #dfdfdf;
|
||||
}
|
||||
|
||||
.upload-progress-bar, .download-progress-bar {
|
||||
.progress-bar, .upload-progress-bar, .download-progress-bar {
|
||||
width: 0;
|
||||
height: 15px;
|
||||
height: 100%;
|
||||
background-color: rgb(0 137 255);
|
||||
transition: 0.4s width;
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
|
||||
@ -3937,4 +3939,4 @@ fieldset[name=number-code] {
|
||||
.taskmgr-task-title {
|
||||
flex-grow: 1;
|
||||
padding-left: calc(2.5 * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user