From 9e5d97800ac44e183f3ca07b7abc2bfb4e08a44c Mon Sep 17 00:00:00 2001 From: MickaelK Date: Mon, 11 Mar 2024 19:39:29 +1100 Subject: [PATCH] feature (redesign): file manager menu buttons after rewrite --- public/assets/components/breadcrumb.css | 2 +- .../decorator_shell_filemanager.css | 2 +- public/assets/components/icon.js | 2 ++ public/assets/helpers/loader.d.ts | 4 +++- .../assets/pages/filespage/ctrl_submenu.css | 12 ++++------ public/assets/pages/filespage/ctrl_submenu.js | 24 +++++++++++-------- 6 files changed, 26 insertions(+), 20 deletions(-) diff --git a/public/assets/components/breadcrumb.css b/public/assets/components/breadcrumb.css index 41c35f10..7e0a7282 100644 --- a/public/assets/components/breadcrumb.css +++ b/public/assets/components/breadcrumb.css @@ -98,7 +98,7 @@ body.touch-yes [is="component-breadcrumb"] .ul span::-webkit-scrollbar-thumb { } body.touch-no .component_path-element-wrapper a.label:hover { - background: rgba(0, 0, 0, 0.05); + background: var(--border); } body.touch-no .component_path-element-wrapper a.label:hover span.title { opacity: 1; diff --git a/public/assets/components/decorator_shell_filemanager.css b/public/assets/components/decorator_shell_filemanager.css index 7c5b1e75..fcbbe913 100644 --- a/public/assets/components/decorator_shell_filemanager.css +++ b/public/assets/components/decorator_shell_filemanager.css @@ -55,7 +55,7 @@ max-width: 815px; } .component_filemanager_shell [data-bind="sidebar"].hidden ~ div > [data-bind="filemanager-children"] { - background: var(--bg-color); + background: rgba(100,100,100,.05); } .component_filemanager_shell [data-bind="filemanager-children"] .container, diff --git a/public/assets/components/icon.js b/public/assets/components/icon.js index d025c35e..f8f05ed1 100644 --- a/public/assets/components/icon.js +++ b/public/assets/components/icon.js @@ -27,6 +27,8 @@ class Icon extends window.HTMLElement { return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggc3R5bGU9ImZpbGw6IzZmNmY2ZjtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MS41MTE4MTEwMjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgZD0ibSAxNiw3LjE2IC00LjU4LDQuNTkgNC41OCw0LjU5IC0xLjQxLDEuNDEgLTYsLTYgNiwtNiB6Ii8+CiAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTAtLjI1aDI0djI0SDB6Ii8+Cjwvc3ZnPgo="; case "eye": return "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzkxOTE5MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjRweDt9PC9zdHlsZT4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEsMjRhMjYuODUsMjYuODUsMCwwLDEsNDYsMCIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMSwyNGEyNi44NSwyNi44NSwwLDAsMCw0NiwwIi8+CiAgICA8ZWxsaXBzZSBjbGFzcz0iY2xzLTEiIGN4PSIyNCIgY3k9IjI0IiByeD0iNyIgcnk9IjciLz4KPC9zdmc+Cg=="; + case "close": + return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MS45NzYgNTEuOTc2Ij4KICA8cGF0aCBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjUzMzMzMjg1O3N0cm9rZS13aWR0aDoxLjQ1NjgxMTE5IiBkPSJtIDQxLjAwNTMxLDQwLjg0NDA2MiBjIC0xLjEzNzc2OCwxLjEzNzc2NSAtMi45ODIwODgsMS4xMzc3NjUgLTQuMTE5ODYxLDAgTCAyNi4wNjg2MjgsMzAuMDI3MjM0IDE0LjczNzU1MSw0MS4zNTgzMSBjIC0xLjEzNzc3MSwxLjEzNzc3MSAtMi45ODIwOTMsMS4xMzc3NzEgLTQuMTE5ODYxLDAgLTEuMTM3NzcyMiwtMS4xMzc3NjggLTEuMTM3NzcyMiwtMi45ODIwODggMCwtNC4xMTk4NjEgTCAyMS45NDg3NjYsMjUuOTA3MzcyIDExLjEzMTkzOCwxNS4wOTA1NTEgYyAtMS4xMzc3NjQ3LC0xLjEzNzc3MSAtMS4xMzc3NjQ3LC0yLjk4MzU1MyAwLC00LjExOTg2MSAxLjEzNzc3NCwtMS4xMzc3NzIxIDIuOTgyMDk4LC0xLjEzNzc3MjEgNC4xMTk4NjUsMCBMIDI2LjA2ODYyOCwyMS43ODc1MTIgMzYuMzY5NzM5LDExLjQ4NjM5OSBjIDEuMTM3NzY4LC0xLjEzNzc2OCAyLjk4MjA5MywtMS4xMzc3NjggNC4xMTk4NjIsMCAxLjEzNzc2NywxLjEzNzc2OSAxLjEzNzc2NywyLjk4MjA5NCAwLDQuMTE5ODYyIEwgMzAuMTg4NDg5LDI1LjkwNzM3MiA0MS4wMDUzMSwzNi43MjQxOTcgYyAxLjEzNzc3MSwxLjEzNzc2NyAxLjEzNzc3MSwyLjk4MjA5MSAwLDQuMTE5ODY1IHoiIC8+Cjwvc3ZnPgo=" case "loading": return "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0nMTIwcHgnIGhlaWdodD0nMTIwcHgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0idWlsLXJpbmctYWx0Ij4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ibm9uZSIgY2xhc3M9ImJrIj48L3JlY3Q+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L2NpcmNsZT4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSIjNmY2ZjZmIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2UtZGFzaG9mZnNldCIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGZyb209IjAiIHRvPSI1MDIiPjwvYW5pbWF0ZT4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNoYXJyYXkiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjE1MC42IDEwMC40OzEgMjUwOzE1MC42IDEwMC40Ij48L2FuaW1hdGU+CiAgPC9jaXJjbGU+Cjwvc3ZnPgo="; } diff --git a/public/assets/helpers/loader.d.ts b/public/assets/helpers/loader.d.ts index 0a723339..afeea96e 100644 --- a/public/assets/helpers/loader.d.ts +++ b/public/assets/helpers/loader.d.ts @@ -4,4 +4,6 @@ export function CSS(baseURL: string, ...arrayOfFilenames: string[]): Promise; -export function init(): Promise; +export function loadJS(baseURL: string, path: string, opts?: object): Promise; + +export function init(): Promise; \ No newline at end of file diff --git a/public/assets/pages/filespage/ctrl_submenu.css b/public/assets/pages/filespage/ctrl_submenu.css index 2390925b..d69334cc 100644 --- a/public/assets/pages/filespage/ctrl_submenu.css +++ b/public/assets/pages/filespage/ctrl_submenu.css @@ -1,16 +1,16 @@ /* General design */ [is="component_submenu"] { - margin-top: 20px; + margin-top: 10px; position: sticky; top: 0; z-index: 3; - padding: 8px 0; + padding: 5px 0; backdrop-filter: blur(10px); transition: 0.2s ease box-shadow; } .scrolling [is="component_submenu"] { box-shadow: 0 5px 10px rgba(100,100,100,.05); - background: rgba(0,0,0,0.01); + background: rgba(245,245,245,0.75); } [is="component_submenu"] .component_submenu { display: flex; @@ -19,10 +19,10 @@ } [is="component_submenu"] .component_submenu .action button { padding: 6px 10px; - font-size: 0.8rem; background: transparent; - color: #626469fa; text-transform: uppercase; + font-size: 0.8rem; + color: var(--light); letter-spacing: 0; border-radius: 5px; } @@ -32,7 +32,6 @@ margin-left: -3px; margin-right: -3px; } -[is="component_submenu"] .component_submenu .action.left button, [is="component_submenu"] .component_submenu .action.right:hover{ background: var(--border); } @@ -61,7 +60,6 @@ background: var(--bg-color); } - /* search */ /* img[alt="search"]:hover ~ input { */ /* background: red; */ diff --git a/public/assets/pages/filespage/ctrl_submenu.js b/public/assets/pages/filespage/ctrl_submenu.js index b4739022..d49bee6b 100644 --- a/public/assets/pages/filespage/ctrl_submenu.js +++ b/public/assets/pages/filespage/ctrl_submenu.js @@ -6,6 +6,7 @@ import { qs } from "../../lib/dom.js"; import { getSelection$, clearSelection } from "./model_files.js"; import "../../components/dropdown.js"; +import "../../components/icon.js"; export default async function(render) { const $page = createElement(`
`); @@ -22,12 +23,14 @@ export default async function(render) { )); onDestroy(() => clearSelection()); + + // feature1: layout base case effect(getSelection$().pipe( rxjs.filter((selections) => selections.length === 0), - rxjs.mapTo(createFragment(` + rxjs.map(() => createFragment(`
- - + +
- - - - - + + + + + +
`)),