Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/feat/widgets

 Conflicts:

	src/components/views/right_panel/WidgetCard.tsx

	src/stores/WidgetStore.ts

res/css/_components.scss

@@ -141,6 +141,7 @@
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
+@import "./views/messages/_MJitsiWidgetEvent.scss";
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";

res/css/structures/_RoomDirectory.scss

@@ -133,6 +133,10 @@ limitations under the License.
 .mx_RoomDirectory_topic {
     cursor: initial;
     color: $light-fg-color;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
 }
 
 .mx_RoomDirectory_alias {

res/css/views/messages/_MJitsiWidgetEvent.scss

@@ -0,0 +1,55 @@
+/*
+Copyright 2020 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_MJitsiWidgetEvent {
+    display: grid;
+    grid-template-columns: 24px minmax(0, 1fr) min-content;
+
+    &::before {
+        grid-column: 1;
+        grid-row: 1 / 3;
+        width: 16px;
+        height: 16px;
+        content: "";
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        background-color: $composer-e2e-icon-color; // XXX: Variable abuse
+        margin-top: 4px;
+        mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+    }
+
+    .mx_MJitsiWidgetEvent_title {
+        font-weight: 600;
+        font-size: $font-15px;
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    .mx_MJitsiWidgetEvent_subtitle {
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    .mx_MJitsiWidgetEvent_title,
+    .mx_MJitsiWidgetEvent_subtitle {
+        overflow-wrap: break-word;
+    }
+}

res/css/views/rooms/_AppsDrawer.scss

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$MiniAppTileHeight: 114px;
+$MiniAppTileHeight: 200px;
 
 .mx_AppsDrawer {
     margin: 5px 5px 5px 18px;
@@ -78,10 +78,6 @@ $MiniAppTileHeight: 114px;
     font-size: $font-12px;
 }
 
-.mx_AddWidget_button_full_width {
-    max-width: 960px;
-}
-
 .mx_SetAppURLDialog_input {
     border-radius: 3px;
     border: 1px solid $input-border-color;
@@ -92,7 +88,6 @@ $MiniAppTileHeight: 114px;
 }
 
 .mx_AppTile {
-    max-width: 960px;
     width: 50%;
     border: 5px solid $widget-menu-bar-bg-color;
     border-radius: 4px;
@@ -105,7 +100,6 @@ $MiniAppTileHeight: 114px;
 }
 
 .mx_AppTileFullWidth {
-    max-width: 960px;
     width: 100%;
     margin: 0;
     padding: 0;
@@ -116,7 +110,6 @@ $MiniAppTileHeight: 114px;
 }
 
 .mx_AppTile_mini {
-    max-width: 960px;
     width: 100%;
     margin: 0;
     padding: 0;
@@ -220,9 +213,10 @@ $MiniAppTileHeight: 114px;
 }
 
 .mx_AppTileBody_mini {
-    height: 112px;
+    height: $MiniAppTileHeight;
     width: 100%;
     overflow: hidden;
+    border-radius: 8px;
 }
 
 .mx_AppTile .mx_AppTileBody,

res/css/views/rooms/_MessageComposer.scss

@@ -217,7 +217,7 @@ limitations under the License.
         }
     }
 
-    &.mx_MessageComposer_hangup::before {
+    &.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
         background-color: $warning-color;
     }
 }

res/css/views/settings/_AvatarSetting.scss

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_AvatarSetting_avatar {
     width: 90px;
+    min-width: 90px; // so it doesn't get crushed by the flexbox in languages with longer words
     height: 90px;
     margin-top: 8px;
     position: relative;

res/css/views/voip/_CallContainer.scss

@@ -23,9 +23,16 @@ limitations under the License.
     z-index: 100;
     box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
 
-    cursor: pointer;
+    // Disable pointer events for Jitsi widgets to function. Direct
+    // calls have their own cursor and behaviour, but we need to make
+    // sure the cursor hits the iframe for Jitsi which will be at a
+    // different level.
+    pointer-events: none;
 
     .mx_CallPreview {
+        pointer-events: initial; // restore pointer events so the user can leave/interact
+        cursor: pointer;
+
         .mx_VideoView {
             width: 350px;
         }
@@ -37,7 +44,7 @@ limitations under the License.
     }
 
     .mx_AppTile_persistedWrapper div {
-        min-width: 300px;
+        min-width: 350px;
     }
 
     .mx_IncomingCallBox {
@@ -45,11 +52,14 @@ limitations under the License.
         background-color: $primary-bg-color;
         padding: 8px;
 
+        pointer-events: initial; // restore pointer events so the user can accept/decline
+        cursor: pointer;
+
         .mx_IncomingCallBox_CallerInfo {
             display: flex;
             direction: row;
 
-            img {
+            img, .mx_BaseAvatar_initial {
                 margin: 8px;
             }