Merge branch 'develop' into travis/sssssssnake_case_config

Author: turt2live

res/css/_components.scss

@@ -4,6 +4,7 @@
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
 @import "./_spacing.scss";
+@import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
 @import "./components/views/location/_LocationShareMenu.scss";
 @import "./components/views/location/_MapError.scss";
 @import "./components/views/location/_ShareDialogButtons.scss";

res/css/components/views/beacon/_LeftPanelLiveShareWarning.scss

@@ -0,0 +1,31 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+.mx_LeftPanelLiveShareWarning {
+    width: 100%;
+    box-sizing: border-box;
+
+    padding: $spacing-4;
+    text-align: center;
+
+    background-color: $accent;
+    color: #fff;
+    font-size: $font-10px;
+
+    // panel backdrops overlay the whole sidepanel
+    // go above to get hover for title
+    z-index: 1;
+}

res/css/components/views/location/_ShareType.scss

@@ -84,9 +84,7 @@ limitations under the License.
     border-radius: 50%;
 
     &.Own {
-        // color is set by user color class
-        // generated from id
-        border-color: currentColor;
+        border-color: $accent;
     }
 
     &.Live {

res/css/structures/_LeftPanel.scss

@@ -23,13 +23,20 @@ $roomListCollapsedWidth: 68px;
     }
 }
 
-.mx_LeftPanel_wrapper {
+.mx_LeftPanel_outerWrapper {
     display: flex;
+    flex-direction: column;
     max-width: 50%;
     position: relative;
 
     // Contain the amount of layers rendered by constraining what actually needs re-layering via css
     contain: layout paint;
+}
+
+.mx_LeftPanel_wrapper {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
 
     .mx_LeftPanel_wrapper--user {
         background-color: $roomlist-bg-color;

res/css/structures/_MatrixChat.scss

@@ -63,7 +63,7 @@ limitations under the License.
 }
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) {
     background-color: $background;
 
     flex: 1 1 0;

res/css/views/dialogs/_InviteDialog.scss

@@ -275,8 +275,22 @@ limitations under the License.
     height: 600px;
     padding-left: 20px; // the design wants some padding on the left
 
-    .mx_InviteDialog_userSections {
-        height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
+    .mx_InviteDialog_addressBar {
+        margin-right: 0;
+    }
+
+    .mx_InviteDialog_content {
+        padding-right: 20px; // same padding on the right
+
+        .mx_InviteDialog_userSections {
+            height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
+            padding-right: 0;
+
+            .mx_InviteDialog_section {
+                padding-bottom: 0;
+                margin-top: 12px;
+            }
+        }
     }
 }
 

res/css/views/location/_LocationPicker.scss

@@ -62,8 +62,8 @@ limitations under the License.
             width: 31px;
             height: 31px;
             border-radius: 50%;
-            background-color: $accent;
             filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
+            background-color: currentColor;
 
             display: flex;
             align-items: center;
@@ -87,7 +87,7 @@ limitations under the License.
                 width: 9px;
                 height: 5px;
                 position: absolute;
-                background-color: $accent;
+                background-color: currentColor;
             }
         }
     }
@@ -135,3 +135,11 @@ limitations under the License.
     width: 100%;
     height: 48px;
 }
+
+// live marker color is set by user color class
+// generated from userid
+// others are $accent
+.mx_MLocationBody_marker-Self,
+.mx_MLocationBody_marker-Pin {
+    color: $accent;
+}

src/accessibility/KeyboardShortcuts.ts

