Merge branch 'develop' into fix-notif-jumpy-ui

Author: SimonBrandner

CHANGELOG.md

@@ -1,3 +1,10 @@
+Changes in [3.13.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.13.1) (2021-02-04)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.13.0...v3.13.1)
+
+ * [Release] Fix z-index of stickerpicker
+   [\#5618](https://github.com/matrix-org/matrix-react-sdk/pull/5618)
+
 Changes in [3.13.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.13.0) (2021-02-03)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.13.0-rc.1...v3.13.0)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.13.0",
+  "version": "3.13.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

res/css/_common.scss

@@ -21,6 +21,11 @@ limitations under the License.
 
 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
 
+$EventTile_e2e_state_indicator_width: 4px;
+
+$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
+$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width);
+
 :root {
     font-size: 10px;
 }

res/css/_components.scss

@@ -106,6 +106,7 @@
 @import "./views/elements/_AddressTile.scss";
 @import "./views/elements/_DesktopBuildsNotice.scss";
 @import "./views/elements/_DirectorySearchBox.scss";
+@import "./views/elements/_DesktopCapturerSourcePicker.scss";
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_ErrorBoundary.scss";

res/css/structures/_RoomDirectory.scss

@@ -64,28 +64,23 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_table {
-    font-size: $font-12px;
     color: $primary-fg-color;
-    width: 100%;
+    display: grid;
+    font-size: $font-12px;
+    grid-template-columns: max-content auto max-content max-content max-content;
+    row-gap: 24px;
     text-align: left;
-    table-layout: fixed;
+    width: 100%;
 }
 
 .mx_RoomDirectory_roomAvatar {
-    width: 32px;
-    padding-right: 14px;
-    vertical-align: top;
-}
-
-.mx_RoomDirectory_roomDescription {
-    padding-bottom: 16px;
+    padding: 2px 14px 0 0;
 }
 
 .mx_RoomDirectory_roomMemberCount {
+    align-self: center;
     color: $light-fg-color;
-    width: 60px;
-    padding: 0 10px;
-    text-align: center;
+    padding: 3px 10px 0;
 
     &::before {
         background-color: $light-fg-color;
@@ -105,8 +100,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_join, .mx_RoomDirectory_preview {
-    width: 80px;
-    text-align: center;
+    align-self: center;
     white-space: nowrap;
 }
 

res/css/views/elements/_DesktopCapturerSourcePicker.scss

@@ -0,0 +1,72 @@
+/*
+Copyright 2021 Šimon Brandner <[email protected]>
+
+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_desktopCapturerSourcePicker {
+    overflow: hidden;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabels {
+    display: flex;
+    padding: 0 0 8px 0;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabel,
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+    width: 100%;
+    text-align: center;
+    border-radius: 8px;
+    padding: 8px 0;
+    font-size: $font-13px;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+    background-color: $tab-label-active-bg-color;
+    color: $tab-label-active-fg-color;
+}
+
+.mx_desktopCapturerSourcePicker_panel {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+    height: 500px;
+    overflow: overlay;
+}
+
+.mx_desktopCapturerSourcePicker_stream_button {
+    display: flex;
+    flex-direction: column;
+    margin: 8px;
+    border-radius: 4px;
+}
+
+.mx_desktopCapturerSourcePicker_stream_button:hover,
+.mx_desktopCapturerSourcePicker_stream_button:focus {
+    background: $roomtile-selected-bg-color;
+}
+
+.mx_desktopCapturerSourcePicker_stream_thumbnail {
+    margin: 4px;
+    width: 312px;
+}
+
+.mx_desktopCapturerSourcePicker_stream_name {
+    margin: 0 4px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 312px;
+}

res/css/views/messages/_RedactedBody.scss

@@ -30,7 +30,7 @@ limitations under the License.
         mask-size: contain;
         content: '';
         position: absolute;
-        top: 2px;
+        top: 1px;
         left: 0;
     }
 }

res/css/views/rooms/_EventTile.scss

@@ -26,7 +26,7 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile.mx_EventTile_info {
-    padding-top: 0px;
+    padding-top: 1px;
 }
 
 .mx_EventTile_avatar {
@@ -37,7 +37,7 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
-    top: $font-8px;
+    top: $font-6px;
     left: $left-gutter;
 }
 
@@ -420,15 +420,15 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
-    border-left: $e2e-verified-color 4px solid;
+    border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
-    border-left: $e2e-unverified-color 4px solid;
+    border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
-    border-left: $e2e-unknown-color 4px solid;
+    border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
@@ -446,8 +446,7 @@ $left-gutter: 64px;
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
 .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
-    left: 3px;
-    width: auto;
+    width: $MessageTimestamp_width_hover;
 }
 
 // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)

res/css/views/rooms/_GroupLayout.scss

@@ -34,7 +34,7 @@ $left-gutter: 64px;
 
         .mx_MessageTimestamp {
             position: absolute;
-            width: 46px; /* 8 + 30 (avatar) + 8 */
+            width: $MessageTimestamp_width;
         }
 
         .mx_EventTile_line, .mx_EventTile_reply {

src/CallHandler.tsx

@@ -82,6 +82,7 @@ import CountlyAnalytics from "./CountlyAnalytics";
 import {UIFeature} from "./settings/UIFeature";
 import { CallError } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from 'matrix-js-sdk/src/logger';
+import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker"
 import { Action } from './dispatcher/actions';
 import { roomForVirtualRoom, getOrCreateVirtualRoomForRoom } from './VoipUserMapper';
 import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from './widgets/ManagedHybrid';
@@ -572,7 +573,15 @@ export default class CallHandler {
                 });
                 return;
             }
-            call.placeScreenSharingCall(remoteElement, localElement);
+
+            call.placeScreenSharingCall(
+                remoteElement,
+                localElement,
+                async () : Promise<DesktopCapturerSource> => {
+                    const {finished} = Modal.createDialog(DesktopCapturerSourcePicker);
+                    const [source] = await finished;
+                    return source;
+                });
         } else {
             console.error("Unknown conf call type: %s", type);
         }