mirror of
https://github.com/responsively-org/responsively-app
synced 2024-09-21 14:52:03 +00:00
feat: zoom using mousewheel
This commit is contained in:
parent
2c225eae38
commit
d988dacad7
4 changed files with 34 additions and 4 deletions
|
@ -54,11 +54,13 @@ const AppUpdaterStatusInfoSection = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const StatusBar = ({visible}) => {
|
||||
const StatusBar = ({visible, zoomLevel}) => {
|
||||
if (!visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const zoomPercent = Math.round(zoomLevel * 100)
|
||||
|
||||
return (
|
||||
<div className={styles.statusBar}>
|
||||
<div className={styles.section}>
|
||||
|
@ -105,7 +107,14 @@ const StatusBar = ({visible}) => {
|
|||
</div>
|
||||
</div>
|
||||
<AppUpdaterStatusInfoSection />
|
||||
<Announcement />
|
||||
<div className={styles.section}>
|
||||
<Announcement />
|
||||
{zoomPercent !== 100 && <>
|
||||
<div className={cx('roadMapLink', styles.statusText)}>
|
||||
{zoomPercent}%
|
||||
</div>
|
||||
</>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -13,6 +13,16 @@
|
|||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.statusText {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: grey;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
filter: grayscale(1);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
@ -79,10 +79,13 @@ export default class Root extends Component<Props> {
|
|||
|
||||
componentWillUnmount() {
|
||||
clearAllShortcuts();
|
||||
document.removeEventListener('wheel', this.onWheel);
|
||||
}
|
||||
|
||||
registerAllShortcuts = () => {
|
||||
const {store} = this.props;
|
||||
document.addEventListener('wheel', this.onWheel);
|
||||
|
||||
registerShortcut(
|
||||
{id: 'ZoomIn', title: 'Zoom In', accelerators: ['mod+=', 'mod+shift+=']},
|
||||
() => {
|
||||
|
@ -221,6 +224,13 @@ export default class Root extends Component<Props> {
|
|||
);
|
||||
};
|
||||
|
||||
onWheel = (e) => {
|
||||
if (e.ctrlKey) {
|
||||
const {store} = this.props
|
||||
store.dispatch(onZoomChange(store.getState().browser.zoomLevel + (e.deltaY < 0 ? 0.1 : -0.1)));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {store, history} = this.props;
|
||||
return (
|
||||
|
|
|
@ -8,7 +8,7 @@ import StatusBar from '../../components/StatusBar';
|
|||
import {toggleStatusBarVisibility as _toggleStatusBarVisibility} from '../../actions/statusBar';
|
||||
import {STATUS_BAR_VISIBILITY_CHANGE} from '../../constants/pubsubEvents';
|
||||
|
||||
const StatusBarContainer = ({visible, toggleStatusBarVisibility}) => {
|
||||
const StatusBarContainer = ({visible, zoomLevel, toggleStatusBarVisibility}) => {
|
||||
useEffect(() => {
|
||||
const handler = () => {
|
||||
toggleStatusBarVisibility();
|
||||
|
@ -20,12 +20,13 @@ const StatusBarContainer = ({visible, toggleStatusBarVisibility}) => {
|
|||
ipcRenderer.removeListener(STATUS_BAR_VISIBILITY_CHANGE, handler);
|
||||
}, []);
|
||||
|
||||
return <StatusBar visible={visible} />;
|
||||
return <StatusBar visible={visible} zoomLevel={zoomLevel}/>;
|
||||
};
|
||||
|
||||
function mapStateToProps(state) {
|
||||
return {
|
||||
visible: state.statusBar.visible,
|
||||
zoomLevel: state.browser.zoomLevel
|
||||
};
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue