fix upload notification style and event listener on inputs
This commit is contained in:
joshuaboud
parent
abe58a8b14
commit
09394b27e9
|
|
@ -48,20 +48,24 @@ export class FileUpload {
|
|||
}
|
||||
|
||||
make_html_element() {
|
||||
var notification = document.createElement("div");
|
||||
var notification = this.dom_element = document.createElement("div");
|
||||
notification.classList.add("nav-notification");
|
||||
|
||||
var header = document.createElement("div");
|
||||
header.classList.add("nav-notification-header");
|
||||
notification.appendChild(header);
|
||||
header.innerText = "Uploading " + this.filename;
|
||||
header.style.position = "relative";
|
||||
header.style.paddingRight = "1em";
|
||||
header.style.display = "grid";
|
||||
header.style.gridTemplateColumns = "1fr 20px";
|
||||
header.style.gap = "5px";
|
||||
|
||||
var title = document.createElement("p");
|
||||
title.innerText = "Uploading " + this.filename;
|
||||
title.title = this.filename;
|
||||
|
||||
var cancel = document.createElement("i");
|
||||
cancel.classList.add("fa", "fa-times");
|
||||
cancel.style.position = "absolute"
|
||||
cancel.style.right = "0";
|
||||
cancel.style.justifySelf = "center";
|
||||
cancel.style.alignSelf = "center";
|
||||
cancel.style.cursor = "pointer";
|
||||
cancel.onclick = () => {
|
||||
if (this.proc) {
|
||||
|
|
@ -69,7 +73,8 @@ export class FileUpload {
|
|||
this.done();
|
||||
}
|
||||
}
|
||||
header.appendChild(cancel);
|
||||
|
||||
header.append(title, cancel);
|
||||
|
||||
var info = document.createElement("div");
|
||||
info.classList.add("flex-row", "space-between");
|
||||
|
|
@ -122,6 +127,7 @@ export class FileUpload {
|
|||
}
|
||||
|
||||
async upload() {
|
||||
this.dom_element.style.display = "flex";
|
||||
this.proc = cockpit.spawn(["/usr/share/cockpit/navigator/scripts/write-chunks.py3", this.path], {err: "out", superuser: "try"});
|
||||
this.proc.fail((e, data) => {
|
||||
this.reader.onload = () => {}
|
||||
|
|
@ -158,7 +164,7 @@ export class FileUpload {
|
|||
}
|
||||
this.done();
|
||||
}
|
||||
this.update_rates_interval = setInterval(this.display_xfr_rate.bind(this), 1000);
|
||||
this.update_rates_interval = setInterval(this.display_xfr_rate.bind(this), 2000);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export class NavDragDrop {
|
|||
this.drop_area = drop_area;
|
||||
this.nav_window_ref = nav_window_ref;
|
||||
this.modal_prompt = new ModalPrompt();
|
||||
this.upload_manager = new FileUploadManager(this.nav_window_ref, 10);
|
||||
this.upload_manager = new FileUploadManager(this.nav_window_ref, 6);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -86,6 +86,7 @@ export class NavEntry {
|
|||
this.dom_element.appendChild(group);
|
||||
this.dom_element.appendChild(size);
|
||||
}
|
||||
this.visible = true;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -158,10 +159,12 @@ export class NavEntry {
|
|||
}
|
||||
|
||||
show() {
|
||||
this.visible = true;
|
||||
this.dom_element.style.display = "flex";
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.visible = false;
|
||||
this.dom_element.style.display = "none";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ export class NavWindow {
|
|||
* @param {Event} e
|
||||
*/
|
||||
handleEvent(e) {
|
||||
console.log(e);
|
||||
switch (e.type) {
|
||||
case "click":
|
||||
if (e.target === this.window) {
|
||||
|
|
@ -73,6 +74,8 @@ export class NavWindow {
|
|||
} else if (e.keyCode === 65 && e.ctrlKey) {
|
||||
this.select_all();
|
||||
e.preventDefault();
|
||||
} else if (e.keyCode === 27) {
|
||||
this.clear_selected();
|
||||
} else if (e.keyCode === 67 && e.ctrlKey) {
|
||||
this.copy();
|
||||
} else if (e.keyCode === 86 && e.ctrlKey) {
|
||||
|
|
@ -212,6 +215,7 @@ export class NavWindow {
|
|||
this.selected_entries.clear();
|
||||
to_be_selected = [entry];
|
||||
}
|
||||
to_be_selected = to_be_selected.filter((entry) => entry.visible);
|
||||
for (let i of to_be_selected) {
|
||||
this.selected_entries.add(i);
|
||||
}
|
||||
|
|
@ -248,7 +252,7 @@ export class NavWindow {
|
|||
}
|
||||
|
||||
show_selected_properties() {
|
||||
this.selected_entry().show_properties();
|
||||
this.selected_entry()?.show_properties?.();
|
||||
}
|
||||
|
||||
async show_edit_selected() {
|
||||
|
|
@ -645,6 +649,7 @@ export class NavWindow {
|
|||
default:
|
||||
break;
|
||||
}
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
nav_bar_cd() {
|
||||
|
|
|
|||
|
|
@ -651,7 +651,7 @@ input:checked + .slider:before {
|
|||
.nav-notifications {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
right: 10px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-flow: column-reverse nowrap;
|
||||
|
|
@ -663,7 +663,7 @@ input:checked + .slider:before {
|
|||
.nav-notification {
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
display: none;
|
||||
flex-flow: column nowrap;
|
||||
align-items: stretch;
|
||||
z-index: 10;
|
||||
|
|
@ -673,15 +673,23 @@ input:checked + .slider:before {
|
|||
border-radius: var(--nav-border-radius);
|
||||
color: var(--font);
|
||||
}
|
||||
|
||||
.nav-notification-header {
|
||||
/* .nav-notification-header {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
font-weight: bold;
|
||||
}
|
||||
} */
|
||||
|
||||
.nav-notification-header > progress {
|
||||
/* .nav-notification-header > progress {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
} */
|
||||
|
||||
.nav-notification-header > p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -68,14 +68,16 @@
|
|||
</div>
|
||||
<div class="vertical-spacer"></div>
|
||||
<div class="flex-row inner-container">
|
||||
<div class="contents-view contents-view-grid" id="nav-contents-view">
|
||||
<div class="contents-view-list-header nav-item">
|
||||
<i class="nav-item-icon"></i>
|
||||
<div class="nav-item-title" id="sort-name-btn">Name<i class="sort-arrow fas fa-chevron-up" id="sort-name-icon"></i></div>
|
||||
<div id="sort-mode-btn">Mode</div>
|
||||
<div id="sort-owner-btn">Owner<i class="sort-arrow fas" id="sort-owner-icon"></i></div>
|
||||
<div id="sort-group-btn">Group<i class="sort-arrow fas" id="sort-group-icon"></i></div>
|
||||
<div id="sort-size-btn">Size<i class="sort-arrow fas" id="sort-size-icon"></i></div>
|
||||
<div class="contents-view">
|
||||
<div class="contents-view contents-view-grid no-border" id="nav-contents-view">
|
||||
<div class="contents-view-list-header nav-item">
|
||||
<i class="nav-item-icon"></i>
|
||||
<div class="nav-item-title" id="sort-name-btn">Name<i class="sort-arrow fas fa-chevron-up" id="sort-name-icon"></i></div>
|
||||
<div id="sort-mode-btn">Mode</div>
|
||||
<div id="sort-owner-btn">Owner<i class="sort-arrow fas" id="sort-owner-icon"></i></div>
|
||||
<div id="sort-group-btn">Group<i class="sort-arrow fas" id="sort-group-icon"></i></div>
|
||||
<div id="sort-size-btn">Size<i class="sort-arrow fas" id="sort-size-icon"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-notifications" id="nav-notifications">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@ function set_up_buttons() {
|
|||
document.getElementById("search-bar").addEventListener("keydown", (e) => {
|
||||
if (e.keyCode === 13)
|
||||
nav_window.search_filter(e);
|
||||
e.stopPropagation();
|
||||
});
|
||||
// fix tab in editor input
|
||||
document.getElementById('nav-edit-contents-textarea').addEventListener('keydown', (e) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue