Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2025-12-06 08:22:24 +01:00
Code Issues Projects Releases Wiki Activity

fix (tag): UX for tagging

Browse source
This commit is contained in:
MickaelK 2025-05-16 11:56:26 +10:00
parent ea30adad2f
commit 6bf291a582
2 changed files with 41 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
public/assets/pages/filespage/modal_tag.css
View file

@ -1,37 +1,55 @@
.component_tag { .component_tag {
font-size: 1rem; font-size: 1rem;
} }
.component_tag [data-bind="taglist"] {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin: -10px;
padding: 20px 10px 10px 10px;
}
.component_tag input { .component_tag input {
font-size: 1.15rem; font-size: 1rem;
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: 3px; border-radius: 5px;
padding: 2px 5px; padding: 5px 10px;
color: var(--color); color: var(--color);
width: 100%;
display: block;
box-sizing: border-box;
} }
.component_tag input::placeholder { .component_tag input::placeholder {
color: rgba(0,0,0,0.2); color: rgba(0,0,0,0.2);
} }
.component_tag .box { .component_tag .tag {
display: flex; display: flex;
background: var(--bg-color); background: #f2f2f2;
transition: background 0.1s ease; transition: all 0.1s ease;
padding: 2px 5px 2px 8px; padding: 2px 5px 2px 10px;
border-radius: 3px; border-radius: 5px;
margin: 0;
font-size: 0.95rem; font-size: 0.95rem;
cursor: pointer;
} }
.component_tag .box.active { .component_tag .tag.active {
background: var(--primary); background: var(--dark);
color: #f2f2f2;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
} }
.component_tag .box > div { .component_tag .tag svg {
flex-grow: 1; width: 15px;
} height: 15px;
.component_tag .box img {
width: 20px;
background: rgba(0, 0, 0, 0.05);
border-radius: 50%; border-radius: 50%;
margin-left: 5px; margin-left: 5px;
padding: 4px;
} }
.component_tag .box img[alt="close"] { .touch-no .component_tag .tag svg:hover {
background: rgba(0, 0, 0, 0.05);
}
.touch-no .component_tag .tag.active svg:hover {
background: rgba(255, 255, 255, 0.15);
}
.component_tag .tag img[alt="close"] {
width: 14px; width: 14px;
padding: 5px; padding: 5px;
} }

9
public/assets/pages/filespage/modal_tag.js
View file

