Merge branch 'develop' into develop

Author: t3chguy

__mocks__/maplibre-gl.js

@@ -4,6 +4,10 @@ const { LngLat, NavigationControl } = require('maplibre-gl');
 class MockMap extends EventEmitter {
     addControl = jest.fn();
     removeControl = jest.fn();
+    zoomIn = jest.fn();
+    zoomOut = jest.fn();
+    setCenter = jest.fn();
+    setStyle = jest.fn();
 }
 const MockMapInstance = new MockMap();
 
@@ -14,10 +18,11 @@ const MockGeolocateInstance = new MockGeolocateControl();
 const MockMarker = {}
 MockMarker.setLngLat = jest.fn().mockReturnValue(MockMarker);
 MockMarker.addTo = jest.fn().mockReturnValue(MockMarker);
+MockMarker.remove = jest.fn().mockReturnValue(MockMarker);
 module.exports = {
     Map: jest.fn().mockReturnValue(MockMapInstance),
     GeolocateControl: jest.fn().mockReturnValue(MockGeolocateInstance),
     Marker: jest.fn().mockReturnValue(MockMarker),
     LngLat,
-    NavigationControl
+    NavigationControl,
 };

docs/slate-formats.md

@@ -13,6 +13,7 @@
 @import "./components/views/location/_Marker.scss";
 @import "./components/views/location/_ShareDialogButtons.scss";
 @import "./components/views/location/_ShareType.scss";
+@import "./components/views/location/_ZoomButtons.scss";
 @import "./components/views/spaces/_QuickThemeSwitcher.scss";
 @import "./structures/_AutoHideScrollbar.scss";
 @import "./structures/_BackdropPanel.scss";

res/css/_components.scss

@@ -0,0 +1,45 @@
+/*
+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_ZoomButtons {
+    position: absolute;
+    bottom: $spacing-32;
+    right: $spacing-24;
+}
+
+.mx_ZoomButtons_button {
+    @mixin ButtonResetDefault;
+
+    margin-top: $spacing-8;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    height: 24px;
+    width: 24px;
+
+    background: $background;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+.mx_ZoomButtons_icon {
+    height: 10px;
+    width: 10px;
+
+    color: $primary-content;
+}

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

@@ -48,49 +48,10 @@ limitations under the License.
             background-color: $dialog-close-external-color;
         }
     }
+}
 
-    .mx_MLocationBody {
-        position: absolute;
-
-        .mx_MLocationBody_map {
-            width: 80vw;
-            height: 80vh;
-        }
-
-        .mx_MLocationBody_zoomButtons {
-            position: absolute;
-            display: grid;
-            grid-template-columns: auto;
-            grid-row-gap: 8px;
-
-            right: 24px;
-            bottom: 48px;
-
-            .mx_AccessibleButton {
-                background-color: $background;
-                box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
-                border-radius: 4px;
-                width: 24px;
-                height: 24px;
-
-                .mx_MLocationBody_zoomButton {
-                    background-color: $primary-content;
-                    margin: 4px;
-                    width: 16px;
-                    height: 16px;
-                    mask-repeat: no-repeat;
-                    mask-size: contain;
-                    mask-position: center;
-                }
-
-                .mx_MLocationBody_plusButton {
-                    mask-image: url('$(res)/img/element-icons/plus-button.svg');
-                }
-
-                .mx_MLocationBody_minusButton {
-                    mask-image: url('$(res)/img/element-icons/minus-button.svg');
-                }
-            }
-        }
-    }
+.mx_LocationViewDialog_map {
+    width: 80vw;
+    height: 80vh;
+    border-radius: 8px;
 }

res/css/views/dialogs/_LocationViewDialog.scss

@@ -317,16 +317,7 @@ function textForMessageEvent(ev: MatrixEvent): () => string | null {
         const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
         let message = ev.getContent().body;
         if (ev.isRedacted()) {
-            message = _t("Message deleted");
-            const unsigned = ev.getUnsigned();
-            const redactedBecauseUserId = unsigned?.redacted_because?.sender;
-            if (redactedBecauseUserId && redactedBecauseUserId !== ev.getSender()) {
-                const room = MatrixClientPeg.get().getRoom(ev.getRoomId());
-                const sender = room?.getMember(redactedBecauseUserId);
-                message = _t("Message deleted by %(name)s", {
-                    name: sender?.name || redactedBecauseUserId,
-                });
-            }
+            message = textForRedactedPollAndMessageEvent(ev);
         }
 
         if (SettingsStore.isEnabled("feature_extensible_events")) {
@@ -727,11 +718,38 @@ export function textForLocationEvent(event: MatrixEvent): () => string | null {
     });
 }
 
+function textForRedactedPollAndMessageEvent(ev: MatrixEvent): string {
+    let message = _t("Message deleted");
+    const unsigned = ev.getUnsigned();
+    const redactedBecauseUserId = unsigned?.redacted_because?.sender;
+    if (redactedBecauseUserId && redactedBecauseUserId !== ev.getSender()) {
+        const room = MatrixClientPeg.get().getRoom(ev.getRoomId());
+        const sender = room?.getMember(redactedBecauseUserId);
+        message = _t("Message deleted by %(name)s", {
+            name: sender?.name || redactedBecauseUserId,
+        });
+    }
+
+    return message;
+}
+
 function textForPollStartEvent(event: MatrixEvent): () => string | null {
-    return () => _t("%(senderName)s has started a poll - %(pollQuestion)s", {
-        senderName: getSenderName(event),
-        pollQuestion: (event.unstableExtensibleEvent as PollStartEvent)?.question?.text,
-    });
+    return () => {
+        let message = '';
+
+        if (event.isRedacted()) {
+            message = textForRedactedPollAndMessageEvent(event);
+            const senderDisplayName = event.sender?.name ?? event.getSender();
+            message = senderDisplayName + ': ' + message;
+        } else {
+            message = _t("%(senderName)s has started a poll - %(pollQuestion)s", {
+                senderName: getSenderName(event),
+                pollQuestion: (event.unstableExtensibleEvent as PollStartEvent)?.question?.text,
+            });
+        }
+
+        return message;
+    };
 }
 
 function textForPollEndEvent(event: MatrixEvent): () => string | null {

res/img/element-icons/minus-button.svg

@@ -225,6 +225,7 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
         return (
             <div className="mx_LocationPicker">
                 <div id="mx_LocationPicker_map" />
+
                 { this.props.shareType === LocationShareType.Pin && <div className="mx_LocationPicker_pinText">
                     <span>
                         { this.state.position ? _t("Click to move the pin") : _t("Click to drop a pin") }