Merge branches 'develop' and 't3chguy/context_menus' of github.com:matrix-org/matrix-react-sdk into t3chguy/context_menus

src/components/structures/LoggedInView.js

@@ -401,6 +401,11 @@ const LoggedInView = createReactClass({
             const isClickShortcut = ev.target !== document.body &&
                 (ev.key === Key.SPACE || ev.key === Key.ENTER);
 
+            // Do not capture the context menu key to improve keyboard accessibility
+            if (ev.key === Key.CONTEXT_MENU) {
+                return;
+            }
+
             // XXX: Remove after CIDER replaces Slate completely: https://github.com/vector-im/riot-web/issues/11036
             // If using Slate, consume the Backspace without first focusing as it causes an implosion
             if (ev.key === Key.BACKSPACE && !SettingsStore.getValue("useCiderComposer")) {

src/components/structures/MessagePanel.js

@@ -693,6 +693,10 @@ export default class MessagePanel extends React.Component {
 
         const readReceipts = this._readReceiptsByEvent[eventId];
 
+        // Dev note: `this._isUnmounting.bind(this)` is important - it ensures that
+        // the function is run in the context of this class and not EventTile, therefore
+        // ensuring the right `this._mounted` variable is used by read receipts (which
+        // don't update their position if we, the MessagePanel, is unmounting).
         ret.push(
             <li key={eventId}
                 ref={this._collectEventNode.bind(this, eventId)}
@@ -707,7 +711,7 @@ export default class MessagePanel extends React.Component {
                     readReceipts={readReceipts}
                     readReceiptMap={this._readReceiptMap}
                     showUrlPreview={this.props.showUrlPreview}
-                    checkUnmounting={this._isUnmounting}
+                    checkUnmounting={this._isUnmounting.bind(this)}
                     eventSendStatus={mxEv.getAssociatedStatus()}
                     tileShape={this.props.tileShape}
                     isTwelveHour={this.props.isTwelveHour}

src/components/views/emojipicker/EmojiPicker.js

@@ -62,7 +62,7 @@ EMOJIBASE.forEach(emoji => {
         DATA_BY_CATEGORY[categoryId].push(emoji);
     }
     // This is used as the string to match the query against when filtering emojis.
-    emoji.filterString = `${emoji.annotation}\n${emoji.shortcodes.join('\n')}}\n${emoji.emoticon || ''}`;
+    emoji.filterString = `${emoji.annotation}\n${emoji.shortcodes.join('\n')}}\n${emoji.emoticon || ''}`.toLowerCase();
 });
 
 export const CATEGORY_HEADER_HEIGHT = 22;
@@ -201,6 +201,7 @@ class EmojiPicker extends React.Component {
     }
 
     onChangeFilter(filter) {
+        filter = filter.toLowerCase(); // filter is case insensitive stored lower-case
         for (const cat of this.categories) {
             let emojis;
             // If the new filter string includes the old filter string, we don't have to re-filter the whole dataset.

src/components/views/settings/tabs/user/GeneralUserSettingsTab.js

@@ -49,8 +49,6 @@ export default class GeneralUserSettingsTab extends React.Component {
 
         this.state = {
             language: languageHandler.getCurrentLanguage(),
-            theme: SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme"),
-            useSystemTheme: SettingsStore.getValueAt(SettingLevel.DEVICE, "use_system_theme"),
             haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl()),
             serverSupportsSeparateAddAndBind: null,
             idServerHasUnsignedTerms: false,
@@ -62,6 +60,7 @@ export default class GeneralUserSettingsTab extends React.Component {
             },
             emails: [],
             msisdns: [],
+            ...this._calculateThemeState(),
         };
 
         this.dispatcherRef = dis.register(this._onAction);
@@ -80,6 +79,39 @@ export default class GeneralUserSettingsTab extends React.Component {
         dis.unregister(this.dispatcherRef);
     }
 
+    _calculateThemeState() {
+        // We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
+        // show the right values for things.
+
+        const themeChoice = SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme");
+        const systemThemeExplicit = SettingsStore.getValueAt(
+            SettingLevel.DEVICE, "use_system_theme", null, false, true);
+        const themeExplicit = SettingsStore.getValueAt(
+            SettingLevel.DEVICE, "theme", null, false, true);
+
+        // If the user has enabled system theme matching, use that.
+        if (systemThemeExplicit) {
+            return {
+                theme: themeChoice,
+                useSystemTheme: true,
+            };
+        }
+
+        // If the user has set a theme explicitly, use that (no system theme matching)
+        if (themeExplicit) {
+            return {
+                theme: themeChoice,
+                useSystemTheme: false,
+            };
+        }
+
+        // Otherwise assume the defaults for the settings
+        return {
+            theme: themeChoice,
+            useSystemTheme: SettingsStore.getValueAt(SettingLevel.DEVICE, "use_system_theme"),
+        };
+    }
+
     _onAction = (payload) => {
         if (payload.action === 'id_server_changed') {
             this.setState({haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl())});
@@ -89,11 +121,11 @@ export default class GeneralUserSettingsTab extends React.Component {
 
     _onEmailsChange = (emails) => {
         this.setState({ emails });
-    }
+    };
 
     _onMsisdnsChange = (msisdns) => {
         this.setState({ msisdns });
-    }
+    };
 
     async _getThreepidState() {
         const cli = MatrixClientPeg.get();
@@ -193,9 +225,9 @@ export default class GeneralUserSettingsTab extends React.Component {
 
     _onUseSystemThemeChanged = (checked) => {
         this.setState({useSystemTheme: checked});
+        SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, checked);
         dis.dispatch({action: 'recheck_theme'});
-    }
-
+    };
 
     _onPasswordChangeError = (err) => {
         // TODO: Figure out a design that doesn't involve replacing the current dialog
@@ -307,12 +339,15 @@ export default class GeneralUserSettingsTab extends React.Component {
 
     _renderThemeSection() {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+        const LabelledToggleSwitch = sdk.getComponent("views.elements.LabelledToggleSwitch");
 
         const themeWatcher = new ThemeWatcher();
         let systemThemeSection;
         if (themeWatcher.isSystemThemeSupported()) {
             systemThemeSection = <div>
-                <SettingsFlag name="use_system_theme" level={SettingLevel.DEVICE}
+                <LabelledToggleSwitch
+                    value={this.state.useSystemTheme}
+                    label={SettingsStore.getDisplayName("use_system_theme")}
                     onChange={this._onUseSystemThemeChanged}
                 />
             </div>;

src/components/views/settings/tabs/user/LabsUserSettingsTab.js

@@ -49,6 +49,17 @@ export default class LabsUserSettingsTab extends React.Component {
         return (
             <div className="mx_SettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Labs")}</div>
+                <div className='mx_SettingsTab_subsectionText'>
+                    {
+                        _t('Customise your experience with experimental labs features. ' +
+                            '<a>Learn more</a>.', {}, {
+                            'a': (sub) => {
+                                return <a href="https://github.com/vector-im/riot-web/blob/develop/docs/labs.md"
+                                    rel='noopener' target='_blank'>{sub}</a>;
+                            },
+                        })
+                    }
+                </div>
                 <div className="mx_SettingsTab_section">
                     {flags}
                     <SettingsFlag name={"enableWidgetScreenshots"} level={SettingLevel.ACCOUNT} />