From d988dacad74c408a07fdf835471d283e5657bad8 Mon Sep 17 00:00:00 2001
From: Jonathan Boyer <boyer.jonathan@gmail.com>
Date: Mon, 6 Jul 2020 12:17:37 +0200
Subject: [PATCH] feat: zoom using mousewheel

---
 desktop-app/app/components/StatusBar/index.js       | 13 +++++++++++--
 .../app/components/StatusBar/styles.module.css      | 10 ++++++++++
 desktop-app/app/containers/Root.js                  | 10 ++++++++++
 .../app/containers/StatusBarContainer/index.js      |  5 +++--
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/desktop-app/app/components/StatusBar/index.js b/desktop-app/app/components/StatusBar/index.js
index 2cc155c0..c6f58142 100644
--- a/desktop-app/app/components/StatusBar/index.js
+++ b/desktop-app/app/components/StatusBar/index.js
@@ -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>
   );
 };
diff --git a/desktop-app/app/components/StatusBar/styles.module.css b/desktop-app/app/components/StatusBar/styles.module.css
index 7e88f725..143cf615 100644
--- a/desktop-app/app/components/StatusBar/styles.module.css
+++ b/desktop-app/app/components/StatusBar/styles.module.css
@@ -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;
diff --git a/desktop-app/app/containers/Root.js b/desktop-app/app/containers/Root.js
index c3c36e0a..a46c6dc5 100644
--- a/desktop-app/app/containers/Root.js
+++ b/desktop-app/app/containers/Root.js
@@ -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 (
diff --git a/desktop-app/app/containers/StatusBarContainer/index.js b/desktop-app/app/containers/StatusBarContainer/index.js
index 472624a0..a6d1dba8 100644
--- a/desktop-app/app/containers/StatusBarContainer/index.js
+++ b/desktop-app/app/containers/StatusBarContainer/index.js
@@ -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
   };
 }