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 6e70618142..f2d3a0e54b 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -160,9 +160,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { background-color: transparent; color: $input-darker-fg-color; border-radius: 4px; - border: 1px solid $dialog-close-fg-color; - // these things should probably not be defined - // globally + border: 1px solid rgba($primary-fg-color, .1); + // these things should probably not be defined globally margin: 9px; flex: 0 0 auto; } @@ -175,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); } } @@ -227,7 +226,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { } #mx_theme_tertiaryAccentColor { - color: $roomsublist-label-bg-color; + color: $tertiary-accent-color; } /* Expected z-indexes for dialogs: @@ -264,7 +263,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { padding: 25px 30px 30px 30px; max-height: 80%; box-shadow: 2px 15px 30px 0 $dialog-shadow-color; - border-radius: 4px; + border-radius: 8px; overflow-y: auto; } @@ -622,12 +621,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { // round the top corners of the top button for the hover effect to be bounded &:first-child .mx_AccessibleButton:first-child { - border-radius: 4px 4px 0 0; // radius matches .mx_ContextualMenu + border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu } // round the bottom corners of the bottom button for the hover effect to be bounded &:last-child .mx_AccessibleButton:last-child { - border-radius: 0 0 4px 4px; // radius matches .mx_ContextualMenu + border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu } .mx_AccessibleButton { diff --git a/res/css/_components.scss b/res/css/_components.scss index 85e08110ea..23e4af780a 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -12,7 +12,6 @@ @import "./structures/_HeaderButtons.scss"; @import "./structures/_HomePage.scss"; @import "./structures/_LeftPanel.scss"; -@import "./structures/_LeftPanel2.scss"; @import "./structures/_MainSplit.scss"; @import "./structures/_MatrixChat.scss"; @import "./structures/_MyGroups.scss"; @@ -21,14 +20,12 @@ @import "./structures/_RoomDirectory.scss"; @import "./structures/_RoomSearch.scss"; @import "./structures/_RoomStatusBar.scss"; -@import "./structures/_RoomSubList.scss"; @import "./structures/_RoomView.scss"; @import "./structures/_ScrollPanel.scss"; @import "./structures/_SearchBox.scss"; @import "./structures/_TabbedView.scss"; @import "./structures/_TagPanel.scss"; @import "./structures/_ToastContainer.scss"; -@import "./structures/_TopLeftMenuButton.scss"; @import "./structures/_UploadBar.scss"; @import "./structures/_UserMenu.scss"; @import "./structures/_ViewSource.scss"; @@ -73,6 +70,7 @@ @import "./views/dialogs/_KeyboardShortcutsDialog.scss"; @import "./views/dialogs/_MessageEditHistoryDialog.scss"; @import "./views/dialogs/_NewSessionReviewDialog.scss"; +@import "./views/dialogs/_RebrandDialog.scss"; @import "./views/dialogs/_RoomSettingsDialog.scss"; @import "./views/dialogs/_RoomSettingsDialogBridges.scss"; @import "./views/dialogs/_RoomUpgradeDialog.scss"; @@ -107,7 +105,6 @@ @import "./views/elements/_IconButton.scss"; @import "./views/elements/_ImageView.scss"; @import "./views/elements/_InlineSpinner.scss"; -@import "./views/elements/_InteractiveTooltip.scss"; @import "./views/elements/_ManageIntegsButton.scss"; @import "./views/elements/_PowerSelector.scss"; @import "./views/elements/_ProgressBar.scss"; @@ -145,7 +142,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"; @@ -168,7 +164,6 @@ @import "./views/rooms/_EventTile.scss"; @import "./views/rooms/_GroupLayout.scss"; @import "./views/rooms/_IRCLayout.scss"; -@import "./views/rooms/_InviteOnlyIcon.scss"; @import "./views/rooms/_JumpToBottomButton.scss"; @import "./views/rooms/_LinkPreviewWidget.scss"; @import "./views/rooms/_MemberInfo.scss"; @@ -181,23 +176,18 @@ @import "./views/rooms/_PresenceLabel.scss"; @import "./views/rooms/_ReplyPreview.scss"; @import "./views/rooms/_RoomBreadcrumbs.scss"; -@import "./views/rooms/_RoomBreadcrumbs2.scss"; -@import "./views/rooms/_RoomDropTarget.scss"; @import "./views/rooms/_RoomHeader.scss"; @import "./views/rooms/_RoomList.scss"; -@import "./views/rooms/_RoomList2.scss"; @import "./views/rooms/_RoomPreviewBar.scss"; @import "./views/rooms/_RoomRecoveryReminder.scss"; -@import "./views/rooms/_RoomSublist2.scss"; +@import "./views/rooms/_RoomSublist.scss"; @import "./views/rooms/_RoomTile.scss"; -@import "./views/rooms/_RoomTile2.scss"; @import "./views/rooms/_RoomTileIcon.scss"; @import "./views/rooms/_RoomUpgradeWarningBar.scss"; @import "./views/rooms/_SearchBar.scss"; @import "./views/rooms/_SendMessageComposer.scss"; @import "./views/rooms/_Stickers.scss"; @import "./views/rooms/_TopUnreadMessagesBar.scss"; -@import "./views/rooms/_UserOnlineDot.scss"; @import "./views/rooms/_WhoIsTypingTile.scss"; @import "./views/settings/_AvatarSetting.scss"; @import "./views/settings/_CrossSigningPanel.scss"; @@ -228,6 +218,4 @@ @import "./views/verification/_VerificationShowSas.scss"; @import "./views/voip/_CallContainer.scss"; @import "./views/voip/_CallView.scss"; -@import "./views/voip/_CallView2.scss"; -@import "./views/voip/_IncomingCallbox.scss"; @import "./views/voip/_VideoView.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/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index 61070a0541..658033339a 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -31,7 +31,7 @@ limitations under the License. } .mx_ContextualMenu { - border-radius: 4px; + border-radius: 8px; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; background-color: $menu-bg-color; color: $primary-fg-color; diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss index ed0cf121a4..2350d9f28a 100644 --- a/res/css/structures/_GroupView.scss +++ b/res/css/structures/_GroupView.scss @@ -29,12 +29,12 @@ limitations under the License. align-items: center; display: flex; padding-bottom: 10px; + padding-left: 19px; } .mx_GroupView_header_view { border-bottom: 1px solid $primary-hairline-color; padding-bottom: 0px; - padding-left: 19px; padding-right: 8px; } @@ -63,11 +63,11 @@ limitations under the License. } .mx_GroupHeader_editButton::before { - mask-image: url('$(res)/img/feather-customised/settings.svg'); + mask-image: url('$(res)/img/element-icons/settings.svg'); } .mx_GroupHeader_shareButton::before { - mask-image: url('$(res)/img/icons-share.svg'); + mask-image: url('$(res)/img/element-icons/room/share.svg'); } .mx_GroupView_hostingSignup img { @@ -182,6 +182,7 @@ limitations under the License. .mx_GroupView_body { flex-grow: 1; + margin: 0 24px; } .mx_GroupView_rooms { @@ -250,6 +251,7 @@ limitations under the License. .mx_GroupView_membershipSubSection { justify-content: space-between; display: flex; + padding-bottom: 8px; } .mx_GroupView_membershipSubSection .mx_Spinner { 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/_HomePage.scss b/res/css/structures/_HomePage.scss index 0160cf368b..04527bff48 100644 --- a/res/css/structures/_HomePage.scss +++ b/res/css/structures/_HomePage.scss @@ -72,7 +72,7 @@ limitations under the License. &:hover { color: $accent-color; - background: rgba(#03b381, 0.06); + background: rgba($accent-color, 0.06); &::before { background-color: $accent-color; diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 35d9f0e7da..1673092c9e 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -1,6 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2018 New Vector Ltd +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. @@ -15,164 +14,182 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_LeftPanel_container { - display: flex; - /* LeftPanel 260px */ - min-width: 260px; - max-width: 50%; - flex: 0 0 auto; -} - -.mx_LeftPanel_container.collapsed { - min-width: unset; - /* Collapsed LeftPanel 50px */ - flex: 0 0 50px; -} - -.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel { - /* TagPanel 70px + Collapsed LeftPanel 50px */ - flex: 0 0 120px; -} - -.mx_LeftPanel_tagPanelContainer { - flex: 0 0 70px; - height: 100%; -} - -.mx_LeftPanel_hideButton { - position: absolute; - top: 10px; - right: 0px; - padding: 8px; - cursor: pointer; -} +$tagPanelWidth: 56px; // only applies in this file, used for calculations .mx_LeftPanel { - flex: 1; - overflow-x: hidden; - display: flex; - flex-direction: column; - min-height: 0; -} + background-color: $roomlist-bg-color; + min-width: 260px; + max-width: 50%; -.mx_LeftPanel .mx_AppTile_mini { - height: 132px; -} - -.mx_LeftPanel .mx_RoomList_scrollbar { - order: 1; - - flex: 1 1 0; - - overflow-y: auto; - z-index: 6; -} - -.mx_LeftPanel .mx_BottomLeftMenu { - order: 3; - - border-top: 1px solid $panel-divider-color; - margin-left: 16px; /* gutter */ - margin-right: 16px; /* gutter */ - flex: 0 0 60px; - z-index: 1; -} - -.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu { - flex: 0 0 160px; - margin-bottom: 9px; -} - -.mx_LeftPanel .mx_BottomLeftMenu_options { - margin-top: 18px; -} - -.mx_BottomLeftMenu_options object { - pointer-events: none; -} - -.mx_BottomLeftMenu_options > div { - display: inline-block; -} - -.mx_BottomLeftMenu_options .mx_RoleButton { - margin-left: 0px; - margin-right: 10px; - height: 30px; -} - -.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings { - float: right; -} - -.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton { - margin-right: 0px; -} - -.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings { - float: none; -} - -.mx_MatrixChat_useCompactLayout { - .mx_LeftPanel .mx_BottomLeftMenu { - flex: 0 0 50px; - } - - .mx_LeftPanel_container.collapsed .mx_BottomLeftMenu { - flex: 0 0 160px; - } - - .mx_LeftPanel .mx_BottomLeftMenu_options { - margin-top: 12px; - } -} - -.mx_LeftPanel_exploreAndFilterRow { + // Create a row-based flexbox for the TagPanel and the room list display: flex; - .mx_SearchBox { - flex: 1 1 0; - min-width: 0; - margin: 4px 9px 1px 9px; - } -} + .mx_LeftPanel_tagPanelContainer { + flex-grow: 0; + flex-shrink: 0; + flex-basis: $tagPanelWidth; + height: 100%; -.mx_LeftPanel_explore { - flex: 0 0 50%; - overflow: hidden; - transition: flex-basis 0.2s; - box-sizing: border-box; + // Create another flexbox so the TagPanel fills the container + display: flex; - &.mx_LeftPanel_explore_hidden { - flex-basis: 0; + // TagPanel handles its own CSS } - .mx_AccessibleButton { - font-size: $font-14px; - margin: 4px 0 1px 9px; - padding: 9px; - padding-left: 42px; - font-weight: 600; - color: $notice-secondary-color; - position: relative; - border-radius: 4px; + &:not(.mx_LeftPanel_hasTagPanel) { + .mx_LeftPanel_roomListContainer { + width: 100%; + } + } - &:hover { - background-color: $primary-bg-color; + // Note: The 'room list' in this context is actually everything that isn't the tag + // panel, such as the menu options, breadcrumbs, filtering, etc + .mx_LeftPanel_roomListContainer { + width: calc(100% - $tagPanelWidth); + background-color: $roomlist-bg-color; + + // Create another flexbox (this time a column) for the room list components + display: flex; + flex-direction: column; + + .mx_LeftPanel_userHeader { + /* 12px top, 12px sides, 20px bottom (using 13px bottom to account + * for internal whitespace in the breadcrumbs) + */ + padding: 12px; + flex-shrink: 0; // to convince safari's layout engine the flexbox is fine + + // Create another flexbox column for the rows to stack within + display: flex; + flex-direction: column; } - &::before { - cursor: pointer; - mask: url('$(res)/img/explore.svg'); - mask-repeat: no-repeat; - mask-position: center center; - content: ""; - left: 14px; - top: 10px; - width: 16px; - height: 16px; - background-color: $notice-secondary-color; - position: absolute; + .mx_LeftPanel_breadcrumbsContainer { + overflow-y: hidden; + overflow-x: scroll; + margin: 12px 12px 0 12px; + flex: 0 0 auto; + // Create yet another flexbox, this time within the row, to ensure items stay + // aligned correctly. This is also a row-based flexbox. + display: flex; + align-items: center; + + &.mx_IndicatorScrollbar_leftOverflow { + mask-image: linear-gradient(90deg, transparent, black 5%); + } + + &.mx_IndicatorScrollbar_rightOverflow { + mask-image: linear-gradient(90deg, black, black 95%, transparent); + } + + &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow { + mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); + } + } + + .mx_LeftPanel_filterContainer { + margin-left: 12px; + margin-right: 12px; + + flex-shrink: 0; // to convince safari's layout engine the flexbox is fine + + // Create a flexbox to organize the inputs + display: flex; + align-items: center; + + .mx_RoomSearch_expanded + .mx_LeftPanel_exploreButton { + // Cheaty way to return the occupied space to the filter input + flex-basis: 0; + margin: 0; + width: 0; + + // Don't forget to hide the masked ::before icon, + // using display:none or visibility:hidden would break accessibility + &::before { + content: none; + } + } + + .mx_LeftPanel_exploreButton { + width: 28px; + height: 28px; + border-radius: 20px; + background-color: $roomlist-button-bg-color; + position: relative; + margin-left: 8px; + + &::before { + content: ''; + position: absolute; + top: 6px; + left: 6px; + width: 16px; + height: 16px; + mask-image: url('$(res)/img/feather-customised/compass.svg'); + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + background: $primary-fg-color; + } + } + } + + .mx_LeftPanel_roomListWrapper { + // Create a flexbox to ensure the containing items cause appropriate overflow. + display: flex; + + flex-grow: 1; + overflow: hidden; + min-height: 0; + margin-top: 10px; // so we're not up against the search/filter + + &.mx_LeftPanel_roomListWrapper_stickyBottom { + padding-bottom: 32px; + } + + &.mx_LeftPanel_roomListWrapper_stickyTop { + padding-top: 32px; + } + } + + .mx_LeftPanel_actualRoomListContainer { + flex-grow: 1; // fill the available space + overflow-y: auto; + width: 100%; + max-width: 100%; + position: relative; // for sticky headers + + // Create a flexbox to trick the layout engine + display: flex; + } + } + + // These styles override the defaults for the minimized (66px) layout + &.mx_LeftPanel_minimized { + min-width: unset; + + // We have to forcefully set the width to override the resizer's style attribute. + &.mx_LeftPanel_hasTagPanel { + width: calc(68px + $tagPanelWidth) !important; + } + &:not(.mx_LeftPanel_hasTagPanel) { + width: 68px !important; + } + + .mx_LeftPanel_roomListContainer { + width: 68px; + + .mx_LeftPanel_filterContainer { + // Organize the flexbox into a centered column layout + flex-direction: column; + justify-content: center; + + .mx_LeftPanel_exploreButton { + margin-left: 0; + margin-top: 8px; + background-color: transparent; + } + } } } } diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss deleted file mode 100644 index 935511b160..0000000000 --- a/res/css/structures/_LeftPanel2.scss +++ /dev/null @@ -1,201 +0,0 @@ -/* -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. -*/ - -// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367 - -$tagPanelWidth: 70px; // only applies in this file, used for calculations - -.mx_LeftPanel2 { - background-color: $roomlist2-bg-color; - min-width: 260px; - max-width: 50%; - - // Create a row-based flexbox for the TagPanel and the room list - display: flex; - - .mx_LeftPanel2_tagPanelContainer { - flex-grow: 0; - flex-shrink: 0; - flex-basis: $tagPanelWidth; - height: 100%; - - // Create another flexbox so the TagPanel fills the container - display: flex; - - // TagPanel handles its own CSS - } - - &:not(.mx_LeftPanel2_hasTagPanel) { - .mx_LeftPanel2_roomListContainer { - width: 100%; - } - } - - // Note: The 'room list' in this context is actually everything that isn't the tag - // panel, such as the menu options, breadcrumbs, filtering, etc - .mx_LeftPanel2_roomListContainer { - width: calc(100% - $tagPanelWidth); - - // Create another flexbox (this time a column) for the room list components - display: flex; - flex-direction: column; - - .mx_LeftPanel2_userHeader { - /* 12px top, 12px sides, 20px bottom (using 13px bottom to account - * for internal whitespace in the breadcrumbs) - */ - padding: 12px 12px 13px; - flex-shrink: 0; // to convince safari's layout engine the flexbox is fine - - // Create another flexbox column for the rows to stack within - display: flex; - flex-direction: column; - - // This is basically just breadcrumbs. The row above that is handled by the UserMenu - .mx_LeftPanel2_headerRow { - // Create yet another flexbox, this time within the row, to ensure items stay - // aligned correctly. This is also a row-based flexbox. - display: flex; - align-items: center; - } - - .mx_LeftPanel2_breadcrumbsContainer { - width: 100%; - overflow-y: hidden; - overflow-x: scroll; - margin-top: 20px; - padding-bottom: 2px; - - &.mx_IndicatorScrollbar_leftOverflow { - mask-image: linear-gradient(90deg, transparent, black 10%); - } - - &.mx_IndicatorScrollbar_rightOverflow { - mask-image: linear-gradient(90deg, black, black 90%, transparent); - } - - &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow { - mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); - } - } - } - - .mx_LeftPanel2_filterContainer { - margin-left: 12px; - margin-right: 12px; - - flex-shrink: 0; // to convince safari's layout engine the flexbox is fine - - // Create a flexbox to organize the inputs - display: flex; - align-items: center; - - .mx_RoomSearch_expanded + .mx_LeftPanel2_exploreButton { - // Cheaty way to return the occupied space to the filter input - flex-basis: 0; - margin: 0; - width: 0; - - // Don't forget to hide the masked ::before icon, - // using display:none or visibility:hidden would break accessibility - &::before { - content: none; - } - } - - .mx_LeftPanel2_exploreButton { - width: 28px; - height: 28px; - border-radius: 20px; - background-color: $roomlist2-button-bg-color; - position: relative; - margin-left: 8px; - - &::before { - content: ''; - position: absolute; - top: 6px; - left: 6px; - width: 16px; - height: 16px; - mask-image: url('$(res)/img/feather-customised/compass.svg'); - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background: $primary-fg-color; - } - } - } - - .mx_LeftPanel2_roomListWrapper { - // Create a flexbox to ensure the containing items cause appropriate overflow. - display: flex; - - flex-grow: 1; - overflow: hidden; - min-height: 0; - margin-top: 12px; // so we're not up against the search/filter - - &.mx_LeftPanel2_roomListWrapper_stickyBottom { - padding-bottom: 32px; - } - - &.mx_LeftPanel2_roomListWrapper_stickyTop { - padding-top: 32px; - } - } - - .mx_LeftPanel2_actualRoomListContainer { - flex-grow: 1; // fill the available space - overflow-y: auto; - width: 100%; - max-width: 100%; - position: relative; // for sticky headers - - // Create a flexbox to trick the layout engine - display: flex; - } - } - - // These styles override the defaults for the minimized (66px) layout - &.mx_LeftPanel2_minimized { - min-width: unset; - - // We have to forcefully set the width to override the resizer's style attribute. - &.mx_LeftPanel2_hasTagPanel { - width: calc(68px + $tagPanelWidth) !important; - } - &:not(.mx_LeftPanel2_hasTagPanel) { - width: 68px !important; - } - - .mx_LeftPanel2_roomListContainer { - width: 68px; - - .mx_LeftPanel2_filterContainer { - // Organize the flexbox into a centered column layout - flex-direction: column; - justify-content: center; - - .mx_LeftPanel2_exploreButton { - margin-left: 0; - margin-top: 8px; - background-color: transparent; - } - } - } - } -} diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss index 08ed9e5559..88b29a96e8 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -66,7 +66,7 @@ limitations under the License. } /* not the left panel, and not the resize handle, so the roomview/groupview/... */ -.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_LeftPanel2):not(.mx_ResizeHandle) { +.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) { background-color: $primary-bg-color; flex: 1 1 0; diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 600871e071..2fe7aac3b2 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -23,6 +23,13 @@ limitations under the License. max-width: 50%; display: flex; flex-direction: column; + border-radius: 8px; + margin: 5px; + padding: 4px 0; + + .mx_RoomView_MessageList { + padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above + } } .mx_RightPanel_header { @@ -44,22 +51,20 @@ limitations under the License. .mx_RightPanel_headerButton { cursor: pointer; flex: 0 0 auto; - vertical-align: top; - margin-left: 5px; - margin-right: 5px; - text-align: center; - border-bottom: 2px solid transparent; - height: 20px; - width: 20px; + margin-left: 1px; + margin-right: 1px; + height: 32px; + width: 32px; position: relative; + border-radius: 100%; &::before { content: ''; position: absolute; - top: 0; - left: 0; - 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; @@ -67,38 +72,46 @@ limitations under the License. } .mx_RightPanel_membersButton::before { - mask-image: url('$(res)/img/feather-customised/user.svg'); + mask-image: url('$(res)/img/element-icons/room/members.svg'); mask-position: center; } .mx_RightPanel_filesButton::before { - mask-image: url('$(res)/img/feather-customised/files.svg'); + mask-image: url('$(res)/img/element-icons/room/files.svg'); mask-position: center; } .mx_RightPanel_notifsButton::before { - mask-image: url('$(res)/img/feather-customised/notifications.svg'); + mask-image: url('$(res)/img/element-icons/notifications.svg'); mask-position: center; } .mx_RightPanel_groupMembersButton::before { - mask-image: url('$(res)/img/icons-people.svg'); + mask-image: url('$(res)/img/element-icons/community-members.svg'); mask-position: center; } .mx_RightPanel_roomsButton::before { - mask-image: url('$(res)/img/icons-room-nobg.svg'); + mask-image: url('$(res)/img/element-icons/community-rooms.svg'); mask-position: center; } -.mx_RightPanel_headerButton_highlight::after { - content: ''; - position: absolute; - bottom: -6px; - left: 0; - right: 0; - height: 2px; - background-color: $button-bg-color; +.mx_RightPanel_headerButton_highlight { + background: rgba($accent-color, 0.25); + // make the icon the accent color too + &::before { + background-color: $accent-color; + } +} + +.mx_RightPanel_headerButton:not(.mx_RightPanel_headerButton_highlight) { + &:hover { + background: rgba($accent-color, 0.1); + + &::before { + background-color: $accent-color; + } + } } .mx_RightPanel_headerButton_badge { diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss index eddc4cd064..39a3dee30b 100644 --- a/res/css/structures/_RoomSearch.scss +++ b/res/css/structures/_RoomSearch.scss @@ -18,8 +18,8 @@ limitations under the License. .mx_RoomSearch { flex: 1; border-radius: 20px; - background-color: $roomlist2-button-bg-color; - height: 26px; + background-color: $roomlist-button-bg-color; + height: 28px; padding: 2px; // Create a flexbox for the icons (easier to manage) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss deleted file mode 100644 index 2c53258b08..0000000000 --- a/res/css/structures/_RoomSubList.scss +++ /dev/null @@ -1,187 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd - -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. -*/ - -/* a word of explanation about the flex-shrink values employed here: - there are 3 priotized categories of screen real-estate grabbing, - each with a flex-shrink difference of 4 order of magnitude, - so they ideally wouldn't affect each other. - lowest category: .mx_RoomSubList - flex-shrink: 10000000 - distribute size of items within the same category by their size - middle category: .mx_RoomSubList.resized-sized - flex-shrink: 1000 - applied when using the resizer, will have a max-height set to it, - to limit the size - highest category: .mx_RoomSubList.resized-all - flex-shrink: 1 - small flex-shrink value (1), is only added if you can drag the resizer so far - so in practice you can only assign this category if there is enough space. -*/ - -.mx_RoomSubList { - display: flex; - flex-direction: column; -} - - -.mx_RoomSubList_nonEmpty .mx_AutoHideScrollbar_offset { - padding-bottom: 4px; -} - -.mx_RoomSubList_labelContainer { - display: flex; - flex-direction: row; - align-items: center; - flex: 0 0 auto; - margin: 0 8px; - padding: 0 8px; - height: 36px; -} - -.mx_RoomSubList_labelContainer.focus-visible:focus-within { - background-color: $roomtile-focused-bg-color; -} - -.mx_RoomSubList_label { - flex: 1; - cursor: pointer; - display: flex; - align-items: center; - padding: 0 6px; -} - -.mx_RoomSubList_label > span { - flex: 1 1 auto; - text-transform: uppercase; - color: $roomsublist-label-fg-color; - font-weight: 700; - font-size: $font-12px; - margin-left: 8px; -} - -.mx_RoomSubList_badge > div { - flex: 0 0 auto; - border-radius: $font-16px; - font-weight: 600; - font-size: $font-12px; - padding: 0 5px; - color: $roomtile-badge-fg-color; - background-color: $roomtile-name-color; - cursor: pointer; -} - -.mx_RoomSubList_addRoom, .mx_RoomSubList_badge { - margin-left: 7px; -} - -.mx_RoomSubList_addRoom { - background-color: $roomheader-addroom-bg-color; - border-radius: 10px; // 16/2 + 2 padding - height: 16px; - flex: 0 0 16px; - position: relative; - - &::before { - background-color: $roomheader-addroom-fg-color; - mask: url('$(res)/img/icons-room-add.svg'); - mask-repeat: no-repeat; - mask-position: center; - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } -} - -.mx_RoomSubList_badgeHighlight > div { - color: $accent-fg-color; - background-color: $warning-color; -} - -.mx_RoomSubList_chevron { - pointer-events: none; - mask: url('$(res)/img/feather-customised/dropdown-arrow.svg'); - mask-repeat: no-repeat; - transition: transform 0.2s ease-in; - width: 10px; - height: 6px; - margin-left: 2px; - background-color: $roomsublist-label-fg-color; -} - -.mx_RoomSubList_chevronDown { - transform: rotateZ(0deg); -} - -.mx_RoomSubList_chevronUp { - transform: rotateZ(180deg); -} - -.mx_RoomSubList_chevronRight { - transform: rotateZ(-90deg); -} - -.mx_RoomSubList_scroll { - /* let rooms list grab as much space as it needs (auto), - potentially overflowing and showing a scrollbar */ - flex: 0 1 auto; - padding: 0 8px; -} - -.collapsed { - .mx_RoomSubList_scroll { - padding: 0; - } - - .mx_RoomSubList_labelContainer { - margin-right: 8px; - margin-left: 2px; - padding: 0; - } - - .mx_RoomSubList_addRoom { - margin-left: 3px; - margin-right: 10px; - } - - .mx_RoomSubList_label > span { - display: none; - } -} - -// overflow indicators -.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll { - &.mx_IndicatorScrollbar_topOverflow::before { - position: sticky; - content: ""; - top: 0; - left: 0; - right: 0; - height: 8px; - z-index: 100; - display: block; - pointer-events: none; - transition: background-image 0.1s ease-in; - background: linear-gradient(to top, $panel-gradient); - } - - - &.mx_IndicatorScrollbar_topOverflow { - margin-top: -8px; - } -} diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index f2154ef448..3b60c4e62b 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -261,7 +261,7 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_voipButton { float: right; margin-right: 13px; - margin-top: 10px; + margin-top: 13px; cursor: pointer; } diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index 1f8443e395..78e8326772 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -33,7 +33,7 @@ limitations under the License. .mx_TagPanel .mx_TagPanel_clearButton_container { /* Constant height within flex mx_TagPanel */ height: 70px; - width: 60px; + width: 56px; flex: none; @@ -51,7 +51,7 @@ limitations under the License. .mx_TagPanel .mx_TagPanel_divider { height: 0px; - width: 42px; + width: 34px; border-bottom: 1px solid $panel-divider-color; display: none; } @@ -66,15 +66,13 @@ limitations under the License. flex-direction: column; align-items: center; - height: 100%; + padding-top: 6px; } .mx_TagPanel .mx_TagPanel_tagTileContainer > div { - height: 40px; - padding: 10px 0 9px 0; + margin: 6px 0; } .mx_TagPanel .mx_TagTile { - margin: 9px 0; // opacity: 0.5; position: relative; } @@ -86,8 +84,8 @@ limitations under the License. .mx_TagPanel .mx_TagTile_plus { margin-bottom: 12px; - height: 40px; - width: 40px; + height: 32px; + width: 32px; border-radius: 20px; background-color: $roomheader-addroom-bg-color; position: relative; @@ -159,7 +157,7 @@ limitations under the License. font-weight: 600; font-size: $font-14px; padding: 0 5px; - background-color: $roomtile-name-color; + background-color: $muted-fg-color; } .mx_TagTile_badgeHighlight { diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index 2916c4ffdc..e798e4ac52 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -48,14 +48,17 @@ limitations under the License. padding: 8px; &.mx_Toast_hasIcon { - &::after { + &::before, &::after { content: ""; width: 22px; height: 22px; grid-column: 1; grid-row: 1; mask-size: 100%; + mask-position: center; mask-repeat: no-repeat; + background-size: 100%; + background-repeat: no-repeat; } &.mx_Toast_icon_verification::after { @@ -63,8 +66,22 @@ limitations under the License. background-color: $primary-fg-color; } - &.mx_Toast_icon_verification_warning::after { - background-image: url("$(res)/img/e2e/warning.svg"); + &.mx_Toast_icon_verification_warning { + // white infill for the hollow svg mask + &::before { + background-color: #ffffff; + mask-image: url('$(res)/img/e2e/normal.svg'); + mask-size: 90%; + } + + &::after { + mask-image: url("$(res)/img/e2e/warning.svg"); + background-color: $notice-primary-color; + } + } + + &.mx_Toast_icon_element_logo::after { + background-image: url("$(res)/img/element-logo.svg"); } .mx_Toast_title, .mx_Toast_body { diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss deleted file mode 100644 index 8d2e36bcd6..0000000000 --- a/res/css/structures/_TopLeftMenuButton.scss +++ /dev/null @@ -1,49 +0,0 @@ -/* -Copyright 2018 New Vector Ltd - -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_TopLeftMenuButton { - flex: 0 0 52px; - border-bottom: 1px solid $panel-divider-color; - color: $topleftmenu-color; - background-color: $primary-bg-color; - display: flex; - align-items: center; - min-width: 0; - padding: 0 4px; - overflow: hidden; -} - -.mx_TopLeftMenuButton .mx_BaseAvatar { - margin: 0 7px; -} - -.mx_TopLeftMenuButton_name { - margin: 0 7px; - font-size: $font-18px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - font-weight: 600; -} - -.mx_TopLeftMenuButton_chevron { - margin: 0 7px; - mask: url('$(res)/img/feather-customised/dropdown-arrow.svg'); - mask-repeat: no-repeat; - width: $font-22px; - height: 6px; - background-color: $roomsublist-label-fg-color; -} diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss index c958b9eacd..81a10ee1d0 100644 --- a/res/css/structures/_UserMenu.scss +++ b/res/css/structures/_UserMenu.scss @@ -15,6 +15,10 @@ limitations under the License. */ .mx_UserMenu { + + // to make the ... button sort of aligned with the explore button below + padding-right: 6px; + .mx_UserMenu_headerButtons { width: 16px; height: 16px; @@ -32,7 +36,7 @@ limitations under the License. mask-size: contain; mask-repeat: no-repeat; background: $primary-fg-color; - mask-image: url('$(res)/img/feather-customised/more-horizontal.svg'); + mask-image: url('$(res)/img/element-icons/context-menu.svg'); } } @@ -48,6 +52,7 @@ limitations under the License. .mx_UserMenu_userAvatar { border-radius: 32px; // should match avatar size + object-fit: cover; } } @@ -167,30 +172,30 @@ limitations under the License. } .mx_UserMenu_iconHome::before { - mask-image: url('$(res)/img/feather-customised/home.svg'); + mask-image: url('$(res)/img/element-icons/roomlist/home.svg'); } .mx_UserMenu_iconBell::before { - mask-image: url('$(res)/img/feather-customised/notifications.svg'); + mask-image: url('$(res)/img/element-icons/notifications.svg'); } .mx_UserMenu_iconLock::before { - mask-image: url('$(res)/img/feather-customised/lock.svg'); + mask-image: url('$(res)/img/element-icons/security.svg'); } .mx_UserMenu_iconSettings::before { - mask-image: url('$(res)/img/feather-customised/settings.svg'); + mask-image: url('$(res)/img/element-icons/settings.svg'); } .mx_UserMenu_iconArchive::before { - mask-image: url('$(res)/img/feather-customised/archive.svg'); + mask-image: url('$(res)/img/element-icons/roomlist/archived.svg'); } .mx_UserMenu_iconMessage::before { - mask-image: url('$(res)/img/feather-customised/message-circle.svg'); + mask-image: url('$(res)/img/element-icons/roomlist/feedback.svg'); } .mx_UserMenu_iconSignOut::before { - mask-image: url('$(res)/img/feather-customised/sign-out.svg'); + mask-image: url('$(res)/img/element-icons/leave.svg'); } } 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/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss index 900f351074..48d72131b5 100644 --- a/res/css/views/avatars/_DecoratedRoomAvatar.scss +++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss @@ -24,7 +24,7 @@ limitations under the License. right: 0; } - .mx_NotificationBadge, .mx_RoomTile2_badgeContainer { + .mx_NotificationBadge, .mx_RoomTile_badgeContainer { position: absolute; top: 0; right: 0; diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss index e4ccc030a2..8929c8906e 100644 --- a/res/css/views/context_menus/_TagTileContextMenu.scss +++ b/res/css/views/context_menus/_TagTileContextMenu.scss @@ -15,9 +15,8 @@ limitations under the License. */ .mx_TagTileContextMenu_item { - padding-top: 8px; + padding: 8px; padding-right: 20px; - padding-bottom: 8px; cursor: pointer; white-space: nowrap; display: flex; @@ -25,15 +24,22 @@ limitations under the License. line-height: $font-16px; } -.mx_TagTileContextMenu_item object { - pointer-events: none; +.mx_TagTileContextMenu_item::before { + content: ''; + height: 15px; + width: 15px; + background-color: currentColor; + mask-repeat: no-repeat; + mask-size: contain; + margin-right: 8px; } +.mx_TagTileContextMenu_viewCommunity::before { + mask-image: url('$(res)/img/element-icons/view-community.svg'); +} -.mx_TagTileContextMenu_item_icon { - padding-right: 8px; - padding-left: 4px; - display: inline-block; +.mx_TagTileContextMenu_hideCommunity::before { + mask-image: url('$(res)/img/element-icons/hide.svg'); } .mx_TagTileContextMenu_separator { diff --git a/res/css/views/dialogs/_RebrandDialog.scss b/res/css/views/dialogs/_RebrandDialog.scss new file mode 100644 index 0000000000..6c916e0f1d --- /dev/null +++ b/res/css/views/dialogs/_RebrandDialog.scss @@ -0,0 +1,63 @@ +/* +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. +*/ + +.mx_RebrandDialog { + text-align: center; + + a:link, + a:hover, + a:visited { + @mixin mx_Dialog_link; + } + + .mx_Dialog_buttons { + margin-top: 43px; + text-align: center; + } +} + +.mx_RebrandDialog_body { + width: 550px; + margin-left: auto; + margin-right: auto; +} + +.mx_RebrandDialog_logoContainer { + margin-top: 35px; + margin-bottom: 20px; + display: flex; + align-items: center; + justify-content: center; +} + +.mx_RebrandDialog_logo { + margin-left: 28px; + margin-right: 28px; + width: 64px; + height: 64px; +} + +.mx_RebrandDialog_chevron::after { + content: ''; + display: inline-block; + width: 24px; + height: 24px; + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + background-color: $muted-fg-color; + mask-image: url('$(res)/img/feather-customised/chevron-right.svg'); +} diff --git a/res/css/views/dialogs/_RoomSettingsDialog.scss b/res/css/views/dialogs/_RoomSettingsDialog.scss index 3751c15643..d4199a1e66 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.scss +++ b/res/css/views/dialogs/_RoomSettingsDialog.scss @@ -18,19 +18,19 @@ limitations under the License. // ========================================================== .mx_RoomSettingsDialog_settingsIcon::before { - mask-image: url('$(res)/img/feather-customised/settings.svg'); + mask-image: url('$(res)/img/element-icons/settings.svg'); } .mx_RoomSettingsDialog_securityIcon::before { - mask-image: url('$(res)/img/feather-customised/lock.svg'); + mask-image: url('$(res)/img/element-icons/security.svg'); } .mx_RoomSettingsDialog_rolesIcon::before { - mask-image: url('$(res)/img/feather-customised/users-sm.svg'); + mask-image: url('$(res)/img/element-icons/room/settings/roles.svg'); } .mx_RoomSettingsDialog_notificationsIcon::before { - mask-image: url('$(res)/img/feather-customised/notifications.svg'); + mask-image: url('$(res)/img/element-icons/notifications.svg'); } .mx_RoomSettingsDialog_bridgesIcon::before { @@ -39,7 +39,7 @@ limitations under the License. } .mx_RoomSettingsDialog_warningIcon::before { - mask-image: url('$(res)/img/feather-customised/warning-triangle.svg'); + mask-image: url('$(res)/img/element-icons/room/settings/advanced.svg'); } .mx_RoomSettingsDialog .mx_Dialog_title { 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/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss index 7adcc58c4e..bd472710ea 100644 --- a/res/css/views/dialogs/_UserSettingsDialog.scss +++ b/res/css/views/dialogs/_UserSettingsDialog.scss @@ -18,41 +18,41 @@ limitations under the License. // ========================================================== .mx_UserSettingsDialog_settingsIcon::before { - mask-image: url('$(res)/img/feather-customised/settings.svg'); + mask-image: url('$(res)/img/element-icons/settings.svg'); } .mx_UserSettingsDialog_appearanceIcon::before { - mask-image: url('$(res)/img/feather-customised/brush.svg'); + mask-image: url('$(res)/img/element-icons/settings/appearance.svg'); } .mx_UserSettingsDialog_voiceIcon::before { - mask-image: url('$(res)/img/feather-customised/phone.svg'); + mask-image: url('$(res)/img/element-icons/call/voice-call.svg'); } .mx_UserSettingsDialog_bellIcon::before { - mask-image: url('$(res)/img/feather-customised/notifications.svg'); + mask-image: url('$(res)/img/element-icons/notifications.svg'); } .mx_UserSettingsDialog_preferencesIcon::before { - mask-image: url('$(res)/img/feather-customised/sliders.svg'); + mask-image: url('$(res)/img/element-icons/settings/preference.svg'); } .mx_UserSettingsDialog_securityIcon::before { - mask-image: url('$(res)/img/feather-customised/lock.svg'); + mask-image: url('$(res)/img/element-icons/security.svg'); } .mx_UserSettingsDialog_helpIcon::before { - mask-image: url('$(res)/img/feather-customised/help-circle.svg'); + mask-image: url('$(res)/img/element-icons/settings/help.svg'); } .mx_UserSettingsDialog_labsIcon::before { - mask-image: url('$(res)/img/feather-customised/flag.svg'); + mask-image: url('$(res)/img/element-icons/settings/lab-flags.svg'); } .mx_UserSettingsDialog_mjolnirIcon::before { - mask-image: url('$(res)/img/feather-customised/face.svg'); + mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg'); } .mx_UserSettingsDialog_flairIcon::before { - mask-image: url('$(res)/img/feather-customised/flair.svg'); + mask-image: url('$(res)/img/element-icons/settings/flair.svg'); } 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/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.scss deleted file mode 100644 index db98d95709..0000000000 --- a/res/css/views/elements/_InteractiveTooltip.scss +++ /dev/null @@ -1,91 +0,0 @@ -/* -Copyright 2019 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_InteractiveTooltip_wrapper { - position: fixed; - z-index: 5000; -} - -.mx_InteractiveTooltip { - border-radius: 3px; - background-color: $interactive-tooltip-bg-color; - color: $interactive-tooltip-fg-color; - position: absolute; - font-size: $font-10px; - font-weight: 600; - padding: 6px; - z-index: 5001; -} - -.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top { - top: 10px; // 8px chevron + 2px spacing -} - -.mx_InteractiveTooltip_chevron_top { - position: absolute; - left: calc(50% - 8px); - top: -8px; - width: 0; - height: 0; - border-left: 8px solid transparent; - border-bottom: 8px solid $interactive-tooltip-bg-color; - border-right: 8px solid transparent; -} - -// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path -// by Sebastiano Guerriero (@guerriero_se) -@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) { - .mx_InteractiveTooltip_chevron_top { - height: 16px; - width: 16px; - background-color: inherit; - border: none; - clip-path: polygon(0% 0%, 100% 100%, 0% 100%); - transform: rotate(135deg); - border-radius: 0 0 0 3px; - top: calc(-8px / 1.414); // sqrt(2) because of rotation - } -} - -.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom { - bottom: 10px; // 8px chevron + 2px spacing -} - -.mx_InteractiveTooltip_chevron_bottom { - position: absolute; - left: calc(50% - 8px); - bottom: -8px; - width: 0; - height: 0; - border-left: 8px solid transparent; - border-top: 8px solid $interactive-tooltip-bg-color; - border-right: 8px solid transparent; -} - -// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path -// by Sebastiano Guerriero (@guerriero_se) -@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) { - .mx_InteractiveTooltip_chevron_bottom { - height: 16px; - width: 16px; - background-color: inherit; - border: none; - clip-path: polygon(0% 0%, 100% 100%, 0% 100%); - transform: rotate(-45deg); - border-radius: 0 0 0 3px; - bottom: calc(-8px / 1.414); // sqrt(2) because of rotation - } -} diff --git a/res/css/views/elements/_Spinner.scss b/res/css/views/elements/_Spinner.scss index 6966a60e52..01b4f23c2c 100644 --- a/res/css/views/elements/_Spinner.scss +++ b/res/css/views/elements/_Spinner.scss @@ -23,16 +23,6 @@ limitations under the License. flex: 1; } -.mx_Spinner_spin img { - animation: spin 1s linear infinite; -} - -@keyframes spin { - 100% { - transform: rotate(360deg); - } -} - .mx_MatrixChat_middlePanel .mx_Spinner { height: auto; } diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index d67928bf83..d90c818f94 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -51,21 +51,27 @@ limitations under the License. .mx_Tooltip { 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 padding: 10px; pointer-events: none; line-height: $font-14px; font-size: $font-12px; - font-weight: 600; - color: $primary-fg-color; + font-weight: 500; max-width: 200px; word-break: break-word; margin-right: 50px; + background-color: $inverted-bg-color; + color: $accent-fg-color; + border: 0; + text-align: center; + + .mx_Tooltip_chevron { + display: none; + } + &.mx_Tooltip_visible { animation: mx_fadein 0.2s forwards; } @@ -75,18 +81,23 @@ limitations under the License. } } -.mx_Tooltip_timeline { - box-shadow: none; - background-color: $tooltip-timeline-bg-color; - color: $tooltip-timeline-fg-color; - text-align: center; - border: none; - border-radius: 3px; - font-size: $font-14px; - line-height: 1.2; - padding: 6px 8px; +// These tooltips use an older style with a chevron +.mx_Field_tooltip { + background-color: $menu-bg-color; + color: $primary-fg-color; + border: 1px solid $menu-border-color; + text-align: unset; - .mx_Tooltip_chevron::after { - border-right-color: $tooltip-timeline-bg-color; + .mx_Tooltip_chevron { + display: unset; } } + +.mx_Tooltip_title { + font-weight: 600; +} + +.mx_Tooltip_sub { + opacity: 0.7; + margin-top: 4px; +} diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index 9f3971ecf0..e3ccd99611 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -91,17 +91,17 @@ limitations under the License. } .mx_MessageActionBar_reactButton::after { - mask-image: url('$(res)/img/react.svg'); + mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg'); } .mx_MessageActionBar_replyButton::after { - mask-image: url('$(res)/img/reply.svg'); + mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg'); } .mx_MessageActionBar_editButton::after { - mask-image: url('$(res)/img/edit.svg'); + mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg'); } .mx_MessageActionBar_optionsButton::after { - mask-image: url('$(res)/img/icon_context.svg'); + mask-image: url('$(res)/img/element-icons/context-menu.svg'); } diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index fe5b081042..7158ffc027 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -16,7 +16,6 @@ limitations under the License. .mx_ReactionsRowButton { display: inline-flex; - height: 20px; line-height: $font-21px; margin-right: 6px; padding: 0 6px; @@ -35,11 +34,6 @@ limitations under the License. border-color: $reaction-row-button-selected-border-color; } - // ignore mouse events for all children, treat it as one entire hoverable entity - * { - pointer-events: none; - } - .mx_ReactionsRowButton_content { max-width: 100px; overflow: hidden; diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss index 637d25d7a1..09c78ae5b4 100644 --- a/res/css/views/messages/_common_CryptoEvent.scss +++ b/res/css/views/messages/_common_CryptoEvent.scss @@ -15,28 +15,45 @@ limitations under the License. */ .mx_cryptoEvent { - display: grid; grid-template-columns: 24px minmax(0, 1fr) min-content; + &.mx_cryptoEvent_icon::before, &.mx_cryptoEvent_icon::after { grid-column: 1; grid-row: 1 / 3; width: 16px; height: 16px; content: ""; - background-image: url("$(res)/img/e2e/normal.svg"); - background-repeat: no-repeat; - background-size: 100%; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $composer-e2e-icon-color; margin-top: 4px; } + // white infill for the transparency + &.mx_cryptoEvent_icon::before { + background-color: #ffffff; + mask-image: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 90%; + } + &.mx_cryptoEvent_icon_verified::after { - background-image: url("$(res)/img/e2e/verified.svg"); + mask-image: url("$(res)/img/e2e/verified.svg"); + background-color: $accent-color; } &.mx_cryptoEvent_icon_warning::after { - background-image: url("$(res)/img/e2e/warning.svg"); + mask-image: url("$(res)/img/e2e/warning.svg"); + background-color: $notice-primary-color; } .mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state { diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index 26b81e94f3..6f86d1ad18 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -53,7 +53,7 @@ limitations under the License. } .mx_UserInfo_separator { - border-bottom: 1px solid lightgray; + border-bottom: 1px solid rgba($primary-fg-color, .1); } .mx_UserInfo_memberDetailsContainer { @@ -121,7 +121,7 @@ limitations under the License. h3 { text-transform: uppercase; color: $notice-secondary-color; - font-weight: bold; + font-weight: 600; font-size: $font-12px; margin: 4px 0; } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 1b1bab67bc..6be417f631 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -81,7 +81,7 @@ $AppsDrawerBodyHeight: 273px; margin: 0; padding: 0; border: 5px solid $widget-menu-bar-bg-color; - border-radius: 4px; + border-radius: 8px; } .mx_AppTile_mini { @@ -98,6 +98,7 @@ $AppsDrawerBodyHeight: 273px; .mx_AppTile_mini .mx_AppTile_persistedWrapper { height: 114px; + min-width: 300px; } .mx_AppTileMenuBar { 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/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss index 584ea17433..a3473dedec 100644 --- a/res/css/views/rooms/_E2EIcon.scss +++ b/res/css/views/rooms/_E2EIcon.scss @@ -22,28 +22,58 @@ limitations under the License. display: block; } -.mx_E2EIcon_warning::after, -.mx_E2EIcon_normal::after, -.mx_E2EIcon_verified::after { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-repeat: no-repeat; - background-size: contain; +.mx_E2EIcon_warning, +.mx_E2EIcon_normal, +.mx_E2EIcon_verified { + &::before, &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } +} + +// white infill for the transparency +.mx_E2EIcon::before { + background-color: #ffffff; + mask-image: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 90%; +} + +// transparent-looking border surrounding the shield for when overlain over avatars +.mx_E2EIcon_bordered { + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $header-panel-bg-color; + + // shrink the actual badge + &::after { + mask-size: 75%; + } + // shrink the infill of the badge + &::before { + mask-size: 65%; + } } .mx_E2EIcon_warning::after { - background-image: url('$(res)/img/e2e/warning.svg'); + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; } .mx_E2EIcon_normal::after { - background-image: url('$(res)/img/e2e/normal.svg'); + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $composer-e2e-icon-color; } .mx_E2EIcon_verified::after { - background-image: url('$(res)/img/e2e/verified.svg'); + mask-image: url('$(res)/img/e2e/verified.svg'); + background-color: $accent-color; } diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index 8db71f297c..27a4e67089 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -26,8 +26,6 @@ limitations under the License. position: absolute; bottom: 2px; right: 7px; - height: 15px; - width: 15px; } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index c168699b70..2a2191b799 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -15,6 +15,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +$left-gutter: 64px; + .mx_EventTile { max-width: 100%; clear: both; @@ -45,7 +47,7 @@ limitations under the License. .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { top: $font-8px; - left: 65px; + left: $left-gutter; } .mx_EventTile_continuation { @@ -73,7 +75,7 @@ limitations under the License. /* the next three lines, along with overflow hidden, truncate long display names */ white-space: nowrap; text-overflow: ellipsis; - max-width: calc(100% - 65px); + max-width: calc(100% - $left-gutter); } .mx_EventTile .mx_SenderProfile .mx_Flair { @@ -111,7 +113,7 @@ limitations under the License. .mx_EventTile_line, .mx_EventTile_reply { position: relative; - padding-left: 65px; /* left gutter */ + padding-left: $left-gutter; border-radius: 4px; } @@ -182,7 +184,7 @@ limitations under the License. * TODO: ultimately we probably want some transition on here. */ .mx_EventTile_selected > .mx_EventTile_line { - border-left: $accent-color 5px solid; + border-left: $accent-color 4px solid; padding-left: 60px; background-color: $event-selected-color; } @@ -328,34 +330,67 @@ limitations under the License. .mx_EventTile_e2eIcon { position: absolute; top: 6px; - left: 46px; - width: 15px; - height: 15px; + left: 44px; + width: 14px; + height: 14px; display: block; bottom: 0; right: 0; opacity: 0.2; background-repeat: no-repeat; background-size: contain; + + &::before, &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } + + &::before { + background-color: #ffffff; + mask-image: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 90%; + } } .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unknown { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unencrypted { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unauthenticated { - background-image: url('$(res)/img/e2e/normal.svg'); + &::after { + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $composer-e2e-icon-color; + } opacity: 1; } @@ -397,10 +432,6 @@ limitations under the License. margin-bottom: 0px; } -.mx_EventTile_12hr .mx_EventTile_e2eIcon { - padding-left: 5px; -} - .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { @@ -408,15 +439,15 @@ limitations under the License. } .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: $e2e-verified-color 5px solid; + border-left: $e2e-verified-color 4px solid; } .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: $e2e-unverified-color 5px solid; + border-left: $e2e-unverified-color 4px solid; } .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { - border-left: $e2e-unknown-color 5px solid; + border-left: $e2e-unknown-color 4px solid; } .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, @@ -505,7 +536,7 @@ limitations under the License. display: inline-block; visibility: hidden; cursor: pointer; - top: 6px; + top: 8px; right: 6px; width: 19px; height: 19px; @@ -537,7 +568,6 @@ limitations under the License. .mx_EventTile_content .markdown-body a { color: $accent-color-alt; - text-decoration: underline; } .mx_EventTile_content .markdown-body .hljs { diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index 44eb8c1e89..2b447be44a 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -$left-gutter: 65px; +$left-gutter: 64px; .mx_GroupLayout { .mx_EventTile { diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 94753f9473..ed60c220e7 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; @@ -181,9 +181,11 @@ $irc-line-height: $font-18px; > span { display: flex; - > .mx_SenderProfile_name { + > .mx_SenderProfile_name, + > .mx_SenderProfile_aux { overflow: hidden; text-overflow: ellipsis; + min-width: var(--name-width); } } } diff --git a/res/css/views/rooms/_InviteOnlyIcon.scss b/res/css/views/rooms/_InviteOnlyIcon.scss deleted file mode 100644 index b71fd6348d..0000000000 --- a/res/css/views/rooms/_InviteOnlyIcon.scss +++ /dev/null @@ -1,58 +0,0 @@ -/* -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. -*/ - -@define-mixin mx_InviteOnlyIcon { - width: 12px; - height: 12px; - position: relative; - display: block !important; -} - -@define-mixin mx_InviteOnlyIcon_padlock { - background-color: $roomtile-name-color; - mask-image: url("$(res)/img/feather-customised/lock-solid.svg"); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; -} - -.mx_InviteOnlyIcon_large { - @mixin mx_InviteOnlyIcon; - margin: 0 4px; - - &::before { - @mixin mx_InviteOnlyIcon_padlock; - width: 12px; - height: 12px; - } -} - -.mx_InviteOnlyIcon_small { - @mixin mx_InviteOnlyIcon; - left: -2px; - - &::before { - @mixin mx_InviteOnlyIcon_padlock; - width: 10px; - height: 10px; - } -} diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss index 23018df8da..cb3803fe5b 100644 --- a/res/css/views/rooms/_JumpToBottomButton.scss +++ b/res/css/views/rooms/_JumpToBottomButton.scss @@ -41,8 +41,8 @@ limitations under the License. // with text-align in parent display: inline-block; padding: 0 4px; - color: $roomtile-badge-fg-color; - background-color: $roomtile-name-color; + color: $accent-fg-color; + background-color: $muted-fg-color; } .mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge { @@ -56,7 +56,7 @@ limitations under the License. border-radius: 19px; box-sizing: border-box; background: $primary-bg-color; - border: 1.3px solid $roomtile-name-color; + border: 1.3px solid $muted-fg-color; cursor: pointer; } @@ -70,5 +70,5 @@ limitations under the License. mask: url('$(res)/img/icon-jump-to-bottom.svg'); mask-repeat: no-repeat; mask-position: 9px 14px; - background: $roomtile-name-color; + background: $muted-fg-color; } diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 99dc2338d4..90667d41b4 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -26,6 +26,10 @@ limitations under the License. flex: 1 0 auto; } + .mx_SearchBox { + margin-bottom: 5px; + } + h2 { text-transform: uppercase; color: $h3-color; @@ -59,32 +63,27 @@ 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; + } } - - .mx_MemberList_wrapper { padding: 10px; } - -.mx_MemberList_invite, -.mx_RightPanel_invite { +.mx_MemberList_invite { flex: 0 0 auto; position: relative; background-color: $button-bg-color; border-radius: 4px; - padding: 8px; - margin: 9px; + margin: 5px 9px 9px; display: flex; justify-content: center; color: $button-fg-color; font-weight: 600; - - .mx_RightPanel_icon { - padding-right: 5px; - padding-top: 2px; - } } .mx_MemberList_invite.mx_AccessibleButton_disabled { @@ -93,8 +92,17 @@ limitations under the License. } .mx_MemberList_invite span { - background-image: url('$(res)/img/feather-customised/user-add.svg'); + background-image: url('$(res)/img/element-icons/room/invite.svg'); background-repeat: no-repeat; background-position: center left; - padding-left: 25px; + background-size: 20px; + padding: 8px 0 8px 25px; +} + +.mx_MemberList_inviteCommunity span { + background-image: url('$(res)/img/icon-invite-people.svg'); +} + +.mx_MemberList_addRoomToCommunity span { + background-image: url('$(res)/img/icons-room-add.svg'); } diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index c1cda7bf24..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: 84px; + padding-left: 82px; } .mx_MessageComposer_replaced_wrapper { @@ -60,7 +60,7 @@ limitations under the License. .mx_MessageComposer .mx_MessageComposer_avatar { position: absolute; - left: 27px; + left: 26px; } .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { @@ -76,8 +76,8 @@ limitations under the License. left: 60px; margin-right: 0; // Counteract the E2EIcon class margin-left: 3px; // Counteract the E2EIcon class - width: 15px; - height: 15px; + width: 12px; + height: 12px; } .mx_MessageComposer_noperm_error { @@ -196,30 +196,35 @@ limitations under the License. mask-size: contain; mask-position: center; } + + &.mx_MessageComposer_hangup::before { + background-color: $warning-color; + } } + .mx_MessageComposer_upload::before { - mask-image: url('$(res)/img/feather-customised/paperclip.svg'); + mask-image: url('$(res)/img/element-icons/room/composer/attach.svg'); } .mx_MessageComposer_hangup::before { - mask-image: url('$(res)/img/hangup.svg'); + mask-image: url('$(res)/img/element-icons/call/hangup.svg'); } .mx_MessageComposer_voicecall::before { - mask-image: url('$(res)/img/feather-customised/phone.svg'); + mask-image: url('$(res)/img/element-icons/call/voice-call.svg'); } .mx_MessageComposer_videocall::before { - mask-image: url('$(res)/img/feather-customised/video.svg'); + mask-image: url('$(res)/img/element-icons/call/video-call.svg'); } .mx_MessageComposer_emoji::before { - mask-image: url('$(res)/img/feather-customised/emoji3.custom.svg'); + mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg'); } .mx_MessageComposer_stickers::before { - mask-image: url('$(res)/img/feather-customised/sticker.custom.svg'); + mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg'); } .mx_MessageComposer_formatting { diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss index 27ee7b9795..d97c49630a 100644 --- a/res/css/views/rooms/_MessageComposerFormatBar.scss +++ b/res/css/views/rooms/_MessageComposerFormatBar.scss @@ -75,23 +75,23 @@ limitations under the License. } .mx_MessageComposerFormatBar_buttonIconBold::after { - mask-image: url('$(res)/img/format/bold.svg'); + mask-image: url('$(res)/img/element-icons/room/format-bar/bold.svg'); } .mx_MessageComposerFormatBar_buttonIconItalic::after { - mask-image: url('$(res)/img/format/italics.svg'); + mask-image: url('$(res)/img/element-icons/room/format-bar/italic.svg'); } .mx_MessageComposerFormatBar_buttonIconStrikethrough::after { - mask-image: url('$(res)/img/format/strikethrough.svg'); + mask-image: url('$(res)/img/element-icons/room/format-bar/strikethrough.svg'); } .mx_MessageComposerFormatBar_buttonIconQuote::after { - mask-image: url('$(res)/img/format/quote.svg'); + mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg'); } .mx_MessageComposerFormatBar_buttonIconCode::after { - mask-image: url('$(res)/img/format/code.svg'); + mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg'); } } diff --git a/res/css/views/rooms/_NotificationBadge.scss b/res/css/views/rooms/_NotificationBadge.scss index 0e6d442cc1..64b2623238 100644 --- a/res/css/views/rooms/_NotificationBadge.scss +++ b/res/css/views/rooms/_NotificationBadge.scss @@ -27,7 +27,7 @@ limitations under the License. // ^- The count is an element floating within that. &.mx_NotificationBadge_visible { - background-color: $roomtile2-default-badge-bg-color; + background-color: $roomtile-default-badge-bg-color; // Create a flexbox to order the count a bit easier display: flex; @@ -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/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss index 3858d836e6..6512797401 100644 --- a/res/css/views/rooms/_RoomBreadcrumbs.scss +++ b/res/css/views/rooms/_RoomBreadcrumbs.scss @@ -1,5 +1,5 @@ /* -Copyright 2019 New Vector Ltd +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. @@ -15,98 +15,42 @@ limitations under the License. */ .mx_RoomBreadcrumbs { - position: relative; - height: 42px; - padding: 8px; - padding-bottom: 0; + width: 100%; + + // Create a flexbox for the crumbs display: flex; flex-direction: row; - - // repeating circles as empty placeholders - background: - radial-gradient( - circle at center, - $breadcrumb-placeholder-bg-color, - $breadcrumb-placeholder-bg-color 15px, - transparent 16px - ); - background-size: 36px; - background-position: 6px -1px; - background-repeat: repeat-x; - - - // Autohide the scrollbar - overflow-x: hidden; - &:hover { - overflow-x: visible; - } - - .mx_AutoHideScrollbar { - display: flex; - flex-direction: row; - height: 100%; - } + align-items: flex-start; .mx_RoomBreadcrumbs_crumb { - margin-left: 4px; - height: 32px; - display: inline-block; - transition: transform 0.3s, width 0.3s; - position: relative; - - .mx_RoomTile_badge { - position: absolute; - top: -3px; - right: -4px; - } - - .mx_RoomBreadcrumbs_dmIndicator { - position: absolute; - bottom: 0; - right: -4px; - } - } - - .mx_RoomBreadcrumbs_animate { - margin-left: 0; + margin-right: 8px; width: 32px; - transform: scale(1); } - .mx_RoomBreadcrumbs_preAnimate { - width: 0; - transform: scale(0); + // These classes come from the CSSTransition component. There's many more classes we + // could care about, but this is all we worried about for now. The animation works by + // first triggering the enter state with the newest breadcrumb off screen (-40px) then + // sliding it into view. + &.mx_RoomBreadcrumbs-enter { + margin-left: -40px; // 32px for the avatar, 8px for the margin + } + &.mx_RoomBreadcrumbs-enter-active { + margin-left: 0; + + // Timing function is as-requested by design. + // NOTE: The transition time MUST match the value passed to CSSTransition! + transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1); } - .mx_RoomBreadcrumbs_left { - opacity: 0.5; - } - - // Note: we have to manually control the gradient and stuff, but the IndicatorScrollbar - // will deal with left/right positioning for us. Normally we'd use position:sticky on - // a few key elements, however that doesn't work in horizontal scrolling scenarios. - - .mx_IndicatorScrollbar_leftOverflowIndicator, - .mx_IndicatorScrollbar_rightOverflowIndicator { - display: none; - } - - .mx_IndicatorScrollbar_leftOverflowIndicator { - background: linear-gradient(to left, $panel-gradient); - } - - .mx_IndicatorScrollbar_rightOverflowIndicator { - background: linear-gradient(to right, $panel-gradient); - } - - &.mx_IndicatorScrollbar_leftOverflow .mx_IndicatorScrollbar_leftOverflowIndicator, - &.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator { - position: absolute; - top: 0; - bottom: 0; - width: 15px; - display: block; - pointer-events: none; - z-index: 100; + .mx_RoomBreadcrumbs_placeholder { + font-weight: 600; + font-size: $font-14px; + line-height: 32px; // specifically to match the height this is not scaled + height: 32px; } } + +.mx_RoomBreadcrumbs_Tooltip { + margin-left: -42px; + margin-top: -42px; +} diff --git a/res/css/views/rooms/_RoomBreadcrumbs2.scss b/res/css/views/rooms/_RoomBreadcrumbs2.scss deleted file mode 100644 index 0c3c41622e..0000000000 --- a/res/css/views/rooms/_RoomBreadcrumbs2.scss +++ /dev/null @@ -1,68 +0,0 @@ -/* -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. -*/ - -// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367 - -.mx_RoomBreadcrumbs2 { - width: 100%; - - // Create a flexbox for the crumbs - display: flex; - flex-direction: row; - align-items: flex-start; - - .mx_RoomBreadcrumbs2_crumb { - margin-right: 8px; - width: 32px; - } - - // These classes come from the CSSTransition component. There's many more classes we - // could care about, but this is all we worried about for now. The animation works by - // first triggering the enter state with the newest breadcrumb off screen (-40px) then - // sliding it into view. - &.mx_RoomBreadcrumbs2-enter { - margin-left: -40px; // 32px for the avatar, 8px for the margin - } - &.mx_RoomBreadcrumbs2-enter-active { - margin-left: 0; - - // Timing function is as-requested by design. - // NOTE: The transition time MUST match the value passed to CSSTransition! - transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1); - } - - .mx_RoomBreadcrumbs2_placeholder { - font-weight: 600; - font-size: $font-14px; - line-height: 32px; // specifically to match the height this is not scaled - height: 32px; - } -} - -.mx_RoomBreadcrumbs2_Tooltip { - margin-left: -42px; - margin-top: -42px; - - &.mx_Tooltip { - background-color: $tagpanel-bg-color; - color: $accent-fg-color; - border: 0; - - .mx_Tooltip_chevron { - display: none; - } - } -} diff --git a/res/css/views/rooms/_RoomDropTarget.scss b/res/css/views/rooms/_RoomDropTarget.scss deleted file mode 100644 index 2e8145c2c9..0000000000 --- a/res/css/views/rooms/_RoomDropTarget.scss +++ /dev/null @@ -1,55 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd - -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_RoomDropTarget_container { - background-color: $secondary-accent-color; - padding-left: 18px; - padding-right: 18px; - padding-top: 8px; - padding-bottom: 7px; -} - -.collapsed .mx_RoomDropTarget_container { - padding-right: 10px; - padding-left: 10px; -} - -.mx_RoomDropTarget { - font-size: $font-13px; - padding-top: 5px; - padding-bottom: 5px; - border: 1px dashed $accent-color; - color: $primary-fg-color; - background-color: $droptarget-bg-color; - border-radius: 4px; -} - - -.mx_RoomDropTarget_label { - position: relative; - margin-top: 3px; - line-height: $font-21px; - z-index: 1; - text-align: center; -} - -.collapsed .mx_RoomDropTarget_avatar { - float: none; -} - -.collapsed .mx_RoomDropTarget_label { - display: none; -} diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index a047a6f9b4..ba46100ea6 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -15,26 +15,34 @@ limitations under the License. */ .mx_RoomHeader { - flex: 0 0 52px; + flex: 0 0 50px; border-bottom: 1px solid $primary-hairline-color; + background-color: $roomheader-bg-color; - .mx_E2EIcon { - margin: 0; - position: absolute; - bottom: -2px; - right: -6px; - height: 15px; - width: 15px; + .mx_RoomHeader_e2eIcon { + height: 12px; + width: 12px; + + .mx_E2EIcon { + margin: 0; + position: absolute; + height: 12px; + width: 12px; + } } } .mx_RoomHeader_wrapper { margin: auto; - height: 52px; + height: 50px; display: flex; align-items: center; min-width: 0; - padding: 0 10px 0 19px; + padding: 0 10px 0 18px; + + .mx_InviteOnlyIcon_large { + margin: 0; + } } .mx_RoomHeader_spinner { @@ -67,7 +75,6 @@ limitations under the License. .mx_RoomHeader_buttons { display: flex; background-color: $primary-bg-color; - padding-right: 5px; } .mx_RoomHeader_info { @@ -173,7 +180,7 @@ limitations under the License. .mx_RoomHeader_avatar { flex: 0; - margin: 0 7px; + margin: 0 6px 0 7px; position: relative; } @@ -201,41 +208,53 @@ 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 { - mask-image: url('$(res)/img/feather-customised/settings.svg'); + mask-image: url('$(res)/img/element-icons/settings.svg'); } .mx_RoomHeader_forgetButton::before { - mask-image: url('$(res)/img/leave.svg'); + mask-image: url('$(res)/img/element-icons/leave.svg'); width: 26px; } .mx_RoomHeader_searchButton::before { - mask-image: url('$(res)/img/feather-customised/search.svg'); + mask-image: url('$(res)/img/element-icons/room/search-inset.svg'); } .mx_RoomHeader_shareButton::before { - mask-image: url('$(res)/img/feather-customised/share.svg'); + mask-image: url('$(res)/img/element-icons/room/share.svg'); } .mx_RoomHeader_manageIntegsButton::before { - mask-image: url('$(res)/img/feather-customised/grid.svg'); + mask-image: url('$(res)/img/element-icons/room/integrations.svg'); } .mx_RoomHeader_showPanel { @@ -251,7 +270,7 @@ limitations under the License. } .mx_RoomHeader_pinnedButton::before { - mask-image: url('$(res)/img/icons-pin.svg'); + mask-image: url('$(res)/img/element-icons/room/pin.svg'); } .mx_RoomHeader_pinsIndicator { diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index c23c19699d..690ed0646e 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -1,6 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2017 Vector Creations Ltd +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. @@ -15,56 +14,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_RoomList.mx_RoomList2 { - overflow-y: auto; -} - .mx_RoomList { - /* take up remaining space below TopLeftMenu */ - flex: 1; - min-height: 0; - overflow-y: hidden; -} + width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists) -.mx_RoomList .mx_ResizeHandle { - // needed so the z-index takes effect - position: relative; -} - -/* hide resize handles next to collapsed / empty sublists */ -.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle { - display: none; -} - -.mx_RoomList_expandButton { - margin-left: 8px; - cursor: pointer; - padding-left: 12px; - padding-right: 12px; -} - -.mx_RoomList_emptySubListTip_container { - padding-left: 18px; - padding-right: 18px; - padding-top: 8px; - padding-bottom: 7px; -} - -.mx_RoomList_emptySubListTip { - font-size: $font-13px; - padding: 5px; - border: 1px dashed $accent-color; - color: $primary-fg-color; - background-color: $droptarget-bg-color; - border-radius: 4px; - line-height: $font-16px; -} - -.mx_RoomList_emptySubListTip .mx_RoleButton { - vertical-align: -2px; -} - -.mx_RoomList_headerButtons { - position: absolute; - right: 60px; + // Create a column-based flexbox for the sublists. That's pretty much all we have to + // worry about in this stylesheet. + display: flex; + flex-direction: column; + flex-wrap: nowrap; // let the column overflow } diff --git a/res/css/views/rooms/_RoomList2.scss b/res/css/views/rooms/_RoomList2.scss deleted file mode 100644 index 5b78020626..0000000000 --- a/res/css/views/rooms/_RoomList2.scss +++ /dev/null @@ -1,27 +0,0 @@ -/* -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. -*/ - -// TODO: Rename to mx_RoomList during replacement of old component - -.mx_RoomList2 { - width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists) - - // Create a column-based flexbox for the sublists. That's pretty much all we have to - // worry about in this stylesheet. - display: flex; - flex-direction: column; - flex-wrap: nowrap; // let the column overflow -} diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist.scss similarity index 77% rename from res/css/views/rooms/_RoomSublist2.scss rename to res/css/views/rooms/_RoomSublist.scss index 47de95dfc7..3ec4d114af 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -14,19 +14,18 @@ See the License for the specific language governing permissions and limitations under the License. */ -// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367 - -.mx_RoomSublist2 { +.mx_RoomSublist { // The sublist is a column of rows, essentially display: flex; flex-direction: column; margin-left: 8px; + margin-bottom: 4px; width: 100%; flex-shrink: 0; // to convince safari's layout engine the flexbox is fine - .mx_RoomSublist2_headerContainer { + .mx_RoomSublist_headerContainer { // Create a flexbox to make alignment easy display: flex; align-items: center; @@ -42,12 +41,13 @@ limitations under the License. // all works by ensuring the header text has a fixed height when sticky so the // fixed height of the container can maintain the scroll position. - // The combined height must be set in the LeftPanel2 component for sticky headers + // The combined height must be set in the LeftPanel component for sticky headers // to work correctly. padding-bottom: 8px; height: 24px; + color: $roomlist-header-color; - .mx_RoomSublist2_stickable { + .mx_RoomSublist_stickable { flex: 1; max-width: 100%; @@ -59,25 +59,26 @@ limitations under the License. // to identify when a header is sticky. If we didn't have a consistent sticky class, // we'd have to do the "is sticky" checks again on click, as clicking the header // when sticky scrolls instead of collapses the list. - &.mx_RoomSublist2_headerContainer_sticky { + &.mx_RoomSublist_headerContainer_sticky { position: fixed; height: 32px; // to match the header container // width set by JS + width: calc(100% - 22px); } - &.mx_RoomSublist2_headerContainer_stickyBottom { + &.mx_RoomSublist_headerContainer_stickyBottom { bottom: 0; } // We don't have a top style because the top is dependent on the room list header's // height, and is therefore calculated in JS. - // The class, mx_RoomSublist2_headerContainer_stickyTop, is applied though. + // The class, mx_RoomSublist_headerContainer_stickyTop, is applied though. } // Sticky Headers End // *************************** - .mx_RoomSublist2_badgeContainer { + .mx_RoomSublist_badgeContainer { // Create another flexbox row because it's super easy to position the badge this way. display: flex; align-items: center; @@ -90,14 +91,14 @@ limitations under the License. } } - &:not(.mx_RoomSublist2_headerContainer_withAux) { + &:not(.mx_RoomSublist_headerContainer_withAux) { .mx_NotificationBadge { margin-right: 4px; // just to push it over a bit, aligning it with the other elements } } - .mx_RoomSublist2_auxButton, - .mx_RoomSublist2_menuButton { + .mx_RoomSublist_auxButton, + .mx_RoomSublist_menuButton { margin-left: 8px; // should be the same as the notification badge position: relative; width: 24px; @@ -119,26 +120,25 @@ limitations under the License. } // Hide the menu button by default - .mx_RoomSublist2_menuButton { + .mx_RoomSublist_menuButton { visibility: hidden; width: 0; margin: 0; } - .mx_RoomSublist2_auxButton::before { + .mx_RoomSublist_auxButton::before { mask-image: url('$(res)/img/feather-customised/plus.svg'); } - .mx_RoomSublist2_menuButton::before { - mask-image: url('$(res)/img/feather-customised/more-horizontal.svg'); + .mx_RoomSublist_menuButton::before { + mask-image: url('$(res)/img/element-icons/context-menu.svg'); } - .mx_RoomSublist2_headerText { + .mx_RoomSublist_headerText { flex: 1; max-width: calc(100% - 16px); // 16px is the badge width - text-transform: uppercase; line-height: $font-16px; - font-size: $font-12px; + font-size: $font-13px; font-weight: 600; // Ellipsize any text overflow @@ -146,7 +146,7 @@ limitations under the License. overflow: hidden; white-space: nowrap; - .mx_RoomSublist2_collapseBtn { + .mx_RoomSublist_collapseBtn { display: inline-block; position: relative; width: 12px; @@ -167,7 +167,7 @@ limitations under the License. mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); } - &.mx_RoomSublist2_collapseBtn_collapsed::before { + &.mx_RoomSublist_collapseBtn_collapsed::before { mask-image: url('$(res)/img/feather-customised/chevron-right.svg'); } } @@ -179,11 +179,12 @@ limitations under the License. // when scrolled to the top above the first sublist (whose header can only // ever stick to top), so we force height to 0 for only that first header. // See also https://github.com/vector-im/riot-web/issues/14429. - &:first-child .mx_RoomSublist2_headerContainer { + &:first-child .mx_RoomSublist_headerContainer { height: 0; + padding-bottom: 4px; } - .mx_RoomSublist2_resizeBox { + .mx_RoomSublist_resizeBox { position: relative; // Create another flexbox column for the tiles @@ -191,7 +192,7 @@ limitations under the License. flex-direction: column; overflow: hidden; - .mx_RoomSublist2_tiles { + .mx_RoomSublist_tiles { flex: 1 0 0; overflow: hidden; // need this to be flex otherwise the overflow hidden from above @@ -200,21 +201,21 @@ limitations under the License. display: flex; flex-direction: column; - mask-image: linear-gradient(0deg, transparent, black 3px); + mask-image: linear-gradient(0deg, transparent, black 4px); } - .mx_RoomSublist2_resizerHandles_showNButton { + .mx_RoomSublist_resizerHandles_showNButton { flex: 0 0 32px; } - .mx_RoomSublist2_resizerHandles { + .mx_RoomSublist_resizerHandles { flex: 0 0 4px; } // Class name comes from the ResizableBox component // The hover state needs to use the whole sublist, not just the resizable box, // so that selector is below and one level higher. - .mx_RoomSublist2_resizerHandle { + .mx_RoomSublist_resizerHandle { cursor: ns-resize; border-radius: 3px; @@ -232,21 +233,21 @@ limitations under the License. right: calc(50% - 32px) !important; } - &:hover, &.mx_RoomSublist2_hasMenuOpen { - .mx_RoomSublist2_resizerHandle { + &:hover, &.mx_RoomSublist_hasMenuOpen { + .mx_RoomSublist_resizerHandle { opacity: 0.8; background-color: $primary-fg-color; } } } - .mx_RoomSublist2_showNButton { + .mx_RoomSublist_showNButton { cursor: pointer; font-size: $font-13px; line-height: $font-18px; - color: $roomtile2-preview-color; + color: $roomtile-preview-color; - // Update the render() function for RoomSublist2 if these change + // Update the render() function for RoomSublist if these change // Update the ListLayout class for minVisibleTiles if these change. height: 24px; padding-bottom: 4px; @@ -255,7 +256,7 @@ limitations under the License. display: flex; align-items: center; - .mx_RoomSublist2_showNButtonChevron { + .mx_RoomSublist_showNButtonChevron { position: relative; width: 16px; height: 16px; @@ -264,52 +265,52 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $roomtile2-preview-color; + background: $roomtile-preview-color; } - .mx_RoomSublist2_showMoreButtonChevron { + .mx_RoomSublist_showMoreButtonChevron { mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); } - .mx_RoomSublist2_showLessButtonChevron { + .mx_RoomSublist_showLessButtonChevron { mask-image: url('$(res)/img/feather-customised/chevron-up.svg'); } } - &.mx_RoomSublist2_hasMenuOpen, - &:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:focus-within, - &:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover { - .mx_RoomSublist2_menuButton { + &.mx_RoomSublist_hasMenuOpen, + &:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:focus-within, + &:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:hover { + .mx_RoomSublist_menuButton { visibility: visible; width: 24px; margin-left: 8px; } } - &.mx_RoomSublist2_minimized { - .mx_RoomSublist2_headerContainer { + &.mx_RoomSublist_minimized { + .mx_RoomSublist_headerContainer { height: auto; flex-direction: column; position: relative; - .mx_RoomSublist2_badgeContainer { + .mx_RoomSublist_badgeContainer { order: 0; align-self: flex-end; margin-right: 0; } - .mx_RoomSublist2_stickable { + .mx_RoomSublist_stickable { order: 1; max-width: 100%; } - .mx_RoomSublist2_auxButton { + .mx_RoomSublist_auxButton { order: 2; visibility: visible; width: 32px !important; // !important to override hover styles height: 32px !important; // !important to override hover styles margin-left: 0 !important; // !important to override hover styles - background-color: $roomlist2-button-bg-color; + background-color: $roomlist-button-bg-color; margin-top: 8px; &::before { @@ -319,25 +320,25 @@ limitations under the License. } } - .mx_RoomSublist2_resizeBox { + .mx_RoomSublist_resizeBox { align-items: center; } - .mx_RoomSublist2_showNButton { + .mx_RoomSublist_showNButton { flex-direction: column; - .mx_RoomSublist2_showNButtonChevron { + .mx_RoomSublist_showNButtonChevron { margin-right: 12px; // to center } } - .mx_RoomSublist2_menuButton { + .mx_RoomSublist_menuButton { height: 16px; } - &.mx_RoomSublist2_hasMenuOpen, - & > .mx_RoomSublist2_headerContainer:hover { - .mx_RoomSublist2_menuButton { + &.mx_RoomSublist_hasMenuOpen, + & > .mx_RoomSublist_headerContainer:hover { + .mx_RoomSublist_menuButton { visibility: visible; position: absolute; bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment @@ -349,7 +350,7 @@ limitations under the License. // This is the same color as the left panel background because it needs // to occlude the sublist title - background-color: $roomlist2-bg-color; + background-color: $roomlist-bg-color; &::before { top: 0; @@ -357,8 +358,8 @@ limitations under the License. } } - &.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) { - .mx_RoomSublist2_menuButton { + &.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) { + .mx_RoomSublist_menuButton { bottom: 8px; // align to the middle of name, 40px less than the `bottom` above. } } @@ -366,7 +367,7 @@ limitations under the License. } } -.mx_RoomSublist2_contextMenu { +.mx_RoomSublist_contextMenu { padding: 20px 16px; width: 250px; @@ -374,11 +375,11 @@ limitations under the License. margin-top: 16px; margin-bottom: 16px; margin-right: 16px; // additional 16px - border: 1px solid $roomsublist2-divider-color; + border: 1px solid $roomsublist-divider-color; opacity: 0.1; } - .mx_RoomSublist2_contextMenu_title { + .mx_RoomSublist_contextMenu_title { font-size: $font-15px; line-height: $font-20px; font-weight: 600; @@ -390,6 +391,6 @@ limitations under the License. } } -.mx_RoomSublist2_addRoomTooltip { +.mx_RoomSublist_addRoomTooltip { margin-top: -3px; } diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 7f93da0bbf..9afbd44b20 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -1,6 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -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. @@ -15,214 +14,226 @@ See the License for the specific language governing permissions and limitations under the License. */ +// Note: the room tile expects to be in a flexbox column container .mx_RoomTile { - display: flex; - flex-direction: row; - align-items: center; - cursor: pointer; - height: 34px; - margin: 0; - padding: 0 8px 0 10px; - position: relative; - - .mx_RoomTile_menuButton { - display: none; - flex: 0 0 16px; - height: 16px; - background-image: url('$(res)/img/icon_context.svg'); - background-repeat: no-repeat; - background-position: center; - } - - .mx_UserOnlineDot { - display: block; - margin-right: 5px; - } -} - -.mx_RoomTile:focus { - filter: none !important; - background-color: $roomtile-focused-bg-color; -} - -.mx_RoomTile_tooltip { - display: inline-block; - position: relative; - top: -54px; - left: -12px; -} - -.mx_RoomTile_nameContainer { - display: flex; - align-items: center; - flex: 1; - vertical-align: middle; - min-width: 0; -} - -.mx_RoomTile_labelContainer { - display: flex; - flex-direction: column; - flex: 1; - min-width: 0; -} - -.mx_RoomTile_subtext { - display: inline-block; - font-size: $font-11px; - padding: 0 0 0 7px; - margin: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: clip; - position: relative; - bottom: 4px; -} - -.mx_RoomTile_avatar_container { - position: relative; - display: flex; -} - -.mx_RoomTile_avatar { - flex: 0; + margin-bottom: 4px; padding: 4px; - width: 24px; - vertical-align: middle; -} -.mx_RoomTile_hasSubtext .mx_RoomTile_avatar { - padding-top: 0; - vertical-align: super; -} + // The tile is also a flexbox row itself + display: flex; -.mx_RoomTile_dm { - display: block; - position: absolute; - bottom: 0; - right: -5px; - z-index: 2; -} + &.mx_RoomTile_selected, + &:hover, + &:focus-within, + &.mx_RoomTile_hasMenuOpen { + background-color: $roomtile-selected-bg-color; + border-radius: 8px; + } -// Note we match .mx_E2EIcon to make sure this matches more tightly than just -// .mx_E2EIcon on its own -.mx_RoomTile_e2eIcon.mx_E2EIcon { - height: 14px; - width: 14px; - display: block; - position: absolute; - bottom: -2px; - right: -5px; - z-index: 1; - margin: 0; -} + .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer { + margin-right: 8px; + } -.mx_RoomTile_name { - font-size: $font-14px; - padding: 0 4px; - color: $roomtile-name-color; - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; -} + .mx_RoomTile_nameContainer { + flex-grow: 1; + min-width: 0; // allow flex to shrink it + margin-right: 8px; // spacing to buttons/badges -.mx_RoomTile_badge { - flex: 0 1 content; - border-radius: 0.8em; - padding: 0 0.4em; - color: $roomtile-badge-fg-color; - font-weight: 600; - font-size: $font-12px; -} - -.collapsed { - .mx_RoomTile { - margin: 0 6px; - padding: 0 2px; - position: relative; + // Create a new column layout flexbox for the name parts + display: flex; + flex-direction: column; justify-content: center; + + .mx_RoomTile_name, + .mx_RoomTile_messagePreview { + margin: 0 2px; + width: 100%; + + // Ellipsize any text overflow + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .mx_RoomTile_name { + font-size: $font-14px; + line-height: $font-18px; + } + + .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents { + font-weight: 600; + } + + .mx_RoomTile_messagePreview { + font-size: $font-13px; + line-height: $font-18px; + color: $roomtile-preview-color; + } + + .mx_RoomTile_nameWithPreview { + margin-top: -4px; // shift the name up a bit more + } } - .mx_RoomTile_name { + .mx_RoomTile_notificationsButton { + margin-left: 4px; // spacing between buttons + } + + .mx_RoomTile_badgeContainer { + height: 16px; + // don't set width so that it takes no space when there is no badge to show + margin: auto 0; // vertically align + + // Create a flexbox to make aligning dot badges easier + display: flex; + align-items: center; + + .mx_NotificationBadge { + margin-right: 2px; // centering + } + + .mx_NotificationBadge_dot { + // make the smaller dot occupy the same width for centering + margin-left: 5px; + margin-right: 7px; + } + } + + // The context menu buttons are hidden by default + .mx_RoomTile_menuButton, + .mx_RoomTile_notificationsButton { + width: 20px; + min-width: 20px; // yay flex + height: 20px; + margin-top: auto; + margin-bottom: auto; + position: relative; display: none; + + &::before { + top: 2px; + left: 2px; + content: ''; + width: 16px; + height: 16px; + position: absolute; + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + background: $primary-fg-color; + } } - .mx_RoomTile_badge { - position: absolute; - right: 6px; - top: 0px; - border-radius: 16px; - z-index: 3; - border: 0.18em solid $secondary-accent-color; - } - - .mx_RoomTile_menuButton { - display: none; // no design for this for now - } - .mx_UserOnlineDot { - display: none; // no design for this for now - } -} - -// toggle menuButton and badge on menu displayed -.mx_RoomTile_menuDisplayed, -// or on keyboard focus of room tile -.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:focus-within, -// or on pointer hover -.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover { - .mx_RoomTile_menuButton { + // If the room has an overriden notification setting then we always show the notifications menu button + .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show { display: block; } - .mx_UserOnlineDot { - display: none; + + .mx_RoomTile_menuButton::before { + mask-image: url('$(res)/img/element-icons/context-menu.svg'); + } + + &:not(.mx_RoomTile_minimized) { + &:hover, + &:focus-within, + &.mx_RoomTile_hasMenuOpen { + // Hide the badge container on hover because it'll be a menu button + .mx_RoomTile_badgeContainer { + width: 0; + height: 0; + display: none; + } + + .mx_RoomTile_notificationsButton, + .mx_RoomTile_menuButton { + display: block; + } + } + } + + &.mx_RoomTile_minimized { + flex-direction: column; + align-items: center; + position: relative; + + .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer { + margin-right: 0; + } } } -.mx_RoomTile_unreadNotify .mx_RoomTile_badge, -.mx_RoomTile_badge.mx_RoomTile_badgeUnread { - background-color: $roomtile-name-color; +// We use these both in context menus and the room tiles +.mx_RoomTile_iconBell::before { + mask-image: url('$(res)/img/element-icons/notifications.svg'); +} +.mx_RoomTile_iconBellDot::before { + mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg'); +} +.mx_RoomTile_iconBellCrossed::before { + mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg'); +} +.mx_RoomTile_iconBellMentions::before { + mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg'); +} +.mx_RoomTile_iconCheck::before { + mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg'); } -.mx_RoomTile_highlight .mx_RoomTile_badge, -.mx_RoomTile_badge.mx_RoomTile_badgeRed { - color: $accent-fg-color; - background-color: $warning-color; -} +.mx_RoomTile_contextMenu { + .mx_RoomTile_contextMenu_redRow { + .mx_AccessibleButton { + color: $warning-color !important; // !important to override styles from context menu + } -.mx_RoomTile_unread, .mx_RoomTile_highlight { - .mx_RoomTile_name { - font-weight: 600; - color: $roomtile-selected-color; + .mx_IconizedContextMenu_icon::before { + background-color: $warning-color; + } + } + + .mx_RoomTile_contextMenu_activeRow { + &.mx_AccessibleButton, .mx_AccessibleButton { + color: $accent-color !important; // !important to override styles from context menu + } + + .mx_IconizedContextMenu_icon::before { + background-color: $accent-color; + } + } + + .mx_IconizedContextMenu_icon { + position: relative; + width: 16px; + height: 16px; + + &::before { + content: ''; + width: 16px; + height: 16px; + position: absolute; + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + background: $primary-fg-color; + } + } + + .mx_RoomTile_iconStar::before { + mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg'); + } + + .mx_RoomTile_iconFavorite::before { + mask-image: url('$(res)/img/feather-customised/favourites.svg'); + } + + .mx_RoomTile_iconArrowDown::before { + mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg'); + } + + .mx_RoomTile_iconSettings::before { + mask-image: url('$(res)/img/element-icons/settings.svg'); + } + + .mx_RoomTile_iconSignOut::before { + mask-image: url('$(res)/img/element-icons/leave.svg'); } } - -.mx_RoomTile_selected { - border-radius: 4px; - background-color: $roomtile-selected-bg-color; -} - -.mx_DNDRoomTile { - transform: none; - transition: transform 0.2s; -} - -.mx_DNDRoomTile_dragging { - transform: scale(1.05, 1.05); -} - -.mx_RoomTile_arrow { - position: absolute; - right: 0px; -} - -.mx_RoomTile.mx_RoomTile_transparent { - background-color: transparent; -} - -.mx_RoomTile.mx_RoomTile_transparent:focus { - background-color: $roomtile-transparent-focused-color; -} - -.mx_GroupInviteTile .mx_RoomTile_name { - flex: 1; -} diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss deleted file mode 100644 index 7348398a10..0000000000 --- a/res/css/views/rooms/_RoomTile2.scss +++ /dev/null @@ -1,241 +0,0 @@ -/* -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. -*/ - -// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367 - -// Note: the room tile expects to be in a flexbox column container -.mx_RoomTile2 { - margin-bottom: 4px; - padding: 4px; - - // The tile is also a flexbox row itself - display: flex; - - &.mx_RoomTile2_selected, - &:hover, - &:focus-within, - &.mx_RoomTile2_hasMenuOpen { - background-color: $roomtile2-selected-bg-color; - border-radius: 32px; - } - - .mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer { - margin-right: 8px; - } - - .mx_RoomTile2_nameContainer { - flex-grow: 1; - min-width: 0; // allow flex to shrink it - margin-right: 8px; // spacing to buttons/badges - - // Create a new column layout flexbox for the name parts - display: flex; - flex-direction: column; - justify-content: center; - - .mx_RoomTile2_name, - .mx_RoomTile2_messagePreview { - margin: 0 2px; - width: 100%; - - // Ellipsize any text overflow - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .mx_RoomTile2_name { - font-size: $font-14px; - line-height: $font-18px; - } - - .mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents { - font-weight: 700; - } - - .mx_RoomTile2_messagePreview { - font-size: $font-13px; - line-height: $font-18px; - color: $roomtile2-preview-color; - } - - .mx_RoomTile2_nameWithPreview { - margin-top: -4px; // shift the name up a bit more - } - } - - .mx_RoomTile2_notificationsButton { - margin-left: 4px; // spacing between buttons - } - - .mx_RoomTile2_badgeContainer { - height: 16px; - // don't set width so that it takes no space when there is no badge to show - margin: auto 0; // vertically align - - // Create a flexbox to make aligning dot badges easier - display: flex; - align-items: center; - - .mx_NotificationBadge { - margin-right: 2px; // centering - } - - .mx_NotificationBadge_dot { - // make the smaller dot occupy the same width for centering - margin-left: 5px; - margin-right: 7px; - } - } - - // The context menu buttons are hidden by default - .mx_RoomTile2_menuButton, - .mx_RoomTile2_notificationsButton { - width: 20px; - min-width: 20px; // yay flex - height: 20px; - margin-top: auto; - margin-bottom: auto; - position: relative; - display: none; - - &::before { - top: 2px; - left: 2px; - content: ''; - width: 16px; - height: 16px; - position: absolute; - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background: $primary-fg-color; - } - } - - // If the room has an overriden notification setting then we always show the notifications menu button - .mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show { - display: block; - } - - .mx_RoomTile2_menuButton::before { - mask-image: url('$(res)/img/feather-customised/more-horizontal.svg'); - } - - &:not(.mx_RoomTile2_minimized) { - &:hover, - &:focus-within, - &.mx_RoomTile2_hasMenuOpen { - // Hide the badge container on hover because it'll be a menu button - .mx_RoomTile2_badgeContainer { - width: 0; - height: 0; - display: none; - } - - .mx_RoomTile2_notificationsButton, - .mx_RoomTile2_menuButton { - display: block; - } - } - } - - &.mx_RoomTile2_minimized { - flex-direction: column; - align-items: center; - position: relative; - - .mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer { - margin-right: 0; - } - } -} - -// We use these both in context menus and the room tiles -.mx_RoomTile2_iconBell::before { - mask-image: url('$(res)/img/feather-customised/bell.svg'); -} -.mx_RoomTile2_iconBellDot::before { - mask-image: url('$(res)/img/feather-customised/bell-notification.custom.svg'); -} -.mx_RoomTile2_iconBellCrossed::before { - mask-image: url('$(res)/img/feather-customised/bell-crossed.svg'); -} -.mx_RoomTile2_iconBellMentions::before { - mask-image: url('$(res)/img/feather-customised/bell-mentions.custom.svg'); -} -.mx_RoomTile2_iconCheck::before { - mask-image: url('$(res)/img/feather-customised/check.svg'); -} - -.mx_RoomTile2_contextMenu { - .mx_RoomTile2_contextMenu_redRow { - .mx_AccessibleButton { - color: $warning-color !important; // !important to override styles from context menu - } - - .mx_IconizedContextMenu_icon::before { - background-color: $warning-color; - } - } - - .mx_RoomTile2_contextMenu_activeRow { - &.mx_AccessibleButton, .mx_AccessibleButton { - color: $accent-color !important; // !important to override styles from context menu - } - - .mx_IconizedContextMenu_icon::before { - background-color: $accent-color; - } - } - - .mx_IconizedContextMenu_icon { - position: relative; - width: 16px; - height: 16px; - - &::before { - content: ''; - width: 16px; - height: 16px; - position: absolute; - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background: $primary-fg-color; - } - } - - .mx_RoomTile2_iconStar::before { - mask-image: url('$(res)/img/feather-customised/star.svg'); - } - - .mx_RoomTile2_iconFavorite::before { - mask-image: url('$(res)/img/feather-customised/favourites.svg'); - } - - .mx_RoomTile2_iconArrowDown::before { - mask-image: url('$(res)/img/feather-customised/arrow-down.svg'); - } - - .mx_RoomTile2_iconSettings::before { - mask-image: url('$(res)/img/feather-customised/settings.svg'); - } - - .mx_RoomTile2_iconSignOut::before { - mask-image: url('$(res)/img/feather-customised/sign-out.svg'); - } -} diff --git a/res/css/views/rooms/_RoomTileIcon.scss b/res/css/views/rooms/_RoomTileIcon.scss index adc8ea2994..2f3afdd446 100644 --- a/res/css/views/rooms/_RoomTileIcon.scss +++ b/res/css/views/rooms/_RoomTileIcon.scss @@ -18,7 +18,7 @@ limitations under the License. width: 12px; height: 12px; border-radius: 12px; - background-color: $roomlist2-bg-color; // to match the room list itself + background-color: $roomlist-bg-color; // to match the room list itself } .mx_RoomTileIcon_globe::before { diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.scss index d33ecc0bb6..4bd45631cc 100644 --- a/res/css/views/rooms/_Stickers.scss +++ b/res/css/views/rooms/_Stickers.scss @@ -31,7 +31,7 @@ .mx_Stickers_addLink { display: inline; cursor: pointer; - text-decoration: underline; + color: $button-link-fg-color; } .mx_Stickers_hideStickers { diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss index 28eddf1fa2..c0545660c2 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.scss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss @@ -42,7 +42,7 @@ limitations under the License. border-radius: 19px; box-sizing: border-box; background: $primary-bg-color; - border: 1.3px solid $roomtile-name-color; + border: 1.3px solid $muted-fg-color; cursor: pointer; } @@ -54,7 +54,7 @@ limitations under the License. mask-image: url('$(res)/img/icon-jump-to-first-unread.svg'); mask-repeat: no-repeat; mask-position: 9px 13px; - background: $roomtile-name-color; + background: $muted-fg-color; } .mx_TopUnreadMessagesBar_markAsRead { @@ -62,7 +62,7 @@ limitations under the License. width: 18px; height: 18px; background: $primary-bg-color; - border: 1.3px solid $roomtile-name-color; + border: 1.3px solid $muted-fg-color; border-radius: 10px; margin: 5px auto; } @@ -76,5 +76,5 @@ limitations under the License. mask-repeat: no-repeat; mask-size: 10px; mask-position: 4px 4px; - background: $roomtile-name-color; + background: $muted-fg-color; } diff --git a/res/css/views/rooms/_UserOnlineDot.scss b/res/css/views/rooms/_UserOnlineDot.scss deleted file mode 100644 index f9da8648ed..0000000000 --- a/res/css/views/rooms/_UserOnlineDot.scss +++ /dev/null @@ -1,23 +0,0 @@ -/* -Copyright 2019 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_UserOnlineDot { - border-radius: 50%; - background-color: $accent-color; - height: 6px; - width: 6px; - display: inline-block; -} diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss index 8b135152d6..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: $eventtile-meta-color; + color: $roomtopic-color; } .mx_WhoIsTypingTile_label > span { diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.scss index 9fa10907b4..eddcf9f55a 100644 --- a/res/css/views/settings/_AvatarSetting.scss +++ b/res/css/views/settings/_AvatarSetting.scss @@ -27,28 +27,6 @@ limitations under the License. .mx_AccessibleButton.mx_AccessibleButton_kind_primary { margin-top: 8px; - - div { - position: relative; - height: 12px; - width: 12px; - display: inline; - padding-right: 6px; // 0.5 * 12px - left: -6px; // 0.5 * 12px - top: 3px; - } - - div::before { - content: ''; - position: absolute; - height: 12px; - width: 12px; - - background-color: $button-primary-fg-color; - mask-repeat: no-repeat; - mask-size: contain; - mask-image: url('$(res)/img/feather-customised/upload.svg'); - } } .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm { diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss index e13c851716..8d1b68dd99 100644 --- a/res/css/views/voip/_CallContainer.scss +++ b/res/css/views/voip/_CallContainer.scss @@ -36,12 +36,12 @@ limitations under the License. } } - .mx_IncomingCallBox2 { + .mx_IncomingCallBox { min-width: 250px; background-color: $primary-bg-color; padding: 8px; - .mx_IncomingCallBox2_CallerInfo { + .mx_IncomingCallBox_CallerInfo { display: flex; direction: row; @@ -68,12 +68,12 @@ limitations under the License. } } - .mx_IncomingCallBox2_buttons { + .mx_IncomingCallBox_buttons { padding: 8px; display: flex; flex-direction: row; - > .mx_IncomingCallBox2_spacer { + > .mx_IncomingCallBox_spacer { width: 8px; } diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 4650f30c1d..f6f3d40308 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +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. @@ -18,8 +19,76 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; cursor: pointer; - text-align: center; padding: 6px; font-weight: bold; - font-size: $font-13px; + + border-radius: 8px; + min-width: 200px; + + display: flex; + align-items: center; + + img { + margin: 4px; + margin-right: 10px; + } + + > div { + display: flex; + flex-direction: column; + // Hacky vertical align + padding-top: 3px; + } + + > div > p, + > div > h1 { + padding: 0; + margin: 0; + font-size: $font-13px; + line-height: $font-15px; + } + + > div > p { + font-weight: bold; + } + + > * { + flex-grow: 0; + flex-shrink: 0; + } +} + +.mx_CallView_hangup { + position: absolute; + + right: 8px; + bottom: 10px; + + height: 35px; + width: 35px; + + border-radius: 35px; + + background-color: $notice-primary-color; + + z-index: 101; + + cursor: pointer; + + &::before { + content: ''; + position: absolute; + + height: 20px; + width: 20px; + + top: 6.5px; + left: 7.5px; + + mask: url('$(res)/img/hangup.svg'); + mask-size: contain; + background-size: contain; + + background-color: $primary-fg-color; + } } diff --git a/res/css/views/voip/_CallView2.scss b/res/css/views/voip/_CallView2.scss deleted file mode 100644 index 3b66e7a175..0000000000 --- a/res/css/views/voip/_CallView2.scss +++ /dev/null @@ -1,96 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd -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. -*/ - -// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231 - -.mx_CallView2_voice { - background-color: $accent-color; - color: $accent-fg-color; - cursor: pointer; - padding: 6px; - font-weight: bold; - - border-radius: 8px; - min-width: 200px; - - display: flex; - align-items: center; - - img { - margin: 4px; - margin-right: 10px; - } - - > div { - display: flex; - flex-direction: column; - // Hacky vertical align - padding-top: 3px; - } - - > div > p, - > div > h1 { - padding: 0; - margin: 0; - font-size: $font-13px; - line-height: $font-15px; - } - - > div > p { - font-weight: bold; - } - - > * { - flex-grow: 0; - flex-shrink: 0; - } -} - -.mx_CallView2_hangup { - position: absolute; - - right: 8px; - bottom: 10px; - - height: 35px; - width: 35px; - - border-radius: 35px; - - background-color: $notice-primary-color; - - z-index: 101; - - cursor: pointer; - - &::before { - content: ''; - position: absolute; - - height: 20px; - width: 20px; - - top: 6.5px; - left: 7.5px; - - mask: url('$(res)/img/hangup.svg'); - mask-size: contain; - background-size: contain; - - background-color: $primary-fg-color; - } -} diff --git a/res/css/views/voip/_IncomingCallbox.scss b/res/css/views/voip/_IncomingCallbox.scss deleted file mode 100644 index ed33de470d..0000000000 --- a/res/css/views/voip/_IncomingCallbox.scss +++ /dev/null @@ -1,69 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd - -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_IncomingCallBox { - text-align: center; - border: 1px solid #a4a4a4; - border-radius: 8px; - background-color: $primary-bg-color; - position: fixed; - z-index: 1000; - padding: 6px; - margin-top: -3px; - margin-left: -20px; - width: 200px; -} - -.mx_IncomingCallBox_chevron { - padding: 12px; - position: absolute; - left: -21px; - top: 0px; -} - -.mx_IncomingCallBox_title { - padding: 6px; - font-weight: bold; -} - -.mx_IncomingCallBox_buttons { - display: flex; -} - -.mx_IncomingCallBox_buttons_cell { - vertical-align: middle; - padding: 6px; - flex: 1; -} - -.mx_IncomingCallBox_buttons_decline, -.mx_IncomingCallBox_buttons_accept { - vertical-align: middle; - width: 80px; - height: 36px; - line-height: $font-36px; - border-radius: 36px; - color: $accent-fg-color; - margin: auto; -} - -.mx_IncomingCallBox_buttons_decline { - background-color: $voip-decline-color; -} - -.mx_IncomingCallBox_buttons_accept { - background-color: $voip-accept-color; -} diff --git a/res/fonts/Inter/Inter-Bold.woff b/res/fonts/Inter/Inter-Bold.woff new file mode 100644 index 0000000000..61e1c25e64 Binary files /dev/null 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 new file mode 100644 index 0000000000..6c401bb09b Binary files /dev/null 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 new file mode 100644 index 0000000000..2de403edd1 Binary files /dev/null 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 new file mode 100644 index 0000000000..80efd4848d Binary files /dev/null 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 new file mode 100644 index 0000000000..e7da6663fe Binary files /dev/null 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 new file mode 100644 index 0000000000..8559dfde38 Binary files /dev/null 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 new file mode 100644 index 0000000000..8c36a6345e Binary files /dev/null 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 new file mode 100644 index 0000000000..3b31d3350a Binary files /dev/null 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 new file mode 100644 index 0000000000..fb79e91ff4 Binary files /dev/null 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 new file mode 100644 index 0000000000..d32c111f9c Binary files /dev/null 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 new file mode 100644 index 0000000000..7d587c40bf Binary files /dev/null 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 new file mode 100644 index 0000000000..d5ffd2a1f1 Binary files /dev/null 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 new file mode 100644 index 0000000000..99df06cbee Binary files /dev/null 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 new file mode 100644 index 0000000000..df746af999 Binary files /dev/null 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 new file mode 100644 index 0000000000..91e192b9f1 Binary files /dev/null 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 new file mode 100644 index 0000000000..ff8774ccb4 Binary files /dev/null and b/res/fonts/Inter/Inter-SemiBoldItalic.woff2 differ diff --git a/res/img/e2e/normal.svg b/res/img/e2e/normal.svg index 5b848bc27f..23ca78e44d 100644 --- a/res/img/e2e/normal.svg +++ b/res/img/e2e/normal.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/e2e/verified.svg b/res/img/e2e/verified.svg index 464b443dcf..ac4827baed 100644 --- a/res/img/e2e/verified.svg +++ b/res/img/e2e/verified.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/res/img/e2e/warning.svg b/res/img/e2e/warning.svg index 209ae0f71f..d42922892a 100644 --- a/res/img/e2e/warning.svg +++ b/res/img/e2e/warning.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/res/img/element-icons/call/fullscreen.svg b/res/img/element-icons/call/fullscreen.svg new file mode 100644 index 0000000000..d2a4c2aa8c --- /dev/null +++ b/res/img/element-icons/call/fullscreen.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/res/img/element-icons/call/hangup.svg b/res/img/element-icons/call/hangup.svg new file mode 100644 index 0000000000..1a1b82a1d7 --- /dev/null +++ b/res/img/element-icons/call/hangup.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/call/video-call.svg b/res/img/element-icons/call/video-call.svg new file mode 100644 index 0000000000..0c1cd2d419 --- /dev/null +++ b/res/img/element-icons/call/video-call.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/call/video-muted.svg b/res/img/element-icons/call/video-muted.svg new file mode 100644 index 0000000000..d2aea71d11 --- /dev/null +++ b/res/img/element-icons/call/video-muted.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/element-icons/call/voice-call.svg b/res/img/element-icons/call/voice-call.svg new file mode 100644 index 0000000000..d32b703523 --- /dev/null +++ b/res/img/element-icons/call/voice-call.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/call/voice-muted.svg b/res/img/element-icons/call/voice-muted.svg new file mode 100644 index 0000000000..32abafb04a --- /dev/null +++ b/res/img/element-icons/call/voice-muted.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/call/voice-unmuted.svg b/res/img/element-icons/call/voice-unmuted.svg new file mode 100644 index 0000000000..e664080217 --- /dev/null +++ b/res/img/element-icons/call/voice-unmuted.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/community-members.svg b/res/img/element-icons/community-members.svg new file mode 100644 index 0000000000..553ba3b1af --- /dev/null +++ b/res/img/element-icons/community-members.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/res/img/element-icons/community-rooms.svg b/res/img/element-icons/community-rooms.svg new file mode 100644 index 0000000000..570b45a488 --- /dev/null +++ b/res/img/element-icons/community-rooms.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/context-menu.svg b/res/img/element-icons/context-menu.svg new file mode 100644 index 0000000000..76a28d50d0 --- /dev/null +++ b/res/img/element-icons/context-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/element-icons/hide.svg b/res/img/element-icons/hide.svg new file mode 100644 index 0000000000..8ea50a028f --- /dev/null +++ b/res/img/element-icons/hide.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/element-icons/leave.svg b/res/img/element-icons/leave.svg new file mode 100644 index 0000000000..773e27d4ce --- /dev/null +++ b/res/img/element-icons/leave.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/element-icons/notifications.svg b/res/img/element-icons/notifications.svg new file mode 100644 index 0000000000..7002782129 --- /dev/null +++ b/res/img/element-icons/notifications.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/element-icons/room/composer/attach.svg b/res/img/element-icons/room/composer/attach.svg new file mode 100644 index 0000000000..0cac44d29f --- /dev/null +++ b/res/img/element-icons/room/composer/attach.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/composer/emoji.svg b/res/img/element-icons/room/composer/emoji.svg new file mode 100644 index 0000000000..9613d9edd9 --- /dev/null +++ b/res/img/element-icons/room/composer/emoji.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/element-icons/room/composer/send.svg b/res/img/element-icons/room/composer/send.svg new file mode 100644 index 0000000000..b255a9b23b --- /dev/null +++ b/res/img/element-icons/room/composer/send.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/composer/sticker.svg b/res/img/element-icons/room/composer/sticker.svg new file mode 100644 index 0000000000..3d8f445926 --- /dev/null +++ b/res/img/element-icons/room/composer/sticker.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/element-icons/room/files.svg b/res/img/element-icons/room/files.svg new file mode 100644 index 0000000000..6648ab00a5 --- /dev/null +++ b/res/img/element-icons/room/files.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/format-bar/bold.svg b/res/img/element-icons/room/format-bar/bold.svg new file mode 100644 index 0000000000..e21210c525 --- /dev/null +++ b/res/img/element-icons/room/format-bar/bold.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/element-icons/room/format-bar/code.svg b/res/img/element-icons/room/format-bar/code.svg new file mode 100644 index 0000000000..38f94457e8 --- /dev/null +++ b/res/img/element-icons/room/format-bar/code.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/element-icons/room/format-bar/italic.svg b/res/img/element-icons/room/format-bar/italic.svg new file mode 100644 index 0000000000..270c4f5f15 --- /dev/null +++ b/res/img/element-icons/room/format-bar/italic.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/element-icons/room/format-bar/quote.svg b/res/img/element-icons/room/format-bar/quote.svg new file mode 100644 index 0000000000..3d3d444487 --- /dev/null +++ b/res/img/element-icons/room/format-bar/quote.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/res/img/element-icons/room/format-bar/strikethrough.svg b/res/img/element-icons/room/format-bar/strikethrough.svg new file mode 100644 index 0000000000..775e0cf8ec --- /dev/null +++ b/res/img/element-icons/room/format-bar/strikethrough.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/room/in-call.svg b/res/img/element-icons/room/in-call.svg new file mode 100644 index 0000000000..0e574faa84 --- /dev/null +++ b/res/img/element-icons/room/in-call.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/res/img/element-icons/room/integrations.svg b/res/img/element-icons/room/integrations.svg new file mode 100644 index 0000000000..3a39506411 --- /dev/null +++ b/res/img/element-icons/room/integrations.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/invite.svg b/res/img/element-icons/room/invite.svg new file mode 100644 index 0000000000..f713e57d73 --- /dev/null +++ b/res/img/element-icons/room/invite.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/members.svg b/res/img/element-icons/room/members.svg new file mode 100644 index 0000000000..03aba81ad4 --- /dev/null +++ b/res/img/element-icons/room/members.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/element-icons/room/message-bar/edit.svg b/res/img/element-icons/room/message-bar/edit.svg new file mode 100644 index 0000000000..d4a7e8eaaf --- /dev/null +++ b/res/img/element-icons/room/message-bar/edit.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/room/message-bar/emoji.svg b/res/img/element-icons/room/message-bar/emoji.svg new file mode 100644 index 0000000000..697f656b8a --- /dev/null +++ b/res/img/element-icons/room/message-bar/emoji.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/element-icons/room/message-bar/reply.svg b/res/img/element-icons/room/message-bar/reply.svg new file mode 100644 index 0000000000..9900d4d19d --- /dev/null +++ b/res/img/element-icons/room/message-bar/reply.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/room/pin.svg b/res/img/element-icons/room/pin.svg new file mode 100644 index 0000000000..16941b329b --- /dev/null +++ b/res/img/element-icons/room/pin.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/element-icons/room/search-inset.svg b/res/img/element-icons/room/search-inset.svg new file mode 100644 index 0000000000..699cdd1d00 --- /dev/null +++ b/res/img/element-icons/room/search-inset.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/settings/advanced.svg b/res/img/element-icons/room/settings/advanced.svg new file mode 100644 index 0000000000..734ae543ea --- /dev/null +++ b/res/img/element-icons/room/settings/advanced.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/settings/roles.svg b/res/img/element-icons/room/settings/roles.svg new file mode 100644 index 0000000000..24bccf78f4 --- /dev/null +++ b/res/img/element-icons/room/settings/roles.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/share.svg b/res/img/element-icons/room/share.svg new file mode 100644 index 0000000000..dac35ae5a7 --- /dev/null +++ b/res/img/element-icons/room/share.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/roomlist/archived.svg b/res/img/element-icons/roomlist/archived.svg new file mode 100644 index 0000000000..4d30195082 --- /dev/null +++ b/res/img/element-icons/roomlist/archived.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/roomlist/checkmark.svg b/res/img/element-icons/roomlist/checkmark.svg new file mode 100644 index 0000000000..3be39fc9b2 --- /dev/null +++ b/res/img/element-icons/roomlist/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/roomlist/clear-input.svg b/res/img/element-icons/roomlist/clear-input.svg new file mode 100644 index 0000000000..29fc097600 --- /dev/null +++ b/res/img/element-icons/roomlist/clear-input.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/roomlist/dark-light-mode.svg b/res/img/element-icons/roomlist/dark-light-mode.svg new file mode 100644 index 0000000000..a6a6464b5c --- /dev/null +++ b/res/img/element-icons/roomlist/dark-light-mode.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/roomlist/direct-chat.svg b/res/img/element-icons/roomlist/direct-chat.svg new file mode 100644 index 0000000000..4b92dd9521 --- /dev/null +++ b/res/img/element-icons/roomlist/direct-chat.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/element-icons/roomlist/e2ee-default.svg b/res/img/element-icons/roomlist/e2ee-default.svg new file mode 100644 index 0000000000..76525f48b2 --- /dev/null +++ b/res/img/element-icons/roomlist/e2ee-default.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/roomlist/e2ee-error.svg b/res/img/element-icons/roomlist/e2ee-error.svg new file mode 100644 index 0000000000..7f1a761dde --- /dev/null +++ b/res/img/element-icons/roomlist/e2ee-error.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/element-icons/roomlist/e2ee-none.svg b/res/img/element-icons/roomlist/e2ee-none.svg new file mode 100644 index 0000000000..cfafe6d09d --- /dev/null +++ b/res/img/element-icons/roomlist/e2ee-none.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/element-icons/roomlist/e2ee-trusted.svg b/res/img/element-icons/roomlist/e2ee-trusted.svg new file mode 100644 index 0000000000..577d6a31e1 --- /dev/null +++ b/res/img/element-icons/roomlist/e2ee-trusted.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/roomlist/explore-rooms.svg b/res/img/element-icons/roomlist/explore-rooms.svg new file mode 100644 index 0000000000..3786ce1153 --- /dev/null +++ b/res/img/element-icons/roomlist/explore-rooms.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/roomlist/favorite.svg b/res/img/element-icons/roomlist/favorite.svg new file mode 100644 index 0000000000..0c33999ea3 --- /dev/null +++ b/res/img/element-icons/roomlist/favorite.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/roomlist/feedback.svg b/res/img/element-icons/roomlist/feedback.svg new file mode 100644 index 0000000000..c15edd709a --- /dev/null +++ b/res/img/element-icons/roomlist/feedback.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/element-icons/roomlist/home.svg b/res/img/element-icons/roomlist/home.svg new file mode 100644 index 0000000000..9598ccf184 --- /dev/null +++ b/res/img/element-icons/roomlist/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/roomlist/low-priority.svg b/res/img/element-icons/roomlist/low-priority.svg new file mode 100644 index 0000000000..832501527b --- /dev/null +++ b/res/img/element-icons/roomlist/low-priority.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/roomlist/notifications-default.svg b/res/img/element-icons/roomlist/notifications-default.svg new file mode 100644 index 0000000000..59743f5d67 --- /dev/null +++ b/res/img/element-icons/roomlist/notifications-default.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/element-icons/roomlist/notifications-dm.svg b/res/img/element-icons/roomlist/notifications-dm.svg new file mode 100644 index 0000000000..e0bd435240 --- /dev/null +++ b/res/img/element-icons/roomlist/notifications-dm.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/roomlist/notifications-off.svg b/res/img/element-icons/roomlist/notifications-off.svg new file mode 100644 index 0000000000..c848471f63 --- /dev/null +++ b/res/img/element-icons/roomlist/notifications-off.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/element-icons/roomlist/search.svg b/res/img/element-icons/roomlist/search.svg new file mode 100644 index 0000000000..3786ce1153 --- /dev/null +++ b/res/img/element-icons/roomlist/search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/security.svg b/res/img/element-icons/security.svg new file mode 100644 index 0000000000..3fe62b7af9 --- /dev/null +++ b/res/img/element-icons/security.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/settings.svg b/res/img/element-icons/settings.svg new file mode 100644 index 0000000000..05d640df27 --- /dev/null +++ b/res/img/element-icons/settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/settings/appearance.svg b/res/img/element-icons/settings/appearance.svg new file mode 100644 index 0000000000..6f91759354 --- /dev/null +++ b/res/img/element-icons/settings/appearance.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/settings/flair.svg b/res/img/element-icons/settings/flair.svg new file mode 100644 index 0000000000..e1ae44f386 --- /dev/null +++ b/res/img/element-icons/settings/flair.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/settings/help.svg b/res/img/element-icons/settings/help.svg new file mode 100644 index 0000000000..2ac4f675ec --- /dev/null +++ b/res/img/element-icons/settings/help.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/settings/lab-flags.svg b/res/img/element-icons/settings/lab-flags.svg new file mode 100644 index 0000000000..b96aa17d26 --- /dev/null +++ b/res/img/element-icons/settings/lab-flags.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/settings/preference.svg b/res/img/element-icons/settings/preference.svg new file mode 100644 index 0000000000..d466662117 --- /dev/null +++ b/res/img/element-icons/settings/preference.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/view-community.svg b/res/img/element-icons/view-community.svg new file mode 100644 index 0000000000..ee33aa525e --- /dev/null +++ b/res/img/element-icons/view-community.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/res/img/element-logo.svg b/res/img/element-logo.svg new file mode 100644 index 0000000000..2cd11ed193 --- /dev/null +++ b/res/img/element-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/res/img/ems-logo.svg b/res/img/ems-logo.svg new file mode 100644 index 0000000000..5ad29173cb --- /dev/null +++ b/res/img/ems-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/res/img/modular-bw-logo.svg b/res/img/modular-bw-logo.svg deleted file mode 100644 index 924a587805..0000000000 --- a/res/img/modular-bw-logo.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/res/img/riot-logo.svg b/res/img/riot-logo.svg new file mode 100644 index 0000000000..ac1e547234 --- /dev/null +++ b/res/img/riot-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/res/img/spinner.svg b/res/img/spinner.svg index a18140c7e2..08965e982e 100644 --- a/res/img/spinner.svg +++ b/res/img/spinner.svg @@ -1,3 +1,141 @@ - - - \ No newline at end of file + + + start + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/themes/dark-custom/css/dark-custom.scss b/res/themes/dark-custom/css/dark-custom.scss index 03ceef45c6..a5fed6a320 100644 --- a/res/themes/dark-custom/css/dark-custom.scss +++ b/res/themes/dark-custom/css/dark-custom.scss @@ -1,7 +1,7 @@ @import "../../../../res/css/_font-sizes.scss"; -@import "../../light/css/_paths.scss"; -@import "../../light/css/_fonts.scss"; -@import "../../light/css/_light.scss"; -@import "../../dark/css/_dark.scss"; +@import "../../legacy-light/css/_paths.scss"; +@import "../../legacy-light/css/_fonts.scss"; +@import "../../legacy-light/css/_legacy-light.scss"; +@import "../../legacy-dark/css/_legacy-dark.scss"; @import "../../light-custom/css/_custom.scss"; @import "../../../../res/css/_components.scss"; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 1546e7a400..15155ba854 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -1,14 +1,14 @@ // unified palette // try to use these colors when possible -$bg-color: #181b21; -$base-color: #15171b; -$base-text-color: #edf3ff; -$header-panel-bg-color: #22262e; +$bg-color: #15191E; +$base-color: $bg-color; +$base-text-color: #ffffff; +$header-panel-bg-color: #20252B; $header-panel-border-color: #000000; -$header-panel-text-primary-color: #a1b2d1; +$header-panel-text-primary-color: #B9BEC6; $header-panel-text-secondary-color: #c8c8cd; -$text-primary-color: #edf3ff; -$text-secondary-color: #a1b2d1; +$text-primary-color: #ffffff; +$text-secondary-color: #B9BEC6; $search-bg-color: #181b21; $search-placeholder-color: #61708b; $room-highlight-color: #343a46; @@ -35,7 +35,8 @@ $info-plinth-fg-color: #888; $preview-bar-bg-color: $header-panel-bg-color; -$tagpanel-bg-color: $base-color; +$tagpanel-bg-color: rgba(38, 39, 43, 0.82); +$inverted-bg-color: $base-color; // used by AddressSelector $selected-color: $room-highlight-color; @@ -44,10 +45,10 @@ $selected-color: $room-highlight-color; $event-selected-color: $header-panel-bg-color; // used for the hairline dividers in RoomView -$primary-hairline-color: $header-panel-border-color; +$primary-hairline-color: transparent; // used for the border of input text fields -$input-border-color: #e7e7e7; +$input-border-color: rgba(231, 231, 231, 0.2); $input-darker-bg-color: $search-bg-color; $input-darker-fg-color: $search-placeholder-color; $input-lighter-bg-color: #f2f5f8; @@ -91,7 +92,8 @@ $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; $roomheader-color: $text-primary-color; -$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity +$roomheader-bg-color: $bg-color; +$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3); $roomheader-addroom-fg-color: $text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color; $roomheader-button-color: $header-panel-text-primary-color; @@ -102,34 +104,26 @@ $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; $header-divider-color: $header-panel-text-primary-color; +$composer-e2e-icon-color: $header-panel-text-primary-color; // ******************** -// V2 Room List -// TODO: Remove the 2 from all of these when the new list takes over - $theme-button-bg-color: #e3e8f0; -$roomlist2-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons -$roomlist2-bg-color: $header-panel-bg-color; +$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons +$roomlist-bg-color: rgba(33, 38, 44, 0.90); +$roomlist-header-color: #8E99A4; +$roomsublist-divider-color: $primary-fg-color; -$roomsublist2-divider-color: $primary-fg-color; - -$roomtile2-preview-color: #9e9e9e; -$roomtile2-default-badge-bg-color: #61708b; -$roomtile2-selected-bg-color: #1A1D23; +$roomtile-preview-color: #A9B2BC; +$roomtile-default-badge-bg-color: #61708b; +$roomtile-selected-bg-color: rgba(141, 151, 165, 0.2); // ******************** -$roomtile-name-color: $header-panel-text-primary-color; -$roomtile-selected-color: $text-primary-color; -$roomtile-notified-color: $text-primary-color; -$roomtile-selected-bg-color: $room-highlight-color; -$roomtile-focused-bg-color: $room-highlight-color; +$notice-secondary-color: $roomlist-header-color; -$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); - -$panel-divider-color: $header-panel-border-color; +$panel-divider-color: transparent; $widget-menu-bar-bg-color: $header-panel-bg-color; @@ -201,6 +195,12 @@ $user-tile-hover-bg-color: $header-panel-bg-color; // Appearance tab colors $appearance-tab-border-color: $room-highlight-color; +// blur amounts for left left panel (only for element theme, used in _mods.scss) +$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/dark/css/dark.scss b/res/themes/dark/css/dark.scss index d81db4595f..6d9dc7352c 100644 --- a/res/themes/dark/css/dark.scss +++ b/res/themes/dark/css/dark.scss @@ -2,5 +2,10 @@ @import "../../light/css/_paths.scss"; @import "../../light/css/_fonts.scss"; @import "../../light/css/_light.scss"; +// important this goes before _mods, +// as $tagpanel-background-blur-amount and +// $roomlist-background-blur-amount +// are overridden in _dark.scss @import "_dark.scss"; +@import "../../light/css/_mods.scss"; @import "../../../../res/css/_components.scss"; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss new file mode 100644 index 0000000000..7ecfcf13d9 --- /dev/null +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -0,0 +1,273 @@ +// unified palette +// try to use these colors when possible +$bg-color: #181b21; +$base-color: #15171b; +$base-text-color: #edf3ff; +$header-panel-bg-color: #22262e; +$header-panel-border-color: #000000; +$header-panel-text-primary-color: #a1b2d1; +$header-panel-text-secondary-color: #c8c8cd; +$text-primary-color: #edf3ff; +$text-secondary-color: #a1b2d1; +$search-bg-color: #181b21; +$search-placeholder-color: #61708b; +$room-highlight-color: #343a46; + +// typical text (dark-on-white in light skin) +$primary-fg-color: $text-primary-color; +$primary-bg-color: $bg-color; +$muted-fg-color: $header-panel-text-primary-color; + +// used for dialog box text +$light-fg-color: $header-panel-text-secondary-color; + +// used for focusing form controls +$focus-bg-color: $room-highlight-color; + +$mention-user-pill-bg-color: $warning-color; +$other-user-pill-bg-color: $room-highlight-color; +$rte-room-pill-color: $room-highlight-color; +$rte-group-pill-color: $room-highlight-color; + +// informational plinth +$info-plinth-bg-color: $header-panel-bg-color; +$info-plinth-fg-color: #888; + +$preview-bar-bg-color: $header-panel-bg-color; + +$tagpanel-bg-color: $base-color; +$inverted-bg-color: $tagpanel-bg-color; + +// used by AddressSelector +$selected-color: $room-highlight-color; + +// selected for hoverover & selected event tiles +$event-selected-color: $header-panel-bg-color; + +// used for the hairline dividers in RoomView +$primary-hairline-color: $header-panel-border-color; + +// used for the border of input text fields +$input-border-color: #e7e7e7; +$input-darker-bg-color: $search-bg-color; +$input-darker-fg-color: $search-placeholder-color; +$input-lighter-bg-color: #f2f5f8; +$input-lighter-fg-color: $input-darker-fg-color; +$input-focused-border-color: #238cf5; +$input-valid-border-color: $accent-color; +$input-invalid-border-color: $warning-color; + +$field-focused-label-bg-color: $bg-color; + +// scrollbars +$scrollbar-thumb-color: rgba(255, 255, 255, 0.2); +$scrollbar-track-color: transparent; + +// context menus +$menu-border-color: $header-panel-border-color; +$menu-bg-color: $header-panel-bg-color; +$menu-box-shadow-color: $bg-color; +$menu-selected-color: $room-highlight-color; + +$avatar-initial-color: #ffffff; +$avatar-bg-color: $bg-color; + +$h3-color: $primary-fg-color; + +$dialog-title-fg-color: $base-text-color; +$dialog-backdrop-color: #000; +$dialog-shadow-color: rgba(0, 0, 0, 0.48); +$dialog-close-fg-color: #9fa9ba; + +$dialog-background-bg-color: $header-panel-bg-color; +$lightbox-background-bg-color: #000; + +$settings-grey-fg-color: #a2a2a2; +$settings-profile-placeholder-bg-color: #e7e7e7; +$settings-profile-overlay-bg-color: #000; +$settings-profile-overlay-placeholder-bg-color: transparent; +$settings-profile-overlay-fg-color: #fff; +$settings-profile-overlay-placeholder-fg-color: #454545; +$settings-subsection-fg-color: $text-secondary-color; + +$topleftmenu-color: $text-primary-color; +$roomheader-color: $text-primary-color; +$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity +$roomheader-addroom-fg-color: $text-primary-color; +$tagpanel-button-color: $header-panel-text-primary-color; +$roomheader-button-color: $header-panel-text-primary-color; +$groupheader-button-color: $header-panel-text-primary-color; +$rightpanel-button-color: $header-panel-text-primary-color; +$composer-button-color: $header-panel-text-primary-color; +$roomtopic-color: $text-secondary-color; +$eventtile-meta-color: $roomtopic-color; + +$header-divider-color: $header-panel-text-primary-color; +$composer-e2e-icon-color: $header-panel-text-primary-color; + +// ******************** + +$theme-button-bg-color: #e3e8f0; + +$roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons +$roomlist-bg-color: $header-panel-bg-color; + +$roomsublist-divider-color: $primary-fg-color; + +$roomtile-preview-color: #9e9e9e; +$roomtile-default-badge-bg-color: #61708b; +$roomtile-selected-bg-color: #1A1D23; + +// ******************** + +$panel-divider-color: $header-panel-border-color; + +$widget-menu-bar-bg-color: $header-panel-bg-color; + +// event tile lifecycle +$event-sending-color: $text-secondary-color; + +// event redaction +$event-redacted-fg-color: #606060; +$event-redacted-border-color: #000000; + +$event-highlight-fg-color: $warning-color; +$event-highlight-bg-color: #25271F; + +// event timestamp +$event-timestamp-color: $text-secondary-color; + +// Tabbed views +$tab-label-fg-color: $text-primary-color; +$tab-label-active-fg-color: $text-primary-color; +$tab-label-bg-color: transparent; +$tab-label-active-bg-color: $accent-color; +$tab-label-icon-bg-color: $text-primary-color; +$tab-label-active-icon-bg-color: $text-primary-color; + +// Buttons +$button-primary-fg-color: #ffffff; +$button-primary-bg-color: $accent-color; +$button-secondary-bg-color: transparent; +$button-danger-fg-color: #ffffff; +$button-danger-bg-color: $notice-primary-color; +$button-danger-disabled-fg-color: #ffffff; +$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color +$button-link-fg-color: $accent-color; +$button-link-bg-color: transparent; + +// Toggle switch +$togglesw-off-color: $room-highlight-color; + +$visual-bell-bg-color: #800; + +$room-warning-bg-color: $header-panel-bg-color; + +$dark-panel-bg-color: $header-panel-bg-color; +$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); + +$message-action-bar-bg-color: $header-panel-bg-color; +$message-action-bar-fg-color: $header-panel-text-primary-color; +$message-action-bar-border-color: #616b7f; +$message-action-bar-hover-border-color: $header-panel-text-primary-color; + +$reaction-row-button-bg-color: $header-panel-bg-color; +$reaction-row-button-border-color: #616b7f; +$reaction-row-button-hover-border-color: $header-panel-text-primary-color; +$reaction-row-button-selected-bg-color: #1f6954; +$reaction-row-button-selected-border-color: $accent-color; + +$kbd-border-color: #000000; + +$tooltip-timeline-bg-color: $tagpanel-bg-color; +$tooltip-timeline-fg-color: #ffffff; + +$interactive-tooltip-bg-color: $base-color; +$interactive-tooltip-fg-color: #ffffff; + +$breadcrumb-placeholder-bg-color: #272c35; + +$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 { + /* align images in buttons (eg spinners) */ + vertical-align: middle; + border: 0px; + border-radius: 4px; + font-family: $font-family; + font-size: $font-14px; + color: $button-fg-color; + background-color: $button-bg-color; + width: auto; + padding: 7px; + padding-left: 1.5em; + padding-right: 1.5em; + cursor: pointer; + display: inline-block; + outline: none; +} + +@define-mixin mx_DialogButton_danger { + background-color: $accent-color; +} + +@define-mixin mx_DialogButton_secondary { + // flip colours for the secondary ones + font-weight: 600; + border: 1px solid $accent-color ! important; + color: $accent-color; + background-color: $button-secondary-bg-color; +} + +@define-mixin mx_Dialog_link { + color: $accent-color; + text-decoration: none; +} + +// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it +// better match the theme. Typically applied to dark grey 'off' buttons or +// light grey 'on' buttons. +.mx_filterFlipColor { + filter: invert(1); +} + +// markdown overrides: +.mx_EventTile_content .markdown-body pre:hover { + border-color: #808080 !important; // inverted due to rules below +} +.mx_EventTile_content .markdown-body { + pre, code { + filter: invert(1); + } + + pre code { + filter: none; + } + + table { + tr { + background-color: #000000; + } + + tr:nth-child(2n) { + background-color: #080808; + } + } +} + +// diff highlight colors +// intentionally swapped to avoid inversion +.hljs-addition { + background: #fdd; +} + +.hljs-deletion { + background: #dfd; +} diff --git a/res/themes/legacy-dark/css/legacy-dark.scss b/res/themes/legacy-dark/css/legacy-dark.scss new file mode 100644 index 0000000000..2a4d432d26 --- /dev/null +++ b/res/themes/legacy-dark/css/legacy-dark.scss @@ -0,0 +1,6 @@ +@import "../../../../res/css/_font-sizes.scss"; +@import "../../legacy-light/css/_paths.scss"; +@import "../../legacy-light/css/_fonts.scss"; +@import "../../legacy-light/css/_legacy-light.scss"; +@import "_legacy-dark.scss"; +@import "../../../../res/css/_components.scss"; diff --git a/res/themes/legacy-light/css/_fonts.scss b/res/themes/legacy-light/css/_fonts.scss new file mode 100644 index 0000000000..1bc9b5a4a3 --- /dev/null +++ b/res/themes/legacy-light/css/_fonts.scss @@ -0,0 +1,84 @@ +/* + * Nunito. + * Includes extended Latin and Vietnamese character sets + * Current URLs are taken from + * https://github.com/alexeiva/NunitoFont/releases/tag/v3.500 + * ...in order to include cyrillic. + * + * Previously, they were + * https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&subset=latin-ext,vietnamese + * + * We explicitly do not include Nunito's italic variants, as they are not italic enough + * and it's better to rely on the browser's built-in obliquing behaviour. + */ + +/* the 'src' links are relative to the bundle.css, which is in a subdirectory. + */ +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 400; + src: url('$(res)/fonts/Nunito/Nunito-Regular.ttf') format('truetype'); +} +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 600; + src: url('$(res)/fonts/Nunito/Nunito-SemiBold.ttf') format('truetype'); +} +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 700; + src: url('$(res)/fonts/Nunito/Nunito-Bold.ttf') format('truetype'); +} + +/* latin-ext */ +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 400; + src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url('$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url('$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin-ext */ +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url('$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url('$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* a COLR/CPAL version of Twemoji used for consistent cross-browser emoji + * taken from https://github.com/mozilla/twemoji-colr + * using the fix from https://github.com/mozilla/twemoji-colr/issues/50 to + * work on macOS + */ +/* +// except we now load it dynamically via FontManager to handle browsers +// which can't render COLR/CPAL still +@font-face { + font-family: "Twemoji Mozilla"; + src: url('$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla.woff2') format('woff2'); +} +*/ \ No newline at end of file diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss new file mode 100644 index 0000000000..3465aa307e --- /dev/null +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -0,0 +1,372 @@ +// XXX: check this? +/* Nunito lacks combining diacritics, so these will fall through + to the next font. Helevetica's diacritics however do not combine + nicely (on OSX, at least) and result in a huge horizontal mess. + Arial empirically gets it right, hence prioritising Arial here. */ +/* We fall through to Twemoji for emoji rather than falling through + to native Emoji fonts (if any) to ensure cross-browser consistency */ +/* Noto Color Emoji contains digits, in fixed-width, therefore causing + digits in flowed text to stand out. + TODO: Consider putting all emoji fonts to the end rather than the front. */ +$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji'; + +$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji'; + +// unified palette +// try to use these colors when possible +$accent-color: #03b381; +$accent-bg-color: rgba(3, 179, 129, 0.16); +$notice-primary-color: #ff4b55; +$notice-primary-bg-color: rgba(255, 75, 85, 0.16); +$notice-secondary-color: #61708b; +$header-panel-bg-color: #f3f8fd; + +// typical text (dark-on-white in light skin) +$primary-fg-color: #2e2f32; +$primary-bg-color: #ffffff; +$muted-fg-color: #61708b; // Commonly used in headings and relevant alt text + +// used for dialog box text +$light-fg-color: #747474; + +// used for focusing form controls +$focus-bg-color: #dddddd; + +// button UI (white-on-green in light skin) +$accent-fg-color: #ffffff; +$accent-color-50pct: rgba(3, 179, 129, 0.5); //#03b381 in rgb +$accent-color-darker: #92caad; +$accent-color-alt: #238cf5; + +$selection-fg-color: $primary-bg-color; + +$focus-brightness: 105%; + +// warning colours +$warning-color: $notice-primary-color; // red +$orange-warning-color: #ff8d13; // used for true warnings +// background colour for warnings +$warning-bg-color: #df2a8b; +$info-bg-color: #2a9edf; +$mention-user-pill-bg-color: $warning-color; +$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); + +// pinned events indicator +$pinned-unread-color: $notice-primary-color; +$pinned-color: $notice-secondary-color; + +// informational plinth +$info-plinth-bg-color: #f7f7f7; +$info-plinth-fg-color: #888; + +$preview-bar-bg-color: #f7f7f7; + +// left-panel style muted accent color +$secondary-accent-color: #f2f5f8; +$tertiary-accent-color: #d3efe1; + +$tagpanel-bg-color: #27303a; +$inverted-bg-color: $tagpanel-bg-color; + +// used by RoomDirectory permissions +$plinth-bg-color: $secondary-accent-color; + +// used by RoomDropTarget +$droptarget-bg-color: rgba(255, 255, 255, 0.5); + +// used by AddressSelector +$selected-color: $secondary-accent-color; + +// selected for hoverover & selected event tiles +$event-selected-color: $header-panel-bg-color; + +// used for the hairline dividers in RoomView +$primary-hairline-color: #e5e5e5; + +// used for the border of input text fields +$input-border-color: #e7e7e7; +$input-darker-bg-color: #e3e8f0; +$input-darker-fg-color: #9fa9ba; +$input-lighter-bg-color: #f2f5f8; +$input-lighter-fg-color: $input-darker-fg-color; +$input-focused-border-color: #238cf5; +$input-valid-border-color: $accent-color; +$input-invalid-border-color: $warning-color; + +$field-focused-label-bg-color: #ffffff; + +$button-bg-color: $accent-color; +$button-fg-color: white; + +// apart from login forms, which have stronger border +$strong-input-border-color: #c7c7c7; + +// used for UserSettings EditableText +$input-underline-color: rgba(151, 151, 151, 0.5); +$input-fg-color: rgba(74, 74, 74, 0.9); +// scrollbars +$scrollbar-thumb-color: rgba(0, 0, 0, 0.2); +$scrollbar-track-color: transparent; +// context menus +$menu-border-color: #e7e7e7; +$menu-bg-color: #fff; +$menu-box-shadow-color: rgba(118, 131, 156, 0.6); +$menu-selected-color: #f5f8fa; + +$avatar-initial-color: #ffffff; +$avatar-bg-color: #ffffff; + +$h3-color: #3d3b39; + +$dialog-title-fg-color: #45474a; +$dialog-backdrop-color: rgba(46, 48, 51, 0.38); +$dialog-shadow-color: rgba(0, 0, 0, 0.48); +$dialog-close-fg-color: #c1c1c1; + +$dialog-background-bg-color: #e9e9e9; +$lightbox-background-bg-color: #000; + +$imagebody-giflabel: rgba(0, 0, 0, 0.7); +$imagebody-giflabel-border: rgba(0, 0, 0, 0.2); +$imagebody-giflabel-color: rgba(255, 255, 255, 1); + +$greyed-fg-color: #888; + +$neutral-badge-color: #dbdbdb; + +$preview-widget-bar-color: #ddd; +$preview-widget-fg-color: $greyed-fg-color; + +$blockquote-bar-color: #ddd; +$blockquote-fg-color: #777; + +$settings-grey-fg-color: #a2a2a2; +$settings-profile-placeholder-bg-color: #e7e7e7; +$settings-profile-overlay-bg-color: #000; +$settings-profile-overlay-placeholder-bg-color: transparent; +$settings-profile-overlay-fg-color: #fff; +$settings-profile-overlay-placeholder-fg-color: #2e2f32; +$settings-subsection-fg-color: #61708b; + +$voip-decline-color: #f48080; +$voip-accept-color: #80f480; + +$rte-bg-color: #e9e9e9; +$rte-code-bg-color: rgba(0, 0, 0, 0.04); +$rte-room-pill-color: #aaa; +$rte-group-pill-color: #aaa; + +$topleftmenu-color: #212121; +$roomheader-color: #45474a; +$roomheader-bg-color: $primary-bg-color; +$roomheader-addroom-bg-color: #91a1c0; +$roomheader-addroom-fg-color: $accent-fg-color; +$tagpanel-button-color: #91a1c0; +$roomheader-button-color: #91a1c0; +$groupheader-button-color: #91a1c0; +$rightpanel-button-color: #91a1c0; +$composer-button-color: #91a1c0; +$roomtopic-color: #9e9e9e; +$eventtile-meta-color: $roomtopic-color; + +$composer-e2e-icon-color: #91a1c0; +$header-divider-color: #91a1c0; + +// ******************** + +$theme-button-bg-color: #e3e8f0; + +$roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons +$roomlist-bg-color: $header-panel-bg-color; +$roomlist-header-color: $primary-fg-color; +$roomsublist-divider-color: $primary-fg-color; + +$roomtile-preview-color: #9e9e9e; +$roomtile-default-badge-bg-color: #61708b; +$roomtile-selected-bg-color: #fff; + +$presence-online: $accent-color; +$presence-away: #d9b072; +$presence-offline: #e3e8f0; + +// ******************** + +$username-variant1-color: #368bd6; +$username-variant2-color: #ac3ba8; +$username-variant3-color: #03b381; +$username-variant4-color: #e64f7a; +$username-variant5-color: #ff812d; +$username-variant6-color: #2dc2c5; +$username-variant7-color: #5c56f5; +$username-variant8-color: #74d12c; + +$panel-divider-color: #dee1f3; + +// ******************** + +$widget-menu-bar-bg-color: $secondary-accent-color; + +// ******************** + +// both $event-highlight-bg-color and $room-warning-bg-color share this value, +// so to not make their order dependent on who depends on who, have a shared value +// defined before both +$yellow-background: #fff8e3; + +// event tile lifecycle +$event-encrypting-color: #abddbc; +$event-sending-color: #ddd; +$event-notsent-color: #f44; + +$event-highlight-fg-color: $warning-color; +$event-highlight-bg-color: $yellow-background; + +// event redaction +$event-redacted-fg-color: #e2e2e2; +$event-redacted-border-color: #cccccc; + +// event timestamp +$event-timestamp-color: #acacac; + +$copy-button-url: "$(res)/img/icon_copy_message.svg"; + +// e2e +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-unknown-color: #e8bf37; +$e2e-unverified-color: #e8bf37; +$e2e-warning-color: #ba6363; + +/*** ImageView ***/ +$lightbox-bg-color: #454545; +$lightbox-fg-color: #ffffff; +$lightbox-border-color: #ffffff; + +// Tabbed views +$tab-label-fg-color: #45474a; +$tab-label-active-fg-color: #ffffff; +$tab-label-bg-color: transparent; +$tab-label-active-bg-color: $accent-color; +$tab-label-icon-bg-color: #454545; +$tab-label-active-icon-bg-color: $tab-label-active-fg-color; + +// Buttons +$button-primary-fg-color: #ffffff; +$button-primary-bg-color: $accent-color; +$button-secondary-bg-color: $accent-fg-color; +$button-danger-fg-color: #ffffff; +$button-danger-bg-color: $notice-primary-color; +$button-danger-disabled-fg-color: #ffffff; +$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color +$button-link-fg-color: $accent-color; +$button-link-bg-color: transparent; + +$visual-bell-bg-color: #faa; + +// Toggle switch +$togglesw-off-color: #c1c9d6; +$togglesw-on-color: $accent-color; +$togglesw-ball-color: #fff; + +// Slider +$slider-selection-color: $accent-color; +$slider-background-color: #c1c9d6; + +$progressbar-color: #000; + +$room-warning-bg-color: $yellow-background; + +$memberstatus-placeholder-color: $muted-fg-color; + +$authpage-bg-color: #2e3649; +$authpage-modal-bg-color: rgba(255, 255, 255, 0.59); +$authpage-body-bg-color: #ffffff; +$authpage-focus-bg-color: #dddddd; +$authpage-lang-color: #4e5054; +$authpage-primary-color: #232f32; +$authpage-secondary-color: #61708b; + +$dark-panel-bg-color: $secondary-accent-color; +$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); + +$message-action-bar-bg-color: $primary-bg-color; +$message-action-bar-fg-color: $primary-fg-color; +$message-action-bar-border-color: #e9edf1; +$message-action-bar-hover-border-color: $focus-bg-color; + +$reaction-row-button-bg-color: $header-panel-bg-color; +$reaction-row-button-border-color: #e9edf1; +$reaction-row-button-hover-border-color: $focus-bg-color; +$reaction-row-button-selected-bg-color: #e9fff9; +$reaction-row-button-selected-border-color: $accent-color; + +$kbd-border-color: $reaction-row-button-border-color; + +$tooltip-timeline-bg-color: $tagpanel-bg-color; +$tooltip-timeline-fg-color: #ffffff; + +$interactive-tooltip-bg-color: #27303a; +$interactive-tooltip-fg-color: #ffffff; + +$breadcrumb-placeholder-bg-color: #e8eef5; + +$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 { + /* align images in buttons (eg spinners) */ + vertical-align: middle; + border: 0px; + border-radius: 4px; + font-family: $font-family; + font-size: $font-14px; + color: $button-fg-color; + background-color: $button-bg-color; + width: auto; + padding: 7px; + padding-left: 1.5em; + padding-right: 1.5em; + cursor: pointer; + display: inline-block; + outline: none; +} + +@define-mixin mx_DialogButton_hover { +} + +@define-mixin mx_DialogButton_danger { + background-color: $accent-color; +} + +@define-mixin mx_DialogButton_small { + @mixin mx_DialogButton; + font-size: $font-15px; + padding: 0px 1.5em 0px 1.5em; +} + +@define-mixin mx_DialogButton_secondary { + // flip colours for the secondary ones + font-weight: 600; + border: 1px solid $accent-color ! important; + color: $accent-color; + background-color: $button-secondary-bg-color; +} + +@define-mixin mx_Dialog_link { + color: $accent-color; + text-decoration: none; +} + +// diff highlight colors +.hljs-addition { + background: #dfd; +} + +.hljs-deletion { + background: #fdd; +} diff --git a/res/themes/legacy-light/css/_paths.scss b/res/themes/legacy-light/css/_paths.scss new file mode 100644 index 0000000000..0744347826 --- /dev/null +++ b/res/themes/legacy-light/css/_paths.scss @@ -0,0 +1,3 @@ +// Path from root SCSS file (such as `light.scss`) to `res` dir in the source tree +// This value is overridden by external themes in `riot-web`. +$res: ../../..; diff --git a/res/themes/legacy-light/css/legacy-light.scss b/res/themes/legacy-light/css/legacy-light.scss new file mode 100644 index 0000000000..e39a1765f3 --- /dev/null +++ b/res/themes/legacy-light/css/legacy-light.scss @@ -0,0 +1,5 @@ +@import "../../../../res/css/_font-sizes.scss"; +@import "_paths.scss"; +@import "_fonts.scss"; +@import "_legacy-light.scss"; +@import "../../../../res/css/_components.scss"; diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index e7912e3cb0..b830e86e02 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -25,7 +25,6 @@ $button-link-fg-color: var(--accent-color); $button-primary-bg-color: var(--accent-color); $input-valid-border-color: var(--accent-color); $reaction-row-button-selected-border-color: var(--accent-color); -$roomsublist-chevron-color: var(--accent-color); $tab-label-active-bg-color: var(--accent-color); $togglesw-on-color: var(--accent-color); $username-variant3-color: var(--accent-color); @@ -40,10 +39,10 @@ $menu-bg-color: var(--timeline-background-color); $avatar-bg-color: var(--timeline-background-color); $message-action-bar-bg-color: var(--timeline-background-color); $primary-bg-color: var(--timeline-background-color); -$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); @@ -53,6 +52,7 @@ $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); +$roomlist-button-bg-color: var(--sidebar-color-15pct); // // --roomlist-background-color $header-panel-bg-color: var(--roomlist-background-color); @@ -62,11 +62,10 @@ $panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-backgroun $dark-panel-bg-color: var(--roomlist-background-color); $input-lighter-bg-color: var(--roomlist-background-color); $plinth-bg-color: var(--roomlist-background-color); -$roomsublist-background: var(--roomlist-background-color); $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); +$roomlist-bg-color: var(--roomlist-background-color); // // --timeline-text-color $message-action-bar-fg-color: var(--timeline-text-color); @@ -83,19 +82,17 @@ $tab-label-fg-color: var(--timeline-text-color); // was #4e5054 $authpage-lang-color: var(--timeline-text-color); $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); +$roomtile-preview-color: var(--roomlist-text-secondary-color); +$roomlist-header-color: var(--roomlist-text-secondary-color); +$roomtile-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 +$roomsublist-divider-color: var(--roomlist-separator-color); // // --timeline-text-secondary-color $authpage-secondary-color: var(--timeline-text-secondary-color); @@ -126,7 +123,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 +133,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-custom/css/light-custom.scss b/res/themes/light-custom/css/light-custom.scss index 4f80647eba..6e9d0ff736 100644 --- a/res/themes/light-custom/css/light-custom.scss +++ b/res/themes/light-custom/css/light-custom.scss @@ -1,6 +1,6 @@ @import "../../../../res/css/_font-sizes.scss"; -@import "../../light/css/_paths.scss"; -@import "../../light/css/_fonts.scss"; -@import "../../light/css/_light.scss"; +@import "../../legacy-light/css/_paths.scss"; +@import "../../legacy-light/css/_fonts.scss"; +@import "../../legacy-light/css/_legacy-light.scss"; @import "_custom.scss"; @import "../../../../res/css/_components.scss"; diff --git a/res/themes/light/css/_fonts.scss b/res/themes/light/css/_fonts.scss index 1bc9b5a4a3..ba64830f15 100644 --- a/res/themes/light/css/_fonts.scss +++ b/res/themes/light/css/_fonts.scss @@ -1,36 +1,88 @@ -/* - * Nunito. - * Includes extended Latin and Vietnamese character sets - * Current URLs are taken from - * https://github.com/alexeiva/NunitoFont/releases/tag/v3.500 - * ...in order to include cyrillic. - * - * Previously, they were - * https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&subset=latin-ext,vietnamese - * - * We explicitly do not include Nunito's italic variants, as they are not italic enough - * and it's better to rely on the browser's built-in obliquing behaviour. - */ - /* the 'src' links are relative to the bundle.css, which is in a subdirectory. */ + +/* Inter unexpectedly contains various codepoints which collide with emoji, even + when variation-16 is applied to request the emoji variant. From eyeballing + the emoji picker, these are: 20e3, 23cf, 24c2, 25a0-25c1, 2665, 2764, 2b06, 2b1c. + Therefore we define a unicode-range to load which excludes the glyphs + (to avoid having to maintain a fork of Inter). */ + +$inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10FFFF; + @font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 400; - src: url('$(res)/fonts/Nunito/Nunito-Regular.ttf') format('truetype'); + font-family: 'Inter'; + font-style: normal; + 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"); } @font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 600; - src: url('$(res)/fonts/Nunito/Nunito-SemiBold.ttf') format('truetype'); + font-family: 'Inter'; + font-style: italic; + 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"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + 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"); } @font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 700; - src: url('$(res)/fonts/Nunito/Nunito-Bold.ttf') format('truetype'); + font-family: 'Inter'; + font-style: italic; + 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"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + 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"); +} +@font-face { + font-family: 'Inter'; + font-style: italic; + 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"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + 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"); +} +@font-face { + font-family: 'Inter'; + font-style: italic; + 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"); } /* latin-ext */ @@ -68,17 +120,3 @@ src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url('$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - -/* a COLR/CPAL version of Twemoji used for consistent cross-browser emoji - * taken from https://github.com/mozilla/twemoji-colr - * using the fix from https://github.com/mozilla/twemoji-colr/issues/50 to - * work on macOS - */ -/* -// except we now load it dynamically via FontManager to handle browsers -// which can't render COLR/CPAL still -@font-face { - font-family: "Twemoji Mozilla"; - src: url('$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla.woff2') format('woff2'); -} -*/ \ No newline at end of file diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 8469a85bfe..e317683963 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -8,21 +8,22 @@ /* Noto Color Emoji contains digits, in fixed-width, therefore causing digits in flowed text to stand out. TODO: Consider putting all emoji fonts to the end rather than the front. */ -$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji'; +$font-family: Inter, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji'; $monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji'; // unified palette // try to use these colors when possible -$accent-color: #03b381; +$accent-color: #0DBD8B; $accent-bg-color: rgba(3, 179, 129, 0.16); $notice-primary-color: #ff4b55; $notice-primary-bg-color: rgba(255, 75, 85, 0.16); -$notice-secondary-color: #61708b; +$primary-fg-color: #2e2f32; +$roomlist-header-color: $primary-fg-color; +$notice-secondary-color: $roomlist-header-color; $header-panel-bg-color: #f3f8fd; // typical text (dark-on-white in light skin) -$primary-fg-color: #2e2f32; $primary-bg-color: #ffffff; $muted-fg-color: #61708b; // Commonly used in headings and relevant alt text @@ -34,9 +35,9 @@ $focus-bg-color: #dddddd; // button UI (white-on-green in light skin) $accent-fg-color: #ffffff; -$accent-color-50pct: rgba(3, 179, 129, 0.5); //#03b381 in rgb +$accent-color-50pct: rgba($accent-color, 0.5); $accent-color-darker: #92caad; -$accent-color-alt: #238cf5; +$accent-color-alt: #238CF5; $selection-fg-color: $primary-bg-color; @@ -46,8 +47,8 @@ $focus-brightness: 105%; $warning-color: $notice-primary-color; // red $orange-warning-color: #ff8d13; // used for true warnings // background colour for warnings -$warning-bg-color: #df2a8b; -$info-bg-color: #2a9edf; +$warning-bg-color: #DF2A8B; +$info-bg-color: #2A9EDF; $mention-user-pill-bg-color: $warning-color; $other-user-pill-bg-color: rgba(0, 0, 0, 0.1); @@ -65,13 +66,13 @@ $preview-bar-bg-color: #f7f7f7; $secondary-accent-color: #f2f5f8; $tertiary-accent-color: #d3efe1; -$tagpanel-bg-color: #27303a; +$tagpanel-bg-color: rgba(232, 232, 232, 0.77); // used by RoomDirectory permissions $plinth-bg-color: $secondary-accent-color; // used by RoomDropTarget -$droptarget-bg-color: rgba(255, 255, 255, 0.5); +$droptarget-bg-color: rgba(255,255,255,0.5); // used by AddressSelector $selected-color: $secondary-accent-color; @@ -80,7 +81,7 @@ $selected-color: $secondary-accent-color; $event-selected-color: $header-panel-bg-color; // used for the hairline dividers in RoomView -$primary-hairline-color: #e5e5e5; +$primary-hairline-color: transparent; // used for the border of input text fields $input-border-color: #e7e7e7; @@ -157,65 +158,48 @@ $rte-group-pill-color: #aaa; $topleftmenu-color: #212121; $roomheader-color: #45474a; -$roomheader-addroom-bg-color: #91a1c0; -$roomheader-addroom-fg-color: $accent-fg-color; -$tagpanel-button-color: #91a1c0; -$roomheader-button-color: #91a1c0; -$groupheader-button-color: #91a1c0; -$rightpanel-button-color: #91a1c0; -$composer-button-color: #91a1c0; +$roomheader-bg-color: $primary-bg-color; +$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2); +$roomheader-addroom-fg-color: #5c6470; +$tagpanel-button-color: #91A1C0; +$roomheader-button-color: #91A1C0; +$groupheader-button-color: #91A1C0; +$rightpanel-button-color: #91A1C0; +$composer-button-color: #91A1C0; $roomtopic-color: #9e9e9e; $eventtile-meta-color: $roomtopic-color; -$composer-e2e-icon-color: #c9ced6; -$header-divider-color: #91a1c0; +$composer-e2e-icon-color: #91A1C0; +$header-divider-color: #91A1C0; // ******************** -// V2 Room List -// TODO: Remove the 2 from all of these when the new list takes over - $theme-button-bg-color: #e3e8f0; -$roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons -$roomlist2-bg-color: $header-panel-bg-color; +$roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons +$roomlist-bg-color: rgba(245, 245, 245, 0.90); +$roomsublist-divider-color: $primary-fg-color; -$roomsublist2-divider-color: $primary-fg-color; - -$roomtile2-preview-color: #9e9e9e; -$roomtile2-default-badge-bg-color: #61708b; -$roomtile2-selected-bg-color: #fff; +$roomtile-preview-color: #737D8C; +$roomtile-default-badge-bg-color: #61708b; +$roomtile-selected-bg-color: #FFF; $presence-online: $accent-color; $presence-away: #d9b072; -$presence-offline: #e3e8f0; +$presence-offline: #E3E8F0; // ******************** -$roomtile-name-color: #61708b; -$roomtile-badge-fg-color: $accent-fg-color; -$roomtile-selected-color: #212121; -$roomtile-notified-color: #212121; -$roomtile-selected-bg-color: #fff; -$roomtile-focused-bg-color: #fff; - $username-variant1-color: #368bd6; $username-variant2-color: #ac3ba8; -$username-variant3-color: #03b381; +$username-variant3-color: #0DBD8B; $username-variant4-color: #e64f7a; $username-variant5-color: #ff812d; $username-variant6-color: #2dc2c5; $username-variant7-color: #5c56f5; $username-variant8-color: #74d12c; -$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); - -$roomsublist-background: $secondary-accent-color; -$roomsublist-label-fg-color: $roomtile-name-color; -$roomsublist-label-bg-color: $tertiary-accent-color; -$roomsublist-chevron-color: $accent-color; - -$panel-divider-color: #dee1f3; +$panel-divider-color: transparent; // ******************** @@ -290,10 +274,10 @@ $progressbar-color: #000; $room-warning-bg-color: $yellow-background; -$memberstatus-placeholder-color: $roomtile-name-color; +$memberstatus-placeholder-color: $muted-fg-color; $authpage-bg-color: #2e3649; -$authpage-modal-bg-color: rgba(255, 255, 255, 0.59); +$authpage-modal-bg-color: rgba(245, 245, 245, 0.90); $authpage-body-bg-color: #ffffff; $authpage-focus-bg-color: #dddddd; $authpage-lang-color: #4e5054; @@ -316,7 +300,8 @@ $reaction-row-button-selected-border-color: $accent-color; $kbd-border-color: $reaction-row-button-border-color; -$tooltip-timeline-bg-color: $tagpanel-bg-color; +$inverted-bg-color: #27303a; +$tooltip-timeline-bg-color: $inverted-bg-color; $tooltip-timeline-fg-color: #ffffff; $interactive-tooltip-bg-color: #27303a; @@ -329,6 +314,12 @@ $user-tile-hover-bg-color: $header-panel-bg-color; // FontSlider colors $appearance-tab-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; +$tagpanel-background-blur-amount: 20px; + +$composer-shadow-color: rgba(0, 0, 0, 0.04); + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/light/css/_mods.scss b/res/themes/light/css/_mods.scss new file mode 100644 index 0000000000..9a59acba8e --- /dev/null +++ b/res/themes/light/css/_mods.scss @@ -0,0 +1,32 @@ +// sidebar blurred avatar background +// +// if backdrop-filter is supported, +// set the user avatar (if any) as a background so +// it can be blurred by the tag panel and room list + +@supports (backdrop-filter: none) { + .mx_LeftPanel { + background-image: var(--avatar-url); + background-repeat: no-repeat; + background-size: cover; + background-position: left top; + } + + .mx_TagPanel { + backdrop-filter: blur($tagpanel-background-blur-amount); + } + + .mx_LeftPanel .mx_LeftPanel_roomListContainer { + backdrop-filter: blur($roomlist-background-blur-amount); + } +} + +.mx_RoomSublist_showNButton { + background-color: transparent !important; +} + +a:hover, +a:link, +a:visited { + text-decoration: none; +} diff --git a/res/themes/light/css/light.scss b/res/themes/light/css/light.scss index 4f48557648..f31ce5c139 100644 --- a/res/themes/light/css/light.scss +++ b/res/themes/light/css/light.scss @@ -2,4 +2,5 @@ @import "_paths.scss"; @import "_fonts.scss"; @import "_light.scss"; +@import "_mods.scss"; @import "../../../../res/css/_components.scss"; diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index fc52296d8b..f556ff8b5c 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -19,9 +19,11 @@ import ContentMessages from "../ContentMessages"; import { IMatrixClientPeg } from "../MatrixClientPeg"; import ToastStore from "../stores/ToastStore"; import DeviceListener from "../DeviceListener"; -import { RoomListStore2 } from "../stores/room-list/RoomListStore2"; +import RebrandListener from "../RebrandListener"; +import { RoomListStoreClass } from "../stores/room-list/RoomListStore"; import { PlatformPeg } from "../PlatformPeg"; import RoomListLayoutStore from "../stores/room-list/RoomListLayoutStore"; +import {IntegrationManagers} from "../integrations/IntegrationManagers"; declare global { interface Window { @@ -34,14 +36,16 @@ declare global { mx_ContentMessages: ContentMessages; mx_ToastStore: ToastStore; mx_DeviceListener: DeviceListener; - mx_RoomListStore2: RoomListStore2; + mx_RebrandListener: RebrandListener; + mx_RoomListStore: RoomListStoreClass; mx_RoomListLayoutStore: RoomListLayoutStore; mxPlatformPeg: PlatformPeg; + mxIntegrationManagers: typeof IntegrationManagers; } // workaround for https://github.com/microsoft/TypeScript/issues/30933 interface ObjectConstructor { - fromEntries?(xs: [string|number|symbol, any][]): object + fromEntries?(xs: [string|number|symbol, any][]): object; } interface Document { diff --git a/src/Analytics.js b/src/Analytics.js index e55612c4f1..9966d0845e 100644 --- a/src/Analytics.js +++ b/src/Analytics.js @@ -66,7 +66,10 @@ const customVariables = { }, 'App Version': { id: 2, - expl: _td('The version of Riot'), + expl: _td('The version of %(brand)s'), + getTextVariables: () => ({ + brand: SdkConfig.get().brand, + }), example: '15.0.0', }, 'User Type': { @@ -96,7 +99,10 @@ const customVariables = { }, 'Touch Input': { id: 8, - expl: _td("Whether you're using Riot on a device where touch is the primary input mechanism"), + expl: _td("Whether you're using %(brand)s on a device where touch is the primary input mechanism"), + getTextVariables: () => ({ + brand: SdkConfig.get().brand, + }), example: 'false', }, 'Breadcrumbs': { @@ -106,7 +112,10 @@ const customVariables = { }, 'Installed PWA': { id: 10, - expl: _td("Whether you're using Riot as an installed Progressive Web App"), + expl: _td("Whether you're using %(brand)s as an installed Progressive Web App"), + getTextVariables: () => ({ + brand: SdkConfig.get().brand, + }), example: 'false', }, }; @@ -195,8 +204,11 @@ class Analytics { this._setVisitVariable('Chosen Language', getCurrentLanguage()); - if (window.location.hostname === 'riot.im') { + const hostname = window.location.hostname; + if (hostname === 'riot.im') { this._setVisitVariable('Instance', window.location.pathname); + } else if (hostname.endsWith('.element.io')) { + this._setVisitVariable('Instance', hostname.replace('.element.io', '')); } let installedPWA = "unknown"; @@ -356,12 +368,17 @@ class Analytics { Modal.createTrackedDialog('Analytics Details', '', ErrorDialog, { title: _t('Analytics'), description:
-
- { _t('The information being sent to us to help make Riot better includes:') } -
+
{_t('The information being sent to us to help make %(brand)s better includes:', { + brand: SdkConfig.get().brand, + })}
{ rows.map((row) => - + { row[1] !== undefined && } ) } { otherVariables.map((item, index) => diff --git a/src/Avatar.js b/src/Avatar.js index 2cb90eaea6..d76ea6f2c4 100644 --- a/src/Avatar.js +++ b/src/Avatar.js @@ -82,7 +82,7 @@ function urlForColor(color) { const colorToDataURLCache = new Map(); export function defaultAvatarUrlForString(s) { - const defaultColors = ['#03b381', '#368bd6', '#ac3ba8']; + const defaultColors = ['#0DBD8B', '#368bd6', '#ac3ba8']; let total = 0; for (let i = 0; i < s.length; ++i) { total += s.charCodeAt(i); diff --git a/src/CrossSigningManager.js b/src/CrossSigningManager.js index a80c91a59a..a584a69d35 100644 --- a/src/CrossSigningManager.js +++ b/src/CrossSigningManager.js @@ -40,25 +40,16 @@ export class AccessCancelledError extends Error { } } -async function confirmToDismiss(name) { - let description; - if (name === "m.cross_signing.user_signing") { - description = _t("If you cancel now, you won't complete verifying the other user."); - } else if (name === "m.cross_signing.self_signing") { - description = _t("If you cancel now, you won't complete verifying your other session."); - } else { - description = _t("If you cancel now, you won't complete your operation."); - } - +async function confirmToDismiss() { const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); const [sure] = await Modal.createDialog(QuestionDialog, { title: _t("Cancel entering passphrase?"), - description, - danger: true, - cancelButton: _t("Enter passphrase"), - button: _t("Cancel"), + description: _t("Are you sure you want to cancel entering passphrase?"), + danger: false, + button: _t("Go Back"), + cancelButton: _t("Cancel"), }).finished; - return sure; + return !sure; } async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) { @@ -102,7 +93,7 @@ async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) { /* options= */ { onBeforeClose: async (reason) => { if (reason === "backgroundClick") { - return confirmToDismiss(ssssItemName); + return confirmToDismiss(); } return true; }, diff --git a/src/Lifecycle.js b/src/Lifecycle.js index 9ae4ae7e03..a05392c3e9 100644 --- a/src/Lifecycle.js +++ b/src/Lifecycle.js @@ -40,6 +40,7 @@ import ToastStore from "./stores/ToastStore"; import {IntegrationManagers} from "./integrations/IntegrationManagers"; import {Mjolnir} from "./mjolnir/Mjolnir"; import DeviceListener from "./DeviceListener"; +import RebrandListener from "./RebrandListener"; import {Jitsi} from "./widgets/Jitsi"; import {SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY} from "./BasePlatform"; @@ -627,6 +628,8 @@ async function startMatrixClient(startSyncing=true) { // Now that we have a MatrixClientPeg, update the Jitsi info await Jitsi.getInstance().start(); + RebrandListener.sharedInstance().start(); + // dispatch that we finished starting up to wire up any other bits // of the matrix client that cannot be set prior to starting up. dis.dispatch({action: 'client_started'}); @@ -688,6 +691,7 @@ export function stopMatrixClient(unsetClient=true) { IntegrationManagers.sharedInstance().stopWatching(); Mjolnir.sharedInstance().stop(); DeviceListener.sharedInstance().stop(); + RebrandListener.sharedInstance().stop(); if (DMRoomMap.shared()) DMRoomMap.shared().stop(); EventIndexPeg.stop(); const cli = MatrixClientPeg.get(); diff --git a/src/Notifier.js b/src/Notifier.js index b6690959d2..c6fc7d7985 100644 --- a/src/Notifier.js +++ b/src/Notifier.js @@ -2,6 +2,7 @@ Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd Copyright 2017 New Vector Ltd +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. @@ -16,7 +17,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {MatrixClientPeg} from './MatrixClientPeg'; +import { MatrixClientPeg } from './MatrixClientPeg'; +import SdkConfig from './SdkConfig'; import PlatformPeg from './PlatformPeg'; import * as TextForEvent from './TextForEvent'; import Analytics from './Analytics'; @@ -226,10 +228,11 @@ const Notifier = { if (result !== 'granted') { // The permission request was dismissed or denied // TODO: Support alternative branding in messaging + const brand = SdkConfig.get().brand; const description = result === 'denied' - ? _t('Riot does not have permission to send you notifications - ' + - 'please check your browser settings') - : _t('Riot was not given permission to send notifications - please try again'); + ? _t('%(brand)s does not have permission to send you notifications - ' + + 'please check your browser settings', { brand }) + : _t('%(brand)s was not given permission to send notifications - please try again', { brand }); const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog'); Modal.createTrackedDialog('Unable to enable Notifications', result, ErrorDialog, { title: _t('Unable to enable Notifications'), diff --git a/src/RebrandListener.tsx b/src/RebrandListener.tsx new file mode 100644 index 0000000000..a93ce9e3a5 --- /dev/null +++ b/src/RebrandListener.tsx @@ -0,0 +1,173 @@ +/* +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 SdkConfig from "./SdkConfig"; +import ToastStore from "./stores/ToastStore"; +import GenericToast from "./components/views/toasts/GenericToast"; +import RebrandDialog from "./components/views/dialogs/RebrandDialog"; +import { RebrandDialogKind } from "./components/views/dialogs/RebrandDialog"; +import Modal from './Modal'; +import { _t } from './languageHandler'; + +const TOAST_KEY = 'rebrand'; +const NAG_INTERVAL = 24 * 60 * 60 * 1000; + +function getRedirectUrl(url): string { + const redirectUrl = new URL(url); + redirectUrl.hash = ''; + + if (SdkConfig.get()['redirectToNewBrandUrl']) { + const newUrl = new URL(SdkConfig.get()['redirectToNewBrandUrl']); + if (url.hostname !== newUrl.hostname || url.pathname !== newUrl.pathname) { + redirectUrl.hostname = newUrl.hostname; + redirectUrl.pathname = newUrl.pathname; + return redirectUrl.toString(); + } + return null; + } 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; + } else if (url.hostname.endsWith('.riot.im')) { + redirectUrl.hostname = url.hostname.substr(0, url.hostname.length - '.riot.im'.length) + '.element.io'; + return redirectUrl.href; + } else { + return null; + } +} + +/** + * Shows toasts informing the user that the name of the app has changed and, + * potentially, that they should head to a different URL and log in there + */ +export default class RebrandListener { + private _reshowTimer?: number; + private nagAgainAt?: number = null; + + static sharedInstance() { + if (!window.mx_RebrandListener) window.mx_RebrandListener = new RebrandListener(); + return window.mx_RebrandListener; + } + + constructor() { + this._reshowTimer = null; + } + + start() { + this.recheck(); + } + + stop() { + if (this._reshowTimer) { + clearTimeout(this._reshowTimer); + this._reshowTimer = null; + } + } + + onNagToastLearnMore = async () => { + const [doneClicked] = await Modal.createDialog(RebrandDialog, { + kind: RebrandDialogKind.NAG, + targetUrl: getRedirectUrl(window.location), + }).finished; + if (doneClicked) { + // open in new tab: they should come back here & log out + window.open(getRedirectUrl(window.location), '_blank'); + } + + // whatever the user clicks, we go away & nag again after however long: + // If they went to the new URL, we want to nag them to log out if they + // come back to this tab, and if they clicked, 'remind me later' we want + // to, well, remind them later. + this.nagAgainAt = Date.now() + NAG_INTERVAL; + this.recheck(); + }; + + onOneTimeToastLearnMore = async () => { + const [doneClicked] = await Modal.createDialog(RebrandDialog, { + kind: RebrandDialogKind.ONE_TIME, + }).finished; + if (doneClicked) { + 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 + // the app is now called a different thing but no action is required from them (they + // may need to look for a different name name/icon to launch the app but don't need to + // log in again) and a nag toast where they need to log in to the app on a different domain. + let nagToast = false; + let oneTimeToast = false; + + if (getRedirectUrl(window.location)) { + if (!this.nagAgainAt) { + // if we have redirectUrl, show the nag toast + nagToast = true; + } + } else { + // otherwise we show the 'one time' toast / dialog + const renameDialogDismissed = localStorage.getItem('mx_rename_dialog_dismissed'); + if (renameDialogDismissed !== 'true') { + oneTimeToast = true; + } + } + + if (nagToast || oneTimeToast) { + let description; + if (nagToast) { + description = _t("Use your account to sign in to the latest version"); + } else { + description = _t("We’re excited to announce Riot is now Element"); + } + + ToastStore.sharedInstance().addOrReplaceToast({ + key: TOAST_KEY, + title: _t("Riot is now Element!"), + icon: 'element_logo', + props: { + description, + acceptLabel: _t("Learn More"), + onAccept: nagToast ? this.onNagToastLearnMore : this.onOneTimeToastLearnMore, + }, + component: GenericToast, + priority: 20, + }); + } else { + ToastStore.sharedInstance().dismissToast(TOAST_KEY); + } + + if (!this._reshowTimer && this.nagAgainAt) { + // XXX: Our build system picks up NodeJS bindings when we need browser bindings. + this._reshowTimer = setTimeout(this.onNagTimerFired, (this.nagAgainAt - Date.now()) + 100) as any as number; + } + } +} diff --git a/src/SdkConfig.ts b/src/SdkConfig.ts index 400d29a20f..b914aaaf6d 100644 --- a/src/SdkConfig.ts +++ b/src/SdkConfig.ts @@ -1,6 +1,6 @@ /* Copyright 2016 OpenMarket Ltd -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2019, 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -20,6 +20,8 @@ export interface ConfigOptions { } export const DEFAULTS: ConfigOptions = { + // Brand name of the app + brand: "Element", // URL to a page we show in an iframe to configure integrations integrations_ui_url: "https://scalar.vector.im/", // Base URL to the REST interface of the integrations server diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index 11c955749d..40bf0a8e49 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)); } } @@ -1046,7 +1049,7 @@ export function parseCommandString(input) { // trim any trailing whitespace, as it can confuse the parser for // IRC-style commands input = input.replace(/\s+$/, ''); - if (input[0] !== '/') return null; // not a command + if (input[0] !== '/') return {}; // not a command const bits = input.match(/^(\S+?)(?: +((.|\n)*))?$/); let cmd; 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/context_menu/ContextMenuButton.tsx b/src/accessibility/context_menu/ContextMenuButton.tsx index c358155e10..e211a4c933 100644 --- a/src/accessibility/context_menu/ContextMenuButton.tsx +++ b/src/accessibility/context_menu/ContextMenuButton.tsx @@ -18,9 +18,9 @@ limitations under the License. import React from "react"; -import AccessibleButton, {IProps as IAccessibleButtonProps} from "../../components/views/elements/AccessibleButton"; +import AccessibleButton from "../../components/views/elements/AccessibleButton"; -interface IProps extends IAccessibleButtonProps { +interface IProps extends React.ComponentProps { label?: string; // whether or not the context menu is currently open isExpanded: boolean; diff --git a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx new file mode 100644 index 0000000000..abc5412100 --- /dev/null +++ b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx @@ -0,0 +1,47 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2018 New Vector Ltd +Copyright 2019 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"; + +interface IProps extends React.ComponentProps { + // whether or not the context menu is currently open + isExpanded: boolean; +} + +// Semantic component for representing the AccessibleButton which launches a +export const ContextMenuTooltipButton: React.FC = ({ + isExpanded, + children, + onClick, + onContextMenu, + ...props +}) => { + return ( + + { children } + + ); +}; 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/actions/RoomListActions.ts b/src/actions/RoomListActions.ts index e15e1b0c65..da07bcb169 100644 --- a/src/actions/RoomListActions.ts +++ b/src/actions/RoomListActions.ts @@ -16,7 +16,6 @@ limitations under the License. */ import { asyncAction } from './actionCreators'; -import { TAG_DM } from '../stores/RoomListStore'; import Modal from '../Modal'; import * as Rooms from '../Rooms'; import { _t } from '../languageHandler'; @@ -24,7 +23,9 @@ import * as sdk from '../index'; import { MatrixClient } from "matrix-js-sdk/src/client"; import { Room } from "matrix-js-sdk/src/models/room"; import { AsyncActionPayload } from "../dispatcher/payloads"; -import { RoomListStoreTempProxy } from "../stores/room-list/RoomListStoreTempProxy"; +import RoomListStore from "../stores/room-list/RoomListStore"; +import { SortAlgorithm } from "../stores/room-list/algorithms/models"; +import { DefaultTagID } from "../stores/room-list/models"; export default class RoomListActions { /** @@ -51,9 +52,9 @@ export default class RoomListActions { let metaData = null; // Is the tag ordered manually? - if (newTag && !newTag.match(/^(m\.lowpriority|im\.vector\.fake\.(invite|recent|direct|archived))$/)) { - const lists = RoomListStoreTempProxy.getRoomLists(); - const newList = [...lists[newTag]]; + const store = RoomListStore.instance; + if (newTag && store.getTagSorting(newTag) === SortAlgorithm.Manual) { + const newList = [...store.orderedLists[newTag]]; newList.sort((a, b) => a.tags[newTag].order - b.tags[newTag].order); @@ -81,11 +82,11 @@ export default class RoomListActions { const roomId = room.roomId; // Evil hack to get DMs behaving - if ((oldTag === undefined && newTag === TAG_DM) || - (oldTag === TAG_DM && newTag === undefined) + if ((oldTag === undefined && newTag === DefaultTagID.DM) || + (oldTag === DefaultTagID.DM && newTag === undefined) ) { return Rooms.guessAndSetDMRoom( - room, newTag === TAG_DM, + room, newTag === DefaultTagID.DM, ).catch((err) => { const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); console.error("Failed to set direct chat tag " + err); @@ -102,7 +103,7 @@ export default class RoomListActions { // but we avoid ever doing a request with TAG_DM. // // if we moved lists, remove the old tag - if (oldTag && oldTag !== TAG_DM && + if (oldTag && oldTag !== DefaultTagID.DM && hasChangedSubLists ) { const promiseToDelete = matrixClient.deleteRoomTag( @@ -120,7 +121,7 @@ export default class RoomListActions { } // if we moved lists or the ordering changed, add the new tag - if (newTag && newTag !== TAG_DM && + if (newTag && newTag !== DefaultTagID.DM && (hasChangedSubLists || metaData) ) { // metaData is the body of the PUT to set the tag, so it must diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js index bb2cf7f0b8..a9dd5be34b 100644 --- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js +++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js @@ -18,6 +18,7 @@ import React from 'react'; import * as sdk from '../../../../index'; import PropTypes from 'prop-types'; import { _t } from '../../../../languageHandler'; +import SdkConfig from '../../../../SdkConfig'; import SettingsStore, {SettingLevel} from "../../../../settings/SettingsStore"; import Modal from '../../../../Modal'; @@ -134,8 +135,10 @@ export default class ManageEventIndexDialog extends React.Component { }; render() { - let crawlerState; + const brand = SdkConfig.get().brand; + const Field = sdk.getComponent('views.elements.Field'); + let crawlerState; if (this.state.currentRoom === null) { crawlerState = _t("Not currently indexing messages for any room."); } else { @@ -144,17 +147,15 @@ export default class ManageEventIndexDialog extends React.Component { ); } - const Field = sdk.getComponent('views.elements.Field'); - const doneRooms = Math.max(0, (this.state.roomCount - this.state.crawlingRoomsCount)); const eventIndexingSettings = (
- { - _t( "Riot is securely caching encrypted messages locally for them " + - "to appear in search results:", - ) - } + {_t( + "%(brand)s is securely caching encrypted messages locally for them " + + "to appear in search results:", + { brand }, + )}
{crawlerState}
{_t("Space used:")} {formatBytes(this.state.eventIndexSize, 0)}
diff --git a/src/autocomplete/QueryMatcher.ts b/src/autocomplete/QueryMatcher.ts index 7a0219e264..2a44f20fe3 100644 --- a/src/autocomplete/QueryMatcher.ts +++ b/src/autocomplete/QueryMatcher.ts @@ -18,16 +18,15 @@ limitations under the License. import _at from 'lodash/at'; import _uniq from 'lodash/uniq'; - -function stripDiacritics(str: string): string { - return str.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); -} +import {removeHiddenChars} from "matrix-js-sdk/src/utils"; interface IOptions { keys: Array; funcs?: Array<(T) => string>; shouldMatchWordsOnly?: boolean; shouldMatchPrefix?: boolean; + // whether to apply unhomoglyph and strip diacritics to fuzz up the search. Defaults to true + fuzzy?: boolean; } /** @@ -46,14 +45,10 @@ interface IOptions { */ export default class QueryMatcher { private _options: IOptions; - private _keys: IOptions["keys"]; - private _funcs: Required["funcs"]>; private _items: Map; constructor(objects: T[], options: IOptions = { keys: [] }) { this._options = options; - this._keys = options.keys; - this._funcs = options.funcs || []; this.setObjects(objects); @@ -78,15 +73,17 @@ export default class QueryMatcher { // type for their values. We assume that those values who's keys have // been specified will be string. Also, we cannot infer all the // types of the keys of the objects at compile. - const keyValues = _at(object, this._keys); + const keyValues = _at(object, this._options.keys); - for (const f of this._funcs) { - keyValues.push(f(object)); + if (this._options.funcs) { + for (const f of this._options.funcs) { + keyValues.push(f(object)); + } } for (const [index, keyValue] of Object.entries(keyValues)) { if (!keyValue) continue; // skip falsy keyValues - const key = stripDiacritics(keyValue).toLowerCase(); + const key = this.processQuery(keyValue); if (!this._items.has(key)) { this._items.set(key, []); } @@ -99,7 +96,7 @@ export default class QueryMatcher { } match(query: string): T[] { - query = stripDiacritics(query).toLowerCase(); + query = this.processQuery(query); if (this._options.shouldMatchWordsOnly) { query = query.replace(/[^\w]/g, ''); } @@ -142,4 +139,11 @@ export default class QueryMatcher { // Now map the keys to the result objects. Also remove any duplicates. return _uniq(matches.map((match) => match.object)); } + + private processQuery(query: string): string { + if (this._options.fuzzy !== false) { + return removeHiddenChars(query).toLowerCase(); + } + return query.toLowerCase(); + } } diff --git a/src/components/structures/AutoHideScrollbar.js b/src/components/structures/AutoHideScrollbar.js index 04323bb548..14f7c9ca83 100644 --- a/src/components/structures/AutoHideScrollbar.js +++ b/src/components/structures/AutoHideScrollbar.js @@ -38,12 +38,13 @@ export default class AutoHideScrollbar extends React.Component { render() { return (
+ ref={this._collectContainerRef} + style={this.props.style} + className={["mx_AutoHideScrollbar", this.props.className].join(" ")} + onScroll={this.props.onScroll} + onWheel={this.props.onWheel} + tabIndex={this.props.tabIndex} + > { this.props.children }
); } diff --git a/src/components/structures/CompatibilityPage.js b/src/components/structures/CompatibilityPage.js index 9a3fdb5f39..1fa6068675 100644 --- a/src/components/structures/CompatibilityPage.js +++ b/src/components/structures/CompatibilityPage.js @@ -1,7 +1,7 @@ /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2019, 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -20,6 +20,7 @@ import React from 'react'; import createReactClass from 'create-react-class'; import PropTypes from 'prop-types'; import { _t } from '../../languageHandler'; +import SdkConfig from '../../SdkConfig'; export default createReactClass({ displayName: 'CompatibilityPage', @@ -38,14 +39,25 @@ export default createReactClass({ }, render: function() { + const brand = SdkConfig.get().brand; + return (
-

{ _t("Sorry, your browser is not able to run Riot.", {}, { 'b': (sub) => {sub} }) }

+

{_t( + "Sorry, your browser is not able to run %(brand)s.", + { + brand, + }, + { + 'b': (sub) => {sub}, + }) + }

{ _t( - "Riot uses many advanced browser features, some of which are not available " + + "%(brand)s uses many advanced browser features, some of which are not available " + "or experimental in your current browser.", + { brand }, ) }

diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index cb1349da4b..f1bd297730 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: @@ -458,6 +461,7 @@ export function createMenu(ElementClass, props) { // re-export the semantic helper components for simplicity export {ContextMenuButton} from "../../accessibility/context_menu/ContextMenuButton"; +export {ContextMenuTooltipButton} from "../../accessibility/context_menu/ContextMenuTooltipButton"; export {MenuGroup} from "../../accessibility/context_menu/MenuGroup"; export {MenuItem} from "../../accessibility/context_menu/MenuItem"; export {MenuItemCheckbox} from "../../accessibility/context_menu/MenuItemCheckbox"; 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/IndicatorScrollbar.js b/src/components/structures/IndicatorScrollbar.js index 05ad4f7561..27f7fbb301 100644 --- a/src/components/structures/IndicatorScrollbar.js +++ b/src/components/structures/IndicatorScrollbar.js @@ -192,7 +192,7 @@ export default class IndicatorScrollbar extends React.Component { ref={this._collectScrollerComponent} wrappedRef={this._collectScroller} onWheel={this.onMouseWheel} - {... this.props} + {...this.props} > { leftOverflowIndicator } { this.props.children } diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js deleted file mode 100644 index bae69b5631..0000000000 --- a/src/components/structures/LeftPanel.js +++ /dev/null @@ -1,305 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2019 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 createReactClass from 'create-react-class'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { Key } from '../../Keyboard'; -import * as sdk from '../../index'; -import dis from '../../dispatcher/dispatcher'; -import * as VectorConferenceHandler from '../../VectorConferenceHandler'; -import SettingsStore from '../../settings/SettingsStore'; -import {_t} from "../../languageHandler"; -import Analytics from "../../Analytics"; -import {Action} from "../../dispatcher/actions"; - - -const LeftPanel = createReactClass({ - displayName: 'LeftPanel', - - // NB. If you add props, don't forget to update - // shouldComponentUpdate! - propTypes: { - collapsed: PropTypes.bool.isRequired, - }, - - getInitialState: function() { - return { - searchFilter: '', - breadcrumbs: false, - }; - }, - - // TODO: [REACT-WARNING] Move this to constructor - UNSAFE_componentWillMount: function() { - this.focusedElement = null; - - this._breadcrumbsWatcherRef = SettingsStore.watchSetting( - "breadcrumbs", null, this._onBreadcrumbsChanged); - this._tagPanelWatcherRef = SettingsStore.watchSetting( - "TagPanel.enableTagPanel", null, () => this.forceUpdate()); - - const useBreadcrumbs = !!SettingsStore.getValue("breadcrumbs"); - Analytics.setBreadcrumbs(useBreadcrumbs); - this.setState({breadcrumbs: useBreadcrumbs}); - }, - - componentWillUnmount: function() { - SettingsStore.unwatchSetting(this._breadcrumbsWatcherRef); - SettingsStore.unwatchSetting(this._tagPanelWatcherRef); - }, - - shouldComponentUpdate: function(nextProps, nextState) { - // MatrixChat will update whenever the user switches - // rooms, but propagating this change all the way down - // the react tree is quite slow, so we cut this off - // here. The RoomTiles listen for the room change - // events themselves to know when to update. - // We just need to update if any of these things change. - if ( - this.props.collapsed !== nextProps.collapsed || - this.props.disabled !== nextProps.disabled - ) { - return true; - } - - if (this.state.searchFilter !== nextState.searchFilter) { - return true; - } - if (this.state.searchExpanded !== nextState.searchExpanded) { - return true; - } - - return false; - }, - - componentDidUpdate(prevProps, prevState) { - if (prevState.breadcrumbs !== this.state.breadcrumbs) { - Analytics.setBreadcrumbs(this.state.breadcrumbs); - } - }, - - _onBreadcrumbsChanged: function(settingName, roomId, level, valueAtLevel, value) { - // Features are only possible at a single level, so we can get away with using valueAtLevel. - // The SettingsStore runs on the same tick as the update, so `value` will be wrong. - this.setState({breadcrumbs: valueAtLevel}); - - // For some reason the setState doesn't trigger a render of the component, so force one. - // Probably has to do with the change happening outside of a change detector cycle. - this.forceUpdate(); - }, - - _onFocus: function(ev) { - this.focusedElement = ev.target; - }, - - _onBlur: function(ev) { - this.focusedElement = null; - }, - - _onFilterKeyDown: function(ev) { - if (!this.focusedElement) return; - - switch (ev.key) { - // On enter of rooms filter select and activate first room if such one exists - case Key.ENTER: { - const firstRoom = ev.target.closest(".mx_LeftPanel").querySelector(".mx_RoomTile"); - if (firstRoom) { - firstRoom.click(); - } - break; - } - } - }, - - _onKeyDown: function(ev) { - if (!this.focusedElement) return; - - switch (ev.key) { - case Key.ARROW_UP: - this._onMoveFocus(ev, true, true); - break; - case Key.ARROW_DOWN: - this._onMoveFocus(ev, false, true); - break; - } - }, - - _onMoveFocus: function(ev, up, trap) { - let element = this.focusedElement; - - // unclear why this isn't needed - // var descending = (up == this.focusDirection) ? this.focusDescending : !this.focusDescending; - // this.focusDirection = up; - - let descending = false; // are we currently descending or ascending through the DOM tree? - let classes; - - do { - const child = up ? element.lastElementChild : element.firstElementChild; - const sibling = up ? element.previousElementSibling : element.nextElementSibling; - - if (descending) { - if (child) { - element = child; - } else if (sibling) { - element = sibling; - } else { - descending = false; - element = element.parentElement; - } - } else { - if (sibling) { - element = sibling; - descending = true; - } else { - element = element.parentElement; - } - } - - if (element) { - classes = element.classList; - } - } while (element && !( - classes.contains("mx_RoomTile") || - classes.contains("mx_RoomSubList_label") || - classes.contains("mx_LeftPanel_filterRooms"))); - - if (element) { - ev.stopPropagation(); - ev.preventDefault(); - element.focus(); - this.focusedElement = element; - } else if (trap) { - // if navigation is via up/down arrow-keys, trap in the widget so it doesn't send to composer - ev.stopPropagation(); - ev.preventDefault(); - } - }, - - onSearch: function(term) { - this.setState({ searchFilter: term }); - }, - - onSearchCleared: function(source) { - if (source === "keyboard") { - dis.fire(Action.FocusComposer); - } - this.setState({searchExpanded: false}); - }, - - collectRoomList: function(ref) { - this._roomList = ref; - }, - - _onSearchFocus: function() { - this.setState({searchExpanded: true}); - }, - - _onSearchBlur: function(event) { - if (event.target.value.length === 0) { - this.setState({searchExpanded: false}); - } - }, - - render: function() { - const RoomList = sdk.getComponent('rooms.RoomList'); - const RoomBreadcrumbs = sdk.getComponent('rooms.RoomBreadcrumbs'); - const TagPanel = sdk.getComponent('structures.TagPanel'); - const CustomRoomTagPanel = sdk.getComponent('structures.CustomRoomTagPanel'); - const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton'); - const SearchBox = sdk.getComponent('structures.SearchBox'); - const CallPreview = sdk.getComponent('voip.CallPreview'); - const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); - - const tagPanelEnabled = SettingsStore.getValue("TagPanel.enableTagPanel"); - let tagPanelContainer; - - const isCustomTagsEnabled = SettingsStore.isFeatureEnabled("feature_custom_tags"); - - if (tagPanelEnabled) { - tagPanelContainer = (
- - { isCustomTagsEnabled ? : undefined } -
); - } - - const containerClasses = classNames( - "mx_LeftPanel_container", "mx_fadable", - { - "collapsed": this.props.collapsed, - "mx_LeftPanel_container_hasTagPanel": tagPanelEnabled, - "mx_fadable_faded": this.props.disabled, - }, - ); - - let exploreButton; - if (!this.props.collapsed) { - exploreButton = ( -
- dis.fire(Action.ViewRoomDirectory)}>{_t("Explore")} -
- ); - } - - const searchBox = (); - - let breadcrumbs; - if (this.state.breadcrumbs) { - breadcrumbs = (); - } - - const roomList = ; - - return ( -
- { tagPanelContainer } - -
- ); - }, -}); - -export default LeftPanel; diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel.tsx similarity index 80% rename from src/components/structures/LeftPanel2.tsx rename to src/components/structures/LeftPanel.tsx index d41a7278d9..dfefeacde5 100644 --- a/src/components/structures/LeftPanel2.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -20,22 +20,20 @@ import TagPanel from "./TagPanel"; import classNames from "classnames"; import dis from "../../dispatcher/dispatcher"; import { _t } from "../../languageHandler"; -import RoomList2 from "../views/rooms/RoomList2"; -import { HEADER_HEIGHT } from "../views/rooms/RoomSublist2"; +import RoomList from "../views/rooms/RoomList"; +import { HEADER_HEIGHT } from "../views/rooms/RoomSublist"; import { Action } from "../../dispatcher/actions"; import UserMenu from "./UserMenu"; import RoomSearch from "./RoomSearch"; -import AccessibleButton from "../views/elements/AccessibleButton"; -import RoomBreadcrumbs2 from "../views/rooms/RoomBreadcrumbs2"; +import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs"; import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore"; import { UPDATE_EVENT } from "../../stores/AsyncStore"; import ResizeNotifier from "../../utils/ResizeNotifier"; import SettingsStore from "../../settings/SettingsStore"; -import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore2"; +import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore"; import {Key} from "../../Keyboard"; import IndicatorScrollbar from "../structures/IndicatorScrollbar"; - -// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367 +import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; interface IProps { isMinimized: boolean; @@ -52,12 +50,12 @@ interface IState { const cssClasses = [ "mx_RoomSearch_input", "mx_RoomSearch_icon", // minimized - "mx_RoomSublist2_headerText", - "mx_RoomTile2", - "mx_RoomSublist2_showNButton", + "mx_RoomSublist_headerText", + "mx_RoomTile", + "mx_RoomSublist_showNButton", ]; -export default class LeftPanel2 extends React.Component { +export default class LeftPanel extends React.Component { private listContainerRef: React.RefObject = createRef(); private tagPanelWatcherRef: string; private focusedElement = null; @@ -121,7 +119,7 @@ export default class LeftPanel2 extends React.Component { private doStickyHeaders(list: HTMLDivElement) { const topEdge = list.scrollTop; const bottomEdge = list.offsetHeight + list.scrollTop; - const sublists = list.querySelectorAll(".mx_RoomSublist2"); + const sublists = list.querySelectorAll(".mx_RoomSublist"); const headerRightMargin = 16; // calculated from margins and widths to align with non-sticky tiles const headerStickyWidth = list.clientWidth - headerRightMargin; @@ -137,7 +135,7 @@ export default class LeftPanel2 extends React.Component { let lastTopHeader; let firstBottomHeader; for (const sublist of sublists) { - const header = sublist.querySelector(".mx_RoomSublist2_stickable"); + const header = sublist.querySelector(".mx_RoomSublist_stickable"); header.style.removeProperty("display"); // always clear display:none first // When an element is <=40% off screen, make it take over @@ -173,8 +171,8 @@ export default class LeftPanel2 extends React.Component { } if (style.stickyTop) { - if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) { - header.classList.add("mx_RoomSublist2_headerContainer_stickyTop"); + if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) { + header.classList.add("mx_RoomSublist_headerContainer_stickyTop"); } const newTop = `${list.parentElement.offsetTop}px`; @@ -182,8 +180,8 @@ export default class LeftPanel2 extends React.Component { header.style.top = newTop; } } else { - if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) { - header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop"); + if (header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) { + header.classList.remove("mx_RoomSublist_headerContainer_stickyTop"); } if (header.style.top) { header.style.removeProperty('top'); @@ -191,18 +189,18 @@ export default class LeftPanel2 extends React.Component { } if (style.stickyBottom) { - if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) { - header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom"); + if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) { + header.classList.add("mx_RoomSublist_headerContainer_stickyBottom"); } } else { - if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) { - header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom"); + if (header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) { + header.classList.remove("mx_RoomSublist_headerContainer_stickyBottom"); } } if (style.stickyTop || style.stickyBottom) { - if (!header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) { - header.classList.add("mx_RoomSublist2_headerContainer_sticky"); + if (!header.classList.contains("mx_RoomSublist_headerContainer_sticky")) { + header.classList.add("mx_RoomSublist_headerContainer_sticky"); } const newWidth = `${headerStickyWidth}px`; @@ -210,8 +208,8 @@ export default class LeftPanel2 extends React.Component { header.style.width = newWidth; } } else if (!style.stickyTop && !style.stickyBottom) { - if (header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) { - header.classList.remove("mx_RoomSublist2_headerContainer_sticky"); + if (header.classList.contains("mx_RoomSublist_headerContainer_sticky")) { + header.classList.remove("mx_RoomSublist_headerContainer_sticky"); } if (header.style.width) { header.style.removeProperty('width'); @@ -221,16 +219,16 @@ export default class LeftPanel2 extends React.Component { // add appropriate sticky classes to wrapper so it has // the necessary top/bottom padding to put the sticky header in - const listWrapper = list.parentElement; // .mx_LeftPanel2_roomListWrapper + const listWrapper = list.parentElement; // .mx_LeftPanel_roomListWrapper if (lastTopHeader) { - listWrapper.classList.add("mx_LeftPanel2_roomListWrapper_stickyTop"); + listWrapper.classList.add("mx_LeftPanel_roomListWrapper_stickyTop"); } else { - listWrapper.classList.remove("mx_LeftPanel2_roomListWrapper_stickyTop"); + listWrapper.classList.remove("mx_LeftPanel_roomListWrapper_stickyTop"); } if (firstBottomHeader) { - listWrapper.classList.add("mx_LeftPanel2_roomListWrapper_stickyBottom"); + listWrapper.classList.add("mx_LeftPanel_roomListWrapper_stickyBottom"); } else { - listWrapper.classList.remove("mx_LeftPanel2_roomListWrapper_stickyBottom"); + listWrapper.classList.remove("mx_LeftPanel_roomListWrapper_stickyBottom"); } } @@ -266,10 +264,10 @@ export default class LeftPanel2 extends React.Component { }; private onEnter = () => { - const firstRoom = this.listContainerRef.current.querySelector(".mx_RoomTile2"); + const firstRoom = this.listContainerRef.current.querySelector(".mx_RoomTile"); if (firstRoom) { firstRoom.click(); - this.onSearch(""); // clear the search field + return true; // to get the field to clear } }; @@ -313,30 +311,33 @@ export default class LeftPanel2 extends React.Component { }; private renderHeader(): React.ReactNode { - let breadcrumbs; + return ( +
+ +
+ ); + } + + private renderBreadcrumbs(): React.ReactNode { if (this.state.showBreadcrumbs && !this.props.isMinimized) { - breadcrumbs = ( + return ( - + ); } - - return ( -
- - {breadcrumbs} -
- ); } private renderSearchExplore(): React.ReactNode { return (
{ onVerticalArrow={this.onKeyDown} onEnter={this.onEnter} /> - @@ -358,12 +359,12 @@ export default class LeftPanel2 extends React.Component { public render(): React.ReactNode { const tagPanel = !this.state.showTagPanel ? null : ( -
+
); - const roomList = { />; const containerClasses = classNames({ - "mx_LeftPanel2": true, - "mx_LeftPanel2_hasTagPanel": !!tagPanel, - "mx_LeftPanel2_minimized": this.props.isMinimized, + "mx_LeftPanel": true, + "mx_LeftPanel_hasTagPanel": !!tagPanel, + "mx_LeftPanel_minimized": this.props.isMinimized, }); const roomListClasses = classNames( - "mx_LeftPanel2_actualRoomListContainer", + "mx_LeftPanel_actualRoomListContainer", "mx_AutoHideScrollbar", ); return (
{tagPanel} -
{ _t(customVariables[row[0]].expl) }{_t( + customVariables[row[0]].expl, + customVariables[row[0]].getTextVariables ? + customVariables[row[0]].getTextVariables() : + null, + )}{ row[1] }