Add zoom dialog (#436)

* Add magnify icons

* Add dialog and toolbarButton

(Currently not doing anything)

* Make dialog actually render

* Make dialog actually do something

* Fix some mistakes

src/main/dialogs/index.ts

@@ -11,3 +11,4 @@ export * from './downloads';
 export * from './tabgroup';
 export * from './add-bookmark';
 export * from './extension-popup';
+export * from './zoom';

src/main/dialogs/zoom.ts

@@ -0,0 +1,34 @@
+import { AppWindow } from '../windows';
+import { Dialog } from '.';
+import { DIALOG_MARGIN, DIALOG_MARGIN_TOP } from '~/constants/design';
+
+const WIDTH = 280;
+
+export class ZoomDialog extends Dialog {
+  public visible = false;
+
+  public left = 0;
+  public top = 0;
+
+  constructor(appWindow: AppWindow) {
+    super(appWindow, {
+      name: 'zoom',
+      bounds: {
+        width: WIDTH,
+        height: 100,
+      },
+    });
+  }
+
+  public rearrange() {
+    super.rearrange({
+      x: Math.round(this.left - WIDTH + DIALOG_MARGIN),
+      y: Math.round(this.top - DIALOG_MARGIN_TOP),
+    });
+  }
+
+  public async show() {
+    await super.show();
+    this.send('visible', true);
+  }
+}

src/main/services/messaging.ts

@@ -94,6 +94,12 @@ export const runMessagingService = (appWindow: AppWindow) => {
     appWindow.dialogs.addBookmarkDialog.show();
   });
 
+  ipcMain.on(`show-zoom-dialog-${id}`, (e, left, top) => {
+    appWindow.dialogs.zoomDialog.left = left;
+    appWindow.dialogs.zoomDialog.top = top;
+    appWindow.dialogs.zoomDialog.show();
+  });
+
   ipcMain.on(`edit-tabgroup-${id}`, (e, tabGroup) => {
     appWindow.send(`edit-tabgroup`, tabGroup);
   });

src/main/view-manager.ts

@@ -1,10 +1,16 @@
-import { ipcMain } from 'electron';
+import { ipcMain, remote, webContents } from 'electron';
 import { VIEW_Y_OFFSET } from '~/constants/design';
 import { View } from './view';
 import { AppWindow } from './windows';
 import { WEBUI_BASE_URL } from '~/constants/files';
 import { Application } from './application';
 
