diff --git a/src/views/sidepanel-view.jsx b/src/views/sidepanel-view.jsx
index ed9d3cc8..414a935c 100644
--- a/src/views/sidepanel-view.jsx
+++ b/src/views/sidepanel-view.jsx
@@ -11,7 +11,7 @@ import ContactsView from './contacts-view.jsx';
const CreateAccountView = React.lazy(_ => import('./create-account-view.jsx'));
import AccAppearanceView from './acc-appearance-view.jsx';
import AccNotificationsView from './acc-notifications-view.jsx';
-import AccSecurityView from './acc-security-view.jsx';
+const AccSecurityView = React.lazy(_ => import('./acc-security-view.jsx'));
import AccSupportView from './acc-support-view.jsx';
import LoginView from './login-view.jsx';
import NewTopicView from './new-topic-view.jsx';
@@ -211,27 +211,30 @@ class SidepanelView extends React.PureComponent {
colorSchema={this.props.colorSchema}
textSize={this.props.textSize}
onChangeColorSchema={this.props.onChangeColorSchema}
- onChangeTextSize={this.props.onChangeTextSize} /> :
+ onTextSizeChanged={this.props.onTextSizeChanged} /> :
view === 'notif' ?
:
+ onToggleMessageSounds={this.props.onToggleMessageSounds} /> :
view === 'security' ?
- :
+ }>
+
+ :
view === 'support' ?
import('../widgets/phone-country-selector.jsx'));
-import InfoView from './info-view.jsx';
+const InfoView = React.lazy(_ => import('./info-view.jsx'));
import MessagesView from './messages-view.jsx';
import SidepanelView from './sidepanel-view.jsx';
-import { API_KEY, APP_NAME, DEFAULT_COLOR_SCHEME, DEFAULT_P2P_ACCESS_MODE, FORWARDED_PREVIEW_LENGTH,
+import { API_KEY, APP_NAME, DEFAULT_COLOR_SCHEME, DEFAULT_P2P_ACCESS_MODE, DEFAULT_TEXT_SIZE, FORWARDED_PREVIEW_LENGTH,
LOGGING_ENABLED, MEDIA_BREAKPOINT, WAKE_UP_TICK, WAKE_UP_TIMEOUT } from '../config.js';
import { CALL_STATE_NONE, CALL_STATE_OUTGOING_INITATED,
CALL_STATE_INCOMING_RECEIVED, CALL_STATE_IN_PROGRESS,
@@ -216,7 +216,7 @@ class TinodeWeb extends React.Component {
messageSounds: !settings.messageSoundsOff,
incognitoMode: false,
colorSchema: settings.colorSchema || DEFAULT_COLOR_SCHEME, // default: system default
- textSize: settings.textSize || 10, // default size: 10pt
+ textSize: settings.textSize || DEFAULT_TEXT_SIZE, // default size: 10pt
// Persistent request to enable alerts.
desktopAlerts: persist && !!settings.desktopAlerts,
// Enable / disable checkbox.
@@ -298,6 +298,7 @@ class TinodeWeb extends React.Component {
window.addEventListener('hashchange', this.handleHashRoute);
document.documentElement.style.colorScheme = this.state.colorSchema;
+ document.documentElement.style.setProperty('--message-text-size', `${this.state.textSize}pt`);
// Process background notifications from the service worker.
if (typeof BroadcastChannel == 'function') {
@@ -1219,7 +1220,7 @@ class TinodeWeb extends React.Component {
handleChangeTextSize(size) {
this.setState({textSize: size | 0});
LocalStorageUtil.updateObject('settings', {textSize: size});
- document.documentElement.style.fontSize = `${size}pt`;
+ document.documentElement.style.setProperty('--message-text-size', `${size}pt`);
}
handleUpdateAccountTagsRequest(_, tags) {
@@ -1490,6 +1491,7 @@ class TinodeWeb extends React.Component {
// Reset color scheme.
document.documentElement.style.colorScheme = DEFAULT_COLOR_SCHEME;
+ document.documentElement.style.setProperty('--message-text-size', `${DEFAULT_TEXT_SIZE}pt`);
clearInterval(this.reconnectCountdown);
@@ -2097,7 +2099,7 @@ class TinodeWeb extends React.Component {
onToggleMessageSounds={this.handleToggleMessageSounds}
onToggleIncognitoMode={this.handleToggleIncognitoMode}
onChangeColorSchema={this.handleChangeColorSchema}
- onChangeTextSize={this.handleChangeTextSize}
+ onTextSizeChanged={this.handleChangeTextSize}
onCredAdd={this.handleCredAdd}
onCredDelete={this.handleCredDelete}
onCredConfirm={this.handleCredConfirm}
@@ -2174,38 +2176,41 @@ class TinodeWeb extends React.Component {
: null}
{this.state.infoPanel ?
- }>
+
+ showContextMenu={this.handleShowContextMenu}
+ />
+
:
null
}