Merge branch 'develop' into gsouquet/benchmark-tracking

Author: germain-gg

package.json

@@ -55,7 +55,6 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "await-lock": "^2.1.0",
-    "blueimp-canvas-to-blob": "^3.28.0",
     "browser-encrypt-attachment": "^0.3.0",
     "browser-request": "^0.3.3",
     "cheerio": "^1.0.0-rc.9",
@@ -88,7 +87,6 @@
     "png-chunks-extract": "^1.0.0",
     "prop-types": "^15.7.2",
     "qrcode": "^1.4.4",
-    "qs": "^6.9.6",
     "re-resizable": "^6.9.0",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^4.0.1",
@@ -99,7 +97,6 @@
     "rfc4648": "^1.4.0",
     "sanitize-html": "^2.3.2",
     "tar-js": "^0.3.0",
-    "text-encoding-utf-8": "^1.0.2",
     "url": "^0.11.0",
     "what-input": "^5.2.10",
     "zxcvbn": "^4.4.2"

res/css/structures/_SpaceRoomView.scss

@@ -328,7 +328,8 @@ $SpaceRoomViewInnerWidth: 428px;
             font-size: $font-15px;
             margin-top: 12px;
             margin-bottom: 16px;
-            white-space: pre;
+            white-space: pre-wrap;
+            word-wrap: break-word;
         }
 
         > hr {

res/css/views/dialogs/_InviteDialog.scss

@@ -17,6 +17,9 @@ limitations under the License.
 .mx_InviteDialog_addressBar {
     display: flex;
     flex-direction: row;
+    // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
+    // for the user section gets weird.
+    margin: 8px 45px 0 0;
 
     .mx_InviteDialog_editor {
         flex: 1;
@@ -73,7 +76,7 @@ limitations under the License.
 }
 
 .mx_InviteDialog_section {
-    padding-bottom: 10px;
+    padding-bottom: 4px;
 
     h3 {
         font-size: $font-12px;
@@ -82,6 +85,14 @@ limitations under the License.
         text-transform: uppercase;
     }
 
+    > p {
+        margin: 0;
+    }
+
+    > span {
+        color: $primary-fg-color;
+    }
+
     .mx_InviteDialog_subname {
         margin-bottom: 10px;
         margin-top: -10px; // HACK: Positioning with margins is bad
@@ -90,6 +101,63 @@ limitations under the License.
     }
 }
 
+.mx_InviteDialog_section_hidden_suggestions_disclaimer {
+    padding: 8px 0 16px 0;
+    font-size: $font-14px;
+
+    > span {
+        color: $primary-fg-color;
+        font-weight: 600;
+    }
+
+    > p {
+        margin: 0;
+    }
+}
+
+.mx_InviteDialog_footer {
+    border-top: 1px solid $input-border-color;
+
+    > h3 {
+        margin: 12px 0;
+        font-size: $font-12px;
+        color: $muted-fg-color;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    .mx_InviteDialog_footer_link {
+        display: flex;
+        justify-content: space-between;
+        border-radius: 4px;
+        border: solid 1px $light-fg-color;
+        padding: 8px;
+
+        > a {
+            text-decoration: none;
+            flex-shrink: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .mx_InviteDialog_footer_link_copy {
+        flex-shrink: 0;
+        cursor: pointer;
+        margin-left: 20px;
+        display: inherit;
+
+        > div {
+            mask-image: url($copy-button-url);
+            background-color: $message-action-bar-fg-color;
+            margin-left: 5px;
+            width: 20px;
+            height: 20px;
+            background-repeat: no-repeat;
+        }
+    }
+}
+
 .mx_InviteDialog_roomTile {
     cursor: pointer;
     padding: 5px 10px;
@@ -142,6 +210,7 @@ limitations under the License.
 
     .mx_InviteDialog_roomTile_nameStack {
         display: inline-block;
+        overflow: hidden;
     }
 
     .mx_InviteDialog_roomTile_name {
@@ -157,6 +226,13 @@ limitations under the License.
         margin-left: 7px;
     }
 
+    .mx_InviteDialog_roomTile_name,
+    .mx_InviteDialog_roomTile_userId {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     .mx_InviteDialog_roomTile_time {
         text-align: right;
         font-size: $font-12px;
@@ -212,22 +288,29 @@ limitations under the License.
 
 .mx_InviteDialog {
     // Prevent the dialog from jumping around randomly when elements change.
-    height: 590px;
+    height: 600px;
     padding-left: 20px; // the design wants some padding on the left
+    display: flex;
+    flex-direction: column;
+
+    .mx_InviteDialog_content {
+        overflow: hidden;
+    }
 }
 
 .mx_InviteDialog_userSections {
-    margin-top: 10px;
+    margin-top: 4px;
     overflow-y: auto;
-    padding-right: 45px;
-    height: 455px; // mx_InviteDialog's height minus some for the upper elements
+    padding: 0 45px 4px 0;
+    height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
 }
 
-// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
-// for the user section gets weird.
-.mx_InviteDialog_helpText,
-.mx_InviteDialog_addressBar {
-    margin-right: 45px;
+.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
+    height: calc(100% - 175px);
+}
+
+.mx_InviteDialog_helpText {
+    margin: 0;
 }
 
 .mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {

res/css/views/messages/_SenderProfile.scss

@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SenderProfile_name {
+.mx_SenderProfile_displayName {
     font-weight: 600;
 }
 
+.mx_SenderProfile_mxid {
+    font-weight: 600;
+    font-size: 1.1rem;
+    margin-left: 5px;
+    opacity: 0.5; // Match mx_TextualEvent
+}

res/css/views/rooms/_IRCLayout.scss

@@ -178,7 +178,7 @@ $irc-line-height: $font-18px;
         overflow: hidden;
         display: flex;
 
-        > .mx_SenderProfile_name {
+        > .mx_SenderProfile_displayName {
             overflow: hidden;
             text-overflow: ellipsis;
             min-width: var(--name-width);
@@ -207,7 +207,7 @@ $irc-line-height: $font-18px;
             background: transparent;
 
             > span {
-                > .mx_SenderProfile_name {
+                > .mx_SenderProfile_displayName {
                     min-width: inherit;
                 }
             }

src/ContentMessages.tsx

@@ -28,8 +28,6 @@ import encrypt from "browser-encrypt-attachment";
 import extractPngChunks from "png-chunks-extract";
 import Spinner from "./components/views/elements/Spinner";
 
-// Polyfill for Canvas.toBlob API using Canvas.toDataURL
-import "blueimp-canvas-to-blob";
 import { Action } from "./dispatcher/actions";
 import CountlyAnalytics from "./CountlyAnalytics";
 import {

src/CountlyAnalytics.ts

@@ -24,13 +24,6 @@ import {sleep} from "./utils/promise";
 import RoomViewStore from "./stores/RoomViewStore";
 import { Action } from "./dispatcher/actions";
 
-// polyfill textencoder if necessary
-import * as TextEncodingUtf8 from 'text-encoding-utf-8';
-let TextEncoder = window.TextEncoder;
-if (!TextEncoder) {
-    TextEncoder = TextEncodingUtf8.TextEncoder;
-}
-
 const INACTIVITY_TIME = 20; // seconds
 const HEARTBEAT_INTERVAL = 5_000; // ms
 const SESSION_UPDATE_INTERVAL = 60; // seconds

src/components/structures/SpaceRoomDirectory.tsx

@@ -520,6 +520,7 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
                             setError("Failed to update some suggestions. Try again later");
                         }
                         setSaving(false);
+                        setSelected(new Map());
                     }}
                     kind="primary_outline"
                     disabled={disabled}

src/components/structures/SpaceRoomView.tsx

@@ -28,7 +28,7 @@ import RoomTopic from "../views/elements/RoomTopic";
 import InlineSpinner from "../views/elements/InlineSpinner";
 import {inviteMultipleToRoom, showRoomInviteDialog} from "../../RoomInvite";
 import {useRoomMembers} from "../../hooks/useRoomMembers";
-import createRoom, {IOpts, Preset} from "../../createRoom";
+import createRoom, {IOpts} from "../../createRoom";
 import Field from "../views/elements/Field";
 import {useEventEmitter} from "../../hooks/useEventEmitter";
 import withValidation from "../views/elements/Validation";
@@ -65,6 +65,7 @@ import dis from "../../dispatcher/dispatcher";
 import Modal from "../../Modal";
 import BetaFeedbackDialog from "../views/dialogs/BetaFeedbackDialog";
 import SdkConfig from "../../SdkConfig";
+import { Preset } from "matrix-js-sdk/src/@types/partials";
 
 interface IProps {
     space: Room;

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -15,22 +15,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ChangeEvent, createRef, KeyboardEvent, SyntheticEvent} from "react";
-import {Room} from "matrix-js-sdk/src/models/room";
+import React, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 import SdkConfig from '../../../SdkConfig';
-import withValidation, {IFieldState} from '../elements/Validation';
-import {_t} from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {Key} from "../../../Keyboard";
-import {IOpts, Preset, privateShouldBeEncrypted, Visibility} from "../../../createRoom";
-import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import withValidation, { IFieldState } from '../elements/Validation';
+import { _t } from '../../../languageHandler';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { Key } from "../../../Keyboard";
+import { IOpts, privateShouldBeEncrypted } from "../../../createRoom";
+import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Field from "../elements/Field";
 import RoomAliasField from "../elements/RoomAliasField";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import DialogButtons from "../elements/DialogButtons";
 import BaseDialog from "../dialogs/BaseDialog";
+import { Preset, Visibility } from "matrix-js-sdk/src/@types/partials";
 
 interface IProps {
     defaultPublic?: boolean;
@@ -72,7 +73,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
             canChangeEncryption: true,
         };
 
-        MatrixClientPeg.get().doesServerForceEncryptionForPreset("private")
+        MatrixClientPeg.get().doesServerForceEncryptionForPreset(Preset.PrivateChat)
             .then(isForced => this.setState({ canChangeEncryption: !isForced }));
     }