diff --git a/CHANGELOG.md b/CHANGELOG.md index b2e1f1af0d..e08b2ad612 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,276 @@ +Changes in [2.10.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.10.1) (2020-07-16) +===================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.10.0...v2.10.1) + + * Post-launch Element Web polish + [\#5002](https://github.com/matrix-org/matrix-react-sdk/pull/5002) + * Move e2e icon + [\#4992](https://github.com/matrix-org/matrix-react-sdk/pull/4992) + * Wire up new room list breadcrumbs as an ARIA Toolbar + [\#4976](https://github.com/matrix-org/matrix-react-sdk/pull/4976) + * Fix Room Tile Icon to not ignore DMs in other tags + [\#4999](https://github.com/matrix-org/matrix-react-sdk/pull/4999) + * Fix filtering by community not showing DM rooms with community members + [\#4997](https://github.com/matrix-org/matrix-react-sdk/pull/4997) + * Fix enter in new room list filter breaking things + [\#4996](https://github.com/matrix-org/matrix-react-sdk/pull/4996) + * Notify left panel of resizing when it is collapsed&expanded + [\#4995](https://github.com/matrix-org/matrix-react-sdk/pull/4995) + * When removing a filter condition, try recalculate in case it wasn't last + [\#4994](https://github.com/matrix-org/matrix-react-sdk/pull/4994) + * Create a generic ARIA toolbar component + [\#4975](https://github.com/matrix-org/matrix-react-sdk/pull/4975) + * Fix /op Slash Command + [\#4604](https://github.com/matrix-org/matrix-react-sdk/pull/4604) + * Fix copy button in share dialog + [\#4998](https://github.com/matrix-org/matrix-react-sdk/pull/4998) + * Add tooltip to Room Tile Icon + [\#4987](https://github.com/matrix-org/matrix-react-sdk/pull/4987) + * Fix names jumping on hover in irc layout + [\#4991](https://github.com/matrix-org/matrix-react-sdk/pull/4991) + * check that encryptionInfo.sender is set + [\#4988](https://github.com/matrix-org/matrix-react-sdk/pull/4988) + * Update help link + [\#4986](https://github.com/matrix-org/matrix-react-sdk/pull/4986) + * Update cover photo link + [\#4985](https://github.com/matrix-org/matrix-react-sdk/pull/4985) + +Changes in [2.10.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.10.0) (2020-07-15) +===================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.9.0...v2.10.0) + + * Incorporate new toasts into end-to-end tests + [\#4983](https://github.com/matrix-org/matrix-react-sdk/pull/4983) + * Fix TS lint errors + [\#4982](https://github.com/matrix-org/matrix-react-sdk/pull/4982) + * Fix js lint errors after rebrand merge + [\#4981](https://github.com/matrix-org/matrix-react-sdk/pull/4981) + * Fix style lint + [\#4980](https://github.com/matrix-org/matrix-react-sdk/pull/4980) + * Fix alignment of login/syncing spinner + [\#4979](https://github.com/matrix-org/matrix-react-sdk/pull/4979) + * De labs font-scaling + [\#4899](https://github.com/matrix-org/matrix-react-sdk/pull/4899) + * Remove debug logging from new room list + [\#4972](https://github.com/matrix-org/matrix-react-sdk/pull/4972) + * Tweak sticky header hiding to avoid pop + [\#4974](https://github.com/matrix-org/matrix-react-sdk/pull/4974) + * Fix show-all keyboard focus regression + [\#4973](https://github.com/matrix-org/matrix-react-sdk/pull/4973) + * Clean up TODOs, comments, and imports in the new room list + [\#4970](https://github.com/matrix-org/matrix-react-sdk/pull/4970) + * Make EffectiveMembership utils generic + [\#4971](https://github.com/matrix-org/matrix-react-sdk/pull/4971) + * Update sticky headers when breadcrumbs pop in or out + [\#4969](https://github.com/matrix-org/matrix-react-sdk/pull/4969) + * Fix show less button occluding the last tile + [\#4967](https://github.com/matrix-org/matrix-react-sdk/pull/4967) + * Ensure breadcrumbs don't keep turning themselves back on + [\#4968](https://github.com/matrix-org/matrix-react-sdk/pull/4968) + * Update top vs. bottom sticky styles separately + [\#4966](https://github.com/matrix-org/matrix-react-sdk/pull/4966) + * Ensure RoomListStore2 gets reset when the client becomes invalidated + [\#4965](https://github.com/matrix-org/matrix-react-sdk/pull/4965) + * Add fade to show more button on room list + [\#4963](https://github.com/matrix-org/matrix-react-sdk/pull/4963) + * Fix extra room tiles being rendered on smaller sublists + [\#4964](https://github.com/matrix-org/matrix-react-sdk/pull/4964) + * Ensure tag changes (leaving rooms) causes rooms to move between lists + [\#4962](https://github.com/matrix-org/matrix-react-sdk/pull/4962) + * Fix badges for font size 20 + [\#4958](https://github.com/matrix-org/matrix-react-sdk/pull/4958) + * Fix default sorting mechanics for new room list + [\#4960](https://github.com/matrix-org/matrix-react-sdk/pull/4960) + * Fix room sub list header collapse/jump interactions on bottom-most sublist + [\#4961](https://github.com/matrix-org/matrix-react-sdk/pull/4961) + * Fix room tile context menu for Historical rooms + [\#4959](https://github.com/matrix-org/matrix-react-sdk/pull/4959) + * "ignore"/"unignore" commands: validate user ID + [\#4895](https://github.com/matrix-org/matrix-react-sdk/pull/4895) + * Stop classname from overwritting baseavatar's + [\#4957](https://github.com/matrix-org/matrix-react-sdk/pull/4957) + * Remove redundant scroll-margins and fix RoomTile wrongly scrolling + [\#4952](https://github.com/matrix-org/matrix-react-sdk/pull/4952) + * Fix RoomAvatar viewAvatarOnClick to work on actual avatars instead of + default ones + [\#4953](https://github.com/matrix-org/matrix-react-sdk/pull/4953) + * Be consistent with the at-room pill avatar configurability + [\#4955](https://github.com/matrix-org/matrix-react-sdk/pull/4955) + * Room List v2 Enter in the filter field should select the first result + [\#4954](https://github.com/matrix-org/matrix-react-sdk/pull/4954) + * Enable the new room list by default + [\#4919](https://github.com/matrix-org/matrix-react-sdk/pull/4919) + * Convert ImportanceAlgorithm over to using NotificationColor instead + [\#4949](https://github.com/matrix-org/matrix-react-sdk/pull/4949) + * Internalize algorithm updates in the new room list store + [\#4951](https://github.com/matrix-org/matrix-react-sdk/pull/4951) + * Remove now-dead code from sublist resizing + [\#4950](https://github.com/matrix-org/matrix-react-sdk/pull/4950) + * Ensure triggered updates get fired for filters in the new room list + [\#4948](https://github.com/matrix-org/matrix-react-sdk/pull/4948) + * Handle off-cycle filtering updates in the new room list + [\#4947](https://github.com/matrix-org/matrix-react-sdk/pull/4947) + * Make the show more button do a clean cut on the room list while transparent + [\#4941](https://github.com/matrix-org/matrix-react-sdk/pull/4941) + * Stop safari from aggressively shrinking flex items + [\#4945](https://github.com/matrix-org/matrix-react-sdk/pull/4945) + * Fix search padding + [\#4946](https://github.com/matrix-org/matrix-react-sdk/pull/4946) + * Reduce event loop load caused by duplicate calculations in the new room list + [\#4943](https://github.com/matrix-org/matrix-react-sdk/pull/4943) + * Add an option to disable room list logging, and improve logging + [\#4944](https://github.com/matrix-org/matrix-react-sdk/pull/4944) + * Scroll fade for breadcrumbs + [\#4942](https://github.com/matrix-org/matrix-react-sdk/pull/4942) + * Auto expand room list on search + [\#4927](https://github.com/matrix-org/matrix-react-sdk/pull/4927) + * Fix rough badge alignment for community invite tiles again + [\#4939](https://github.com/matrix-org/matrix-react-sdk/pull/4939) + * Improve safety of new rooms in the room list + [\#4940](https://github.com/matrix-org/matrix-react-sdk/pull/4940) + * Don't destroy room notification states when replacing them + [\#4938](https://github.com/matrix-org/matrix-react-sdk/pull/4938) + * Move irc layout option to advanced + [\#4937](https://github.com/matrix-org/matrix-react-sdk/pull/4937) + * Potential solution to supporting transparent 'show more' buttons + [\#4932](https://github.com/matrix-org/matrix-react-sdk/pull/4932) + * Improve performance and stability in sticky headers for new room list + [\#4931](https://github.com/matrix-org/matrix-react-sdk/pull/4931) + * Move and improve notification state handling + [\#4935](https://github.com/matrix-org/matrix-react-sdk/pull/4935) + * Move list layout management to its own store + [\#4934](https://github.com/matrix-org/matrix-react-sdk/pull/4934) + * Noop first breadcrumb + [\#4933](https://github.com/matrix-org/matrix-react-sdk/pull/4933) + * Highlight "Jump to Bottom" badge when appropriate + [\#4892](https://github.com/matrix-org/matrix-react-sdk/pull/4892) + * Don't render the context menu within its trigger otherwise unhandled clicks + bubble + [\#4930](https://github.com/matrix-org/matrix-react-sdk/pull/4930) + * Protect rooms from getting lost due to complex transitions + [\#4929](https://github.com/matrix-org/matrix-react-sdk/pull/4929) + * Hide archive button + [\#4928](https://github.com/matrix-org/matrix-react-sdk/pull/4928) + * Enable options to favourite and low priority rooms + [\#4920](https://github.com/matrix-org/matrix-react-sdk/pull/4920) + * Move voip previews to bottom right corner + [\#4904](https://github.com/matrix-org/matrix-react-sdk/pull/4904) + * Focus room filter on openSearch + [\#4923](https://github.com/matrix-org/matrix-react-sdk/pull/4923) + * Swap out the resizer lib for something more stable in the new room list + [\#4924](https://github.com/matrix-org/matrix-react-sdk/pull/4924) + * Add wrapper to room list so sticky headers don't need a background + [\#4912](https://github.com/matrix-org/matrix-react-sdk/pull/4912) + * New room list view_room show_room_tile support + [\#4908](https://github.com/matrix-org/matrix-react-sdk/pull/4908) + * Convert Context Menu to TypeScript + [\#4871](https://github.com/matrix-org/matrix-react-sdk/pull/4871) + * Use html innerText for org.matrix.custom.html m.room.message room list + previews + [\#4925](https://github.com/matrix-org/matrix-react-sdk/pull/4925) + * Fix MELS summary of 3pid invite revocations + [\#4913](https://github.com/matrix-org/matrix-react-sdk/pull/4913) + * Fix sticky headers being left on display:none if they change too quickly + [\#4926](https://github.com/matrix-org/matrix-react-sdk/pull/4926) + * Fix gaps under resize handle + [\#4922](https://github.com/matrix-org/matrix-react-sdk/pull/4922) + * Fix DM handling in new room list + [\#4921](https://github.com/matrix-org/matrix-react-sdk/pull/4921) + * Respect and fix understanding of legacy options in new room list + [\#4918](https://github.com/matrix-org/matrix-react-sdk/pull/4918) + * Ensure DMs are not lost in the new room list, and clean up tag logging + [\#4916](https://github.com/matrix-org/matrix-react-sdk/pull/4916) + * Mute "Unknown room caused setting update" spam + [\#4915](https://github.com/matrix-org/matrix-react-sdk/pull/4915) + * Remove comment claiming encrypted rooms are handled incorrectly in the new + room list + [\#4917](https://github.com/matrix-org/matrix-react-sdk/pull/4917) + * Try using requestAnimationFrame if available for sticky headers + [\#4914](https://github.com/matrix-org/matrix-react-sdk/pull/4914) + * Show more/Show less keep focus in a relevant place + [\#4911](https://github.com/matrix-org/matrix-react-sdk/pull/4911) + * Change orange to our orange and do some lints + [\#4910](https://github.com/matrix-org/matrix-react-sdk/pull/4910) + * New Room List implement view_room_delta for keyboard shortcuts + [\#4900](https://github.com/matrix-org/matrix-react-sdk/pull/4900) + * New Room List accessibility + [\#4896](https://github.com/matrix-org/matrix-react-sdk/pull/4896) + * Improve room safety in the new room list + [\#4905](https://github.com/matrix-org/matrix-react-sdk/pull/4905) + * Fix a number of issues with the new room list's invites + [\#4906](https://github.com/matrix-org/matrix-react-sdk/pull/4906) + * Decrease default visible rooms down to 5 + [\#4907](https://github.com/matrix-org/matrix-react-sdk/pull/4907) + * swap order of context menu buttons so it does not jump when muted + [\#4909](https://github.com/matrix-org/matrix-react-sdk/pull/4909) + * Fix some room list sticky header instabilities + [\#4901](https://github.com/matrix-org/matrix-react-sdk/pull/4901) + * null-guard against groups with a null name in new Room List + [\#4903](https://github.com/matrix-org/matrix-react-sdk/pull/4903) + * Allow vertical scrolling on the new room list breadcrumbs + [\#4902](https://github.com/matrix-org/matrix-react-sdk/pull/4902) + * Convert things to Typescript, including languageHandler + [\#4883](https://github.com/matrix-org/matrix-react-sdk/pull/4883) + * Fix minor issues with the badges in the new room list + [\#4894](https://github.com/matrix-org/matrix-react-sdk/pull/4894) + * Radio button outline fixes including for new room list context menu + [\#4893](https://github.com/matrix-org/matrix-react-sdk/pull/4893) + * First step towards a11y in the new room list + [\#4882](https://github.com/matrix-org/matrix-react-sdk/pull/4882) + * Fix theme selector clicks bubbling out and causing context menu to float + away + [\#4891](https://github.com/matrix-org/matrix-react-sdk/pull/4891) + * Revert "Remove a bunch of noisy logging from the room list" + [\#4890](https://github.com/matrix-org/matrix-react-sdk/pull/4890) + * Remove duplicate compact settings, handle device level updates + [\#4888](https://github.com/matrix-org/matrix-react-sdk/pull/4888) + * fix notifications icons some more + [\#4887](https://github.com/matrix-org/matrix-react-sdk/pull/4887) + * Remove a bunch of noisy logging from the room list + [\#4886](https://github.com/matrix-org/matrix-react-sdk/pull/4886) + * Fix bell icon mismatch on room tile between hover and context menu + [\#4884](https://github.com/matrix-org/matrix-react-sdk/pull/4884) + * Add a null guard for message event previews + [\#4885](https://github.com/matrix-org/matrix-react-sdk/pull/4885) + * Enable the new room list by default and trigger an initial render + [\#4881](https://github.com/matrix-org/matrix-react-sdk/pull/4881) + * Fix selection states of room tiles in the new room list + [\#4879](https://github.com/matrix-org/matrix-react-sdk/pull/4879) + * Update mute icon behaviour for new room list designs + [\#4876](https://github.com/matrix-org/matrix-react-sdk/pull/4876) + * Fix alignment of avatars on community invites + [\#4878](https://github.com/matrix-org/matrix-react-sdk/pull/4878) + * Don't include empty badge container in minimized view + [\#4880](https://github.com/matrix-org/matrix-react-sdk/pull/4880) + * Fix alignment of dot badges in new room list + [\#4877](https://github.com/matrix-org/matrix-react-sdk/pull/4877) + * Reorganize and match new room list badges to old list behaviour + [\#4861](https://github.com/matrix-org/matrix-react-sdk/pull/4861) + * Implement breadcrumb notifications and scrolling + [\#4862](https://github.com/matrix-org/matrix-react-sdk/pull/4862) + * Add click-to-jump on badge in the room sublist header + [\#4875](https://github.com/matrix-org/matrix-react-sdk/pull/4875) + * Room List v2 context menu interactions + [\#4870](https://github.com/matrix-org/matrix-react-sdk/pull/4870) + * Wedge community invites into the new room list + [\#4874](https://github.com/matrix-org/matrix-react-sdk/pull/4874) + * Check whether crypto is enabled in room recovery reminder + [\#4873](https://github.com/matrix-org/matrix-react-sdk/pull/4873) + * Fix room list 2's room tile wrapping wrongly + [\#4872](https://github.com/matrix-org/matrix-react-sdk/pull/4872) + * Hide scrollbar without pixel jumping + [\#4863](https://github.com/matrix-org/matrix-react-sdk/pull/4863) + * Room Tile context menu, notifications, indicator and placement + [\#4858](https://github.com/matrix-org/matrix-react-sdk/pull/4858) + * Improve resizing interactions in the new room list + [\#4865](https://github.com/matrix-org/matrix-react-sdk/pull/4865) + * Disable use of account-level ordering options in new room list + [\#4866](https://github.com/matrix-org/matrix-react-sdk/pull/4866) + * Remove context menu on invites in new room list + [\#4867](https://github.com/matrix-org/matrix-react-sdk/pull/4867) + * Fix reaction event crashes in message previews + [\#4868](https://github.com/matrix-org/matrix-react-sdk/pull/4868) + Changes in [2.9.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.9.0) (2020-07-03) =================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.9.0-rc.1...v2.9.0) diff --git a/package.json b/package.json index 3d1fb535c0..57096532a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "2.9.0", + "version": "2.10.1", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { diff --git a/res/css/_common.scss b/res/css/_common.scss index 7fead4317e..fa91532540 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -174,7 +174,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder, .mx_textinput input::placeholder { - color: $roomsublist-label-fg-color; + color: rgba($input-darker-fg-color, .75); } } diff --git a/res/css/_components.scss b/res/css/_components.scss index 8f3c187ff8..d0432b2f23 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -146,7 +146,6 @@ @import "./views/messages/_MjolnirBody.scss"; @import "./views/messages/_ReactionsRow.scss"; @import "./views/messages/_ReactionsRowButton.scss"; -@import "./views/messages/_ReactionsRowButtonTooltip.scss"; @import "./views/messages/_RedactedBody.scss"; @import "./views/messages/_RoomAvatarEvent.scss"; @import "./views/messages/_SenderProfile.scss"; diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss index 5b876ab11d..caa3a452b0 100644 --- a/res/css/_font-sizes.scss +++ b/res/css/_font-sizes.scss @@ -68,5 +68,6 @@ $font-49px: 4.9rem; $font-50px: 5.0rem; $font-51px: 5.1rem; $font-52px: 5.2rem; +$font-78px: 7.8rem; $font-88px: 8.8rem; $font-400px: 40rem; diff --git a/res/css/structures/_HeaderButtons.scss b/res/css/structures/_HeaderButtons.scss index eef7653b24..9ef40e9d6a 100644 --- a/res/css/structures/_HeaderButtons.scss +++ b/res/css/structures/_HeaderButtons.scss @@ -22,7 +22,7 @@ limitations under the License. content: ""; background-color: $header-divider-color; opacity: 0.5; - margin: 0 15px; + margin: 6px 8px; border-radius: 1px; width: 1px; } diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 326720ef0f..cab32476ff 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -60,10 +60,10 @@ limitations under the License. &::before { content: ''; position: absolute; - top: 6px; // center with parent of 32px - left: 6px; // center with parent of 32px - height: 20px; - width: 20px; + top: 4px; // center with parent of 32px + left: 4px; // center with parent of 32px + height: 24px; + width: 24px; background-color: $rightpanel-button-color; mask-repeat: no-repeat; mask-size: contain; diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index b8bb1b04c2..0ba0d10e06 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -128,6 +128,11 @@ limitations under the License. margin-top: 16px; font-size: $font-15px; line-height: $font-24px; + + .mx_InlineSpinner img { + vertical-align: sub; + margin-right: 5px; + } } .mx_AuthBody_paddedFooter_subtitle { diff --git a/res/css/views/dialogs/_RebrandDialog.scss b/res/css/views/dialogs/_RebrandDialog.scss index cd100a7c5e..6c916e0f1d 100644 --- a/res/css/views/dialogs/_RebrandDialog.scss +++ b/res/css/views/dialogs/_RebrandDialog.scss @@ -50,7 +50,7 @@ limitations under the License. height: 64px; } -.mx_RebrandDialog_chevron:after { +.mx_RebrandDialog_chevron::after { content: ''; display: inline-block; width: 24px; diff --git a/res/css/views/dialogs/_ShareDialog.scss b/res/css/views/dialogs/_ShareDialog.scss index e3d2ae8306..d2fe98e8f9 100644 --- a/res/css/views/dialogs/_ShareDialog.scss +++ b/res/css/views/dialogs/_ShareDialog.scss @@ -55,7 +55,7 @@ limitations under the License. margin-left: 5px; width: 20px; height: 20px; - background-repeat: none; + background-repeat: no-repeat; } .mx_ShareDialog_split { diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index cf5bc7ab41..f67da6477b 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -191,5 +191,5 @@ limitations under the License. } .mx_Field .mx_CountryDropdown { - width: 67px; + width: $font-78px; } diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index 7efea2c3f7..a3a90e2a4f 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -52,7 +52,7 @@ limitations under the License. display: none; position: fixed; border: 1px solid $menu-border-color; - border-radius: 4px; + border-radius: 8px; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; background-color: $menu-bg-color; z-index: 6000; // Higher than context menu so tooltips can be used everywhere @@ -60,7 +60,7 @@ limitations under the License. pointer-events: none; line-height: $font-14px; font-size: $font-12px; - font-weight: 600; + font-weight: 500; color: $primary-fg-color; max-width: 200px; word-break: break-word; @@ -87,3 +87,12 @@ limitations under the License. } } } + +.mx_Tooltip_title { + font-weight: 600; +} + +.mx_Tooltip_sub { + opacity: 0.7; + margin-top: 4px; +} diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss index a4aebdb708..f8e0a382b1 100644 --- a/res/css/views/rooms/_Autocomplete.scss +++ b/res/css/views/rooms/_Autocomplete.scss @@ -6,9 +6,10 @@ border: 1px solid $primary-hairline-color; background: $primary-bg-color; border-bottom: none; - border-radius: 4px 4px 0 0; + border-radius: 8px 8px 0 0; max-height: 50vh; overflow: auto; + box-shadow: 0px -16px 32px $composer-shadow-color; } .mx_Autocomplete_ProviderSection { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 6e2dc17727..844ba1981e 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -339,9 +339,7 @@ $left-gutter: 64px; opacity: 0.2; background-repeat: no-repeat; background-size: contain; -} -.mx_EventTile_e2eIcon { &::before, &::after { content: ""; display: block; diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 94753f9473..6332079831 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -97,7 +97,7 @@ $irc-line-height: $font-18px; } > .mx_EventTile_e2eIcon { - position: relative; + position: absolute; right: unset; left: unset; top: 0; @@ -184,6 +184,7 @@ $irc-line-height: $font-18px; > .mx_SenderProfile_name { overflow: hidden; text-overflow: ellipsis; + min-width: var(--name-width); } } } diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 718164589c..be58db43ae 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -63,6 +63,11 @@ limitations under the License. .mx_GroupMemberList_query, .mx_GroupRoomList_query { flex: 1 1 0; + + // stricter rule to override the one in _common.scss + &[type="text"] { + font-size: $font-12px; + } } diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 9f6d2ec590..ec95403262 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -20,7 +20,7 @@ limitations under the License. margin: auto; border-top: 1px solid $primary-hairline-color; position: relative; - padding-left: 83px; + padding-left: 82px; } .mx_MessageComposer_replaced_wrapper { diff --git a/res/css/views/rooms/_NotificationBadge.scss b/res/css/views/rooms/_NotificationBadge.scss index 0e6d442cc1..dbc9006ca3 100644 --- a/res/css/views/rooms/_NotificationBadge.scss +++ b/res/css/views/rooms/_NotificationBadge.scss @@ -42,6 +42,8 @@ limitations under the License. // These are the 3 background types &.mx_NotificationBadge_dot { + background-color: $primary-fg-color; // increased visibility + width: 6px; height: 6px; border-radius: 6px; diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss index 4dc4cb2c40..9feb337042 100644 --- a/res/css/views/rooms/_ReplyPreview.scss +++ b/res/css/views/rooms/_ReplyPreview.scss @@ -22,9 +22,10 @@ limitations under the License. border: 1px solid $primary-hairline-color; background: $primary-bg-color; border-bottom: none; - border-radius: 4px 4px 0 0; + border-radius: 8px 8px 0 0; max-height: 50vh; overflow: auto; + box-shadow: 0px -16px 32px $composer-shadow-color; } .mx_ReplyPreview_section { diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 46993bb644..ba46100ea6 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -75,7 +75,6 @@ limitations under the License. .mx_RoomHeader_buttons { display: flex; background-color: $primary-bg-color; - padding-right: 5px; } .mx_RoomHeader_info { @@ -209,20 +208,32 @@ limitations under the License. .mx_RoomHeader_button { position: relative; - margin-left: 10px; + margin-left: 1px; + margin-right: 1px; cursor: pointer; - height: 20px; - width: 20px; + height: 32px; + width: 32px; + border-radius: 100%; &::before { content: ''; position: absolute; - height: 20px; - width: 20px; + top: 4px; // center with parent of 32px + left: 4px; // center with parent of 32px + height: 24px; + width: 24px; background-color: $roomheader-button-color; mask-repeat: no-repeat; mask-size: contain; } + + &:hover { + background: rgba($accent-color, 0.1); + + &::before { + background-color: $accent-color; + } + } } .mx_RoomHeader_settingsButton::before { diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index 18eaa5747c..77a762b4d8 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -203,7 +203,7 @@ limitations under the License. display: flex; flex-direction: column; - mask-image: linear-gradient(0deg, transparent, black 4px) + mask-image: linear-gradient(0deg, transparent, black 4px); } .mx_RoomSublist2_resizerHandles_showNButton { diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss index 02d779a99c..1c0dabbeb5 100644 --- a/res/css/views/rooms/_WhoIsTypingTile.scss +++ b/res/css/views/rooms/_WhoIsTypingTile.scss @@ -59,7 +59,7 @@ limitations under the License. flex: 1; font-size: $font-14px; font-weight: 600; - color: $composer-button-color; + color: $roomtopic-color; } .mx_WhoIsTypingTile_label > span { diff --git a/res/img/element-icons/community-members.svg b/res/img/element-icons/community-members.svg index 3131075c7b..553ba3b1af 100644 --- a/res/img/element-icons/community-members.svg +++ b/res/img/element-icons/community-members.svg @@ -1,8 +1,8 @@ - + - + - - - + + + diff --git a/res/img/element-icons/community-rooms.svg b/res/img/element-icons/community-rooms.svg index c46cedc74f..570b45a488 100644 --- a/res/img/element-icons/community-rooms.svg +++ b/res/img/element-icons/community-rooms.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/element-icons/leave.svg b/res/img/element-icons/leave.svg index 8a96160afd..773e27d4ce 100644 --- a/res/img/element-icons/leave.svg +++ b/res/img/element-icons/leave.svg @@ -1,7 +1,7 @@ - - + + - + - + diff --git a/res/img/element-icons/notifications.svg b/res/img/element-icons/notifications.svg index c86a7a3b98..7002782129 100644 --- a/res/img/element-icons/notifications.svg +++ b/res/img/element-icons/notifications.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/res/img/element-icons/room/files.svg b/res/img/element-icons/room/files.svg index 6dfd6856d6..6648ab00a5 100644 --- a/res/img/element-icons/room/files.svg +++ b/res/img/element-icons/room/files.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/element-icons/room/integrations.svg b/res/img/element-icons/room/integrations.svg index 57937cd929..3a39506411 100644 --- a/res/img/element-icons/room/integrations.svg +++ b/res/img/element-icons/room/integrations.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/element-icons/room/members.svg b/res/img/element-icons/room/members.svg index e73834bfe5..03aba81ad4 100644 --- a/res/img/element-icons/room/members.svg +++ b/res/img/element-icons/room/members.svg @@ -1,7 +1,7 @@ - + - + - - + + diff --git a/res/img/element-icons/room/pin.svg b/res/img/element-icons/room/pin.svg index d2e9a2c2eb..16941b329b 100644 --- a/res/img/element-icons/room/pin.svg +++ b/res/img/element-icons/room/pin.svg @@ -1,7 +1,7 @@ - - - - - - + + + + + + diff --git a/res/img/element-icons/room/search-inset.svg b/res/img/element-icons/room/search-inset.svg index 2a837f5106..699cdd1d00 100644 --- a/res/img/element-icons/room/search-inset.svg +++ b/res/img/element-icons/room/search-inset.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/element-icons/room/share.svg b/res/img/element-icons/room/share.svg index 5accc0a849..dac35ae5a7 100644 --- a/res/img/element-icons/room/share.svg +++ b/res/img/element-icons/room/share.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/element-icons/settings.svg b/res/img/element-icons/settings.svg index e6e2aef54c..05d640df27 100644 --- a/res/img/element-icons/settings.svg +++ b/res/img/element-icons/settings.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 990debb0a4..370c30d4f2 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -211,6 +211,8 @@ $appearance-tab-border-color: $room-highlight-color; $roomlist-background-blur-amount: 60px; $tagpanel-background-blur-amount: 30px; +$composer-shadow-color: rgba(0, 0, 0, 0.28); + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index a6a85edfe1..6671afb929 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -203,6 +203,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color; // Appearance tab colors $appearance-tab-border-color: $room-highlight-color; +$composer-shadow-color: tranparent; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 991abdefff..822b65d57d 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -331,6 +331,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color; +$composer-shadow-color: tranparent; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index e7912e3cb0..b492006247 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -44,15 +44,18 @@ $roomtile-focused-bg-color: var(--timeline-background-color); $togglesw-ball-color: var(--timeline-background-color); $droptarget-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .5 $authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .59 +$roomheader-bg-color: var(--timeline-background-color); // // --roomlist-highlights-color $roomtile-selected-bg-color: var(--roomlist-highlights-color); +$roomtile2-selected-bg-color: var(--roomlist-highlights-color); // // --sidebar-color $interactive-tooltip-bg-color: var(--sidebar-color); $tagpanel-bg-color: var(--sidebar-color); $tooltip-timeline-bg-color: var(--sidebar-color); $dialog-backdrop-color: var(--sidebar-color-50pct); +$roomlist2-button-bg-color: var(--sidebar-color-15pct); // // --roomlist-background-color $header-panel-bg-color: var(--roomlist-background-color); @@ -67,6 +70,7 @@ $secondary-accent-color: var(--roomlist-background-color); $selected-color: var(--roomlist-background-color); $widget-menu-bar-bg-color: var(--roomlist-background-color); $roomtile-badge-fg-color: var(--roomlist-background-color); +$roomlist2-bg-color: var(--roomlist-background-color); // // --timeline-text-color $message-action-bar-fg-color: var(--timeline-text-color); @@ -87,15 +91,19 @@ $roomheader-color: var(--timeline-text-color); // --roomlist-text-color $roomtile-notified-color: var(--roomlist-text-color); $roomtile-selected-color: var(--roomlist-text-color); -// // --roomlist-text-secondary-color $roomsublist-label-fg-color: var(--roomlist-text-secondary-color); $roomtile-name-color: var(--roomlist-text-secondary-color); +$roomtile2-preview-color: var(--roomlist-text-secondary-color); +$roomlist2-header-color: var(--roomlist-text-secondary-color); +$roomtile2-default-badge-bg-color: var(--roomlist-text-secondary-color); + // // --roomlist-separator-color $input-darker-bg-color: var(--roomlist-separator-color); $panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough $primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough +$roomsublist2-divider-color: var(--roomlist-separator-color); // // --timeline-text-secondary-color $authpage-secondary-color: var(--timeline-text-secondary-color); @@ -126,7 +134,8 @@ $notice-primary-color: var(--warning-color); $pinned-unread-color: var(--warning-color); $warning-color: var(--warning-color); $button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5 - +// +// --username colors $username-variant1-color: var(--username-colors_1, $username-variant1-color); $username-variant2-color: var(--username-colors_2, $username-variant2-color); $username-variant3-color: var(--username-colors_3, $username-variant3-color); @@ -135,6 +144,10 @@ $username-variant5-color: var(--username-colors_5, $username-variant5-color); $username-variant6-color: var(--username-colors_6, $username-variant6-color); $username-variant7-color: var(--username-colors_7, $username-variant7-color); $username-variant8-color: var(--username-colors_8, $username-variant8-color); - +// +// --timeline-highlights-color $event-selected-color: var(--timeline-highlights-color); $event-highlight-bg-color: var(--timeline-highlights-color); +// +// redirect some variables away from their hardcoded values in the light theme +$settings-grey-fg-color: $primary-fg-color; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 3737d21a0f..657d3bfd13 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -335,6 +335,7 @@ $appearance-tab-border-color: $input-darker-bg-color; $roomlist-background-blur-amount: 40px; $tagpanel-background-blur-amount: 20px; +$composer-shadow-color: rgba(0, 0, 0, 0.04); // ***** Mixins! ***** diff --git a/src/RebrandListener.tsx b/src/RebrandListener.tsx index 077ff7a2f3..a93ce9e3a5 100644 --- a/src/RebrandListener.tsx +++ b/src/RebrandListener.tsx @@ -40,10 +40,13 @@ function getRedirectUrl(url): string { } else if (url.hostname === 'riot.im') { if (url.pathname.startsWith('/app')) { redirectUrl.hostname = 'app.element.io'; + redirectUrl.pathname = '/'; } else if (url.pathname.startsWith('/staging')) { redirectUrl.hostname = 'staging.element.io'; + redirectUrl.pathname = '/'; } else if (url.pathname.startsWith('/develop')) { redirectUrl.hostname = 'develop.element.io'; + redirectUrl.pathname = '/'; } return redirectUrl.href; @@ -99,7 +102,7 @@ export default class RebrandListener { // to, well, remind them later. this.nagAgainAt = Date.now() + NAG_INTERVAL; this.recheck(); - } + }; onOneTimeToastLearnMore = async () => { const [doneClicked] = await Modal.createDialog(RebrandDialog, { @@ -109,13 +112,13 @@ export default class RebrandListener { localStorage.setItem('mx_rename_dialog_dismissed', 'true'); this.recheck(); } - } + }; onNagTimerFired = () => { this._reshowTimer = null; this.nagAgainAt = null; this.recheck(); - } + }; private async recheck() { // There are two types of toast/dialog we show: a 'one time' informing the user that diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index 11c955749d..ed69dd2204 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -43,6 +43,7 @@ import SdkConfig from "./SdkConfig"; import { ensureDMExists } from "./createRoom"; import { ViewUserPayload } from "./dispatcher/payloads/ViewUserPayload"; import { Action } from "./dispatcher/actions"; +import { EffectiveMembership, getEffectiveMembership } from "./utils/membership"; // XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816 interface HTMLInputEvent extends Event { @@ -730,9 +731,11 @@ export const Commands = [ const cli = MatrixClientPeg.get(); const room = cli.getRoom(roomId); if (!room) return reject(_t("Command failed")); - + const member = room.getMember(args); + if (!member || getEffectiveMembership(member.membership) === EffectiveMembership.Leave) { + return reject(_t("Could not find user in room")); + } const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', ''); - if (!powerLevelEvent.getContent().users[args]) return reject(_t("Could not find user in room")); return success(cli.setPowerLevel(roomId, userId, powerLevel, powerLevelEvent)); } } diff --git a/src/accessibility/RovingTabIndex.tsx b/src/accessibility/RovingTabIndex.tsx index 388d67d9f3..5a650d4b6e 100644 --- a/src/accessibility/RovingTabIndex.tsx +++ b/src/accessibility/RovingTabIndex.tsx @@ -23,12 +23,11 @@ import React, { useRef, useReducer, Reducer, - RefObject, Dispatch, } from "react"; import {Key} from "../Keyboard"; -import AccessibleButton from "../components/views/elements/AccessibleButton"; +import {FocusHandler, Ref} from "./roving/types"; /** * Module to simplify implementing the Roving TabIndex accessibility technique @@ -45,9 +44,7 @@ import AccessibleButton from "../components/views/elements/AccessibleButton"; const DOCUMENT_POSITION_PRECEDING = 2; -type Ref = RefObject; - -interface IState { +export interface IState { activeRef: Ref; refs: Ref[]; } @@ -156,7 +153,7 @@ interface IProps { children(renderProps: { onKeyDownHandler(ev: React.KeyboardEvent); }); - onKeyDown?(ev: React.KeyboardEvent); + onKeyDown?(ev: React.KeyboardEvent, state: IState); } export const RovingTabIndexProvider: React.FC = ({children, handleHomeEnd, onKeyDown}) => { @@ -193,7 +190,7 @@ export const RovingTabIndexProvider: React.FC = ({children, handleHomeEn ev.preventDefault(); ev.stopPropagation(); } else if (onKeyDown) { - return onKeyDown(ev); + return onKeyDown(ev, state); } }, [context.state, onKeyDown, handleHomeEnd]); @@ -202,8 +199,6 @@ export const RovingTabIndexProvider: React.FC = ({children, handleHomeEn ; }; -type FocusHandler = () => void; - // Hook to register a roving tab index // inputRef parameter specifies the ref to use // onFocus should be called when the index gained focus in any manner @@ -244,28 +239,7 @@ export const useRovingTabIndex = (inputRef: Ref): [FocusHandler, boolean, Ref] = return [onFocus, isActive, ref]; }; -interface IRovingTabIndexWrapperProps { - inputRef?: Ref; - children(renderProps: { - onFocus: FocusHandler; - isActive: boolean; - ref: Ref; - }); -} - -// Wrapper to allow use of useRovingTabIndex outside of React Functional Components. -export const RovingTabIndexWrapper: React.FC = ({children, inputRef}) => { - const [onFocus, isActive, ref] = useRovingTabIndex(inputRef); - return children({onFocus, isActive, ref}); -}; - -interface IRovingAccessibleButtonProps extends React.ComponentProps { - inputRef?: Ref; -} - -// Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components. -export const RovingAccessibleButton: React.FC = ({inputRef, ...props}) => { - const [onFocus, isActive, ref] = useRovingTabIndex(inputRef); - return ; -}; - +// re-export the semantic helper components for simplicity +export {RovingTabIndexWrapper} from "./roving/RovingTabIndexWrapper"; +export {RovingAccessibleButton} from "./roving/RovingAccessibleButton"; +export {RovingAccessibleTooltipButton} from "./roving/RovingAccessibleTooltipButton"; diff --git a/src/accessibility/Toolbar.tsx b/src/accessibility/Toolbar.tsx new file mode 100644 index 0000000000..0e968461a8 --- /dev/null +++ b/src/accessibility/Toolbar.tsx @@ -0,0 +1,69 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; + +import {IState, RovingTabIndexProvider} from "./RovingTabIndex"; +import {Key} from "../Keyboard"; + +interface IProps extends Omit, "onKeyDown"> { +} + +// This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines. +// https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar +// All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref` +const Toolbar: React.FC = ({children, ...props}) => { + const onKeyDown = (ev: React.KeyboardEvent, state: IState) => { + const target = ev.target as HTMLElement; + let handled = true; + + switch (ev.key) { + case Key.ARROW_UP: + case Key.ARROW_DOWN: + if (target.hasAttribute('aria-haspopup')) { + target.click(); + } + break; + + case Key.ARROW_LEFT: + case Key.ARROW_RIGHT: + if (state.refs.length > 0) { + const i = state.refs.findIndex(r => r === state.activeRef); + const delta = ev.key === Key.ARROW_RIGHT ? 1 : -1; + state.refs.slice((i + delta) % state.refs.length)[0].current.focus(); + } + break; + + // HOME and END are handled by RovingTabIndexProvider + + default: + handled = false; + } + + if (handled) { + ev.preventDefault(); + ev.stopPropagation(); + } + }; + + return + {({onKeyDownHandler}) =>
+ { children } +
} + ; +}; + +export default Toolbar; diff --git a/src/accessibility/roving/RovingAccessibleButton.tsx b/src/accessibility/roving/RovingAccessibleButton.tsx new file mode 100644 index 0000000000..3473ef1bc9 --- /dev/null +++ b/src/accessibility/roving/RovingAccessibleButton.tsx @@ -0,0 +1,32 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; + +import AccessibleButton from "../../components/views/elements/AccessibleButton"; +import {useRovingTabIndex} from "../RovingTabIndex"; +import {Ref} from "./types"; + +interface IProps extends Omit, "onFocus" | "inputRef" | "tabIndex"> { + inputRef?: Ref; +} + +// Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components. +export const RovingAccessibleButton: React.FC = ({inputRef, ...props}) => { + const [onFocus, isActive, ref] = useRovingTabIndex(inputRef); + return ; +}; + diff --git a/src/accessibility/roving/RovingAccessibleTooltipButton.tsx b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx new file mode 100644 index 0000000000..cc824fef22 --- /dev/null +++ b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx @@ -0,0 +1,32 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; + +import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton"; +import {useRovingTabIndex} from "../RovingTabIndex"; +import {Ref} from "./types"; + +interface IProps extends Omit, "onFocus" | "inputRef" | "tabIndex"> { + inputRef?: Ref; +} + +// Wrapper to allow use of useRovingTabIndex for simple AccessibleTooltipButtons outside of React Functional Components. +export const RovingAccessibleTooltipButton: React.FC = ({inputRef, ...props}) => { + const [onFocus, isActive, ref] = useRovingTabIndex(inputRef); + return ; +}; + diff --git a/src/accessibility/roving/RovingTabIndexWrapper.tsx b/src/accessibility/roving/RovingTabIndexWrapper.tsx new file mode 100644 index 0000000000..c826b74497 --- /dev/null +++ b/src/accessibility/roving/RovingTabIndexWrapper.tsx @@ -0,0 +1,36 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; + +import AccessibleButton from "../../components/views/elements/AccessibleButton"; +import {useRovingTabIndex} from "../RovingTabIndex"; +import {FocusHandler, Ref} from "./types"; + +interface IProps { + inputRef?: Ref; + children(renderProps: { + onFocus: FocusHandler; + isActive: boolean; + ref: Ref; + }); +} + +// Wrapper to allow use of useRovingTabIndex outside of React Functional Components. +export const RovingTabIndexWrapper: React.FC = ({children, inputRef}) => { + const [onFocus, isActive, ref] = useRovingTabIndex(inputRef); + return children({onFocus, isActive, ref}); +}; diff --git a/res/css/views/messages/_ReactionsRowButtonTooltip.scss b/src/accessibility/roving/types.ts similarity index 76% rename from res/css/views/messages/_ReactionsRowButtonTooltip.scss rename to src/accessibility/roving/types.ts index cf4219fcec..f0a43e5fb8 100644 --- a/res/css/views/messages/_ReactionsRowButtonTooltip.scss +++ b/src/accessibility/roving/types.ts @@ -1,5 +1,5 @@ /* -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,6 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_ReactionsRowButtonTooltip_reactedWith { - opacity: 0.7; -} +import {RefObject} from "react"; + +export type Ref = RefObject; + +export type FocusHandler = () => void; diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index cb1349da4b..62964c5799 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -233,6 +233,9 @@ export class ContextMenu extends React.PureComponent { switch (ev.key) { case Key.TAB: case Key.ESCAPE: + // close on left and right arrows too for when it is a context menu on a + case Key.ARROW_LEFT: + case Key.ARROW_RIGHT: this.props.onFinished(); break; case Key.ARROW_UP: diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx index 209f219598..7414a44f11 100644 --- a/src/components/structures/HomePage.tsx +++ b/src/components/structures/HomePage.tsx @@ -38,7 +38,7 @@ const HomePage = () => { } const brandingConfig = config.branding; - let logoUrl = "themes/riot/img/logos/riot-logo.svg"; + let logoUrl = "themes/element/img/logos/element-logo.svg"; if (brandingConfig && brandingConfig.authHeaderLogoUrl) { logoUrl = brandingConfig.authHeaderLogoUrl; } @@ -46,7 +46,7 @@ const HomePage = () => { const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); return
- Riot + {config.brand

{ _t("Welcome to %(appName)s", { appName: config.brand || "Riot" }) }

{ _t("Liberate your communication") }

diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx index 012b518093..7fe1c24062 100644 --- a/src/components/structures/LeftPanel2.tsx +++ b/src/components/structures/LeftPanel2.tsx @@ -269,7 +269,7 @@ export default class LeftPanel2 extends React.Component { const firstRoom = this.listContainerRef.current.querySelector(".mx_RoomTile2"); if (firstRoom) { firstRoom.click(); - this.onSearch(""); // clear the search field + return true; // to get the field to clear } }; diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index c7f3c5266d..920b7e4dec 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -675,12 +675,16 @@ export default class MatrixChat extends React.PureComponent { case 'hide_left_panel': this.setState({ collapseLhs: true, + }, () => { + this.state.resizeNotifier.notifyLeftHandleResized(); }); break; case 'focus_room_filter': // for CtrlOrCmd+K to work by expanding the left panel first case 'show_left_panel': this.setState({ collapseLhs: false, + }, () => { + this.state.resizeNotifier.notifyLeftHandleResized(); }); break; case 'panel_disable': { diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx index 517a5f2580..1451630c97 100644 --- a/src/components/structures/RoomSearch.tsx +++ b/src/components/structures/RoomSearch.tsx @@ -28,8 +28,8 @@ import { Action } from "../../dispatcher/actions"; interface IProps { onQueryUpdate: (newQuery: string) => void; isMinimized: boolean; - onVerticalArrow(ev: React.KeyboardEvent); - onEnter(ev: React.KeyboardEvent); + onVerticalArrow(ev: React.KeyboardEvent): void; + onEnter(ev: React.KeyboardEvent): boolean; } interface IState { @@ -107,7 +107,13 @@ export default class RoomSearch extends React.PureComponent { } else if (ev.key === Key.ARROW_UP || ev.key === Key.ARROW_DOWN) { this.props.onVerticalArrow(ev); } else if (ev.key === Key.ENTER) { - this.props.onEnter(ev); + const shouldClear = this.props.onEnter(ev); + if (shouldClear) { + // wrap in set immediate to delay it so that we don't clear the filter & then change room + setImmediate(() => { + this.clearInput(); + }); + } } }; diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 80bfac6787..bb737397dc 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -66,7 +66,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent - + {badge}
; } diff --git a/src/components/views/context_menus/TagTileContextMenu.js b/src/components/views/context_menus/TagTileContextMenu.js index 62df4330c6..8d690483a8 100644 --- a/src/components/views/context_menus/TagTileContextMenu.js +++ b/src/components/views/context_menus/TagTileContextMenu.js @@ -20,7 +20,6 @@ import PropTypes from 'prop-types'; import { _t } from '../../../languageHandler'; import dis from '../../../dispatcher/dispatcher'; import TagOrderActions from '../../../actions/TagOrderActions'; -import * as sdk from '../../../index'; import {MenuItem} from "../../structures/ContextMenu"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; diff --git a/src/components/views/dialogs/RebrandDialog.tsx b/src/components/views/dialogs/RebrandDialog.tsx index e886850d28..79b4b69a4a 100644 --- a/src/components/views/dialogs/RebrandDialog.tsx +++ b/src/components/views/dialogs/RebrandDialog.tsx @@ -23,26 +23,26 @@ import DialogButtons from '../elements/DialogButtons'; export enum RebrandDialogKind { NAG, ONE_TIME, -}; +} interface IProps { onFinished: (bool) => void; - kind: RebrandDialogKind, - targetUrl?: string, + kind: RebrandDialogKind; + targetUrl?: string; } export default class RebrandDialog extends React.PureComponent { private onDoneClick = () => { this.props.onFinished(true); - } + }; private onGoToElementClick = () => { this.props.onFinished(true); - } + }; private onRemindMeLaterClick = () => { this.props.onFinished(false); - } + }; private getPrettyTargetUrl() { const u = new URL(this.props.targetUrl); @@ -79,14 +79,14 @@ export default class RebrandDialog extends React.PureComponent { cancelButton={"Remind me later"} onCancel={this.onRemindMeLaterClick} focus={true} - /> + />; } else { return + />; } } diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx index f4d63136e1..641151bbfd 100644 --- a/src/components/views/elements/AccessibleTooltipButton.tsx +++ b/src/components/views/elements/AccessibleTooltipButton.tsx @@ -16,7 +16,7 @@ limitations under the License. */ import React from 'react'; -import classnames from 'classnames'; +import classNames from 'classnames'; import AccessibleButton from "./AccessibleButton"; import {IProps} from "./AccessibleButton"; @@ -24,6 +24,7 @@ import Tooltip from './Tooltip'; interface ITooltipProps extends IProps { title: string; + tooltip?: React.ReactNode; tooltipClassName?: string; } @@ -52,16 +53,12 @@ export default class AccessibleTooltipButton extends React.PureComponent :
; return ( diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js index 95eb37b588..7959ad8a93 100644 --- a/src/components/views/messages/MessageActionBar.js +++ b/src/components/views/messages/MessageActionBar.js @@ -25,9 +25,12 @@ import dis from '../../../dispatcher/dispatcher'; import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from '../../structures/ContextMenu'; import { isContentActionable, canEditContent } from '../../../utils/EventUtils'; import RoomContext from "../../../contexts/RoomContext"; +import Toolbar from "../../../accessibility/Toolbar"; +import {RovingAccessibleButton, useRovingTabIndex} from "../../../accessibility/RovingTabIndex"; const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange}) => { const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); + const [onFocus, isActive, ref] = useRovingTabIndex(button); useEffect(() => { onFocusChange(menuDisplayed); }, [onFocusChange, menuDisplayed]); @@ -57,7 +60,9 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo label={_t("Options")} onClick={openMenu} isExpanded={menuDisplayed} - inputRef={button} + inputRef={ref} + onFocus={onFocus} + tabIndex={isActive ? 0 : -1} /> { contextMenu } @@ -66,6 +71,7 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo const ReactButton = ({mxEvent, reactions, onFocusChange}) => { const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); + const [onFocus, isActive, ref] = useRovingTabIndex(button); useEffect(() => { onFocusChange(menuDisplayed); }, [onFocusChange, menuDisplayed]); @@ -85,7 +91,9 @@ const ReactButton = ({mxEvent, reactions, onFocusChange}) => { label={_t("React")} onClick={openMenu} isExpanded={menuDisplayed} - inputRef={button} + inputRef={ref} + onFocus={onFocus} + tabIndex={isActive ? 0 : -1} /> { contextMenu } @@ -148,8 +156,6 @@ export default class MessageActionBar extends React.PureComponent { }; render() { - const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); - let reactButton; let replyButton; let editButton; @@ -161,7 +167,7 @@ export default class MessageActionBar extends React.PureComponent { ); } if (this.context.canReply) { - replyButton = + return {reactButton} {replyButton} {editButton} @@ -188,6 +194,6 @@ export default class MessageActionBar extends React.PureComponent { permalinkCreator={this.props.permalinkCreator} onFocusChange={this.onFocusChange} /> -
; + ; } } diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.js b/src/components/views/messages/ReactionsRowButtonTooltip.js index 59e9d2ad7f..3a87befdae 100644 --- a/src/components/views/messages/ReactionsRowButtonTooltip.js +++ b/src/components/views/messages/ReactionsRowButtonTooltip.js @@ -55,7 +55,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent { }, { reactors: () => { - return
+ return
{formatCommaSeparatedList(senders, 6)}
; }, @@ -63,7 +63,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent { if (!shortName) { return null; } - return
+ return
{sub}
; }, diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index 84126ed7fc..5784e36a8b 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -376,11 +376,21 @@ export default createReactClass({ const date = this.props.mxEvent.replacingEventDate(); const dateString = date && formatDate(date); + const tooltip =
+
+ {_t("Edited at %(date)s", {date: dateString})} +
+
+ {_t("Click to view edits")} +
+
; + return ( {`(${_t("edited")})`} diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 88c4ed2e7d..f6eaf5f003 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -333,7 +333,7 @@ export default createReactClass({ return; } - const eventSenderTrust = this.context.checkDeviceTrust( + const eventSenderTrust = encryptionInfo.sender && this.context.checkDeviceTrust( senderId, encryptionInfo.sender.deviceId, ); if (!eventSenderTrust) { diff --git a/src/components/views/rooms/RoomBreadcrumbs2.tsx b/src/components/views/rooms/RoomBreadcrumbs2.tsx index 619ad6da4d..fde24524cd 100644 --- a/src/components/views/rooms/RoomBreadcrumbs2.tsx +++ b/src/components/views/rooms/RoomBreadcrumbs2.tsx @@ -25,7 +25,8 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore"; import { CSSTransition } from "react-transition-group"; import RoomListStore from "../../../stores/room-list/RoomListStore2"; import { DefaultTagID } from "../../../stores/room-list/models"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; +import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex"; +import Toolbar from "../../../accessibility/Toolbar"; // TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367 @@ -86,7 +87,7 @@ export default class RoomBreadcrumbs2 extends React.PureComponent this.viewRoom(r, i)} @@ -101,7 +102,7 @@ export default class RoomBreadcrumbs2 extends React.PureComponent - + ); }); @@ -112,9 +113,9 @@ export default class RoomBreadcrumbs2 extends React.PureComponent -
+ {tiles.slice(this.state.skipFirst ? 1 : 0)} -
+ ); } else { diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 51163e27e3..8311a98784 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -31,7 +31,6 @@ import ManageIntegsButton from '../elements/ManageIntegsButton'; import {CancelButton} from './SimpleRoomHeader'; import SettingsStore from "../../../settings/SettingsStore"; import RoomHeaderButtons from '../right_panel/RoomHeaderButtons'; -import DMRoomMap from '../../../utils/DMRoomMap'; import E2EIcon from './E2EIcon'; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; import {DefaultTagID} from "../../../stores/room-list/models"; @@ -158,10 +157,6 @@ export default createReactClass({ let settingsButton = null; let pinnedEventsButton = null; - const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId); - const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", ""); - const joinRule = joinRules && joinRules.getContent().join_rule; - if (this.props.onCancelClick) { cancelButton = ; } diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx index ec937dcad3..145bd8d68e 100644 --- a/src/components/views/rooms/RoomSublist2.tsx +++ b/src/components/views/rooms/RoomSublist2.tsx @@ -444,24 +444,20 @@ export default class RoomSublist2 extends React.Component {
-
{_t("Unread rooms")}
+
{_t("Appearance")}
- {_t("Always show first")} + {_t("Show rooms with unread messages first")} -
-
-
-
{_t("Show")}
- {_t("Message preview")} + {_t("Show previews of messages")}
diff --git a/src/components/views/rooms/RoomTileIcon.tsx b/src/components/views/rooms/RoomTileIcon.tsx index b0cf10e313..234840d28d 100644 --- a/src/components/views/rooms/RoomTileIcon.tsx +++ b/src/components/views/rooms/RoomTileIcon.tsx @@ -22,6 +22,8 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import DMRoomMap from "../../../utils/DMRoomMap"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { isPresenceEnabled } from "../../../utils/presence"; +import { _t } from "../../../languageHandler"; +import TextWithTooltip from "../elements/TextWithTooltip"; enum Icon { // Note: the names here are used in CSS class names @@ -32,9 +34,21 @@ enum Icon { PresenceOffline = "OFFLINE", } +function tooltipText(variant: Icon) { + switch (variant) { + case Icon.Globe: + return _t("This room is public"); + case Icon.PresenceOnline: + return _t("Online"); + case Icon.PresenceAway: + return _t("Away"); + case Icon.PresenceOffline: + return _t("Offline"); + } +} + interface IProps { room: Room; - tag: TagID; } interface IState { @@ -122,10 +136,11 @@ export default class RoomTileIcon extends React.Component { private calculateIcon(): Icon { let icon = Icon.None; - if (this.props.tag === DefaultTagID.DM && this.props.room.getJoinedMemberCount() === 2) { + // We look at the DMRoomMap and not the tag here so that we don't exclude DMs in Favourites + const otherUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId); + if (otherUserId && this.props.room.getJoinedMemberCount() === 2) { // Track presence, if available if (isPresenceEnabled()) { - const otherUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId); if (otherUserId) { this.dmUser = MatrixClientPeg.get().getUser(otherUserId); icon = this.getPresenceIcon(); @@ -145,6 +160,10 @@ export default class RoomTileIcon extends React.Component { public render(): React.ReactElement { if (this.state.icon === Icon.None) return null; - return ; + return ; } } diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.js b/src/components/views/settings/tabs/user/HelpUserSettingsTab.js index 3a3e2923a4..64807ddb21 100644 --- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.js @@ -120,7 +120,7 @@ export default class HelpUserSettingsTab extends React.Component { {_t("Credits")}
  • - The + The default cover photo is ©  Jesús Roncero{' '} used under the terms of  @@ -158,7 +158,7 @@ export default class HelpUserSettingsTab extends React.Component { }, { 'a': (sub) => @@ -177,7 +177,7 @@ export default class HelpUserSettingsTab extends React.Component { }, { 'a': (sub) => diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 11115ac4fe..d81c0c717b 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1210,10 +1210,9 @@ "Securely back up your keys to avoid losing them. Learn more.": "Securely back up your keys to avoid losing them. Learn more.", "Not now": "Not now", "Don't ask me again": "Don't ask me again", - "Unread rooms": "Unread rooms", - "Always show first": "Always show first", - "Show": "Show", - "Message preview": "Message preview", + "Appearance": "Appearance", + "Show rooms with unread messages first": "Show rooms with unread messages first", + "Show previews of messages": "Show previews of messages", "Sort by": "Sort by", "Activity": "Activity", "A-Z": "A-Z", @@ -1239,6 +1238,8 @@ "Leave Room": "Leave Room", "Forget Room": "Forget Room", "Room options": "Room options", + "This room is public": "This room is public", + "Away": "Away", "Add a topic": "Add a topic", "Upgrading this room will shut down the current instance of the room and create an upgraded room with the same name.": "Upgrading this room will shut down the current instance of the room and create an upgraded room with the same name.", "This room has already been upgraded.": "This room has already been upgraded.", @@ -1454,6 +1455,8 @@ "Failed to copy": "Failed to copy", "Add an Integration": "Add an Integration", "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?": "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?", + "Edited at %(date)s": "Edited at %(date)s", + "Click to view edits": "Click to view edits", "Edited at %(date)s. Click to view edits.": "Edited at %(date)s. Click to view edits.", "edited": "edited", "Can't load this message": "Can't load this message", @@ -1853,7 +1856,6 @@ "Upload %(count)s other files|one": "Upload %(count)s other file", "Cancel All": "Cancel All", "Upload Error": "Upload Error", - "Appearance": "Appearance", "Verify other session": "Verify other session", "Verification Request": "Verification Request", "A widget would like to verify your identity": "A widget would like to verify your identity", diff --git a/src/stores/room-list/RoomListStore2.ts b/src/stores/room-list/RoomListStore2.ts index d66f7f9b05..4368120a2e 100644 --- a/src/stores/room-list/RoomListStore2.ts +++ b/src/stores/room-list/RoomListStore2.ts @@ -33,7 +33,6 @@ import { isNullOrUndefined } from "matrix-js-sdk/src/utils"; import RoomListLayoutStore from "./RoomListLayoutStore"; import { MarkedExecution } from "../../utils/MarkedExecution"; import { AsyncStoreWithClient } from "../AsyncStoreWithClient"; -import { MatrixClientPeg } from "../../MatrixClientPeg"; interface IState { tagsEnabled?: boolean; diff --git a/src/stores/room-list/algorithms/Algorithm.ts b/src/stores/room-list/algorithms/Algorithm.ts index 6bc58ecd57..6f718c09b2 100644 --- a/src/stores/room-list/algorithms/Algorithm.ts +++ b/src/stores/room-list/algorithms/Algorithm.ts @@ -158,6 +158,7 @@ export class Algorithm extends EventEmitter { filterCondition.off(FILTER_CHANGED, this.handleFilterChange.bind(this)); if (this.allowedByFilter.has(filterCondition)) { this.allowedByFilter.delete(filterCondition); + this.recalculateFilteredRooms(); // If we removed the last filter, tell consumers that we've "updated" our filtered // view. This will trick them into getting the complete room list. diff --git a/src/stores/room-list/filters/CommunityFilterCondition.ts b/src/stores/room-list/filters/CommunityFilterCondition.ts index 45e65fb4f4..924a85e86a 100644 --- a/src/stores/room-list/filters/CommunityFilterCondition.ts +++ b/src/stores/room-list/filters/CommunityFilterCondition.ts @@ -21,6 +21,7 @@ import { EventEmitter } from "events"; import GroupStore from "../../GroupStore"; import { arrayHasDiff } from "../../../utils/arrays"; import { IDestroyable } from "../../../utils/IDestroyable"; +import DMRoomMap from "../../../utils/DMRoomMap"; /** * A filter condition for the room list which reveals rooms which @@ -28,6 +29,7 @@ import { IDestroyable } from "../../../utils/IDestroyable"; */ export class CommunityFilterCondition extends EventEmitter implements IFilterCondition, IDestroyable { private roomIds: string[] = []; + private userIds: string[] = []; constructor(private community: Group) { super(); @@ -43,15 +45,19 @@ export class CommunityFilterCondition extends EventEmitter implements IFilterCon } public isVisible(room: Room): boolean { - return this.roomIds.includes(room.roomId); + return this.roomIds.includes(room.roomId) || + this.userIds.includes(DMRoomMap.shared().getUserIdForRoomId(room.roomId)); } private onStoreUpdate = async (): Promise => { - // We don't actually know if the room list changed for the community, so just - // check it again. + // We don't actually know if the room list changed for the community, so just check it again. const beforeRoomIds = this.roomIds; this.roomIds = (await GroupStore.getGroupRooms(this.community.groupId)).map(r => r.roomId); - if (arrayHasDiff(beforeRoomIds, this.roomIds)) { + + const beforeUserIds = this.userIds; + this.userIds = (await GroupStore.getGroupMembers(this.community.groupId)).map(u => u.userId); + + if (arrayHasDiff(beforeRoomIds, this.roomIds) || arrayHasDiff(beforeUserIds, this.userIds)) { this.emit(FILTER_CHANGED); } }; diff --git a/test/end-to-end-tests/riot/config-template/config.json b/test/end-to-end-tests/riot/config-template/config.json index 6277e567fc..d0d3a288e4 100644 --- a/test/end-to-end-tests/riot/config-template/config.json +++ b/test/end-to-end-tests/riot/config-template/config.json @@ -5,7 +5,7 @@ "disable_guests": false, "disable_login_language_selector": false, "disable_3pid_login": false, - "brand": "Riot", + "brand": "Element", "integrations_ui_url": "https://scalar.vector.im/", "integrations_rest_url": "https://scalar.vector.im/api", "bug_report_endpoint_url": "https://riot.im/bugreports/submit", diff --git a/test/end-to-end-tests/src/scenarios/toast.js b/test/end-to-end-tests/src/scenarios/toast.js index 1206ef40b0..2eafad8315 100644 --- a/test/end-to-end-tests/src/scenarios/toast.js +++ b/test/end-to-end-tests/src/scenarios/toast.js @@ -24,8 +24,14 @@ module.exports = async function toastScenarios(alice, bob) { await rejectToast(alice, "Notifications"); alice.log.done(); + alice.log.step(`accepts rebrand toast`); + await acceptToast(alice, "Riot is now Element!"); + let doneButton = await alice.query('.mx_Dialog_primary'); + await doneButton.click(); // also accept the resulting dialog + alice.log.done(); + alice.log.step(`accepts analytics toast`); - await acceptToast(alice, "Help us improve Riot"); + await acceptToast(alice, "Help us improve Element"); alice.log.done(); alice.log.step(`checks no remaining toasts`); @@ -38,8 +44,14 @@ module.exports = async function toastScenarios(alice, bob) { await rejectToast(bob, "Notifications"); bob.log.done(); + bob.log.step(`accepts rebrand toast`); + await acceptToast(bob, "Riot is now Element!"); + doneButton = await bob.query('.mx_Dialog_primary'); + await doneButton.click(); // also accept the resulting dialog + bob.log.done(); + bob.log.step(`reject analytics toast`); - await rejectToast(bob, "Help us improve Riot"); + await rejectToast(bob, "Help us improve Element"); bob.log.done(); bob.log.step(`checks no remaining toasts`);