Zoom/scale setting

src/components/structures/LoggedInView.js

@@ -75,12 +75,14 @@ export default React.createClass({
         return {
             // use compact timeline view
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
+            interfaceScale: SettingsStore.getValue('interfaceScale'),
         };
     },
 
     componentWillMount: function() {
         // stash the MatrixClient in case we log out before we are unmounted
         this._matrixClient = this.props.matrixClient;
+        this.dispatcherRef = dis.register(this.onAction);
 
         CallMediaHandler.loadDevices();
 
@@ -96,6 +98,7 @@ export default React.createClass({
     },
 
     componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
         document.removeEventListener('keydown', this._onKeyDown);
         this._matrixClient.removeListener("accountData", this.onAccountData);
         if (this._sessionStoreToken) {
@@ -126,6 +129,14 @@ export default React.createClass({
         });
     },
 
+    onAction(payload) {
+        if (payload.action === 'set_scale') {
+            this.setState({
+                interfaceScale: payload.value,
+            });
+        }
+    },
+
     onAccountData: function(event) {
         if (event.getType() === "im.vector.web.settings") {
             this.setState({
@@ -326,7 +337,7 @@ export default React.createClass({
         }
 
         return (
-            <div className='mx_MatrixChat_wrapper'>
+            <div className='mx_MatrixChat_wrapper' style={{zoom: this.state.interfaceScale + '%'}}>
                 { topBar }
                 <div className={bodyClasses}>
                     { SettingsStore.isFeatureEnabled("feature_tag_panel") ? <TagPanel /> : <div /> }

src/components/structures/UserSettings.js

@@ -26,6 +26,7 @@ const Modal = require('../../Modal');
 const dis = require("../../dispatcher");
 import sessionStore from '../../stores/SessionStore';
 import Promise from 'bluebird';
+import _debounce from 'lodash/debounce';
 const packageJson = require('../../../package.json');
 const UserSettingsStore = require('../../UserSettingsStore');
 const CallMediaHandler = require('../../CallMediaHandler');
@@ -228,6 +229,7 @@ module.exports = React.createClass({
 
         this.setState({
             language: languageHandler.getCurrentLanguage(),
+            interfaceScale: SettingsStore.getValue("interfaceScale"),
         });
 
         this._sessionStore = sessionStore;
@@ -239,6 +241,9 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
+        this._debouncedDispatchScaleChange = _debounce((newInterfaceScale) => {
+            dis.dispatch({action: 'set_scale', value: newInterfaceScale});
+        }, 2000);
         this._me = MatrixClientPeg.get().credentials.userId;
     },
 
@@ -631,6 +636,17 @@ module.exports = React.createClass({
         }
     },
 
+    onInterfaceScaleChange: function(newInterfaceScale) {
+        newInterfaceScale = parseInt(newInterfaceScale);
+        if (this.state.interfaceScale !== newInterfaceScale) {
+            SettingsStore.setValue("interfaceScale", null, SettingLevel.DEVICE, newInterfaceScale);
+            this.setState({
+                interfaceScale: newInterfaceScale,
+            });
+            this._debouncedDispatchScaleChange(newInterfaceScale);
+        }
+    },
+
     _renderLanguageSetting: function() {
         const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
         return <div>
@@ -642,6 +658,16 @@ module.exports = React.createClass({
         </div>;
     },
 
+    _renderInterfaceScaleSetting: function() {
+        const InterfaceScaleSlider = sdk.getComponent('views.elements.InterfaceScaleSlider');
+        return <div>
+            <label htmlFor="interfaceScaleSelector">{ _t('Interface Scale') }</label>
+            <InterfaceScaleSlider ref="interfaceScaleSelector" onValueChange={this.onInterfaceScaleChange}
+                          value={this.state.interfaceScale}
+            />
+        </div>;
+    },
+
     _renderUserInterfaceSettings: function() {
         // TODO: this ought to be a separate component so that we don't need
         // to rebind the onChange each time we render
@@ -668,6 +694,7 @@ module.exports = React.createClass({
                         </tbody>
                     </table>
                     { this._renderLanguageSetting() }
+                    { this._renderInterfaceScaleSetting() }
                 </div>
             </div>
         );

src/components/views/elements/InterfaceScaleSlider.js

@@ -0,0 +1,50 @@
+/*
+Copyright 2017 Marcel Radzio (MTRNord)
+Copyright 2017 Vector Creations Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import SettingsStore from "../../../settings/SettingsStore";
+
+export default class InterfaceScaleSlider extends React.Component {
+    constructor(props) {
+        super(props);
+        this._onValueChange = this._onValueChange.bind(this);
+    }
+
+    componentWillMount() {
+    }
+
+    _onValueChange(e) {
+        this.props.onValueChange(parseInt(e.target.value));
+    }
+
+    render() {
+        const interfaceScale = SettingsStore.getValue("interfaceScale", null, /*excludeDefault:*/true);
+        const value = this.props.value || interfaceScale;
+        return <div className={this.props.className}>
+            <input type="range" min="70" max="150" step="10" className={this.props.className + "_input"}
+            onChange={this._onValueChange} value={value} />
+            <div className={this.props.className + "_label"}>{ value }%</div>
+        </div>;
+    }
+}
+
+InterfaceScaleSlider.propTypes = {
+    className: React.PropTypes.string,
+    onValueChange: React.PropTypes.func.isRequired,
+    value: React.PropTypes.number,
+};

src/i18n/strings/en_EN.json

@@ -803,6 +803,7 @@
     "Unable to remove contact information": "Unable to remove contact information",
     "Refer a friend to Riot:": "Refer a friend to Riot:",
     "Interface Language": "Interface Language",
+    "Interface Scale": "Interface Scale",
     "User Interface": "User Interface",
     "Autocomplete Delay (ms):": "Autocomplete Delay (ms):",
     "<not supported>": "<not supported>",

src/i18n/strings/en_US.json

@@ -186,6 +186,7 @@
     "Incorrect username and/or password.": "Incorrect username and/or password.",
     "Incorrect verification code": "Incorrect verification code",
     "Interface Language": "Interface Language",
+    "Interface Scale": "Interface Scale",
     "Invalid alias format": "Invalid alias format",
     "Invalid address format": "Invalid address format",
     "Invalid Email Address": "Invalid Email Address",

src/settings/Settings.js

@@ -203,6 +203,10 @@ export const SETTINGS = {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
         default: "en",
     },
+    "interfaceScale": {
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
+        default: 100,
+    },
     "analyticsOptOut": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
         displayName: _td('Opt out of analytics'),