diff --git a/.eslintignore.errorfiles b/.eslintignore.errorfiles index 1c0a3d1254..d9177bebb5 100644 --- a/.eslintignore.errorfiles +++ b/.eslintignore.errorfiles @@ -1,7 +1,7 @@ # autogenerated file: run scripts/generate-eslint-error-ignore-file to update. src/Markdown.js -src/Velociraptor.js +src/NodeAnimator.js src/components/structures/RoomDirectory.js src/components/views/rooms/MemberList.js src/ratelimitedfunc.js diff --git a/.stylelintrc.js b/.stylelintrc.js index 313102ea83..0e6de7000f 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -4,6 +4,7 @@ module.exports = { "stylelint-scss", ], "rules": { + "color-hex-case": null, "indentation": 4, "comment-empty-line-before": null, "declaration-empty-line-before": null, diff --git a/CHANGELOG.md b/CHANGELOG.md index c839fc2b73..ec73756ff9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,95 @@ +Changes in [3.18.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.18.0) (2021-04-12) +===================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.18.0-rc.1...v3.18.0) + + * Upgrade to JS SDK 9.11.0 + * [Release] Tweak appearance of invite reason + [\#5848](https://github.com/matrix-org/matrix-react-sdk/pull/5848) + +Changes in [3.18.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.18.0-rc.1) (2021-04-07) +=============================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.17.0...v3.18.0-rc.1) + + * Upgrade to JS SDK 9.11.0-rc.1 + * Translations update from Weblate + [\#5832](https://github.com/matrix-org/matrix-react-sdk/pull/5832) + * Add fake fallback thumbnail URL for encrypted videos + [\#5826](https://github.com/matrix-org/matrix-react-sdk/pull/5826) + * Fix broken "Go to Home View" shortcut on macOS + [\#5818](https://github.com/matrix-org/matrix-react-sdk/pull/5818) + * Remove status area UI defects when in-call + [\#5828](https://github.com/matrix-org/matrix-react-sdk/pull/5828) + * Fix viewing invitations when the inviter has no avatar set + [\#5829](https://github.com/matrix-org/matrix-react-sdk/pull/5829) + * Restabilize room list ordering with prefiltering on spaces/communities + [\#5825](https://github.com/matrix-org/matrix-react-sdk/pull/5825) + * Show invite reasons + [\#5694](https://github.com/matrix-org/matrix-react-sdk/pull/5694) + * Require strong password in forgot password form + [\#5744](https://github.com/matrix-org/matrix-react-sdk/pull/5744) + * Attended transfer + [\#5798](https://github.com/matrix-org/matrix-react-sdk/pull/5798) + * Make user autocomplete query search beyond prefix + [\#5822](https://github.com/matrix-org/matrix-react-sdk/pull/5822) + * Add reset option for corrupted event index store + [\#5806](https://github.com/matrix-org/matrix-react-sdk/pull/5806) + * Prevent Re-request encryption keys from appearing under redacted messages + [\#5816](https://github.com/matrix-org/matrix-react-sdk/pull/5816) + * Keybindings follow up + [\#5815](https://github.com/matrix-org/matrix-react-sdk/pull/5815) + * Increase default visible tiles for room sublists + [\#5821](https://github.com/matrix-org/matrix-react-sdk/pull/5821) + * Change copy to point to native node modules docs in element desktop + [\#5817](https://github.com/matrix-org/matrix-react-sdk/pull/5817) + * Show waveform and timer in voice messages + [\#5801](https://github.com/matrix-org/matrix-react-sdk/pull/5801) + * Label unlabeled avatar button in event panel + [\#5585](https://github.com/matrix-org/matrix-react-sdk/pull/5585) + * Fix the theme engine breaking with some web theming extensions + [\#5810](https://github.com/matrix-org/matrix-react-sdk/pull/5810) + * Add /spoiler command + [\#5696](https://github.com/matrix-org/matrix-react-sdk/pull/5696) + * Don't specify sample rates for voice messages + [\#5802](https://github.com/matrix-org/matrix-react-sdk/pull/5802) + * Tweak security key error handling + [\#5812](https://github.com/matrix-org/matrix-react-sdk/pull/5812) + * Add user settings for warn before exit + [\#5793](https://github.com/matrix-org/matrix-react-sdk/pull/5793) + * Decouple key bindings from event handling + [\#5720](https://github.com/matrix-org/matrix-react-sdk/pull/5720) + * Fixing spaces papercuts + [\#5792](https://github.com/matrix-org/matrix-react-sdk/pull/5792) + * Share keys for historical messages when inviting users to encrypted rooms + [\#5763](https://github.com/matrix-org/matrix-react-sdk/pull/5763) + * Fix upload bar not populating when starting uploads + [\#5804](https://github.com/matrix-org/matrix-react-sdk/pull/5804) + * Fix crash on login when using social login + [\#5803](https://github.com/matrix-org/matrix-react-sdk/pull/5803) + * Convert AccessSecretStorageDialog to TypeScript + [\#5805](https://github.com/matrix-org/matrix-react-sdk/pull/5805) + * Tweak cross-signing copy + [\#5807](https://github.com/matrix-org/matrix-react-sdk/pull/5807) + * Fix password change popup message + [\#5791](https://github.com/matrix-org/matrix-react-sdk/pull/5791) + * View Source: make Event ID go below Event ID + [\#5790](https://github.com/matrix-org/matrix-react-sdk/pull/5790) + * Fix line numbers when missing trailing newline + [\#5800](https://github.com/matrix-org/matrix-react-sdk/pull/5800) + * Remember reply when switching rooms + [\#5796](https://github.com/matrix-org/matrix-react-sdk/pull/5796) + * Fix edge case with redaction grouper messing up continuations + [\#5797](https://github.com/matrix-org/matrix-react-sdk/pull/5797) + * Only show the ask anyway modal for explicit user lookup failures + [\#5785](https://github.com/matrix-org/matrix-react-sdk/pull/5785) + * Improve error reporting when EventIndex fails on a supported environment + [\#5787](https://github.com/matrix-org/matrix-react-sdk/pull/5787) + * Tweak and fix some space features + [\#5789](https://github.com/matrix-org/matrix-react-sdk/pull/5789) + * Support replying with a message command + [\#5686](https://github.com/matrix-org/matrix-react-sdk/pull/5686) + * Labs feature: Early implementation of voice messages + [\#5769](https://github.com/matrix-org/matrix-react-sdk/pull/5769) + Changes in [3.17.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.17.0) (2021-03-29) ===================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.17.0-rc.1...v3.17.0) @@ -220,11 +312,12 @@ Changes in [3.15.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/ ## Security notice -matrix-react-sdk 3.15.0 fixes a low severity issue (CVE-2021-21320) where the -user content sandbox can be abused to trick users into opening unexpected -documents. The content is opened with a `blob` origin that cannot access Matrix -user data, so messages and secrets are not at risk. Thanks to @keerok for -responsibly disclosing this via Matrix's Security Disclosure Policy. +matrix-react-sdk 3.15.0 fixes a moderate severity issue (CVE-2021-21320) where +the user content sandbox can be abused to trick users into opening unexpected +documents after several user interactions. The content can be opened with a +`blob` origin from the Matrix client, so it is possible for a malicious document +to access user messages and secrets. Thanks to @keerok for responsibly +disclosing this via Matrix's Security Disclosure Policy. ## All changes diff --git a/package.json b/package.json index 6a8645adf3..7c190c68bf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.17.0", + "version": "3.18.0", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { @@ -102,7 +102,6 @@ "tar-js": "^0.3.0", "text-encoding-utf-8": "^1.0.2", "url": "^0.11.0", - "velocity-animate": "^2.0.6", "what-input": "^5.2.10", "zxcvbn": "^4.4.2" }, diff --git a/res/css/_common.scss b/res/css/_common.scss index 0093bde0ab..d6f85edb86 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -28,6 +28,16 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e :root { font-size: 10px; + + --transition-short: .1s; + --transition-standard: .3s; +} + +@media (prefers-reduced-motion) { + :root { + --transition-short: 0; + --transition-standard: 0; + } } html { @@ -303,7 +313,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { } .mx_Dialog_lightbox .mx_Dialog_background { - opacity: 0.85; + opacity: $lightbox-background-bg-opacity; background-color: $lightbox-background-bg-color; } @@ -315,6 +325,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { max-width: 100%; max-height: 100%; pointer-events: none; + padding: 0; } .mx_Dialog_header { diff --git a/res/css/_components.scss b/res/css/_components.scss index 31bdff90bf..253f97bf42 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -123,6 +123,7 @@ @import "./views/elements/_ImageView.scss"; @import "./views/elements/_InfoTooltip.scss"; @import "./views/elements/_InlineSpinner.scss"; +@import "./views/elements/_InviteReason.scss"; @import "./views/elements/_ManageIntegsButton.scss"; @import "./views/elements/_MiniAvatarUploader.scss"; @import "./views/elements/_PowerSelector.scss"; diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss index 2aa068b674..7b975110e1 100644 --- a/res/css/structures/_FilePanel.scss +++ b/res/css/structures/_FilePanel.scss @@ -22,7 +22,6 @@ limitations under the License. } .mx_FilePanel .mx_RoomView_messageListWrapper { - margin-right: 20px; flex-direction: row; align-items: center; justify-content: center; diff --git a/res/css/structures/_ScrollPanel.scss b/res/css/structures/_ScrollPanel.scss index 699224949b..a4e501b339 100644 --- a/res/css/structures/_ScrollPanel.scss +++ b/res/css/structures/_ScrollPanel.scss @@ -21,6 +21,5 @@ limitations under the License. display: flex; flex-direction: column; justify-content: flex-end; - overflow-y: hidden; } } diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index 873fa967ab..59f2ea947c 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -35,7 +35,7 @@ $activeBorderColor: $secondary-fg-color; .mx_SpacePanel_spaceTreeWrapper { flex: 1; - overflow-y: scroll; + padding: 8px 8px 16px 0; } .mx_SpacePanel_toggleCollapse { @@ -59,11 +59,10 @@ $activeBorderColor: $secondary-fg-color; margin: 0; list-style: none; padding: 0; - padding-left: 16px; - } - .mx_AutoHideScrollbar { - padding: 8px 0 16px; + > .mx_SpaceItem { + padding-left: 16px; + } } .mx_SpaceButton_toggleCollapse { @@ -276,15 +275,17 @@ $activeBorderColor: $secondary-fg-color; .mx_SpaceButton:hover, .mx_SpaceButton:focus-within, .mx_SpaceButton_hasMenuOpen { - // Hide the badge container on hover because it'll be a menu button - .mx_SpacePanel_badgeContainer { - width: 0; - height: 0; - display: none; - } + &:not(.mx_SpaceButton_home) { + // Hide the badge container on hover because it'll be a menu button + .mx_SpacePanel_badgeContainer { + width: 0; + height: 0; + display: none; + } - .mx_SpaceButton_menuButton { - display: block; + .mx_SpaceButton_menuButton { + display: block; + } } } } diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss index 2e7cfb55d9..2dbf0fe0fe 100644 --- a/res/css/structures/_SpaceRoomView.scss +++ b/res/css/structures/_SpaceRoomView.scss @@ -224,35 +224,6 @@ $SpaceRoomViewInnerWidth: 428px; .mx_FacePile_faces { cursor: pointer; - - > span:hover { - .mx_BaseAvatar { - filter: brightness(0.8); - } - } - - > span:first-child { - position: relative; - - .mx_BaseAvatar { - filter: brightness(0.8); - } - - &::before { - content: ""; - z-index: 1; - position: absolute; - top: 0; - left: 0; - height: 30px; - width: 30px; - background: #ffffff; // white icon fill - mask-position: center; - mask-size: 24px; - mask-repeat: no-repeat; - mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); - } - } } } diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss index 3badb0850c..17e6ad75df 100644 --- a/res/css/structures/_UserMenu.scss +++ b/res/css/structures/_UserMenu.scss @@ -117,6 +117,32 @@ limitations under the License. .mx_UserMenu_headerButtons { // No special styles: the rest of the layout happens to make it work. } + + .mx_UserMenu_dnd { + width: 24px; + height: 24px; + margin-right: 8px; + position: relative; + + &::before { + content: ''; + position: absolute; + width: 24px; + height: 24px; + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + background: $muted-fg-color; + } + + &.mx_UserMenu_dnd_noisy::before { + mask-image: url('$(res)/img/element-icons/notifications.svg'); + } + + &.mx_UserMenu_dnd_muted::before { + mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg'); + } + } } &.mx_UserMenu_minimized { diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss index a7cfd7bde6..80ad4d6c0e 100644 --- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss +++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss @@ -101,7 +101,8 @@ limitations under the License. } .mx_SearchBox { - margin: 0; + // To match the space around the title + margin: 0 0 15px 0; flex-grow: 0; } @@ -123,7 +124,9 @@ limitations under the License. } .mx_AddExistingToSpaceDialog_section { - margin-top: 24px; + &:not(:first-child) { + margin-top: 24px; + } > h3 { margin: 0; diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss index 63d0ca555d..30b79c1a9a 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss @@ -1,6 +1,5 @@ /* -Copyright 2018 New Vector Ltd -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2018, 2019, 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. @@ -15,6 +14,27 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_AccessSecretStorageDialog_reset { + position: relative; + padding-left: 24px; // 16px icon + 8px padding + margin-top: 7px; // vertical alignment to buttons + + &::before { + content: ""; + display: inline-block; + position: absolute; + height: 16px; + width: 16px; + left: 0; + top: 2px; // alignment + background-image: url("$(res)/img/element-icons/warning-badge.svg"); + } + + .mx_AccessSecretStorageDialog_reset_link { + color: $warning-color; + } +} + .mx_AccessSecretStorageDialog_titleWithIcon::before { content: ''; display: inline-block; @@ -26,6 +46,13 @@ limitations under the License. background-color: $primary-fg-color; } +.mx_AccessSecretStorageDialog_resetBadge::before { + // The image isn't capable of masking, so we use a background instead. + background-image: url("$(res)/img/element-icons/warning-badge.svg"); + background-size: 24px; + background-color: transparent; +} + .mx_AccessSecretStorageDialog_secureBackupTitle::before { mask-image: url('$(res)/img/feather-customised/secure-backup.svg'); } diff --git a/res/css/views/elements/_FacePile.scss b/res/css/views/elements/_FacePile.scss index 9a992f59d1..c691baffb5 100644 --- a/res/css/views/elements/_FacePile.scss +++ b/res/css/views/elements/_FacePile.scss @@ -20,7 +20,7 @@ limitations under the License. flex-direction: row-reverse; vertical-align: middle; - > span + span { + > .mx_FacePile_face + .mx_FacePile_face { margin-right: -8px; } @@ -31,9 +31,32 @@ limitations under the License. .mx_BaseAvatar_initial { margin: 1px; // to offset the border on the image } + + .mx_FacePile_more { + position: relative; + border-radius: 100%; + width: 30px; + height: 30px; + background-color: $groupFilterPanel-bg-color; + + &::before { + content: ""; + z-index: 1; + position: absolute; + top: 0; + left: 0; + height: inherit; + width: inherit; + background: $tertiary-fg-color; + mask-position: center; + mask-size: 20px; + mask-repeat: no-repeat; + mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); + } + } } - > span { + .mx_FacePile_summary { margin-left: 12px; font-size: $font-14px; line-height: $font-24px; diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss index 0a4ed2a194..93ebcc2d56 100644 --- a/res/css/views/elements/_ImageView.scss +++ b/res/css/views/elements/_ImageView.scss @@ -14,139 +14,108 @@ See the License for the specific language governing permissions and limitations under the License. */ -/* This has got to be the most fragile piece of CSS ever written. - But empirically it works on Chrome/FF/Safari - */ - .mx_ImageView { display: flex; width: 100%; height: 100%; - align-items: center; -} - -.mx_ImageView_lhs { - order: 1; - flex: 1 1 10%; - min-width: 60px; - // background-color: #080; - // height: 20px; -} - -.mx_ImageView_content { - order: 2; - /* min-width hack needed for FF */ - min-width: 0px; - height: 90%; - flex: 15 15 0; - display: flex; - align-items: center; - justify-content: center; -} - -.mx_ImageView_content img { - max-width: 100%; - /* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */ - max-height: 100%; - /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */ - object-fit: contain; - /* background-image: url('$(res)/img/trans.png'); */ - pointer-events: all; -} - -.mx_ImageView_labelWrapper { - position: absolute; - top: 0px; - right: 0px; - height: 100%; - overflow: auto; - pointer-events: all; -} - -.mx_ImageView_label { - text-align: left; - display: flex; - justify-content: center; flex-direction: column; - padding-left: 30px; - padding-right: 30px; - min-height: 100%; - max-width: 240px; +} + +.mx_ImageView_image_wrapper { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + overflow: hidden; +} + +.mx_ImageView_image { + pointer-events: all; + max-width: 95%; + max-height: 95%; +} + +.mx_ImageView_panel { + width: 100%; + height: 68px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.mx_ImageView_info_wrapper { + pointer-events: all; + padding-left: 32px; + display: flex; + flex-direction: row; + align-items: center; color: $lightbox-fg-color; } -.mx_ImageView_cancel { - position: absolute; - // hack for mx_Dialog having a top padding of 40px - top: 40px; - right: 0px; - padding-top: 35px; - padding-right: 35px; - cursor: pointer; +.mx_ImageView_info { + padding-left: 12px; + display: flex; + flex-direction: column; } -.mx_ImageView_rotateClockwise { - position: absolute; - top: 40px; - right: 70px; - padding-top: 35px; - cursor: pointer; +.mx_ImageView_info_sender { + font-weight: bold; } -.mx_ImageView_rotateCounterClockwise { - position: absolute; - top: 40px; - right: 105px; - padding-top: 35px; - cursor: pointer; -} - -.mx_ImageView_name { - font-size: $font-18px; - margin-bottom: 6px; - word-wrap: break-word; -} - -.mx_ImageView_metadata { - font-size: $font-15px; - opacity: 0.5; -} - -.mx_ImageView_download { - display: table; - margin-top: 24px; - margin-bottom: 6px; - border-radius: 5px; - background-color: $lightbox-bg-color; - font-size: $font-14px; - padding: 9px; - border: 1px solid $lightbox-border-color; -} - -.mx_ImageView_size { - font-size: $font-11px; -} - -.mx_ImageView_link { - color: $lightbox-fg-color !important; - text-decoration: none !important; +.mx_ImageView_toolbar { + padding-right: 16px; + pointer-events: all; + display: flex; + align-items: center; } .mx_ImageView_button { - font-size: $font-15px; - opacity: 0.5; - margin-top: 18px; - cursor: pointer; + margin-left: 24px; + display: block; + + &::before { + content: ''; + height: 22px; + width: 22px; + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; + display: block; + background-color: $icon-button-color; + } } -.mx_ImageView_shim { - height: 30px; +.mx_ImageView_button_rotateCW::before { + mask-image: url('$(res)/img/image-view/rotate-cw.svg'); } -.mx_ImageView_rhs { - order: 3; - flex: 1 1 10%; - min-width: 300px; - // background-color: #800; - // height: 20px; +.mx_ImageView_button_rotateCCW::before { + mask-image: url('$(res)/img/image-view/rotate-ccw.svg'); +} + +.mx_ImageView_button_zoomOut::before { + mask-image: url('$(res)/img/image-view/zoom-out.svg'); +} + +.mx_ImageView_button_zoomIn::before { + mask-image: url('$(res)/img/image-view/zoom-in.svg'); +} + +.mx_ImageView_button_download::before { + mask-image: url('$(res)/img/image-view/download.svg'); +} + +.mx_ImageView_button_more::before { + mask-image: url('$(res)/img/image-view/more.svg'); +} + +.mx_ImageView_button_close { + border-radius: 100%; + background: #21262c; // same on all themes + &::before { + width: 32px; + height: 32px; + mask-image: url('$(res)/img/image-view/close.svg'); + mask-size: 40%; + } } diff --git a/res/css/views/elements/_InviteReason.scss b/res/css/views/elements/_InviteReason.scss new file mode 100644 index 0000000000..2c2e5687e6 --- /dev/null +++ b/res/css/views/elements/_InviteReason.scss @@ -0,0 +1,57 @@ +/* +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_InviteReason { + position: relative; + margin-bottom: 1em; + + .mx_InviteReason_reason { + visibility: visible; + } + + .mx_InviteReason_view { + display: none; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + justify-content: center; + align-items: center; + cursor: pointer; + color: $secondary-fg-color; + + &::before { + content: ""; + margin-right: 8px; + background-color: $secondary-fg-color; + mask-image: url('$(res)/img/feather-customised/eye.svg'); + display: inline-block; + width: 18px; + height: 14px; + } + } +} + +.mx_InviteReason_hidden { + .mx_InviteReason_reason { + visibility: hidden; + } + + .mx_InviteReason_view { + display: flex; + } +} diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss index 4f58c08617..e1ba468204 100644 --- a/res/css/views/rooms/_BasicMessageComposer.scss +++ b/res/css/views/rooms/_BasicMessageComposer.scss @@ -68,8 +68,8 @@ limitations under the License. } &.mx_BasicMessageComposer_input_disabled { + // Ignore all user input to avoid accidentally triggering the composer pointer-events: none; - cursor: not-allowed; } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 028d9a7556..2b3e179c54 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -159,6 +159,7 @@ $left-gutter: 64px; .mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp, .mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp, .mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp, +.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp, .mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp, .mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp { visibility: visible; @@ -282,6 +283,10 @@ $left-gutter: 64px; display: inline-block; height: $font-14px; width: $font-14px; + + transition: + left var(--transition-short) ease-out, + top var(--transition-standard) ease-out; } .mx_EventTile_readAvatarRemainder { diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 21baa795e6..b6b901757c 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -216,6 +216,25 @@ $irc-line-height: $font-18px; } } } + + .mx_EventTile_emote { + > .mx_EventTile_avatar { + margin-left: initial; + } + } + + .mx_MessageTimestamp { + width: initial; + } + + /** + * adding the icon back in the document flow + * if it's not present, there's no unwanted wasted space + */ + .mx_EventTile_e2eIcon { + position: relative; + order: -1; + } } .mx_ProfileResizer { diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss index b340080837..0b1da7a41c 100644 --- a/res/css/views/rooms/_RoomPreviewBar.scss +++ b/res/css/views/rooms/_RoomPreviewBar.scss @@ -40,35 +40,6 @@ limitations under the License. word-break: break-word; } - .mx_RoomPreviewBar_reason { - text-align: left; - background-color: $primary-bg-color; - border: 1px solid $invite-reason-border-color; - border-radius: 10px; - padding: 0 16px 12px 16px; - margin: 5px 0 20px 0; - - div { - pointer-events: none; - } - - .mx_EventTile_msgOption { - display: none; - } - - .mx_MatrixChat_useCompactLayout & { - padding-top: 9px; - } - - &.mx_EventTilePreview_faded { - cursor: pointer; - - .mx_SenderProfile, .mx_EventTile_avatar { - opacity: 0.3; - } - } - } - .mx_Spinner { width: auto; height: auto; diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index 92a475694e..9d52e40819 100644 --- a/res/css/views/rooms/_RoomSublist.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -18,6 +18,10 @@ limitations under the License. margin-left: 8px; margin-bottom: 4px; + &.mx_RoomSublist_hidden { + display: none; + } + .mx_RoomSublist_headerContainer { // Create a flexbox to make alignment easy display: flex; @@ -37,7 +41,9 @@ limitations under the License. // The combined height must be set in the LeftPanel component for sticky headers // to work correctly. padding-bottom: 8px; - height: 24px; + // Allow the container to collapse on itself if its children + // are not in the normal document flow + max-height: 24px; color: $roomlist-header-color; .mx_RoomSublist_stickable { diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss index 2fb112a38c..8100a03890 100644 --- a/res/css/views/rooms/_VoiceRecordComposerTile.scss +++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss @@ -53,7 +53,8 @@ limitations under the License. font-size: $font-14px; &::before { - // TODO: @@ TravisR: Animate + animation: recording-pulse 2s infinite; + content: ''; background-color: $voice-record-live-circle-color; width: 10px; @@ -74,3 +75,26 @@ limitations under the License. width: 42px; // we're not using a monospace font, so fake it } } + +// The keyframes are slightly weird here to help make a ramping/punch effect +// for the recording dot. We start and end at 100% opacity to help make the +// dot feel a bit like a real lamp that is blinking: the animation ends up +// spending a lot of its time showing a steady state without a fade effect. +// This lamp effect extends into why the 0% opacity keyframe is not in the +// midpoint: lamps take longer to turn off than they do to turn on, and the +// extra frames give it a bit of a realistic punch for when the animation is +// ramping back up to 100% opacity. +// +// Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s +// (intended to be used in a loop for 2s animation speed) +@keyframes recording-pulse { + 0% { + opacity: 1; + } + 35% { + opacity: 0; + } + 65% { + opacity: 1; + } +} diff --git a/res/fonts/Inter/Inter-Bold.woff b/res/fonts/Inter/Inter-Bold.woff index 61e1c25e64..2ec7ac3d21 100644 Binary files a/res/fonts/Inter/Inter-Bold.woff and b/res/fonts/Inter/Inter-Bold.woff differ diff --git a/res/fonts/Inter/Inter-Bold.woff2 b/res/fonts/Inter/Inter-Bold.woff2 index 6c401bb09b..6989c99229 100644 Binary files a/res/fonts/Inter/Inter-Bold.woff2 and b/res/fonts/Inter/Inter-Bold.woff2 differ diff --git a/res/fonts/Inter/Inter-BoldItalic.woff b/res/fonts/Inter/Inter-BoldItalic.woff index 2de403edd1..aa35b79745 100644 Binary files a/res/fonts/Inter/Inter-BoldItalic.woff and b/res/fonts/Inter/Inter-BoldItalic.woff differ diff --git a/res/fonts/Inter/Inter-BoldItalic.woff2 b/res/fonts/Inter/Inter-BoldItalic.woff2 index 80efd4848d..18b4c1ce5e 100644 Binary files a/res/fonts/Inter/Inter-BoldItalic.woff2 and b/res/fonts/Inter/Inter-BoldItalic.woff2 differ diff --git a/res/fonts/Inter/Inter-Italic.woff b/res/fonts/Inter/Inter-Italic.woff index e7da6663fe..4b765bd592 100644 Binary files a/res/fonts/Inter/Inter-Italic.woff and b/res/fonts/Inter/Inter-Italic.woff differ diff --git a/res/fonts/Inter/Inter-Italic.woff2 b/res/fonts/Inter/Inter-Italic.woff2 index 8559dfde38..bd5f255a98 100644 Binary files a/res/fonts/Inter/Inter-Italic.woff2 and b/res/fonts/Inter/Inter-Italic.woff2 differ diff --git a/res/fonts/Inter/Inter-Medium.woff b/res/fonts/Inter/Inter-Medium.woff index 8c36a6345e..7d55f34cca 100644 Binary files a/res/fonts/Inter/Inter-Medium.woff and b/res/fonts/Inter/Inter-Medium.woff differ diff --git a/res/fonts/Inter/Inter-Medium.woff2 b/res/fonts/Inter/Inter-Medium.woff2 index 3b31d3350a..a916b47fc8 100644 Binary files a/res/fonts/Inter/Inter-Medium.woff2 and b/res/fonts/Inter/Inter-Medium.woff2 differ diff --git a/res/fonts/Inter/Inter-MediumItalic.woff b/res/fonts/Inter/Inter-MediumItalic.woff index fb79e91ff4..422ab0576a 100644 Binary files a/res/fonts/Inter/Inter-MediumItalic.woff and b/res/fonts/Inter/Inter-MediumItalic.woff differ diff --git a/res/fonts/Inter/Inter-MediumItalic.woff2 b/res/fonts/Inter/Inter-MediumItalic.woff2 index d32c111f9c..f623924aea 100644 Binary files a/res/fonts/Inter/Inter-MediumItalic.woff2 and b/res/fonts/Inter/Inter-MediumItalic.woff2 differ diff --git a/res/fonts/Inter/Inter-Regular.woff b/res/fonts/Inter/Inter-Regular.woff index 7d587c40bf..7ff51b7d8f 100644 Binary files a/res/fonts/Inter/Inter-Regular.woff and b/res/fonts/Inter/Inter-Regular.woff differ diff --git a/res/fonts/Inter/Inter-Regular.woff2 b/res/fonts/Inter/Inter-Regular.woff2 index d5ffd2a1f1..554aed6612 100644 Binary files a/res/fonts/Inter/Inter-Regular.woff2 and b/res/fonts/Inter/Inter-Regular.woff2 differ diff --git a/res/fonts/Inter/Inter-SemiBold.woff b/res/fonts/Inter/Inter-SemiBold.woff index 99df06cbee..76e507a515 100644 Binary files a/res/fonts/Inter/Inter-SemiBold.woff and b/res/fonts/Inter/Inter-SemiBold.woff differ diff --git a/res/fonts/Inter/Inter-SemiBold.woff2 b/res/fonts/Inter/Inter-SemiBold.woff2 index df746af999..9307998993 100644 Binary files a/res/fonts/Inter/Inter-SemiBold.woff2 and b/res/fonts/Inter/Inter-SemiBold.woff2 differ diff --git a/res/fonts/Inter/Inter-SemiBoldItalic.woff b/res/fonts/Inter/Inter-SemiBoldItalic.woff index 91e192b9f1..382181212d 100644 Binary files a/res/fonts/Inter/Inter-SemiBoldItalic.woff and b/res/fonts/Inter/Inter-SemiBoldItalic.woff differ diff --git a/res/fonts/Inter/Inter-SemiBoldItalic.woff2 b/res/fonts/Inter/Inter-SemiBoldItalic.woff2 index ff8774ccb4..f19f5505ec 100644 Binary files a/res/fonts/Inter/Inter-SemiBoldItalic.woff2 and b/res/fonts/Inter/Inter-SemiBoldItalic.woff2 differ diff --git a/res/img/cancel-white.svg b/res/img/cancel-white.svg deleted file mode 100644 index 65e14c2fbc..0000000000 --- a/res/img/cancel-white.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - Slice 1 - Created with Sketch. - - - - - \ No newline at end of file diff --git a/res/img/image-view/close.svg b/res/img/image-view/close.svg new file mode 100644 index 0000000000..d603b7f5cc --- /dev/null +++ b/res/img/image-view/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/image-view/download.svg b/res/img/image-view/download.svg new file mode 100644 index 0000000000..c51deed876 --- /dev/null +++ b/res/img/image-view/download.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/image-view/more.svg b/res/img/image-view/more.svg new file mode 100644 index 0000000000..4f5fa6f9b9 --- /dev/null +++ b/res/img/image-view/more.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/image-view/rotate-ccw.svg b/res/img/image-view/rotate-ccw.svg new file mode 100644 index 0000000000..85ea3198de --- /dev/null +++ b/res/img/image-view/rotate-ccw.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/image-view/rotate-cw.svg b/res/img/image-view/rotate-cw.svg new file mode 100644 index 0000000000..e337f3420e --- /dev/null +++ b/res/img/image-view/rotate-cw.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/image-view/zoom-in.svg b/res/img/image-view/zoom-in.svg new file mode 100644 index 0000000000..c0816d489e --- /dev/null +++ b/res/img/image-view/zoom-in.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/image-view/zoom-out.svg b/res/img/image-view/zoom-out.svg new file mode 100644 index 0000000000..0539e8c81a --- /dev/null +++ b/res/img/image-view/zoom-out.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/rotate-ccw.svg b/res/img/rotate-ccw.svg deleted file mode 100644 index 3924eca040..0000000000 --- a/res/img/rotate-ccw.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/res/img/rotate-cw.svg b/res/img/rotate-cw.svg deleted file mode 100644 index 91021c96d8..0000000000 --- a/res/img/rotate-cw.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index f7fda92346..925d268eb0 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -85,6 +85,7 @@ $dialog-close-fg-color: #9fa9ba; $dialog-background-bg-color: $header-panel-bg-color; $lightbox-background-bg-color: #000; +$lightbox-background-bg-opacity: 0.85; $settings-grey-fg-color: #a2a2a2; $settings-profile-placeholder-bg-color: #21262c; @@ -209,8 +210,6 @@ $message-body-panel-fg-color: $primary-fg-color; // Appearance tab colors $appearance-tab-border-color: $room-highlight-color; -$invite-reason-border-color: $room-highlight-color; - // blur amounts for left left panel (only for element theme, used in _mods.scss) $roomlist-background-blur-amount: 60px; $groupFilterPanel-background-blur-amount: 30px; @@ -244,7 +243,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28); @define-mixin mx_DialogButton_secondary { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color ! important; + border: 1px solid $accent-color !important; color: $accent-color; background-color: $button-secondary-bg-color; } diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 95c558a0e4..28e6e22326 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -83,6 +83,7 @@ $dialog-close-fg-color: #9fa9ba; $dialog-background-bg-color: $header-panel-bg-color; $lightbox-background-bg-color: #000; +$lightbox-background-bg-opacity: 0.85; $settings-grey-fg-color: #a2a2a2; $settings-profile-placeholder-bg-color: #e7e7e7; @@ -204,8 +205,6 @@ $message-body-panel-fg-color: $primary-fg-color; // Appearance tab colors $appearance-tab-border-color: $room-highlight-color; -$invite-reason-border-color: $room-highlight-color; - $composer-shadow-color: tranparent; // ***** Mixins! ***** diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index a3f83cabe0..7b6bdad4a4 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -127,6 +127,7 @@ $dialog-close-fg-color: #c1c1c1; $dialog-background-bg-color: #e9e9e9; $lightbox-background-bg-color: #000; +$lightbox-background-bg-opacity: 0.95; $imagebody-giflabel: rgba(0, 0, 0, 0.7); $imagebody-giflabel-border: rgba(0, 0, 0, 0.2); @@ -188,11 +189,12 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%) $groupFilterPanel-divider-color: $roomlist-header-color; +// See non-legacy _light for variable information $voice-record-stop-border-color: #E3E8F0; -$voice-record-stop-symbol-color: $warning-color; +$voice-record-stop-symbol-color: #ff4b55; $voice-record-waveform-bg-color: #E3E8F0; $voice-record-waveform-fg-color: $muted-fg-color; -$voice-record-live-circle-color: $warning-color; +$voice-record-live-circle-color: #ff4b55; $roomtile-preview-color: #9e9e9e; $roomtile-default-badge-bg-color: #61708b; @@ -333,8 +335,6 @@ $message-body-panel-fg-color: $muted-fg-color; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color; -$invite-reason-border-color: $input-darker-bg-color; - $composer-shadow-color: tranparent; // ***** Mixins! ***** diff --git a/res/themes/light/css/_fonts.scss b/res/themes/light/css/_fonts.scss index ba64830f15..68d9496276 100644 --- a/res/themes/light/css/_fonts.scss +++ b/res/themes/light/css/_fonts.scss @@ -15,8 +15,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266 font-weight: 400; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-Regular.woff2?v=3.13") format("woff2"), - url("$(res)/fonts/Inter/Inter-Regular.woff?v=3.13") format("woff"); + src: url("$(res)/fonts/Inter/Inter-Regular.woff2?v=3.18") format("woff2"), + url("$(res)/fonts/Inter/Inter-Regular.woff?v=3.18") format("woff"); } @font-face { font-family: 'Inter'; @@ -24,8 +24,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266 font-weight: 400; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-Italic.woff2?v=3.13") format("woff2"), - url("$(res)/fonts/Inter/Inter-Italic.woff?v=3.13") format("woff"); + src: url("$(res)/fonts/Inter/Inter-Italic.woff2?v=3.18") format("woff2"), + url("$(res)/fonts/Inter/Inter-Italic.woff?v=3.18") format("woff"); } @font-face { @@ -34,8 +34,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266 font-weight: 500; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-Medium.woff2?v=3.13") format("woff2"), - url("$(res)/fonts/Inter/Inter-Medium.woff?v=3.13") format("woff"); + src: url("$(res)/fonts/Inter/Inter-Medium.woff2?v=3.18") format("woff2"), + url("$(res)/fonts/Inter/Inter-Medium.woff?v=3.18") format("woff"); } @font-face { font-family: 'Inter'; @@ -43,8 +43,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266 font-weight: 500; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-MediumItalic.woff2?v=3.13") format("woff2"), - url("$(res)/fonts/Inter/Inter-MediumItalic.woff?v=3.13") format("woff"); + src: url("$(res)/fonts/Inter/Inter-MediumItalic.woff2?v=3.18") format("woff2"), + url("$(res)/fonts/Inter/Inter-MediumItalic.woff?v=3.18") format("woff"); } @font-face { @@ -53,8 +53,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266 font-weight: 600; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-SemiBold.woff2?v=3.13") format("woff2"), - url("$(res)/fonts/Inter/Inter-SemiBold.woff?v=3.13") format("woff"); + src: url("$(res)/fonts/Inter/Inter-SemiBold.woff2?v=3.18") format("woff2"), + url("$(res)/fonts/Inter/Inter-SemiBold.woff?v=3.18") format("woff"); } @font-face { font-family: 'Inter'; @@ -62,8 +62,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266 font-weight: 600; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff2?v=3.13") format("woff2"), - url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff?v=3.13") format("woff"); + src: url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff2?v=3.18") format("woff2"), + url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff?v=3.18") format("woff"); } @font-face { @@ -72,8 +72,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266 font-weight: 700; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-Bold.woff2?v=3.13") format("woff2"), - url("$(res)/fonts/Inter/Inter-Bold.woff?v=3.13") format("woff"); + src: url("$(res)/fonts/Inter/Inter-Bold.woff2?v=3.18") format("woff2"), + url("$(res)/fonts/Inter/Inter-Bold.woff?v=3.18") format("woff"); } @font-face { font-family: 'Inter'; @@ -81,8 +81,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266 font-weight: 700; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-BoldItalic.woff2?v=3.13") format("woff2"), - url("$(res)/fonts/Inter/Inter-BoldItalic.woff?v=3.13") format("woff"); + src: url("$(res)/fonts/Inter/Inter-BoldItalic.woff2?v=3.18") format("woff2"), + url("$(res)/fonts/Inter/Inter-BoldItalic.woff?v=3.18") format("woff"); } /* latin-ext */ diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 3465f555b6..5b46138dae 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -118,6 +118,7 @@ $dialog-close-fg-color: #c1c1c1; $dialog-background-bg-color: #e9e9e9; $lightbox-background-bg-color: #000; +$lightbox-background-bg-opacity: 0.95; $imagebody-giflabel: rgba(0, 0, 0, 0.7); $imagebody-giflabel-border: rgba(0, 0, 0, 0.2); @@ -180,10 +181,10 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%) $groupFilterPanel-divider-color: $roomlist-header-color; $voice-record-stop-border-color: #E3E8F0; -$voice-record-stop-symbol-color: $warning-color; +$voice-record-stop-symbol-color: #ff4b55; // $warning-color, but without letting people change it in themes $voice-record-waveform-bg-color: #E3E8F0; $voice-record-waveform-fg-color: $muted-fg-color; -$voice-record-live-circle-color: $warning-color; +$voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes $roomtile-preview-color: $secondary-fg-color; $roomtile-default-badge-bg-color: #61708b; @@ -331,8 +332,6 @@ $message-body-panel-fg-color: $muted-fg-color; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color; -$invite-reason-border-color: $input-darker-bg-color; - // blur amounts for left left panel (only for element theme, used in _mods.scss) $roomlist-background-blur-amount: 40px; $groupFilterPanel-background-blur-amount: 20px; diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 28606cb188..f2cd4652e0 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -39,7 +39,7 @@ import {ModalWidgetStore} from "../stores/ModalWidgetStore"; import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore"; import VoipUserMapper from "../VoipUserMapper"; import {SpaceStoreClass} from "../stores/SpaceStore"; -import {VoiceRecorder} from "../voice/VoiceRecorder"; +import {VoiceRecording} from "../voice/VoiceRecording"; declare global { interface Window { @@ -71,7 +71,7 @@ declare global { mxModalWidgetStore: ModalWidgetStore; mxVoipUserMapper: VoipUserMapper; mxSpaceStore: SpaceStoreClass; - mxVoiceRecorder: typeof VoiceRecorder; + mxVoiceRecorder: typeof VoiceRecording; } interface Document { @@ -139,4 +139,30 @@ declare global { // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/columnNumber columnNumber?: number; } + + // https://github.com/microsoft/TypeScript/issues/28308#issuecomment-650802278 + interface AudioWorkletProcessor { + readonly port: MessagePort; + process( + inputs: Float32Array[][], + outputs: Float32Array[][], + parameters: Record + ): boolean; + } + + // https://github.com/microsoft/TypeScript/issues/28308#issuecomment-650802278 + const AudioWorkletProcessor: { + prototype: AudioWorkletProcessor; + new (options?: AudioWorkletNodeOptions): AudioWorkletProcessor; + }; + + // https://github.com/microsoft/TypeScript/issues/28308#issuecomment-650802278 + function registerProcessor( + name: string, + processorCtor: (new ( + options?: AudioWorkletNodeOptions + ) => AudioWorkletProcessor) & { + parameterDescriptors?: AudioParamDescriptor[]; + } + ); } diff --git a/src/DateUtils.ts b/src/DateUtils.ts index 9b1edf0775..e4a1175d88 100644 --- a/src/DateUtils.ts +++ b/src/DateUtils.ts @@ -97,7 +97,7 @@ export function formatFullDateNoTime(date: Date): string { }); } -export function formatFullDate(date: Date, showTwelveHour = false): string { +export function formatFullDate(date: Date, showTwelveHour = false, showSeconds = true): string { const days = getDaysArray(); const months = getMonthsArray(); return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s', { @@ -105,7 +105,7 @@ export function formatFullDate(date: Date, showTwelveHour = false): string { monthName: months[date.getMonth()], day: date.getDate(), fullYear: date.getFullYear(), - time: formatFullTime(date, showTwelveHour), + time: showSeconds ? formatFullTime(date, showTwelveHour) : formatTime(date, showTwelveHour), }); } diff --git a/src/Modal.tsx b/src/Modal.tsx index ab582b9b22..ce11c571b6 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -36,6 +36,7 @@ export interface IModal { onBeforeClose?(reason?: string): Promise; onFinished(...args: T): void; close(...args: T): void; + hidden?: boolean; } export interface IHandle { @@ -93,6 +94,12 @@ export class ModalManager { return container; } + public toggleCurrentDialogVisibility() { + const modal = this.getCurrentModal(); + if (!modal) return; + modal.hidden = !modal.hidden; + } + public hasDialogs() { return this.priorityModal || this.staticModal || this.modals.length > 0; } @@ -364,7 +371,7 @@ export class ModalManager { } const modal = this.getCurrentModal(); - if (modal !== this.staticModal) { + if (modal !== this.staticModal && !modal.hidden) { const classes = classNames("mx_Dialog_wrapper", modal.className, { mx_Dialog_wrapperWithStaticUnder: this.staticModal, }); diff --git a/src/Velociraptor.js b/src/NodeAnimator.js similarity index 59% rename from src/Velociraptor.js rename to src/NodeAnimator.js index 2da54babe5..8456e6e9fd 100644 --- a/src/Velociraptor.js +++ b/src/NodeAnimator.js @@ -1,16 +1,15 @@ import React from "react"; import ReactDom from "react-dom"; -import Velocity from "velocity-animate"; import PropTypes from 'prop-types'; /** - * The Velociraptor contains components and animates transitions with velocity. + * The NodeAnimator contains components and animates transitions. * It will only pick up direct changes to properties ('left', currently), and so * will not work for animating positional changes where the position is implicit * from DOM order. This makes it a lot simpler and lighter: if you need fully * automatic positional animation, look at react-shuffle or similar libraries. */ -export default class Velociraptor extends React.Component { +export default class NodeAnimator extends React.Component { static propTypes = { // either a list of child nodes, or a single child. children: PropTypes.any, @@ -20,14 +19,10 @@ export default class Velociraptor extends React.Component { // a list of state objects to apply to each child node in turn startStyles: PropTypes.array, - - // a list of transition options from the corresponding startStyle - enterTransitionOpts: PropTypes.array, }; static defaultProps = { startStyles: [], - enterTransitionOpts: [], }; constructor(props) { @@ -41,6 +36,18 @@ export default class Velociraptor extends React.Component { this._updateChildren(this.props.children); } + /** + * + * @param {HTMLElement} node element to apply styles to + * @param {object} styles a key/value pair of CSS properties + * @returns {void} + */ + _applyStyles(node, styles) { + Object.entries(styles).forEach(([property, value]) => { + node.style[property] = value; + }); + } + _updateChildren(newChildren) { const oldChildren = this.children || {}; this.children = {}; @@ -50,17 +57,8 @@ export default class Velociraptor extends React.Component { const oldNode = ReactDom.findDOMNode(this.nodes[old.key]); if (oldNode && oldNode.style.left !== c.props.style.left) { - Velocity(oldNode, { left: c.props.style.left }, this.props.transition).then(() => { - // special case visibility because it's nonsensical to animate an invisible element - // so we always hidden->visible pre-transition and visible->hidden after - if (oldNode.style.visibility === 'visible' && c.props.style.visibility === 'hidden') { - oldNode.style.visibility = c.props.style.visibility; - } - }); - //console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left); - } - if (oldNode && oldNode.style.visibility === 'hidden' && c.props.style.visibility === 'visible') { - oldNode.style.visibility = c.props.style.visibility; + this._applyStyles(oldNode, { left: c.props.style.left }); + // console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left); } // clone the old element with the props (and children) of the new element // so prop updates are still received by the children. @@ -94,33 +92,22 @@ export default class Velociraptor extends React.Component { this.props.startStyles.length > 0 ) { const startStyles = this.props.startStyles; - const transitionOpts = this.props.enterTransitionOpts; const domNode = ReactDom.findDOMNode(node); // start from startStyle 1: 0 is the one we gave it // to start with, so now we animate 1 etc. - for (var i = 1; i < startStyles.length; ++i) { - Velocity(domNode, startStyles[i], transitionOpts[i-1]); - /* - console.log("start:", - JSON.stringify(transitionOpts[i-1]), - "->", - JSON.stringify(startStyles[i]), - ); - */ + for (let i = 1; i < startStyles.length; ++i) { + this._applyStyles(domNode, startStyles[i]); + // console.log("start:" + // JSON.stringify(startStyles[i]), + // ); } // and then we animate to the resting state - Velocity(domNode, restingStyle, - transitionOpts[i-1]) - .then(() => { - // once we've reached the resting state, hide the element if - // appropriate - domNode.style.visibility = restingStyle.visibility; - }); + setTimeout(() => { + this._applyStyles(domNode, restingStyle); + }, 0); // console.log("enter:", - // JSON.stringify(transitionOpts[i-1]), - // "->", // JSON.stringify(restingStyle)); } this.nodes[k] = node; @@ -128,9 +115,7 @@ export default class Velociraptor extends React.Component { render() { return ( - - { Object.values(this.children) } - + <>{ Object.values(this.children) } ); } } diff --git a/src/Notifier.ts b/src/Notifier.ts index f68bfabc18..3e927cea0c 100644 --- a/src/Notifier.ts +++ b/src/Notifier.ts @@ -383,6 +383,10 @@ export const Notifier = { // don't bother notifying as user was recently active in this room return; } + if (SettingsStore.getValue("doNotDisturb")) { + // Don't bother the user if they didn't ask to be bothered + return; + } if (this.isEnabled()) { this._displayPopupNotification(ev, room); diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index 3b6a202cf6..6ce1439164 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -20,7 +20,7 @@ limitations under the License. import * as React from 'react'; -import { ContentHelpers } from 'matrix-js-sdk'; +import * as ContentHelpers from 'matrix-js-sdk/src/content-helpers'; import {MatrixClientPeg} from './MatrixClientPeg'; import dis from './dispatcher/dispatcher'; import * as sdk from './index'; @@ -1222,4 +1222,5 @@ export function getCommand(input: string) { args, }; } + return {}; } diff --git a/src/TextForEvent.js b/src/TextForEvent.js index 3afe41d216..a6787c647d 100644 --- a/src/TextForEvent.js +++ b/src/TextForEvent.js @@ -95,9 +95,10 @@ function textForMemberEvent(ev) { senderName, targetName, }) + ' ' + reason; - } else { - // sender is not target and made the target leave, if not from invite/ban then this is a kick + } else if (prevContent.membership === "join") { return _t('%(senderName)s kicked %(targetName)s.', {senderName, targetName}) + ' ' + reason; + } else { + return ""; } } } diff --git a/src/VelocityBounce.js b/src/VelocityBounce.js deleted file mode 100644 index ffbf7de829..0000000000 --- a/src/VelocityBounce.js +++ /dev/null @@ -1,17 +0,0 @@ -import Velocity from "velocity-animate"; - -// courtesy of https://github.com/julianshapiro/velocity/issues/283 -// We only use easeOutBounce (easeInBounce is just sort of nonsensical) -function bounce( p ) { - let pow2; - let bounce = 4; - - while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) { - // just sets pow2 - } - return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 ); -} - -Velocity.Easings.easeOutBounce = function(p) { - return 1 - bounce(1 - p); -}; diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index cbfc7b476b..e4762e35ad 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -154,7 +154,7 @@ export default class LeftPanel extends React.Component { private doStickyHeaders(list: HTMLDivElement) { const topEdge = list.scrollTop; const bottomEdge = list.offsetHeight + list.scrollTop; - const sublists = list.querySelectorAll(".mx_RoomSublist"); + const sublists = list.querySelectorAll(".mx_RoomSublist:not(.mx_RoomSublist_hidden)"); const headerRightMargin = 15; // calculated from margins and widths to align with non-sticky tiles const headerStickyWidth = list.clientWidth - headerRightMargin; diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 532b1f4225..078b296295 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -84,6 +84,7 @@ import {replaceableComponent} from "../../utils/replaceableComponent"; import RoomListStore from "../../stores/room-list/RoomListStore"; import {RoomUpdateCause} from "../../stores/room-list/models"; import defaultDispatcher from "../../dispatcher/dispatcher"; +import SecurityCustomisations from "../../customisations/Security"; /** constants for MatrixChat.state.view */ export enum Views { @@ -395,7 +396,11 @@ export default class MatrixChat extends React.PureComponent { const crossSigningIsSetUp = cli.getStoredCrossSigningForUser(cli.getUserId()); if (crossSigningIsSetUp) { - this.setStateForNewView({ view: Views.COMPLETE_SECURITY }); + if (SecurityCustomisations.SHOW_ENCRYPTION_SETUP_UI === false) { + this.onLoggedIn(); + } else { + this.setStateForNewView({view: Views.COMPLETE_SECURITY}); + } } else if (await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) { this.setStateForNewView({ view: Views.E2E_SETUP }); } else { @@ -1091,8 +1096,22 @@ export default class MatrixChat extends React.PureComponent { const roomToLeave = MatrixClientPeg.get().getRoom(roomId); const isSpace = roomToLeave?.isSpaceRoom(); // Show a warning if there are additional complications. - const joinRules = roomToLeave.currentState.getStateEvents('m.room.join_rules', ''); const warnings = []; + + const memberCount = roomToLeave.currentState.getJoinedMemberCount(); + if (memberCount === 1) { + warnings.push(( + + {' '/* Whitespace, otherwise the sentences get smashed together */ } + { _t("You are the only person here. " + + "If you leave, no one will be able to join in the future, including you.") } + + )); + + return warnings; + } + + const joinRules = roomToLeave.currentState.getStateEvents('m.room.join_rules', ''); if (joinRules) { const rule = joinRules.getContent().join_rule; if (rule !== "public") { diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index 41a3015721..132d9ab4c3 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -659,6 +659,7 @@ export default class MessagePanel extends React.Component { showReactions={this.props.showReactions} layout={this.props.layout} enableFlair={this.props.enableFlair} + showReadReceipts={this.props.showReadReceipts} /> , diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index 0543cc4d07..65861624e6 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -74,6 +74,7 @@ interface IState { export default class UserMenu extends React.Component { private dispatcherRef: string; private themeWatcherRef: string; + private dndWatcherRef: string; private buttonRef: React.RefObject = createRef(); private tagStoreRef: fbEmitter.EventSubscription; @@ -89,6 +90,9 @@ export default class UserMenu extends React.Component { if (SettingsStore.getValue("feature_spaces")) { SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate); } + + // Force update is the easiest way to trigger the UI update (we don't store state for this) + this.dndWatcherRef = SettingsStore.watchSetting("doNotDisturb", null, () => this.forceUpdate()); } private get hasHomePage(): boolean { @@ -103,6 +107,7 @@ export default class UserMenu extends React.Component { public componentWillUnmount() { if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef); + if (this.dndWatcherRef) SettingsStore.unwatchSetting(this.dndWatcherRef); if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef); OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate); this.tagStoreRef.remove(); @@ -288,6 +293,12 @@ export default class UserMenu extends React.Component { this.setState({contextMenuPosition: null}); // also close the menu }; + private onDndToggle = (ev) => { + ev.stopPropagation(); + const current = SettingsStore.getValue("doNotDisturb"); + SettingsStore.setValue("doNotDisturb", null, SettingLevel.DEVICE, !current); + }; + private renderContextMenu = (): React.ReactNode => { if (!this.state.contextMenuPosition) return null; @@ -534,6 +545,7 @@ export default class UserMenu extends React.Component { {/* masked image in CSS */} ); + let dnd; if (this.state.selectedSpace) { name = (
@@ -560,6 +572,16 @@ export default class UserMenu extends React.Component {
); isPrototype = true; + } else if (SettingsStore.getValue("feature_dnd")) { + const isDnd = SettingsStore.getValue("doNotDisturb"); + dnd = ; } if (this.props.isMinimized) { name = null; @@ -595,6 +617,7 @@ export default class UserMenu extends React.Component { /> {name} + {dnd} {buttons} diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index 9d004de2ec..73955e7832 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -436,6 +436,8 @@ export default class Registration extends React.Component { // ok fine, there's still no session: really go to the login page this.props.onLoginClick(); } + + return sessionLoaded; }; private renderRegisterComponent() { @@ -557,7 +559,12 @@ export default class Registration extends React.Component { loggedInUserId: this.state.differentLoggedInUserId, }, )}

-

+

{ + const sessionLoaded = await this.onLoginClickWithCheck(event); + if (sessionLoaded) { + dis.dispatch({action: "view_welcome_page"}); + } + }}> {_t("Continue with previous account")}

; diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx index 31245b44b7..ad0eb45a52 100644 --- a/src/components/views/avatars/RoomAvatar.tsx +++ b/src/components/views/avatars/RoomAvatar.tsx @@ -129,7 +129,7 @@ export default class RoomAvatar extends React.Component { name: this.props.room.name, }; - Modal.createDialog(ImageView, params, "mx_Dialog_lightbox"); + Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true); }; public render() { diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index 56f070ba36..f86cd26f32 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -52,6 +52,9 @@ export default class MessageContextMenu extends React.Component { /* callback called when the menu is dismissed */ onFinished: PropTypes.func, + + /* if the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding) */ + onCloseDialog: PropTypes.func, }; state = { @@ -141,6 +144,7 @@ export default class MessageContextMenu extends React.Component { const cli = MatrixClientPeg.get(); try { + if (this.props.onCloseDialog) this.props.onCloseDialog(); await cli.redactEvent( this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(), @@ -190,6 +194,7 @@ export default class MessageContextMenu extends React.Component { }; onForwardClick = () => { + if (this.props.onCloseDialog) this.props.onCloseDialog(); dis.dispatch({ action: 'forward_event', event: this.props.mxEvent, diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx index 04bec39238..0f58a624f3 100644 --- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx +++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx @@ -57,21 +57,23 @@ const AddExistingToSpaceDialog: React.FC = ({ matrixClient: cli, space, const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId); const existingSubspacesSet = new Set(existingSubspaces); - const spaces = SpaceStore.instance.getSpaces().filter(s => { - return !existingSubspacesSet.has(s) // not already in space - && space !== s // not the top-level space - && selectedSpace !== s // not the selected space - && s.name.toLowerCase().includes(lcQuery); // contains query - }); + const existingRoomsSet = new Set(SpaceStore.instance.getChildRooms(space.roomId)); - const existingRooms = SpaceStore.instance.getChildRooms(space.roomId); - const existingRoomsSet = new Set(existingRooms); - const rooms = cli.getVisibleRooms().filter(room => { - return !existingRoomsSet.has(room) // not already in space - && !room.isSpaceRoom() // not a space itself - && room.name.toLowerCase().includes(lcQuery) // contains query - && !DMRoomMap.shared().getUserIdForRoomId(room.roomId); // not a DM - }); + const joinRule = selectedSpace.getJoinRule(); + const [spaces, rooms, dms] = cli.getVisibleRooms().reduce((arr, room) => { + if (room.getMyMembership() !== "join") return arr; + if (!room.name.toLowerCase().includes(lcQuery)) return arr; + + if (room.isSpaceRoom()) { + if (room !== space && room !== selectedSpace && !existingSubspacesSet.has(room)) { + arr[0].push(room); + } + } else if (!existingRoomsSet.has(room) && joinRule !== "public") { + // Only show DMs for non-public spaces as they make very little sense in spaces other than "Just Me" ones. + arr[DMRoomMap.shared().getUserIdForRoomId(room.roomId) ? 2 : 1].push(room); + } + return arr; + }, [[], [], []]); const [busy, setBusy] = useState(false); const [error, setError] = useState(""); @@ -172,7 +174,28 @@ const AddExistingToSpaceDialog: React.FC = ({ matrixClient: cli, space, ) : null } - { spaces.length + rooms.length < 1 ? + { dms.length > 0 ? ( +
+

{ _t("Direct Messages") }

+ { dms.map(space => { + return { + if (checked) { + selectedToAdd.add(space); + } else { + selectedToAdd.delete(space); + } + setSelectedToAdd(new Set(selectedToAdd)); + }} + />; + }) } +
+ ) : null } + + { spaces.length + rooms.length + dms.length < 1 ? { _t("No results") } : undefined } diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index a274f96a17..2ebc84ec7c 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -31,6 +31,7 @@ import Modal from "../../../Modal"; import {humanizeTime} from "../../../utils/humanize"; import createRoom, { canEncryptToAllUsers, ensureDMExists, findDMForUser, privateShouldBeEncrypted, + IInvite3PID, } from "../../../createRoom"; import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite"; import {Key} from "../../../Keyboard"; @@ -618,13 +619,14 @@ export default class InviteDialog extends React.PureComponent { this.setState({busy: true}); + const client = MatrixClientPeg.get(); const targets = this._convertFilter(); const targetIds = targets.map(t => t.userId); // Check if there is already a DM with these people and reuse it if possible. let existingRoom: Room; if (targetIds.length === 1) { - existingRoom = findDMForUser(MatrixClientPeg.get(), targetIds[0]); + existingRoom = findDMForUser(client, targetIds[0]); } else { existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds); } @@ -646,7 +648,6 @@ export default class InviteDialog extends React.PureComponent t instanceof ThreepidMember); if (!has3PidMembers) { - const client = MatrixClientPeg.get(); const allHaveDeviceKeys = await canEncryptToAllUsers(client, targetIds); if (allHaveDeviceKeys) { createRoomOptions.encryption = true; @@ -656,35 +657,41 @@ export default class InviteDialog extends React.PureComponent; - const isSelf = targetIds.length === 1 && targetIds[0] === MatrixClientPeg.get().getUserId(); - if (targetIds.length === 1 && !isSelf) { - createRoomOptions.dmUserId = targetIds[0]; - createRoomPromise = createRoom(createRoomOptions); - } else if (isSelf) { - createRoomPromise = createRoom(createRoomOptions); - } else { - // Create a boring room and try to invite the targets manually. - createRoomPromise = createRoom(createRoomOptions).then(roomId => { - return inviteMultipleToRoom(roomId, targetIds); - }).then(result => { - if (this._shouldAbortAfterInviteError(result)) { - return true; // abort - } - }); - } + try { + const isSelf = targetIds.length === 1 && targetIds[0] === client.getUserId(); + if (targetIds.length === 1 && !isSelf) { + createRoomOptions.dmUserId = targetIds[0]; + } - // the createRoom call will show the room for us, so we don't need to worry about that. - createRoomPromise.then(abort => { - if (abort === true) return; // only abort on true booleans, not roomIds or something + if (targetIds.length > 1) { + createRoomOptions.createOpts = targetIds.reduce( + (roomOptions, address) => { + const type = getAddressType(address); + if (type === 'email') { + const invite: IInvite3PID = { + id_server: client.getIdentityServerUrl(true), + medium: 'email', + address, + }; + roomOptions.invite_3pid.push(invite); + } else if (type === 'mx-user-id') { + roomOptions.invite.push(address); + } + return roomOptions; + }, + { invite: [], invite_3pid: [] }, + ) + } + + await createRoom(createRoomOptions); this.props.onFinished(); - }).catch(err => { + } catch (err) { console.error(err); this.setState({ busy: false, errorText: _t("We couldn't create your DM."), }); - }); + } }; _inviteUsers = async () => { @@ -712,8 +719,7 @@ export default class InviteDialog extends React.PureComponent {_t("You most likely do not want to reset your event index store")}
{_t("If you do, please note that none of your messages will be deleted, " + - "but the search experience might be degraded for a few moments" + + "but the search experience might be degraded for a few moments " + "whilst the index is recreated", )}

diff --git a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx index 3c09470b39..ffe513581b 100644 --- a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx +++ b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx @@ -25,6 +25,8 @@ import Field from '../../elements/Field'; import AccessibleButton from '../../elements/AccessibleButton'; import {_t} from '../../../../languageHandler'; import {IDialogProps} from "../IDialogProps"; +import {accessSecretStorage} from "../../../../SecurityManager"; +import Modal from "../../../../Modal"; // Maximum acceptable size of a key file. It's 59 characters including the spaces we encode, // so this should be plenty and allow for people putting extra whitespace in the file because @@ -47,6 +49,7 @@ interface IState { forceRecoveryKey: boolean; passPhrase: string; keyMatches: boolean | null; + resetting: boolean; } /* @@ -66,10 +69,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent { + if (this.state.resetting) { + this.setState({resetting: false}); + } this.props.onFinished(false); }; @@ -201,6 +208,55 @@ export default class AccessSecretStorageDialog extends React.PureComponent) => { + ev.preventDefault(); + this.setState({resetting: true}); + }; + + private onConfirmResetAllClick = async () => { + // Hide ourselves so the user can interact with the reset dialogs. + // We don't conclude the promise chain (onFinished) yet to avoid confusing + // any upstream code flows. + // + // Note: this will unmount us, so don't call `setState` or anything in the + // rest of this function. + Modal.toggleCurrentDialogVisibility(); + + try { + // Force reset secret storage (which resets the key backup) + await accessSecretStorage(async () => { + // Now reset cross-signing so everything Just Works™ again. + const cli = MatrixClientPeg.get(); + await cli.bootstrapCrossSigning({ + authUploadDeviceSigningKeys: async (makeRequest) => { + // XXX: Making this an import breaks the app. + const InteractiveAuthDialog = sdk.getComponent("views.dialogs.InteractiveAuthDialog"); + const {finished} = Modal.createTrackedDialog( + 'Cross-signing keys dialog', '', InteractiveAuthDialog, + { + title: _t("Setting up keys"), + matrixClient: cli, + makeRequest, + }, + ); + const [confirmed] = await finished; + if (!confirmed) { + throw new Error("Cross-signing key upload auth canceled"); + } + }, + setupNewCrossSigning: true, + }); + + // Now we can indicate that the user is done pressing buttons, finally. + // Upstream flows will detect the new secret storage, key backup, etc and use it. + this.props.onFinished(true); + }, true); + } catch (e) { + console.error(e); + this.props.onFinished(false); + } + }; + private getKeyValidationText(): string { if (this.state.recoveryKeyFileError) { return _t("Wrong file type"); @@ -216,8 +272,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent + {_t("Forgotten or lost all recovery methods? Reset all", null, { + a: (sub) => {sub}, + })} + + ); + let content; let title; let titleClass; - if (hasPassphrase && !this.state.forceRecoveryKey) { - const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); + if (this.state.resetting) { + title = _t("Reset everything"); + titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_resetBadge']; + content =
+

{_t("Only do this if you have no other device to complete verification with.")}

+

{_t("If you reset everything, you will restart with no trusted sessions, no trusted users, and " + + "might not be able to see past messages.")}

+ +
; + } else if (hasPassphrase && !this.state.forceRecoveryKey) { const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); title = _t("Security Phrase"); titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_securePhraseTitle']; @@ -278,13 +360,13 @@ export default class AccessSecretStorageDialog extends React.PureComponent ; } else { title = _t("Security Key"); titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_secureBackupTitle']; - const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); const feedbackClasses = classNames({ 'mx_AccessSecretStorageDialog_recoveryKeyFeedback': true, @@ -339,6 +421,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent ; diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index 077c116873..b15fbbed2b 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -55,22 +55,10 @@ interface IProps { * The mxc:// avatar URL of the displayed user */ avatarUrl?: string; - - /** - * Whether the EventTile should appear faded - */ - faded?: boolean; - - /** - * Callback for when the component is clicked - */ - onClick?: () => void; } interface IState { message: string; - faded: boolean; - eventTileKey: number; } const AVATAR_SIZE = 32; @@ -81,23 +69,9 @@ export default class EventTilePreview extends React.Component { super(props); this.state = { message: props.message, - faded: !!props.faded, - eventTileKey: 0, }; } - changeMessage(message: string) { - this.setState({ - message, - // Change the EventTile key to force React to create a new instance - eventTileKey: this.state.eventTileKey + 1, - }); - } - - unfade() { - this.setState({ faded: false }); - } - private fakeEvent({message}: IState) { // Fake it till we make it /* eslint-disable quote-props */ @@ -147,12 +121,10 @@ export default class EventTilePreview extends React.Component { const className = classnames(this.props.className, { "mx_IRCLayout": this.props.layout == Layout.IRC, "mx_GroupLayout": this.props.layout == Layout.Group, - "mx_EventTilePreview_faded": this.state.faded, }); - return
+ return
{ const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length; const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IProps) => { + const cli = useContext(MatrixClientContext); let members = useRoomMembers(room); // sort users with an explicit avatar first @@ -46,21 +48,42 @@ const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, . // sort known users first iteratees.unshift(member => isKnownMember(member)); } - if (members.length < 1) return null; - const shownMembers = sortBy(members, iteratees).slice(0, numShown); + // exclude ourselves from the shown members list + const shownMembers = sortBy(members.filter(m => m.userId !== cli.getUserId()), iteratees).slice(0, numShown); + if (shownMembers.length < 1) return null; + + // We reverse the order of the shown faces in CSS to simplify their visual overlap, + // reverse members in tooltip order to make the order between the two match up. + const commaSeparatedMembers = shownMembers.map(m => m.rawDisplayName).reverse().join(", "); + + let tooltip: ReactNode; + if (props.onClick) { + tooltip =
+
+ { _t("View all %(count)s members", { count: members.length }) } +
+
+ { _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers }) } +
+
; + } else { + tooltip = _t("%(count)s members including %(commaSeparatedMembers)s", { + count: members.length, + commaSeparatedMembers, + }); + } + return
-
- { shownMembers.map(member => { - return - - ; - }) } -
- { onlyKnownUsers && + + { members.length > numShown ? : null } + { shownMembers.map(m => + )} + + { onlyKnownUsers && { _t("%(count)s people you know have already joined", { count: members.length }) } } -
+
; }; export default FacePile; diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx index f5754da9ae..59d9a11596 100644 --- a/src/components/views/elements/Field.tsx +++ b/src/components/views/elements/Field.tsx @@ -262,7 +262,7 @@ export default class Field extends React.PureComponent { tooltipClassName={classNames("mx_Field_tooltip", tooltipClassName)} visible={(this.state.focused && this.props.forceTooltipVisible) || this.state.feedbackVisible} label={tooltipContent || this.state.feedback} - forceOnRight + alignment={Tooltip.Alignment.Right} />; } diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js deleted file mode 100644 index 96b6de832d..0000000000 --- a/src/components/views/elements/ImageView.js +++ /dev/null @@ -1,235 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> - -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. -*/ - -import React from 'react'; -import PropTypes from 'prop-types'; -import {MatrixClientPeg} from "../../../MatrixClientPeg"; -import {formatDate} from '../../../DateUtils'; -import { _t } from '../../../languageHandler'; -import filesize from "filesize"; -import AccessibleButton from "./AccessibleButton"; -import Modal from "../../../Modal"; -import * as sdk from "../../../index"; -import {Key} from "../../../Keyboard"; -import FocusLock from "react-focus-lock"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; - -@replaceableComponent("views.elements.ImageView") -export default class ImageView extends React.Component { - static propTypes = { - src: PropTypes.string.isRequired, // the source of the image being displayed - name: PropTypes.string, // the main title ('name') for the image - link: PropTypes.string, // the link (if any) applied to the name of the image - width: PropTypes.number, // width of the image src in pixels - height: PropTypes.number, // height of the image src in pixels - fileSize: PropTypes.number, // size of the image src in bytes - onFinished: PropTypes.func.isRequired, // callback when the lightbox is dismissed - - // the event (if any) that the Image is displaying. Used for event-specific stuff like - // redactions, senders, timestamps etc. Other descriptors are taken from the explicit - // properties above, which let us use lightboxes to display images which aren't associated - // with events. - mxEvent: PropTypes.object, - }; - - constructor(props) { - super(props); - this.state = { rotationDegrees: 0 }; - } - - onKeyDown = (ev) => { - if (ev.key === Key.ESCAPE) { - ev.stopPropagation(); - ev.preventDefault(); - this.props.onFinished(); - } - }; - - onRedactClick = () => { - const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog"); - Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, { - onFinished: (proceed) => { - if (!proceed) return; - this.props.onFinished(); - MatrixClientPeg.get().redactEvent( - this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(), - ).catch(function(e) { - const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - // display error message stating you couldn't delete this. - const code = e.errcode || e.statusCode; - Modal.createTrackedDialog('You cannot delete this image.', '', ErrorDialog, { - title: _t('Error'), - description: _t('You cannot delete this image. (%(code)s)', {code: code}), - }); - }); - }, - }); - }; - - getName() { - let name = this.props.name; - if (name && this.props.link) { - name = { name }; - } - return name; - } - - rotateCounterClockwise = () => { - const cur = this.state.rotationDegrees; - const rotationDegrees = (cur - 90) % 360; - this.setState({ rotationDegrees }); - }; - - rotateClockwise = () => { - const cur = this.state.rotationDegrees; - const rotationDegrees = (cur + 90) % 360; - this.setState({ rotationDegrees }); - }; - - render() { -/* - // In theory max-width: 80%, max-height: 80% on the CSS should work - // but in practice, it doesn't, so do it manually: - - var width = this.props.width || 500; - var height = this.props.height || 500; - - var maxWidth = document.documentElement.clientWidth * 0.8; - var maxHeight = document.documentElement.clientHeight * 0.8; - - var widthFrac = width / maxWidth; - var heightFrac = height / maxHeight; - - var displayWidth; - var displayHeight; - if (widthFrac > heightFrac) { - displayWidth = Math.min(width, maxWidth); - displayHeight = (displayWidth / width) * height; - } else { - displayHeight = Math.min(height, maxHeight); - displayWidth = (displayHeight / height) * width; - } - - var style = { - width: displayWidth, - height: displayHeight - }; -*/ - let style = {}; - let res; - - if (this.props.width && this.props.height) { - style = { - width: this.props.width, - height: this.props.height, - }; - res = style.width + "x" + style.height + "px"; - } - - let size; - if (this.props.fileSize) { - size = filesize(this.props.fileSize); - } - - let sizeRes; - if (size && res) { - sizeRes = size + ", " + res; - } else { - sizeRes = size || res; - } - - let mayRedact = false; - const showEventMeta = !!this.props.mxEvent; - - let eventMeta; - if (showEventMeta) { - // Figure out the sender, defaulting to mxid - let sender = this.props.mxEvent.getSender(); - const cli = MatrixClientPeg.get(); - const room = cli.getRoom(this.props.mxEvent.getRoomId()); - if (room) { - mayRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId); - const member = room.getMember(sender); - if (member) sender = member.name; - } - - eventMeta = (
- { _t('Uploaded on %(date)s by %(user)s', { - date: formatDate(new Date(this.props.mxEvent.getTs())), - user: sender, - }) } -
); - } - - let eventRedact; - if (mayRedact) { - eventRedact = (
- { _t('Remove') } -
); - } - - const rotationDegrees = this.state.rotationDegrees; - const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style}; - - return ( - -
-
-
- -
-
- - { - - - { - - - { - -
-
-
- { this.getName() } -
- { eventMeta } - -
- { _t('Download this file') }
- { sizeRes } -
-
- { eventRedact } -
-
-
-
-
-
-
-
- ); - } -} diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx new file mode 100644 index 0000000000..cbced07bfe --- /dev/null +++ b/src/components/views/elements/ImageView.tsx @@ -0,0 +1,446 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> +Copyright 2020, 2021 Šimon Brandner + +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. +*/ + +import React, { createRef } from 'react'; +import { _t } from '../../../languageHandler'; +import AccessibleTooltipButton from "./AccessibleTooltipButton"; +import {Key} from "../../../Keyboard"; +import FocusLock from "react-focus-lock"; +import MemberAvatar from "../avatars/MemberAvatar"; +import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton"; +import MessageContextMenu from "../context_menus/MessageContextMenu"; +import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu'; +import MessageTimestamp from "../messages/MessageTimestamp"; +import SettingsStore from "../../../settings/SettingsStore"; +import {formatFullDate} from "../../../DateUtils"; +import dis from '../../../dispatcher/dispatcher'; +import {replaceableComponent} from "../../../utils/replaceableComponent"; +import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks" +import {MatrixEvent} from "matrix-js-sdk/src/models/event"; +import {normalizeWheelEvent} from "../../../utils/Mouse"; + +const MIN_ZOOM = 100; +const MAX_ZOOM = 300; +// This is used for the buttons +const ZOOM_STEP = 10; +// This is used for mouse wheel events +const ZOOM_COEFFICIENT = 0.5; +// If we have moved only this much we can zoom +const ZOOM_DISTANCE = 10; + + +interface IProps { + src: string, // the source of the image being displayed + name?: string, // the main title ('name') for the image + link?: string, // the link (if any) applied to the name of the image + width?: number, // width of the image src in pixels + height?: number, // height of the image src in pixels + fileSize?: number, // size of the image src in bytes + onFinished(): void, // callback when the lightbox is dismissed + + // the event (if any) that the Image is displaying. Used for event-specific stuff like + // redactions, senders, timestamps etc. Other descriptors are taken from the explicit + // properties above, which let us use lightboxes to display images which aren't associated + // with events. + mxEvent: MatrixEvent, + permalinkCreator: RoomPermalinkCreator, +} + +interface IState { + rotation: number, + zoom: number, + translationX: number, + translationY: number, + moving: boolean, + contextMenuDisplayed: boolean, +} + +@replaceableComponent("views.elements.ImageView") +export default class ImageView extends React.Component { + constructor(props) { + super(props); + this.state = { + rotation: 0, + zoom: MIN_ZOOM, + translationX: 0, + translationY: 0, + moving: false, + contextMenuDisplayed: false, + }; + } + + // XXX: Refs to functional components + private contextMenuButton = createRef(); + private focusLock = createRef(); + + private initX = 0; + private initY = 0; + private lastX = 0; + private lastY = 0; + private previousX = 0; + private previousY = 0; + + componentDidMount() { + // We have to use addEventListener() because the listener + // needs to be passive in order to work with Chromium + this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false }); + } + + componentWillUnmount() { + this.focusLock.current.removeEventListener('wheel', this.onWheel); + } + + private onKeyDown = (ev: KeyboardEvent) => { + if (ev.key === Key.ESCAPE) { + ev.stopPropagation(); + ev.preventDefault(); + this.props.onFinished(); + } + }; + + private onWheel = (ev: WheelEvent) => { + ev.stopPropagation(); + ev.preventDefault(); + + const {deltaY} = normalizeWheelEvent(ev); + const newZoom = this.state.zoom - (deltaY * ZOOM_COEFFICIENT); + + if (newZoom <= MIN_ZOOM) { + this.setState({ + zoom: MIN_ZOOM, + translationX: 0, + translationY: 0, + }); + return; + } + if (newZoom >= MAX_ZOOM) { + this.setState({zoom: MAX_ZOOM}); + return; + } + + this.setState({ + zoom: newZoom, + }); + }; + + private onRotateCounterClockwiseClick = () => { + const cur = this.state.rotation; + const rotationDegrees = cur - 90; + this.setState({ rotation: rotationDegrees }); + }; + + private onRotateClockwiseClick = () => { + const cur = this.state.rotation; + const rotationDegrees = cur + 90; + this.setState({ rotation: rotationDegrees }); + }; + + private onZoomInClick = () => { + if (this.state.zoom >= MAX_ZOOM) { + this.setState({zoom: MAX_ZOOM}); + return; + } + + this.setState({ + zoom: this.state.zoom + ZOOM_STEP, + }); + }; + + private onZoomOutClick = () => { + if (this.state.zoom <= MIN_ZOOM) { + this.setState({ + zoom: MIN_ZOOM, + translationX: 0, + translationY: 0, + }); + return; + } + this.setState({ + zoom: this.state.zoom - ZOOM_STEP, + }); + }; + + private onDownloadClick = () => { + const a = document.createElement("a"); + a.href = this.props.src; + a.download = this.props.name; + a.target = "_blank"; + a.click(); + }; + + private onOpenContextMenu = () => { + this.setState({ + contextMenuDisplayed: true, + }); + }; + + private onCloseContextMenu = () => { + this.setState({ + contextMenuDisplayed: false, + }); + }; + + private onPermalinkClicked = (ev: React.MouseEvent) => { + // This allows the permalink to be opened in a new tab/window or copied as + // matrix.to, but also for it to enable routing within Element when clicked. + ev.preventDefault(); + dis.dispatch({ + action: 'view_room', + event_id: this.props.mxEvent.getId(), + highlighted: true, + room_id: this.props.mxEvent.getRoomId(), + }); + this.props.onFinished(); + }; + + private onStartMoving = (ev: React.MouseEvent) => { + ev.stopPropagation(); + ev.preventDefault(); + + // Don't do anything if we pressed any + // other button than the left one + if (ev.button !== 0) return; + + // Zoom in if we are completely zoomed out + if (this.state.zoom === MIN_ZOOM) { + this.setState({zoom: MAX_ZOOM}); + return; + } + + this.setState({moving: true}); + this.previousX = this.state.translationX; + this.previousY = this.state.translationY; + this.initX = ev.pageX - this.lastX; + this.initY = ev.pageY - this.lastY; + }; + + private onMoving = (ev: React.MouseEvent) => { + ev.stopPropagation(); + ev.preventDefault(); + + if (!this.state.moving) return; + + this.lastX = ev.pageX - this.initX; + this.lastY = ev.pageY - this.initY; + this.setState({ + translationX: this.lastX, + translationY: this.lastY, + }); + }; + + private onEndMoving = () => { + // Zoom out if we haven't moved much + if ( + this.state.moving === true && + Math.abs(this.state.translationX - this.previousX) < ZOOM_DISTANCE && + Math.abs(this.state.translationY - this.previousY) < ZOOM_DISTANCE + ) { + this.setState({ + zoom: MIN_ZOOM, + translationX: 0, + translationY: 0, + }); + } + this.setState({moving: false}); + }; + + private renderContextMenu() { + let contextMenu = null; + if (this.state.contextMenuDisplayed) { + contextMenu = ( + + + + ); + } + + return ( + + { contextMenu } + + ); + } + + render() { + const showEventMeta = !!this.props.mxEvent; + + let cursor; + if (this.state.moving) { + cursor= "grabbing"; + } else if (this.state.zoom === MIN_ZOOM) { + cursor = "zoom-in"; + } else { + cursor = "zoom-out"; + } + const rotationDegrees = this.state.rotation + "deg"; + const zoomPercentage = this.state.zoom/100; + const translatePixelsX = this.state.translationX + "px"; + const translatePixelsY = this.state.translationY + "px"; + // The order of the values is important! + // First, we translate and only then we rotate, otherwise + // we would apply the translation to an already rotated + // image causing it translate in the wrong direction. + const style = { + cursor: cursor, + transition: this.state.moving ? null : "transform 200ms ease 0s", + transform: `translateX(${translatePixelsX}) + translateY(${translatePixelsY}) + scale(${zoomPercentage}) + rotate(${rotationDegrees})`, + }; + + let info; + if (showEventMeta) { + const mxEvent = this.props.mxEvent; + const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps"); + let permalink = "#"; + if (this.props.permalinkCreator) { + permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId()); + } + + const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(); + const sender = ( +
+ {senderName} +
+ ); + const messageTimestamp = ( + + + + ); + const avatar = ( + + ); + + info = ( +
+ {avatar} +
+ {sender} + {messageTimestamp} +
+
+ ); + } else { + // If there is no event - we're viewing an avatar, we set + // an empty div here, since the panel uses space-between + // and we want the same placement of elements + info = ( +
+ ); + } + + let contextMenuButton; + if (this.props.mxEvent) { + contextMenuButton = ( + + ); + } + + return ( + +
+ {info} +
+ + + + + + + + + + + {contextMenuButton} + + + {this.renderContextMenu()} +
+
+
+ +
+
+ ); + } +} diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx index 8f7f1ea53f..d49090dbae 100644 --- a/src/components/views/elements/InfoTooltip.tsx +++ b/src/components/views/elements/InfoTooltip.tsx @@ -18,8 +18,8 @@ limitations under the License. import React from 'react'; import classNames from 'classnames'; -import Tooltip from './Tooltip'; -import { _t } from "../../../languageHandler"; +import Tooltip, {Alignment} from './Tooltip'; +import {_t} from "../../../languageHandler"; import {replaceableComponent} from "../../../utils/replaceableComponent"; interface ITooltipProps { @@ -61,7 +61,7 @@ export default class InfoTooltip extends React.PureComponent :
; return (
diff --git a/src/components/views/elements/InviteReason.tsx b/src/components/views/elements/InviteReason.tsx new file mode 100644 index 0000000000..ddce7552ed --- /dev/null +++ b/src/components/views/elements/InviteReason.tsx @@ -0,0 +1,62 @@ +/* +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. +*/ + +import classNames from "classnames"; +import React from "react"; +import { _t } from "../../../languageHandler"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; + +interface IProps { + reason: string; +} + +interface IState { + hidden: boolean; +} + +@replaceableComponent("views.elements.InviteReason") +export default class InviteReason extends React.PureComponent { + constructor(props) { + super(props); + this.state = { + // We hide the reason for invitation by default, since it can be a + // vector for spam/harassment. + hidden: true, + }; + } + + onViewClick = () => { + this.setState({ + hidden: false, + }); + } + + render() { + const classes = classNames({ + "mx_InviteReason": true, + "mx_InviteReason_hidden": this.state.hidden, + }); + + return
+
{this.props.reason}
+
+ {_t("View message")} +
+
; + } +} diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js index f504b3e97f..701c140a19 100644 --- a/src/components/views/elements/PersistedElement.js +++ b/src/components/views/elements/PersistedElement.js @@ -139,6 +139,8 @@ export default class PersistedElement extends React.Component { _onAction(payload) { if (payload.action === 'timeline_resize') { this._repositionChild(); + } else if (payload.action === 'logout') { + PersistedElement.destroyElement(this.props.persistKey); } } diff --git a/src/components/views/elements/TextWithTooltip.js b/src/components/views/elements/TextWithTooltip.js index 0bd491768c..a6fc00fc2e 100644 --- a/src/components/views/elements/TextWithTooltip.js +++ b/src/components/views/elements/TextWithTooltip.js @@ -25,6 +25,7 @@ export default class TextWithTooltip extends React.Component { class: PropTypes.string, tooltipClass: PropTypes.string, tooltip: PropTypes.node.isRequired, + tooltipProps: PropTypes.object, }; constructor() { @@ -46,15 +47,17 @@ export default class TextWithTooltip extends React.Component { render() { const Tooltip = sdk.getComponent("elements.Tooltip"); - const {class: className, children, tooltip, tooltipClass, ...props} = this.props; + const {class: className, children, tooltip, tooltipClass, tooltipProps, ...props} = this.props; return ( {children} {this.state.hover && } + className={"mx_TextWithTooltip_tooltip"} + /> } ); } diff --git a/src/components/views/elements/Tooltip.tsx b/src/components/views/elements/Tooltip.tsx index b2dd00de18..062d26c852 100644 --- a/src/components/views/elements/Tooltip.tsx +++ b/src/components/views/elements/Tooltip.tsx @@ -25,6 +25,14 @@ import {replaceableComponent} from "../../../utils/replaceableComponent"; const MIN_TOOLTIP_HEIGHT = 25; +export enum Alignment { + Natural, // Pick left or right + Left, + Right, + Top, // Centered + Bottom, // Centered +} + interface IProps { // Class applied to the element used to position the tooltip className?: string; @@ -36,7 +44,7 @@ interface IProps { visible?: boolean; // the react element to put into the tooltip label: React.ReactNode; - forceOnRight?: boolean; + alignment?: Alignment; // defaults to Natural yOffset?: number; } @@ -46,10 +54,14 @@ export default class Tooltip extends React.Component { private tooltip: void | Element | Component; private parent: Element; + // XXX: This is because some components (Field) are unable to `import` the Tooltip class, + // so we expose the Alignment options off of us statically. + public static readonly Alignment = Alignment; public static readonly defaultProps = { visible: true, yOffset: 0, + alignment: Alignment.Natural, }; // Create a wrapper for the tooltip outside the parent and attach it to the body element @@ -86,11 +98,35 @@ export default class Tooltip extends React.Component { offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT); } - style.top = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset + offset; - if (!this.props.forceOnRight && parentBox.right > window.innerWidth / 2) { - style.right = window.innerWidth - parentBox.right - window.pageXOffset - 16; - } else { - style.left = parentBox.right + window.pageXOffset + 6; + const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset; + const top = baseTop + offset; + const right = window.innerWidth - parentBox.right - window.pageXOffset - 16; + const left = parentBox.right + window.pageXOffset + 6; + const horizontalCenter = parentBox.right - window.pageXOffset - (parentBox.width / 2); + switch (this.props.alignment) { + case Alignment.Natural: + if (parentBox.right > window.innerWidth / 2) { + style.right = right; + style.top = top; + break; + } + // fall through to Right + case Alignment.Right: + style.left = left; + style.top = top; + break; + case Alignment.Left: + style.right = right; + style.top = top; + break; + case Alignment.Top: + style.top = baseTop - 16; + style.left = horizontalCenter; + break; + case Alignment.Bottom: + style.top = baseTop + parentBox.height; + style.left = horizontalCenter; + break; } return style; diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 3683818027..5af2063c84 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -41,6 +41,9 @@ export default class MImageBody extends React.Component { /* the maximum image height to use */ maxImageHeight: PropTypes.number, + + /* the permalinkCreator */ + permalinkCreator: PropTypes.object, }; static contextType = MatrixClientContext; @@ -106,6 +109,7 @@ export default class MImageBody extends React.Component { src: httpUrl, name: content.body && content.body.length > 0 ? content.body : _t('Attachment'), mxEvent: this.props.mxEvent, + permalinkCreator: this.props.permalinkCreator, }; if (content.info) { @@ -114,7 +118,7 @@ export default class MImageBody extends React.Component { params.fileSize = content.info.size; } - Modal.createDialog(ImageView, params, "mx_Dialog_lightbox"); + Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true); } } diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js index 28c2f8f9b9..60f7631c8e 100644 --- a/src/components/views/messages/MessageEvent.js +++ b/src/components/views/messages/MessageEvent.js @@ -46,6 +46,9 @@ export default class MessageEvent extends React.Component { /* the maximum image height to use, if the event is an image */ maxImageHeight: PropTypes.number, + + /* the permalinkCreator */ + permalinkCreator: PropTypes.object, }; constructor(props) { @@ -126,6 +129,7 @@ export default class MessageEvent extends React.Component { editState={this.props.editState} onHeightChanged={this.props.onHeightChanged} onMessageAllowed={this.onTileUpdate} + permalinkCreator={this.props.permalinkCreator} />; } } diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js index c9bdb8937e..a7f350adcd 100644 --- a/src/components/views/messages/MessageTimestamp.js +++ b/src/components/views/messages/MessageTimestamp.js @@ -17,7 +17,7 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; -import {formatFullDate, formatTime} from '../../../DateUtils'; +import {formatFullDate, formatTime, formatFullTime} from '../../../DateUtils'; import {replaceableComponent} from "../../../utils/replaceableComponent"; @replaceableComponent("views.messages.MessageTimestamp") @@ -25,13 +25,24 @@ export default class MessageTimestamp extends React.Component { static propTypes = { ts: PropTypes.number.isRequired, showTwelveHour: PropTypes.bool, + showFullDate: PropTypes.bool, + showSeconds: PropTypes.bool, }; render() { const date = new Date(this.props.ts); + let timestamp; + if (this.props.showFullDate) { + timestamp = formatFullDate(date, this.props.showTwelveHour, this.props.showSeconds); + } else if (this.props.showSeconds) { + timestamp = formatFullTime(date, this.props.showTwelveHour); + } else { + timestamp = formatTime(date, this.props.showTwelveHour); + } + return ( - { formatTime(date, this.props.showTwelveHour) } + {timestamp} ); } diff --git a/src/components/views/messages/RoomAvatarEvent.js b/src/components/views/messages/RoomAvatarEvent.js index 00aaf9bfda..41eada3193 100644 --- a/src/components/views/messages/RoomAvatarEvent.js +++ b/src/components/views/messages/RoomAvatarEvent.js @@ -49,7 +49,7 @@ export default class RoomAvatarEvent extends React.Component { src: httpUrl, name: text, }; - Modal.createDialog(ImageView, params, "mx_Dialog_lightbox"); + Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true); }; render() { diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 12a6a2a311..be152d91bd 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -24,6 +24,7 @@ import {RoomMember} from 'matrix-js-sdk/src/models/room-member'; import {User} from 'matrix-js-sdk/src/models/user'; import {Room} from 'matrix-js-sdk/src/models/room'; import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline'; +import {MatrixEvent} from 'matrix-js-sdk/src/models/event'; import dis from '../../../dispatcher/dispatcher'; import Modal from '../../../Modal'; @@ -496,11 +497,11 @@ const isMuted = (member: RoomMember, powerLevelContent: IPowerLevelsContent) => export const useRoomPowerLevels = (cli: MatrixClient, room: Room) => { const [powerLevels, setPowerLevels] = useState({}); - const update = useCallback(() => { - if (!room) { - return; - } - const event = room.currentState.getStateEvents("m.room.power_levels", ""); + const update = useCallback((ev?: MatrixEvent) => { + if (!room) return; + if (ev && ev.getType() !== EventType.RoomPowerLevels) return; + + const event = room.currentState.getStateEvents(EventType.RoomPowerLevels, ""); if (event) { setPowerLevels(event.getContent()); } else { @@ -511,7 +512,7 @@ export const useRoomPowerLevels = (cli: MatrixClient, room: Room) => { }; }, [room]); - useEventEmitter(cli, "RoomState.members", update); + useEventEmitter(cli, "RoomState.events", update); useEffect(() => { update(); return () => { @@ -1431,7 +1432,7 @@ const UserInfoHeader: React.FC<{ name: member.name, }; - Modal.createDialog(ImageView, params, "mx_Dialog_lightbox"); + Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true); }, [member]); const avatarElement = ( @@ -1494,7 +1495,7 @@ const UserInfoHeader: React.FC<{ e2eIcon = ; } - const displayName = member.name || member.displayname; + const displayName = member.rawDisplayName || member.displayname; return { avatarElement } diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx index 9d9e3a1ba0..e83f066bd0 100644 --- a/src/components/views/rooms/BasicMessageComposer.tsx +++ b/src/components/views/rooms/BasicMessageComposer.tsx @@ -140,7 +140,12 @@ export default class BasicMessageEditor extends React.Component } public componentDidUpdate(prevProps: IProps) { - if (this.props.placeholder !== prevProps.placeholder && this.props.placeholder) { + // We need to re-check the placeholder when the enabled state changes because it causes the + // placeholder element to remount, which gets rid of the `::before` class. Re-evaluating the + // placeholder means we get a proper `::before` with the placeholder. + const enabledChange = this.props.disabled !== prevProps.disabled; + const placeholderChanged = this.props.placeholder !== prevProps.placeholder; + if (this.props.placeholder && (placeholderChanged || enabledChange)) { const {isEmpty} = this.props.model; if (isEmpty) { this.showPlaceholder(); @@ -670,8 +675,6 @@ export default class BasicMessageEditor extends React.Component }); const classes = classNames("mx_BasicMessageComposer_input", { "mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar, - - // TODO: @@ TravisR: This doesn't work properly. The composer resets in a strange way. "mx_BasicMessageComposer_input_disabled": this.props.disabled, }); diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index d51f4c00f1..f6fb83c064 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -1,8 +1,6 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2017 New Vector Ltd Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> -Copyright 2019, 2020 The Matrix.org Foundation C.I.C. +Copyright 2019 - 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. @@ -17,18 +15,19 @@ See the License for the specific language governing permissions and limitations under the License. */ -import ReplyThread from "../elements/ReplyThread"; import React, {createRef} from 'react'; import PropTypes from 'prop-types'; import classNames from "classnames"; import {EventType} from "matrix-js-sdk/src/@types/event"; +import {EventStatus} from 'matrix-js-sdk/src/models/event'; + +import ReplyThread from "../elements/ReplyThread"; import { _t } from '../../../languageHandler'; import * as TextForEvent from "../../../TextForEvent"; import * as sdk from "../../../index"; import dis from '../../../dispatcher/dispatcher'; import SettingsStore from "../../../settings/SettingsStore"; import {Layout, LayoutPropType} from "../../../settings/Layout"; -import {EventStatus} from 'matrix-js-sdk/src/models/event'; import {formatTime} from "../../../DateUtils"; import {MatrixClientPeg} from '../../../MatrixClientPeg'; import {ALL_RULE_TYPES} from "../../../mjolnir/BanList"; @@ -43,39 +42,56 @@ import {replaceableComponent} from "../../../utils/replaceableComponent"; import Tooltip from "../elements/Tooltip"; const eventTileTypes = { - 'm.room.message': 'messages.MessageEvent', - 'm.sticker': 'messages.MessageEvent', - 'm.key.verification.cancel': 'messages.MKeyVerificationConclusion', - 'm.key.verification.done': 'messages.MKeyVerificationConclusion', - 'm.room.encryption': 'messages.EncryptionEvent', - 'm.call.invite': 'messages.TextualEvent', - 'm.call.answer': 'messages.TextualEvent', - 'm.call.hangup': 'messages.TextualEvent', - 'm.call.reject': 'messages.TextualEvent', + [EventType.RoomMessage]: 'messages.MessageEvent', + [EventType.Sticker]: 'messages.MessageEvent', + [EventType.KeyVerificationCancel]: 'messages.MKeyVerificationConclusion', + [EventType.KeyVerificationDone]: 'messages.MKeyVerificationConclusion', + [EventType.CallInvite]: 'messages.TextualEvent', + [EventType.CallAnswer]: 'messages.TextualEvent', + [EventType.CallHangup]: 'messages.TextualEvent', + [EventType.CallReject]: 'messages.TextualEvent', }; const stateEventTileTypes = { - 'm.room.encryption': 'messages.EncryptionEvent', - 'm.room.canonical_alias': 'messages.TextualEvent', - 'm.room.create': 'messages.RoomCreate', - 'm.room.member': 'messages.TextualEvent', - 'm.room.name': 'messages.TextualEvent', - 'm.room.avatar': 'messages.RoomAvatarEvent', - 'm.room.third_party_invite': 'messages.TextualEvent', - 'm.room.history_visibility': 'messages.TextualEvent', - 'm.room.topic': 'messages.TextualEvent', - 'm.room.power_levels': 'messages.TextualEvent', - 'm.room.pinned_events': 'messages.TextualEvent', - 'm.room.server_acl': 'messages.TextualEvent', + [EventType.RoomEncryption]: 'messages.EncryptionEvent', + [EventType.RoomCanonicalAlias]: 'messages.TextualEvent', + [EventType.RoomCreate]: 'messages.RoomCreate', + [EventType.RoomMember]: 'messages.TextualEvent', + [EventType.RoomName]: 'messages.TextualEvent', + [EventType.RoomAvatar]: 'messages.RoomAvatarEvent', + [EventType.RoomThirdPartyInvite]: 'messages.TextualEvent', + [EventType.RoomHistoryVisibility]: 'messages.TextualEvent', + [EventType.RoomTopic]: 'messages.TextualEvent', + [EventType.RoomPowerLevels]: 'messages.TextualEvent', + [EventType.RoomPinnedEvents]: 'messages.TextualEvent', + [EventType.RoomServerAcl]: 'messages.TextualEvent', // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111) 'im.vector.modular.widgets': 'messages.TextualEvent', [WIDGET_LAYOUT_EVENT_TYPE]: 'messages.TextualEvent', - 'm.room.tombstone': 'messages.TextualEvent', - 'm.room.join_rules': 'messages.TextualEvent', - 'm.room.guest_access': 'messages.TextualEvent', - 'm.room.related_groups': 'messages.TextualEvent', + [EventType.RoomTombstone]: 'messages.TextualEvent', + [EventType.RoomJoinRules]: 'messages.TextualEvent', + [EventType.RoomGuestAccess]: 'messages.TextualEvent', + 'm.room.related_groups': 'messages.TextualEvent', // legacy communities flair }; +const stateEventSingular = new Set([ + EventType.RoomEncryption, + EventType.RoomCanonicalAlias, + EventType.RoomCreate, + EventType.RoomName, + EventType.RoomAvatar, + EventType.RoomHistoryVisibility, + EventType.RoomTopic, + EventType.RoomPowerLevels, + EventType.RoomPinnedEvents, + EventType.RoomServerAcl, + WIDGET_LAYOUT_EVENT_TYPE, + EventType.RoomTombstone, + EventType.RoomJoinRules, + EventType.RoomGuestAccess, + 'm.room.related_groups', +]); + // Add all the Mjolnir stuff to the renderer for (const evType of ALL_RULE_TYPES) { stateEventTileTypes[evType] = 'messages.TextualEvent'; @@ -132,7 +148,12 @@ export function getHandlerTile(ev) { } } - return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type]; + if (ev.isState()) { + if (stateEventSingular.has(type) && ev.getStateKey() !== "") return undefined; + return stateEventTileTypes[type]; + } + + return eventTileTypes[type]; } const MAX_READ_AVATARS = 5; @@ -239,6 +260,9 @@ export default class EventTile extends React.Component { // whether or not to show flair at all enableFlair: PropTypes.bool, + + // whether or not to show read receipts + showReadReceipts: PropTypes.bool, }; static defaultProps = { @@ -837,8 +861,6 @@ export default class EventTile extends React.Component { permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId()); } - const readAvatars = this.getReadAvatars(); - let avatar; let sender; let avatarSize; @@ -967,6 +989,16 @@ export default class EventTile extends React.Component { const groupPadlock = !useIRCLayout && !isBubbleMessage && this._renderE2EPadlock(); const ircPadlock = useIRCLayout && !isBubbleMessage && this._renderE2EPadlock(); + let msgOption; + if (this.props.showReadReceipts) { + const readAvatars = this.getReadAvatars(); + msgOption = ( +
+ { readAvatars } +
+ ); + } + switch (this.props.tileShape) { case 'notif': { const room = this.context.getRoom(this.props.mxEvent.getRoomId()); @@ -1080,14 +1112,13 @@ export default class EventTile extends React.Component { highlights={this.props.highlights} highlightLink={this.props.highlightLink} showUrlPreview={this.props.showUrlPreview} + permalinkCreator={this.props.permalinkCreator} onHeightChanged={this.props.onHeightChanged} /> { keyRequestInfo } { reactionsRow } { actionBar }
-
- { readAvatars } -
+ {msgOption} { // The avatar goes after the event tile as it's absolutely positioned to be over the // event tile line, so needs to be later in the DOM so it appears on top (this avoids diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js index 536abf57fc..c04bb6cb7c 100644 --- a/src/components/views/rooms/LinkPreviewWidget.js +++ b/src/components/views/rooms/LinkPreviewWidget.js @@ -96,7 +96,7 @@ export default class LinkPreviewWidget extends React.Component { link: this.props.link, }; - Modal.createDialog(ImageView, params, "mx_Dialog_lightbox"); + Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true); }; render() { diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index b7078766fb..5178d52305 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -29,11 +29,12 @@ import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import ReplyPreview from "./ReplyPreview"; import {UIFeature} from "../../../settings/UIFeature"; -import WidgetStore from "../../../stores/WidgetStore"; import {UPDATE_EVENT} from "../../../stores/AsyncStore"; -import ActiveWidgetStore from "../../../stores/ActiveWidgetStore"; import {replaceableComponent} from "../../../utils/replaceableComponent"; import VoiceRecordComposerTile from "./VoiceRecordComposerTile"; +import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore"; +import {RecordingState} from "../../../voice/VoiceRecording"; +import Tooltip, {Alignment} from "../elements/Tooltip"; function ComposerAvatar(props) { const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar'); @@ -178,17 +179,15 @@ export default class MessageComposer extends React.Component { this._onRoomStateEvents = this._onRoomStateEvents.bind(this); this._onTombstoneClick = this._onTombstoneClick.bind(this); this.renderPlaceholderText = this.renderPlaceholderText.bind(this); - WidgetStore.instance.on(UPDATE_EVENT, this._onWidgetUpdate); - ActiveWidgetStore.on('update', this._onActiveWidgetUpdate); + VoiceRecordingStore.instance.on(UPDATE_EVENT, this._onVoiceStoreUpdate); this._dispatcherRef = null; this.state = { tombstone: this._getRoomTombstone(), canSendMessages: this.props.room.maySendMessage(), - hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room), - joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room), isComposerEmpty: true, haveRecording: false, + recordingTimeLeftSeconds: null, // when set to a number, shows a toast }; } @@ -204,14 +203,6 @@ export default class MessageComposer extends React.Component { } }; - _onWidgetUpdate = () => { - this.setState({hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room)}); - }; - - _onActiveWidgetUpdate = () => { - this.setState({joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room)}); - }; - componentDidMount() { this.dispatcherRef = dis.register(this.onAction); MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents); @@ -238,8 +229,7 @@ export default class MessageComposer extends React.Component { if (MatrixClientPeg.get()) { MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents); } - WidgetStore.instance.removeListener(UPDATE_EVENT, this._onWidgetUpdate); - ActiveWidgetStore.removeListener('update', this._onActiveWidgetUpdate); + VoiceRecordingStore.instance.off(UPDATE_EVENT, this._onVoiceStoreUpdate); dis.unregister(this.dispatcherRef); } @@ -327,8 +317,18 @@ export default class MessageComposer extends React.Component { }); } - onVoiceUpdate = (haveRecording: boolean) => { - this.setState({haveRecording}); + _onVoiceStoreUpdate = () => { + const recording = VoiceRecordingStore.instance.activeRecording; + this.setState({haveRecording: !!recording}); + if (recording) { + // We show a little heads up that the recording is about to automatically end soon. The 3s + // display time is completely arbitrary. Note that we don't need to deregister the listener + // because the recording instance will clean that up for us. + recording.on(RecordingState.EndingSoon, ({secondsLeft}) => { + this.setState({recordingTimeLeftSeconds: secondsLeft}); + setTimeout(() => this.setState({recordingTimeLeftSeconds: null}), 3000); + }); + } }; render() { @@ -352,7 +352,6 @@ export default class MessageComposer extends React.Component { permalinkCreator={this.props.permalinkCreator} replyToEvent={this.props.replyToEvent} onChange={this.onChange} - // TODO: @@ TravisR - Disabling the composer doesn't work disabled={this.state.haveRecording} />, ); @@ -373,8 +372,7 @@ export default class MessageComposer extends React.Component { if (SettingsStore.getValue("feature_voice_messages")) { controls.push(); + room={this.props.room} />); } if (!this.state.isComposerEmpty || this.state.haveRecording) { @@ -411,8 +409,18 @@ export default class MessageComposer extends React.Component { ); } + let recordingTooltip; + const secondsLeft = Math.round(this.state.recordingTimeLeftSeconds); + if (secondsLeft) { + recordingTooltip = ; + } + return (
+ {recordingTooltip}
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js index 7473aac7cd..709e6a0db0 100644 --- a/src/components/views/rooms/ReadReceiptMarker.js +++ b/src/components/views/rooms/ReadReceiptMarker.js @@ -17,22 +17,13 @@ limitations under the License. import React, {createRef} from 'react'; import PropTypes from 'prop-types'; -import '../../../VelocityBounce'; import { _t } from '../../../languageHandler'; import {formatDate} from '../../../DateUtils'; -import Velociraptor from "../../../Velociraptor"; +import NodeAnimator from "../../../NodeAnimator"; import * as sdk from "../../../index"; import {toPx} from "../../../utils/units"; import {replaceableComponent} from "../../../utils/replaceableComponent"; -let bounce = false; -try { - if (global.localStorage) { - bounce = global.localStorage.getItem('avatar_bounce') == 'true'; - } -} catch (e) { -} - @replaceableComponent("views.rooms.ReadReceiptMarker") export default class ReadReceiptMarker extends React.PureComponent { static propTypes = { @@ -115,7 +106,18 @@ export default class ReadReceiptMarker extends React.PureComponent { // we've already done our display - nothing more to do. return; } + this._animateMarker(); + } + componentDidUpdate(prevProps) { + const differentLeftOffset = prevProps.leftOffset !== this.props.leftOffset; + const visibilityChanged = prevProps.hidden !== this.props.hidden; + if (differentLeftOffset || visibilityChanged) { + this._animateMarker(); + } + } + + _animateMarker() { // treat new RRs as though they were off the top of the screen let oldTop = -15; @@ -139,42 +141,18 @@ export default class ReadReceiptMarker extends React.PureComponent { } const startStyles = []; - const enterTransitionOpts = []; if (oldInfo && oldInfo.left) { // start at the old height and in the old h pos - startStyles.push({ top: startTopOffset+"px", left: toPx(oldInfo.left) }); - - const reorderTransitionOpts = { - duration: 100, - easing: 'easeOut', - }; - - enterTransitionOpts.push(reorderTransitionOpts); } - // then shift to the rightmost column, - // and then it will drop down to its resting position - // - // XXX: We use a small left value to trick velocity-animate into actually animating. - // This is a very annoying bug where if it thinks there's no change to `left` then it'll - // skip applying it, thus making our read receipt at +14px instead of +0px like it - // should be. This does cause a tiny amount of drift for read receipts, however with a - // value so small it's not perceived by a user. - // Note: Any smaller values (or trying to interchange units) might cause read receipts to - // fail to fall down or cause gaps. - startStyles.push({ top: startTopOffset+'px', left: '1px' }); - enterTransitionOpts.push({ - duration: bounce ? Math.min(Math.log(Math.abs(startTopOffset)) * 200, 3000) : 300, - easing: bounce ? 'easeOutBounce' : 'easeOutCubic', - }); + startStyles.push({ top: startTopOffset+'px', left: '0' }); this.setState({ suppressDisplay: false, startStyles: startStyles, - enterTransitionOpts: enterTransitionOpts, }); } @@ -187,7 +165,6 @@ export default class ReadReceiptMarker extends React.PureComponent { const style = { left: toPx(this.props.leftOffset), top: '0px', - visibility: this.props.hidden ? 'hidden' : 'visible', }; let title; @@ -210,9 +187,8 @@ export default class ReadReceiptMarker extends React.PureComponent { } return ( - + - + ); } } diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index 963e94ebbb..e4e638fc67 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -289,12 +289,11 @@ export default class RoomList extends React.PureComponent { // shallow-copy from the template as we need to make modifications to it this.tagAesthetics = objectShallowClone(TAG_AESTHETICS); this.updateDmAddRoomAction(); - - this.dispatcherRef = defaultDispatcher.register(this.onAction); - this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); } public componentDidMount(): void { + this.dispatcherRef = defaultDispatcher.register(this.onAction); + this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); SpaceStore.instance.on(SUGGESTED_ROOMS, this.updateSuggestedRooms); RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists); this.customTagStoreRef = CustomRoomTagStore.addListener(this.updateLists); @@ -502,62 +501,56 @@ export default class RoomList extends React.PureComponent { } private renderSublists(): React.ReactElement[] { - const components: React.ReactElement[] = []; - - const tagOrder = TAG_ORDER.reduce((p, c) => { - if (c === CUSTOM_TAGS_BEFORE_TAG) { - const customTags = Object.keys(this.state.sublists) - .filter(t => isCustomTag(t)); - p.push(...customTags); - } - p.push(c); - return p; - }, [] as TagID[]); - // show a skeleton UI if the user is in no rooms and they are not filtering const showSkeleton = !this.state.isNameFiltering && Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length); - for (const orderedTagId of tagOrder) { - const orderedRooms = this.state.sublists[orderedTagId] || []; - - let extraTiles = null; - if (orderedTagId === DefaultTagID.Invite) { - extraTiles = this.renderCommunityInvites(); - } else if (orderedTagId === DefaultTagID.Suggested) { - extraTiles = this.renderSuggestedRooms(); + return TAG_ORDER.reduce((tags, tagId) => { + if (tagId === CUSTOM_TAGS_BEFORE_TAG) { + const customTags = Object.keys(this.state.sublists) + .filter(tagId => isCustomTag(tagId)); + tags.push(...customTags); } + tags.push(tagId); + return tags; + }, [] as TagID[]) + .map(orderedTagId => { + let extraTiles = null; + if (orderedTagId === DefaultTagID.Invite) { + extraTiles = this.renderCommunityInvites(); + } else if (orderedTagId === DefaultTagID.Suggested) { + extraTiles = this.renderSuggestedRooms(); + } - const totalTiles = orderedRooms.length + (extraTiles ? extraTiles.length : 0); - if (totalTiles === 0 && !ALWAYS_VISIBLE_TAGS.includes(orderedTagId)) { - continue; // skip tag - not needed - } + const aesthetics: ITagAesthetics = isCustomTag(orderedTagId) + ? customTagAesthetics(orderedTagId) + : this.tagAesthetics[orderedTagId]; + if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`); - const aesthetics: ITagAesthetics = isCustomTag(orderedTagId) - ? customTagAesthetics(orderedTagId) - : this.tagAesthetics[orderedTagId]; - if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`); - - components.push(); - } - - return components; + // The cost of mounting/unmounting this component offsets the cost + // of keeping it in the DOM and hiding it when it is not required + return + }); } public render() { + const cli = MatrixClientPeg.get(); + const userId = cli.getUserId(); + let explorePrompt: JSX.Element; if (!this.props.isMinimized) { if (this.state.isNameFiltering) { @@ -578,21 +571,23 @@ export default class RoomList extends React.PureComponent { { this.props.activeSpace ? _t("Explore rooms") : _t("Explore all public rooms") }
; - } else if (this.props.activeSpace) { + } else if ( + this.props.activeSpace?.canInvite(userId) || this.props.activeSpace?.getMyMembership() === "join" + ) { explorePrompt =
{ _t("Quick actions") }
- { this.props.activeSpace.canInvite(MatrixClientPeg.get().getUserId()) && {_t("Invite people")} } - {_t("Explore rooms")} - + }
; } else if (Object.values(this.state.sublists).some(list => list.length > 0)) { const unfilteredLists = RoomListStore.instance.unfilteredLists diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js index f84458a32f..7f20451d6d 100644 --- a/src/components/views/rooms/RoomPreviewBar.js +++ b/src/components/views/rooms/RoomPreviewBar.js @@ -1,7 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2017 Vector Creations Ltd -Copyright 2019, 2020 The Matrix.org Foundation C.I.C. +Copyright 2015-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. @@ -25,10 +23,10 @@ import classNames from 'classnames'; import { _t } from '../../../languageHandler'; import SdkConfig from "../../../SdkConfig"; import IdentityAuthClient from '../../../IdentityAuthClient'; -import SettingsStore from "../../../settings/SettingsStore"; import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore"; import {UPDATE_EVENT} from "../../../stores/AsyncStore"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; +import InviteReason from "../elements/InviteReason"; const MessageCase = Object.freeze({ NotLoggedIn: "NotLoggedIn", @@ -303,7 +301,6 @@ export default class RoomPreviewBar extends React.Component { const brand = SdkConfig.get().brand; const Spinner = sdk.getComponent('elements.Spinner'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); - const EventTilePreview = sdk.getComponent('elements.EventTilePreview'); let showSpinner = false; let title; @@ -497,24 +494,7 @@ export default class RoomPreviewBar extends React.Component { const myUserId = MatrixClientPeg.get().getUserId(); const reason = this.props.room.currentState.getMember(myUserId).events.member.event.content.reason; if (reason) { - this.reasonElement = React.createRef(); - // We hide the reason for invitation by default, since it can be a - // vector for spam/harassment. - const showReason = () => { - this.reasonElement.current.unfade(); - this.reasonElement.current.changeMessage(reason); - }; - reasonElement =