mirror of
https://github.com/HeyPuter/puter.git
synced 2026-01-07 21:50:25 -06:00
refactor: Replace UIWindowUploadProgress with UIWindowProgress
This commit is contained in:
Sam Atkins
@@ -1,75 +0,0 @@
|
||||
/**
|
||||
* 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'
|
||||
|
||||
// todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB
|
||||
async function UIWindowUploadProgress(options){
|
||||
let h = '';
|
||||
h += `<div data-upload-operation-id="${options.operation_id}">`;
|
||||
h += `<div>`;
|
||||
// spinner
|
||||
h +=`<svg style="float:left; margin-right: 7px;" 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="margin-bottom:20px; float:left; padding-top:3px; font-size:15px; overflow: hidden; width: calc(100% - 40px); text-overflow: ellipsis; white-space: nowrap;">`;
|
||||
// msg
|
||||
h += `<span class="upload-progress-msg">${i18n('preparing_for_upload')}</span>`;
|
||||
h += `</div>`;
|
||||
// progress
|
||||
h += `<div class="upload-progress-bar-container" style="clear:both; margin-top:20px; border-radius:3px;">`;
|
||||
h += `<div class="upload-progress-bar"></div>`;
|
||||
h += `</div>`;
|
||||
// cancel
|
||||
h += `<button style="float:right; margin-top: 15px; margin-right: -2px;" class="button button-small upload-cancel-btn">${i18n('cancel')}</button>`;
|
||||
h +=`</div>`;
|
||||
h += `</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: i18n('upload'),
|
||||
icon: window.icons[`app-icon-uploader.svg`],
|
||||
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-upload-progress',
|
||||
width: 450,
|
||||
dominant: true,
|
||||
window_css:{
|
||||
height: 'initial',
|
||||
},
|
||||
body_css: {
|
||||
padding: '22px',
|
||||
width: 'initial',
|
||||
'background-color': 'rgba(231, 238, 245, .95)',
|
||||
'backdrop-filter': 'blur(3px)',
|
||||
}
|
||||
});
|
||||
|
||||
return el_window;
|
||||
}
|
||||
|
||||
export default UIWindowUploadProgress
|
||||
@@ -2708,7 +2708,7 @@ fieldset[name=number-code] {
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar-container, .upload-progress-bar-container, .download-progress-bar-container {
|
||||
.progress-bar-container, .download-progress-bar-container {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 17px;
|
||||
@@ -2718,7 +2718,7 @@ fieldset[name=number-code] {
|
||||
box-shadow: inset -1px 3px 4px #dfdfdf;
|
||||
}
|
||||
|
||||
.progress-bar, .upload-progress-bar, .download-progress-bar {
|
||||
.progress-bar, .download-progress-bar {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: rgb(0 137 255);
|
||||
|
||||
@@ -27,13 +27,13 @@ import UIWindowSaveAccount from './UI/UIWindowSaveAccount.js';
|
||||
import UIWindowCopyProgress from './UI/UIWindowCopyProgress.js';
|
||||
import UIWindowMoveProgress from './UI/UIWindowMoveProgress.js';
|
||||
import UIWindowNewFolderProgress from './UI/UIWindowNewFolderProgress.js';
|
||||
import UIWindowUploadProgress from './UI/UIWindowUploadProgress.js';
|
||||
import UIWindowProgressEmptyTrash from './UI/UIWindowProgressEmptyTrash.js';
|
||||
import update_username_in_gui from './helpers/update_username_in_gui.js';
|
||||
import update_title_based_on_uploads from './helpers/update_title_based_on_uploads.js';
|
||||
import content_type_to_icon from './helpers/content_type_to_icon.js';
|
||||
import UIWindowDownloadDirProg from './UI/UIWindowDownloadDirProg.js';
|
||||
import { PROCESS_RUNNING, PortalProcess, PseudoProcess } from "./definitions.js";
|
||||
import UIWindowProgress from './UI/UIWindowProgress.js';
|
||||
|
||||
window.is_auth = ()=>{
|
||||
if(localStorage.getItem("auth_token") === null || window.auth_token === null)
|
||||
@@ -2685,25 +2685,28 @@ window.upload_items = async function(items, dest_path){
|
||||
init: async(operation_id, xhr)=>{
|
||||
opid = operation_id;
|
||||
// create upload progress window
|
||||
upload_progress_window = await UIWindowUploadProgress({operation_id: operation_id});
|
||||
// cancel btn
|
||||
$(upload_progress_window).find('.upload-cancel-btn').on('click', function(e){
|
||||
$(upload_progress_window).close();
|
||||
window.show_save_account_notice_if_needed();
|
||||
xhr.abort();
|
||||
})
|
||||
upload_progress_window = await UIWindowProgress({
|
||||
title: i18n('upload'),
|
||||
icon: window.icons[`app-icon-uploader.svg`],
|
||||
operation_id: operation_id,
|
||||
show_progress: true,
|
||||
on_cancel: () => {
|
||||
window.show_save_account_notice_if_needed();
|
||||
xhr.abort();
|
||||
},
|
||||
});
|
||||
// add to active_uploads
|
||||
window.active_uploads[opid] = 0;
|
||||
},
|
||||
// start
|
||||
start: async function(){
|
||||
// change upload progress window message to uploading
|
||||
$(upload_progress_window).find('.upload-progress-msg').html(`Uploading (<span class="upload-progress-percent">0%</span>)`);
|
||||
upload_progress_window.set_status('Uploading');
|
||||
upload_progress_window.set_progress(0);
|
||||
},
|
||||
// progress
|
||||
progress: async function(operation_id, op_progress){
|
||||
$(`[data-upload-operation-id="${operation_id}"]`).find('.upload-progress-bar').css( 'width', op_progress+'%');
|
||||
$(`[data-upload-operation-id="${operation_id}"]`).find('.upload-progress-percent').html(op_progress+'%');
|
||||
upload_progress_window.set_progress(op_progress);
|
||||
// update active_uploads
|
||||
window.active_uploads[opid] = op_progress;
|
||||
// update title if window is not visible
|
||||
@@ -2731,7 +2734,7 @@ window.upload_items = async function(items, dest_path){
|
||||
// close progress window after a bit of delay for a better UX
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
$(upload_progress_window).close();
|
||||
upload_progress_window.close();
|
||||
window.show_save_account_notice_if_needed();
|
||||
}, Math.abs(window.upload_progress_hide_delay));
|
||||
})
|
||||
@@ -2740,7 +2743,8 @@ window.upload_items = async function(items, dest_path){
|
||||
},
|
||||
// error
|
||||
error: async function(err){
|
||||
$(upload_progress_window).close();
|
||||
// TODO: Display error in progress dialog
|
||||
upload_progress_window.close();
|
||||
// UIAlert(err?.message ?? 'An error occurred while uploading.');
|
||||
// remove from active_uploads
|
||||
delete window.active_uploads[opid];
|
||||
|
||||
Reference in New Issue
Block a user