Merge branch 'develop' into t3chguy/cache-settings-localstorage

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/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/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/typography/Heading.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
-type Size = 'h1' | 'h2' | 'h3';
+type Size = 'h1' | 'h2' | 'h3' | 'h4';
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     size: Size;
 }

src/i18n/strings/en_EN.json

@@ -2918,6 +2918,9 @@
     "Live location ended": "Live location ended",
     "Live location error": "Live location error",
     "No live locations": "No live locations",
+    "View list": "View list",
+    "View List": "View List",
+    "Close sidebar": "Close sidebar",
     "An error occured whilst sharing your live location": "An error occured whilst sharing your live location",
     "You are sharing your live location": "You are sharing your live location",
     "%(timeRemaining)s left": "%(timeRemaining)s left",

test/components/views/beacon/BeaconMarker-test.tsx

@@ -22,12 +22,18 @@ import {
     Beacon,
     Room,
     RoomMember,
+    MatrixEvent,
     getBeaconInfoIdentifier,
 } from 'matrix-js-sdk/src/matrix';
 
 import BeaconMarker from '../../../../src/components/views/beacon/BeaconMarker';
 import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
-import { getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } from '../../../test-utils';
+import {
+    getMockClientWithEventEmitter,
+    makeBeaconEvent,
+    makeBeaconInfoEvent,
+    makeRoomWithStateEvents,
+} from '../../../test-utils';
 import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
 
 describe('<BeaconMarker />', () => {
@@ -53,13 +59,9 @@ describe('<BeaconMarker />', () => {
 
     // make fresh rooms every time
     // as we update room state
-    const makeRoomWithStateEvents = (stateEvents = []): Room => {
-        const room1 = new Room(roomId, mockClient, aliceId);
-
-        room1.currentState.setStateEvents(stateEvents);
+    const setupRoom = (stateEvents: MatrixEvent[] = []): Room => {
+        const room1 = makeRoomWithStateEvents(stateEvents, { roomId, mockClient });
         jest.spyOn(room1, 'getMember').mockReturnValue(aliceMember);
-        mockClient.getRoom.mockReturnValue(room1);
-
         return room1;
     };
 
@@ -97,29 +99,29 @@ describe('<BeaconMarker />', () => {
     });
 
     it('renders nothing when beacon is not live', () => {
-        const room = makeRoomWithStateEvents([notLiveEvent]);
+        const room = setupRoom([notLiveEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(notLiveEvent));
         const component = getComponent({ beacon });
         expect(component.html()).toBe(null);
     });
 
     it('renders nothing when beacon has no location', () => {
-        const room = makeRoomWithStateEvents([defaultEvent]);
+        const room = setupRoom([defaultEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
         const component = getComponent({ beacon });
         expect(component.html()).toBe(null);
     });
 
     it('renders marker when beacon has location', () => {
-        const room = makeRoomWithStateEvents([defaultEvent]);
+        const room = setupRoom([defaultEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
         beacon.addLocations([location1]);
         const component = getComponent({ beacon });
         expect(component).toMatchSnapshot();
     });
 
     it('updates with new locations', () => {
-        const room = makeRoomWithStateEvents([defaultEvent]);
+        const room = setupRoom([defaultEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
         beacon.addLocations([location1]);
         const component = getComponent({ beacon });