Zoom/scale setting

src/components/structures/LoggedInView.js

@@ -75,6 +75,7 @@ export default React.createClass({
         return {
             // use compact timeline view
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
+            interfaceScale: SettingsStore.getValue('interfaceScale')
         };
     },
 
@@ -326,7 +327,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

@@ -228,6 +228,7 @@ module.exports = React.createClass({
 
         this.setState({
             language: languageHandler.getCurrentLanguage(),
+            interfaceScale: SettingsStore.getValue("interfaceScale")
         });
 
         this._sessionStore = sessionStore;
@@ -631,6 +632,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,
+            });
+            PlatformPeg.get().reload();
+        }
+    },
+
     _renderLanguageSetting: function() {
         const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
         return <div>
@@ -642,6 +654,17 @@ 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}
+                          className="mx_UserSettings_scale"
+                          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 +691,7 @@ module.exports = React.createClass({
                         </tbody>
                     </table>
                     { this._renderLanguageSetting() }
+                    { this._renderInterfaceScaleSetting() }
                 </div>
             </div>
         );

src/components/views/elements/InterfaceScaleSlider.js

@@ -0,0 +1,51 @@
+/*
+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 sdk from '../../../index';
+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() {
+        let interfaceScale = SettingsStore.getValue("interfaceScale", null, /*excludeDefault:*/true);
+        let value = this.props.value || interfaceScale;
+        return <div>
+                <input type="range" min="50" max="150" step="25" className={this.props.className}
+                onChange={this._onValueChange} value={value} />
+                {value}%
+            </div>
+    }
+}
+
+InterfaceScaleSlider.propTypes = {
+    className: React.PropTypes.string,
+    onValueChange: React.PropTypes.func.isRequired,
+    value: React.PropTypes.number,
+};

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'),