Merge branch 'develop' into hs/bridge-info

Author: Half-Shot

README.md

@@ -4,7 +4,7 @@ matrix-react-sdk
 This is a react-based SDK for inserting a Matrix chat/voip client into a web page.
 
 This package provides the React components needed to build a Matrix web client
-using React.  It is not useable in isolation, and instead must must be used from
+using React.  It is not useable in isolation, and instead must be used from
 a 'skin'. A skin provides:
  * Customised implementations of presentation components.
  * Custom CSS
@@ -82,7 +82,7 @@ practices that anyone working with the SDK needs to be be aware of and uphold:
     'Stealing' styling information from other components (including parents)
     is not cool, as it breaks the independence of the components.
 
-  * CSS classes are named with an app-specific namespacing prefix to try to avoid
+  * CSS classes are named with an app-specific name-spacing prefix to try to avoid
     CSS collisions.  The base skin shipped by Matrix.org with the matrix-react-sdk
     uses the naming prefix "mx_".  A company called Yoyodyne Inc might use a
     prefix like "yy_" for its app-specific classes.
@@ -107,7 +107,7 @@ practices that anyone working with the SDK needs to be be aware of and uphold:
     .mx_RoomTile {} in RoomList.css - only RoomTile.css is allowed to define its
     own CSS.  Instead, say .mx_RoomList .mx_RoomTile {} to scope the override
     only to the context of RoomList views.  N.B. overrides should be relatively
-    rare as in general CSS inheritence should be enough.
+    rare as in general CSS inheritance should be enough.
 
   * Components should render only within the bounding box of their outermost DOM
     element. Page-absolute positioning and negative CSS margins and similar are

code_style.md

@@ -174,12 +174,6 @@ React
   <Foo onClick={this.onFooClick}> // Best, if onFooClick would do anything other than directly calling doStuff
   ```
 
-  Not doing so is acceptable in a single case: in function-refs:
-
-  ```jsx
-  <Foo ref={(self) => this.component = self}>
-  ```
-
 - Prefer classes that extend `React.Component` (or `React.PureComponent`) instead of `React.createClass`
   - You can avoid the need to bind handler functions by using [property initializers](https://reactjs.org/docs/react-component.html#constructor):
 
@@ -208,3 +202,5 @@ React
   ```
 - Think about whether your component really needs state: are you duplicating
   information in component state that could be derived from the model?
+
+- Avoid things marked as Legacy or Deprecated in React 16 (e.g string refs and legacy contexts)

package.json

@@ -43,7 +43,6 @@
     "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
     "build": "yarn reskindex && yarn start:init",
     "build:watch": "babel src -w --skip-initial-build -d lib --source-maps --copy-files",
-    "emoji-data-strip": "node scripts/emoji-data-strip.js",
     "start": "yarn start:init && yarn start:all",
     "start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn build:watch\" \"yarn reskindex:watch\"",
     "start:init": "babel src -d lib --source-maps --copy-files",
@@ -75,7 +74,7 @@
     "file-saver": "^1.3.3",
     "filesize": "3.5.6",
     "flux": "2.1.1",
-    "focus-trap-react": "^3.0.5",
+    "react-focus-lock": "^2.2.1",
     "focus-visible": "^5.0.2",
     "fuse.js": "^2.2.0",
     "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
@@ -88,7 +87,7 @@
     "linkifyjs": "^2.1.6",
     "lodash": "^4.17.14",
     "lolex": "4.2",
-    "matrix-js-sdk": "2.4.6",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "pako": "^1.0.5",
     "png-chunks-extract": "^1.0.0",
@@ -110,6 +109,7 @@
     "text-encoding-utf-8": "^1.0.1",
     "url": "^0.11.0",
     "velocity-animate": "^1.5.2",
+    "what-input": "^5.2.6",
     "whatwg-fetch": "^1.1.1",
     "zxcvbn": "^4.4.2"
   },

res/css/_components.scss

@@ -24,7 +24,6 @@
 @import "./structures/_SearchBox.scss";
 @import "./structures/_TabbedView.scss";
 @import "./structures/_TagPanel.scss";
-@import "./structures/_TagPanelButtons.scss";
 @import "./structures/_ToastContainer.scss";
 @import "./structures/_TopLeftMenuButton.scss";
 @import "./structures/_UploadBar.scss";
@@ -64,7 +63,6 @@
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
-@import "./views/dialogs/_RestoreKeyBackupDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialog.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";
 @import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
@@ -83,6 +81,8 @@
 @import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
 @import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
 @import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
+@import "./views/dialogs/secretstorage/_AccessSecretStorageDialog.scss";
+@import "./views/dialogs/secretstorage/_CreateSecretStorageDialog.scss";
 @import "./views/directory/_NetworkDropdown.scss";
 @import "./views/elements/_AccessibleButton.scss";
 @import "./views/elements/_AddressSelector.scss";