@@ -41,6 +41,10 @@ export enum KeyBindingAction {
     FormatBold = 'KeyBinding.toggleBoldInComposer',
     /** Set italics format the current selection */
     FormatItalics = 'KeyBinding.toggleItalicsInComposer',
+    /** Insert link for current selection */
+    FormatLink = 'KeyBinding.FormatLink',
+    /** Set code format for current selection */
+    FormatCode = 'KeyBinding.FormatCode',
     /** Format the current selection as quote */
     FormatQuote = 'KeyBinding.toggleQuoteInComposer',
     /** Undo the last editing */
@@ -210,6 +214,8 @@ export const CATEGORIES: Record<CategoryName, ICategory> = {
             KeyBindingAction.FormatBold,
             KeyBindingAction.FormatItalics,
             KeyBindingAction.FormatQuote,
+            KeyBindingAction.FormatLink,
+            KeyBindingAction.FormatCode,
             KeyBindingAction.EditUndo,
             KeyBindingAction.EditRedo,
             KeyBindingAction.MoveCursorToStart,
@@ -337,6 +343,21 @@ export const KEYBOARD_SHORTCUTS: IKeyboardShortcuts = {
         },
         displayName: _td("Toggle Quote"),
     },
+    [KeyBindingAction.FormatCode]: {
+        default: {
+            ctrlOrCmdKey: true,
+            key: Key.E,
+        },
+        displayName: _td("Toggle Code Block"),
+    },
+    [KeyBindingAction.FormatLink]: {
+        default: {
+            ctrlOrCmdKey: true,
+            shiftKey: true,
+            key: Key.L,
+        },
+        displayName: _td("Toggle Link"),
+    },
     [KeyBindingAction.CancelReplyOrEdit]: {
         default: {
             key: Key.ESCAPE,

src/components/structures/LoggedInView.tsx

@@ -76,6 +76,7 @@ import { TimelineRenderingType } from "../../contexts/RoomContext";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload";
 import { IConfigOptions } from "../../IConfigOptions";
+import LeftPanelLiveShareWarning from '../views/beacon/LeftPanelLiveShareWarning';
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -690,8 +691,10 @@ class LoggedInView extends React.Component<IProps, IState> {
                 >
                     <ToastContainer />
                     <div className={bodyClasses}>
-                        <div className='mx_LeftPanel_wrapper'>
-                            { SettingsStore.getValue('TagPanel.enableTagPanel') &&
+                        <div className='mx_LeftPanel_outerWrapper'>
+                            <LeftPanelLiveShareWarning isMinimized={this.props.collapseLhs || false} />
+                            <div className='mx_LeftPanel_wrapper'>
+                                { SettingsStore.getValue('TagPanel.enableTagPanel') &&
                                 (<div className="mx_GroupFilterPanelContainer">
                                     <BackdropPanel
                                         blurMultiplier={0.5}
@@ -700,26 +703,27 @@ class LoggedInView extends React.Component<IProps, IState> {
                                     <GroupFilterPanel />
                                     { SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null }
                                 </div>)
-                            }
-                            { SpaceStore.spacesEnabled ? <>
+                                }
+                                { SpaceStore.spacesEnabled ? <>
+                                    <BackdropPanel
+                                        blurMultiplier={0.5}
+                                        backgroundImage={this.state.backgroundImage}
+                                    />
+                                    <SpacePanel />
+                                </> : null }
                                 <BackdropPanel
-                                    blurMultiplier={0.5}
                                     backgroundImage={this.state.backgroundImage}
                                 />
-                                <SpacePanel />
-                            </> : null }
-                            <BackdropPanel
-                                backgroundImage={this.state.backgroundImage}
-                            />
-                            <div
-                                className="mx_LeftPanel_wrapper--user"
-                                ref={this._resizeContainer}
-                                data-collapsed={this.props.collapseLhs ? true : undefined}
-                            >
-                                <LeftPanel
-                                    isMinimized={this.props.collapseLhs || false}
-                                    resizeNotifier={this.props.resizeNotifier}
-                                />
+                                <div
+                                    className="mx_LeftPanel_wrapper--user"
+                                    ref={this._resizeContainer}
+                                    data-collapsed={this.props.collapseLhs ? true : undefined}
+                                >
+                                    <LeftPanel
+                                        isMinimized={this.props.collapseLhs || false}
+                                        resizeNotifier={this.props.resizeNotifier}
+                                    />
+                                </div>
                             </div>
                         </div>
                         <ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />

src/components/structures/MatrixChat.tsx

@@ -133,6 +133,7 @@ import { DoAfterSyncPreparedPayload } from '../../dispatcher/payloads/DoAfterSyn
 import { ViewStartChatOrReusePayload } from '../../dispatcher/payloads/ViewStartChatOrReusePayload';
 import { IConfigOptions } from "../../IConfigOptions";
 import { SnakedObject } from "../../utils/SnakedObject";
+import InfoDialog from '../views/dialogs/InfoDialog';
 
 // legacy export
 export { default as Views } from "../../Views";
@@ -1460,6 +1461,36 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 showNotificationsToast(false);
             }
 
+            if (!localStorage.getItem("mx_seen_feature_thread_experimental")) {
+                setTimeout(() => {
+                    if (SettingsStore.getValue("feature_thread") && SdkConfig.get()['showLabsSettings']) {
+                        Modal.createDialog(InfoDialog, {
+                            title: _t("Threads are no longer experimental! 🎉"),
+                            description: <>
+                                <p>
+                                    { _t("We’ve recently introduced key stability "
+                                    + "improvements for Threads, which also means "
+                                    + "phasing out support for experimental Threads.") }
+                                </p>
+                                <p>
+                                    { _t("All thread events created during the "
+                                    + "experimental period will now be rendered in "
+                                    + "the room timeline and displayed as replies. "
+                                    + "This is a one-off transition. Threads are now "
+                                    + "part of the Matrix specification.") }
+                                </p>
+                                <p>
+                                    { _t("Thank you for helping us testing Threads!") }
+                                </p>
+                            </>,
+                            onFinished: () => {
+                                localStorage.setItem("mx_seen_feature_thread_experimental", "true");
+                            },
+                        });
+                    }
+                }, 1 * 60 * 1000); // show after 1 minute to not overload user on launch
+            }
+
             if (!localStorage.getItem("mx_seen_feature_spotlight_toast")) {
                 setTimeout(() => {
                     // Skip the toast if the beta is already enabled or the user has changed the setting from default