Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2026-01-04 23:02:28 +01:00
Code Issues Projects Releases Wiki Activity

feature (redesign): file manager menu buttons after rewrite

Browse source
This commit is contained in:
MickaelK 2024-03-11 19:39:29 +11:00
parent a8e3167287
commit 9e5d97800a
6 changed files with 26 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/assets/components/breadcrumb.css
View file

@ -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;

2
public/assets/components/decorator_shell_filemanager.css
View file

@ -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,

2
public/assets/components/icon.js
View file

@ -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=";
}

4
public/assets/helpers/loader.d.ts vendored
View file

@ -4,4 +4,6 @@ export function CSS(baseURL: string, ...arrayOfFilenames: string[]): Promise<str
export function loadSingleCSS(baseURL: string, filename: string): Promise<string>;
export function init(): Promise<void>;
export function loadJS(baseURL: string, path: string, opts?: object): Promise<string>;
export function init(): Promise<void>;

12
public/assets/pages/filespage/ctrl_submenu.css
View file

@ -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; */

24
public/assets/pages/filespage/ctrl_submenu.js
View file

@ -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(`<div class="component_submenu container"></div>`);
@ -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(`
<div class="action left no-select" style="margin-left:2px;">
<button>New File</button>
<button>New Folder</button>
<button data-action="new-file">New File</button>
<button data-action="new-folder">New Folder</button>
</div>
<div class="action right no-select" style="margin-right:2px;">
<button>
@ -54,21 +57,22 @@ export default async function(render) {
applyMutation($page, "replaceChildren"),
));
// feature2: update when selection is preset
effect(getSelection$().pipe(
rxjs.filter((selections) => selections.length > 0),
rxjs.tap((selections) => selections.length === 1 && animate($page)),
rxjs.map((selections) => createFragment(`
<div class="action left">
<button>Download</button>
<button>Share</button>
<button>Embed</button>
<button>Tag</button>
<button>Rename</button>
<button>Delete</button>
<button data-action="download">Download</button>
<button data-action="share">Share</button>
<button data-action="embed">Embed</button>
<button data-action="tag">Tag</button>
<button data-action="rename">Rename</button>
<button data-action="delete">Delete</button>
</div>
<div class="action right">
<button data-bind="clear">
${selections.length} x
${selections.length} <component-icon name="close"></component-icon>
</button>
</div>
`)),