Merge branch 't3chguy/fix/21800' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/21800

Author: t3chguy

res/css/_common.scss

@@ -692,3 +692,9 @@ legend {
         }
     }
 }
+
+@define-mixin ListResetDefault {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}

res/css/_components.scss

@@ -6,6 +6,7 @@
 @import "./_spacing.scss";
 @import "./components/views/beacon/_BeaconStatus.scss";
 @import "./components/views/beacon/_BeaconViewDialog.scss";
+@import "./components/views/beacon/_DialogSidebar.scss";
 @import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
 @import "./components/views/beacon/_LiveTimeRemaining.scss";
 @import "./components/views/beacon/_OwnBeaconStatus.scss";

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

@@ -29,6 +29,9 @@ limitations under the License.
     height: calc(80vh - 0.5px);
     overflow: hidden;
 
+    // sidebar is absolutely positioned inside
+    position: relative;
+
     .mx_Dialog_header {
         margin: 0px;
         padding: 0px;
@@ -40,7 +43,7 @@ limitations under the License.
 
         .mx_Dialog_cancelButton {
             z-index: 4010;
-            position: absolute;
+            position: fixed;
             right: 5vw;
             top: 5vh;
             width: 20px;
@@ -77,3 +80,9 @@ limitations under the License.
     color: $secondary-content;
     margin-bottom: $spacing-16;
 }
+
+.mx_BeaconViewDialog_viewListButton {
+    position: absolute;
+    top: $spacing-24;
+    left: $spacing-24;
+}

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

@@ -0,0 +1,57 @@
+/*
+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_DialogSidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 265px;
+
+    box-sizing: border-box;
+    padding: $spacing-16;
+
+    background-color: $background;
+    box-shadow: 0px 4px 4px $menu-box-shadow-color;
+}
+
+.mx_DialogSidebar_header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    flex: 0;
+    margin-bottom: $spacing-16;
+
+    color: $primary-content;
+}
+
+.mx_DialogSidebar_closeButton {
+    @mixin ButtonResetDefault;
+}
+
+.mx_DialogSidebar_closeButtonIcon {
+    color: $tertiary-content;
+    height: 12px;
+}
+
+.mx_DialogSidebar_list {
+    @mixin ListResetDefault;
+    flex: 1 1 0;
+    width: 100%;
+    overflow: auto;
+}

res/css/views/elements/_SettingsFlag.scss

@@ -41,4 +41,10 @@ limitations under the License.
     font-size: $font-12px;
     line-height: $font-15px;
     color: $secondary-content;
+
+    // Support code/pre elements in settings flag descriptions
+    pre, code {
+        font-family: $monospace-font-family !important;
+        background-color: $rte-code-bg-color;
+    }
 }

res/css/views/rooms/_RoomHeader.scss

@@ -141,17 +141,24 @@ limitations under the License.
 }
 
 .mx_RoomHeader_topic {
+    $lineHeight: $font-16px;
+    $lines: 2;
+
     flex: 1;
     color: $roomtopic-color;
     font-weight: 400;
     font-size: $font-13px;
+    line-height: $lineHeight;
+    max-height: calc($lineHeight * $lines);
+    border-bottom: 1px solid transparent;
+
     // to align baseline of topic with room name
     margin: 4px 7px 0;
+
     overflow: hidden;
-    text-overflow: ellipsis;
-    border-bottom: 1px solid transparent;
-    line-height: 1.2em;
-    max-height: 2.4em;
+    -webkit-line-clamp: $lines; // See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
 }
 
 .mx_RoomHeader_avatar {

res/css/views/typography/_Heading.scss

@@ -37,3 +37,11 @@ limitations under the License.
     margin-inline: unset;
     margin-block: unset;
 }
+
+.mx_Heading_h4 {
+    font-size: $font-15px;
+    font-weight: $font-semi-bold;
+    line-height: $font-20px;
+    margin-inline: unset;
+    margin-block: unset;
+}

src/components/views/beacon/BeaconViewDialog.tsx

@@ -14,14 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import {
     Beacon,
     Room,
 } from 'matrix-js-sdk/src/matrix';
 import maplibregl from 'maplibre-gl';
 
+import { Icon as LiveLocationIcon } from '../../../../res/img/location/live-location.svg';
 import { useLiveBeacons } from '../../../utils/beacon/useLiveBeacons';
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import BaseDialog from "../dialogs/BaseDialog";
@@ -34,6 +35,7 @@ import { getGeoUri } from '../../../utils/beacon';
 import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
+import DialogSidebar from './DialogSidebar';
 
 interface IProps extends IDialogProps {
     roomId: Room['roomId'];
@@ -64,6 +66,8 @@ const BeaconViewDialog: React.FC<IProps> = ({
 }) => {
     const liveBeacons = useLiveBeacons(roomId, matrixClient);
 
+    const [isSidebarOpen, setSidebarOpen] = useState(false);
+
     const bounds = getBeaconBounds(liveBeacons);
     const centerGeoUri = focusBeacon?.latestLocationState?.uri || getBoundsCenter(bounds);
 
@@ -108,6 +112,18 @@ const BeaconViewDialog: React.FC<IProps> = ({
                         </AccessibleButton>
                     </div>
                 }
+                { isSidebarOpen ?
+                    <DialogSidebar beacons={liveBeacons} requestClose={() => setSidebarOpen(false)} /> :
+                    <AccessibleButton
+                        kind='primary'
+                        onClick={() => setSidebarOpen(true)}
+                        data-test-id='beacon-view-dialog-open-sidebar'
+                        className='mx_BeaconViewDialog_viewListButton'
+                    >
+                        <LiveLocationIcon height={12} />&nbsp;
+                        { _t('View list') }
+                    </AccessibleButton>
+                }
             </MatrixClientContext.Provider>
         </BaseDialog>
     );

src/components/views/beacon/DialogSidebar.tsx

@@ -0,0 +1,50 @@
+/*
+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.
+*/
+
+import React from 'react';
+import { Beacon } from 'matrix-js-sdk/src/matrix';
+
+import { Icon as CloseIcon } from '../../../../res/img/image-view/close.svg';
+import { _t } from '../../../languageHandler';
+import AccessibleButton from '../elements/AccessibleButton';
+import Heading from '../typography/Heading';
+
+interface Props {
+    beacons: Beacon[];
+    requestClose: () => void;
+}
+
+const DialogSidebar: React.FC<Props> = ({ beacons, requestClose }) => {
+    return <div className='mx_DialogSidebar'>
+        <div className='mx_DialogSidebar_header'>
+            <Heading size='h4'>{ _t('View List') }</Heading>
+            <AccessibleButton
+                className='mx_DialogSidebar_closeButton'
+                onClick={requestClose}
+                title={_t('Close sidebar')}
+                data-test-id='dialog-sidebar-close'
+            >
+                <CloseIcon className='mx_DialogSidebar_closeButtonIcon' />
+            </AccessibleButton>
+        </div>
+        <ol className='mx_DialogSidebar_list'>
+            { /* TODO nice elements */ }
+            { beacons.map((beacon, index) => <li key={beacon.identifier}>{ index }</li>) }
+        </ol>
+    </div>;
+};
+
+export default DialogSidebar;

src/components/views/context_menus/MessageContextMenu.tsx

@@ -397,16 +397,14 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let viewSourceButton: JSX.Element;
-        if (SettingsStore.getValue("developerMode")) {
-            viewSourceButton = (
-                <IconizedContextMenuOption
-                    iconClassName="mx_MessageContextMenu_iconSource"
-                    label={_t("View source")}
-                    onClick={this.onViewSourceClick}
-                />
-            );
-        }
+        // This is specifically not behind the developerMode flag to give people insight into the Matrix
+        const viewSourceButton = (
+            <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconSource"
+                label={_t("View source")}
+                onClick={this.onViewSourceClick}
+            />
+        );
 
         let unhidePreviewButton: JSX.Element;
         if (eventTileOps?.isWidgetHidden()) {

src/components/views/dialogs/devtools/ServerInfo.tsx

@@ -74,13 +74,13 @@ const ServerInfo = ({ onBack }: IDevtoolsProps) => {
             }
 
             <h4>{ _t("Client Versions") }</h4>
-            { capabilities !== FAILED_TO_LOAD
+            { clientVersions !== FAILED_TO_LOAD
                 ? <SyntaxHighlight language="json" children={JSON.stringify(clientVersions, null, 4)} />
                 : <div>{ _t("Failed to load.") }</div>
             }
 
             <h4>{ _t("Server Versions") }</h4>
-            { capabilities !== FAILED_TO_LOAD
+            { serverVersions !== FAILED_TO_LOAD
                 ? <SyntaxHighlight language="json" children={JSON.stringify(serverVersions, null, 4)} />
                 : <div>{ _t("Failed to load.") }</div>
             }

src/components/views/messages/UnknownBody.tsx

@@ -23,12 +23,12 @@ interface IProps {
     children?: React.ReactNode;
 }
 
-export default forwardRef(({ mxEvent, children }: IProps, ref: React.RefObject<HTMLSpanElement>) => {
+export default forwardRef(({ mxEvent, children }: IProps, ref: React.RefObject<HTMLDivElement>) => {
     const text = mxEvent.getContent().body;
     return (
-        <span className="mx_UnknownBody" ref={ref}>
+        <div className="mx_UnknownBody" ref={ref}>
             { text }
             { children }
-        </span>
+        </div>
     );
 });

src/components/views/rooms/BasicMessageComposer.tsx

@@ -103,6 +103,7 @@ interface IProps {
 }
 
 interface IState {
+    useMarkdown: boolean;
     showPillAvatar: boolean;
     query?: string;
     showVisualBell?: boolean;
@@ -124,6 +125,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     private lastCaret: DocumentOffset;
     private lastSelection: ReturnType<typeof cloneSelection>;
 
+    private readonly useMarkdownHandle: string;
     private readonly emoticonSettingHandle: string;
     private readonly shouldShowPillAvatarSettingHandle: string;
     private readonly surroundWithHandle: string;
@@ -133,10 +135,13 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         super(props);
         this.state = {
             showPillAvatar: SettingsStore.getValue("Pill.shouldShowPillAvatar"),
+            useMarkdown: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
             surroundWith: SettingsStore.getValue("MessageComposerInput.surroundWith"),
             showVisualBell: false,
         };
 
+        this.useMarkdownHandle = SettingsStore.watchSetting('MessageComposerInput.useMarkdown', null,
+            this.configureUseMarkdown);
         this.emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null,
             this.configureEmoticonAutoReplace);
         this.configureEmoticonAutoReplace();
@@ -442,7 +447,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             }
         } else if (!selection.isCollapsed && !isEmpty) {
             this.hasTextSelected = true;
-            if (this.formatBarRef.current) {
+            if (this.formatBarRef.current && this.state.useMarkdown) {
                 const selectionRect = selection.getRangeAt(0).getBoundingClientRect();
                 this.formatBarRef.current.showAt(selectionRect);
             }
@@ -630,6 +635,14 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.setState({ completionIndex });
     };
 
+    private configureUseMarkdown = (): void => {
+        const useMarkdown = SettingsStore.getValue("MessageComposerInput.useMarkdown");
+        this.setState({ useMarkdown });
+        if (!useMarkdown && this.formatBarRef.current) {
+            this.formatBarRef.current.hide();
+        }
+    };
+
     private configureEmoticonAutoReplace = (): void => {
         this.props.model.setTransformCallback(this.transform);
     };
@@ -654,6 +667,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.editorRef.current.removeEventListener("input", this.onInput, true);
         this.editorRef.current.removeEventListener("compositionstart", this.onCompositionStart, true);
         this.editorRef.current.removeEventListener("compositionend", this.onCompositionEnd, true);
+        SettingsStore.unwatchSetting(this.useMarkdownHandle);
         SettingsStore.unwatchSetting(this.emoticonSettingHandle);
         SettingsStore.unwatchSetting(this.shouldShowPillAvatarSettingHandle);
         SettingsStore.unwatchSetting(this.surroundWithHandle);
@@ -694,6 +708,10 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     public onFormatAction = (action: Formatting): void => {
+        if (!this.state.useMarkdown) {
+            return;
+        }
+
         const range: Range = getRangeForSelection(this.editorRef.current, this.props.model, document.getSelection());
 
         this.historyManager.ensureLastChangesPushed(this.props.model);