opensource/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2025-11-03 13:11:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

feature (ux): improve UX

Browse Source
This commit is contained in:
MickaelK
2025-07-29 00:02:45 +10:00
parent 6e6669782c
commit ca907321eb
2 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/css/designsystem.css
View File

@ -19,7 +19,7 @@
--primary: #9AD1ED;
--emphasis-primary: #c5e2f1;
--emphasis-secondary: #466372;
--light: #707173;
--light: #6e6f71;
--super-light: #fafafa;
--error: #f26d6d;
--success: #63d9b1;

21
public/assets/pages/viewerpage/application_image/zoom.js
View File

@ -22,7 +22,7 @@ export default function({ $img, $page }) {
state.y = 0;
}
state.scale = next;
state.duration = duration ?? (next === 1 ? 500 : 150);
state.duration = duration ?? (next === 1 ? 500 : 0);
return state;
}, { scale: 1, x: 0, y: 0, duration: 0 }),
rxjs.tap(({ scale, x, y, duration }) => {
@ -46,16 +46,15 @@ function builder({ $img }) {
// zoom via scroll wheel
rxjs.fromEvent($img.parentElement, "wheel").pipe(
rxjs.tap((e) => e.preventDefault()),
rxjs.bufferTime(100),
rxjs.filter((events) => events.length > 0),
rxjs.map((events) => {
let out = null;
for (let i=0; i<events.length; i++) {
const scale = Math.min(Math.exp(-events[i].deltaY / 300), 2);
if (out === null) out = ({ scale, clientX: events[i].clientX, clientY: events[i].clientY });
else if (Math.abs(scale) > Math.abs(out.scale)) out = ({ scale, clientX: events[i].clientX, clientY: events[i].clientY });
}
return out;
rxjs.map((event) => {
let scale = Math.exp(-event.deltaY / 300);
if (scale > 1.07) scale = 1.07;
else if (scale < 0.93) scale = 0.93;
return {
scale,
clientX: event.clientX,
clientY: event.clientY,
};
}),
),
// zoom via keyboard shortcut