LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Refactor zooming code into "effects/use-zoom.js"

Browse source
This commit is contained in:
infiinte-persistence 2020-07-14 03:16:38 +08:00 committed by Sean Yesmunt
parent bc19503419
commit 2ea66f9d8d
3 changed files with 51 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Added
- Allow zooming on Desktop _community pr!_ ([#4513](https://github.com/lbryio/lbry-desktop/pull/4513))
### Changed
### Fixed
@ -26,7 +28,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- New channel create/edit page ([#4445](https://github.com/lbryio/lbry-desktop/pull/4445))
- Add dialog to copy various types of links for a claim _community pr!_ ([#4474](https://github.com/lbryio/lbry-desktop/pull/4474))
- Add password reset link to settings page for logged in users _community pr!_ ([#4473](https://github.com/lbryio/lbry-desktop/pull/4473))
- Allow zooming on Desktop _community pr!_ ([#4513](https://github.com/lbryio/lbry-desktop/pull/4513))
### Changed

45
ui/component/app/view.jsx
View file

@ -18,7 +18,7 @@ import REWARDS from 'rewards';
import usePersistedState from 'effects/use-persisted-state';
import FileDrop from 'component/fileDrop';
// @if TARGET='app'
import { changeZoomFactor, ZOOM } from 'util/zoomWindow';
import useZoom from 'effects/use-zoom';
// @endif
// @if TARGET='web'
import OpenInAppLink from 'web/component/openInAppLink';
@ -177,48 +177,7 @@ function App(props: Props) {
// Enable ctrl +/- zooming on Desktop.
// @if TARGET='app'
useEffect(() => {
const handleKeyPress = e => {
if (e.ctrlKey && !e.shiftKey) {
switch (e.code) {
case 'NumpadAdd':
case 'Equal':
e.preventDefault();
changeZoomFactor(ZOOM.INCREMENT);
break;
case 'NumpadSubtract':
case 'Minus':
e.preventDefault();
changeZoomFactor(ZOOM.DECREMENT);
break;
case 'Numpad0':
case 'Digit0':
e.preventDefault();
changeZoomFactor(ZOOM.RESET);
break;
default:
// Do nothing
break;
}
}
};
window.addEventListener('keydown', handleKeyPress);
return () => window.removeEventListener('keydown', handleKeyPress);
}, []);
useEffect(() => {
const handleWheel = e => {
if (e.ctrlKey && !e.shiftKey) {
if (e.deltaY < 0) {
changeZoomFactor(ZOOM.INCREMENT);
} else {
changeZoomFactor(ZOOM.DECREMENT);
}
}
};
window.addEventListener('wheel', handleWheel);
return () => window.removeEventListener('wheel', handleWheel);
}, []);
useZoom();
// @endif
useEffect(() => {

47
ui/effects/use-zoom.js Normal file
View file

@ -0,0 +1,47 @@
import { useEffect } from 'react';
import { changeZoomFactor, ZOOM } from 'util/zoomWindow';
export default function useHover(ref) {
useEffect(() => {
const handleKeyPress = e => {
if (e.ctrlKey && !e.shiftKey) {
switch (e.code) {
case 'NumpadAdd':
case 'Equal':
e.preventDefault();
changeZoomFactor(ZOOM.INCREMENT);
break;
case 'NumpadSubtract':
case 'Minus':
e.preventDefault();
changeZoomFactor(ZOOM.DECREMENT);
break;
case 'Numpad0':
case 'Digit0':
e.preventDefault();
changeZoomFactor(ZOOM.RESET);
break;
default:
// Do nothing
break;
}
}
};
window.addEventListener('keydown', handleKeyPress);
return () => window.removeEventListener('keydown', handleKeyPress);
}, []);
useEffect(() => {
const handleWheel = e => {
if (e.ctrlKey && !e.shiftKey) {
if (e.deltaY < 0) {
changeZoomFactor(ZOOM.INCREMENT);
} else {
changeZoomFactor(ZOOM.DECREMENT);
}
}
};
window.addEventListener('wheel', handleWheel);
return () => window.removeEventListener('wheel', handleWheel);
}, []);
}