opensource/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2025-11-03 21:17:33 +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; --primary: #9AD1ED;
--emphasis-primary: #c5e2f1; --emphasis-primary: #c5e2f1;
--emphasis-secondary: #466372; --emphasis-secondary: #466372;
--light: #707173; --light: #6e6f71;
--super-light: #fafafa; --super-light: #fafafa;
--error: #f26d6d; --error: #f26d6d;
--success: #63d9b1; --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.y = 0;
} }
state.scale = next; state.scale = next;
state.duration = duration ?? (next === 1 ? 500 : 150); state.duration = duration ?? (next === 1 ? 500 : 0);
return state; return state;
}, { scale: 1, x: 0, y: 0, duration: 0 }), }, { scale: 1, x: 0, y: 0, duration: 0 }),
rxjs.tap(({ scale, x, y, duration }) => { rxjs.tap(({ scale, x, y, duration }) => {
@ -46,16 +46,15 @@ function builder({ $img }) {
// zoom via scroll wheel // zoom via scroll wheel
rxjs.fromEvent($img.parentElement, "wheel").pipe( rxjs.fromEvent($img.parentElement, "wheel").pipe(
rxjs.tap((e) => e.preventDefault()), rxjs.tap((e) => e.preventDefault()),
rxjs.bufferTime(100), rxjs.map((event) => {
rxjs.filter((events) => events.length > 0), let scale = Math.exp(-event.deltaY / 300);
rxjs.map((events) => { if (scale > 1.07) scale = 1.07;
let out = null; else if (scale < 0.93) scale = 0.93;
for (let i=0; i<events.length; i++) { return {
const scale = Math.min(Math.exp(-events[i].deltaY / 300), 2); scale,
if (out === null) out = ({ scale, clientX: events[i].clientX, clientY: events[i].clientY }); clientX: event.clientX,
else if (Math.abs(scale) > Math.abs(out.scale)) out = ({ scale, clientX: events[i].clientX, clientY: events[i].clientY }); clientY: event.clientY,
} };
return out;
}), }),
), ),
// zoom via keyboard shortcut // zoom via keyboard shortcut