github/filestash
4
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2026-10-19 16:14:39 +00:00
Code Issues Releases Wiki Activity

feature (sidebar): improve sidebar ux

Browse Source
This commit is contained in:
MickaelK
2026-05-06 16:13:43 +10:00
parent a595211c00
commit 18a54abce8
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/components/sidebar.js
+4 -3
View File
@@ -1,5 +1,5 @@
import { createElement, createRender, onDestroy } from "../lib/skeleton/index.js";
import rxjs, { effect, onClick } from "../lib/rx.js";
import rxjs, { effect, onClick, preventDefault } from "../lib/rx.js";
import { qs } from "../lib/dom.js";
import { settingsGet, settingsSave } from "../lib/store.js";
import { loadCSS } from "../helpers/loader.js";
@@ -95,16 +95,17 @@ const withResize = (function() {
return ($sidebar) => {
const $resize = createElement(`<div class="resizer"></div>`);
effect(rxjs.fromEvent($resize, "mousedown").pipe(
preventDefault(),
rxjs.mergeMap((e0) => rxjs.fromEvent(document, "mousemove").pipe(
rxjs.takeUntil(rxjs.fromEvent(document, "mouseup")),
rxjs.startWith(e0),
rxjs.pairwise(),
rxjs.map(([prevX, currX]) => currX.clientX - prevX.clientX),
rxjs.scan((width, delta) => width + delta, $sidebar.clientWidth),
rxjs.scan((width, delta) => width + delta, $sidebar.offsetWidth),
)),
rxjs.startWith(memory),
rxjs.filter((w) => !!w),
rxjs.map((w) => Math.min(Math.max(w, 250), 350)),
rxjs.map((w) => Math.min(Math.max(w, 250), 400)),
rxjs.tap((w) => {
$sidebar.style.width = `${w}px`;
memory = w;