+import {
+  ZOOM_FACTOR_MIN,
+  ZOOM_FACTOR_MAX,
+  ZOOM_FACTOR_INCREMENT,
+} from '~/constants/web-contents';
+
 export class ViewManager {
   public views = new Map<number, View>();
   public selectedId = 0;
@@ -14,6 +20,8 @@ export class ViewManager {
 
   private window: AppWindow;
 
+  private zoomUpdateSubscribers: Electron.WebContents[] = [];
+
   public get fullscreen() {
     return this._fullscreen;
   }
@@ -67,6 +75,36 @@ export class ViewManager {
     ipcMain.on(`browserview-clear-${id}`, () => {
       this.clear();
     });
+
+    ipcMain.on('subscribe-zoom-factor-updates', (e) => {
+      e.reply('send-zoom-factor', this.selected.webContents.zoomFactor);
+      this.zoomUpdateSubscribers.push(e.sender);
+    });
+
+    ipcMain.on('change-zoom', (e, zoomDirection) => {
+      const newZoomFactor =
+      this.selected.webContents.zoomFactor +
+      (zoomDirection === 'in'
+        ? ZOOM_FACTOR_INCREMENT
+        : -ZOOM_FACTOR_INCREMENT);
+
+      if (
+        newZoomFactor <= ZOOM_FACTOR_MAX &&
+        newZoomFactor >= ZOOM_FACTOR_MIN
+      ) {
+        this.selected.webContents.zoomFactor = newZoomFactor;
+        this.selected.emitEvent('zoom-updated', this.selected.webContents.zoomFactor);
+      } else {
+        e.preventDefault();
+      }
+      this.emitZoomUpdate();
+    });
+
+    ipcMain.on('reset-zoom', (e) => {
+      this.selected.webContents.zoomFactor = 1;
+      this.selected.emitEvent('zoom-updated', this.selected.webContents.zoomFactor);
+      this.emitZoomUpdate();
+    });
   }
 
   public get selected() {
@@ -159,6 +197,8 @@ export class ViewManager {
     this.fixBounds();
 
     view.updateNavigationState();
+
+    this.emitZoomUpdate();
   }
 
   public fixBounds() {
@@ -189,4 +229,9 @@ export class ViewManager {
       view.destroy();
     }
   }
+
+  public emitZoomUpdate() {
+    this.zoomUpdateSubscribers.forEach( e => e.send('zoom-factor-updated', this.selected.webContents.zoomFactor) );
+    this.window.webContents.send('zoom-factor-updated', this.selected.webContents.zoomFactor);
+  }
 }

src/main/view.ts

@@ -204,6 +204,7 @@ export class View {
       ) {
         this.webContents.zoomFactor = newZoomFactor;
         this.emitEvent('zoom-updated', this.webContents.zoomFactor);
+        window.viewManager.emitZoomUpdate();
       } else {
         e.preventDefault();
       }

src/main/windows/app.ts

@@ -17,6 +17,7 @@ import {
   TabGroupDialog,
   DownloadsDialog,
   AddBookmarkDialog,
+  ZoomDialog,
   Dialog,
   ExtensionPopup,
 } from '../dialogs';
@@ -32,6 +33,7 @@ interface IDialogs {
   findDialog?: FindDialog;
   downloadsDialog?: DownloadsDialog;
   addBookmarkDialog?: AddBookmarkDialog;
+  zoomDialog?: ZoomDialog;
 
   permissionsDialog?: PermissionsDialog;
   authDialog?: AuthDialog;
@@ -88,6 +90,7 @@ export class AppWindow {
       this.dialogs.findDialog = new FindDialog(this);
       this.dialogs.downloadsDialog = new DownloadsDialog(this);
       this.dialogs.addBookmarkDialog = new AddBookmarkDialog(this);
+      this.dialogs.zoomDialog = new ZoomDialog(this);
 
       this.dialogs.permissionsDialog = new PermissionsDialog(this);
       this.dialogs.authDialog = new AuthDialog(this);

src/renderer/constants/icons.ts

@@ -49,6 +49,8 @@ export const ICON_DASHBOARD = require('~/renderer/resources/icons/dashboard.svg'
 export const ICON_CHECK = require('~/renderer/resources/icons/check.svg');
 export const ICON_TOPMOST = require('~/renderer/resources/icons/top-most.svg');
 export const ICON_TUNE = require('~/renderer/resources/icons/tune.svg');
+export const ICON_MAGNIFY_PLUS = require('~/renderer/resources/icons/magnify-plus.svg');
+export const ICON_MAGNIFY_MINUS = require('~/renderer/resources/icons/magnify-minus.svg');
 
 export const ICON_WEATHER_DAY_CLEAR = require('~/renderer/resources/icons/weather/day/clear.png');
 export const ICON_WEATHER_DAY_FEW_CLOUDS = require('~/renderer/resources/icons/weather/day/few-clouds.png');

src/renderer/views/app/components/Toolbar/index.tsx

@@ -26,6 +26,8 @@ import {
   ICON_MORE,
   ICON_SEARCH,
   ICON_DASHBOARD,
+  ICON_MAGNIFY_PLUS,
+  ICON_MAGNIFY_MINUS,
 } from '~/renderer/constants/icons';
 import { isDialogVisible } from '../../utils/dialogs';
 import { isURL } from '~/utils';
@@ -53,6 +55,7 @@ const onKeyClick = () => {
 
 let starRef: HTMLDivElement = null;
 let menuRef: HTMLDivElement = null;
+let zoomRef: HTMLDivElement = null;
 
 const showAddBookmarkDialog = async () => {
   if (!(await isDialogVisible('addBookmarkDialog'))) {
@@ -65,6 +68,17 @@ const showAddBookmarkDialog = async () => {
   }
 };
 
+const showZoomDialog = async () => {
+  if (!(await isDialogVisible('zoomDialog')) && store.zoomFactor != 1) {
+    const { right, bottom } = zoomRef.getBoundingClientRect();
+    ipcRenderer.send(
+      `show-zoom-dialog-${store.windowId}`,
+      right,
+      bottom,
+    );
+  }
+};
+
 const showMenuDialog = async () => {
   if (!(await isDialogVisible('menuDialog'))) {
     const { right, bottom } = menuRef.getBoundingClientRect();
@@ -76,14 +90,29 @@ ipcRenderer.on('show-add-bookmark-dialog', () => {
   showAddBookmarkDialog();
 });
 
+ipcRenderer.on('show-zoom-dialog', () => {
+  showZoomDialog();
+});
+
 ipcRenderer.on('show-menu-dialog', () => {
   showMenuDialog();
 });
 
+ipcRenderer.on('zoom-factor-updated', (e, zoomFactor) => {
+  store.zoomFactor = zoomFactor;
+  if(!store.dialogsVisibility['zoom']) {
+    showZoomDialog();
+  }
+});
+
 const onStarClick = (e: React.MouseEvent<HTMLDivElement>) => {
   showAddBookmarkDialog();
 };
 
+const onZoomClick = (e: React.MouseEvent<HTMLDivElement>) => {
+  showZoomDialog();
+};
+
 const onMenuClick = async () => {
   showMenuDialog();
 };
@@ -321,6 +350,16 @@ export const Toolbar = observer(() => {
         {hasCredentials && (
           <ToolbarButton icon={ICON_KEY} size={16} onClick={onKeyClick} />
         )}
+        {store.zoomFactor != 1 && (
+          <ToolbarButton
+            divRef={(r) => (zoomRef = r)}
+            toggled={store.dialogsVisibility['zoom']}
+            icon={store.zoomFactor > 1 ? ICON_MAGNIFY_PLUS : ICON_MAGNIFY_MINUS}
+            size={18}
+            dense
+            onMouseDown={onZoomClick}
+          />
+        )}
         <ToolbarButton
           divRef={(r) => (starRef = r)}
           toggled={store.dialogsVisibility['add-bookmark']}

src/renderer/views/app/store/index.ts

@@ -137,10 +137,14 @@ export class Store {
   @observable
   public isBookmarked = false;
 
+  @observable
+  public zoomFactor = 1;
+
   @observable
   public dialogsVisibility: { [key: string]: boolean } = {
     menu: false,
     'add-bookmark': false,
+    'zoom': false,
     'extension-popup': false,
     'downloads-dialog': false,
   };

src/renderer/views/zoom/components/App/index.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ThemeProvider } from 'styled-components';
+import { hot } from 'react-hot-loader/root';
+
+import { StyledApp, Label, Buttons, Spacer } from './style';
+import { ToolbarButton } from '../../../app/components/ToolbarButton';
+import store from '../../store';
+import { Button } from '~/renderer/components/Button';
+import { ipcRenderer } from 'electron';
+import { UIStyle } from '~/renderer/mixins/default-styles';
+
+import {
+  ICON_UP,
+  ICON_DOWN,
+} from '~/renderer/constants/icons';
+
+const onPlus = () => {
+  ipcRenderer.send('change-zoom', 'in');
+};
+
+const onMinus = () => {
+  ipcRenderer.send('change-zoom', 'out');
+};
+
+const onReset = () => {
+  ipcRenderer.send('reset-zoom');
+};
+
+ipcRenderer.on('zoom-factor-updated', (e, zoomFactor) => {
+  store.zoomFactor = zoomFactor;
+});
+
+export const App = hot(
+  observer(() => {
+    return (
+      <ThemeProvider theme={{ ...store.theme }}>
+        <StyledApp visible={store.visible} onMouseEnter={() => store.stopHideTimer()} onMouseLeave={() => store.resetHideTimer()}>
+          <UIStyle />
+          <Buttons>
+            <ToolbarButton
+              toggled={false}
+              icon={ICON_UP}
+              size={18}
+              dense
+              iconStyle={{ transform: 'scale(-1,1)' }}
+              onClick={onPlus}
+            />
+            <Label>{(store.zoomFactor * 100).toFixed(0) + "%"}</Label>
+            <ToolbarButton
+              toggled={false}
+              icon={ICON_DOWN}
+              size={18}
+              dense
+              iconStyle={{ transform: 'scale(-1,1)' }}
+              onClick={onMinus}
+            />
+            <Spacer />
+            <Button
+              onClick={onReset}
+              background={
+                store.theme['dialog.lightForeground']
+                  ? 'rgba(255, 255, 255, 0.08)'
+                  : 'rgba(0, 0, 0, 0.08)'
+              }
+              foreground={
+                store.theme['dialog.lightForeground'] ? 'white' : 'black'
+              }
+            >
+              Reset
+            </Button>
+          </Buttons>
+        </StyledApp>
+      </ThemeProvider>
+    );
+  }),
+);

src/renderer/views/zoom/components/App/style.ts

@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components';
+
+import { ITheme } from '~/interfaces';
+import { DialogStyle } from '~/renderer/mixins/dialogs';
+
+export const StyledApp = styled(DialogStyle)`
+  padding: 16px;
+
+  ${({ theme }: { theme?: ITheme; visible: boolean }) => css`
+    color: ${theme['dialog.lightForeground'] ? '#fff' : '#000'};
+  `}
+`;
+
+export const Label = styled.div`
+  font-size: 16px;
+  min-width: 45px;
+  text-align: center;
+`;
+
+export const Spacer = styled.div`
+  flex-grow: 1;
+`;
+
+export const Buttons = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  & .button:not(:last-child) {
+    margin-right: 8px;
+  }
+`;
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100%;
+`;

src/renderer/views/zoom/index.tsx

@@ -0,0 +1,3 @@
+import { App } from './components/App';
+import { renderUI } from '~/utils/ui-entry';
+renderUI(App);