Initial implementation of FTUE user lists design

package.json

@@ -74,14 +74,14 @@
     "file-saver": "^1.3.3",
     "filesize": "3.5.6",
     "flux": "2.1.1",
-    "react-focus-lock": "^2.2.1",
     "focus-visible": "^5.0.2",
     "fuse.js": "^2.2.0",
     "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
     "gfm.css": "^1.1.1",
     "glob": "^5.0.14",
     "glob-to-regexp": "^0.4.1",
     "highlight.js": "^9.15.8",
+    "humanize": "^0.0.9",
     "is-ip": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
     "linkifyjs": "^2.1.6",
@@ -99,6 +99,7 @@
     "react-addons-css-transition-group": "15.6.2",
     "react-beautiful-dnd": "^4.0.1",
     "react-dom": "^16.9.0",
+    "react-focus-lock": "^2.2.1",
     "react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#9cf17f63b7c0b0ec5f31df27da0f82f7238dc594",
     "resize-observer-polyfill": "^1.5.0",
     "sanitize-html": "^1.18.4",

res/css/_components.scss

@@ -56,6 +56,7 @@
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";
 @import "./views/dialogs/_CreateGroupDialog.scss";
 @import "./views/dialogs/_CreateRoomDialog.scss";
+@import "./views/dialogs/_DMInviteDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DeviceVerifyDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";

res/css/views/dialogs/_DMInviteDialog.scss

@@ -0,0 +1,81 @@
+/*
+Copyright 2019, 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_DMInviteDialog_addressBar {
+    display: flex;
+    flex-direction: row;
+
+    .mx_DMInviteDialog_editor {
+        flex: 1;
+        width: 100%; // Needed to make the Field inside grow
+    }
+
+    .mx_Field {
+        margin: 0;
+    }
+
+    .mx_DMInviteDialog_goButton {
+        width: 48px;
+        margin-left: 10px;
+    }
+}
+
+.mx_DMInviteDialog_section {
+    padding-bottom: 10px;
+
+    h3 {
+        font-size: 12px;
+        color: $muted-fg-color;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+}
+
+.mx_DMInviteDialog_roomTile {
+    cursor: pointer;
+    padding: 5px 10px;
+
+    &:hover {
+        background-color: $user-tile-hover-bg-color;
+        border-radius: 4px;
+    }
+
+    * {
+        vertical-align: middle;
+    }
+
+    .mx_DMInviteDialog_roomTile_name {
+        font-weight: 600;
+        font-size: 14px;
+        color: $primary-fg-color;
+        margin-left: 7px;
+    }
+
+    .mx_DMInviteDialog_roomTile_userId {
+        font-size: 12px;
+        color: $muted-fg-color;
+        margin-left: 7px;
+    }
+
+    .mx_DMInviteDialog_roomTile_time {
+        text-align: right;
+        font-size: 12px;
+        color: $muted-fg-color;
+        float: right;
+        line-height: 36px; // Height of the avatar to keep the time vertically aligned
+    }
+}
+

res/themes/dark/css/_dark.scss

@@ -16,6 +16,7 @@ $room-highlight-color: #343a46;
 // typical text (dark-on-white in light skin)
 $primary-fg-color: $text-primary-color;
 $primary-bg-color: $bg-color;
+$muted-fg-color: $header-panel-text-primary-color;
 
 // used for dialog box text
 $light-fg-color: $header-panel-text-secondary-color;
@@ -172,6 +173,8 @@ $interactive-tooltip-fg-color: #ffffff;
 
 $breadcrumb-placeholder-bg-color: #272c35;
 
+$user-tile-hover-bg-color: $header-panel-bg-color;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

res/themes/light/css/_light.scss

@@ -21,6 +21,7 @@ $header-panel-bg-color: #f3f8fd;
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #2e2f32;
 $primary-bg-color: #ffffff;
+$muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
 
 // used for dialog box text
 $light-fg-color: #747474;
@@ -293,6 +294,8 @@ $interactive-tooltip-fg-color: #ffffff;
 
 $breadcrumb-placeholder-bg-color: #e8eef5;
 
+$user-tile-hover-bg-color: $header-panel-bg-color;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

src/RoomInvite.js

@@ -25,6 +25,7 @@ import sdk from './';
 import dis from './dispatcher';
 import DMRoomMap from './utils/DMRoomMap';
 import { _t } from './languageHandler';
+import SettingsStore from "./settings/SettingsStore";
 
 /**
  * Invites multiple addresses to a room
@@ -41,6 +42,18 @@ function inviteMultipleToRoom(roomId, addrs) {
 }
 
 export function showStartChatInviteDialog() {
+    if (SettingsStore.isFeatureEnabled("feature_ftue_dms")) {
+        const DMInviteDialog = sdk.getComponent("dialogs.DMInviteDialog");
+        Modal.createTrackedDialog('Start DM', '', DMInviteDialog, {
+            onFinished: (inviteIds) => {
+                // TODO: Replace _onStartDmFinished with less hacks
+                if (inviteIds.length > 0) _onStartDmFinished(true, inviteIds.map(i => ({address: i})));
+                // else ignore and just do nothing
+            },
+        }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
+        return;
+    }
+
     const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
 
     Modal.createTrackedDialog('Start a chat', '', AddressPickerDialog, {
@@ -99,7 +112,7 @@ export function isValid3pidInvite(event) {
     return true;
 }
 
-// TODO: Immutable DMs replaces this
+// TODO: Canonical DMs replaces this
 function _onStartDmFinished(shouldInvite, addrs) {
     if (!shouldInvite) return;