Merge branch 'develop' into travis/msc-send-widget-events

Author: turt2live

CHANGELOG.md

@@ -1,3 +1,79 @@
+Changes in [3.8.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.8.0) (2020-11-09)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.8.0-rc.1...v3.8.0)
+
+ * Upgrade JS SDK to 9.1.0
+
+Changes in [3.8.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.8.0-rc.1) (2020-11-04)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.7.1...v3.8.0-rc.1)
+
+ * Upgrade JS SDK to 9.1.0-rc.1
+ * Log when saving profile
+   [\#5394](https://github.com/matrix-org/matrix-react-sdk/pull/5394)
+ * Translations update from Weblate
+   [\#5395](https://github.com/matrix-org/matrix-react-sdk/pull/5395)
+ * Hide prompt to add email for notifications if 3pid ui feature is off
+   [\#5392](https://github.com/matrix-org/matrix-react-sdk/pull/5392)
+ * Fix room list message preview copy for hangup events
+   [\#5388](https://github.com/matrix-org/matrix-react-sdk/pull/5388)
+ * Track UISIs as Countly Events
+   [\#5382](https://github.com/matrix-org/matrix-react-sdk/pull/5382)
+ * Don't let users accidentally redact ACL events
+   [\#5384](https://github.com/matrix-org/matrix-react-sdk/pull/5384)
+ * Two more easy files to remove from eslintignore
+   [\#5378](https://github.com/matrix-org/matrix-react-sdk/pull/5378)
+ * Fix Widget OpenID Permissions for realsies
+   [\#5381](https://github.com/matrix-org/matrix-react-sdk/pull/5381)
+ * Fix regression with OpenID permissions on widgets
+   [\#5380](https://github.com/matrix-org/matrix-react-sdk/pull/5380)
+ * Fix room directory events happening in the wrong order for Funnels
+   [\#5379](https://github.com/matrix-org/matrix-react-sdk/pull/5379)
+ * Remove a couple more files from eslintignore
+   [\#5377](https://github.com/matrix-org/matrix-react-sdk/pull/5377)
+ * Fix countly method bindings and errors
+   [\#5376](https://github.com/matrix-org/matrix-react-sdk/pull/5376)
+ * Fix a bunch of silly lint errors
+   [\#5375](https://github.com/matrix-org/matrix-react-sdk/pull/5375)
+ * Typescript: ImageUtils
+   [\#5374](https://github.com/matrix-org/matrix-react-sdk/pull/5374)
+ * Convert AuxPanel to TypeScript
+   [\#5373](https://github.com/matrix-org/matrix-react-sdk/pull/5373)
+ * Only pass metrics if they exist otherwise Countly will be unhappy!
+   [\#5372](https://github.com/matrix-org/matrix-react-sdk/pull/5372)
+ * Fix CountlyAnalytics NPE on MatrixClientPeg
+   [\#5370](https://github.com/matrix-org/matrix-react-sdk/pull/5370)
+ * fix CountlyAnalytics canEnable on wrong target
+   [\#5369](https://github.com/matrix-org/matrix-react-sdk/pull/5369)
+ * Initial Countly work
+   [\#5365](https://github.com/matrix-org/matrix-react-sdk/pull/5365)
+ * Fix videos not playing in non-encrypted rooms
+   [\#5368](https://github.com/matrix-org/matrix-react-sdk/pull/5368)
+ * Fix custom tag layout which regressed in #5309
+   [\#5367](https://github.com/matrix-org/matrix-react-sdk/pull/5367)
+ * Watch replyToEvent at RoomView to prevent races
+   [\#5360](https://github.com/matrix-org/matrix-react-sdk/pull/5360)
+ * Add a UI Feature flag for room history settings
+   [\#5362](https://github.com/matrix-org/matrix-react-sdk/pull/5362)
+ * Hide inline images when preference disabled
+   [\#5361](https://github.com/matrix-org/matrix-react-sdk/pull/5361)
+ * Fix React warning by moving handler to each button
+   [\#5359](https://github.com/matrix-org/matrix-react-sdk/pull/5359)
+ * Do not preload encrypted videos|images unless autoplay or thumbnailing is on
+   [\#5352](https://github.com/matrix-org/matrix-react-sdk/pull/5352)
+ * Fix theme variable passed to Jitsi
+   [\#5357](https://github.com/matrix-org/matrix-react-sdk/pull/5357)
+ * docs: added comment explanation
+   [\#5349](https://github.com/matrix-org/matrix-react-sdk/pull/5349)
+ * Modal Widgets - MSC2790
+   [\#5252](https://github.com/matrix-org/matrix-react-sdk/pull/5252)
+ * Widgets fixes
+   [\#5350](https://github.com/matrix-org/matrix-react-sdk/pull/5350)
+ * Fix User Menu avatar colouring being based on wrong string
+   [\#5348](https://github.com/matrix-org/matrix-react-sdk/pull/5348)
+ * Support 'answered elsewhere'
+   [\#5345](https://github.com/matrix-org/matrix-react-sdk/pull/5345)
+
 Changes in [3.7.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.7.1) (2020-10-28)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.7.0...v3.7.1)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -79,7 +79,7 @@
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.19",
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-    "matrix-widget-api": "^0.1.0-beta.5",
+    "matrix-widget-api": "^0.1.0-beta.8",
     "minimist": "^1.2.5",
     "pako": "^1.0.11",
     "parse5": "^5.1.1",

res/css/_common.scss

@@ -17,6 +17,7 @@ limitations under the License.
 */
 
 @import "./_font-sizes.scss";
+@import "./_font-weights.scss";
 
 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
 
@@ -323,6 +324,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 .mx_Dialog_title {
     font-size: $font-22px;
+    font-weight: $font-semi-bold;
     line-height: $font-36px;
     color: $dialog-title-fg-color;
 }
@@ -348,8 +350,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     background-color: $dialog-close-fg-color;
     cursor: pointer;
     position: absolute;
-    top: 4px;
-    right: 0px;
+    top: 10px;
+    right: 0;
 }
 
 .mx_Dialog_content {

res/css/_components.scss

@@ -110,11 +110,11 @@
 @import "./views/elements/_EventListSummary.scss";
 @import "./views/elements/_Field.scss";
 @import "./views/elements/_FormButton.scss";
-@import "./views/elements/_IconButton.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InfoTooltip.scss";
 @import "./views/elements/_InlineSpinner.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
+@import "./views/elements/_MiniAvatarUploader.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
 @import "./views/elements/_QRCode.scss";
@@ -139,6 +139,7 @@
 @import "./views/groups/_GroupUserSettings.scss";
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
+@import "./views/messages/_EventTileBubble.scss";
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
@@ -182,6 +183,7 @@
 @import "./views/rooms/_MemberList.scss";
 @import "./views/rooms/_MessageComposer.scss";
 @import "./views/rooms/_MessageComposerFormatBar.scss";
+@import "./views/rooms/_NewRoomIntro.scss";
 @import "./views/rooms/_NotificationBadge.scss";
 @import "./views/rooms/_PinnedEventTile.scss";
 @import "./views/rooms/_PinnedEventsPanel.scss";
@@ -229,4 +231,4 @@
 @import "./views/verification/_VerificationShowSas.scss";
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
-@import "./views/voip/_VideoView.scss";
+@import "./views/voip/_VideoFeed.scss";

res/css/structures/_HomePage.scss

@@ -26,9 +26,10 @@ limitations under the License.
 
 .mx_HomePage_default {
     text-align: center;
+    display: flex;
 
     .mx_HomePage_default_wrapper {
-        padding: 25vh 0 12px;
+        margin: auto;
     }
 
     img {
@@ -50,56 +51,54 @@ limitations under the License.
         color: $muted-fg-color;
     }
 
+    .mx_MiniAvatarUploader {
+        margin: 0 auto;
+    }
+
     .mx_HomePage_default_buttons {
-        margin: 80px auto 0;
+        margin: 60px auto 0;
         width: fit-content;
 
         .mx_AccessibleButton {
             padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
 
-            width: 104px; // 120px - 2* 8px
-            margin: 0 39px; // 55px - 2* 8px
+            width: 160px;
+            height: 132px;
+            margin: 20px;
             position: relative;
             display: inline-block;
             border-radius: 8px;
             vertical-align: top;
             word-break: break-word;
+            box-sizing: border-box;
 
             font-weight: 600;
             font-size: $font-15px;
             line-height: $font-20px;
-            color: $muted-fg-color;
-
-            &:hover {
-                color: $accent-color;
-                background: rgba($accent-color, 0.06);
-
-                &::before {
-                    background-color: $accent-color;
-                }
-            }
+            color: #fff; // on all themes
+            background-color: $accent-color;
 
             &::before {
                 top: 20px;
-                left: 40px; // (120px-40px)/2
+                left: 60px; // (160px-40px)/2
                 width: 40px;
                 height: 40px;
 
                 content: '';
                 position: absolute;
-                background-color: $muted-fg-color;
+                background-color: #fff; // on all themes
                 mask-repeat: no-repeat;
                 mask-size: contain;
             }
 
             &.mx_HomePage_button_sendDm::before {
-                mask-image: url('$(res)/img/feather-customised/message-circle.svg');
+                mask-image: url('$(res)/img/element-icons/feedback.svg');
             }
             &.mx_HomePage_button_explore::before {
-                mask-image: url('$(res)/img/feather-customised/explore.svg');
+                mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
             }
             &.mx_HomePage_button_createGroup::before {
-                mask-image: url('$(res)/img/feather-customised/group.svg');
+                mask-image: url('$(res)/img/element-icons/community-members.svg');
             }
         }
     }

res/css/structures/_RoomStatusBar.scss

@@ -153,16 +153,6 @@ limitations under the License.
     display: block;
 }
 
-.mx_RoomStatusBar_isAlone {
-    height: 50px;
-    line-height: $font-50px;
-
-    color: $primary-fg-color;
-    opacity: 0.5;
-    overflow-y: hidden;
-    display: block;
-}
-
 .mx_MatrixChat_useCompactLayout {
     .mx_RoomStatusBar {
         min-height: 40px;

res/css/views/dialogs/_InviteDialog.scss

@@ -27,37 +27,29 @@ limitations under the License.
         padding-left: 8px;
         overflow-x: hidden;
         overflow-y: auto;
+        display: flex;
+        flex-wrap: wrap;
 
         .mx_InviteDialog_userTile {
+            margin: 6px 6px 0 0;
             display: inline-block;
-            float: left;
-            position: relative;
-            top: 7px;
+            min-width: max-content; // prevent manipulation by flexbox
         }
 
-        // Using a textarea for this element, to circumvent autofill
-        // Mostly copied from AddressPickerDialog
-        textarea,
-        textarea:focus {
-            height: 34px;
-            line-height: $font-34px;
+        // Mostly copied from AddressPickerDialog; overrides bunch of our default text input styles
+        > input[type="text"] {
+            margin: 6px 0 !important;
+            height: 24px;
+            line-height: $font-24px;
             font-size: $font-14px;
             padding-left: 12px;
-            margin: 0 !important;
             border: 0 !important;
             outline: 0 !important;
             resize: none;
-            overflow: hidden;
             box-sizing: border-box;
-            word-wrap: nowrap;
-
-            // Roughly fill about 2/5ths of the available space. This is to try and 'fill' the
-            // remaining space after a bunch of pills, but is a bit hacky. Ideally we'd have
-            // support for "fill remaining width", but traditional tricks don't work with what
-            // we're pushing into this "field". Flexbox just makes things worse. The theory is
-            // that users won't need more than about 2/5ths of the input to find the person
-            // they're looking for.
-            width: 40%;
+            min-width: 40%;
+            flex: 1 !important;
+            color: $primary-fg-color !important;
         }
     }
 
@@ -148,6 +140,10 @@ limitations under the License.
         }
     }
 
+    .mx_InviteDialog_roomTile_nameStack {
+        display: inline-block;
+    }
+
     .mx_InviteDialog_roomTile_name {
         font-weight: 600;
         font-size: $font-14px;