@ -6,9 +6,12 @@ import t from "../../locales/index.js";
const ICON_CLOSE = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MS45NzYgNTEuOTc2Ij4KICA8cGF0aCBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjUzMzMzMjg1O3N0cm9rZS13aWR0aDoxLjQ1NjgxMTE5IiBkPSJtIDQxLjAwNTMxLDQwLjg0NDA2MiBjIC0xLjEzNzc2OCwxLjEzNzc2NSAtMi45ODIwODgsMS4xMzc3NjUgLTQuMTE5ODYxLDAgTCAyNi4wNjg2MjgsMzAuMDI3MjM0IDE0LjczNzU1MSw0MS4zNTgzMSBjIC0xLjEzNzc3MSwxLjEzNzc3MSAtMi45ODIwOTMsMS4xMzc3NzEgLTQuMTE5ODYxLDAgLTEuMTM3NzcyMiwtMS4xMzc3NjggLTEuMTM3NzcyMiwtMi45ODIwODggMCwtNC4xMTk4NjEgTCAyMS45NDg3NjYsMjUuOTA3MzcyIDExLjEzMTkzOCwxNS4wOTA1NTEgYyAtMS4xMzc3NjQ3LC0xLjEzNzc3MSAtMS4xMzc3NjQ3LC0yLjk4MzU1MyAwLC00LjExOTg2MSAxLjEzNzc3NCwtMS4xMzc3NzIxIDIuOTgyMDk4LC0xLjEzNzc3MjEgNC4xMTk4NjUsMCBMIDI2LjA2ODYyOCwyMS43ODc1MTIgMzYuMzY5NzM5LDExLjQ4NjM5OSBjIDEuMTM3NzY4LC0xLjEzNzc2OCAyLjk4MjA5MywtMS4xMzc3NjggNC4xMTk4NjIsMCAxLjEzNzc2NywxLjEzNzc2OSAxLjEzNzc2NywyLjk4MjA5NCAwLDQuMTE5ODYyIEwgMzAuMTg4NDg5LDI1LjkwNzM3MiA0MS4wMDUzMSwzNi43MjQxOTcgYyAxLjEzNzc3MSwxLjEzNzc2NyAxLjEzNzc3MSwyLjk4MjA5MSAwLDQuMTE5ODY1IHoiIC8+Cjwvc3ZnPgo="; const ICON_CLOSE = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MS45NzYgNTEuOTc2Ij4KICA8cGF0aCBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjUzMzMzMjg1O3N0cm9rZS13aWR0aDoxLjQ1NjgxMTE5IiBkPSJtIDQxLjAwNTMxLDQwLjg0NDA2MiBjIC0xLjEzNzc2OCwxLjEzNzc2NSAtMi45ODIwODgsMS4xMzc3NjUgLTQuMTE5ODYxLDAgTCAyNi4wNjg2MjgsMzAuMDI3MjM0IDE0LjczNzU1MSw0MS4zNTgzMSBjIC0xLjEzNzc3MSwxLjEzNzc3MSAtMi45ODIwOTMsMS4xMzc3NzEgLTQuMTE5ODYxLDAgLTEuMTM3NzcyMiwtMS4xMzc3NjggLTEuMTM3NzcyMiwtMi45ODIwODggMCwtNC4xMTk4NjEgTCAyMS45NDg3NjYsMjUuOTA3MzcyIDExLjEzMTkzOCwxNS4wOTA1NTEgYyAtMS4xMzc3NjQ3LC0xLjEzNzc3MSAtMS4xMzc3NjQ3LC0yLjk4MzU1MyAwLC00LjExOTg2MSAxLjEzNzc3NCwtMS4xMzc3NzIxIDIuOTgyMDk4LC0xLjEzNzc3MjEgNC4xMTk4NjUsMCBMIDI2LjA2ODYyOCwyMS43ODc1MTIgMzYuMzY5NzM5LDExLjQ4NjM5OSBjIDEuMTM3NzY4LC0xLjEzNzc2OCAyLjk4MjA5MywtMS4xMzc3NjggNC4xMTk4NjIsMCAxLjEzNzc2NywxLjEzNzc2OSAxLjEzNzc2NywyLjk4MjA5NCAwLDQuMTE5ODYyIEwgMzAuMTg4NDg5LDI1LjkwNzM3MiA0MS4wMDUzMSwzNi43MjQxOTcgYyAxLjEzNzc3MSwxLjEzNzc2NyAxLjEzNzc3MSwyLjk4MjA5MSAwLDQuMTE5ODY1IHoiIC8+Cjwvc3ZnPgo=";
const $tmpl = createElement(` const $tmpl = createElement(`
<div class="box no-select"> <div class="tag no-select">
<div class="ellipsis">Projects</div> <div class="ellipsis">Projects</div>
<img class="component_icon" draggable="false" src="${ICON_CLOSE}" alt="close"> <svg class="component_icon" draggable="false" alt="close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</div> </div>
`); `);
@ -22,7 +25,7 @@ export default function(render, { path }) {
const $modal = createElement(` const $modal = createElement(`
<div class="component_tag"> <div class="component_tag">
<form> <form>
<input class="component_input" type="text" placeholder="${t("Create a Tag")}" value=""> <input type="text" placeholder="${t("Create a Tag")}" value="">
</form> </form>
<div class="scroll-y" data-bind="taglist"></div> <div class="scroll-y" data-bind="taglist"></div>
</div> </div>