From ede2ba27f95ea92a12836e6288e4ae0e34507a9d Mon Sep 17 00:00:00 2001 From: MickaelK Date: Wed, 17 Apr 2024 21:38:06 +1000 Subject: [PATCH] chore (rewrite): frontend rewrite of filespage - upload queue --- public/assets/css/designsystem_dropdown.css | 67 ++++++ public/assets/pages/ctrl_filespage.js | 8 +- .../pages/filespage/ctrl_upload_queue.css | 91 +++++++++ .../pages/filespage/ctrl_upload_queue.js | 190 ++++++++++++++++++ public/assets/pages/filespage/model_state.js | 10 + 5 files changed, 365 insertions(+), 1 deletion(-) create mode 100644 public/assets/css/designsystem_dropdown.css create mode 100644 public/assets/pages/filespage/ctrl_upload_queue.css create mode 100644 public/assets/pages/filespage/ctrl_upload_queue.js create mode 100644 public/assets/pages/filespage/model_state.js diff --git a/public/assets/css/designsystem_dropdown.css b/public/assets/css/designsystem_dropdown.css new file mode 100644 index 00000000..7c2e0f60 --- /dev/null +++ b/public/assets/css/designsystem_dropdown.css @@ -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); +} diff --git a/public/assets/pages/ctrl_filespage.js b/public/assets/pages/ctrl_filespage.js index a6d6055e..ca1a569f 100644 --- a/public/assets/pages/ctrl_filespage.js +++ b/public/assets/pages/ctrl_filespage.js @@ -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) {
+
`); 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(), ]); } diff --git a/public/assets/pages/filespage/ctrl_upload_queue.css b/public/assets/pages/filespage/ctrl_upload_queue.css new file mode 100644 index 00000000..84431e0e --- /dev/null +++ b/public/assets/pages/filespage/ctrl_upload_queue.css @@ -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; +} diff --git a/public/assets/pages/filespage/ctrl_upload_queue.js b/public/assets/pages/filespage/ctrl_upload_queue.js new file mode 100644 index 00000000..74486cde --- /dev/null +++ b/public/assets/pages/filespage/ctrl_upload_queue.js @@ -0,0 +1,190 @@ +import { createElement } from "../../lib/skeleton/index.js"; +import { loadCSS } from "../../helpers/loader.js"; + +export default function(render) { + render(createElement(` +
+

CURRENT UPLOAD
+ 24 + 24 +
+ close +

+

Done

+
+
+
rpi-imager/
+
Done
+
+ +
+
+
+
rpi-imager/DEBIAN/
+
Done
+
+ +
+
+
+
rpi-imager/usr/
+
Done
+
+ +
+
+
+
rpi-imager/DEBIAN/control
+
Done
+
+ +
+
+
+
rpi-imager/DEBIAN/md5sums
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/
+
Done
+
+ +
+
+
+
rpi-imager/usr/bin/
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/applications/
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/icons/
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/doc/
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/man/
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/metainfo/
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/applications/org.raspberrypi.rpi-imager.desktop
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/icons/hicolor/
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/doc/rpi-imager/
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/man/man1/
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/metainfo/rpi-imager.metainfo.xml
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/icons/hicolor/128x128/
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/doc/rpi-imager/changelog.gz
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/doc/rpi-imager/copyright
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/man/man1/rpi-imager.1.gz
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/icons/hicolor/128x128/apps/
+
Done
+
+ +
+
+
+
rpi-imager/usr/share/icons/hicolor/128x128/apps/rpi-imager.png
+
Done
+
+ +
+
+
+
rpi-imager/usr/bin/rpi-imager
+
Done
+
+ +
+
+
+
+ `)) +} + +export function init() { + return loadCSS(import.meta.url, "./ctrl_upload_queue.css"); +} diff --git a/public/assets/pages/filespage/model_state.js b/public/assets/pages/filespage/model_state.js new file mode 100644 index 00000000..110f39ce --- /dev/null +++ b/public/assets/pages/filespage/model_state.js @@ -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); +}