2019-01-24 07:36:42 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 New Vector Ltd
|
2019-08-06 20:06:47 +03:00
|
|
|
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
|
2019-01-24 07:36:42 +03:00
|
|
|
|
|
|
|
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';
|
2019-02-22 20:47:18 +03:00
|
|
|
import {_t} from "../../../../../languageHandler";
|
|
|
|
import {SettingLevel} from "../../../../../settings/SettingsStore";
|
|
|
|
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
|
|
|
|
import SettingsStore from "../../../../../settings/SettingsStore";
|
|
|
|
import Field from "../../../elements/Field";
|
2019-08-06 20:06:47 +03:00
|
|
|
import sdk from "../../../../..";
|
|
|
|
import PlatformPeg from "../../../../../PlatformPeg";
|
2019-02-22 20:47:18 +03:00
|
|
|
|
|
|
|
export default class PreferencesUserSettingsTab extends React.Component {
|
2019-01-24 07:36:42 +03:00
|
|
|
static COMPOSER_SETTINGS = [
|
2019-10-04 08:20:00 +03:00
|
|
|
'useCiderComposer',
|
2019-01-24 07:36:42 +03:00
|
|
|
'MessageComposerInput.autoReplaceEmoji',
|
2019-01-25 06:57:40 +03:00
|
|
|
'MessageComposerInput.suggestEmoji',
|
|
|
|
'sendTypingNotifications',
|
2019-01-24 07:36:42 +03:00
|
|
|
];
|
|
|
|
|
|
|
|
static TIMELINE_SETTINGS = [
|
|
|
|
'autoplayGifsAndVideos',
|
|
|
|
'urlPreviewsEnabled',
|
2019-01-25 06:57:40 +03:00
|
|
|
'TextualBody.enableBigEmoji',
|
|
|
|
'showReadReceipts',
|
2019-01-24 07:36:42 +03:00
|
|
|
'showTwelveHourTimestamps',
|
|
|
|
'alwaysShowTimestamps',
|
2019-01-25 06:57:40 +03:00
|
|
|
'showRedactions',
|
2019-01-24 07:36:42 +03:00
|
|
|
'enableSyntaxHighlightLanguageDetection',
|
2019-01-25 06:57:40 +03:00
|
|
|
'showJoinLeaves',
|
|
|
|
'showAvatarChanges',
|
|
|
|
'showDisplaynameChanges',
|
2019-10-01 18:32:42 +03:00
|
|
|
'showImages',
|
2019-01-24 07:36:42 +03:00
|
|
|
];
|
|
|
|
|
2019-02-23 02:57:41 +03:00
|
|
|
static ROOM_LIST_SETTINGS = [
|
|
|
|
'RoomList.orderByImportance',
|
2019-06-03 09:15:33 +03:00
|
|
|
'breadcrumbs',
|
2019-02-23 02:57:41 +03:00
|
|
|
];
|
|
|
|
|
2019-01-24 07:36:42 +03:00
|
|
|
static ADVANCED_SETTINGS = [
|
|
|
|
'alwaysShowEncryptionIcons',
|
2019-01-25 06:57:40 +03:00
|
|
|
'Pill.shouldShowPillAvatar',
|
|
|
|
'TagPanel.enableTagPanel',
|
2019-01-24 07:36:42 +03:00
|
|
|
'promptBeforeInviteUnknownUsers',
|
|
|
|
// Start automatically after startup (electron-only)
|
|
|
|
// Autocomplete delay (niche text box)
|
|
|
|
];
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
autoLaunch: false,
|
|
|
|
autoLaunchSupported: false,
|
2019-08-05 13:58:53 +03:00
|
|
|
alwaysShowMenuBar: true,
|
|
|
|
alwaysShowMenuBarSupported: false,
|
2019-10-29 14:37:41 +03:00
|
|
|
showTrayIcon: false,
|
|
|
|
showTrayIconSupported: false,
|
2019-02-25 19:43:39 +03:00
|
|
|
minimizeToTray: true,
|
|
|
|
minimizeToTraySupported: false,
|
2019-09-17 19:34:30 +03:00
|
|
|
autocompleteDelay:
|
|
|
|
SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay').toString(10),
|
|
|
|
readMarkerInViewThresholdMs:
|
|
|
|
SettingsStore.getValueAt(SettingLevel.DEVICE, 'readMarkerInViewThresholdMs').toString(10),
|
|
|
|
readMarkerOutOfViewThresholdMs:
|
|
|
|
SettingsStore.getValueAt(SettingLevel.DEVICE, 'readMarkerOutOfViewThresholdMs').toString(10),
|
2019-01-24 07:36:42 +03:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
async componentWillMount(): void {
|
2019-02-25 19:43:39 +03:00
|
|
|
const platform = PlatformPeg.get();
|
|
|
|
|
|
|
|
const autoLaunchSupported = await platform.supportsAutoLaunch();
|
2019-01-24 07:36:42 +03:00
|
|
|
let autoLaunch = false;
|
|
|
|
if (autoLaunchSupported) {
|
2019-02-25 19:43:39 +03:00
|
|
|
autoLaunch = await platform.getAutoLaunchEnabled();
|
|
|
|
}
|
|
|
|
|
2019-08-05 13:58:53 +03:00
|
|
|
const alwaysShowMenuBarSupported = await platform.supportsAutoHideMenuBar();
|
|
|
|
let alwaysShowMenuBar = true;
|
|
|
|
if (alwaysShowMenuBarSupported) {
|
|
|
|
alwaysShowMenuBar = !await platform.getAutoHideMenuBarEnabled();
|
|
|
|
}
|
|
|
|
|
2019-10-29 14:37:41 +03:00
|
|
|
const showTrayIconSupported = await platform.supportsTrayIcon();
|
|
|
|
let showTrayIcon = true;
|
|
|
|
if (showTrayIconSupported) {
|
|
|
|
showTrayIcon = await platform.getTrayIconEnabled();
|
|
|
|
}
|
|
|
|
|
2019-02-25 19:43:39 +03:00
|
|
|
const minimizeToTraySupported = await platform.supportsMinimizeToTray();
|
|
|
|
let minimizeToTray = true;
|
|
|
|
if (minimizeToTraySupported) {
|
|
|
|
minimizeToTray = await platform.getMinimizeToTrayEnabled();
|
2019-01-24 07:36:42 +03:00
|
|
|
}
|
|
|
|
|
2019-08-05 13:58:53 +03:00
|
|
|
this.setState({
|
|
|
|
autoLaunch,
|
|
|
|
autoLaunchSupported,
|
|
|
|
alwaysShowMenuBarSupported,
|
|
|
|
alwaysShowMenuBar,
|
2019-10-29 14:37:41 +03:00
|
|
|
showTrayIconSupported,
|
|
|
|
showTrayIcon,
|
2019-08-05 13:58:53 +03:00
|
|
|
minimizeToTraySupported,
|
|
|
|
minimizeToTray,
|
|
|
|
});
|
2019-01-24 07:36:42 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
_onAutoLaunchChange = (checked) => {
|
|
|
|
PlatformPeg.get().setAutoLaunchEnabled(checked).then(() => this.setState({autoLaunch: checked}));
|
|
|
|
};
|
|
|
|
|
2019-08-05 13:58:53 +03:00
|
|
|
_onAlwaysShowMenuBarChange = (checked) => {
|
|
|
|
PlatformPeg.get().setAutoHideMenuBarEnabled(!checked).then(() => this.setState({alwaysShowMenuBar: checked}));
|
|
|
|
};
|
|
|
|
|
2019-10-29 14:37:41 +03:00
|
|
|
_onShowTrayIconChange = (checked) => {
|
|
|
|
PlatformPeg.get().setTrayIconEnabled(checked).then(() => this.setState({showTrayIcon: checked}));
|
|
|
|
};
|
|
|
|
|
2019-02-25 19:43:39 +03:00
|
|
|
_onMinimizeToTrayChange = (checked) => {
|
|
|
|
PlatformPeg.get().setMinimizeToTrayEnabled(checked).then(() => this.setState({minimizeToTray: checked}));
|
|
|
|
};
|
|
|
|
|
2019-01-24 07:36:42 +03:00
|
|
|
_onAutocompleteDelayChange = (e) => {
|
2019-07-15 08:28:23 +03:00
|
|
|
this.setState({autocompleteDelay: e.target.value});
|
2019-01-24 07:36:42 +03:00
|
|
|
SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
|
|
|
|
};
|
|
|
|
|
2019-09-17 19:34:30 +03:00
|
|
|
_onReadMarkerInViewThresholdMs = (e) => {
|
|
|
|
this.setState({readMarkerInViewThresholdMs: e.target.value});
|
|
|
|
SettingsStore.setValue("readMarkerInViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
|
|
|
|
};
|
|
|
|
|
|
|
|
_onReadMarkerOutOfViewThresholdMs = (e) => {
|
|
|
|
this.setState({readMarkerOutOfViewThresholdMs: e.target.value});
|
|
|
|
SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
|
|
|
|
};
|
|
|
|
|
2019-01-24 07:36:42 +03:00
|
|
|
_renderGroup(settingIds) {
|
|
|
|
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
|
|
|
|
return settingIds.map(i => <SettingsFlag key={i} name={i} level={SettingLevel.ACCOUNT} />);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let autoLaunchOption = null;
|
|
|
|
if (this.state.autoLaunchSupported) {
|
2019-08-06 20:06:47 +03:00
|
|
|
autoLaunchOption = <LabelledToggleSwitch
|
|
|
|
value={this.state.autoLaunch}
|
|
|
|
onChange={this._onAutoLaunchChange}
|
|
|
|
label={_t('Start automatically after system login')} />;
|
2019-01-24 07:36:42 +03:00
|
|
|
}
|
|
|
|
|
2019-08-05 13:58:53 +03:00
|
|
|
let autoHideMenuOption = null;
|
|
|
|
if (this.state.alwaysShowMenuBarSupported) {
|
2019-08-06 20:06:47 +03:00
|
|
|
autoHideMenuOption = <LabelledToggleSwitch
|
|
|
|
value={this.state.alwaysShowMenuBar}
|
|
|
|
onChange={this._onAlwaysShowMenuBarChange}
|
|
|
|
label={_t('Always show the window menu bar')} />;
|
2019-08-05 13:58:53 +03:00
|
|
|
}
|
|
|
|
|
2019-10-29 14:37:41 +03:00
|
|
|
let enableTrayIcon = null;
|
|
|
|
if (this.state.showTrayIconSupported) {
|
|
|
|
enableTrayIcon = <LabelledToggleSwitch
|
|
|
|
value={this.state.showTrayIcon}
|
|
|
|
onChange={this._onShowTrayIconChange}
|
|
|
|
label={_t('Show tray icon')} />;
|
|
|
|
}
|
|
|
|
|
2019-02-25 19:43:39 +03:00
|
|
|
let minimizeToTrayOption = null;
|
|
|
|
if (this.state.minimizeToTraySupported) {
|
2019-10-29 14:37:41 +03:00
|
|
|
// If tray icon is disabled then this option is not available and forced to off.
|
|
|
|
// Unless tray icon is not supported (darwin)
|
|
|
|
const disableOption = this.state.showTrayIconSupported && !this.state.showTrayIcon;
|
2019-08-06 20:06:47 +03:00
|
|
|
minimizeToTrayOption = <LabelledToggleSwitch
|
2019-10-29 14:37:41 +03:00
|
|
|
value={!disableOption && this.state.minimizeToTray}
|
|
|
|
disabled={disableOption}
|
2019-08-06 20:06:47 +03:00
|
|
|
onChange={this._onMinimizeToTrayChange}
|
|
|
|
label={_t('Close button should minimize window to tray')} />;
|
2019-02-25 19:43:39 +03:00
|
|
|
}
|
|
|
|
|
2019-01-24 07:36:42 +03:00
|
|
|
return (
|
2019-02-22 20:47:18 +03:00
|
|
|
<div className="mx_SettingsTab mx_PreferencesUserSettingsTab">
|
2019-01-24 07:36:42 +03:00
|
|
|
<div className="mx_SettingsTab_heading">{_t("Preferences")}</div>
|
|
|
|
<div className="mx_SettingsTab_section">
|
|
|
|
<span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
|
2019-02-22 20:47:18 +03:00
|
|
|
{this._renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
|
2019-01-24 07:36:42 +03:00
|
|
|
|
|
|
|
<span className="mx_SettingsTab_subheading">{_t("Timeline")}</span>
|
2019-02-22 20:47:18 +03:00
|
|
|
{this._renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
|
2019-01-24 07:36:42 +03:00
|
|
|
|
2019-02-23 02:57:41 +03:00
|
|
|
<span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
|
2019-02-25 21:52:34 +03:00
|
|
|
{this._renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
|
2019-02-23 02:57:41 +03:00
|
|
|
|
2019-01-24 07:36:42 +03:00
|
|
|
<span className="mx_SettingsTab_subheading">{_t("Advanced")}</span>
|
2019-02-22 20:47:18 +03:00
|
|
|
{this._renderGroup(PreferencesUserSettingsTab.ADVANCED_SETTINGS)}
|
2019-10-29 14:37:41 +03:00
|
|
|
{enableTrayIcon}
|
2019-02-25 19:43:39 +03:00
|
|
|
{minimizeToTrayOption}
|
2019-08-05 13:58:53 +03:00
|
|
|
{autoHideMenuOption}
|
2019-01-24 07:36:42 +03:00
|
|
|
{autoLaunchOption}
|
2019-08-06 20:06:47 +03:00
|
|
|
<Field
|
|
|
|
id={"autocompleteDelay"}
|
|
|
|
label={_t('Autocomplete delay (ms)')}
|
|
|
|
type='number'
|
|
|
|
value={this.state.autocompleteDelay}
|
|
|
|
onChange={this._onAutocompleteDelayChange} />
|
2019-09-17 19:34:30 +03:00
|
|
|
<Field
|
|
|
|
id={"readMarkerInViewThresholdMs"}
|
|
|
|
label={_t('Read Marker lifetime (ms)')}
|
|
|
|
type='number'
|
|
|
|
value={this.state.readMarkerInViewThresholdMs}
|
|
|
|
onChange={this._onReadMarkerInViewThresholdMs} />
|
|
|
|
<Field
|
|
|
|
id={"readMarkerOutOfViewThresholdMs"}
|
|
|
|
label={_t('Read Marker off-screen lifetime (ms)')}
|
|
|
|
type='number'
|
|
|
|
value={this.state.readMarkerOutOfViewThresholdMs}
|
|
|
|
onChange={this._onReadMarkerOutOfViewThresholdMs} />
|
2019-01-24 07:36:42 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|