Merge remote-tracking branch 'origin/develop' into dbkr/transfer_by_d…

…ialpad
matrix-org · Jul 1, 2021 · 8a99166 · 8a99166
1 parent 9e3b861
commit 8a99166
Show file tree

Hide file tree

Showing 714 changed files with 7,209 additions and 6,699 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,7 +1,9 @@
 module.exports = {
-    extends: ["matrix-org", "matrix-org/react-legacy"],
-    parser: "babel-eslint",
-
+    plugins: ["matrix-org"],
+    extends: [
+        "plugin:matrix-org/babel",
+        "plugin:matrix-org/react",
+    ],
     env: {
         browser: true,
         node: true,
@@ -15,35 +17,60 @@ module.exports = {
         "prefer-promise-reject-errors": "off",
         "no-async-promise-executor": "off",
         "quotes": "off",
-    },
+        "no-extra-boolean-cast": "off",
+
+        // Bind or arrow functions in props causes performance issues (but we
+        // currently use them in some places).
+        // It's disabled here, but we should using it sparingly.
+        "react/jsx-no-bind": "off",
+        "react/jsx-key": ["error"],
 
+        "no-restricted-properties": [
+            "error",
+            ...buildRestrictedPropertiesOptions(
+                ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
+                "Use UIStore to access window dimensions instead.",
+            ),
+            ...buildRestrictedPropertiesOptions(
+                ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
+                "Use Media helper instead to centralise access for customisation.",
+            ),
+        ],
+    },
     overrides: [{
-        "files": ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
-        "extends": ["matrix-org/ts"],
-        "rules": {
+        files: [
+            "src/**/*.{ts,tsx}",
+            "test/**/*.{ts,tsx}",
+        ],
+        extends: [
+            "plugin:matrix-org/typescript",
+            "plugin:matrix-org/react",
+        ],
+        rules: {
+            // Things we do that break the ideal style
+            "prefer-promise-reject-errors": "off",
+            "quotes": "off",
+            "no-extra-boolean-cast": "off",
+
+            // Remove Babel things manually due to override limitations
+            "@babel/no-invalid-this": ["off"],
+
             // We're okay being explicit at the moment
             "@typescript-eslint/no-empty-interface": "off",
             // We disable this while we're transitioning
             "@typescript-eslint/no-explicit-any": "off",
             // We'd rather not do this but we do
             "@typescript-eslint/ban-ts-comment": "off",
-
-            "quotes": "off",
-            "no-extra-boolean-cast": "off",
-            "no-restricted-properties": [
-                "error",
-                ...buildRestrictedPropertiesOptions(
-                    ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
-                    "Use UIStore to access window dimensions instead",
-                ),
-            ],
         },
     }],
 };
 
 function buildRestrictedPropertiesOptions(properties, message) {
     return properties.map(prop => {
-        const [object, property] = prop.split(".");
+        let [object, property] = prop.split(".");
+        if (object === "*") {
+            object = undefined;
+        }
         return {
             object,
             property,

diff --git a/.flowconfig b/.flowconfig
diff --git a/babel.config.js b/babel.config.js
@@ -10,7 +10,6 @@ module.exports = {
             ],
         }],
         "@babel/preset-typescript",
-        "@babel/preset-flow",
         "@babel/preset-react",
     ],
     "plugins": [
@@ -19,7 +18,6 @@ module.exports = {
         "@babel/plugin-proposal-numeric-separator",
         "@babel/plugin-proposal-class-properties",
         "@babel/plugin-proposal-object-rest-spread",
-        "@babel/plugin-transform-flow-comments",
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-runtime",
     ],

diff --git a/package.json b/package.json
@@ -104,16 +104,16 @@
   "devDependencies": {
     "@babel/cli": "^7.12.10",
     "@babel/core": "^7.12.10",
+    "@babel/eslint-parser": "^7.12.10",
+    "@babel/eslint-plugin": "^7.12.10",
     "@babel/parser": "^7.12.11",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-decorators": "^7.12.12",
     "@babel/plugin-proposal-export-default-from": "^7.12.1",
     "@babel/plugin-proposal-numeric-separator": "^7.12.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-    "@babel/plugin-transform-flow-comments": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.10",
@@ -139,18 +139,16 @@
     "@types/react-transition-group": "^4.4.0",
     "@types/sanitize-html": "^2.3.1",
     "@types/zxcvbn": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.0",
-    "@typescript-eslint/parser": "^4.14.0",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
     "eslint": "7.18.0",
-    "eslint-config-matrix-org": "^0.2.0",
-    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#main",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "glob": "^7.1.6",

diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -37,6 +37,11 @@
 @import "./structures/_ViewSource.scss";
 @import "./structures/auth/_CompleteSecurity.scss";
 @import "./structures/auth/_Login.scss";
+@import "./views/audio_messages/_AudioPlayer.scss";
+@import "./views/audio_messages/_PlayPauseButton.scss";
+@import "./views/audio_messages/_PlaybackContainer.scss";
+@import "./views/audio_messages/_SeekBar.scss";
+@import "./views/audio_messages/_Waveform.scss";
 @import "./views/auth/_AuthBody.scss";
 @import "./views/auth/_AuthButtons.scss";
 @import "./views/auth/_AuthFooter.scss";
@@ -165,6 +170,7 @@
 @import "./views/messages/_MTextBody.scss";
 @import "./views/messages/_MVideoBody.scss";
 @import "./views/messages/_MVoiceMessageBody.scss";
+@import "./views/messages/_MediaBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
 @import "./views/messages/_MjolnirBody.scss";
@@ -253,9 +259,6 @@
 @import "./views/toasts/_AnalyticsToast.scss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.scss";
 @import "./views/verification/_VerificationShowSas.scss";
-@import "./views/voice_messages/_PlayPauseButton.scss";
-@import "./views/voice_messages/_PlaybackContainer.scss";
-@import "./views/voice_messages/_Waveform.scss";
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_CallViewForRoom.scss";

diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss
@@ -323,7 +323,7 @@ limitations under the License.
 }
 
 .mx_GroupView_featuredThing .mx_BaseAvatar {
-    /* To prevent misalignment with mx_TintableSvg (in addButton) */
+    /* To prevent misalignment with img (in addButton) */
     vertical-align: initial;
 }
 

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
@@ -111,6 +111,29 @@ $roomListCollapsedWidth: 68px;
                 }
             }
 
+            .mx_LeftPanel_dialPadButton {
+                width: 32px;
+                height: 32px;
+                border-radius: 8px;
+                background-color: $roomlist-button-bg-color;
+                position: relative;
+                margin-left: 8px;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 8px;
+                    left: 8px;
+                    width: 16px;
+                    height: 16px;
+                    mask-image: url('$(res)/img/element-icons/call/dialpad.svg');
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background: $secondary-fg-color;
+                }
+            }
+
             .mx_LeftPanel_exploreButton {
                 width: 32px;
                 height: 32px;
@@ -185,6 +208,12 @@ $roomListCollapsedWidth: 68px;
                 flex-direction: column;
                 justify-content: center;
 
+                .mx_LeftPanel_dialPadButton {
+                    margin-left: 0;
+                    margin-top: 8px;
+                    background-color: transparent;
+                }
+
                 .mx_LeftPanel_exploreButton {
                     margin-left: 0;
                     margin-top: 8px;

diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss
@@ -112,7 +112,7 @@ limitations under the License.
 
         .mx_AccessibleButton {
             padding: 5px 10px;
-            padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding
+            padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding
             display: inline-block;
             position: relative;
 
@@ -128,23 +128,21 @@ limitations under the License.
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: contain;
+                width: 18px;
+                height: 18px;
+                top: 50%; // text sizes are dynamic
+                transform: translateY(-50%);
             }
 
             &.mx_RoomStatusBar_unsentCancelAllBtn::before {
                 mask-image: url('$(res)/img/element-icons/trashcan.svg');
-                width: 12px;
-                height: 16px;
-                top: calc(50% - 8px); // text sizes are dynamic
             }
 
             &.mx_RoomStatusBar_unsentResendAllBtn {
                 padding-left: 34px; // 28px from above, but +6px to account for the wider icon
 
                 &::before {
                     mask-image: url('$(res)/img/element-icons/retry.svg');
-                    width: 18px;
-                    height: 18px;
-                    top: calc(50% - 9px); // text sizes are dynamic
                 }
             }
         }

diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
@@ -134,12 +134,15 @@ limitations under the License.
         .mx_Toast_buttons {
             float: right;
             display: flex;
-            gap: 5px;
 
             .mx_AccessibleButton {
                 min-width: 96px;
                 box-sizing: border-box;
             }
+
+            .mx_AccessibleButton + .mx_AccessibleButton {
+                margin-left: 5px;
+            }
         }
 
         .mx_Toast_description {

diff --git a/res/css/views/audio_messages/_AudioPlayer.scss b/res/css/views/audio_messages/_AudioPlayer.scss
@@ -0,0 +1,68 @@
+/*
+Copyright 2021 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_AudioPlayer_container {
+    padding: 16px 12px 12px 12px;
+    max-width: 267px; // use max to make the control fit in the files/pinned panels
+
+    .mx_AudioPlayer_primaryContainer {
+        display: flex;
+
+        .mx_PlayPauseButton {
+            margin-right: 8px;
+        }
+
+        .mx_AudioPlayer_mediaInfo {
+            flex: 1;
+            overflow: hidden; // makes the ellipsis on the file name work
+
+            & > * {
+                display: block;
+            }
+
+            .mx_AudioPlayer_mediaName {
+                color: $primary-fg-color;
+                font-size: $font-15px;
+                line-height: $font-15px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                padding-bottom: 4px; // mimics the line-height differences in the Figma
+            }
+
+            .mx_AudioPlayer_byline {
+                font-size: $font-12px;
+                line-height: $font-12px;
+            }
+        }
+    }
+
+    .mx_AudioPlayer_seek {
+        display: flex;
+        align-items: center;
+
+        .mx_SeekBar {
+            flex: 1;
+        }
+
+        .mx_Clock {
+            width: $font-42px; // we're not using a monospace font, so fake it
+            min-width: $font-42px; // for flexbox
+            padding-left: 4px; // isolate from seek bar
+            text-align: right;
+        }
+    }
+}
diff --git a/...iews/voice_messages/_PlayPauseButton.scss → ...iews/audio_messages/_PlayPauseButton.scss b/...iews/voice_messages/_PlayPauseButton.scss → ...iews/audio_messages/_PlayPauseButton.scss
@@ -18,6 +18,8 @@ limitations under the License.
     position: relative;
     width: 32px;
     height: 32px;
+    min-width: 32px; // for when the button is used in a flexbox
+    min-height: 32px; // for when the button is used in a flexbox
     border-radius: 32px;
     background-color: $voice-playback-button-bg-color;
 

diff --git a/...ws/voice_messages/_PlaybackContainer.scss → ...ws/audio_messages/_PlaybackContainer.scss b/...ws/voice_messages/_PlaybackContainer.scss → ...ws/audio_messages/_PlaybackContainer.scss
@@ -22,25 +22,24 @@ limitations under the License.
     // 7px top and bottom for visual design. 12px left & right, but the waveform (right)
     // has a 1px padding on it that we want to account for.
     padding: 7px 12px 7px 11px;
-    background-color: $voice-record-waveform-bg-color;
-    border-radius: 12px;
 
     // Cheat at alignment a bit
     display: flex;
     align-items: center;
 
-    color: $voice-record-waveform-fg-color;
-    font-size: $font-14px;
-    line-height: $font-24px;
+    contain: content;
 
     .mx_Waveform {
         .mx_Waveform_bar {
             background-color: $voice-record-waveform-incomplete-fg-color;
+            height: 100%;
+            /* Variable set by a JS component */
+            transform: scaleY(max(0.05, var(--barHeight)));
 
             &.mx_Waveform_bar_100pct {
                 // Small animation to remove the mechanical feel of progress
                 transition: background-color 250ms ease;
-                background-color: $voice-record-waveform-fg-color;
+                background-color: $message-body-panel-fg-color;
             }
         }
     }