PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into joriks/eslint-config

Browse source
This commit is contained in:
Jorik Schellekens 2020-07-20 16:22:32 +01:00
commit b3fa855bd8
454 changed files with 13522 additions and 17619 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

429
CHANGELOG.md
View file

@ -1,3 +1,432 @@
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)
* Upgrade to JS SDK 7.1.0
* Remove duplicate compact settings, handle device level updates
[\#4889](https://github.com/matrix-org/matrix-react-sdk/pull/4889)
Changes in [2.9.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.9.0-rc.1) (2020-07-01)
=============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.8.1...v2.9.0-rc.1)
* Upgrade to JS SDK 7.1.0-rc.1
* Update from Weblate
[\#4869](https://github.com/matrix-org/matrix-react-sdk/pull/4869)
* Fix a number of proliferation issues in the new room list
[\#4828](https://github.com/matrix-org/matrix-react-sdk/pull/4828)
* Fix jumping to read marker for events without tiles
[\#4860](https://github.com/matrix-org/matrix-react-sdk/pull/4860)
* De-duplicate rooms from the room autocomplete provider
[\#4859](https://github.com/matrix-org/matrix-react-sdk/pull/4859)
* Add file upload button to recovery key input
[\#4847](https://github.com/matrix-org/matrix-react-sdk/pull/4847)
* Implement new design on security setup & login
[\#4831](https://github.com/matrix-org/matrix-react-sdk/pull/4831)
* Fix /join slash command via servers including room id as a via
[\#4856](https://github.com/matrix-org/matrix-react-sdk/pull/4856)
* Add Generic Expiring Toast and timing hooks
[\#4855](https://github.com/matrix-org/matrix-react-sdk/pull/4855)
* Fix Room Custom Sounds regression and make ProgressBar relevant again
[\#4846](https://github.com/matrix-org/matrix-react-sdk/pull/4846)
* Including start_sso and start_cas in redirect loop prevention
[\#4854](https://github.com/matrix-org/matrix-react-sdk/pull/4854)
* Clean up TODO comments for new room list
[\#4850](https://github.com/matrix-org/matrix-react-sdk/pull/4850)
* Show timestamp of redaction on hover
[\#4622](https://github.com/matrix-org/matrix-react-sdk/pull/4622)
* Remove the DM button from new room tiles
[\#4849](https://github.com/matrix-org/matrix-react-sdk/pull/4849)
* Hide room list show less button if it would do nothing
[\#4848](https://github.com/matrix-org/matrix-react-sdk/pull/4848)
* Improve message preview copy in new room list
[\#4823](https://github.com/matrix-org/matrix-react-sdk/pull/4823)
* Allow the tag panel to be disabled in the new room list
[\#4844](https://github.com/matrix-org/matrix-react-sdk/pull/4844)
* Make the whole user row clickable in the new room list
[\#4843](https://github.com/matrix-org/matrix-react-sdk/pull/4843)
* Add a new spinner design behind a labs flag
[\#4842](https://github.com/matrix-org/matrix-react-sdk/pull/4842)
* ts-ignore because something is made of fail
[\#4845](https://github.com/matrix-org/matrix-react-sdk/pull/4845)
* Fix Welcome.html CAS and SSO URLs not working
[\#4838](https://github.com/matrix-org/matrix-react-sdk/pull/4838)
* More small tweaks in preparation for Notifications rework
[\#4835](https://github.com/matrix-org/matrix-react-sdk/pull/4835)
* Iterate on the new room list resize handle
[\#4840](https://github.com/matrix-org/matrix-react-sdk/pull/4840)
* Update sublists for new hover states
[\#4837](https://github.com/matrix-org/matrix-react-sdk/pull/4837)
* Tweak parts of the new room list design
[\#4839](https://github.com/matrix-org/matrix-react-sdk/pull/4839)
* Implement new resize handle for dogfooding
[\#4836](https://github.com/matrix-org/matrix-react-sdk/pull/4836)
* Hide app badge count for hidden upgraded rooms (non-highlight)
[\#4834](https://github.com/matrix-org/matrix-react-sdk/pull/4834)
* Move compact modern layout checkbox to 'advanced'
[\#4822](https://github.com/matrix-org/matrix-react-sdk/pull/4822)
* Allow the user to resize the new sublists to 1 tile
[\#4825](https://github.com/matrix-org/matrix-react-sdk/pull/4825)
* Make LoggedInView a real component because it uses shouldComponentUpdate
[\#4832](https://github.com/matrix-org/matrix-react-sdk/pull/4832)
* Small tweaks in preparation for Notifications rework
[\#4829](https://github.com/matrix-org/matrix-react-sdk/pull/4829)
* Remove extraneous debug from the new left panel
[\#4826](https://github.com/matrix-org/matrix-react-sdk/pull/4826)
* Fix icons in the new user menu not showing up
[\#4824](https://github.com/matrix-org/matrix-react-sdk/pull/4824)
* Fix sticky room disappearing/jumping in search results
[\#4817](https://github.com/matrix-org/matrix-react-sdk/pull/4817)
* Show cross-signing / secret storage reset button in more cases
[\#4821](https://github.com/matrix-org/matrix-react-sdk/pull/4821)
* Use theme-capable icons in the user menu
[\#4819](https://github.com/matrix-org/matrix-react-sdk/pull/4819)
* Font support in custom themes
[\#4814](https://github.com/matrix-org/matrix-react-sdk/pull/4814)
* Decrease margin between new sublists
[\#4816](https://github.com/matrix-org/matrix-react-sdk/pull/4816)
* Update profile information in User Menu and truncate where needed
[\#4818](https://github.com/matrix-org/matrix-react-sdk/pull/4818)
* Fix MessageActionBar in irc layout
[\#4802](https://github.com/matrix-org/matrix-react-sdk/pull/4802)
* Mark messages with a black shield if the megolm session isn't trusted
[\#4797](https://github.com/matrix-org/matrix-react-sdk/pull/4797)
* Custom font selection
[\#4761](https://github.com/matrix-org/matrix-react-sdk/pull/4761)
* Use the correct timeline reference for message previews
[\#4812](https://github.com/matrix-org/matrix-react-sdk/pull/4812)
* Fix read receipt handling in the new room list
[\#4811](https://github.com/matrix-org/matrix-react-sdk/pull/4811)
* Improve unread/badge states in new room list (mk II)
[\#4805](https://github.com/matrix-org/matrix-react-sdk/pull/4805)
* Only fire setting changes for changed settings
[\#4803](https://github.com/matrix-org/matrix-react-sdk/pull/4803)
* Trigger room-specific watchers whenever a higher level change happens
[\#4804](https://github.com/matrix-org/matrix-react-sdk/pull/4804)
* Have the theme switcher set the device-level theme to match settings
[\#4810](https://github.com/matrix-org/matrix-react-sdk/pull/4810)
* Fix layout of minimized view for new room list
[\#4808](https://github.com/matrix-org/matrix-react-sdk/pull/4808)
* Fix sticky headers over/under extending themselves in the new room list
[\#4809](https://github.com/matrix-org/matrix-react-sdk/pull/4809)
* Update read receipt remainder for internal font size change
[\#4806](https://github.com/matrix-org/matrix-react-sdk/pull/4806)
* Fix some appearance tab crash and implement style nits
[\#4801](https://github.com/matrix-org/matrix-react-sdk/pull/4801)
* Add message preview for font slider
[\#4770](https://github.com/matrix-org/matrix-react-sdk/pull/4770)
* Add layout options to the appearance tab
[\#4773](https://github.com/matrix-org/matrix-react-sdk/pull/4773)
* Update from Weblate
[\#4800](https://github.com/matrix-org/matrix-react-sdk/pull/4800)
* Support accounts with cross signing but no SSSS
[\#4717](https://github.com/matrix-org/matrix-react-sdk/pull/4717)
* Look for existing verification requests after login
[\#4762](https://github.com/matrix-org/matrix-react-sdk/pull/4762)
* Add a checkpoint to index newly encrypted rooms.
[\#4611](https://github.com/matrix-org/matrix-react-sdk/pull/4611)
* Add support to paginate search results when using Seshat.
[\#4705](https://github.com/matrix-org/matrix-react-sdk/pull/4705)
* User versions in the event index.
[\#4788](https://github.com/matrix-org/matrix-react-sdk/pull/4788)
* Fix crash when filtering new room list too fast
[\#4796](https://github.com/matrix-org/matrix-react-sdk/pull/4796)
* hide search results from unknown rooms
[\#4795](https://github.com/matrix-org/matrix-react-sdk/pull/4795)
* Mark the new room list as ready for general testing
[\#4794](https://github.com/matrix-org/matrix-react-sdk/pull/4794)
* Extend QueryMatcher's sorting heuristic
[\#4784](https://github.com/matrix-org/matrix-react-sdk/pull/4784)
* Lint ts semicolons (aka. The great semicolon migration)
[\#4791](https://github.com/matrix-org/matrix-react-sdk/pull/4791)
* Revert "Use recovery keys over passphrases"
[\#4790](https://github.com/matrix-org/matrix-react-sdk/pull/4790)
* Clear `top` when not sticking headers to the top
[\#4783](https://github.com/matrix-org/matrix-react-sdk/pull/4783)
* Don't show a 'show less' button when it's impossible to collapse
[\#4785](https://github.com/matrix-org/matrix-react-sdk/pull/4785)
* Fix show less/more button occluding the list automatically
[\#4786](https://github.com/matrix-org/matrix-react-sdk/pull/4786)
* Improve room switching in the new room list
[\#4787](https://github.com/matrix-org/matrix-react-sdk/pull/4787)
* Remove labs option to cache 'passphrase'
[\#4789](https://github.com/matrix-org/matrix-react-sdk/pull/4789)
* Remove escape backslashes in non-Markdown messages
[\#4694](https://github.com/matrix-org/matrix-react-sdk/pull/4694)
Changes in [2.8.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.8.1) (2020-06-29) Changes in [2.8.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.8.1) (2020-06-29)
=================================================================================================== ===================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.8.0...v2.8.1) [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.8.0...v2.8.1)

7
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "matrix-react-sdk", "name": "matrix-react-sdk",
"version": "2.8.1", "version": "2.10.1",
"description": "SDK for matrix.org using React", "description": "SDK for matrix.org using React",
"author": "matrix.org", "author": "matrix.org",
"repository": { "repository": {
@ -88,11 +88,11 @@
"prop-types": "^15.5.8", "prop-types": "^15.5.8",
"qrcode": "^1.4.4", "qrcode": "^1.4.4",
"qs": "^6.6.0", "qs": "^6.6.0",
"re-resizable": "^6.5.2",
"react": "^16.9.0", "react": "^16.9.0",
"react-beautiful-dnd": "^4.0.1", "react-beautiful-dnd": "^4.0.1",
"react-dom": "^16.9.0", "react-dom": "^16.9.0",
"react-focus-lock": "^2.2.1", "react-focus-lock": "^2.2.1",
"react-resizable": "^1.10.1",
"react-transition-group": "^4.4.1", "react-transition-group": "^4.4.1",
"resize-observer-polyfill": "^1.5.0", "resize-observer-polyfill": "^1.5.0",
"sanitize-html": "^1.18.4", "sanitize-html": "^1.18.4",
@ -119,7 +119,9 @@
"@babel/register": "^7.7.4", "@babel/register": "^7.7.4",
"@peculiar/webcrypto": "^1.0.22", "@peculiar/webcrypto": "^1.0.22",
"@types/classnames": "^2.2.10", "@types/classnames": "^2.2.10",
"@types/counterpart": "^0.18.1",
"@types/flux": "^3.1.9", "@types/flux": "^3.1.9",
"@types/linkifyjs": "^2.1.3",
"@types/lodash": "^4.14.152", "@types/lodash": "^4.14.152",
"@types/modernizr": "^3.5.3", "@types/modernizr": "^3.5.3",
"@types/node": "^12.12.41", "@types/node": "^12.12.41",
@ -127,6 +129,7 @@
"@types/react": "^16.9", "@types/react": "^16.9",
"@types/react-dom": "^16.9.8", "@types/react-dom": "^16.9.8",
"@types/react-transition-group": "^4.4.0", "@types/react-transition-group": "^4.4.0",
"@types/sanitize-html": "^1.23.3",
"@types/zxcvbn": "^4.4.0", "@types/zxcvbn": "^4.4.0",
"@typescript-eslint/eslint-plugin": "^3.4.0", "@typescript-eslint/eslint-plugin": "^3.4.0",
"@typescript-eslint/parser": "^3.4.0", "@typescript-eslint/parser": "^3.4.0",

150
res/css/_common.scss
View file

@ -160,9 +160,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
background-color: transparent; background-color: transparent;
color: $input-darker-fg-color; color: $input-darker-fg-color;
border-radius: 4px; border-radius: 4px;
border: 1px solid $dialog-close-fg-color; border: 1px solid rgba($primary-fg-color, .1);
// these things should probably not be defined // these things should probably not be defined globally
// globally
margin: 9px; margin: 9px;
flex: 0 0 auto; 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=text]::placeholder,
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder, :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
.mx_textinput input::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 { #mx_theme_tertiaryAccentColor {
color: $roomsublist-label-bg-color; color: $tertiary-accent-color;
} }
/* Expected z-indexes for dialogs: /* Expected z-indexes for dialogs:
@ -264,7 +263,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
padding: 25px 30px 30px 30px; padding: 25px 30px 30px 30px;
max-height: 80%; max-height: 80%;
box-shadow: 2px 15px 30px 0 $dialog-shadow-color; box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
border-radius: 4px; border-radius: 8px;
overflow-y: auto; overflow-y: auto;
} }
@ -319,7 +318,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
.mx_Dialog_titleImage { .mx_Dialog_titleImage {
vertical-align: middle; vertical-align: sub;
width: 25px; width: 25px;
height: 25px; height: 25px;
margin-left: -2px; margin-left: -2px;
@ -588,27 +587,16 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
// A context menu that largely fits the | [icon] [label] | format. // A context menu that largely fits the | [icon] [label] | format.
.mx_IconizedContextMenu { .mx_IconizedContextMenu {
// Put 20px of padding around the whole menu. We do this instead of a min-width: 146px;
// simple `padding: 20px` rule so the horizontal rules added by the
// optionLists is rendered correctly (full width).
> * {
padding-left: 20px;
padding-right: 20px;
&:first-child {
padding-top: 20px;
}
&:last-child {
padding-bottom: 16px;
}
}
.mx_IconizedContextMenu_optionList { .mx_IconizedContextMenu_optionList {
& > * {
padding-left: 20px;
padding-right: 20px;
}
// the notFirst class is for cases where the optionList might be under a header of sorts. // the notFirst class is for cases where the optionList might be under a header of sorts.
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst { &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
margin-top: 12px;
// This is a bit of a hack when we could just use a simple border-top property, // This is a bit of a hack when we could just use a simple border-top property,
// however we have a (kinda) good reason for doing it this way: we need opacity. // however we have a (kinda) good reason for doing it this way: we need opacity.
// To get the right color, we need an opacity modifier which means we have to work // To get the right color, we need an opacity modifier which means we have to work
@ -631,72 +619,76 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
} }
ul { // round the top corners of the top button for the hover effect to be bounded
list-style: none; &:first-child .mx_AccessibleButton:first-child {
margin: 0; border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
padding: 0; }
li { // round the bottom corners of the bottom button for the hover effect to be bounded
margin: 0; &:last-child .mx_AccessibleButton:last-child {
padding: 12px 0 0; border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
}
.mx_AccessibleButton { .mx_AccessibleButton {
text-decoration: none; // pad the inside of the button so that the hover background is padded too
color: $primary-fg-color; padding-top: 12px;
font-size: $font-15px; padding-bottom: 12px;
line-height: $font-24px; text-decoration: none;
color: $primary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
// Create a flexbox to more easily define the list items // Create a flexbox to more easily define the list items
display: flex; display: flex;
align-items: center; align-items: center;
img, .mx_IconizedContextMenu_icon { // icons &:hover {
width: 16px; background-color: $menu-selected-color;
min-width: 16px; }
max-width: 16px;
}
span:last-child { // labels img, .mx_IconizedContextMenu_icon { // icons
padding-left: 14px; width: 16px;
width: 100%; min-width: 16px;
flex: 1; max-width: 16px;
}
// Ellipsize any text overflow span.mx_IconizedContextMenu_label { // labels
text-overflow: ellipsis; padding-left: 14px;
overflow: hidden; width: 100%;
white-space: nowrap; flex: 1;
}
} // Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} }
} }
} }
&.mx_IconizedContextMenu_compact { &.mx_IconizedContextMenu_compact {
> * { .mx_IconizedContextMenu_optionList > * {
padding-left: 11px; padding: 8px 16px 8px 11px;
padding-right: 16px;
&:first-child {
padding-top: 13px;
}
&:last-child {
padding-bottom: 13px;
}
}
.mx_IconizedContextMenu_optionList {
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
margin-top: 10px;
li:first-child {
padding-top: 10px;
}
}
li:first-child {
padding-top: 0;
}
} }
} }
} }
@define-mixin ProgressBarColour $colour {
color: $colour;
&::-moz-progress-bar {
background-color: $colour;
}
&::-webkit-progress-value {
background-color: $colour;
}
}
@define-mixin ProgressBarBorderRadius $radius {
border-radius: $radius;
&::-moz-progress-bar {
border-radius: $radius;
}
&::-webkit-progress-bar,
&::-webkit-progress-value {
border-radius: $radius;
}
}

18
res/css/_components.scss
View file

@ -12,7 +12,6 @@
@import "./structures/_HeaderButtons.scss"; @import "./structures/_HeaderButtons.scss";
@import "./structures/_HomePage.scss"; @import "./structures/_HomePage.scss";
@import "./structures/_LeftPanel.scss"; @import "./structures/_LeftPanel.scss";
@import "./structures/_LeftPanel2.scss";
@import "./structures/_MainSplit.scss"; @import "./structures/_MainSplit.scss";
@import "./structures/_MatrixChat.scss"; @import "./structures/_MatrixChat.scss";
@import "./structures/_MyGroups.scss"; @import "./structures/_MyGroups.scss";
@ -21,14 +20,12 @@
@import "./structures/_RoomDirectory.scss"; @import "./structures/_RoomDirectory.scss";
@import "./structures/_RoomSearch.scss"; @import "./structures/_RoomSearch.scss";
@import "./structures/_RoomStatusBar.scss"; @import "./structures/_RoomStatusBar.scss";
@import "./structures/_RoomSubList.scss";
@import "./structures/_RoomView.scss"; @import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss"; @import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss"; @import "./structures/_SearchBox.scss";
@import "./structures/_TabbedView.scss"; @import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss"; @import "./structures/_TagPanel.scss";
@import "./structures/_ToastContainer.scss"; @import "./structures/_ToastContainer.scss";
@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss"; @import "./structures/_UploadBar.scss";
@import "./structures/_UserMenu.scss"; @import "./structures/_UserMenu.scss";
@import "./structures/_ViewSource.scss"; @import "./structures/_ViewSource.scss";
@ -49,7 +46,9 @@
@import "./views/auth/_ServerTypeSelector.scss"; @import "./views/auth/_ServerTypeSelector.scss";
@import "./views/auth/_Welcome.scss"; @import "./views/auth/_Welcome.scss";
@import "./views/avatars/_BaseAvatar.scss"; @import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_DecoratedRoomAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss"; @import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/avatars/_PulsedAvatar.scss";
@import "./views/context_menus/_MessageContextMenu.scss"; @import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_RoomTileContextMenu.scss"; @import "./views/context_menus/_RoomTileContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss"; @import "./views/context_menus/_StatusMessageContextMenu.scss";
@ -71,6 +70,7 @@
@import "./views/dialogs/_KeyboardShortcutsDialog.scss"; @import "./views/dialogs/_KeyboardShortcutsDialog.scss";
@import "./views/dialogs/_MessageEditHistoryDialog.scss"; @import "./views/dialogs/_MessageEditHistoryDialog.scss";
@import "./views/dialogs/_NewSessionReviewDialog.scss"; @import "./views/dialogs/_NewSessionReviewDialog.scss";
@import "./views/dialogs/_RebrandDialog.scss";
@import "./views/dialogs/_RoomSettingsDialog.scss"; @import "./views/dialogs/_RoomSettingsDialog.scss";
@import "./views/dialogs/_RoomSettingsDialogBridges.scss"; @import "./views/dialogs/_RoomSettingsDialogBridges.scss";
@import "./views/dialogs/_RoomUpgradeDialog.scss"; @import "./views/dialogs/_RoomUpgradeDialog.scss";
@ -105,7 +105,6 @@
@import "./views/elements/_IconButton.scss"; @import "./views/elements/_IconButton.scss";
@import "./views/elements/_ImageView.scss"; @import "./views/elements/_ImageView.scss";
@import "./views/elements/_InlineSpinner.scss"; @import "./views/elements/_InlineSpinner.scss";
@import "./views/elements/_InteractiveTooltip.scss";
@import "./views/elements/_ManageIntegsButton.scss"; @import "./views/elements/_ManageIntegsButton.scss";
@import "./views/elements/_PowerSelector.scss"; @import "./views/elements/_PowerSelector.scss";
@import "./views/elements/_ProgressBar.scss"; @import "./views/elements/_ProgressBar.scss";
@ -143,7 +142,6 @@
@import "./views/messages/_MjolnirBody.scss"; @import "./views/messages/_MjolnirBody.scss";
@import "./views/messages/_ReactionsRow.scss"; @import "./views/messages/_ReactionsRow.scss";
@import "./views/messages/_ReactionsRowButton.scss"; @import "./views/messages/_ReactionsRowButton.scss";
@import "./views/messages/_ReactionsRowButtonTooltip.scss";
@import "./views/messages/_RedactedBody.scss"; @import "./views/messages/_RedactedBody.scss";
@import "./views/messages/_RoomAvatarEvent.scss"; @import "./views/messages/_RoomAvatarEvent.scss";
@import "./views/messages/_SenderProfile.scss"; @import "./views/messages/_SenderProfile.scss";
@ -166,7 +164,6 @@
@import "./views/rooms/_EventTile.scss"; @import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_GroupLayout.scss"; @import "./views/rooms/_GroupLayout.scss";
@import "./views/rooms/_IRCLayout.scss"; @import "./views/rooms/_IRCLayout.scss";
@import "./views/rooms/_InviteOnlyIcon.scss";
@import "./views/rooms/_JumpToBottomButton.scss"; @import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewWidget.scss"; @import "./views/rooms/_LinkPreviewWidget.scss";
@import "./views/rooms/_MemberInfo.scss"; @import "./views/rooms/_MemberInfo.scss";
@ -179,23 +176,18 @@
@import "./views/rooms/_PresenceLabel.scss"; @import "./views/rooms/_PresenceLabel.scss";
@import "./views/rooms/_ReplyPreview.scss"; @import "./views/rooms/_ReplyPreview.scss";
@import "./views/rooms/_RoomBreadcrumbs.scss"; @import "./views/rooms/_RoomBreadcrumbs.scss";
@import "./views/rooms/_RoomBreadcrumbs2.scss";
@import "./views/rooms/_RoomDropTarget.scss";
@import "./views/rooms/_RoomHeader.scss"; @import "./views/rooms/_RoomHeader.scss";
@import "./views/rooms/_RoomList.scss"; @import "./views/rooms/_RoomList.scss";
@import "./views/rooms/_RoomList2.scss";
@import "./views/rooms/_RoomPreviewBar.scss"; @import "./views/rooms/_RoomPreviewBar.scss";
@import "./views/rooms/_RoomRecoveryReminder.scss"; @import "./views/rooms/_RoomRecoveryReminder.scss";
@import "./views/rooms/_RoomSublist2.scss"; @import "./views/rooms/_RoomSublist.scss";
@import "./views/rooms/_RoomTile.scss"; @import "./views/rooms/_RoomTile.scss";
@import "./views/rooms/_RoomTile2.scss";
@import "./views/rooms/_RoomTileIcon.scss"; @import "./views/rooms/_RoomTileIcon.scss";
@import "./views/rooms/_RoomUpgradeWarningBar.scss"; @import "./views/rooms/_RoomUpgradeWarningBar.scss";
@import "./views/rooms/_SearchBar.scss"; @import "./views/rooms/_SearchBar.scss";
@import "./views/rooms/_SendMessageComposer.scss"; @import "./views/rooms/_SendMessageComposer.scss";
@import "./views/rooms/_Stickers.scss"; @import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss"; @import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_UserOnlineDot.scss";
@import "./views/rooms/_WhoIsTypingTile.scss"; @import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_AvatarSetting.scss"; @import "./views/settings/_AvatarSetting.scss";
@import "./views/settings/_CrossSigningPanel.scss"; @import "./views/settings/_CrossSigningPanel.scss";
@ -224,6 +216,6 @@
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss"; @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/terms/_InlineTermsAgreement.scss"; @import "./views/terms/_InlineTermsAgreement.scss";
@import "./views/verification/_VerificationShowSas.scss"; @import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallView.scss"; @import "./views/voip/_CallView.scss";
@import "./views/voip/_IncomingCallbox.scss";
@import "./views/voip/_VideoView.scss"; @import "./views/voip/_VideoView.scss";

1
res/css/_font-sizes.scss
View file

@ -68,5 +68,6 @@ $font-49px: 4.9rem;
$font-50px: 5.0rem; $font-50px: 5.0rem;
$font-51px: 5.1rem; $font-51px: 5.1rem;
$font-52px: 5.2rem; $font-52px: 5.2rem;
$font-78px: 7.8rem;
$font-88px: 8.8rem; $font-88px: 8.8rem;
$font-400px: 40rem; $font-400px: 40rem;

2
res/css/structures/_ContextualMenu.scss
View file

@ -31,7 +31,7 @@ limitations under the License.
} }
.mx_ContextualMenu { .mx_ContextualMenu {
border-radius: 4px; border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color; background-color: $menu-bg-color;
color: $primary-fg-color; color: $primary-fg-color;

8
res/css/structures/_GroupView.scss
View file

@ -29,12 +29,12 @@ limitations under the License.
align-items: center; align-items: center;
display: flex; display: flex;
padding-bottom: 10px; padding-bottom: 10px;
padding-left: 19px;
} }
.mx_GroupView_header_view { .mx_GroupView_header_view {
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
padding-bottom: 0px; padding-bottom: 0px;
padding-left: 19px;
padding-right: 8px; padding-right: 8px;
} }
@ -63,11 +63,11 @@ limitations under the License.
} }
.mx_GroupHeader_editButton::before { .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 { .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 { .mx_GroupView_hostingSignup img {
@ -182,6 +182,7 @@ limitations under the License.
.mx_GroupView_body { .mx_GroupView_body {
flex-grow: 1; flex-grow: 1;
margin: 0 24px;
} }
.mx_GroupView_rooms { .mx_GroupView_rooms {
@ -250,6 +251,7 @@ limitations under the License.
.mx_GroupView_membershipSubSection { .mx_GroupView_membershipSubSection {
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
padding-bottom: 8px;
} }
.mx_GroupView_membershipSubSection .mx_Spinner { .mx_GroupView_membershipSubSection .mx_Spinner {

2
res/css/structures/_HeaderButtons.scss
View file

@ -22,7 +22,7 @@ limitations under the License.
content: ""; content: "";
background-color: $header-divider-color; background-color: $header-divider-color;
opacity: 0.5; opacity: 0.5;
margin: 0 15px; margin: 6px 8px;
border-radius: 1px; border-radius: 1px;
width: 1px; width: 1px;
} }

2
res/css/structures/_HomePage.scss
View file

@ -72,7 +72,7 @@ limitations under the License.
&:hover { &:hover {
color: $accent-color; color: $accent-color;
background: rgba(#03b381, 0.06); background: rgba($accent-color, 0.06);
&::before { &::before {
background-color: $accent-color; background-color: $accent-color;

313
res/css/structures/_LeftPanel.scss
View file

@ -1,6 +1,5 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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. limitations under the License.
*/ */
.mx_LeftPanel_container { $tagPanelWidth: 56px; // only applies in this file, used for calculations
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;
}
.mx_LeftPanel { .mx_LeftPanel {
flex: 1; background-color: $roomlist-bg-color;
overflow-x: hidden; min-width: 260px;
display: flex; max-width: 50%;
flex-direction: column;
min-height: 0;
}
.mx_LeftPanel .mx_AppTile_mini { // Create a row-based flexbox for the TagPanel and the room list
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 {
display: flex; display: flex;
.mx_SearchBox { .mx_LeftPanel_tagPanelContainer {
flex: 1 1 0; flex-grow: 0;
min-width: 0; flex-shrink: 0;
margin: 4px 9px 1px 9px; flex-basis: $tagPanelWidth;
} height: 100%;
}
.mx_LeftPanel_explore { // Create another flexbox so the TagPanel fills the container
flex: 0 0 50%; display: flex;
overflow: hidden;
transition: flex-basis 0.2s;
box-sizing: border-box;
&.mx_LeftPanel_explore_hidden { // TagPanel handles its own CSS
flex-basis: 0;
} }
.mx_AccessibleButton { &:not(.mx_LeftPanel_hasTagPanel) {
font-size: $font-14px; .mx_LeftPanel_roomListContainer {
margin: 4px 0 1px 9px; width: 100%;
padding: 9px; }
padding-left: 42px; }
font-weight: 600;
color: $notice-secondary-color;
position: relative;
border-radius: 4px;
&:hover { // Note: The 'room list' in this context is actually everything that isn't the tag
background-color: $primary-bg-color; // 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 { .mx_LeftPanel_breadcrumbsContainer {
cursor: pointer; overflow-y: hidden;
mask: url('$(res)/img/explore.svg'); overflow-x: scroll;
mask-repeat: no-repeat; margin: 12px 12px 0 12px;
mask-position: center center; flex: 0 0 auto;
content: ""; // Create yet another flexbox, this time within the row, to ensure items stay
left: 14px; // aligned correctly. This is also a row-based flexbox.
top: 10px; display: flex;
width: 16px; align-items: center;
height: 16px;
background-color: $notice-secondary-color; &.mx_IndicatorScrollbar_leftOverflow {
position: absolute; 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;
}
}
} }
} }
} }

159
res/css/structures/_LeftPanel2.scss
View file

@ -1,159 +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_LeftPanel during replacement of old component
$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 {
padding: 12px 12px 20px; // 12px top, 12px sides, 20px bottom
// 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: hidden;
margin-top: 8px;
}
}
.mx_LeftPanel2_filterContainer {
margin-left: 12px;
margin-right: 12px;
// 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
margin: 0;
width: 0;
// Don't forget to hide the masked ::before icon
visibility: hidden;
}
.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_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;
}
}
}
}
}

2
res/css/structures/_MatrixChat.scss
View file

@ -66,7 +66,7 @@ limitations under the License.
} }
/* not the left panel, and not the resize handle, so the roomview/groupview/... */ /* 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; background-color: $primary-bg-color;
flex: 1 1 0; flex: 1 1 0;

61
res/css/structures/_RightPanel.scss
View file

@ -23,6 +23,13 @@ limitations under the License.
max-width: 50%; max-width: 50%;
display: flex; display: flex;
flex-direction: column; 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 { .mx_RightPanel_header {
@ -44,22 +51,20 @@ limitations under the License.
.mx_RightPanel_headerButton { .mx_RightPanel_headerButton {
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;
vertical-align: top; margin-left: 1px;
margin-left: 5px; margin-right: 1px;
margin-right: 5px; height: 32px;
text-align: center; width: 32px;
border-bottom: 2px solid transparent;
height: 20px;
width: 20px;
position: relative; position: relative;
border-radius: 100%;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 4px; // center with parent of 32px
left: 0; left: 4px; // center with parent of 32px
height: 20px; height: 24px;
width: 20px; width: 24px;
background-color: $rightpanel-button-color; background-color: $rightpanel-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
@ -67,38 +72,46 @@ limitations under the License.
} }
.mx_RightPanel_membersButton::before { .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; mask-position: center;
} }
.mx_RightPanel_filesButton::before { .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; mask-position: center;
} }
.mx_RightPanel_notifsButton::before { .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; mask-position: center;
} }
.mx_RightPanel_groupMembersButton::before { .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; mask-position: center;
} }
.mx_RightPanel_roomsButton::before { .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; mask-position: center;
} }
.mx_RightPanel_headerButton_highlight::after { .mx_RightPanel_headerButton_highlight {
content: ''; background: rgba($accent-color, 0.25);
position: absolute; // make the icon the accent color too
bottom: -6px; &::before {
left: 0; background-color: $accent-color;
right: 0; }
height: 2px; }
background-color: $button-bg-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 { .mx_RightPanel_headerButton_badge {

4
res/css/structures/_RoomSearch.scss
View file

@ -18,8 +18,8 @@ limitations under the License.
.mx_RoomSearch { .mx_RoomSearch {
flex: 1; flex: 1;
border-radius: 20px; border-radius: 20px;
background-color: $roomlist2-button-bg-color; background-color: $roomlist-button-bg-color;
height: 26px; height: 28px;
padding: 2px; padding: 2px;
// Create a flexbox for the icons (easier to manage) // Create a flexbox for the icons (easier to manage)

187
res/css/structures/_RoomSubList.scss
View file

@ -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;
}
}

2
res/css/structures/_RoomView.scss
View file

@ -261,7 +261,7 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_voipButton { .mx_RoomView_voipButton {
float: right; float: right;
margin-right: 13px; margin-right: 13px;
margin-top: 10px; margin-top: 13px;
cursor: pointer; cursor: pointer;
} }

16
res/css/structures/_TagPanel.scss
View file

@ -33,7 +33,7 @@ limitations under the License.
.mx_TagPanel .mx_TagPanel_clearButton_container { .mx_TagPanel .mx_TagPanel_clearButton_container {
/* Constant height within flex mx_TagPanel */ /* Constant height within flex mx_TagPanel */
height: 70px; height: 70px;
width: 60px; width: 56px;
flex: none; flex: none;
@ -51,7 +51,7 @@ limitations under the License.
.mx_TagPanel .mx_TagPanel_divider { .mx_TagPanel .mx_TagPanel_divider {
height: 0px; height: 0px;
width: 42px; width: 34px;
border-bottom: 1px solid $panel-divider-color; border-bottom: 1px solid $panel-divider-color;
display: none; display: none;
} }
@ -66,15 +66,13 @@ limitations under the License.
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: 100%; padding-top: 6px;
} }
.mx_TagPanel .mx_TagPanel_tagTileContainer > div { .mx_TagPanel .mx_TagPanel_tagTileContainer > div {
height: 40px; margin: 6px 0;
padding: 10px 0 9px 0;
} }
.mx_TagPanel .mx_TagTile { .mx_TagPanel .mx_TagTile {
margin: 9px 0;
// opacity: 0.5; // opacity: 0.5;
position: relative; position: relative;
} }
@ -86,8 +84,8 @@ limitations under the License.
.mx_TagPanel .mx_TagTile_plus { .mx_TagPanel .mx_TagTile_plus {
margin-bottom: 12px; margin-bottom: 12px;
height: 40px; height: 32px;
width: 40px; width: 32px;
border-radius: 20px; border-radius: 20px;
background-color: $roomheader-addroom-bg-color; background-color: $roomheader-addroom-bg-color;
position: relative; position: relative;
@ -159,7 +157,7 @@ limitations under the License.
font-weight: 600; font-weight: 600;
font-size: $font-14px; font-size: $font-14px;
padding: 0 5px; padding: 0 5px;
background-color: $roomtile-name-color; background-color: $muted-fg-color;
} }
.mx_TagTile_badgeHighlight { .mx_TagTile_badgeHighlight {

23
res/css/structures/_ToastContainer.scss
View file

@ -48,14 +48,17 @@ limitations under the License.
padding: 8px; padding: 8px;
&.mx_Toast_hasIcon { &.mx_Toast_hasIcon {
&::after { &::before, &::after {
content: ""; content: "";
width: 22px; width: 22px;
height: 22px; height: 22px;
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
mask-size: 100%; mask-size: 100%;
mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-size: 100%;
background-repeat: no-repeat;
} }
&.mx_Toast_icon_verification::after { &.mx_Toast_icon_verification::after {
@ -63,8 +66,22 @@ limitations under the License.
background-color: $primary-fg-color; background-color: $primary-fg-color;
} }
&.mx_Toast_icon_verification_warning::after { &.mx_Toast_icon_verification_warning {
background-image: url("$(res)/img/e2e/warning.svg"); // 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 { .mx_Toast_title, .mx_Toast_body {

49
res/css/structures/_TopLeftMenuButton.scss
View file

@ -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;
}

25
res/css/structures/_UserMenu.scss
View file

@ -15,6 +15,10 @@ limitations under the License.
*/ */
.mx_UserMenu { .mx_UserMenu {
// to make the ... button sort of aligned with the explore button below
padding-right: 6px;
.mx_UserMenu_headerButtons { .mx_UserMenu_headerButtons {
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -32,7 +36,7 @@ limitations under the License.
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $primary-fg-color; 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 { .mx_UserMenu_userAvatar {
border-radius: 32px; // should match avatar size border-radius: 32px; // should match avatar size
object-fit: cover;
} }
} }
@ -86,6 +91,8 @@ limitations under the License.
.mx_UserMenu_contextMenu_redRow { .mx_UserMenu_contextMenu_redRow {
.mx_AccessibleButton { .mx_AccessibleButton {
padding-top: 16px;
padding-bottom: 16px;
color: $warning-color !important; // !important to override styles from context menu color: $warning-color !important; // !important to override styles from context menu
} }
@ -95,6 +102,8 @@ limitations under the License.
} }
.mx_UserMenu_contextMenu_header { .mx_UserMenu_contextMenu_header {
padding: 20px;
// Create a flexbox to organize the header a bit easier // Create a flexbox to organize the header a bit easier
display: flex; display: flex;
align-items: center; align-items: center;
@ -163,30 +172,30 @@ limitations under the License.
} }
.mx_UserMenu_iconHome::before { .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 { .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 { .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 { .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 { .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 { .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 { .mx_UserMenu_iconSignOut::before {
mask-image: url('$(res)/img/feather-customised/sign-out.svg'); mask-image: url('$(res)/img/element-icons/leave.svg');
} }
} }

5
res/css/views/auth/_AuthBody.scss
View file

@ -128,6 +128,11 @@ limitations under the License.
margin-top: 16px; margin-top: 16px;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
.mx_InlineSpinner img {
vertical-align: sub;
margin-right: 5px;
}
} }
.mx_AuthBody_paddedFooter_subtitle { .mx_AuthBody_paddedFooter_subtitle {

20
res/css/views/auth/_PassphraseField.scss
View file

@ -18,16 +18,6 @@ $PassphraseStrengthHigh: $accent-color;
$PassphraseStrengthMedium: $username-variant5-color; $PassphraseStrengthMedium: $username-variant5-color;
$PassphraseStrengthLow: $notice-primary-color; $PassphraseStrengthLow: $notice-primary-color;
@define-mixin ProgressBarColour $colour {
color: $colour;
&::-moz-progress-bar {
background-color: $colour;
}
&::-webkit-progress-value {
background-color: $colour;
}
}
progress.mx_PassphraseField_progress { progress.mx_PassphraseField_progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
@ -36,15 +26,7 @@ progress.mx_PassphraseField_progress {
position: absolute; position: absolute;
top: -12px; top: -12px;
border-radius: 2px; @mixin ProgressBarBorderRadius "2px";
&::-moz-progress-bar {
border-radius: 2px;
}
&::-webkit-progress-bar,
&::-webkit-progress-value {
border-radius: 2px;
}
@mixin ProgressBarColour $PassphraseStrengthLow; @mixin ProgressBarColour $PassphraseStrengthLow;
&[value="2"], &[value="3"] { &[value="2"], &[value="3"] {
@mixin ProgressBarColour $PassphraseStrengthMedium; @mixin ProgressBarColour $PassphraseStrengthMedium;

23
res/css/views/rooms/_RoomList2.scss → res/css/views/avatars/_DecoratedRoomAvatar.scss
View file

@ -14,14 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// TODO: Rename to mx_RoomList during replacement of old component // XXX: We shouldn't be using TemporaryTile anywhere - delete it.
.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
position: relative;
.mx_RoomList2 { .mx_RoomTileIcon {
width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists) position: absolute;
bottom: 0;
right: 0;
}
// Create a column-based flexbox for the sublists. That's pretty much all we have to .mx_NotificationBadge, .mx_RoomTile_badgeContainer {
// worry about in this stylesheet. position: absolute;
display: flex; top: 0;
flex-direction: column; right: 0;
flex-wrap: nowrap; // let the column overflow height: 18px;
width: 18px;
}
} }

30
res/css/views/avatars/_PulsedAvatar.scss Normal file
View file

@ -0,0 +1,30 @@
/*
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_PulsedAvatar {
@keyframes shadow-pulse {
0% {
box-shadow: 0 0 0 0px rgba($accent-color, 0.2);
}
100% {
box-shadow: 0 0 0 6px rgba($accent-color, 0);
}
}
img {
animation: shadow-pulse 1s infinite;
}
}

22
res/css/views/context_menus/_TagTileContextMenu.scss
View file

@ -15,9 +15,8 @@ limitations under the License.
*/ */
.mx_TagTileContextMenu_item { .mx_TagTileContextMenu_item {
padding-top: 8px; padding: 8px;
padding-right: 20px; padding-right: 20px;
padding-bottom: 8px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
@ -25,15 +24,22 @@ limitations under the License.
line-height: $font-16px; line-height: $font-16px;
} }
.mx_TagTileContextMenu_item object { .mx_TagTileContextMenu_item::before {
pointer-events: none; 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 { .mx_TagTileContextMenu_hideCommunity::before {
padding-right: 8px; mask-image: url('$(res)/img/element-icons/hide.svg');
padding-left: 4px;
display: inline-block;
} }
.mx_TagTileContextMenu_separator { .mx_TagTileContextMenu_separator {

63
res/css/views/dialogs/_RebrandDialog.scss Normal file
View file

@ -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');
}

10
res/css/views/dialogs/_RoomSettingsDialog.scss
View file

@ -18,19 +18,19 @@ limitations under the License.
// ========================================================== // ==========================================================
.mx_RoomSettingsDialog_settingsIcon::before { .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 { .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 { .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 { .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 { .mx_RoomSettingsDialog_bridgesIcon::before {
@ -39,7 +39,7 @@ limitations under the License.
} }
.mx_RoomSettingsDialog_warningIcon::before { .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 { .mx_RoomSettingsDialog .mx_Dialog_title {

2
res/css/views/dialogs/_ShareDialog.scss
View file

@ -55,7 +55,7 @@ limitations under the License.
margin-left: 5px; margin-left: 5px;
width: 20px; width: 20px;
height: 20px; height: 20px;
background-repeat: none; background-repeat: no-repeat;
} }
.mx_ShareDialog_split { .mx_ShareDialog_split {

20
res/css/views/dialogs/_UserSettingsDialog.scss
View file

@ -18,41 +18,41 @@ limitations under the License.
// ========================================================== // ==========================================================
.mx_UserSettingsDialog_settingsIcon::before { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .mx_UserSettingsDialog_flairIcon::before {
mask-image: url('$(res)/img/feather-customised/flair.svg'); mask-image: url('$(res)/img/element-icons/settings/flair.svg');
} }

73
res/css/views/dialogs/secretstorage/_AccessSecretStorageDialog.scss
View file

@ -15,20 +15,79 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_AccessSecretStorageDialog_titleWithIcon::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-fg-color;
}
.mx_AccessSecretStorageDialog_secureBackupTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
}
.mx_AccessSecretStorageDialog_securePhraseTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
}
.mx_AccessSecretStorageDialog_keyStatus { .mx_AccessSecretStorageDialog_keyStatus {
height: 30px; height: 30px;
} }
.mx_AccessSecretStorageDialog_primaryContainer { .mx_AccessSecretStorageDialog_passPhraseInput {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding: 20px;
}
.mx_AccessSecretStorageDialog_passPhraseInput,
.mx_AccessSecretStorageDialog_recoveryKeyInput {
width: 300px; width: 300px;
border: 1px solid $accent-color; border: 1px solid $accent-color;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
} }
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
display: flex;
align-items: center;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
flex-grow: 1;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
margin: 16px;
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
&::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: 20px;
height: 20px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
margin-right: 5px;
}
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
color: $input-valid-border-color;
&::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
background-color: $input-valid-border-color;
}
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
color: $input-invalid-border-color;
&::before {
mask-image: url('$(res)/img/feather-customised/x.svg');
background-color: $input-invalid-border-color;
}
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
display: none;
}

88
res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
View file

@ -48,6 +48,29 @@ limitations under the License.
margin-bottom: 1em; margin-bottom: 1em;
} }
.mx_CreateSecretStorageDialog_titleWithIcon::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-fg-color;
}
.mx_CreateSecretStorageDialog_secureBackupTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
}
.mx_CreateSecretStorageDialog_securePhraseTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
}
.mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody {
text-align: center;
}
.mx_CreateSecretStorageDialog_primaryContainer { .mx_CreateSecretStorageDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding-top: 20px; padding-top: 20px;
@ -59,6 +82,36 @@ limitations under the License.
display: block; display: block;
} }
.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
margin-bottom: 16px;
padding: 11px;
}
.mx_CreateSecretStorageDialog_optionTitle {
color: $dialog-title-fg-color;
font-weight: 600;
font-size: $font-18px;
padding-bottom: 10px;
}
.mx_CreateSecretStorageDialog_optionIcon {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-fg-color;
}
.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
}
.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
}
.mx_CreateSecretStorageDialog_passPhraseContainer { .mx_CreateSecretStorageDialog_passPhraseContainer {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -73,33 +126,42 @@ limitations under the License.
margin-left: 20px; margin-left: 20px;
} }
.mx_CreateSecretStorageDialog_recoveryKeyHeader {
margin-bottom: 1em;
}
.mx_CreateSecretStorageDialog_recoveryKeyContainer { .mx_CreateSecretStorageDialog_recoveryKeyContainer {
display: flex; width: 380px;
margin-left: auto;
margin-right: auto;
} }
.mx_CreateSecretStorageDialog_recoveryKey { .mx_CreateSecretStorageDialog_recoveryKey {
width: 262px; font-weight: bold;
text-align: center;
padding: 20px; padding: 20px;
color: $info-plinth-fg-color; color: $info-plinth-fg-color;
background-color: $info-plinth-bg-color; background-color: $info-plinth-bg-color;
margin-right: 12px; border-radius: 6px;
word-spacing: 1em;
margin-bottom: 20px;
} }
.mx_CreateSecretStorageDialog_recoveryKeyButtons { .mx_CreateSecretStorageDialog_recoveryKeyButtons {
flex: 1;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
} }
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton { .mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
margin-right: 10px; width: 160px;
} padding-left: 0px;
padding-right: 0px;
.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
flex: 1;
white-space: nowrap; white-space: nowrap;
} }
.mx_CreateSecretStorageDialog_continueSpinner {
margin-top: 33px;
text-align: right;
}
.mx_CreateSecretStorageDialog_continueSpinner img {
width: 20px;
height: 20px;
}

2
res/css/views/elements/_Field.scss
View file

@ -191,5 +191,5 @@ limitations under the License.
} }
.mx_Field .mx_CountryDropdown { .mx_Field .mx_CountryDropdown {
width: 67px; width: $font-78px;
} }

91
res/css/views/elements/_InteractiveTooltip.scss
View file

@ -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
}
}

30
res/css/views/elements/_ProgressBar.scss
View file

@ -1,5 +1,5 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -14,12 +14,26 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_ProgressBar { progress.mx_ProgressBar {
height: 5px; height: 4px;
border: 1px solid $progressbar-color; width: 60px;
} border-radius: 10px;
overflow: hidden;
appearance: none;
border: 0;
.mx_ProgressBar_fill { @mixin ProgressBarBorderRadius "10px";
height: 100%; @mixin ProgressBarColour $accent-color;
background-color: $progressbar-color; ::-webkit-progress-value {
transition: width 1s;
}
::-moz-progress-bar {
transition: padding-bottom 1s;
padding-bottom: var(--value);
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-15px);
padding-left: 15px;
height: 0;
}
} }

10
res/css/views/elements/_Spinner.scss
View file

@ -23,16 +23,6 @@ limitations under the License.
flex: 1; flex: 1;
} }
.mx_Spinner_spin img {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.mx_MatrixChat_middlePanel .mx_Spinner { .mx_MatrixChat_middlePanel .mx_Spinner {
height: auto; height: auto;
} }

14
res/css/views/elements/_StyledRadioButton.scss
View file

@ -25,13 +25,14 @@ limitations under the License.
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: baseline;
flex-grow: 1; flex-grow: 1;
> span { > .mx_RadioButton_content {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column;
margin-left: 8px; margin-left: 8px;
margin-right: 8px; margin-right: 8px;
@ -105,3 +106,12 @@ limitations under the License.
} }
} }
} }
.mx_RadioButton_outlined {
border: 1px solid $input-darker-bg-color;
border-radius: 8px;
}
.mx_RadioButton_checked {
border-color: $accent-color;
}

47
res/css/views/elements/_Tooltip.scss
View file

@ -51,21 +51,27 @@ limitations under the License.
.mx_Tooltip { .mx_Tooltip {
display: none; display: none;
position: fixed; position: fixed;
border: 1px solid $menu-border-color; border-radius: 8px;
border-radius: 4px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; 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
z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
padding: 10px; padding: 10px;
pointer-events: none; pointer-events: none;
line-height: $font-14px; line-height: $font-14px;
font-size: $font-12px; font-size: $font-12px;
font-weight: 600; font-weight: 500;
color: $primary-fg-color;
max-width: 200px; max-width: 200px;
word-break: break-word; word-break: break-word;
margin-right: 50px; 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 { &.mx_Tooltip_visible {
animation: mx_fadein 0.2s forwards; animation: mx_fadein 0.2s forwards;
} }
@ -75,18 +81,23 @@ limitations under the License.
} }
} }
.mx_Tooltip_timeline { // These tooltips use an older style with a chevron
box-shadow: none; .mx_Field_tooltip {
background-color: $tooltip-timeline-bg-color; background-color: $menu-bg-color;
color: $tooltip-timeline-fg-color; color: $primary-fg-color;
text-align: center; border: 1px solid $menu-border-color;
border: none; text-align: unset;
border-radius: 3px;
font-size: $font-14px;
line-height: 1.2;
padding: 6px 8px;
.mx_Tooltip_chevron::after { .mx_Tooltip_chevron {
border-right-color: $tooltip-timeline-bg-color; display: unset;
} }
} }
.mx_Tooltip_title {
font-weight: 600;
}
.mx_Tooltip_sub {
opacity: 0.7;
margin-top: 4px;
}

8
res/css/views/messages/_MessageActionBar.scss
View file

@ -91,17 +91,17 @@ limitations under the License.
} }
.mx_MessageActionBar_reactButton::after { .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 { .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 { .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 { .mx_MessageActionBar_optionsButton::after {
mask-image: url('$(res)/img/icon_context.svg'); mask-image: url('$(res)/img/element-icons/context-menu.svg');
} }

6
res/css/views/messages/_ReactionsRowButton.scss
View file

@ -16,7 +16,6 @@ limitations under the License.
.mx_ReactionsRowButton { .mx_ReactionsRowButton {
display: inline-flex; display: inline-flex;
height: 20px;
line-height: $font-21px; line-height: $font-21px;
margin-right: 6px; margin-right: 6px;
padding: 0 6px; padding: 0 6px;
@ -35,11 +34,6 @@ limitations under the License.
border-color: $reaction-row-button-selected-border-color; 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 { .mx_ReactionsRowButton_content {
max-width: 100px; max-width: 100px;
overflow: hidden; overflow: hidden;

29
res/css/views/messages/_common_CryptoEvent.scss
View file

@ -15,28 +15,45 @@ limitations under the License.
*/ */
.mx_cryptoEvent { .mx_cryptoEvent {
display: grid; display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content; grid-template-columns: 24px minmax(0, 1fr) min-content;
&.mx_cryptoEvent_icon::before,
&.mx_cryptoEvent_icon::after { &.mx_cryptoEvent_icon::after {
grid-column: 1; grid-column: 1;
grid-row: 1 / 3; grid-row: 1 / 3;
width: 16px; width: 16px;
height: 16px; height: 16px;
content: ""; content: "";
background-image: url("$(res)/img/e2e/normal.svg"); top: 0;
background-repeat: no-repeat; bottom: 0;
background-size: 100%; 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; 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 { &.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 { &.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 { .mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {

4
res/css/views/right_panel/_UserInfo.scss
View file

@ -53,7 +53,7 @@ limitations under the License.
} }
.mx_UserInfo_separator { .mx_UserInfo_separator {
border-bottom: 1px solid lightgray; border-bottom: 1px solid rgba($primary-fg-color, .1);
} }
.mx_UserInfo_memberDetailsContainer { .mx_UserInfo_memberDetailsContainer {
@ -121,7 +121,7 @@ limitations under the License.
h3 { h3 {
text-transform: uppercase; text-transform: uppercase;
color: $notice-secondary-color; color: $notice-secondary-color;
font-weight: bold; font-weight: 600;
font-size: $font-12px; font-size: $font-12px;
margin: 4px 0; margin: 4px 0;
} }

3
res/css/views/rooms/_AppsDrawer.scss
View file

@ -81,7 +81,7 @@ $AppsDrawerBodyHeight: 273px;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 5px solid $widget-menu-bar-bg-color; border: 5px solid $widget-menu-bar-bg-color;
border-radius: 4px; border-radius: 8px;
} }
.mx_AppTile_mini { .mx_AppTile_mini {
@ -98,6 +98,7 @@ $AppsDrawerBodyHeight: 273px;
.mx_AppTile_mini .mx_AppTile_persistedWrapper { .mx_AppTile_mini .mx_AppTile_persistedWrapper {
height: 114px; height: 114px;
min-width: 300px;
} }
.mx_AppTileMenuBar { .mx_AppTileMenuBar {

3
res/css/views/rooms/_Autocomplete.scss
View file

@ -6,9 +6,10 @@
border: 1px solid $primary-hairline-color; border: 1px solid $primary-hairline-color;
background: $primary-bg-color; background: $primary-bg-color;
border-bottom: none; border-bottom: none;
border-radius: 4px 4px 0 0; border-radius: 8px 8px 0 0;
max-height: 50vh; max-height: 50vh;
overflow: auto; overflow: auto;
box-shadow: 0px -16px 32px $composer-shadow-color;
} }
.mx_Autocomplete_ProviderSection { .mx_Autocomplete_ProviderSection {

60
res/css/views/rooms/_E2EIcon.scss
View file

@ -22,28 +22,58 @@ limitations under the License.
display: block; display: block;
} }
.mx_E2EIcon_warning::after, .mx_E2EIcon_warning,
.mx_E2EIcon_normal::after, .mx_E2EIcon_normal,
.mx_E2EIcon_verified::after { .mx_E2EIcon_verified {
content: ""; &::before, &::after {
display: block; content: "";
position: absolute; display: block;
top: 0; position: absolute;
bottom: 0; top: 0;
left: 0; bottom: 0;
right: 0; left: 0;
background-repeat: no-repeat; right: 0;
background-size: contain; 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 { .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 { .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 { .mx_E2EIcon_verified::after {
background-image: url('$(res)/img/e2e/verified.svg'); mask-image: url('$(res)/img/e2e/verified.svg');
background-color: $accent-color;
} }

2
res/css/views/rooms/_EntityTile.scss
View file

@ -26,8 +26,6 @@ limitations under the License.
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
right: 7px; right: 7px;
height: 15px;
width: 15px;
} }
} }

70
res/css/views/rooms/_EventTile.scss
View file

@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$left-gutter: 64px;
.mx_EventTile { .mx_EventTile {
max-width: 100%; max-width: 100%;
clear: both; clear: both;
@ -45,7 +47,7 @@ limitations under the License.
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
top: $font-8px; top: $font-8px;
left: 65px; left: $left-gutter;
} }
.mx_EventTile_continuation { .mx_EventTile_continuation {
@ -73,7 +75,7 @@ limitations under the License.
/* the next three lines, along with overflow hidden, truncate long display names */ /* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: calc(100% - 65px); max-width: calc(100% - $left-gutter);
} }
.mx_EventTile .mx_SenderProfile .mx_Flair { .mx_EventTile .mx_SenderProfile .mx_Flair {
@ -111,7 +113,7 @@ limitations under the License.
.mx_EventTile_line, .mx_EventTile_reply { .mx_EventTile_line, .mx_EventTile_reply {
position: relative; position: relative;
padding-left: 65px; /* left gutter */ padding-left: $left-gutter;
border-radius: 4px; border-radius: 4px;
} }
@ -182,7 +184,7 @@ limitations under the License.
* TODO: ultimately we probably want some transition on here. * TODO: ultimately we probably want some transition on here.
*/ */
.mx_EventTile_selected > .mx_EventTile_line { .mx_EventTile_selected > .mx_EventTile_line {
border-left: $accent-color 5px solid; border-left: $accent-color 4px solid;
padding-left: 60px; padding-left: 60px;
background-color: $event-selected-color; background-color: $event-selected-color;
} }
@ -328,34 +330,67 @@ limitations under the License.
.mx_EventTile_e2eIcon { .mx_EventTile_e2eIcon {
position: absolute; position: absolute;
top: 6px; top: 6px;
left: 46px; left: 44px;
width: 15px; width: 14px;
height: 15px; height: 14px;
display: block; display: block;
bottom: 0; bottom: 0;
right: 0; right: 0;
opacity: 0.2; opacity: 0.2;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; 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 { .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; opacity: 1;
} }
.mx_EventTile_e2eIcon_unknown { .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; opacity: 1;
} }
.mx_EventTile_e2eIcon_unencrypted { .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; opacity: 1;
} }
.mx_EventTile_e2eIcon_unauthenticated { .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; opacity: 1;
} }
@ -397,10 +432,6 @@ limitations under the License.
margin-bottom: 0px; 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_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown .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 { .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 { .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 { .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, .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
@ -505,7 +536,7 @@ limitations under the License.
display: inline-block; display: inline-block;
visibility: hidden; visibility: hidden;
cursor: pointer; cursor: pointer;
top: 6px; top: 8px;
right: 6px; right: 6px;
width: 19px; width: 19px;
height: 19px; height: 19px;
@ -537,7 +568,6 @@ limitations under the License.
.mx_EventTile_content .markdown-body a { .mx_EventTile_content .markdown-body a {
color: $accent-color-alt; color: $accent-color-alt;
text-decoration: underline;
} }
.mx_EventTile_content .markdown-body .hljs { .mx_EventTile_content .markdown-body .hljs {

2
res/css/views/rooms/_GroupLayout.scss
View file

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$left-gutter: 65px; $left-gutter: 64px;
.mx_GroupLayout { .mx_GroupLayout {
.mx_EventTile { .mx_EventTile {

6
res/css/views/rooms/_IRCLayout.scss
View file

@ -97,7 +97,7 @@ $irc-line-height: $font-18px;
} }
> .mx_EventTile_e2eIcon { > .mx_EventTile_e2eIcon {
position: relative; position: absolute;
right: unset; right: unset;
left: unset; left: unset;
top: 0; top: 0;
@ -181,9 +181,11 @@ $irc-line-height: $font-18px;
> span { > span {
display: flex; display: flex;
> .mx_SenderProfile_name { > .mx_SenderProfile_name,
> .mx_SenderProfile_aux {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
min-width: var(--name-width);
} }
} }
} }

58
res/css/views/rooms/_InviteOnlyIcon.scss
View file

@ -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;
}
}

9
res/css/views/rooms/_JumpToBottomButton.scss
View file

@ -41,6 +41,11 @@ limitations under the License.
// with text-align in parent // with text-align in parent
display: inline-block; display: inline-block;
padding: 0 4px; padding: 0 4px;
color: $accent-fg-color;
background-color: $muted-fg-color;
}
.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
color: $secondary-accent-color; color: $secondary-accent-color;
background-color: $warning-color; background-color: $warning-color;
} }
@ -51,7 +56,7 @@ limitations under the License.
border-radius: 19px; border-radius: 19px;
box-sizing: border-box; box-sizing: border-box;
background: $primary-bg-color; background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color; border: 1.3px solid $muted-fg-color;
cursor: pointer; cursor: pointer;
} }
@ -65,5 +70,5 @@ limitations under the License.
mask: url('$(res)/img/icon-jump-to-bottom.svg'); mask: url('$(res)/img/icon-jump-to-bottom.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: 9px 14px; mask-position: 9px 14px;
background: $roomtile-name-color; background: $muted-fg-color;
} }

36
res/css/views/rooms/_MemberList.scss
View file

@ -26,6 +26,10 @@ limitations under the License.
flex: 1 0 auto; flex: 1 0 auto;
} }
.mx_SearchBox {
margin-bottom: 5px;
}
h2 { h2 {
text-transform: uppercase; text-transform: uppercase;
color: $h3-color; color: $h3-color;
@ -59,32 +63,27 @@ limitations under the License.
.mx_GroupMemberList_query, .mx_GroupMemberList_query,
.mx_GroupRoomList_query { .mx_GroupRoomList_query {
flex: 1 1 0; flex: 1 1 0;
// stricter rule to override the one in _common.scss
&[type="text"] {
font-size: $font-12px;
}
} }
.mx_MemberList_wrapper { .mx_MemberList_wrapper {
padding: 10px; padding: 10px;
} }
.mx_MemberList_invite {
.mx_MemberList_invite,
.mx_RightPanel_invite {
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
background-color: $button-bg-color; background-color: $button-bg-color;
border-radius: 4px; border-radius: 4px;
padding: 8px; margin: 5px 9px 9px;
margin: 9px;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: $button-fg-color; color: $button-fg-color;
font-weight: 600; font-weight: 600;
.mx_RightPanel_icon {
padding-right: 5px;
padding-top: 2px;
}
} }
.mx_MemberList_invite.mx_AccessibleButton_disabled { .mx_MemberList_invite.mx_AccessibleButton_disabled {
@ -93,8 +92,17 @@ limitations under the License.
} }
.mx_MemberList_invite span { .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-repeat: no-repeat;
background-position: center left; 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');
} }

25
res/css/views/rooms/_MessageComposer.scss
View file

@ -20,7 +20,7 @@ limitations under the License.
margin: auto; margin: auto;
border-top: 1px solid $primary-hairline-color; border-top: 1px solid $primary-hairline-color;
position: relative; position: relative;
padding-left: 84px; padding-left: 82px;
} }
.mx_MessageComposer_replaced_wrapper { .mx_MessageComposer_replaced_wrapper {
@ -60,7 +60,7 @@ limitations under the License.
.mx_MessageComposer .mx_MessageComposer_avatar { .mx_MessageComposer .mx_MessageComposer_avatar {
position: absolute; position: absolute;
left: 27px; left: 26px;
} }
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
@ -76,8 +76,8 @@ limitations under the License.
left: 60px; left: 60px;
margin-right: 0; // Counteract the E2EIcon class margin-right: 0; // Counteract the E2EIcon class
margin-left: 3px; // Counteract the E2EIcon class margin-left: 3px; // Counteract the E2EIcon class
width: 15px; width: 12px;
height: 15px; height: 12px;
} }
.mx_MessageComposer_noperm_error { .mx_MessageComposer_noperm_error {
@ -196,30 +196,35 @@ limitations under the License.
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
} }
&.mx_MessageComposer_hangup::before {
background-color: $warning-color;
}
} }
.mx_MessageComposer_upload::before { .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 { .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 { .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 { .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 { .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 { .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 { .mx_MessageComposer_formatting {

10
res/css/views/rooms/_MessageComposerFormatBar.scss
View file

@ -75,23 +75,23 @@ limitations under the License.
} }
.mx_MessageComposerFormatBar_buttonIconBold::after { .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 { .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 { .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 { .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 { .mx_MessageComposerFormatBar_buttonIconCode::after {
mask-image: url('$(res)/img/format/code.svg'); mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
} }
} }

16
res/css/views/rooms/_NotificationBadge.scss
View file

@ -27,7 +27,7 @@ limitations under the License.
// ^- The count is an element floating within that. // ^- The count is an element floating within that.
&.mx_NotificationBadge_visible { &.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 // Create a flexbox to order the count a bit easier
display: flex; display: flex;
@ -42,21 +42,23 @@ limitations under the License.
// These are the 3 background types // These are the 3 background types
&.mx_NotificationBadge_dot { &.mx_NotificationBadge_dot {
background-color: $primary-fg-color; // increased visibility
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 6px; border-radius: 6px;
} }
&.mx_NotificationBadge_2char { &.mx_NotificationBadge_2char {
width: 16px; width: $font-16px;
height: 16px; height: $font-16px;
border-radius: 16px; border-radius: $font-16px;
} }
&.mx_NotificationBadge_3char { &.mx_NotificationBadge_3char {
width: 26px; width: $font-26px;
height: 16px; height: $font-16px;
border-radius: 16px; border-radius: $font-16px;
} }
// The following is the floating badge // The following is the floating badge

3
res/css/views/rooms/_ReplyPreview.scss
View file

@ -22,9 +22,10 @@ limitations under the License.
border: 1px solid $primary-hairline-color; border: 1px solid $primary-hairline-color;
background: $primary-bg-color; background: $primary-bg-color;
border-bottom: none; border-bottom: none;
border-radius: 4px 4px 0 0; border-radius: 8px 8px 0 0;
max-height: 50vh; max-height: 50vh;
overflow: auto; overflow: auto;
box-shadow: 0px -16px 32px $composer-shadow-color;
} }
.mx_ReplyPreview_section { .mx_ReplyPreview_section {

114
res/css/views/rooms/_RoomBreadcrumbs.scss
View file

@ -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"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -15,98 +15,42 @@ limitations under the License.
*/ */
.mx_RoomBreadcrumbs { .mx_RoomBreadcrumbs {
position: relative; width: 100%;
height: 42px;
padding: 8px; // Create a flexbox for the crumbs
padding-bottom: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start;
// 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%;
}
.mx_RoomBreadcrumbs_crumb { .mx_RoomBreadcrumbs_crumb {
margin-left: 4px; margin-right: 8px;
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;
width: 32px; width: 32px;
transform: scale(1);
} }
.mx_RoomBreadcrumbs_preAnimate { // These classes come from the CSSTransition component. There's many more classes we
width: 0; // could care about, but this is all we worried about for now. The animation works by
transform: scale(0); // 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 { .mx_RoomBreadcrumbs_placeholder {
opacity: 0.5; font-weight: 600;
} font-size: $font-14px;
line-height: 32px; // specifically to match the height this is not scaled
// Note: we have to manually control the gradient and stuff, but the IndicatorScrollbar height: 32px;
// 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_Tooltip {
margin-left: -42px;
margin-top: -42px;
}

51
res/css/views/rooms/_RoomBreadcrumbs2.scss
View file

@ -1,51 +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.
*/
.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;
}
}

55
res/css/views/rooms/_RoomDropTarget.scss
View file

@ -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;
}

65
res/css/views/rooms/_RoomHeader.scss
View file

@ -15,26 +15,34 @@ limitations under the License.
*/ */
.mx_RoomHeader { .mx_RoomHeader {
flex: 0 0 52px; flex: 0 0 50px;
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
background-color: $roomheader-bg-color;
.mx_E2EIcon { .mx_RoomHeader_e2eIcon {
margin: 0; height: 12px;
position: absolute; width: 12px;
bottom: -2px;
right: -6px; .mx_E2EIcon {
height: 15px; margin: 0;
width: 15px; position: absolute;
height: 12px;
width: 12px;
}
} }
} }
.mx_RoomHeader_wrapper { .mx_RoomHeader_wrapper {
margin: auto; margin: auto;
height: 52px; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 0; min-width: 0;
padding: 0 10px 0 19px; padding: 0 10px 0 18px;
.mx_InviteOnlyIcon_large {
margin: 0;
}
} }
.mx_RoomHeader_spinner { .mx_RoomHeader_spinner {
@ -67,7 +75,6 @@ limitations under the License.
.mx_RoomHeader_buttons { .mx_RoomHeader_buttons {
display: flex; display: flex;
background-color: $primary-bg-color; background-color: $primary-bg-color;
padding-right: 5px;
} }
.mx_RoomHeader_info { .mx_RoomHeader_info {
@ -173,7 +180,7 @@ limitations under the License.
.mx_RoomHeader_avatar { .mx_RoomHeader_avatar {
flex: 0; flex: 0;
margin: 0 7px; margin: 0 6px 0 7px;
position: relative; position: relative;
} }
@ -201,41 +208,53 @@ limitations under the License.
.mx_RoomHeader_button { .mx_RoomHeader_button {
position: relative; position: relative;
margin-left: 10px; margin-left: 1px;
margin-right: 1px;
cursor: pointer; cursor: pointer;
height: 20px; height: 32px;
width: 20px; width: 32px;
border-radius: 100%;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
height: 20px; top: 4px; // center with parent of 32px
width: 20px; left: 4px; // center with parent of 32px
height: 24px;
width: 24px;
background-color: $roomheader-button-color; background-color: $roomheader-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
} }
&:hover {
background: rgba($accent-color, 0.1);
&::before {
background-color: $accent-color;
}
}
} }
.mx_RoomHeader_settingsButton::before { .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 { .mx_RoomHeader_forgetButton::before {
mask-image: url('$(res)/img/leave.svg'); mask-image: url('$(res)/img/element-icons/leave.svg');
width: 26px; width: 26px;
} }
.mx_RoomHeader_searchButton::before { .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 { .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 { .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 { .mx_RoomHeader_showPanel {
@ -251,7 +270,7 @@ limitations under the License.
} }
.mx_RoomHeader_pinnedButton::before { .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 { .mx_RoomHeader_pinsIndicator {

59
res/css/views/rooms/_RoomList.scss
View file

@ -1,6 +1,5 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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. limitations under the License.
*/ */
.mx_RoomList.mx_RoomList2 {
overflow-y: auto;
}
.mx_RoomList { .mx_RoomList {
/* take up remaining space below TopLeftMenu */ width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists)
flex: 1;
min-height: 0;
overflow-y: hidden;
}
.mx_RoomList .mx_ResizeHandle { // Create a column-based flexbox for the sublists. That's pretty much all we have to
// needed so the z-index takes effect // worry about in this stylesheet.
position: relative; display: flex;
} flex-direction: column;
flex-wrap: nowrap; // let the column overflow
/* 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;
} }

245
res/css/views/rooms/_RoomSublist2.scss → res/css/views/rooms/_RoomSublist.scss
View file

@ -14,21 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// TODO: Rename to mx_RoomSublist during replacement of old component .mx_RoomSublist {
.mx_RoomSublist2 {
// The sublist is a column of rows, essentially // The sublist is a column of rows, essentially
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 8px; margin-left: 8px;
margin-bottom: 4px;
width: 100%; width: 100%;
&:first-child { flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
margin-top: 12px; // so we're not up against the search/filter
}
.mx_RoomSublist2_headerContainer { .mx_RoomSublist_headerContainer {
// Create a flexbox to make alignment easy // Create a flexbox to make alignment easy
display: flex; display: flex;
align-items: center; align-items: center;
@ -44,18 +41,15 @@ limitations under the License.
// all works by ensuring the header text has a fixed height when sticky so the // 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. // 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. // to work correctly.
padding-bottom: 8px; padding-bottom: 8px;
height: 24px; height: 24px;
color: $roomlist-header-color;
.mx_RoomSublist2_stickable { .mx_RoomSublist_stickable {
flex: 1; flex: 1;
max-width: 100%; max-width: 100%;
z-index: 2; // Prioritize headers in the visible list over sticky ones
// Set the same background color as the room list for sticky headers
background-color: $roomlist2-bg-color;
// Create a flexbox to make ordering easy // Create a flexbox to make ordering easy
display: flex; display: flex;
@ -65,26 +59,26 @@ limitations under the License.
// to identify when a header is sticky. If we didn't have a consistent sticky class, // 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 // we'd have to do the "is sticky" checks again on click, as clicking the header
// when sticky scrolls instead of collapses the list. // when sticky scrolls instead of collapses the list.
&.mx_RoomSublist2_headerContainer_sticky { &.mx_RoomSublist_headerContainer_sticky {
position: fixed; position: fixed;
z-index: 1; // over top of other elements, but still under the ones in the visible list
height: 32px; // to match the header container height: 32px; // to match the header container
// width set by JS // width set by JS
width: calc(100% - 22px);
} }
&.mx_RoomSublist2_headerContainer_stickyBottom { &.mx_RoomSublist_headerContainer_stickyBottom {
bottom: 0; bottom: 0;
} }
// We don't have a top style because the top is dependent on the room list header's // 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. // 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 // Sticky Headers End
// *************************** // ***************************
.mx_RoomSublist2_badgeContainer { .mx_RoomSublist_badgeContainer {
// Create another flexbox row because it's super easy to position the badge this way. // Create another flexbox row because it's super easy to position the badge this way.
display: flex; display: flex;
align-items: center; align-items: center;
@ -92,19 +86,19 @@ limitations under the License.
// Apply the width and margin to the badge so the container doesn't occupy dead space // Apply the width and margin to the badge so the container doesn't occupy dead space
.mx_NotificationBadge { .mx_NotificationBadge {
width: 16px; // Do not set a width so the badges get properly sized
margin-left: 8px; // same as menu+aux buttons margin-left: 8px; // same as menu+aux buttons
} }
} }
&:not(.mx_RoomSublist2_headerContainer_withAux) { &:not(.mx_RoomSublist_headerContainer_withAux) {
.mx_NotificationBadge { .mx_NotificationBadge {
margin-right: 4px; // just to push it over a bit, aligning it with the other elements margin-right: 4px; // just to push it over a bit, aligning it with the other elements
} }
} }
.mx_RoomSublist2_auxButton, .mx_RoomSublist_auxButton,
.mx_RoomSublist2_menuButton { .mx_RoomSublist_menuButton {
margin-left: 8px; // should be the same as the notification badge margin-left: 8px; // should be the same as the notification badge
position: relative; position: relative;
width: 24px; width: 24px;
@ -126,26 +120,25 @@ limitations under the License.
} }
// Hide the menu button by default // Hide the menu button by default
.mx_RoomSublist2_menuButton { .mx_RoomSublist_menuButton {
visibility: hidden; visibility: hidden;
width: 0; width: 0;
margin: 0; margin: 0;
} }
.mx_RoomSublist2_auxButton::before { .mx_RoomSublist_auxButton::before {
mask-image: url('$(res)/img/feather-customised/plus.svg'); mask-image: url('$(res)/img/feather-customised/plus.svg');
} }
.mx_RoomSublist2_menuButton::before { .mx_RoomSublist_menuButton::before {
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg'); mask-image: url('$(res)/img/element-icons/context-menu.svg');
} }
.mx_RoomSublist2_headerText { .mx_RoomSublist_headerText {
flex: 1; flex: 1;
max-width: calc(100% - 16px); // 16px is the badge width max-width: calc(100% - 16px); // 16px is the badge width
text-transform: uppercase;
line-height: $font-16px; line-height: $font-16px;
font-size: $font-12px; font-size: $font-13px;
font-weight: 600; font-weight: 600;
// Ellipsize any text overflow // Ellipsize any text overflow
@ -153,7 +146,7 @@ limitations under the License.
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
.mx_RoomSublist2_collapseBtn { .mx_RoomSublist_collapseBtn {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 12px; width: 12px;
@ -174,15 +167,24 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); 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'); mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
} }
} }
} }
} }
.mx_RoomSublist2_resizeBox { // In the general case, we leave height of headers alone even if sticky, so
margin-bottom: 4px; // for the resize handle // that the sublists below them do not jump. However, that leaves a gap
// 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_RoomSublist_headerContainer {
height: 0;
padding-bottom: 4px;
}
.mx_RoomSublist_resizeBox {
position: relative; position: relative;
// Create another flexbox column for the tiles // Create another flexbox column for the tiles
@ -190,126 +192,125 @@ limitations under the License.
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
.mx_RoomSublist2_showNButton { .mx_RoomSublist_tiles {
cursor: pointer; flex: 1 0 0;
font-size: $font-13px; overflow: hidden;
line-height: $font-18px; // need this to be flex otherwise the overflow hidden from above
color: $roomtile2-preview-color; // sometimes vertically centers the clipped list ... no idea why it would do this
// as the box model should be top aligned. Happens in both FF and Chromium
// This is the same color as the left panel background because it needs
// to occlude the lastmost tile in the list.
background-color: $roomlist2-bg-color;
// Update the render() function for RoomSublist2 if these change
// Update the ListLayout class for minVisibleTiles if these change.
//
// At 24px high and 8px padding on the top this equates to 0.65 of
// a tile due to how the padding calculations work.
height: 24px;
padding-top: 8px;
// We force this to the bottom so it will overlap rooms as needed.
// We account for the space it takes up (24px) in the code through padding.
position: absolute;
bottom: 4px; // the height of the resize handle
left: 0;
right: 0;
// We create a flexbox to cheat at alignment
display: flex; display: flex;
align-items: center; flex-direction: column;
.mx_RoomSublist2_showNButtonChevron { mask-image: linear-gradient(0deg, transparent, black 4px);
position: relative; }
width: 16px;
height: 16px;
margin-left: 12px;
margin-right: 18px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $roomtile2-preview-color;
}
.mx_RoomSublist2_showMoreButtonChevron { .mx_RoomSublist_resizerHandles_showNButton {
mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); flex: 0 0 32px;
} }
.mx_RoomSublist2_showLessButtonChevron { .mx_RoomSublist_resizerHandles {
mask-image: url('$(res)/img/feather-customised/chevron-up.svg'); flex: 0 0 4px;
}
&.mx_RoomSublist2_isCutting::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
box-shadow: 0px -2px 3px rgba(46, 47, 50, 0.08);
}
} }
// Class name comes from the ResizableBox component // Class name comes from the ResizableBox component
// The hover state needs to use the whole sublist, not just the resizable box, // The hover state needs to use the whole sublist, not just the resizable box,
// so that selector is below and one level higher. // so that selector is below and one level higher.
.react-resizable-handle { .mx_RoomSublist_resizerHandle {
cursor: ns-resize; cursor: ns-resize;
border-radius: 3px; border-radius: 3px;
// Update RESIZE_HANDLE_HEIGHT if this changes // Override styles from library
height: 4px; width: unset !important;
height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
// This is positioned directly below the 'show more' button. // This is positioned directly below the 'show more' button.
position: absolute; position: absolute;
bottom: 0; bottom: 0 !important; // override from library
// Together, these make the bar 64px wide // Together, these make the bar 64px wide
left: calc(50% - 32px); // These are also overridden from the library
right: calc(50% - 32px); left: calc(50% - 32px) !important;
right: calc(50% - 32px) !important;
} }
&:hover, &.mx_RoomSublist2_hasMenuOpen { &:hover, &.mx_RoomSublist_hasMenuOpen {
.react-resizable-handle { .mx_RoomSublist_resizerHandle {
opacity: 0.8; opacity: 0.8;
background-color: $primary-fg-color; background-color: $primary-fg-color;
} }
} }
} }
&.mx_RoomSublist2_hasMenuOpen, .mx_RoomSublist_showNButton {
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover { cursor: pointer;
.mx_RoomSublist2_menuButton { font-size: $font-13px;
line-height: $font-18px;
color: $roomtile-preview-color;
// Update the render() function for RoomSublist if these change
// Update the ListLayout class for minVisibleTiles if these change.
height: 24px;
padding-bottom: 4px;
// We create a flexbox to cheat at alignment
display: flex;
align-items: center;
.mx_RoomSublist_showNButtonChevron {
position: relative;
width: 16px;
height: 16px;
margin-left: 12px;
margin-right: 18px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $roomtile-preview-color;
}
.mx_RoomSublist_showMoreButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_RoomSublist_showLessButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
}
}
&.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; visibility: visible;
width: 24px; width: 24px;
margin-left: 8px; margin-left: 8px;
} }
} }
&.mx_RoomSublist2_minimized { &.mx_RoomSublist_minimized {
.mx_RoomSublist2_headerContainer { .mx_RoomSublist_headerContainer {
height: auto; height: auto;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
.mx_RoomSublist2_badgeContainer { .mx_RoomSublist_badgeContainer {
order: 0; order: 0;
align-self: flex-end; align-self: flex-end;
margin-right: 0; margin-right: 0;
} }
.mx_RoomSublist2_stickable { .mx_RoomSublist_stickable {
order: 1; order: 1;
max-width: 100%; max-width: 100%;
} }
.mx_RoomSublist2_auxButton { .mx_RoomSublist_auxButton {
order: 2; order: 2;
visibility: visible; visibility: visible;
width: 32px !important; // !important to override hover styles width: 32px !important; // !important to override hover styles
height: 32px !important; // !important to override hover styles height: 32px !important; // !important to override hover styles
margin-left: 0 !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; margin-top: 8px;
&::before { &::before {
@ -319,25 +320,25 @@ limitations under the License.
} }
} }
.mx_RoomSublist2_resizeBox { .mx_RoomSublist_resizeBox {
align-items: center; align-items: center;
}
.mx_RoomSublist2_showNButton { .mx_RoomSublist_showNButton {
flex-direction: column; flex-direction: column;
.mx_RoomSublist2_showNButtonChevron { .mx_RoomSublist_showNButtonChevron {
margin-right: 12px; // to center margin-right: 12px; // to center
}
} }
} }
.mx_RoomSublist2_menuButton { .mx_RoomSublist_menuButton {
height: 16px; height: 16px;
} }
&.mx_RoomSublist2_hasMenuOpen, &.mx_RoomSublist_hasMenuOpen,
& > .mx_RoomSublist2_headerContainer:hover { & > .mx_RoomSublist_headerContainer:hover {
.mx_RoomSublist2_menuButton { .mx_RoomSublist_menuButton {
visibility: visible; visibility: visible;
position: absolute; position: absolute;
bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment 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 // This is the same color as the left panel background because it needs
// to occlude the sublist title // to occlude the sublist title
background-color: $roomlist2-bg-color; background-color: $roomlist-bg-color;
&::before { &::before {
top: 0; top: 0;
@ -357,8 +358,8 @@ limitations under the License.
} }
} }
&.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) { &.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) {
.mx_RoomSublist2_menuButton { .mx_RoomSublist_menuButton {
bottom: 8px; // align to the middle of name, 40px less than the `bottom` above. 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; padding: 20px 16px;
width: 250px; width: 250px;
@ -374,11 +375,11 @@ limitations under the License.
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
margin-right: 16px; // additional 16px margin-right: 16px; // additional 16px
border: 1px solid $roomsublist2-divider-color; border: 1px solid $roomsublist-divider-color;
opacity: 0.1; opacity: 0.1;
} }
.mx_RoomSublist2_contextMenu_title { .mx_RoomSublist_contextMenu_title {
font-size: $font-15px; font-size: $font-15px;
line-height: $font-20px; line-height: $font-20px;
font-weight: 600; font-weight: 600;
@ -389,3 +390,7 @@ limitations under the License.
margin-top: 8px; margin-top: 8px;
} }
} }
.mx_RoomSublist_addRoomTooltip {
margin-top: -3px;
}

391
res/css/views/rooms/_RoomTile.scss
View file

@ -1,6 +1,5 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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. limitations under the License.
*/ */
// Note: the room tile expects to be in a flexbox column container
.mx_RoomTile { .mx_RoomTile {
display: flex; margin-bottom: 4px;
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;
padding: 4px; padding: 4px;
width: 24px;
vertical-align: middle;
}
.mx_RoomTile_hasSubtext .mx_RoomTile_avatar { // The tile is also a flexbox row itself
padding-top: 0; display: flex;
vertical-align: super;
}
.mx_RoomTile_dm { &.mx_RoomTile_selected,
display: block; &:hover,
position: absolute; &:focus-within,
bottom: 0; &.mx_RoomTile_hasMenuOpen {
right: -5px; background-color: $roomtile-selected-bg-color;
z-index: 2; border-radius: 8px;
} }
// Note we match .mx_E2EIcon to make sure this matches more tightly than just .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
// .mx_E2EIcon on its own margin-right: 8px;
.mx_RoomTile_e2eIcon.mx_E2EIcon { }
height: 14px;
width: 14px;
display: block;
position: absolute;
bottom: -2px;
right: -5px;
z-index: 1;
margin: 0;
}
.mx_RoomTile_name { .mx_RoomTile_nameContainer {
font-size: $font-14px; flex-grow: 1;
padding: 0 4px; min-width: 0; // allow flex to shrink it
color: $roomtile-name-color; margin-right: 8px; // spacing to buttons/badges
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.mx_RoomTile_badge { // Create a new column layout flexbox for the name parts
flex: 0 1 content; display: flex;
border-radius: 0.8em; flex-direction: column;
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;
justify-content: center; 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; 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 { // If the room has an overriden notification setting then we always show the notifications menu button
position: absolute; .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
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 {
display: block; 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, // We use these both in context menus and the room tiles
.mx_RoomTile_badge.mx_RoomTile_badgeUnread { .mx_RoomTile_iconBell::before {
background-color: $roomtile-name-color; 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_contextMenu {
.mx_RoomTile_badge.mx_RoomTile_badgeRed { .mx_RoomTile_contextMenu_redRow {
color: $accent-fg-color; .mx_AccessibleButton {
background-color: $warning-color; color: $warning-color !important; // !important to override styles from context menu
} }
.mx_RoomTile_unread, .mx_RoomTile_highlight { .mx_IconizedContextMenu_icon::before {
.mx_RoomTile_name { background-color: $warning-color;
font-weight: 600; }
color: $roomtile-selected-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;
}

203
res/css/views/rooms/_RoomTile2.scss
View file

@ -1,203 +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_RoomTile during replacement of old component
// 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;
flex-wrap: wrap;
&.mx_RoomTile2_selected, &:hover, &.mx_RoomTile2_hasMenuOpen {
background-color: $roomtile2-selected-bg-color;
border-radius: 32px;
}
.mx_RoomTile2_avatarContainer {
margin-right: 8px;
position: relative;
.mx_RoomTileIcon {
position: absolute;
bottom: 0;
right: 0;
}
}
.mx_RoomTile2_nameContainer {
flex-grow: 1;
max-width: calc(100% - 58px); // 32px avatar, 18px badge area, 8px margin on avatar
// 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_badgeContainer {
width: 18px;
height: 32px;
// Create another flexbox row because it's super easy to position the badge at
// the end this way.
display: flex;
align-items: center;
justify-content: center;
}
// The menu button is hidden by default
// TODO: [Notifications] Use mx_RoomTile2_notificationsButton, similar to the following approach:
// https://github.com/matrix-org/matrix-react-sdk/blob/2180a56074f3698fc0241c309a72ba6cad802d1c/res/css/views/rooms/_RoomSublist2.scss#L48-L76
// You'll need to do the same down below on the &:hover selector for the tile.
// ... also remove this 4 line TODO comment.
.mx_RoomTile2_menuButton,
.mx_RoomTile2_notificationsButton {
width: 0;
height: 0;
visibility: hidden;
position: relative;
&::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
.mx_RoomTile2_menuButton::before {
top: 8px;
left: -1px; // this is off-center to align it with the badges
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
}
&:not(.mx_RoomTile2_minimized) {
&:hover, &.mx_RoomTile2_hasMenuOpen {
// Hide the badge container on hover because it'll be a menu button
.mx_RoomTile2_badgeContainer {
width: 0;
height: 0;
visibility: hidden;
}
.mx_RoomTile2_menuButton {
width: 18px;
height: 32px;
visibility: visible;
}
}
}
&.mx_RoomTile2_minimized {
flex-direction: column;
align-items: center;
position: relative;
.mx_RoomTile2_avatarContainer {
margin-right: 0;
}
.mx_RoomTile2_badgeContainer {
position: absolute;
top: 0;
right: 0;
height: 18px;
}
}
}
.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_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_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');
}
}

2
res/css/views/rooms/_RoomTileIcon.scss
View file

@ -18,7 +18,7 @@ limitations under the License.
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 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 { .mx_RoomTileIcon_globe::before {

2
res/css/views/rooms/_Stickers.scss
View file

@ -31,7 +31,7 @@
.mx_Stickers_addLink { .mx_Stickers_addLink {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
text-decoration: underline; color: $button-link-fg-color;
} }
.mx_Stickers_hideStickers { .mx_Stickers_hideStickers {

8
res/css/views/rooms/_TopUnreadMessagesBar.scss
View file

@ -42,7 +42,7 @@ limitations under the License.
border-radius: 19px; border-radius: 19px;
box-sizing: border-box; box-sizing: border-box;
background: $primary-bg-color; background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color; border: 1.3px solid $muted-fg-color;
cursor: pointer; cursor: pointer;
} }
@ -54,7 +54,7 @@ limitations under the License.
mask-image: url('$(res)/img/icon-jump-to-first-unread.svg'); mask-image: url('$(res)/img/icon-jump-to-first-unread.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: 9px 13px; mask-position: 9px 13px;
background: $roomtile-name-color; background: $muted-fg-color;
} }
.mx_TopUnreadMessagesBar_markAsRead { .mx_TopUnreadMessagesBar_markAsRead {
@ -62,7 +62,7 @@ limitations under the License.
width: 18px; width: 18px;
height: 18px; height: 18px;
background: $primary-bg-color; background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color; border: 1.3px solid $muted-fg-color;
border-radius: 10px; border-radius: 10px;
margin: 5px auto; margin: 5px auto;
} }
@ -76,5 +76,5 @@ limitations under the License.
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 10px; mask-size: 10px;
mask-position: 4px 4px; mask-position: 4px 4px;
background: $roomtile-name-color; background: $muted-fg-color;
} }

2
res/css/views/rooms/_WhoIsTypingTile.scss
View file

@ -59,7 +59,7 @@ limitations under the License.
flex: 1; flex: 1;
font-size: $font-14px; font-size: $font-14px;
font-weight: 600; font-weight: 600;
color: $eventtile-meta-color; color: $roomtopic-color;
} }
.mx_WhoIsTypingTile_label > span { .mx_WhoIsTypingTile_label > span {

22
res/css/views/settings/_AvatarSetting.scss
View file

@ -27,28 +27,6 @@ limitations under the License.
.mx_AccessibleButton.mx_AccessibleButton_kind_primary { .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
margin-top: 8px; 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 { .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {

4
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
View file

@ -193,6 +193,10 @@ limitations under the License.
.mx_EventTile_content { .mx_EventTile_content {
margin-right: 0; margin-right: 0;
} }
&.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
border-color: $accent-color;
}
} }
.mx_RadioButton { .mx_RadioButton {

89
res/css/views/voip/_CallContainer.scss Normal file
View file

@ -0,0 +1,89 @@
/*
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_CallContainer {
position: absolute;
right: 20px;
bottom: 72px;
border-radius: 8px;
overflow: hidden;
z-index: 100;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
cursor: pointer;
.mx_CallPreview {
.mx_VideoView {
width: 350px;
}
.mx_VideoView_localVideoFeed {
border-radius: 8px;
overflow: hidden;
}
}
.mx_IncomingCallBox {
min-width: 250px;
background-color: $primary-bg-color;
padding: 8px;
.mx_IncomingCallBox_CallerInfo {
display: flex;
direction: row;
img {
margin: 8px;
}
> div {
display: flex;
flex-direction: column;
justify-content: center;
}
h1, p {
margin: 0px;
padding: 0px;
font-size: $font-14px;
line-height: $font-16px;
}
h1 {
font-weight: bold;
}
}
.mx_IncomingCallBox_buttons {
padding: 8px;
display: flex;
flex-direction: row;
> .mx_IncomingCallBox_spacer {
width: 8px;
}
> * {
flex-shrink: 0;
flex-grow: 1;
margin-right: 0;
font-size: $font-15px;
line-height: $font-24px;
}
}
}
}

73
res/css/views/voip/_CallView.scss
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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; background-color: $accent-color;
color: $accent-fg-color; color: $accent-fg-color;
cursor: pointer; cursor: pointer;
text-align: center;
padding: 6px; padding: 6px;
font-weight: bold; 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;
}
} }

69
res/css/views/voip/_IncomingCallbox.scss
View file

@ -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;
}

BIN
res/fonts/Inter/Inter-Bold.woff Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-BoldItalic.woff Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-BoldItalic.woff2 Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Italic.woff Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Italic.woff2 Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Medium.woff Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Medium.woff2 Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-MediumItalic.woff Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-MediumItalic.woff2 Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Regular.woff Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-SemiBold.woff Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-SemiBold.woff2 Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-SemiBoldItalic.woff Normal file
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-SemiBoldItalic.woff2 Normal file
View file

Binary file not shown.

4
res/img/e2e/normal.svg
View file

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C12 21 21 17.2 21 11.5V4.85L12 2L3 4.85V11.5C3 17.2 12 21 12 21Z" fill="#2E2F32" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1.77777 8.24003V2.71114L7.99999 0.888916L14.2222 2.71114V8.24003C14.2222 13.8934 7.99999 15.1111 7.99999 15.1111C7.99999 15.1111 1.77777 13.8934 1.77777 8.24003Z" fill="#020202"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 303 B

After

Width:  |  Height:  |  Size: 293 B

5
res/img/e2e/verified.svg
View file

@ -1,4 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C12 21 21 17.2 21 11.5V4.85L12 2L3 4.85V11.5C3 17.2 12 21 12 21Z" fill="#03B381" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.77783 2.71114V8.24003C1.77783 13.8934 8.00005 15.1111 8.00005 15.1111C8.00005 15.1111 14.2223 13.8934 14.2223 8.24003V2.71114L8.00005 0.888916L1.77783 2.71114ZM10.6139 4.90635C10.7827 4.74635 11.0494 4.75524 11.2094 4.92413C11.3516 5.08413 11.3516 5.32413 11.2272 5.48413L7.47608 10.0263L7.44941 10.0619C7.20052 10.3641 6.74719 10.4086 6.44497 10.1597C6.41812 10.1463 6.39635 10.1227 6.37581 10.1005C6.36914 10.0933 6.36261 10.0862 6.35608 10.0797L4.74719 8.23079C4.56941 8.01746 4.58719 7.69746 4.80052 7.51968C4.9783 7.35968 5.23608 7.35968 5.42274 7.48413L6.8183 8.46191L10.6139 4.90635Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2268 7.80652C17.6053 8.17175 17.6053 8.7639 17.2268 9.12913L11.4013 14.7502C11.0228 15.1154 10.4091 15.1154 10.0306 14.7502L10.0145 14.7342C10.0084 14.7286 10.0023 14.7229 9.99635 14.7171L7.32348 12.1381C6.92604 11.7546 6.92604 11.1328 7.32348 10.7493C7.72091 10.3658 8.36528 10.3658 8.76272 10.7493L10.7838 12.6995L15.8561 7.80652C16.2346 7.44129 16.8483 7.44129 17.2268 7.80652Z" fill="white"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 753 B

After

Width:  |  Height:  |  Size: 764 B

6
res/img/e2e/warning.svg
View file

@ -1,5 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C12 21 21 17.2 21 11.5V4.85L12 2L3 4.85V11.5C3 17.2 12 21 12 21Z" fill="#FF4B55" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.77783 2.71114V8.24003C1.77783 13.8934 8.00005 15.1111 8.00005 15.1111C8.00005 15.1111 14.2223 13.8934 14.2223 8.24003V2.71114L8.00005 0.888916L1.77783 2.71114ZM7.92899 3.91112C7.42232 3.94668 7.04899 4.39113 7.09343 4.89779L7.37788 8.45335C7.40455 8.76446 7.64455 9.00446 7.95566 9.03113H8.00899C8.33788 9.03113 8.61343 8.78224 8.6401 8.45335L8.92455 4.89779V4.75557C8.87121 4.2489 8.42677 3.87557 7.92899 3.91112ZM8 11.5556C8.43201 11.5556 8.78222 11.2054 8.78222 10.7733C8.78222 10.3413 8.43201 9.99112 8 9.99112C7.56799 9.99112 7.21777 10.3413 7.21777 10.7733C7.21777 11.2054 7.56799 11.5556 8 11.5556Z" fill="#FF4B55"/>
<rect x="10.8" y="5.5" width="2.5" height="8" rx="1.25" fill="white"/>
<rect x="10.8" y="15" width="2.5" height="2.5" rx="1.25" fill="white"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 446 B

After

Width:  |  Height:  |  Size: 779 B

6
res/img/element-icons/call/fullscreen.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 4H4V10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 20L20 20L20 14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 4L9.5 9.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
<path d="M14.5 14.5L20 20" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 479 B

3
res/img/element-icons/call/hangup.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0084 7.75648C10.3211 7.69163 6.85136 8.12949 6.00781 8.35133C5.95792 8.36445 5.90044 8.37912 5.83616 8.39552C4.54101 8.72607 0.48272 9.76183 0.0442423 13.0436C-0.295466 15.5862 1.40575 16.3558 2.25618 16.2386C2.84479 16.1648 4.5301 15.8983 6.08724 15.6189C7.61629 15.3446 7.61551 14.3359 7.61499 13.6538C7.61498 13.6413 7.61497 13.6288 7.61497 13.6165L7.61497 12.2453C7.61497 11.8961 7.94315 11.6942 8.3958 11.6396C9.99822 11.422 11.3359 11.4213 12.0055 11.4213L12.0112 11.4213C12.6807 11.4213 14.0018 11.422 15.6042 11.6396C16.0569 11.6942 16.385 11.8961 16.385 12.2453L16.385 13.6165C16.385 13.6289 16.385 13.6413 16.385 13.6538C16.3845 14.3359 16.3837 15.3446 17.9128 15.619C19.4699 15.8983 21.1552 16.1648 21.7438 16.2386C22.5942 16.3558 24.2955 15.5862 23.9558 13.0436C23.5173 9.76183 19.459 8.72608 18.1638 8.39553C18.0996 8.37913 18.0421 8.36446 17.9922 8.35134C17.1487 8.1295 13.6956 7.69163 12.0084 7.75648Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

4
res/img/element-icons/call/video-call.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7C0 5.34315 1.34315 4 3 4H14C15.6569 4 17 5.34315 17 7V17C17 18.6569 15.6569 20 14 20H3C1.34315 20 0 18.6569 0 17V7Z" fill="white"/>
<path d="M19 9L22.3753 6.29976C23.0301 5.77595 24 6.24212 24 7.08062V16.9194C24 17.7579 23.0301 18.2241 22.3753 17.7002L19 15V9Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 393 B

5
res/img/element-icons/call/video-muted.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 2L19 20" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4H4.41122L17 16.615V19.415C16.9914 19.4057 16.9825 19.3965 16.9735 19.3874L1.98909 4.37176C1.93823 4.32079 1.88324 4.27646 1.82519 4.23876C2.18599 4.08505 2.58306 4 3 4ZM0.386676 5.52565C0.140502 5.96107 0 6.46413 0 7V17C0 18.6569 1.34315 20 3 20H14.7593L0.573407 5.78449C0.495634 5.70656 0.433392 5.619 0.386676 5.52565ZM17 7V13.7837L7.2367 4H14C15.6569 4 17 5.34315 17 7Z" fill="white"/>
<path d="M19 9L22.3753 6.29976C23.0301 5.77595 24 6.24212 24 7.08062V16.9194C24 17.7579 23.0301 18.2241 22.3753 17.7002L19 15V9Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 791 B

3
res/img/element-icons/call/voice-call.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.02698 13.9613C7.16801 15.1932 9.91484 17.3263 10.6635 17.7641C10.7078 17.79 10.7585 17.8201 10.8152 17.8538C11.9576 18.5329 15.5373 20.6609 18.1454 18.6694C20.1661 17.1266 19.5091 15.3909 18.8289 14.875C18.3633 14.5128 16.9914 13.5145 15.7006 12.6152C14.4331 11.7322 13.7268 12.4397 13.2492 12.918C13.2404 12.9268 13.2317 12.9355 13.2231 12.9442L12.2621 13.9051C12.0174 14.1498 11.6451 14.0605 11.2886 13.7804C10.0092 12.8061 9.06809 11.8659 8.59723 11.395L8.59326 11.391C8.12246 10.9202 7.19387 9.99076 6.21957 8.7114C5.93949 8.35485 5.85018 7.9826 6.09489 7.73789L7.05586 6.77693C7.06448 6.7683 7.0732 6.7596 7.08199 6.75082C7.56034 6.27321 8.2678 5.56684 7.38479 4.29937C6.48555 3.0086 5.4872 1.6367 5.125 1.17106C4.60907 0.490937 2.87345 -0.166084 1.33056 1.85458C-0.660932 4.46274 1.46708 8.04241 2.1462 9.18482C2.17991 9.24152 2.21005 9.29221 2.23593 9.33649C2.67367 10.0851 4.79507 12.8203 6.02698 13.9613Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

4
res/img/element-icons/call/voice-muted.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3L21 21" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6.59209V12C8 14.2091 9.79086 16 12 16C13.4616 16 14.7402 15.216 15.4381 14.0457L8 6.59209ZM16.8804 15.491C15.7918 17.0102 14.0115 18 12 18C8.68629 18 6 15.3137 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 16.0796 7.05369 19.446 11 19.9381V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V19.9381C15.1511 19.6699 17.037 18.5476 18.3077 16.9213L16.8804 15.491ZM19.3589 15.1433L17.7917 13.5729C17.9275 13.0716 18 12.5443 18 12C18 11.4477 18.4477 11 19 11C19.5523 11 20 11.4477 20 12C20 13.1159 19.7715 14.1783 19.3589 15.1433ZM16 11.7774L8.43077 4.19238C9.09091 2.89149 10.4413 2 12 2C14.2091 2 16 3.79086 16 6V11.7774Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 913 B

3
res/img/element-icons/call/voice-unmuted.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6V12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12V6ZM5 11C5.55228 11 6 11.4477 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12C18 11.4477 18.4477 11 19 11C19.5523 11 20 11.4477 20 12C20 16.0796 16.9463 19.446 13 19.9381V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V19.9381C7.05369 19.446 4 16.0796 4 12C4 11.4477 4.44772 11 5 11Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 587 B

8
res/img/element-icons/community-members.svg Normal file
View file

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.3804 13.412C17.59 13.412 18.5705 12.3498 18.5705 11.0394C18.5705 9.72896 17.59 8.66667 16.3804 8.66667C15.1708 8.66667 14.1902 9.72896 14.1902 11.0394C14.1902 12.3498 15.1708 13.412 16.3804 13.412ZM12.8333 17.7461C12.8333 15.7941 11.4623 14.1623 9.63071 13.7611C9.31877 13.6991 8.99645 13.6667 8.66667 13.6667C6.66814 13.6667 4.94347 14.8594 4.14307 16.5833L7.83334 20.4483H12.8333L12.8333 17.7461ZM14.8333 20.4483H16.3804L20.0844 16.5833C19.3081 15.3356 17.9394 14.5071 16.3804 14.5071C15.5955 14.5071 14.8588 14.7171 14.2216 15.0849C14.6134 15.8884 14.8333 16.7913 14.8333 17.7461L14.8333 20.4483ZM11.1667 9.70833C11.1667 11.2041 10.0474 12.4167 8.66669 12.4167C7.28597 12.4167 6.16669 11.2041 6.16669 9.70833C6.16669 8.21256 7.28597 7 8.66669 7C10.0474 7 11.1667 8.21256 11.1667 9.70833Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.3804 13.412C17.59 13.412 18.5705 12.3498 18.5705 11.0394C18.5705 9.72896 17.59 8.66667 16.3804 8.66667C15.1708 8.66667 14.1902 9.72896 14.1902 11.0394C14.1902 12.3498 15.1708 13.412 16.3804 13.412ZM12.8333 17.7461C12.8333 15.7941 11.4623 14.1623 9.63071 13.7611C9.31877 13.6991 8.99645 13.6667 8.66667 13.6667C6.66814 13.6667 4.94347 14.8594 4.14307 16.5833L7.83334 20.4483H12.8333L12.8333 17.7461ZM14.8333 20.4483H16.3804L20.0844 16.5833C19.3081 15.3356 17.9394 14.5071 16.3804 14.5071C15.5955 14.5071 14.8588 14.7171 14.2216 15.0849C14.6134 15.8884 14.8333 16.7913 14.8333 17.7461L14.8333 20.4483ZM11.1667 9.70833C11.1667 11.2041 10.0474 12.4167 8.66669 12.4167C7.28597 12.4167 6.16669 11.2041 6.16669 9.70833C6.16669 8.21256 7.28597 7 8.66669 7C10.0474 7 11.1667 8.21256 11.1667 9.70833Z" fill="black"/>
<path d="M9.63071 13.7611L9.9873 12.1331L9.97144 12.1296L9.95552 12.1264L9.63071 13.7611ZM12.8333 17.7461H11.1667V17.7461L12.8333 17.7461ZM4.14307 16.5833L2.63139 15.8815L2.15278 16.9123L2.93762 17.7343L4.14307 16.5833ZM7.83334 20.4483L6.62789 21.5993L7.1203 22.115H7.83334V20.4483ZM12.8333 20.4483V22.115H14.5L14.5 20.4483L12.8333 20.4483ZM16.3804 20.4483V22.115H17.0916L17.5837 21.6015L16.3804 20.4483ZM14.8333 20.4483L13.1667 20.4483L13.1667 22.115H14.8333V20.4483ZM20.0844 16.5833L21.2877 17.7365L22.1834 16.802L21.4996 15.7029L20.0844 16.5833ZM14.2216 15.0849L13.3884 13.6415L12.0423 14.4185L12.7236 15.8155L14.2216 15.0849ZM14.8333 17.7461H13.1667V17.7461L14.8333 17.7461ZM12 23.6667C18.4433 23.6667 23.6667 18.4433 23.6667 12H20.3333C20.3333 16.6024 16.6024 20.3333 12 20.3333V23.6667ZM0.333333 12C0.333333 18.4433 5.55668 23.6667 12 23.6667V20.3333C7.39763 20.3333 3.66667 16.6024 3.66667 12H0.333333ZM12 0.333333C5.55668 0.333333 0.333333 5.55668 0.333333 12H3.66667C3.66667 7.39763 7.39763 3.66667 12 3.66667V0.333333ZM23.6667 12C23.6667 5.55668 18.4433 0.333333 12 0.333333V3.66667C16.6024 3.66667 20.3333 7.39763 20.3333 12H23.6667ZM16.9039 11.0394C16.9039 11.5574 16.5464 11.7454 16.3804 11.7454V15.0787C18.6335 15.0787 20.2372 13.1421 20.2372 11.0394H16.9039ZM16.3804 10.3333C16.5464 10.3333 16.9039 10.5213 16.9039 11.0394H20.2372C20.2372 8.9366 18.6335 7.00001 16.3804 7.00001V10.3333ZM15.8569 11.0394C15.8569 10.5213 16.2143 10.3333 16.3804 10.3333V7.00001C14.1272 7.00001 12.5235 8.9366 12.5235 11.0394H15.8569ZM16.3804 11.7454C16.2143 11.7454 15.8569 11.5574 15.8569 11.0394H12.5235C12.5235 13.1421 14.1272 15.0787 16.3804 15.0787V11.7454ZM9.27412 15.3892C10.357 15.6264 11.1667 16.5936 11.1667 17.7461H14.5C14.5 14.9945 12.5676 12.6982 9.9873 12.1331L9.27412 15.3892ZM8.66667 15.3333C8.88675 15.3333 9.10029 15.355 9.3059 15.3958L9.95552 12.1264C9.53724 12.0433 9.10614 12 8.66667 12V15.3333ZM5.65474 17.2852C6.19734 16.1166 7.3526 15.3333 8.66667 15.3333V12C5.98369 12 3.68961 13.6023 2.63139 15.8815L5.65474 17.2852ZM9.03878 19.2974L5.34851 15.4324L2.93762 17.7343L6.62789 21.5993L9.03878 19.2974ZM12.8333 18.7817H7.83334V22.115H12.8333V18.7817ZM11.1667 17.7461L11.1667 20.4483L14.5 20.4483L14.5 17.7461L11.1667 17.7461ZM16.3804 18.7817H14.8333V22.115H16.3804V18.7817ZM18.8811 15.4301L15.1771 19.2951L17.5837 21.6015L21.2877 17.7365L18.8811 15.4301ZM16.3804 16.1738C17.3311 16.1738 18.1797 16.6768 18.6693 17.4638L21.4996 15.7029C20.4366 13.9944 18.5477 12.8405 16.3804 12.8405V16.1738ZM15.0549 16.5284C15.4465 16.3023 15.8969 16.1738 16.3804 16.1738V12.8405C15.2941 12.8405 14.2711 13.132 13.3884 13.6415L15.0549 16.5284ZM16.5 17.7461C16.5 16.5328 16.2201 15.3806 15.7196 14.3544L12.7236 15.8155C13.0068 16.3963 13.1667 17.0498 13.1667 17.7461H16.5ZM16.5 20.4483L16.5 17.7461L13.1667 17.7461L13.1667 20.4483L16.5 20.4483ZM8.66669 14.0833C11.091 14.0833 12.8334 11.9965 12.8334 9.70833H9.50002C9.50002 10.4117 9.00383 10.75 8.66669 10.75V14.0833ZM4.50002 9.70833C4.50002 11.9965 6.2424 14.0833 8.66669 14.0833V10.75C8.32955 10.75 7.83335 10.4117 7.83335 9.70833H4.50002ZM8.66669 5.33333C6.2424 5.33333 4.50002 7.42021 4.50002 9.70833H7.83335C7.83335 9.00492 8.32955 8.66667 8.66669 8.66667V5.33333ZM12.8334 9.70833C12.8334 7.42021 11.091 5.33333 8.66669 5.33333V8.66667C9.00383 8.66667 9.50002 9.00492 9.50002 9.70833H12.8334Z" fill="black" mask="url(#path-1-inside-1)"/>
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="black" stroke-width="2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.5 KiB

3
res/img/element-icons/community-rooms.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM10.5253 6.00581C11.0743 6.06524 11.4713 6.55853 11.4118 7.10761L11.2234 8.84821H13.3843L13.596 6.89239C13.6554 6.34332 14.1487 5.94638 14.6978 6.00581C15.2469 6.06524 15.6438 6.55853 15.5844 7.10761L15.396 8.84821H16.3C16.8523 8.84821 17.3 9.29592 17.3 9.84821C17.3 10.4005 16.8523 10.8482 16.3 10.8482H15.1795L14.9319 13.1362H16.3C16.8523 13.1362 17.3 13.5839 17.3 14.1362C17.3 14.6884 16.8523 15.1362 16.3 15.1362H14.7154L14.502 17.1076C14.4426 17.6567 13.9493 18.0536 13.4002 17.9942C12.8512 17.9348 12.4542 17.4415 12.5136 16.8924L12.7037 15.1362H10.5429L10.3295 17.1076C10.2701 17.6567 9.77677 18.0536 9.22769 17.9942C8.67861 17.9348 8.28167 17.4415 8.3411 16.8924L8.53119 15.1362H7.5C6.94772 15.1362 6.5 14.6884 6.5 14.1362C6.5 13.5839 6.94772 13.1362 7.5 13.1362H8.74766L8.9953 10.8482H7.93922C7.38693 10.8482 6.93922 10.4005 6.93922 9.84821C6.93922 9.29592 7.38693 8.84821 7.93922 8.84821H9.21177L9.42345 6.89239C9.48288 6.34332 9.97618 5.94638 10.5253 6.00581ZM10.7593 13.1362H12.9202L13.1678 10.8482H11.007L10.7593 13.1362Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

Some files were not shown because too many files have changed in this diff Show more