mirror of
https://github.com/mickael-kerjean/filestash.git
synced 2025-11-02 11:57:04 +08:00
chore (rewrite): frontend rewrite of filespage - upload queue
This commit is contained in:
MickaelK
67
public/assets/css/designsystem_dropdown.css
Normal file
67
public/assets/css/designsystem_dropdown.css
Normal file
@ -0,0 +1,67 @@
|
||||
.component_dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.component_dropdown .dropdown_container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.component_dropdown .dropdown_button {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.component_dropdown .dropdown_container {
|
||||
padding-top: 9px;
|
||||
z-index: 3;
|
||||
}
|
||||
.component_dropdown .dropdown_container:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 3px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 10px solid white;
|
||||
}
|
||||
.component_dropdown .dropdown_container ul {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
background: white;
|
||||
border: 1px solid var(--bg-color);
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
|
||||
color: var(--color);
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
.component_dropdown .dropdown_container ul li {
|
||||
display: flex;
|
||||
}
|
||||
.component_dropdown .dropdown_container ul li > div {
|
||||
width: 150px;
|
||||
padding: 5px 5px 5px 10px;
|
||||
}
|
||||
|
||||
.component_dropdown.active .dropdown_container {
|
||||
display: block;
|
||||
}
|
||||
.component_dropdown.active .dropdown_container li {
|
||||
background: white;
|
||||
transition: background 0.1s ease-out;
|
||||
}
|
||||
|
||||
.component_dropdown.active .dropdown_container li:hover {
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.component_dropdown.active .dropdown_button {
|
||||
border-color: var(--bg-color);
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@ -8,6 +8,7 @@ import { getState$ } from "./filespage/ctrl_filesystem_state.js";
|
||||
import componentFilesystem, { init as initFilesystem } from "./filespage/ctrl_filesystem.js";
|
||||
import componentSubmenu, { init as initSubmenu } from "./filespage/ctrl_submenu.js";
|
||||
import componentNewItem, { init as initNewItem } from "./filespage/ctrl_newitem.js";
|
||||
import componentUploadQueue, { init as initUploadQueue } from "./filespage/ctrl_upload_queue.js";
|
||||
|
||||
import "../components/breadcrumb.js";
|
||||
|
||||
@ -18,6 +19,7 @@ export default WithShell(function(render) {
|
||||
<div is="component_submenu"></div>
|
||||
<div is="component_newitem"></div>
|
||||
<div is="component_filesystem"></div>
|
||||
<div is="component_uploadqueue"></div>
|
||||
</div>
|
||||
`);
|
||||
render($page);
|
||||
@ -36,11 +38,15 @@ export default WithShell(function(render) {
|
||||
|
||||
// feature4: render the creation menu
|
||||
componentNewItem(createRender(qs($page, "[is=\"component_newitem\"]")));
|
||||
|
||||
// feature5: render the upload queue
|
||||
componentUploadQueue(createRender(qs($page, "[is=\"component_uploadqueue\"]")));
|
||||
});
|
||||
|
||||
export function init() {
|
||||
return Promise.all([
|
||||
loadCSS(import.meta.url, "./ctrl_filespage.css"),
|
||||
initShell(), initFilesystem(), initSubmenu(), initNewItem(),
|
||||
initShell(), initFilesystem(),
|
||||
initSubmenu(), initNewItem(), initUploadQueue(),
|
||||
]);
|
||||
}
|
||||
|
||||
91
public/assets/pages/filespage/ctrl_upload_queue.css
Normal file
91
public/assets/pages/filespage/ctrl_upload_queue.css
Normal file
@ -0,0 +1,91 @@
|
||||
.component_upload_queue {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 00px;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
max-width: 550px;
|
||||
box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.1);
|
||||
background: white;
|
||||
padding: 20px 15px 15px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.component_upload_queue h2 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 1.2em;
|
||||
font-weight: 100;
|
||||
}
|
||||
.component_upload_queue h2 .percent {
|
||||
color: var(--emphasis-primary);
|
||||
}
|
||||
.component_upload_queue h2 .count_block {
|
||||
display: inline;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.component_upload_queue h2 .count_block span.grandTotal {
|
||||
font-size: 0.8em;
|
||||
color: var(--emphasis-secondary);
|
||||
}
|
||||
.component_upload_queue h2 .count_block span.grandTotal:before {
|
||||
content: "/";
|
||||
}
|
||||
.component_upload_queue h2 .count_block span.completed {
|
||||
color: var(--emphasis-secondary);
|
||||
}
|
||||
.component_upload_queue h2 .component_icon {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
width: 25px;
|
||||
float: right;
|
||||
}
|
||||
.component_upload_queue h3 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 1.0em;
|
||||
font-weight: 100;
|
||||
}
|
||||
.component_upload_queue .stats_content {
|
||||
clear: both;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.component_upload_queue .stats_content .error_color {
|
||||
color: var(--error);
|
||||
}
|
||||
.component_upload_queue .stats_content .todo_color {
|
||||
color: var(--light);
|
||||
}
|
||||
.component_upload_queue .stats_content .file_row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
.component_upload_queue .stats_content .file_row .file_path {
|
||||
padding: 3px 3px 3px 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.component_upload_queue .stats_content .file_row .file_state {
|
||||
padding: 3px 3px 3px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 40px;
|
||||
}
|
||||
.component_upload_queue .stats_content .file_row:hover .file_control img {
|
||||
display: block !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.component_upload_queue .stats_content .file_row .file_control {
|
||||
padding: 3px 3px 3px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.component_upload_queue .stats_content .file_row .file_control img {
|
||||
display: none;
|
||||
}
|
||||
190
public/assets/pages/filespage/ctrl_upload_queue.js
Normal file
190
public/assets/pages/filespage/ctrl_upload_queue.js
Normal file
@ -0,0 +1,190 @@
|
||||
import { createElement } from "../../lib/skeleton/index.js";
|
||||
import { loadCSS } from "../../helpers/loader.js";
|
||||
|
||||
export default function(render) {
|
||||
render(createElement(`
|
||||
<div class="component_upload_queue">
|
||||
<h2>CURRENT UPLOAD <div class="count_block">
|
||||
<span class="completed">24</span>
|
||||
<span class="grandTotal">24</span>
|
||||
</div>
|
||||
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MS45NzYgNTEuOTc2Ij4KICA8cGF0aCBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjUzMzMzMjg1O3N0cm9rZS13aWR0aDoxLjQ1NjgxMTE5IiBkPSJtIDQxLjAwNTMxLDQwLjg0NDA2MiBjIC0xLjEzNzc2OCwxLjEzNzc2NSAtMi45ODIwODgsMS4xMzc3NjUgLTQuMTE5ODYxLDAgTCAyNi4wNjg2MjgsMzAuMDI3MjM0IDE0LjczNzU1MSw0MS4zNTgzMSBjIC0xLjEzNzc3MSwxLjEzNzc3MSAtMi45ODIwOTMsMS4xMzc3NzEgLTQuMTE5ODYxLDAgLTEuMTM3NzcyMiwtMS4xMzc3NjggLTEuMTM3NzcyMiwtMi45ODIwODggMCwtNC4xMTk4NjEgTCAyMS45NDg3NjYsMjUuOTA3MzcyIDExLjEzMTkzOCwxNS4wOTA1NTEgYyAtMS4xMzc3NjQ3LC0xLjEzNzc3MSAtMS4xMzc3NjQ3LC0yLjk4MzU1MyAwLC00LjExOTg2MSAxLjEzNzc3NCwtMS4xMzc3NzIxIDIuOTgyMDk4LC0xLjEzNzc3MjEgNC4xMTk4NjUsMCBMIDI2LjA2ODYyOCwyMS43ODc1MTIgMzYuMzY5NzM5LDExLjQ4NjM5OSBjIDEuMTM3NzY4LC0xLjEzNzc2OCAyLjk4MjA5MywtMS4xMzc3NjggNC4xMTk4NjIsMCAxLjEzNzc2NywxLjEzNzc2OSAxLjEzNzc2NywyLjk4MjA5NCAwLDQuMTE5ODYyIEwgMzAuMTg4NDg5LDI1LjkwNzM3MiA0MS4wMDUzMSwzNi43MjQxOTcgYyAxLjEzNzc3MSwxLjEzNzc2NyAxLjEzNzc3MSwyLjk4MjA5MSAwLDQuMTE5ODY1IHoiIC8+Cjwvc3ZnPgo=" alt="close">
|
||||
</h2>
|
||||
<h3>Done</h3>
|
||||
<div class="stats_content">
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/DEBIAN/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/DEBIAN/control</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/DEBIAN/md5sums</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/bin/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/applications/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/icons/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/doc/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/man/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/metainfo/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/applications/org.raspberrypi.rpi-imager.desktop</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/icons/hicolor/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/doc/rpi-imager/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/man/man1/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/metainfo/rpi-imager.metainfo.xml</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/icons/hicolor/128x128/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/doc/rpi-imager/changelog.gz</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/doc/rpi-imager/copyright</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/man/man1/rpi-imager.1.gz</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/icons/hicolor/128x128/apps/</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/share/icons/hicolor/128x128/apps/rpi-imager.png</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_row done_color">
|
||||
<div class="file_path">rpi-imager/usr/bin/rpi-imager</div>
|
||||
<div class="file_state file_state_done">Done</div>
|
||||
<div class="file_control">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`))
|
||||
}
|
||||
|
||||
export function init() {
|
||||
return loadCSS(import.meta.url, "./ctrl_upload_queue.css");
|
||||
}
|
||||
10
public/assets/pages/filespage/model_state.js
Normal file
10
public/assets/pages/filespage/model_state.js
Normal file
@ -0,0 +1,10 @@
|
||||
import rxjs from "../../lib/rx.js";
|
||||
|
||||
const state$ = new rxjs.ReplaySubject(1);
|
||||
state$.next({
|
||||
VIEW: "GRID",
|
||||
});
|
||||
|
||||
function getView$() {
|
||||
return state$.pipe(({ VIEW }) => VIEW);
|
||||
}
|
||||
Reference in New Issue
Block a user