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): tag hovering issue

Browse source
This commit is contained in:
MickaelK 2025-08-27 17:53:47 +10:00
parent cec55aa996
commit 3b48a5fa80
3 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
public/assets/components/sidebar.js
View file

@ -249,11 +249,12 @@ async function ctrlTagPane(render, { tags, path }) {
rxjs.catchError(() => rxjs.of({ tags: [] })),
),
).pipe(
rxjs.map(({ tags, response }) => {
// feature: create the DOM
rxjs.mergeMap(({ tags, response }) => {
render($page);
if (tags.length === 0) {
$page.classList.add("hidden");
return {};
return rxjs.EMPTY;
}
$page.classList.remove("hidden");
const $fragment = document.createDocumentFragment();
@ -280,8 +281,9 @@ async function ctrlTagPane(render, { tags, path }) {
}
$fragment.appendChild($tag);
});
return { $list: renderTaglist($fragment), response };
return rxjs.of({ $list: renderTaglist($fragment), response });
}),
// feature: tag mouse hover effect
rxjs.tap(({ $list, response }) => {
if (isMobile) return;
else if (!response) return;
@ -296,16 +298,19 @@ async function ctrlTagPane(render, { tags, path }) {
if (tags.indexOf(tagname) === -1) continue;
paths.push(path);
}
$tag.onmouseenter = () => document.querySelectorAll(".component_thing").forEach(($thing) => {
$tag.onmouseenter = () => {
const $things = document.querySelectorAll(".component_thing");
$things.forEach(($thing) => {
const thingpath = $thing.getAttribute("data-path");
for (let i=0; i<paths.length; i++) {
if (paths[i].indexOf(thingpath) === 0) {
$thing.classList.add("hover");
$tag.onmouseleave = () => $thing.classList.remove("hover");
break;
}
}
});
$tag.onmouseleave = () => $things.forEach(($thing) => $thing.classList.remove("hover"));
};
});
}),
));

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

@ -9,7 +9,7 @@
border: 2px solid var(--border);
border-radius: 5px;
padding: 5px 10px;
color: var(--color);
color: rgba(0,0,0,0.75);
width: 100%;
display: block;
box-sizing: border-box;

3
public/assets/pages/filespage/thing.css
View file

@ -254,7 +254,8 @@
.list > .component_thing.view-grid img.thumbnail {
transition: 0.2s ease-out transform;
}
.list > .component_thing.view-grid.not-selected:hover img.thumbnail {
.list > .component_thing.view-grid.not-selected:hover img.thumbnail,
.list > .component_thing.view-grid.not-selected.hover img.thumbnail {
transform: scale(0.6);
}
.list > .component_thing.view-grid.not-selected:hover .image_layer {