Merge pull request #905 from jian10au/scaleslider

Zoom factor slider

_locales/en/messages.json

@@ -1474,6 +1474,10 @@
       "Warning! Lowering the TTL could result in messages being lost if the recipient doesn't collect them in time!",
     "description": "Warning for the time to live setting"
   },
+  "zoomFactorSettingTitle": {
+    "message": "Zoom Factor",
+    "description": "Title of the Zoom Factor setting"
+  },
   "notificationSettingsDialog": {
     "message": "When messages arrive, display notifications that reveal...",
     "description": "Explain the purpose of the notification settings"

js/background.js

@@ -286,6 +286,9 @@
     }
     first = false;
 
+    // Update zoom
+    window.updateZoomFactor();
+
     const currentPoWDifficulty = storage.get('PoWDifficulty', null);
     if (!currentPoWDifficulty) {
       storage.put('PoWDifficulty', window.getDefaultPoWDifficulty());

main.js

@@ -1026,6 +1026,7 @@ ipc.on('password-window-login', async (event, passPhrase) => {
     const passwordAttempt = true;
     await showMainWindow(passPhrase, passwordAttempt);
     sendResponse();
+
     if (passwordWindow) {
       passwordWindow.close();
       passwordWindow = null;

preload.js

@@ -2,6 +2,8 @@
 /* global window: false */
 const path = require('path');
 const electron = require('electron');
+
+const { webFrame } = electron;
 const semver = require('semver');
 
 const { deferredToPromise } = require('./js/modules/deferred_to_promise');
@@ -85,6 +87,19 @@ window.wrapDeferred = deferredToPromise;
 const ipc = electron.ipcRenderer;
 const localeMessages = ipc.sendSync('locale-data');
 
+window.updateZoomFactor = () => {
+  const zoomFactor = window.getSettingValue('zoom-factor-setting') || 100;
+  window.setZoomFactor(zoomFactor / 100);
+};
+
+window.setZoomFactor = number => {
+  webFrame.setZoomFactor(number);
+};
+
+window.getZoomFactor = () => {
+  webFrame.getZoomFactor();
+};
+
 window.setBadgeCount = count => ipc.send('set-badge-count', count);
 
 // Set the password for the database
@@ -218,6 +233,10 @@ window.getSettingValue = (settingID, comparisonValue = null) => {
 
 window.setSettingValue = (settingID, value) => {
   window.storage.put(settingID, value);
+
+  if (settingID === 'zoom-factor-setting') {
+    window.updateZoomFactor();
+  }
 };
 
 installGetter('device-name', 'getDeviceName');

ts/components/session/settings/SessionSettingListItem.tsx

@@ -40,7 +40,6 @@ export class SessionSettingListItem extends React.Component<Props, State> {
 
   public render(): JSX.Element {
     const { title, description, type, value, content } = this.props;
-
     const inline =
       !!type &&
       ![SessionSettingType.Options, SessionSettingType.Slider].includes(type);
@@ -92,16 +91,17 @@ export class SessionSettingListItem extends React.Component<Props, State> {
             <div className="slider-wrapper">
               <Slider
                 dots={true}
-                step={6}
+                step={content.step}
-                min={12}
+                min={content.min}
-                max={96}
+                max={content.max}
                 defaultValue={currentSliderValue}
                 onChange={sliderValue => {
                   this.handleSlider(sliderValue);
                 }}
               />
+
               <div className="slider-info">
-                <p>{`${currentSliderValue} Hours`}</p>
+                <p>{content.info(currentSliderValue)}</p>
               </div>
             </div>
           )}

ts/components/session/settings/SessionSettings.tsx

@@ -231,6 +231,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
           showLinkDeviceButton={!shouldRenderPasswordLock}
           category={category}
         />
+
         <div className="session-settings-view">
           {shouldRenderPasswordLock ? (
             this.renderPasswordLock()
@@ -440,7 +441,32 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         comparisonValue: undefined,
         onClick: undefined,
         content: {
+          dotsEnabled: true,
+          step: 6,
+          min: 12,
+          max: 96,
           defaultValue: 24,
+          info: (value: number) => `${value} Hours`,
+        },
+        confirmationDialogParams: undefined,
+      },
+      {
+        id: 'zoom-factor-setting',
+        title: window.i18n('zoomFactorSettingTitle'),
+        description: undefined,
+        hidden: false,
+        type: SessionSettingType.Slider,
+        category: SessionSettingCategory.Appearance,
+        setFn: undefined,
+        comparisonValue: undefined,
+        onClick: undefined,
+        content: {
+          dotsEnabled: true,
+          step: 20,
+          min: 60,
+          max: 200,
+          defaultValue: 100,
+          info: (value: number) => `${value}%`,
         },
         confirmationDialogParams: undefined,
       },