- { _tJsx("You must register to use this functionality", /(.*?)<\/a>/, (sub) => { sub }) }
+ { _t("You must register to use this functionality",
+ {},
+ { 'a': (sub) => { sub } })
+ }
- { _t("%(inviter)s has invited you to join this community", {inviter: group.inviter.userId}) }
+
{ _t("Community Member Settings") }
-
-
-
-
- ' + 'Click here to open settings and give it one!', - [/
/], - [(sub) =>
]) - } + {}, + { 'br':
}, + ) }
{ topBar }
+ { SettingsStore.isFeatureEnabled("feature_tag_panel") ? {
- if(loggedIn) {
+ if (loggedIn) {
this.props.onTokenLoginCompleted();
// don't do anything else until the page reloads - just stay in
@@ -374,6 +389,22 @@ module.exports = React.createClass({
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+ // Start the onboarding process for certain actions
+ if (MatrixClientPeg.get() && MatrixClientPeg.get().isGuest() &&
+ ONBOARDING_FLOW_STARTERS.includes(payload.action)
+ ) {
+ // This will cause `payload` to be dispatched later, once a
+ // sync has reached the "prepared" state. Setting a matrix ID
+ // will cause a full login and sync and finally the deferred
+ // action will be dispatched.
+ dis.dispatch({
+ action: 'do_after_sync_prepared',
+ deferred_action: payload,
+ });
+ dis.dispatch({action: 'view_set_mxid'});
+ return;
+ }
+
switch (payload.action) {
case 'logout':
Lifecycle.logout();
@@ -463,22 +494,17 @@ module.exports = React.createClass({
this._viewIndexedRoom(payload.roomIndex);
break;
case 'view_user_settings':
- if (MatrixClientPeg.get().isGuest()) {
- dis.dispatch({
- action: 'do_after_sync_prepared',
- deferred_action: {
- action: 'view_user_settings',
- },
- });
- dis.dispatch({action: 'view_set_mxid'});
- break;
- }
this._setPage(PageTypes.UserSettings);
this.notifyNewScreen('settings');
break;
case 'view_create_room':
this._createRoom();
break;
+ case 'view_create_group': {
+ const CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog");
+ Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
+ }
+ break;
case 'view_room_directory':
this._setPage(PageTypes.RoomDirectory);
this.notifyNewScreen('directory');
@@ -509,7 +535,7 @@ module.exports = React.createClass({
this._chatCreateOrReuse(payload.user_id, payload.go_home_on_cancel);
break;
case 'view_create_chat':
- this._createChat();
+ showStartChatInviteDialog();
break;
case 'view_invite':
showRoomInviteDialog(payload.roomId);
@@ -569,6 +595,9 @@ module.exports = React.createClass({
this._onWillStartClient();
});
break;
+ case 'client_started':
+ this._onClientStarted();
+ break;
case 'new_version':
this.onVersion(
payload.currentVersion, payload.newVersion,
@@ -750,31 +779,7 @@ module.exports = React.createClass({
}).close;
},
- _createChat: function() {
- if (MatrixClientPeg.get().isGuest()) {
- dis.dispatch({
- action: 'do_after_sync_prepared',
- deferred_action: {
- action: 'view_create_chat',
- },
- });
- dis.dispatch({action: 'view_set_mxid'});
- return;
- }
- showStartChatInviteDialog();
- },
-
_createRoom: function() {
- if (MatrixClientPeg.get().isGuest()) {
- dis.dispatch({
- action: 'do_after_sync_prepared',
- deferred_action: {
- action: 'view_create_room',
- },
- });
- dis.dispatch({action: 'view_set_mxid'});
- return;
- }
const CreateRoomDialog = sdk.getComponent('dialogs.CreateRoomDialog');
Modal.createTrackedDialog('Create Room', '', CreateRoomDialog, {
onFinished: (shouldCreate, name, noFederate) => {
@@ -890,7 +895,7 @@ module.exports = React.createClass({
*/
_onSetTheme: function(theme) {
if (!theme) {
- theme = 'light';
+ theme = SettingsStore.getValue("theme");
}
// look for the stylesheet elements.
@@ -913,18 +918,49 @@ module.exports = React.createClass({
// disable all of them first, then enable the one we want. Chrome only
// bothers to do an update on a true->false transition, so this ensures
// that we get exactly one update, at the right time.
+ //
+ // ^ This comment was true when we used to use alternative stylesheets
+ // for the CSS. Nowadays we just set them all as disabled in index.html
+ // and enable them as needed. It might be cleaner to disable them all
+ // at the same time to prevent loading two themes simultaneously and
+ // having them interact badly... but this causes a flash of unstyled app
+ // which is even uglier. So we don't.
- Object.values(styleElements).forEach((a) => {
- a.disabled = true;
- });
styleElements[theme].disabled = false;
- if (theme === 'dark') {
- // abuse the tinter to change all the SVG's #fff to #2d2d2d
- // XXX: obviously this shouldn't be hardcoded here.
- Tinter.tintSvgWhite('#2d2d2d');
- } else {
- Tinter.tintSvgWhite('#ffffff');
+ const switchTheme = function() {
+ // we re-enable our theme here just in case we raced with another
+ // theme set request as per https://github.com/vector-im/riot-web/issues/5601.
+ // We could alternatively lock or similar to stop the race, but
+ // this is probably good enough for now.
+ styleElements[theme].disabled = false;
+ Object.values(styleElements).forEach((a) => {
+ if (a == styleElements[theme]) return;
+ a.disabled = true;
+ });
+ Tinter.setTheme(theme);
+ };
+
+ // turns out that Firefox preloads the CSS for link elements with
+ // the disabled attribute, but Chrome doesn't.
+
+ let cssLoaded = false;
+
+ styleElements[theme].onload = () => {
+ switchTheme();
+ };
+
+ for (let i = 0; i < document.styleSheets.length; i++) {
+ const ss = document.styleSheets[i];
+ if (ss && ss.href === styleElements[theme].href) {
+ cssLoaded = true;
+ break;
+ }
+ }
+
+ if (cssLoaded) {
+ styleElements[theme].onload = undefined;
+ switchTheme();
}
},
@@ -1095,6 +1131,34 @@ module.exports = React.createClass({
cli.on("crypto.roomKeyRequestCancellation", (req) => {
krh.handleKeyRequestCancellation(req);
});
+ cli.on("Room", (room) => {
+ if (MatrixClientPeg.get().isCryptoEnabled()) {
+ const blacklistEnabled = SettingsStore.getValueAt(
+ SettingLevel.ROOM_DEVICE,
+ "blacklistUnverifiedDevices",
+ room.roomId,
+ /*explicit=*/true,
+ );
+ room.setBlacklistUnverifiedDevices(blacklistEnabled);
+ }
+ });
+ },
+
+ /**
+ * Called shortly after the matrix client has started. Useful for
+ * setting up anything that requires the client to be started.
+ * @private
+ */
+ _onClientStarted: function() {
+ const cli = MatrixClientPeg.get();
+
+ if (cli.isCryptoEnabled()) {
+ const blacklistEnabled = SettingsStore.getValueAt(
+ SettingLevel.DEVICE,
+ "blacklistUnverifiedDevices",
+ );
+ cli.setGlobalBlacklistUnverifiedDevices(blacklistEnabled);
+ }
},
showScreen: function(screen, params) {
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 2331e096c0..53cc660a9b 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -17,7 +17,6 @@ limitations under the License.
import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
-import UserSettingsStore from '../../UserSettingsStore';
import shouldHideEvent from '../../shouldHideEvent';
import dis from "../../dispatcher";
import sdk from '../../index';
@@ -110,8 +109,6 @@ module.exports = React.createClass({
// Velocity requires
this._readMarkerGhostNode = null;
- this._syncedSettings = UserSettingsStore.getSyncedSettings();
-
this._isMounted = true;
},
@@ -251,7 +248,7 @@ module.exports = React.createClass({
// Always show highlighted event
if (this.props.highlightedEventId === mxEv.getId()) return true;
- return !shouldHideEvent(mxEv, this._syncedSettings);
+ return !shouldHideEvent(mxEv);
},
_getEventTiles: function() {
diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index cc4783fdac..9281fb199e 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -15,69 +15,12 @@ limitations under the License.
*/
import React from 'react';
-import PropTypes from 'prop-types';
import GeminiScrollbar from 'react-gemini-scrollbar';
-import {MatrixClient} from 'matrix-js-sdk';
import sdk from '../../index';
-import { _t, _tJsx } from '../../languageHandler';
+import { _t } from '../../languageHandler';
+import dis from '../../dispatcher';
import withMatrixClient from '../../wrappers/withMatrixClient';
import AccessibleButton from '../views/elements/AccessibleButton';
-import dis from '../../dispatcher';
-import Modal from '../../Modal';
-
-import FlairStore from '../../stores/FlairStore';
-
-const GroupTile = React.createClass({
- displayName: 'GroupTile',
-
- propTypes: {
- groupId: PropTypes.string.isRequired,
- },
-
- contextTypes: {
- matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
- },
-
- getInitialState() {
- return {
- profile: null,
- };
- },
-
- componentWillMount: function() {
- FlairStore.getGroupProfileCached(this.context.matrixClient, this.props.groupId).then((profile) => {
- this.setState({profile});
- });
- },
-
- onClick: function(e) {
- e.preventDefault();
- dis.dispatch({
- action: 'view_group',
- group_id: this.props.groupId,
- });
- },
-
- render: function() {
- const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
- const profile = this.state.profile || {};
- const name = profile.name || this.props.groupId;
- const desc = profile.shortDescription;
- const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(
- profile.avatarUrl, 50, 50, "crop",
- ) : null;
- return
- ;
- },
-});
export default withMatrixClient(React.createClass({
displayName: 'MyGroups',
@@ -98,14 +41,18 @@ export default withMatrixClient(React.createClass({
},
_onCreateGroupClick: function() {
- const CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog");
- Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
+ dis.dispatch({action: 'view_create_group'});
},
_fetch: function() {
this.props.matrixClient.getJoinedGroups().done((result) => {
this.setState({groups: result.groups, error: null});
}, (err) => {
+ if (err.errcode === 'M_GUEST_ACCESS_FORBIDDEN') {
+ // Indicate that the guest isn't in any groups (which should be true)
+ this.setState({groups: [], error: null});
+ return;
+ }
this.setState({groups: null, error: err});
});
},
@@ -114,6 +61,7 @@ export default withMatrixClient(React.createClass({
const Loader = sdk.getComponent("elements.Spinner");
const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
const TintableSvg = sdk.getComponent("elements.TintableSvg");
+ const GroupTile = sdk.getComponent("groups.GroupTile");
let content;
let contentHeader;
@@ -165,13 +113,13 @@ export default withMatrixClient(React.createClass({
-
-
-
- { name }
-{ desc }
- { this.props.groupId }
-
{ _t('Join an existing community') }
- { _tJsx(
+ { _t(
'To join an existing community you\'ll have to '+
'know its community identifier; this will look '+
'something like +example:matrix.org.',
- /(.*)<\/i>/,
- (sub) => { sub },
- ) }
+ {},
+ { 'i': (sub) => { sub } })
+ }
- { _tJsx("Resend all or cancel all now. You can also select individual messages to resend or cancel.",
- [/(.*?)<\/a>/, /(.*?)<\/a>/],
- [
- (sub) => { sub },
- (sub) => { sub },
- ],
+ {
+ _t("Resend all or cancel all now. " +
+ "You can also select individual messages to resend or cancel.",
+ {},
+ {
+ 'resendText': (sub) =>
+ { sub },
+ 'cancelText': (sub) =>
+ { sub },
+ },
) }
@@ -322,12 +325,15 @@ module.exports = React.createClass({
if (this.props.sentMessageAndIsAlone) {
return (
- { _tJsx("There's no one else here! Would you like to invite others or stop warning about the empty room?",
- [/(.*?)<\/a>/, /(.*?)<\/a>/],
- [
- (sub) => { sub },
- (sub) => { sub },
- ],
+ { _t("There's no one else here! Would you like to invite others " +
+ "or stop warning about the empty room ?",
+ {},
+ {
+ 'inviteText': (sub) =>
+ { sub },
+ 'nowarnText': (sub) =>
+ { sub },
+ },
) }
);
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 409b95947f..1fda05fb76 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -29,7 +29,6 @@ const classNames = require("classnames");
const Matrix = require("matrix-js-sdk");
import { _t } from '../../languageHandler';
-const UserSettingsStore = require('../../UserSettingsStore');
const MatrixClientPeg = require("../../MatrixClientPeg");
const ContentMessages = require("../../ContentMessages");
const Modal = require("../../Modal");
@@ -42,10 +41,11 @@ const rate_limited_func = require('../../ratelimitedfunc');
const ObjectUtils = require('../../ObjectUtils');
const Rooms = require('../../Rooms');
-import KeyCode from '../../KeyCode';
+import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
import RoomViewStore from '../../stores/RoomViewStore';
import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
+import SettingsStore from "../../settings/SettingsStore";
const DEBUG = false;
let debuglog = function() {};
@@ -149,8 +149,6 @@ module.exports = React.createClass({
MatrixClientPeg.get().on("RoomMember.membership", this.onRoomMemberMembership);
MatrixClientPeg.get().on("accountData", this.onAccountData);
- this._syncedSettings = UserSettingsStore.getSyncedSettings();
-
// Start listening for RoomViewStore updates
this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
this._onRoomViewStoreUpdate(true);
@@ -305,7 +303,7 @@ module.exports = React.createClass({
// Check if user has previously chosen to hide the app drawer for this
// room. If so, do not show apps
- let hideWidgetDrawer = localStorage.getItem(
+ const hideWidgetDrawer = localStorage.getItem(
room.roomId + "_hide_widget_drawer");
if (hideWidgetDrawer === "true") {
@@ -435,13 +433,7 @@ module.exports = React.createClass({
onKeyDown: function(ev) {
let handled = false;
- const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
- let ctrlCmdOnly;
- if (isMac) {
- ctrlCmdOnly = ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey;
- } else {
- ctrlCmdOnly = ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey;
- }
+ const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
switch (ev.keyCode) {
case KeyCode.KEY_D:
@@ -542,7 +534,7 @@ module.exports = React.createClass({
// update unread count when scrolled up
if (!this.state.searchResults && this.state.atEndOfLiveTimeline) {
// no change
- } else if (!shouldHideEvent(ev, this._syncedSettings)) {
+ } else if (!shouldHideEvent(ev)) {
this.setState((state, props) => {
return {numUnreadMessages: state.numUnreadMessages + 1};
});
@@ -616,38 +608,8 @@ module.exports = React.createClass({
},
_updatePreviewUrlVisibility: function(room) {
- // console.log("_updatePreviewUrlVisibility");
-
- // check our per-room overrides
- const roomPreviewUrls = room.getAccountData("org.matrix.room.preview_urls");
- if (roomPreviewUrls && roomPreviewUrls.getContent().disable !== undefined) {
- this.setState({
- showUrlPreview: !roomPreviewUrls.getContent().disable,
- });
- return;
- }
-
- // check our global disable override
- const userRoomPreviewUrls = MatrixClientPeg.get().getAccountData("org.matrix.preview_urls");
- if (userRoomPreviewUrls && userRoomPreviewUrls.getContent().disable) {
- this.setState({
- showUrlPreview: false,
- });
- return;
- }
-
- // check the room state event
- const roomStatePreviewUrls = room.currentState.getStateEvents('org.matrix.room.preview_urls', '');
- if (roomStatePreviewUrls && roomStatePreviewUrls.getContent().disable) {
- this.setState({
- showUrlPreview: false,
- });
- return;
- }
-
- // otherwise, we assume they're on.
this.setState({
- showUrlPreview: true,
+ showUrlPreview: SettingsStore.getValue("urlPreviewsEnabled", room.roomId),
});
},
@@ -666,12 +628,7 @@ module.exports = React.createClass({
const room = this.state.room;
if (!room) return;
- const color_scheme_event = room.getAccountData("org.matrix.room.color_scheme");
- let color_scheme = {};
- if (color_scheme_event) {
- color_scheme = color_scheme_event.getContent();
- // XXX: we should validate the event
- }
+ const color_scheme = SettingsStore.getValue("roomColor", room.room_id);
console.log("Tinter.tint from updateTint");
Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
},
@@ -750,7 +707,7 @@ module.exports = React.createClass({
return;
}
- const joinedMembers = room.currentState.getMembers().filter(m => m.membership === "join" || m.membership === "invite");
+ const joinedMembers = room.currentState.getMembers().filter((m) => m.membership === "join" || m.membership === "invite");
this.setState({isAlone: joinedMembers.length === 1});
},
@@ -1147,7 +1104,7 @@ module.exports = React.createClass({
}
if (this.state.searchScope === 'All') {
- if(roomId != lastRoomId) {
+ if (roomId != lastRoomId) {
const room = cli.getRoom(roomId);
// XXX: if we've left the room, we might not know about
@@ -1458,13 +1415,13 @@ module.exports = React.createClass({
*/
handleScrollKey: function(ev) {
let panel;
- if(this.refs.searchResultsPanel) {
+ if (this.refs.searchResultsPanel) {
panel = this.refs.searchResultsPanel;
- } else if(this.refs.messagePanel) {
+ } else if (this.refs.messagePanel) {
panel = this.refs.messagePanel;
}
- if(panel) {
+ if (panel) {
panel.handleScrollKey(ev);
}
},
@@ -1483,7 +1440,7 @@ module.exports = React.createClass({
// otherwise react calls it with null on each update.
_gatherTimelinePanelRef: function(r) {
this.refs.messagePanel = r;
- if(r) {
+ if (r) {
console.log("updateTint from RoomView._gatherTimelinePanelRef");
this.updateTint();
}
@@ -1775,7 +1732,7 @@ module.exports = React.createClass({
const messagePanel = (
+
+
+
+
+
;
+ },
+});
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 2bf8a08b98..98f57a60b5 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+import SettingsStore from "../../settings/SettingsStore";
+
const React = require('react');
const ReactDOM = require("react-dom");
import Promise from 'bluebird';
@@ -29,8 +31,7 @@ const dis = require("../../dispatcher");
const ObjectUtils = require('../../ObjectUtils');
const Modal = require("../../Modal");
const UserActivity = require("../../UserActivity");
-const KeyCode = require('../../KeyCode');
-import UserSettingsStore from '../../UserSettingsStore';
+import { KeyCode } from '../../Keyboard';
const PAGINATE_SIZE = 20;
const INITIAL_SIZE = 20;
@@ -129,8 +130,6 @@ var TimelinePanel = React.createClass({
}
}
- const syncedSettings = UserSettingsStore.getSyncedSettings();
-
return {
events: [],
timelineLoading: true, // track whether our room timeline is loading
@@ -175,10 +174,10 @@ var TimelinePanel = React.createClass({
clientSyncState: MatrixClientPeg.get().getSyncState(),
// should the event tiles have twelve hour times
- isTwelveHour: syncedSettings.showTwelveHourTimestamps,
+ isTwelveHour: SettingsStore.getValue("showTwelveHourTimestamps"),
// always show timestamps on event tiles?
- alwaysShowTimestamps: syncedSettings.alwaysShowTimestamps,
+ alwaysShowTimestamps: SettingsStore.getValue("alwaysShowTimestamps"),
};
},
@@ -311,7 +310,7 @@ var TimelinePanel = React.createClass({
return Promise.resolve(false);
}
- if(!this._timelineWindow.canPaginate(dir)) {
+ if (!this._timelineWindow.canPaginate(dir)) {
debuglog("TimelinePanel: can't", dir, "paginate any further");
this.setState({[canPaginateKey]: false});
return Promise.resolve(false);
@@ -441,7 +440,7 @@ var TimelinePanel = React.createClass({
var callback = null;
if (sender != myUserId && !UserActivity.userCurrentlyActive()) {
updatedState.readMarkerVisible = true;
- } else if(lastEv && this.getReadMarkerPosition() === 0) {
+ } else if (lastEv && this.getReadMarkerPosition() === 0) {
// we know we're stuckAtBottom, so we can advance the RM
// immediately, to save a later render cycle
@@ -658,7 +657,7 @@ var TimelinePanel = React.createClass({
// the read-marker should become invisible, so that if the user scrolls
// down, they don't see it.
- if(this.state.readMarkerVisible) {
+ if (this.state.readMarkerVisible) {
this.setState({
readMarkerVisible: false,
});
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 68ea932f93..09844c3d63 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -15,6 +15,8 @@ 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 SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
+
const React = require('react');
const ReactDOM = require('react-dom');
const sdk = require('../../index');
@@ -56,133 +58,69 @@ const gHVersionLabel = function(repo, token='') {
return { token };
};
-// Enumerate some simple 'flip a bit' UI settings (if any).
-// 'id' gives the key name in the im.vector.web.settings account data event
-// 'label' is how we describe it in the UI.
-// Warning: Each "label" string below must be added to i18n/strings/en_EN.json,
-// since they will be translated when rendered.
-const SETTINGS_LABELS = [
- {
- id: 'autoplayGifsAndVideos',
- label: _td('Autoplay GIFs and videos'),
- },
- {
- id: 'hideReadReceipts',
- label: _td('Hide read receipts'),
- },
- {
- id: 'dontSendTypingNotifications',
- label: _td("Don't send typing notifications"),
- },
- {
- id: 'alwaysShowTimestamps',
- label: _td('Always show message timestamps'),
- },
- {
- id: 'showTwelveHourTimestamps',
- label: _td('Show timestamps in 12 hour format (e.g. 2:30pm)'),
- },
- {
- id: 'hideJoinLeaves',
- label: _td('Hide join/leave messages (invites/kicks/bans unaffected)'),
- },
- {
- id: 'hideAvatarDisplaynameChanges',
- label: _td('Hide avatar and display name changes'),
- },
- {
- id: 'useCompactLayout',
- label: _td('Use compact timeline layout'),
- },
- {
- id: 'hideRedactions',
- label: _td('Hide removed messages'),
- },
- {
- id: 'enableSyntaxHighlightLanguageDetection',
- label: _td('Enable automatic language detection for syntax highlighting'),
- },
- {
- id: 'MessageComposerInput.autoReplaceEmoji',
- label: _td('Automatically replace plain text Emoji'),
- },
- {
- id: 'MessageComposerInput.dontSuggestEmoji',
- label: _td('Disable Emoji suggestions while typing'),
- },
- {
- id: 'Pill.shouldHidePillAvatar',
- label: _td('Hide avatars in user and room mentions'),
- },
- {
- id: 'TextualBody.disableBigEmoji',
- label: _td('Disable big emoji in chat'),
- },
- {
- id: 'VideoView.flipVideoHorizontally',
- label: _td('Mirror local video feed'),
- },
-/*
- {
- id: 'useFixedWidthFont',
- label: 'Use fixed width font',
- },
-*/
+// Enumerate some simple 'flip a bit' UI settings (if any). The strings provided here
+// must be settings defined in SettingsStore.
+const SIMPLE_SETTINGS = [
+ { id: "urlPreviewsEnabled" },
+ { id: "autoplayGifsAndVideos" },
+ { id: "hideReadReceipts" },
+ { id: "dontSendTypingNotifications" },
+ { id: "alwaysShowTimestamps" },
+ { id: "showTwelveHourTimestamps" },
+ { id: "hideJoinLeaves" },
+ { id: "hideAvatarChanges" },
+ { id: "hideDisplaynameChanges" },
+ { id: "useCompactLayout" },
+ { id: "hideRedactions" },
+ { id: "enableSyntaxHighlightLanguageDetection" },
+ { id: "MessageComposerInput.autoReplaceEmoji" },
+ { id: "MessageComposerInput.dontSuggestEmoji" },
+ { id: "Pill.shouldHidePillAvatar" },
+ { id: "TextualBody.disableBigEmoji" },
+ { id: "VideoView.flipVideoHorizontally" },
];
-const ANALYTICS_SETTINGS_LABELS = [
+// These settings must be defined in SettingsStore
+const ANALYTICS_SETTINGS = [
{
id: 'analyticsOptOut',
- label: _td('Opt out of analytics'),
fn: function(checked) {
Analytics[checked ? 'disable' : 'enable']();
},
},
];
-const WEBRTC_SETTINGS_LABELS = [
+// These settings must be defined in SettingsStore
+const WEBRTC_SETTINGS = [
{
id: 'webRtcForceTURN',
- label: _td('Disable Peer-to-Peer for 1:1 calls'),
+ fn: (val) => {
+ MatrixClientPeg.get().setForceTURN(val);
+ },
},
];
-// Warning: Each "label" string below must be added to i18n/strings/en_EN.json,
-// since they will be translated when rendered.
-const CRYPTO_SETTINGS_LABELS = [
+// These settings must be defined in SettingsStore
+const CRYPTO_SETTINGS = [
{
id: 'blacklistUnverifiedDevices',
- label: _td('Never send encrypted messages to unverified devices from this device'),
fn: function(checked) {
MatrixClientPeg.get().setGlobalBlacklistUnverifiedDevices(checked);
},
},
- // XXX: this is here for documentation; the actual setting is managed via RoomSettings
- // {
- // id: 'blacklistUnverifiedDevicesPerRoom'
- // label: 'Never send encrypted messages to unverified devices in this room',
- // }
];
// Enumerate the available themes, with a nice human text label.
-// 'id' gives the key name in the im.vector.web.settings account data event
-// 'value' is the value for that key in the event
// 'label' is how we describe it in the UI.
+// 'value' is the value for the theme setting
//
// XXX: Ideally we would have a theme manifest or something and they'd be nicely
// packaged up in a single directory, and/or located at the application layer.
// But for now for expedience we just hardcode them here.
const THEMES = [
- {
- id: 'theme',
- label: _td('Light theme'),
- value: 'light',
- },
- {
- id: 'theme',
- label: _td('Dark theme'),
- value: 'dark',
- },
+ { label: _td('Light theme'), value: 'light' },
+ { label: _td('Dark theme'), value: 'dark' },
+ { label: _td('Status.im theme'), value: 'status' },
];
const IgnoredUser = React.createClass({
@@ -204,7 +142,7 @@ const IgnoredUser = React.createClass({
render: function() {
return (
+ { tags }
+
+ { _t("User Interface") }
- { this._renderUrlPreviewSelector() }
- { SETTINGS_LABELS.map( this._renderSyncedSetting ) }
- { THEMES.map( this._renderThemeSelector ) }
+ { SIMPLE_SETTINGS.map( this._renderAccountSetting ) }
+ { THEMES.map( this._renderThemeOption ) }
| @@ -743,69 +673,31 @@ module.exports = React.createClass({ ); }, - _renderUrlPreviewSelector: function() { - return |