@@ -173,7 +173,10 @@
 @import "./views/rooms/_SendMessageComposer.scss";
 @import "./views/rooms/_Stickers.scss";
 @import "./views/rooms/_TopUnreadMessagesBar.scss";
+@import "./views/rooms/_UserOnlineDot.scss";
 @import "./views/rooms/_WhoIsTypingTile.scss";
+@import "./views/settings/_AvatarSetting.scss";
+@import "./views/settings/_CrossSigningPanel.scss";
 @import "./views/settings/_DevicesPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
 @import "./views/settings/_IntegrationManager.scss";

res/css/structures/_CustomRoomTagPanel.scss

@@ -26,11 +26,16 @@ limitations under the License.
 
 .mx_CustomRoomTagPanel_scroller {
     max-height: inherit;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .mx_CustomRoomTagPanel .mx_AccessibleButton {
-    margin: 9px auto;
+    margin: 0 auto;
     width: 40px;
+    padding: 10px 0 9px 0;
+    position: relative;
 }
 
 .mx_CustomRoomTagPanel .mx_BaseAvatar_image {
@@ -39,7 +44,13 @@ limitations under the License.
     height: 40px;
 }
 
-.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected .mx_BaseAvatar_image {
-    border: 3px solid $warning-color;
-    border-radius: 40px;
+.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected::before {
+    content: '';
+    height: 56px;
+    background-color: $accent-color-alt;
+    width: 5px;
+    position: absolute;
+    left: -15px;
+    border-radius: 0 3px 3px 0;
+    top: 2px; // 10 [padding-top] - (56 - 40)/2
 }

res/css/structures/_TagPanel.scss

@@ -68,7 +68,7 @@ limitations under the License.
 }
 .mx_TagPanel .mx_TagPanel_tagTileContainer > div {
     height: 40px;
-    padding: 5px 0 4px 0;
+    padding: 10px 0 9px 0;
 }
 
 .mx_TagPanel .mx_TagTile {
@@ -82,21 +82,39 @@ limitations under the License.
     // opacity: 1;
 }
 
-.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
-    background-color: $accent-color;
-    border-radius: 40px;
-
-    /* In case this is a "initial" avatar */
-    display: block;
+.mx_TagPanel .mx_TagTile_plus {
+    margin-bottom: 12px;
     height: 40px;
     width: 40px;
-}
-
-.mx_TagPanel .mx_TagTile_selected .mx_BaseAvatar_image {
-    border: 3px solid $accent-color;
-    height: 40px;
-    width: 40px;
-    box-sizing: border-box;
+    border-radius: 20px;
+    background-color: $roomheader-addroom-bg-color;
+    position: relative;
+    /* overwrite mx_RoleButton inline-block */
+    display: block !important;
+
+    &::before {
+        background-color: $roomheader-addroom-fg-color;
+        mask-image: url('$(res)/img/feather-customised/plus.svg');
+        mask-position: center;
+        mask-repeat: no-repeat;
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+}
+
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
+    content: '';
+    height: 56px;
+    background-color: $accent-color;
+    width: 5px;
+    position: absolute;
+    left: -15px;
+    border-radius: 0 3px 3px 0;
+    top: -8px; // (56 - 40)/2
 }
 
 .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {

res/css/structures/_TagPanelButtons.scss

@@ -40,6 +40,7 @@ limitations under the License.
 }
 
 .mx_BaseAvatar_image {
+    object-fit: cover;
     border-radius: 40px;
     vertical-align: top;
     background-color: $avatar-bg-color;

res/css/views/avatars/_BaseAvatar.scss

@@ -53,6 +53,10 @@ limitations under the License.
             mask-image: url('$(res)/img/feather-customised/home.svg');
         }
 
+        .mx_TopLeftMenu_icon_help::after {
+            mask-image: url('$(res)/img/feather-customised/life-buoy.svg');
+        }
+
         .mx_TopLeftMenu_icon_settings::after {
             mask-image: url('$(res)/img/feather-customised/settings.svg');
         }

res/css/views/context_menus/_TopLeftMenu.scss

@@ -48,6 +48,12 @@ limitations under the License.
     padding-right: 80px;
 }
 
+// show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings
+.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before {
+    mask: url("$(res)/img/feather-customised/image.svg");
+    mask-repeat: no-repeat;
+    mask-size: 36px;
+    mask-position: center;
 
 .mx_RoomSettingsDialog_BridgeList {
     padding: 0;
@@ -58,4 +64,5 @@ limitations under the License.
     padding: 0;
     margin: 0;
     border-bottom: 1px solid $panel-divider-color;
-}
+}
+