From c1c29447c8219f7f866fe5c2e6a11fa90e07f1fc Mon Sep 17 00:00:00 2001 From: Mo Date: Tue, 5 Dec 2017 23:07:27 +0000 Subject: [PATCH 01/15] Zoom/scale setting: Initial --- src/components/structures/LoggedInView.js | 3 +- src/components/structures/UserSettings.js | 24 +++++++++ .../views/elements/InterfaceScaleSlider.js | 51 +++++++++++++++++++ src/settings/Settings.js | 4 ++ 4 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 src/components/views/elements/InterfaceScaleSlider.js diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 01abf966f9f..8fcbfe0aa4a 100644 --- a/src/components/structures/LoggedInView.js +++ b/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 ( -
+
{ topBar }
{ SettingsStore.isFeatureEnabled("feature_tag_panel") ? :
} diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index 09844c3d63f..0e1ab760fa9 100644 --- a/src/components/structures/UserSettings.js +++ b/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
@@ -642,6 +654,17 @@ module.exports = React.createClass({
; }, + _renderInterfaceScaleSetting: function() { + const InterfaceScaleSlider = sdk.getComponent('views.elements.InterfaceScaleSlider'); + return
+ + +
; + }, + _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({ { this._renderLanguageSetting() } + { this._renderInterfaceScaleSetting() }
); diff --git a/src/components/views/elements/InterfaceScaleSlider.js b/src/components/views/elements/InterfaceScaleSlider.js new file mode 100644 index 00000000000..46c06793019 --- /dev/null +++ b/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
+ + {value}% +
+ } +} + +InterfaceScaleSlider.propTypes = { + className: React.PropTypes.string, + onValueChange: React.PropTypes.func.isRequired, + value: React.PropTypes.number, +}; diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 07de17ccfdc..a8e9937a7e6 100644 --- a/src/settings/Settings.js +++ b/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'), From af864159f4a86ba475af71a6a5bb38e415c6a5b4 Mon Sep 17 00:00:00 2001 From: Mo Date: Thu, 7 Dec 2017 23:21:19 +0000 Subject: [PATCH 02/15] Scale setting: Delayed update without reload --- src/components/structures/LoggedInView.js | 10 ++++++++++ src/components/structures/UserSettings.js | 6 +++++- src/components/views/elements/InterfaceScaleSlider.js | 2 +- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 8fcbfe0aa4a..c4fb10cdc0f 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -82,6 +82,7 @@ export default React.createClass({ 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(); @@ -97,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) { @@ -127,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({ diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index 0e1ab760fa9..f705c9ce11e 100644 --- a/src/components/structures/UserSettings.js +++ b/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'); @@ -240,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; }, @@ -639,7 +643,7 @@ module.exports = React.createClass({ this.setState({ interfaceScale: newInterfaceScale, }); - PlatformPeg.get().reload(); + this._debouncedDispatchScaleChange(newInterfaceScale); } }, diff --git a/src/components/views/elements/InterfaceScaleSlider.js b/src/components/views/elements/InterfaceScaleSlider.js index 46c06793019..6b059b8a3c8 100644 --- a/src/components/views/elements/InterfaceScaleSlider.js +++ b/src/components/views/elements/InterfaceScaleSlider.js @@ -37,7 +37,7 @@ export default class InterfaceScaleSlider extends React.Component { let interfaceScale = SettingsStore.getValue("interfaceScale", null, /*excludeDefault:*/true); let value = this.props.value || interfaceScale; return
- {value}%
From 834b03e5ee44ed510ec5a4f452a3076dabd45c4d Mon Sep 17 00:00:00 2001 From: Mo Date: Thu, 7 Dec 2017 23:24:30 +0000 Subject: [PATCH 03/15] Scale setting: english string --- src/i18n/strings/en_EN.json | 1 + src/i18n/strings/en_US.json | 1 + 2 files changed, 2 insertions(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index d632692e046..e8fa113a1dc 100644 --- a/src/i18n/strings/en_EN.json +++ b/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):", "": "", diff --git a/src/i18n/strings/en_US.json b/src/i18n/strings/en_US.json index 3783a42ddcc..2aae0c237c7 100644 --- a/src/i18n/strings/en_US.json +++ b/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", From 23a38e6d0d4206c4d96aba2df5c4e36ec228d98a Mon Sep 17 00:00:00 2001 From: Mo Date: Fri, 8 Dec 2017 01:21:35 +0000 Subject: [PATCH 04/15] Scale setting: interface cleanup --- src/components/structures/LoggedInView.js | 6 +++--- src/components/structures/UserSettings.js | 3 +-- .../views/elements/InterfaceScaleSlider.js | 15 +++++++-------- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index c4fb10cdc0f..6ba6cdf985f 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -75,7 +75,7 @@ export default React.createClass({ return { // use compact timeline view useCompactLayout: SettingsStore.getValue('useCompactLayout'), - interfaceScale: SettingsStore.getValue('interfaceScale') + interfaceScale: SettingsStore.getValue('interfaceScale'), }; }, @@ -130,9 +130,9 @@ export default React.createClass({ }, onAction(payload) { - if(payload.action === 'set_scale') { + if (payload.action === 'set_scale') { this.setState({ - interfaceScale: payload.value + interfaceScale: payload.value, }); } }, diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index f705c9ce11e..ee951651f3e 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -229,7 +229,7 @@ module.exports = React.createClass({ this.setState({ language: languageHandler.getCurrentLanguage(), - interfaceScale: SettingsStore.getValue("interfaceScale") + interfaceScale: SettingsStore.getValue("interfaceScale"), }); this._sessionStore = sessionStore; @@ -663,7 +663,6 @@ module.exports = React.createClass({ return
; diff --git a/src/components/views/elements/InterfaceScaleSlider.js b/src/components/views/elements/InterfaceScaleSlider.js index 6b059b8a3c8..bdeccd2af2a 100644 --- a/src/components/views/elements/InterfaceScaleSlider.js +++ b/src/components/views/elements/InterfaceScaleSlider.js @@ -17,7 +17,6 @@ limitations under the License. import React from 'react'; -import sdk from '../../../index'; import SettingsStore from "../../../settings/SettingsStore"; export default class InterfaceScaleSlider extends React.Component { @@ -34,13 +33,13 @@ export default class InterfaceScaleSlider extends React.Component { } render() { - let interfaceScale = SettingsStore.getValue("interfaceScale", null, /*excludeDefault:*/true); - let value = this.props.value || interfaceScale; - return
- - {value}% -
+ const interfaceScale = SettingsStore.getValue("interfaceScale", null, /*excludeDefault:*/true); + const value = this.props.value || interfaceScale; + return
+ +
{ value }%
+
; } } From c37817ed987e1db531859bd0532909de2b72fafb Mon Sep 17 00:00:00 2001 From: Mo Date: Mon, 18 Dec 2017 21:08:17 +0000 Subject: [PATCH 05/15] Scale setting: code review cleanup --- .../views/elements/InterfaceScaleSlider.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/views/elements/InterfaceScaleSlider.js b/src/components/views/elements/InterfaceScaleSlider.js index bdeccd2af2a..b37e39a5d26 100644 --- a/src/components/views/elements/InterfaceScaleSlider.js +++ b/src/components/views/elements/InterfaceScaleSlider.js @@ -20,20 +20,23 @@ import React from 'react'; import SettingsStore from "../../../settings/SettingsStore"; export default class InterfaceScaleSlider extends React.Component { + propTypes = { + className: React.PropTypes.string, + onValueChange: React.PropTypes.func.isRequired, + value: React.PropTypes.number, + }; + 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 interfaceScale = SettingsStore.getValue("interfaceScale", null, true); const value = this.props.value || interfaceScale; return
; } } - -InterfaceScaleSlider.propTypes = { - className: React.PropTypes.string, - onValueChange: React.PropTypes.func.isRequired, - value: React.PropTypes.number, -}; From cd8eba784f992d2b0e6c004e4323c42f9fc6443d Mon Sep 17 00:00:00 2001 From: Mo Date: Mon, 18 Dec 2017 21:38:44 +0000 Subject: [PATCH 06/15] Scale setting: update copyright --- src/components/views/elements/InterfaceScaleSlider.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/views/elements/InterfaceScaleSlider.js b/src/components/views/elements/InterfaceScaleSlider.js index b37e39a5d26..1aa4f4d3d28 100644 --- a/src/components/views/elements/InterfaceScaleSlider.js +++ b/src/components/views/elements/InterfaceScaleSlider.js @@ -1,6 +1,5 @@ /* -Copyright 2017 Marcel Radzio (MTRNord) -Copyright 2017 Vector Creations Ltd. +Copyright 2017 Mohammad Nokhbatolfoghahai (monokh) Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. From 0421f9af0db2058bf753db4229c7f920a6192a31 Mon Sep 17 00:00:00 2001 From: Mo Date: Mon, 18 Dec 2017 21:39:08 +0000 Subject: [PATCH 07/15] Scale setting: import proptypes in scale slider component --- src/components/views/elements/InterfaceScaleSlider.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/InterfaceScaleSlider.js b/src/components/views/elements/InterfaceScaleSlider.js index 1aa4f4d3d28..94e5b9b3102 100644 --- a/src/components/views/elements/InterfaceScaleSlider.js +++ b/src/components/views/elements/InterfaceScaleSlider.js @@ -15,14 +15,16 @@ limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import SettingsStore from "../../../settings/SettingsStore"; + export default class InterfaceScaleSlider extends React.Component { propTypes = { - className: React.PropTypes.string, - onValueChange: React.PropTypes.func.isRequired, - value: React.PropTypes.number, + className: PropTypes.string, + onValueChange: PropTypes.func.isRequired, + value: PropTypes.number, }; constructor(props) { From ede442e839199d16201bad9364fb0eccfb92de45 Mon Sep 17 00:00:00 2001 From: Mo Date: Thu, 4 Jan 2018 00:29:36 +0000 Subject: [PATCH 08/15] Scale settings: Font scale initial --- src/components/structures/LoggedInView.js | 10 ++++-- src/components/structures/UserSettings.js | 36 ++++++++++++++----- ...erfaceScaleSlider.js => SettingsSlider.js} | 14 +++----- src/settings/Settings.js | 4 +++ 4 files changed, 45 insertions(+), 19 deletions(-) rename src/components/views/elements/{InterfaceScaleSlider.js => SettingsSlider.js} (66%) diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index ff43f54d48c..702ff87f14e 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -78,6 +78,7 @@ const LoggedInView = React.createClass({ // use compact timeline view useCompactLayout: SettingsStore.getValue('useCompactLayout'), interfaceScale: SettingsStore.getValue('interfaceScale'), + chatFontScale: SettingsStore.getValue('chatFontScale'), }; }, @@ -132,11 +133,16 @@ const LoggedInView = React.createClass({ }, onAction(payload) { - if (payload.action === 'set_scale') { + if (payload.action === 'set_interface_scale') { this.setState({ interfaceScale: payload.value, }); } + if (payload.action === 'set_chat_font_scale') { + this.setState({ + chatFontScale: payload.value, + }); + } }, onAccountData: function(event) { @@ -339,7 +345,7 @@ const LoggedInView = React.createClass({ } return ( -
+
{ topBar }
{ SettingsStore.isFeatureEnabled("feature_tag_panel") ? :
} diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index c61cf5df139..7e104d73dcd 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -230,6 +230,7 @@ module.exports = React.createClass({ this.setState({ language: languageHandler.getCurrentLanguage(), interfaceScale: SettingsStore.getValue("interfaceScale"), + chatFontScale: SettingsStore.getValue("chatFontScale"), }); this._sessionStore = sessionStore; @@ -241,8 +242,11 @@ module.exports = React.createClass({ componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); - this._debouncedDispatchScaleChange = _debounce((newInterfaceScale) => { - dis.dispatch({action: 'set_scale', value: newInterfaceScale}); + this._debouncedDispatchInterfaceScaleChange = _debounce((newInterfaceScale) => { + dis.dispatch({action: 'set_interface_scale', value: newInterfaceScale}); + }, 2000); + this._debouncedDispatchChatFontScaleChange = _debounce((newChatFontScale) => { + dis.dispatch({action: 'set_chat_font_scale', value: newChatFontScale}); }, 2000); this._me = MatrixClientPeg.get().credentials.userId; }, @@ -636,6 +640,7 @@ module.exports = React.createClass({ } }, + // TODO: make this into getScaleChangeSetting that closure on the specific property? onInterfaceScaleChange: function(newInterfaceScale) { newInterfaceScale = parseInt(newInterfaceScale); if (this.state.interfaceScale !== newInterfaceScale) { @@ -643,7 +648,18 @@ module.exports = React.createClass({ this.setState({ interfaceScale: newInterfaceScale, }); - this._debouncedDispatchScaleChange(newInterfaceScale); + this._debouncedDispatchInterfaceScaleChange(newInterfaceScale); + } + }, + + onChatFontScaleChange: function(newChatFontScale) { + newChatFontScale = parseInt(newChatFontScale); + if (this.state.chatFontScale !== newChatFontScale) { + SettingsStore.setValue("chatFontScale", null, SettingLevel.DEVICE, newChatFontScale); + this.setState({ + chatFontScale: newChatFontScale, + }); + this._debouncedDispatchChatFontScaleChange(newChatFontScale); } }, @@ -658,12 +674,16 @@ module.exports = React.createClass({
; }, - _renderInterfaceScaleSetting: function() { - const InterfaceScaleSlider = sdk.getComponent('views.elements.InterfaceScaleSlider'); + _renderScaleSettings: function() { + const SettingsSlider = sdk.getComponent('views.elements.SettingsSlider'); return
- + +
; }, @@ -694,7 +714,7 @@ module.exports = React.createClass({ { this._renderLanguageSetting() } - { this._renderInterfaceScaleSetting() } + { this._renderScaleSettings() }
); diff --git a/src/components/views/elements/InterfaceScaleSlider.js b/src/components/views/elements/SettingsSlider.js similarity index 66% rename from src/components/views/elements/InterfaceScaleSlider.js rename to src/components/views/elements/SettingsSlider.js index 94e5b9b3102..a8004eebc0d 100644 --- a/src/components/views/elements/InterfaceScaleSlider.js +++ b/src/components/views/elements/SettingsSlider.js @@ -17,11 +17,9 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; -import SettingsStore from "../../../settings/SettingsStore"; - -export default class InterfaceScaleSlider extends React.Component { - propTypes = { +export default class SettingsSlider extends React.Component { + static propTypes = { className: PropTypes.string, onValueChange: PropTypes.func.isRequired, value: PropTypes.number, @@ -37,12 +35,10 @@ export default class InterfaceScaleSlider extends React.Component { } render() { - const interfaceScale = SettingsStore.getValue("interfaceScale", null, true); - const value = this.props.value || interfaceScale; return
- -
{ value }%
+ +
{ this.props.value }%
; } } diff --git a/src/settings/Settings.js b/src/settings/Settings.js index a8e9937a7e6..48b34740613 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -207,6 +207,10 @@ export const SETTINGS = { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG, default: 100, }, + "chatFontScale": { + supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG, + default: 100, + }, "analyticsOptOut": { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG, displayName: _td('Opt out of analytics'), From a11ada19265462fd8ea5b8fbd28e4c7c96d6bb62 Mon Sep 17 00:00:00 2001 From: Mo Date: Thu, 4 Jan 2018 23:53:23 +0000 Subject: [PATCH 09/15] Scale settings: only apply setting on value commit --- src/components/structures/LoggedInView.js | 2 +- src/components/structures/UserSettings.js | 25 +++++++++---------- .../views/elements/SettingsSlider.js | 8 +++++- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 702ff87f14e..6b7a717d602 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -345,7 +345,7 @@ const LoggedInView = React.createClass({ } return ( -
+
{ topBar }
{ SettingsStore.isFeatureEnabled("feature_tag_panel") ? :
} diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index 7e104d73dcd..af4d2f82c91 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -242,12 +242,6 @@ module.exports = React.createClass({ componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); - this._debouncedDispatchInterfaceScaleChange = _debounce((newInterfaceScale) => { - dis.dispatch({action: 'set_interface_scale', value: newInterfaceScale}); - }, 2000); - this._debouncedDispatchChatFontScaleChange = _debounce((newChatFontScale) => { - dis.dispatch({action: 'set_chat_font_scale', value: newChatFontScale}); - }, 2000); this._me = MatrixClientPeg.get().credentials.userId; }, @@ -640,29 +634,32 @@ module.exports = React.createClass({ } }, - // TODO: make this into getScaleChangeSetting that closure on the specific property? onInterfaceScaleChange: function(newInterfaceScale) { - newInterfaceScale = parseInt(newInterfaceScale); if (this.state.interfaceScale !== newInterfaceScale) { - SettingsStore.setValue("interfaceScale", null, SettingLevel.DEVICE, newInterfaceScale); this.setState({ interfaceScale: newInterfaceScale, }); - this._debouncedDispatchInterfaceScaleChange(newInterfaceScale); } }, + onInterfaceScaleCommitted: function(newInterfaceScale) { + SettingsStore.setValue("interfaceScale", null, SettingLevel.DEVICE, newInterfaceScale); + dis.dispatch({action: 'set_interface_scale', value: newInterfaceScale}); + }, + onChatFontScaleChange: function(newChatFontScale) { - newChatFontScale = parseInt(newChatFontScale); if (this.state.chatFontScale !== newChatFontScale) { - SettingsStore.setValue("chatFontScale", null, SettingLevel.DEVICE, newChatFontScale); this.setState({ chatFontScale: newChatFontScale, }); - this._debouncedDispatchChatFontScaleChange(newChatFontScale); } }, + onChatFontScaleCommitted: function(newChatFontScale) { + SettingsStore.setValue("chatFontScale", null, SettingLevel.DEVICE, newChatFontScale); + dis.dispatch({action: 'set_chat_font_scale', value: newChatFontScale}); + }, + _renderLanguageSetting: function() { const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown'); return
@@ -679,10 +676,12 @@ module.exports = React.createClass({ return
; diff --git a/src/components/views/elements/SettingsSlider.js b/src/components/views/elements/SettingsSlider.js index a8004eebc0d..384fee0ed59 100644 --- a/src/components/views/elements/SettingsSlider.js +++ b/src/components/views/elements/SettingsSlider.js @@ -22,22 +22,28 @@ export default class SettingsSlider extends React.Component { static propTypes = { className: PropTypes.string, onValueChange: PropTypes.func.isRequired, + onValueCommitted: PropTypes.func.isRequired, value: PropTypes.number, }; constructor(props) { super(props); this._onValueChange = this._onValueChange.bind(this); + this._onMouseUp = this._onMouseUp.bind(this); } _onValueChange(e) { this.props.onValueChange(parseInt(e.target.value)); } + _onMouseUp(e) { + this.props.onValueCommitted(parseInt(e.target.value)); + } + render() { return
+ onChange={this._onValueChange} value={this.props.value} onMouseUp={this._onMouseUp} />
{ this.props.value }%
; } From 4511e694c4a09e99cac880b6a98d4cb95bb51f59 Mon Sep 17 00:00:00 2001 From: Mo Date: Thu, 4 Jan 2018 23:54:01 +0000 Subject: [PATCH 10/15] Scale settings: Chat font scale string -en --- src/i18n/strings/en_EN.json | 1 + src/i18n/strings/en_US.json | 1 + 2 files changed, 2 insertions(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b45efb3ac9b..99ed80e7b9b 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -821,6 +821,7 @@ "Refer a friend to Riot:": "Refer a friend to Riot:", "Interface Language": "Interface Language", "Interface Scale": "Interface Scale", + "Chat Font Scale": "Chat Font Scale", "User Interface": "User Interface", "Autocomplete Delay (ms):": "Autocomplete Delay (ms):", "": "", diff --git a/src/i18n/strings/en_US.json b/src/i18n/strings/en_US.json index 2aae0c237c7..4d1f5186a39 100644 --- a/src/i18n/strings/en_US.json +++ b/src/i18n/strings/en_US.json @@ -187,6 +187,7 @@ "Incorrect verification code": "Incorrect verification code", "Interface Language": "Interface Language", "Interface Scale": "Interface Scale", + "Chat Font Scale": "Chat Font Scale", "Invalid alias format": "Invalid alias format", "Invalid address format": "Invalid address format", "Invalid Email Address": "Invalid Email Address", From 20dae9c41724769b1b05f1262e759f87bfe70d4a Mon Sep 17 00:00:00 2001 From: Mo Date: Sat, 6 Jan 2018 01:24:15 +0000 Subject: [PATCH 11/15] Scale settings: relative font scale size --- src/components/structures/LoggedInView.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 6b7a717d602..4c0717031b9 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -344,8 +344,10 @@ const LoggedInView = React.createClass({ bodyClasses += ' mx_MatrixChat_useCompactLayout'; } + const relativeFontSize = ( 100 / this.state.interfaceScale ) * this.state.chatFontScale; + return ( -
+
{ topBar }
{ SettingsStore.isFeatureEnabled("feature_tag_panel") ? :
} From 18cf9210b94dffdd9e9f7e7c945d5279f50b819b Mon Sep 17 00:00:00 2001 From: Mo Date: Sun, 7 Jan 2018 00:32:16 +0000 Subject: [PATCH 12/15] Scale setting: Settings slider default className --- src/components/views/elements/SettingsSlider.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/views/elements/SettingsSlider.js b/src/components/views/elements/SettingsSlider.js index 384fee0ed59..877ad7406cc 100644 --- a/src/components/views/elements/SettingsSlider.js +++ b/src/components/views/elements/SettingsSlider.js @@ -26,6 +26,10 @@ export default class SettingsSlider extends React.Component { value: PropTypes.number, }; + static defaultProps = { + className: 'mx_SettingsSlider' + }; + constructor(props) { super(props); this._onValueChange = this._onValueChange.bind(this); From bbccc263d75c74d75a3987260bdce48c5692a788 Mon Sep 17 00:00:00 2001 From: Mo Date: Sun, 7 Jan 2018 00:40:11 +0000 Subject: [PATCH 13/15] Scale setting: appropriate min max for scaling settings --- src/components/structures/UserSettings.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index af4d2f82c91..bbcf407396a 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -677,12 +677,12 @@ module.exports = React.createClass({
; }, From 3eacee0c49b0ccec782374f59e91b51d002dc6d9 Mon Sep 17 00:00:00 2001 From: Mo Date: Sun, 7 Jan 2018 21:28:00 +0000 Subject: [PATCH 14/15] Scale setting: chat font scale applies to room view only --- src/components/structures/LoggedInView.js | 27 ++++++++++++----------- src/components/structures/RoomView.js | 4 +++- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 4c0717031b9..740ffd1629d 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -133,15 +133,17 @@ const LoggedInView = React.createClass({ }, onAction(payload) { - if (payload.action === 'set_interface_scale') { - this.setState({ - interfaceScale: payload.value, - }); - } - if (payload.action === 'set_chat_font_scale') { - this.setState({ - chatFontScale: payload.value, - }); + switch(payload.action) { + case 'set_interface_scale': + this.setState({ + interfaceScale: payload.value, + }); + break; + case 'set_chat_font_scale': + this.setState({ + chatFontScale: payload.value, + }); + break } }, @@ -256,6 +258,7 @@ const LoggedInView = React.createClass({ key={this.props.currentRoomId || 'roomview'} disabled={this.props.middleDisabled} collapsedRhs={this.props.collapseRhs} + chatFontScale={this.state.chatFontScale} ConferenceHandler={this.props.ConferenceHandler} />; if (!this.props.collapseRhs) { @@ -343,11 +346,9 @@ const LoggedInView = React.createClass({ if (this.state.useCompactLayout) { bodyClasses += ' mx_MatrixChat_useCompactLayout'; } - - const relativeFontSize = ( 100 / this.state.interfaceScale ) * this.state.chatFontScale; - + return ( -
+
{ topBar }
{ SettingsStore.isFeatureEnabled("feature_tag_panel") ? :
} diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index e240ab38d5e..045c01036ac 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -84,6 +84,8 @@ module.exports = React.createClass({ // is the RightPanel collapsed? collapsedRhs: React.PropTypes.bool, + + chatFontScale: React.PropTypes.number, }, getInitialState: function() { @@ -1737,7 +1739,7 @@ module.exports = React.createClass({ onLeaveClick={(myMember && myMember.membership === "join") ? this.onLeaveClick : null} /> { auxPanel } -
+
{ topUnreadMessagesBar } { messagePanel } { searchResultsPanel } From e6acc659866dbd87ab2fe28aef56934c3a8326f6 Mon Sep 17 00:00:00 2001 From: Mo Date: Sun, 7 Jan 2018 22:30:03 +0000 Subject: [PATCH 15/15] Scale setting: fix linting errors --- src/components/structures/UserSettings.js | 1 - src/components/views/elements/SettingsSlider.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index bbcf407396a..60864c55524 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -26,7 +26,6 @@ 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'); diff --git a/src/components/views/elements/SettingsSlider.js b/src/components/views/elements/SettingsSlider.js index 877ad7406cc..1db69911118 100644 --- a/src/components/views/elements/SettingsSlider.js +++ b/src/components/views/elements/SettingsSlider.js @@ -27,7 +27,7 @@ export default class SettingsSlider extends React.Component { }; static defaultProps = { - className: 'mx_SettingsSlider' + className: 'mx_SettingsSlider', }; constructor(props) {