mirror of
https://github.com/element-hq/element-web
synced 2024-10-26 20:55:56 +03:00
Merge branches 'develop' and 't3chguy/fix-op' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix-op
This commit is contained in:
Michael Telatynski
commit
67d1956437
539 changed files with 29162 additions and 10077 deletions
|
|
@ -6,25 +6,20 @@ src/components/structures/RoomView.js
|
|||
src/components/structures/ScrollPanel.js
|
||||
src/components/structures/SearchBox.js
|
||||
src/components/structures/UploadBar.js
|
||||
src/components/views/avatars/BaseAvatar.js
|
||||
src/components/views/avatars/MemberAvatar.js
|
||||
src/components/views/create_room/RoomAlias.js
|
||||
src/components/views/dialogs/SetPasswordDialog.js
|
||||
src/components/views/dialogs/UnknownDeviceDialog.js
|
||||
src/components/views/elements/AddressSelector.js
|
||||
src/components/views/elements/DirectorySearchBox.js
|
||||
src/components/views/elements/MemberEventListSummary.js
|
||||
src/components/views/elements/UserSelector.js
|
||||
src/components/views/globals/MatrixToolbar.js
|
||||
src/components/views/globals/NewVersionBar.js
|
||||
src/components/views/globals/UpdateCheckBar.js
|
||||
src/components/views/messages/MFileBody.js
|
||||
src/components/views/messages/TextualBody.js
|
||||
src/components/views/room_settings/ColorSettings.js
|
||||
src/components/views/rooms/Autocomplete.js
|
||||
src/components/views/rooms/AuxPanel.js
|
||||
src/components/views/rooms/LinkPreviewWidget.js
|
||||
src/components/views/rooms/MemberDeviceInfo.js
|
||||
src/components/views/rooms/MemberInfo.js
|
||||
src/components/views/rooms/MemberList.js
|
||||
src/components/views/rooms/RoomList.js
|
||||
|
|
|
|||
835
CHANGELOG.md
835
CHANGELOG.md
|
|
@ -1,3 +1,838 @@
|
|||
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)
|
||||
===================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.8.0...v2.8.1)
|
||||
|
||||
* Support accounts with cross signing but no SSSS
|
||||
[\#4852](https://github.com/matrix-org/matrix-react-sdk/pull/4852)
|
||||
|
||||
Changes in [2.8.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.8.0) (2020-06-23)
|
||||
===================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.8.0-rc.1...v2.8.0)
|
||||
|
||||
* Upgrade to JS SDK 7.0.0
|
||||
* Update read receipt remainder for internal font size change
|
||||
[\#4807](https://github.com/matrix-org/matrix-react-sdk/pull/4807)
|
||||
* Revert "Use recovery keys over passphrases"
|
||||
[\#4793](https://github.com/matrix-org/matrix-react-sdk/pull/4793)
|
||||
|
||||
Changes in [2.8.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.8.0-rc.1) (2020-06-17)
|
||||
=============================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.7.2...v2.8.0-rc.1)
|
||||
|
||||
* Upgrade to JS SDK 7.0.0-rc.1
|
||||
* Fix Styled Checkbox and Radio Button disabled state
|
||||
[\#4778](https://github.com/matrix-org/matrix-react-sdk/pull/4778)
|
||||
* clean up and fix the isMasterRuleEnabled logic
|
||||
[\#4782](https://github.com/matrix-org/matrix-react-sdk/pull/4782)
|
||||
* Fix case-sensitivity of /me to match rest of slash commands
|
||||
[\#4763](https://github.com/matrix-org/matrix-react-sdk/pull/4763)
|
||||
* Add a 'show less' button to the new room list
|
||||
[\#4765](https://github.com/matrix-org/matrix-react-sdk/pull/4765)
|
||||
* Update from Weblate
|
||||
[\#4781](https://github.com/matrix-org/matrix-react-sdk/pull/4781)
|
||||
* Sticky and collapsing headers for new room list
|
||||
[\#4758](https://github.com/matrix-org/matrix-react-sdk/pull/4758)
|
||||
* Make the room list labs setting reload on change
|
||||
[\#4780](https://github.com/matrix-org/matrix-react-sdk/pull/4780)
|
||||
* Handle/hide old rooms in the room list
|
||||
[\#4767](https://github.com/matrix-org/matrix-react-sdk/pull/4767)
|
||||
* Add some media queries to improve UI on mobile (#3991)
|
||||
[\#4656](https://github.com/matrix-org/matrix-react-sdk/pull/4656)
|
||||
* Match fuzzy filtering a bit more reliably in the new room list
|
||||
[\#4769](https://github.com/matrix-org/matrix-react-sdk/pull/4769)
|
||||
* Improve Field ts definitions some more
|
||||
[\#4777](https://github.com/matrix-org/matrix-react-sdk/pull/4777)
|
||||
* Fix alignment of checkboxes in new room list's context menu
|
||||
[\#4776](https://github.com/matrix-org/matrix-react-sdk/pull/4776)
|
||||
* Fix Field ts def, fix LocalEchoWrapper and NotificationsEnabledController
|
||||
[\#4775](https://github.com/matrix-org/matrix-react-sdk/pull/4775)
|
||||
* Add presence indicators and globes to new room list
|
||||
[\#4774](https://github.com/matrix-org/matrix-react-sdk/pull/4774)
|
||||
* Include the sticky room when filtering in the new room list
|
||||
[\#4772](https://github.com/matrix-org/matrix-react-sdk/pull/4772)
|
||||
* Add a home button to the new room list menu when available
|
||||
[\#4771](https://github.com/matrix-org/matrix-react-sdk/pull/4771)
|
||||
* use group layout for search results
|
||||
[\#4764](https://github.com/matrix-org/matrix-react-sdk/pull/4764)
|
||||
* Fix m.id.phone spec compliance
|
||||
[\#4757](https://github.com/matrix-org/matrix-react-sdk/pull/4757)
|
||||
* User Info default power levels for ban/kick/redact to 50 as per spec
|
||||
[\#4759](https://github.com/matrix-org/matrix-react-sdk/pull/4759)
|
||||
* Match new room list's text search to old room list
|
||||
[\#4768](https://github.com/matrix-org/matrix-react-sdk/pull/4768)
|
||||
* Fix ordering of recent rooms in the new room list
|
||||
[\#4766](https://github.com/matrix-org/matrix-react-sdk/pull/4766)
|
||||
* Change theme selector to use new styled radio buttons
|
||||
[\#4731](https://github.com/matrix-org/matrix-react-sdk/pull/4731)
|
||||
* Use recovery keys over passphrases
|
||||
[\#4686](https://github.com/matrix-org/matrix-react-sdk/pull/4686)
|
||||
* Update from Weblate
|
||||
[\#4760](https://github.com/matrix-org/matrix-react-sdk/pull/4760)
|
||||
* Initial dark theme support for new room list
|
||||
[\#4756](https://github.com/matrix-org/matrix-react-sdk/pull/4756)
|
||||
* Support per-list options and algorithms on the new room list
|
||||
[\#4754](https://github.com/matrix-org/matrix-react-sdk/pull/4754)
|
||||
* Send read marker updates immediately after moving visually
|
||||
[\#4755](https://github.com/matrix-org/matrix-react-sdk/pull/4755)
|
||||
* Add a minimized view to the new room list
|
||||
[\#4753](https://github.com/matrix-org/matrix-react-sdk/pull/4753)
|
||||
* Fix e2e icon alignment in irc-layout
|
||||
[\#4752](https://github.com/matrix-org/matrix-react-sdk/pull/4752)
|
||||
* Add some resource leak protection to new room list badges
|
||||
[\#4750](https://github.com/matrix-org/matrix-react-sdk/pull/4750)
|
||||
* Fix read-receipt alignment
|
||||
[\#4747](https://github.com/matrix-org/matrix-react-sdk/pull/4747)
|
||||
* Show message previews on the new room list tiles
|
||||
[\#4751](https://github.com/matrix-org/matrix-react-sdk/pull/4751)
|
||||
* Fix various layout concerns with the new room list
|
||||
[\#4749](https://github.com/matrix-org/matrix-react-sdk/pull/4749)
|
||||
* Prioritize text on the clipboard over file
|
||||
[\#4748](https://github.com/matrix-org/matrix-react-sdk/pull/4748)
|
||||
* Move Settings flag to ts
|
||||
[\#4729](https://github.com/matrix-org/matrix-react-sdk/pull/4729)
|
||||
* Add a context menu to rooms in the new room list
|
||||
[\#4743](https://github.com/matrix-org/matrix-react-sdk/pull/4743)
|
||||
* Add hover states and basic context menu to new room list
|
||||
[\#4742](https://github.com/matrix-org/matrix-react-sdk/pull/4742)
|
||||
* Update resize handle for new designs in new room list
|
||||
[\#4741](https://github.com/matrix-org/matrix-react-sdk/pull/4741)
|
||||
* Improve general stability in the new room list
|
||||
[\#4740](https://github.com/matrix-org/matrix-react-sdk/pull/4740)
|
||||
* Reimplement breadcrumbs for new room list
|
||||
[\#4735](https://github.com/matrix-org/matrix-react-sdk/pull/4735)
|
||||
* Add styled radio buttons
|
||||
[\#4744](https://github.com/matrix-org/matrix-react-sdk/pull/4744)
|
||||
* Hide checkbox tick on dark backgrounds
|
||||
[\#4730](https://github.com/matrix-org/matrix-react-sdk/pull/4730)
|
||||
* Make checkboxes a11y friendly
|
||||
[\#4746](https://github.com/matrix-org/matrix-react-sdk/pull/4746)
|
||||
* EventIndex: Store and restore the encryption info for encrypted events.
|
||||
[\#4738](https://github.com/matrix-org/matrix-react-sdk/pull/4738)
|
||||
* Use IDestroyable instead of IDisposable
|
||||
[\#4739](https://github.com/matrix-org/matrix-react-sdk/pull/4739)
|
||||
* Add/improve badge counts in new room list
|
||||
[\#4734](https://github.com/matrix-org/matrix-react-sdk/pull/4734)
|
||||
* Convert FormattingUtils to TypeScript and add badge utility function
|
||||
[\#4732](https://github.com/matrix-org/matrix-react-sdk/pull/4732)
|
||||
* Add filtering and exploring to the new room list
|
||||
[\#4736](https://github.com/matrix-org/matrix-react-sdk/pull/4736)
|
||||
* Support prioritized room list filters
|
||||
[\#4737](https://github.com/matrix-org/matrix-react-sdk/pull/4737)
|
||||
* Clean up font scaling appearance
|
||||
[\#4733](https://github.com/matrix-org/matrix-react-sdk/pull/4733)
|
||||
* Add user menu to new room list
|
||||
[\#4722](https://github.com/matrix-org/matrix-react-sdk/pull/4722)
|
||||
* New room list basic styling and layout
|
||||
[\#4711](https://github.com/matrix-org/matrix-react-sdk/pull/4711)
|
||||
* Fix read receipt overlap
|
||||
[\#4727](https://github.com/matrix-org/matrix-react-sdk/pull/4727)
|
||||
* Load correct default font size
|
||||
[\#4726](https://github.com/matrix-org/matrix-react-sdk/pull/4726)
|
||||
* send state of lowBandwidth in rageshakes
|
||||
[\#4724](https://github.com/matrix-org/matrix-react-sdk/pull/4724)
|
||||
* Change internal font size from from 15 to 10
|
||||
[\#4725](https://github.com/matrix-org/matrix-react-sdk/pull/4725)
|
||||
* Upgrade deps
|
||||
[\#4723](https://github.com/matrix-org/matrix-react-sdk/pull/4723)
|
||||
* Ensure active Jitsi conference is closed on widget pop-out
|
||||
[\#4444](https://github.com/matrix-org/matrix-react-sdk/pull/4444)
|
||||
* Introduce sticky rooms to the new room list
|
||||
[\#4720](https://github.com/matrix-org/matrix-react-sdk/pull/4720)
|
||||
* Handle remaining cases for room updates in new room list
|
||||
[\#4721](https://github.com/matrix-org/matrix-react-sdk/pull/4721)
|
||||
* Allow searching the emoji picker using other emoji
|
||||
[\#4719](https://github.com/matrix-org/matrix-react-sdk/pull/4719)
|
||||
* New room list scrolling and resizing
|
||||
[\#4697](https://github.com/matrix-org/matrix-react-sdk/pull/4697)
|
||||
* Don't show FormatBar if composer is empty
|
||||
[\#4696](https://github.com/matrix-org/matrix-react-sdk/pull/4696)
|
||||
* Split the left panel into new and old for new room list designs
|
||||
[\#4687](https://github.com/matrix-org/matrix-react-sdk/pull/4687)
|
||||
* Fix compact layout regression
|
||||
[\#4712](https://github.com/matrix-org/matrix-react-sdk/pull/4712)
|
||||
* fix emoji in safari
|
||||
[\#4710](https://github.com/matrix-org/matrix-react-sdk/pull/4710)
|
||||
* Fix not being able to dismiss new login toasts
|
||||
[\#4709](https://github.com/matrix-org/matrix-react-sdk/pull/4709)
|
||||
* Fix exceptions from Tooltip
|
||||
[\#4708](https://github.com/matrix-org/matrix-react-sdk/pull/4708)
|
||||
* Stop removing variation selector from quick reactions
|
||||
[\#4707](https://github.com/matrix-org/matrix-react-sdk/pull/4707)
|
||||
* Tidy up continuation algorithm and make it work for hidden profile changes
|
||||
[\#4704](https://github.com/matrix-org/matrix-react-sdk/pull/4704)
|
||||
* Profile settings should never show a disambiguated display name
|
||||
[\#4699](https://github.com/matrix-org/matrix-react-sdk/pull/4699)
|
||||
* Prevent (double) 4S bootstrap from RestoreKeyBackupDialog
|
||||
[\#4701](https://github.com/matrix-org/matrix-react-sdk/pull/4701)
|
||||
* Stop checkbox styling bleeding through room address selector
|
||||
[\#4691](https://github.com/matrix-org/matrix-react-sdk/pull/4691)
|
||||
* Center HeaderButtons
|
||||
[\#4695](https://github.com/matrix-org/matrix-react-sdk/pull/4695)
|
||||
* Add .well-known option to control default e2ee behaviour
|
||||
[\#4605](https://github.com/matrix-org/matrix-react-sdk/pull/4605)
|
||||
* Add max-width to right and left panels
|
||||
[\#4692](https://github.com/matrix-org/matrix-react-sdk/pull/4692)
|
||||
* Fix login loop where the sso flow returns to `#/login`
|
||||
[\#4685](https://github.com/matrix-org/matrix-react-sdk/pull/4685)
|
||||
* Don't clear MAU toasts when a successful sync comes in
|
||||
[\#4690](https://github.com/matrix-org/matrix-react-sdk/pull/4690)
|
||||
* Add initial filtering support to new room list
|
||||
[\#4681](https://github.com/matrix-org/matrix-react-sdk/pull/4681)
|
||||
* Bubble up a decline-to-render of verification events to outside wrapper
|
||||
[\#4664](https://github.com/matrix-org/matrix-react-sdk/pull/4664)
|
||||
* upgrade to twemoji 13.0.0
|
||||
[\#4672](https://github.com/matrix-org/matrix-react-sdk/pull/4672)
|
||||
* Apply FocusLock to ImageView to capture Escape handling
|
||||
[\#4666](https://github.com/matrix-org/matrix-react-sdk/pull/4666)
|
||||
* Fix the 'complete security' screen
|
||||
[\#4689](https://github.com/matrix-org/matrix-react-sdk/pull/4689)
|
||||
* add null-guard for Autocomplete containerRef
|
||||
[\#4688](https://github.com/matrix-org/matrix-react-sdk/pull/4688)
|
||||
* Remove legacy codepaths for Unknown Device Error (UDE/UDD) handling
|
||||
[\#4660](https://github.com/matrix-org/matrix-react-sdk/pull/4660)
|
||||
* Remove feature_cross_signing
|
||||
[\#4655](https://github.com/matrix-org/matrix-react-sdk/pull/4655)
|
||||
* Autocomplete: use scrollIntoView for auto-scroll to fix it
|
||||
[\#4670](https://github.com/matrix-org/matrix-react-sdk/pull/4670)
|
||||
|
||||
Changes in [2.7.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.7.2) (2020-06-16)
|
||||
===================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.7.1...v2.7.2)
|
||||
|
||||
* Upgrade to JS SDK 6.2.2
|
||||
|
||||
Changes in [2.7.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.7.1) (2020-06-05)
|
||||
===================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.7.0...v2.7.1)
|
||||
|
||||
* Upgrade to JS SDK 6.2.1
|
||||
* Fix exceptions from Tooltip
|
||||
[\#4716](https://github.com/matrix-org/matrix-react-sdk/pull/4716)
|
||||
* Fix not being able to dismiss new login toasts
|
||||
[\#4715](https://github.com/matrix-org/matrix-react-sdk/pull/4715)
|
||||
* Fix compact layout regression
|
||||
[\#4714](https://github.com/matrix-org/matrix-react-sdk/pull/4714)
|
||||
|
||||
Changes in [2.7.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.7.0) (2020-06-04)
|
||||
===================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.7.0-rc.2...v2.7.0)
|
||||
|
||||
* Upgrade to JS SDK 6.2.0
|
||||
* Prevent (double) 4S bootstrap from RestoreKeyBackupDialog
|
||||
[\#4703](https://github.com/matrix-org/matrix-react-sdk/pull/4703)
|
||||
* Fix checkbox bleed
|
||||
[\#4702](https://github.com/matrix-org/matrix-react-sdk/pull/4702)
|
||||
* Fix login loop where the sso flow returns to `#/login` to release
|
||||
[\#4693](https://github.com/matrix-org/matrix-react-sdk/pull/4693)
|
||||
|
||||
Changes in [2.7.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.7.0-rc.2) (2020-06-02)
|
||||
=============================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.7.0-rc.1...v2.7.0-rc.2)
|
||||
|
||||
* Rewire the Sticker button to be an Emoji Picker
|
||||
[\#3747](https://github.com/matrix-org/matrix-react-sdk/pull/3747)
|
||||
|
||||
Changes in [2.7.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.7.0-rc.1) (2020-06-02)
|
||||
=============================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.6.1...v2.7.0-rc.1)
|
||||
|
||||
* Upgrade to JS SDK 6.2.0-rc.1
|
||||
* Update from Weblate
|
||||
[\#4683](https://github.com/matrix-org/matrix-react-sdk/pull/4683)
|
||||
* Make auth argument in the register request compliant with r0.6.0
|
||||
[\#4347](https://github.com/matrix-org/matrix-react-sdk/pull/4347)
|
||||
* Revert "Prevent PersistedElements overflowing scrolled areas"
|
||||
[\#4682](https://github.com/matrix-org/matrix-react-sdk/pull/4682)
|
||||
* Remove unused TagPanelButtons
|
||||
[\#4680](https://github.com/matrix-org/matrix-react-sdk/pull/4680)
|
||||
* Pass roomId to IRCTimelineProfileResizer
|
||||
[\#4679](https://github.com/matrix-org/matrix-react-sdk/pull/4679)
|
||||
* Remove logging to console for irc name resize
|
||||
[\#4678](https://github.com/matrix-org/matrix-react-sdk/pull/4678)
|
||||
* Use arrow functions instead of binding `this`
|
||||
[\#4677](https://github.com/matrix-org/matrix-react-sdk/pull/4677)
|
||||
* Increase specificity of compact layout selectors
|
||||
[\#4675](https://github.com/matrix-org/matrix-react-sdk/pull/4675)
|
||||
* Create and use stylised checkboxes
|
||||
[\#4665](https://github.com/matrix-org/matrix-react-sdk/pull/4665)
|
||||
* useIRCLayout moved to props
|
||||
[\#4676](https://github.com/matrix-org/matrix-react-sdk/pull/4676)
|
||||
* Fix paste image to upload
|
||||
[\#4674](https://github.com/matrix-org/matrix-react-sdk/pull/4674)
|
||||
* Fix FilePanel and NotificationsPanel regression
|
||||
[\#4647](https://github.com/matrix-org/matrix-react-sdk/pull/4647)
|
||||
* Allow deferring of Update Toast until the next morning
|
||||
[\#4669](https://github.com/matrix-org/matrix-react-sdk/pull/4669)
|
||||
* Give contextual feedback for manual update check instead of banner
|
||||
[\#4668](https://github.com/matrix-org/matrix-react-sdk/pull/4668)
|
||||
* Dialog wrap title instead of taking same space as the close/cancel button
|
||||
[\#4659](https://github.com/matrix-org/matrix-react-sdk/pull/4659)
|
||||
* Update Modular hosting link
|
||||
[\#4627](https://github.com/matrix-org/matrix-react-sdk/pull/4627)
|
||||
* Fix field placeholder regression
|
||||
[\#4663](https://github.com/matrix-org/matrix-react-sdk/pull/4663)
|
||||
* Fix/document a number of UIA oddities
|
||||
[\#4667](https://github.com/matrix-org/matrix-react-sdk/pull/4667)
|
||||
* Stop copy icon repeating weirdly
|
||||
[\#4662](https://github.com/matrix-org/matrix-react-sdk/pull/4662)
|
||||
* Try and fix the Notifier race
|
||||
[\#4661](https://github.com/matrix-org/matrix-react-sdk/pull/4661)
|
||||
* set the client's pickle key if the platform can store one
|
||||
[\#4657](https://github.com/matrix-org/matrix-react-sdk/pull/4657)
|
||||
* Migrate Banners to Toasts
|
||||
[\#4624](https://github.com/matrix-org/matrix-react-sdk/pull/4624)
|
||||
* Move Appearance tab to ts
|
||||
[\#4658](https://github.com/matrix-org/matrix-react-sdk/pull/4658)
|
||||
* Fix room alias lookup vs peeking race condition
|
||||
[\#4606](https://github.com/matrix-org/matrix-react-sdk/pull/4606)
|
||||
* Fix encryption icon miss-alignment
|
||||
[\#4651](https://github.com/matrix-org/matrix-react-sdk/pull/4651)
|
||||
* Fix sublist sizing regression
|
||||
[\#4649](https://github.com/matrix-org/matrix-react-sdk/pull/4649)
|
||||
* Fix lines overflowing room list width
|
||||
[\#4650](https://github.com/matrix-org/matrix-react-sdk/pull/4650)
|
||||
* Remove the keyshare dialog
|
||||
[\#4648](https://github.com/matrix-org/matrix-react-sdk/pull/4648)
|
||||
* Update badge counts in new room list as needed
|
||||
[\#4654](https://github.com/matrix-org/matrix-react-sdk/pull/4654)
|
||||
* EventIndex: Handle invalid m.room.redaction events correctly.
|
||||
[\#4653](https://github.com/matrix-org/matrix-react-sdk/pull/4653)
|
||||
* EventIndex: Print out the checkpoint if there was an error during a crawl
|
||||
[\#4652](https://github.com/matrix-org/matrix-react-sdk/pull/4652)
|
||||
* Move Field to Typescript
|
||||
[\#4635](https://github.com/matrix-org/matrix-react-sdk/pull/4635)
|
||||
* Use connection error to detect network problem
|
||||
[\#4646](https://github.com/matrix-org/matrix-react-sdk/pull/4646)
|
||||
* Revert default font size to 15px
|
||||
[\#4641](https://github.com/matrix-org/matrix-react-sdk/pull/4641)
|
||||
* Add logging when room join fails
|
||||
[\#4645](https://github.com/matrix-org/matrix-react-sdk/pull/4645)
|
||||
* Remove EncryptedEventDialog
|
||||
[\#4644](https://github.com/matrix-org/matrix-react-sdk/pull/4644)
|
||||
* Migrate Toasts to Typescript and to granular priority system
|
||||
[\#4618](https://github.com/matrix-org/matrix-react-sdk/pull/4618)
|
||||
* Update Crypto Store Too New copy
|
||||
[\#4632](https://github.com/matrix-org/matrix-react-sdk/pull/4632)
|
||||
* MemberAvatar should not have its own letter fallback, it should use
|
||||
BaseAvatar
|
||||
[\#4643](https://github.com/matrix-org/matrix-react-sdk/pull/4643)
|
||||
* Fix media upload issues with abort and status bar
|
||||
[\#4630](https://github.com/matrix-org/matrix-react-sdk/pull/4630)
|
||||
* fix viewGroup to actually show the group if possible
|
||||
[\#4633](https://github.com/matrix-org/matrix-react-sdk/pull/4633)
|
||||
* Update confirm passphrase copy
|
||||
[\#4634](https://github.com/matrix-org/matrix-react-sdk/pull/4634)
|
||||
* Improve accessibility of the emoji picker
|
||||
[\#4636](https://github.com/matrix-org/matrix-react-sdk/pull/4636)
|
||||
* Fix Emoji Picker footer being too small if text overflows
|
||||
[\#4631](https://github.com/matrix-org/matrix-react-sdk/pull/4631)
|
||||
* Improve style of toasts to match Figma
|
||||
[\#4613](https://github.com/matrix-org/matrix-react-sdk/pull/4613)
|
||||
* Iterate toast count indicator more logically
|
||||
[\#4620](https://github.com/matrix-org/matrix-react-sdk/pull/4620)
|
||||
* Fix reacting to redactions
|
||||
[\#4626](https://github.com/matrix-org/matrix-react-sdk/pull/4626)
|
||||
* Fix sentMessageAndIsAlone by dispatching `message_sent` more consistently
|
||||
[\#4628](https://github.com/matrix-org/matrix-react-sdk/pull/4628)
|
||||
* Update from Weblate
|
||||
[\#4640](https://github.com/matrix-org/matrix-react-sdk/pull/4640)
|
||||
* Replace `alias` with `address` in copy for consistency
|
||||
[\#4402](https://github.com/matrix-org/matrix-react-sdk/pull/4402)
|
||||
* Convert MatrixClientPeg to TypeScript
|
||||
[\#4638](https://github.com/matrix-org/matrix-react-sdk/pull/4638)
|
||||
* Fix BaseAvatar wrongly retrying urls
|
||||
[\#4629](https://github.com/matrix-org/matrix-react-sdk/pull/4629)
|
||||
* Fix event highlights not being updated to reflect edits
|
||||
[\#4637](https://github.com/matrix-org/matrix-react-sdk/pull/4637)
|
||||
* Calculate badges in the new room list more reliably
|
||||
[\#4625](https://github.com/matrix-org/matrix-react-sdk/pull/4625)
|
||||
* Transition BaseAvatar to hooks
|
||||
[\#4101](https://github.com/matrix-org/matrix-react-sdk/pull/4101)
|
||||
* Convert BasePlatform and BaseEventIndexManager to Typescript
|
||||
[\#4614](https://github.com/matrix-org/matrix-react-sdk/pull/4614)
|
||||
* Fix: Tag_DM is not defined
|
||||
[\#4619](https://github.com/matrix-org/matrix-react-sdk/pull/4619)
|
||||
* Fix visibility of message timestamps
|
||||
[\#4615](https://github.com/matrix-org/matrix-react-sdk/pull/4615)
|
||||
* Rewrite the room list store
|
||||
[\#4253](https://github.com/matrix-org/matrix-react-sdk/pull/4253)
|
||||
* Update code style to mention switch statements
|
||||
[\#4610](https://github.com/matrix-org/matrix-react-sdk/pull/4610)
|
||||
* Fix key backup restore with SSSS
|
||||
[\#4612](https://github.com/matrix-org/matrix-react-sdk/pull/4612)
|
||||
* Handle null tokens in the crawler loop.
|
||||
[\#4608](https://github.com/matrix-org/matrix-react-sdk/pull/4608)
|
||||
* Font scaling settings and slider
|
||||
[\#4424](https://github.com/matrix-org/matrix-react-sdk/pull/4424)
|
||||
* Prevent PersistedElements overflowing scrolled areas
|
||||
[\#4494](https://github.com/matrix-org/matrix-react-sdk/pull/4494)
|
||||
* IRC ui layout
|
||||
[\#4531](https://github.com/matrix-org/matrix-react-sdk/pull/4531)
|
||||
* Remove SSSS key upgrade check from rageshake
|
||||
[\#4607](https://github.com/matrix-org/matrix-react-sdk/pull/4607)
|
||||
* Label the create room button better than "Add room"
|
||||
[\#4603](https://github.com/matrix-org/matrix-react-sdk/pull/4603)
|
||||
* Convert the dispatcher to TypeScript
|
||||
[\#4593](https://github.com/matrix-org/matrix-react-sdk/pull/4593)
|
||||
* Consolidate password/passphrase fields into a component & add dynamic colour
|
||||
to progress
|
||||
[\#4599](https://github.com/matrix-org/matrix-react-sdk/pull/4599)
|
||||
* UserView, show Welcome page in the mid panel instead of empty space
|
||||
[\#4590](https://github.com/matrix-org/matrix-react-sdk/pull/4590)
|
||||
* Update from Weblate
|
||||
[\#4601](https://github.com/matrix-org/matrix-react-sdk/pull/4601)
|
||||
* Make email auth component fail better if server claims email isn't validated
|
||||
[\#4600](https://github.com/matrix-org/matrix-react-sdk/pull/4600)
|
||||
* Add new keyboard shortcuts for jump to unread and upload file
|
||||
[\#4588](https://github.com/matrix-org/matrix-react-sdk/pull/4588)
|
||||
* accept and linkify local domains like those from mDNS
|
||||
[\#4594](https://github.com/matrix-org/matrix-react-sdk/pull/4594)
|
||||
* Revert "ImageView make clicking off it easier"
|
||||
[\#4586](https://github.com/matrix-org/matrix-react-sdk/pull/4586)
|
||||
* wrap node-qrcode in a React FC and use it for ShareDialog
|
||||
[\#4394](https://github.com/matrix-org/matrix-react-sdk/pull/4394)
|
||||
* Pass screenAfterLogin through SSO in the callback url
|
||||
[\#4585](https://github.com/matrix-org/matrix-react-sdk/pull/4585)
|
||||
* Remove debugging that causes email addresses to load forever
|
||||
[\#4597](https://github.com/matrix-org/matrix-react-sdk/pull/4597)
|
||||
|
||||
Changes in [2.6.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.6.1) (2020-05-22)
|
||||
===================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.6.0...v2.6.1)
|
||||
|
||||
* Fix key backup restore with SSSS
|
||||
[\#4617](https://github.com/matrix-org/matrix-react-sdk/pull/4617)
|
||||
* Remove SSSS key upgrade check from rageshake
|
||||
[\#4616](https://github.com/matrix-org/matrix-react-sdk/pull/4616)
|
||||
|
||||
Changes in [2.6.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.6.0) (2020-05-19)
|
||||
===================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.6.0-rc.1...v2.6.0)
|
||||
|
||||
* Upgrade to JS SDK 6.1.0
|
||||
* Revert "ImageView make clicking off it easier"
|
||||
[\#4602](https://github.com/matrix-org/matrix-react-sdk/pull/4602)
|
||||
* Remove debugging that causes email addresses to load forever (to release)
|
||||
[\#4598](https://github.com/matrix-org/matrix-react-sdk/pull/4598)
|
||||
|
||||
Changes in [2.6.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.6.0-rc.1) (2020-05-14)
|
||||
=============================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0...v2.6.0-rc.1)
|
||||
|
||||
* Upgrade to JS SDK 6.1.0-rc.1
|
||||
* Update from Weblate
|
||||
[\#4596](https://github.com/matrix-org/matrix-react-sdk/pull/4596)
|
||||
* Fix message edits dialog being wrong and sometimes crashing
|
||||
[\#4595](https://github.com/matrix-org/matrix-react-sdk/pull/4595)
|
||||
* Acquire a new session before enacting deactivation
|
||||
[\#4584](https://github.com/matrix-org/matrix-react-sdk/pull/4584)
|
||||
* Remove UI for upgrading 4S to symmetric encryption
|
||||
[\#4581](https://github.com/matrix-org/matrix-react-sdk/pull/4581)
|
||||
* Add copy to SSO prompts during cross-signing setup
|
||||
[\#4555](https://github.com/matrix-org/matrix-react-sdk/pull/4555)
|
||||
* Re-fix OpenID requests from widgets
|
||||
[\#4592](https://github.com/matrix-org/matrix-react-sdk/pull/4592)
|
||||
* Fix persistent widgets on desktop / http
|
||||
[\#4591](https://github.com/matrix-org/matrix-react-sdk/pull/4591)
|
||||
* Updated link and added:Yarn two is not yet used.
|
||||
[\#4589](https://github.com/matrix-org/matrix-react-sdk/pull/4589)
|
||||
* Fix topic dialog not supporting escape as it didn't have a "Close"
|
||||
[\#4578](https://github.com/matrix-org/matrix-react-sdk/pull/4578)
|
||||
* Default to public room when creating room from room directory
|
||||
[\#4579](https://github.com/matrix-org/matrix-react-sdk/pull/4579)
|
||||
* Replace png flags and add Kosovo to country code dropdown
|
||||
[\#4576](https://github.com/matrix-org/matrix-react-sdk/pull/4576)
|
||||
* Rename `trash (custom).svg` as electron doesn't like paths with spaces
|
||||
[\#4583](https://github.com/matrix-org/matrix-react-sdk/pull/4583)
|
||||
* Fix sign in / up links on previewed rooms
|
||||
[\#4582](https://github.com/matrix-org/matrix-react-sdk/pull/4582)
|
||||
* Avoid soft crash if unknown device in verification
|
||||
[\#4580](https://github.com/matrix-org/matrix-react-sdk/pull/4580)
|
||||
* Add slash commands /query and /msg to match IRC
|
||||
[\#4568](https://github.com/matrix-org/matrix-react-sdk/pull/4568)
|
||||
* Send cross-signing debug booleans over rageshake
|
||||
[\#4570](https://github.com/matrix-org/matrix-react-sdk/pull/4570)
|
||||
* Prompt user to specify an alternate server if theirs has registration off
|
||||
[\#4575](https://github.com/matrix-org/matrix-react-sdk/pull/4575)
|
||||
* Don't try and redact redactions for "Remove recent messages"
|
||||
[\#4573](https://github.com/matrix-org/matrix-react-sdk/pull/4573)
|
||||
* View Source should target the replacing event rather than the root one
|
||||
[\#4571](https://github.com/matrix-org/matrix-react-sdk/pull/4571)
|
||||
* Fix passphrase reset in key backup restore dialog
|
||||
[\#4569](https://github.com/matrix-org/matrix-react-sdk/pull/4569)
|
||||
* Ensure key backup gets dealt with correctly during secret storage reset
|
||||
[\#4556](https://github.com/matrix-org/matrix-react-sdk/pull/4556)
|
||||
* Fix crash for broken invites
|
||||
[\#4565](https://github.com/matrix-org/matrix-react-sdk/pull/4565)
|
||||
* Fix rageshake with no matrix client
|
||||
[\#4572](https://github.com/matrix-org/matrix-react-sdk/pull/4572)
|
||||
* Update from Weblate
|
||||
[\#4567](https://github.com/matrix-org/matrix-react-sdk/pull/4567)
|
||||
* Bring back UnknownBody for UISIs
|
||||
[\#4564](https://github.com/matrix-org/matrix-react-sdk/pull/4564)
|
||||
* clear tag panel selection if the community selected is left
|
||||
[\#4559](https://github.com/matrix-org/matrix-react-sdk/pull/4559)
|
||||
* Close ImageView when redacting
|
||||
[\#4560](https://github.com/matrix-org/matrix-react-sdk/pull/4560)
|
||||
* Redesign redactions
|
||||
[\#4484](https://github.com/matrix-org/matrix-react-sdk/pull/4484)
|
||||
* Don't try to reload profile information when closing the user panel
|
||||
[\#4547](https://github.com/matrix-org/matrix-react-sdk/pull/4547)
|
||||
* Fix right panel hiding when viewing room member
|
||||
[\#4558](https://github.com/matrix-org/matrix-react-sdk/pull/4558)
|
||||
* Don't erase password confirm on registration error
|
||||
[\#4540](https://github.com/matrix-org/matrix-react-sdk/pull/4540)
|
||||
* Add a loading state for email addresses/phone numbers in settings
|
||||
[\#4557](https://github.com/matrix-org/matrix-react-sdk/pull/4557)
|
||||
* set the meta tag for theme-color to the same theme css background
|
||||
[\#4554](https://github.com/matrix-org/matrix-react-sdk/pull/4554)
|
||||
* Update Invite Dialog copy to include email addresses
|
||||
[\#4497](https://github.com/matrix-org/matrix-react-sdk/pull/4497)
|
||||
* Fix slider toggle regression.
|
||||
[\#4546](https://github.com/matrix-org/matrix-react-sdk/pull/4546)
|
||||
* Fix a crash where a name could unexpectedly be an empty list
|
||||
[\#4552](https://github.com/matrix-org/matrix-react-sdk/pull/4552)
|
||||
* Solves communities can be dragged from context menu
|
||||
[\#4492](https://github.com/matrix-org/matrix-react-sdk/pull/4492)
|
||||
* Remove prefixes for composer avatar urls
|
||||
[\#4553](https://github.com/matrix-org/matrix-react-sdk/pull/4553)
|
||||
* Fix reply RR spacing getting doubled
|
||||
[\#4541](https://github.com/matrix-org/matrix-react-sdk/pull/4541)
|
||||
* Differentiate copy for own untrusted device dialog
|
||||
[\#4549](https://github.com/matrix-org/matrix-react-sdk/pull/4549)
|
||||
* EventIndex: Reduce the logging the event index is producing.
|
||||
[\#4548](https://github.com/matrix-org/matrix-react-sdk/pull/4548)
|
||||
* Increase rageshake size limit to 5mb
|
||||
[\#4543](https://github.com/matrix-org/matrix-react-sdk/pull/4543)
|
||||
* Update from Weblate
|
||||
[\#4542](https://github.com/matrix-org/matrix-react-sdk/pull/4542)
|
||||
* Guard against race when waiting for cross-signing to be ready
|
||||
[\#4539](https://github.com/matrix-org/matrix-react-sdk/pull/4539)
|
||||
* Wait for user to be verified in e2e setup
|
||||
[\#4537](https://github.com/matrix-org/matrix-react-sdk/pull/4537)
|
||||
* Convert MatrixChat to a TypeScript class
|
||||
[\#4462](https://github.com/matrix-org/matrix-react-sdk/pull/4462)
|
||||
* Mark room as read when escape is pressed
|
||||
[\#4271](https://github.com/matrix-org/matrix-react-sdk/pull/4271)
|
||||
* Only show key backup reminder when confirmed by server to be missing
|
||||
[\#4534](https://github.com/matrix-org/matrix-react-sdk/pull/4534)
|
||||
* Add device name to unverified session toast
|
||||
[\#4535](https://github.com/matrix-org/matrix-react-sdk/pull/4535)
|
||||
* Show progress when loading keys
|
||||
[\#4507](https://github.com/matrix-org/matrix-react-sdk/pull/4507)
|
||||
* Fix device verification toasts not disappearing
|
||||
[\#4532](https://github.com/matrix-org/matrix-react-sdk/pull/4532)
|
||||
* Update toast copy again
|
||||
[\#4529](https://github.com/matrix-org/matrix-react-sdk/pull/4529)
|
||||
* Re-apply theme after login
|
||||
[\#4518](https://github.com/matrix-org/matrix-react-sdk/pull/4518)
|
||||
* Reduce maximum width of toasts & allow multiple lines
|
||||
[\#4525](https://github.com/matrix-org/matrix-react-sdk/pull/4525)
|
||||
* Treat sessions that are there when we log in as old
|
||||
[\#4524](https://github.com/matrix-org/matrix-react-sdk/pull/4524)
|
||||
* Allow resetting storage from the access dialog
|
||||
[\#4521](https://github.com/matrix-org/matrix-react-sdk/pull/4521)
|
||||
* Update (bulk) unverified device toast copy
|
||||
[\#4522](https://github.com/matrix-org/matrix-react-sdk/pull/4522)
|
||||
* Make new device toasts appear above review toasts
|
||||
[\#4519](https://github.com/matrix-org/matrix-react-sdk/pull/4519)
|
||||
* Separate toasts for existing & new device verification
|
||||
[\#4511](https://github.com/matrix-org/matrix-react-sdk/pull/4511)
|
||||
* Slightly darker toggle off bg color
|
||||
[\#4477](https://github.com/matrix-org/matrix-react-sdk/pull/4477)
|
||||
* Fix pill vertical align
|
||||
[\#4514](https://github.com/matrix-org/matrix-react-sdk/pull/4514)
|
||||
* Fix set up encryption toast to use "set up" as action
|
||||
[\#4502](https://github.com/matrix-org/matrix-react-sdk/pull/4502)
|
||||
* Don't enable e2ee when inviting a 3pid
|
||||
[\#4509](https://github.com/matrix-org/matrix-react-sdk/pull/4509)
|
||||
* Fix internal link styling in Security Settings
|
||||
[\#4510](https://github.com/matrix-org/matrix-react-sdk/pull/4510)
|
||||
* Small custom theming fixes
|
||||
[\#4508](https://github.com/matrix-org/matrix-react-sdk/pull/4508)
|
||||
* Fix scaling issues
|
||||
[\#4355](https://github.com/matrix-org/matrix-react-sdk/pull/4355)
|
||||
* Aggregate device verify toasts
|
||||
[\#4506](https://github.com/matrix-org/matrix-react-sdk/pull/4506)
|
||||
* Support setting username and avatar colors in custom themes
|
||||
[\#4503](https://github.com/matrix-org/matrix-react-sdk/pull/4503)
|
||||
* only clear on continuations where the clear isn't done by SenderProfile
|
||||
[\#4501](https://github.com/matrix-org/matrix-react-sdk/pull/4501)
|
||||
* cap width of editable item list item to leave space for its X button
|
||||
[\#4495](https://github.com/matrix-org/matrix-react-sdk/pull/4495)
|
||||
* Add a link from settings / devices to your user profile
|
||||
[\#4498](https://github.com/matrix-org/matrix-react-sdk/pull/4498)
|
||||
* Update from Weblate
|
||||
[\#4496](https://github.com/matrix-org/matrix-react-sdk/pull/4496)
|
||||
* Make icon change in SetupEncryptionDialog
|
||||
[\#4485](https://github.com/matrix-org/matrix-react-sdk/pull/4485)
|
||||
* Remove invite only padlocks feature flag
|
||||
[\#4487](https://github.com/matrix-org/matrix-react-sdk/pull/4487)
|
||||
* Fix incorrect toast if security setup skipped
|
||||
[\#4486](https://github.com/matrix-org/matrix-react-sdk/pull/4486)
|
||||
* Revert "Update emojibase for fixed emoji codepoints and Emoji 13 support"
|
||||
[\#4482](https://github.com/matrix-org/matrix-react-sdk/pull/4482)
|
||||
* Fix widget URL templating (again)
|
||||
[\#4481](https://github.com/matrix-org/matrix-react-sdk/pull/4481)
|
||||
* Fix recovery link on login verification flow
|
||||
[\#4479](https://github.com/matrix-org/matrix-react-sdk/pull/4479)
|
||||
* Make avatars in pills occupy the entire space using cropping
|
||||
[\#4476](https://github.com/matrix-org/matrix-react-sdk/pull/4476)
|
||||
* Use WidgetType more often to avoid breaking new sticker pickers
|
||||
[\#4458](https://github.com/matrix-org/matrix-react-sdk/pull/4458)
|
||||
* Update logging for unmanaged widgets, and add TODO comments for other areas
|
||||
[\#4460](https://github.com/matrix-org/matrix-react-sdk/pull/4460)
|
||||
* Fix OpenID requests from widgets
|
||||
[\#4459](https://github.com/matrix-org/matrix-react-sdk/pull/4459)
|
||||
* Take encrypted message search out of labs
|
||||
[\#4467](https://github.com/matrix-org/matrix-react-sdk/pull/4467)
|
||||
* Fix BigEmoji for replies
|
||||
[\#4475](https://github.com/matrix-org/matrix-react-sdk/pull/4475)
|
||||
* Update login security copy and design to match Figma
|
||||
[\#4472](https://github.com/matrix-org/matrix-react-sdk/pull/4472)
|
||||
* Fix i18n of SSO UIA copy in Deactivate Account Dialog
|
||||
[\#4471](https://github.com/matrix-org/matrix-react-sdk/pull/4471)
|
||||
* Assert type of domNode as HTMLElement to fix build
|
||||
[\#4470](https://github.com/matrix-org/matrix-react-sdk/pull/4470)
|
||||
* Unignored in settings
|
||||
[\#4466](https://github.com/matrix-org/matrix-react-sdk/pull/4466)
|
||||
* Skip auth flow test for signing upload when password present
|
||||
[\#4464](https://github.com/matrix-org/matrix-react-sdk/pull/4464)
|
||||
* If user cannot set email during registration don't tell them to
|
||||
[\#4461](https://github.com/matrix-org/matrix-react-sdk/pull/4461)
|
||||
* Fix post-ts autocomplete, it is not null
|
||||
[\#4463](https://github.com/matrix-org/matrix-react-sdk/pull/4463)
|
||||
* Convert autocomplete stuff to TypeScript
|
||||
[\#4452](https://github.com/matrix-org/matrix-react-sdk/pull/4452)
|
||||
* Add a back button to the devtools verifications panel
|
||||
[\#4455](https://github.com/matrix-org/matrix-react-sdk/pull/4455)
|
||||
* Fix: wait until cross-signing keys are fetched to show verify button
|
||||
[\#4456](https://github.com/matrix-org/matrix-react-sdk/pull/4456)
|
||||
* Handle load error in create secret storage dialog
|
||||
[\#4451](https://github.com/matrix-org/matrix-react-sdk/pull/4451)
|
||||
* Allow iframes and Jitsi URLs in /addwidget
|
||||
[\#4382](https://github.com/matrix-org/matrix-react-sdk/pull/4382)
|
||||
* Support m.jitsi-typed widgets as Jitsi widgets
|
||||
[\#4379](https://github.com/matrix-org/matrix-react-sdk/pull/4379)
|
||||
* Don't recheck DeviceListener until after initial sync is finished
|
||||
[\#4450](https://github.com/matrix-org/matrix-react-sdk/pull/4450)
|
||||
* Fix CSS class in ButtonPlaceholder
|
||||
[\#4449](https://github.com/matrix-org/matrix-react-sdk/pull/4449)
|
||||
* Password Login make sure tab takes user to password field
|
||||
[\#4441](https://github.com/matrix-org/matrix-react-sdk/pull/4441)
|
||||
* Network Dropdown fix things not scrolling properly
|
||||
[\#4439](https://github.com/matrix-org/matrix-react-sdk/pull/4439)
|
||||
* ImageView make clicking off it easier
|
||||
[\#4448](https://github.com/matrix-org/matrix-react-sdk/pull/4448)
|
||||
* Add slash command to send a rageshake
|
||||
[\#4443](https://github.com/matrix-org/matrix-react-sdk/pull/4443)
|
||||
* EventIndex: Filter out events that don't have a propper content value.
|
||||
[\#4446](https://github.com/matrix-org/matrix-react-sdk/pull/4446)
|
||||
* Revert "Fix Filepanel scroll position state lost when room is changed"
|
||||
[\#4445](https://github.com/matrix-org/matrix-react-sdk/pull/4445)
|
||||
* Update seshat copy to remove trailing full stop
|
||||
[\#4442](https://github.com/matrix-org/matrix-react-sdk/pull/4442)
|
||||
* Fix Filepanel scroll position state lost when room is changed
|
||||
[\#4388](https://github.com/matrix-org/matrix-react-sdk/pull/4388)
|
||||
* Fix end-to-end tests for end-to-end encryption verification
|
||||
[\#4436](https://github.com/matrix-org/matrix-react-sdk/pull/4436)
|
||||
* Don't explode if the e2e test directory exists when crashing
|
||||
[\#4437](https://github.com/matrix-org/matrix-react-sdk/pull/4437)
|
||||
* Bump https-proxy-agent from 2.2.1 to 2.2.4 in /test/end-to-end-tests
|
||||
[\#4430](https://github.com/matrix-org/matrix-react-sdk/pull/4430)
|
||||
* Minor updates to e2e test instructions on Windows
|
||||
[\#4432](https://github.com/matrix-org/matrix-react-sdk/pull/4432)
|
||||
* Fix typo
|
||||
[\#4435](https://github.com/matrix-org/matrix-react-sdk/pull/4435)
|
||||
* Catch errors sooner so users can recover more easily
|
||||
[\#4122](https://github.com/matrix-org/matrix-react-sdk/pull/4122)
|
||||
* Rageshake: remind user of unsupported browser and send modernizr report
|
||||
[\#4381](https://github.com/matrix-org/matrix-react-sdk/pull/4381)
|
||||
* Design tweaks for DM Room Tiles
|
||||
[\#4338](https://github.com/matrix-org/matrix-react-sdk/pull/4338)
|
||||
* Don't break spills over multiple lines, ellipsis them at max-1-line
|
||||
[\#4434](https://github.com/matrix-org/matrix-react-sdk/pull/4434)
|
||||
* Turn the end-to-end tests back on and fix the lazy-loading tests
|
||||
[\#4433](https://github.com/matrix-org/matrix-react-sdk/pull/4433)
|
||||
* Fix key backup debug panel
|
||||
[\#4431](https://github.com/matrix-org/matrix-react-sdk/pull/4431)
|
||||
* Convert cross-signing feature flag to setting
|
||||
[\#4416](https://github.com/matrix-org/matrix-react-sdk/pull/4416)
|
||||
* Make RoomPublishSetting import-skinnable
|
||||
[\#4428](https://github.com/matrix-org/matrix-react-sdk/pull/4428)
|
||||
* Iterate cross-signing copy
|
||||
[\#4425](https://github.com/matrix-org/matrix-react-sdk/pull/4425)
|
||||
* Fix: ensure twemoji font is loaded when showing SAS emojis
|
||||
[\#4422](https://github.com/matrix-org/matrix-react-sdk/pull/4422)
|
||||
* Revert "Fix: load Twemoji before login so complete security gets the right
|
||||
emojis during SAS"
|
||||
[\#4421](https://github.com/matrix-org/matrix-react-sdk/pull/4421)
|
||||
* Fix: load Twemoji before login so complete security gets the right emojis
|
||||
during SAS
|
||||
[\#4419](https://github.com/matrix-org/matrix-react-sdk/pull/4419)
|
||||
* consolidate and fix copy to clipboard
|
||||
[\#4410](https://github.com/matrix-org/matrix-react-sdk/pull/4410)
|
||||
* Fix Message Context Menu options not displaying: block
|
||||
[\#4418](https://github.com/matrix-org/matrix-react-sdk/pull/4418)
|
||||
* Fix pills being broken by unescaped characters
|
||||
[\#4411](https://github.com/matrix-org/matrix-react-sdk/pull/4411)
|
||||
|
||||
Changes in [2.5.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0) (2020-05-05)
|
||||
===================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.6...v2.5.0)
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Matrix JavaScript/ECMAScript Style Guide
|
|||
The intention of this guide is to make Matrix's JavaScript codebase clean,
|
||||
consistent with other popular JavaScript styles and consistent with the rest of
|
||||
the Matrix codebase. For reference, the Matrix Python style guide can be found
|
||||
at https://github.com/matrix-org/synapse/blob/master/docs/code_style.rst
|
||||
at https://github.com/matrix-org/synapse/blob/master/docs/code_style.md
|
||||
|
||||
This document reflects how we would like Matrix JavaScript code to look, with
|
||||
acknowledgement that a significant amount of code is written to older
|
||||
|
|
@ -17,7 +17,7 @@ writing in modern ECMAScript and using a transpile step to generate the file
|
|||
that applications can then include. There are significant benefits in being
|
||||
able to use modern ECMAScript, although the tooling for doing so can be awkward
|
||||
for library code, especially with regard to translating source maps and line
|
||||
number throgh from the original code to the final application.
|
||||
number through from the original code to the final application.
|
||||
|
||||
General Style
|
||||
-------------
|
||||
|
|
@ -151,6 +151,7 @@ General Style
|
|||
Don't set things to undefined. Reserve that value to mean "not yet set to anything."
|
||||
Boolean objects are verboten.
|
||||
- Use JSDoc
|
||||
- Use switch-case statements where there are 5 or more branches running against the same variable.
|
||||
|
||||
ECMAScript
|
||||
----------
|
||||
|
|
|
|||
BIN
docs/img/RoomListStore2.png
Normal file
BIN
docs/img/RoomListStore2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
151
docs/room-list-store.md
Normal file
151
docs/room-list-store.md
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
# Room list sorting
|
||||
|
||||
It's so complicated it needs its own README.
|
||||
|
||||
|
||||
|
||||
Legend:
|
||||
* Orange = External event.
|
||||
* Purple = Deterministic flow.
|
||||
* Green = Algorithm definition.
|
||||
* Red = Exit condition/point.
|
||||
* Blue = Process definition.
|
||||
|
||||
## Algorithms involved
|
||||
|
||||
There's two main kinds of algorithms involved in the room list store: list ordering and tag sorting.
|
||||
Throughout the code an intentional decision has been made to call them the List Algorithm and Sorting
|
||||
Algorithm respectively. The list algorithm determines the primary ordering of a given tag whereas the
|
||||
tag sorting defines how rooms within that tag get sorted, at the discretion of the list ordering.
|
||||
|
||||
Behaviour of the overall room list (sticky rooms, etc) are determined by the generically-named Algorithm
|
||||
class. Here is where much of the coordination from the room list store is done to figure out which list
|
||||
algorithm to call, instead of having all the logic in the room list store itself.
|
||||
|
||||
|
||||
Tag sorting is effectively the comparator supplied to the list algorithm. This gives the list algorithm
|
||||
the power to decide when and how to apply the tag sorting, if at all. For example, the importance algorithm,
|
||||
later described in this document, heavily uses the list ordering behaviour to break the tag into categories.
|
||||
Each category then gets sorted by the appropriate tag sorting algorithm.
|
||||
|
||||
### Tag sorting algorithm: Alphabetical
|
||||
|
||||
When used, rooms in a given tag will be sorted alphabetically, where the alphabet's order is a problem
|
||||
for the browser. All we do is a simple string comparison and expect the browser to return something
|
||||
useful.
|
||||
|
||||
### Tag sorting algorithm: Manual
|
||||
|
||||
Manual sorting makes use of the `order` property present on all tags for a room, per the
|
||||
[Matrix specification](https://matrix.org/docs/spec/client_server/r0.6.0#room-tagging). Smaller values
|
||||
of `order` cause rooms to appear closer to the top of the list.
|
||||
|
||||
### Tag sorting algorithm: Recent
|
||||
|
||||
Rooms get ordered by the timestamp of the most recent useful message. Usefulness is yet another algorithm
|
||||
in the room list system which determines whether an event type is capable of bubbling up in the room list.
|
||||
Normally events like room messages, stickers, and room security changes will be considered useful enough
|
||||
to cause a shift in time.
|
||||
|
||||
Note that this is reliant on the event timestamps of the most recent message. Because Matrix is eventually
|
||||
consistent this means that from time to time a room might plummet or skyrocket across the tag due to the
|
||||
timestamp contained within the event (generated server-side by the sender's server).
|
||||
|
||||
### List ordering algorithm: Natural
|
||||
|
||||
This is the easiest of the algorithms to understand because it does essentially nothing. It imposes no
|
||||
behavioural changes over the tag sorting algorithm and is by far the simplest way to order a room list.
|
||||
Historically, it's been the only option in Riot and extremely common in most chat applications due to
|
||||
its relative deterministic behaviour.
|
||||
|
||||
### List ordering algorithm: Importance
|
||||
|
||||
On the other end of the spectrum, this is the most complicated algorithm which exists. There's major
|
||||
behavioural changes, and the tag sorting algorithm gets selectively applied depending on circumstances.
|
||||
|
||||
Each tag which is not manually ordered gets split into 4 sections or "categories". Manually ordered tags
|
||||
simply get the manual sorting algorithm applied to them with no further involvement from the importance
|
||||
algorithm. There are 4 categories: Red, Grey, Bold, and Idle. Each has their own definition based off
|
||||
relative (perceived) importance to the user:
|
||||
|
||||
* **Red**: The room has unread mentions waiting for the user.
|
||||
* **Grey**: The room has unread notifications waiting for the user. Notifications are simply unread
|
||||
messages which cause a push notification or badge count. Typically, this is the default as rooms get
|
||||
set to 'All Messages'.
|
||||
* **Bold**: The room has unread messages waiting for the user. Essentially this is a grey room without
|
||||
a badge/notification count (or 'Mentions Only'/'Muted').
|
||||
* **Idle**: No useful (see definition of useful above) activity has occurred in the room since the user
|
||||
last read it.
|
||||
|
||||
Conveniently, each tag gets ordered by those categories as presented: red rooms appear above grey, grey
|
||||
above bold, etc.
|
||||
|
||||
Once the algorithm has determined which rooms belong in which categories, the tag sorting algorithm
|
||||
gets applied to each category in a sub-list fashion. This should result in the red rooms (for example)
|
||||
being sorted alphabetically amongst each other as well as the grey rooms sorted amongst each other, but
|
||||
collectively the tag will be sorted into categories with red being at the top.
|
||||
|
||||
## Sticky rooms
|
||||
|
||||
When the user visits a room, that room becomes 'sticky' in the list, regardless of ordering algorithm.
|
||||
From a code perspective, the underlying algorithm is not aware of a sticky room and instead the base class
|
||||
manages which room is sticky. This is to ensure that all algorithms handle it the same.
|
||||
|
||||
The sticky flag is simply to say it will not move higher or lower down the list while it is active. For
|
||||
example, if using the importance algorithm, the room would naturally become idle once viewed and thus
|
||||
would normally fly down the list out of sight. The sticky room concept instead holds it in place, never
|
||||
letting it fly down until the user moves to another room.
|
||||
|
||||
Only one room can be sticky at a time. Room updates around the sticky room will still hold the sticky
|
||||
room in place. The best example of this is the importance algorithm: if the user has 3 red rooms and
|
||||
selects the middle room, they will see exactly one room above their selection at all times. If they
|
||||
receive another notification which causes the room to move into the topmost position, the room that was
|
||||
above the sticky room will move underneath to allow for the new room to take the top slot, maintaining
|
||||
the sticky room's position.
|
||||
|
||||
Though only applicable to the importance algorithm, the sticky room is not aware of category boundaries
|
||||
and thus the user can see a shift in what kinds of rooms move around their selection. An example would
|
||||
be the user having 4 red rooms, the user selecting the third room (leaving 2 above it), and then having
|
||||
the rooms above it read on another device. This would result in 1 red room and 1 other kind of room
|
||||
above the sticky room as it will try to maintain 2 rooms above the sticky room.
|
||||
|
||||
An exception for the sticky room placement is when there's suddenly not enough rooms to maintain the placement
|
||||
exactly. This typically happens if the user selects a room and leaves enough rooms where it cannot maintain
|
||||
the N required rooms above the sticky room. In this case, the sticky room will simply decrease N as needed.
|
||||
The N value will never increase while selection remains unchanged: adding a bunch of rooms after having
|
||||
put the sticky room in a position where it's had to decrease N will not increase N.
|
||||
|
||||
## Responsibilities of the store
|
||||
|
||||
The store is responsible for the ordering, upkeep, and tracking of all rooms. The room list component simply gets
|
||||
an object containing the tags it needs to worry about and the rooms within. The room list component will
|
||||
decide which tags need rendering (as it commonly filters out empty tags in most cases), and will deal with
|
||||
all kinds of filtering.
|
||||
|
||||
## Filtering
|
||||
|
||||
Filters are provided to the store as condition classes, which are then passed along to the algorithm
|
||||
implementations. The implementations then get to decide how to actually filter the rooms, however in
|
||||
practice the base `Algorithm` class deals with the filtering in a more optimized/generic way.
|
||||
|
||||
The results of filters get cached to avoid needlessly iterating over potentially thousands of rooms,
|
||||
as the old room list store does. When a filter condition changes, it emits an update which (in this
|
||||
case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a
|
||||
minor subset where possible to avoid over-iterating rooms.
|
||||
|
||||
All filter conditions are considered "stable" by the consumers, meaning that the consumer does not
|
||||
expect a change in the condition unless the condition says it has changed. This is intentional to
|
||||
maintain the caching behaviour described above.
|
||||
|
||||
## Class breakdowns
|
||||
|
||||
The `RoomListStore` is the major coordinator of various algorithm implementations, which take care
|
||||
of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` class is responsible
|
||||
for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: tags get
|
||||
defined on rooms and are not defined as a collection of rooms (unlike how they are presented to the
|
||||
user). Various list-specific utilities are also included, though they are expected to move somewhere
|
||||
more general when needed. For example, the `membership` utilities could easily be moved elsewhere
|
||||
as needed.
|
||||
|
||||
The various bits throughout the room list store should also have jsdoc of some kind to help describe
|
||||
what they do and how they work.
|
||||
23
package.json
23
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "matrix-react-sdk",
|
||||
"version": "2.5.0",
|
||||
"version": "2.9.0",
|
||||
"description": "SDK for matrix.org using React",
|
||||
"author": "matrix.org",
|
||||
"repository": {
|
||||
|
|
@ -55,6 +55,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.8.3",
|
||||
"await-lock": "^2.0.1",
|
||||
"blueimp-canvas-to-blob": "^3.5.0",
|
||||
"browser-encrypt-attachment": "^0.3.0",
|
||||
"browser-request": "^0.3.3",
|
||||
|
|
@ -64,8 +65,8 @@
|
|||
"create-react-class": "^15.6.0",
|
||||
"diff-dom": "^4.1.3",
|
||||
"diff-match-patch": "^1.0.4",
|
||||
"emojibase-data": "^4.0.2",
|
||||
"emojibase-regex": "^3.0.0",
|
||||
"emojibase-data": "^5.0.1",
|
||||
"emojibase-regex": "^4.0.1",
|
||||
"escape-html": "^1.0.3",
|
||||
"file-saver": "^1.3.3",
|
||||
"filesize": "3.5.6",
|
||||
|
|
@ -88,10 +89,12 @@
|
|||
"prop-types": "^15.5.8",
|
||||
"qrcode": "^1.4.4",
|
||||
"qs": "^6.6.0",
|
||||
"re-resizable": "^6.5.2",
|
||||
"react": "^16.9.0",
|
||||
"react-beautiful-dnd": "^4.0.1",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-focus-lock": "^2.2.1",
|
||||
"react-transition-group": "^4.4.1",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"sanitize-html": "^1.18.4",
|
||||
"text-encoding-utf-8": "^1.0.1",
|
||||
|
|
@ -117,9 +120,17 @@
|
|||
"@babel/register": "^7.7.4",
|
||||
"@peculiar/webcrypto": "^1.0.22",
|
||||
"@types/classnames": "^2.2.10",
|
||||
"@types/counterpart": "^0.18.1",
|
||||
"@types/flux": "^3.1.9",
|
||||
"@types/linkifyjs": "^2.1.3",
|
||||
"@types/lodash": "^4.14.152",
|
||||
"@types/modernizr": "^3.5.3",
|
||||
"@types/node": "^12.12.41",
|
||||
"@types/qrcode": "^1.3.4",
|
||||
"@types/react": "16.9",
|
||||
"@types/react": "^16.9",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
"@types/react-transition-group": "^4.4.0",
|
||||
"@types/sanitize-html": "^1.23.3",
|
||||
"@types/zxcvbn": "^4.4.0",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"babel-jest": "^24.9.0",
|
||||
|
|
@ -139,6 +150,7 @@
|
|||
"flow-parser": "^0.57.3",
|
||||
"glob": "^5.0.14",
|
||||
"jest": "^24.9.0",
|
||||
"jest-canvas-mock": "^2.2.0",
|
||||
"lolex": "^5.1.2",
|
||||
"matrix-mock-request": "^1.2.3",
|
||||
"matrix-react-test-utils": "^0.2.2",
|
||||
|
|
@ -158,6 +170,9 @@
|
|||
"testMatch": [
|
||||
"<rootDir>/test/**/*-test.js"
|
||||
],
|
||||
"setupFiles": [
|
||||
"jest-canvas-mock"
|
||||
],
|
||||
"setupFilesAfterEnv": [
|
||||
"<rootDir>/test/setupTests.js"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ limitations under the License.
|
|||
@import "./_font-sizes.scss";
|
||||
|
||||
:root {
|
||||
font-size: 15px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -319,7 +319,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
}
|
||||
|
||||
.mx_Dialog_titleImage {
|
||||
vertical-align: middle;
|
||||
vertical-align: sub;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: -2px;
|
||||
|
|
@ -335,6 +335,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
|
||||
text-align: center;
|
||||
}
|
||||
.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
|
||||
margin-right: 20px; // leave space for the 'X' cancel button
|
||||
}
|
||||
|
||||
.mx_Dialog_title.danger {
|
||||
color: $warning-color;
|
||||
|
|
@ -425,6 +428,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
border-radius: 8px;
|
||||
padding: 0px;
|
||||
box-shadow: none;
|
||||
|
||||
/* Don't show scroll-bars on spinner dialogs */
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
// TODO: Review mx_GeneralButton usage to see if it can use a different class
|
||||
|
|
@ -578,3 +585,111 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
// So it fits in the space provided by the page
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
// A context menu that largely fits the | [icon] [label] | format.
|
||||
.mx_IconizedContextMenu {
|
||||
min-width: 146px;
|
||||
|
||||
.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.
|
||||
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
|
||||
// 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.
|
||||
// To get the right color, we need an opacity modifier which means we have to work
|
||||
// around the problem. PostCSS doesn't support the opacity() function, and if we
|
||||
// use something like postcss-functions we quickly run into an issue where the
|
||||
// function we would define gets passed a CSS variable for custom themes, which
|
||||
// can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
|
||||
//
|
||||
// Therefore, we just hack in a line and border the thing ourselves
|
||||
&::before {
|
||||
border-top: 1px solid $primary-fg-color;
|
||||
opacity: 0.1;
|
||||
content: '';
|
||||
|
||||
// Counteract the padding problems (width: 100% ignores the 40px padding,
|
||||
// unless we position it absolutely then it does the right thing).
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// round the top corners of the top button for the hover effect to be bounded
|
||||
&:first-child .mx_AccessibleButton:first-child {
|
||||
border-radius: 4px 4px 0 0; // radius matches .mx_ContextualMenu
|
||||
}
|
||||
|
||||
// round the bottom corners of the bottom button for the hover effect to be bounded
|
||||
&:last-child .mx_AccessibleButton:last-child {
|
||||
border-radius: 0 0 4px 4px; // radius matches .mx_ContextualMenu
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
// pad the inside of the button so that the hover background is padded too
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
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
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: $menu-selected-color;
|
||||
}
|
||||
|
||||
img, .mx_IconizedContextMenu_icon { // icons
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
max-width: 16px;
|
||||
}
|
||||
|
||||
span.mx_IconizedContextMenu_label { // labels
|
||||
padding-left: 14px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_IconizedContextMenu_compact {
|
||||
.mx_IconizedContextMenu_optionList > * {
|
||||
padding: 8px 16px 8px 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,12 +12,14 @@
|
|||
@import "./structures/_HeaderButtons.scss";
|
||||
@import "./structures/_HomePage.scss";
|
||||
@import "./structures/_LeftPanel.scss";
|
||||
@import "./structures/_LeftPanel2.scss";
|
||||
@import "./structures/_MainSplit.scss";
|
||||
@import "./structures/_MatrixChat.scss";
|
||||
@import "./structures/_MyGroups.scss";
|
||||
@import "./structures/_NotificationPanel.scss";
|
||||
@import "./structures/_RightPanel.scss";
|
||||
@import "./structures/_RoomDirectory.scss";
|
||||
@import "./structures/_RoomSearch.scss";
|
||||
@import "./structures/_RoomStatusBar.scss";
|
||||
@import "./structures/_RoomSubList.scss";
|
||||
@import "./structures/_RoomView.scss";
|
||||
|
|
@ -28,6 +30,7 @@
|
|||
@import "./structures/_ToastContainer.scss";
|
||||
@import "./structures/_TopLeftMenuButton.scss";
|
||||
@import "./structures/_UploadBar.scss";
|
||||
@import "./structures/_UserMenu.scss";
|
||||
@import "./structures/_ViewSource.scss";
|
||||
@import "./structures/auth/_CompleteSecurity.scss";
|
||||
@import "./structures/auth/_Login.scss";
|
||||
|
|
@ -46,7 +49,9 @@
|
|||
@import "./views/auth/_ServerTypeSelector.scss";
|
||||
@import "./views/auth/_Welcome.scss";
|
||||
@import "./views/avatars/_BaseAvatar.scss";
|
||||
@import "./views/avatars/_DecoratedRoomAvatar.scss";
|
||||
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
|
||||
@import "./views/avatars/_PulsedAvatar.scss";
|
||||
@import "./views/context_menus/_MessageContextMenu.scss";
|
||||
@import "./views/context_menus/_RoomTileContextMenu.scss";
|
||||
@import "./views/context_menus/_StatusMessageContextMenu.scss";
|
||||
|
|
@ -61,9 +66,7 @@
|
|||
@import "./views/dialogs/_CreateGroupDialog.scss";
|
||||
@import "./views/dialogs/_CreateRoomDialog.scss";
|
||||
@import "./views/dialogs/_DeactivateAccountDialog.scss";
|
||||
@import "./views/dialogs/_DeviceVerifyDialog.scss";
|
||||
@import "./views/dialogs/_DevtoolsDialog.scss";
|
||||
@import "./views/dialogs/_EncryptedEventDialog.scss";
|
||||
@import "./views/dialogs/_GroupAddressPicker.scss";
|
||||
@import "./views/dialogs/_IncomingSasDialog.scss";
|
||||
@import "./views/dialogs/_InviteDialog.scss";
|
||||
|
|
@ -82,7 +85,6 @@
|
|||
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
|
||||
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
|
||||
@import "./views/dialogs/_TermsDialog.scss";
|
||||
@import "./views/dialogs/_UnknownDeviceDialog.scss";
|
||||
@import "./views/dialogs/_UploadConfirmDialog.scss";
|
||||
@import "./views/dialogs/_UserSettingsDialog.scss";
|
||||
@import "./views/dialogs/_WidgetOpenIDPermissionsDialog.scss";
|
||||
|
|
@ -115,7 +117,10 @@
|
|||
@import "./views/elements/_RichText.scss";
|
||||
@import "./views/elements/_RoleButton.scss";
|
||||
@import "./views/elements/_RoomAliasField.scss";
|
||||
@import "./views/elements/_Slider.scss";
|
||||
@import "./views/elements/_Spinner.scss";
|
||||
@import "./views/elements/_StyledCheckbox.scss";
|
||||
@import "./views/elements/_StyledRadioButton.scss";
|
||||
@import "./views/elements/_SyntaxHighlight.scss";
|
||||
@import "./views/elements/_TextWithTooltip.scss";
|
||||
@import "./views/elements/_ToggleSwitch.scss";
|
||||
|
|
@ -123,7 +128,6 @@
|
|||
@import "./views/elements/_TooltipButton.scss";
|
||||
@import "./views/elements/_Validation.scss";
|
||||
@import "./views/emojipicker/_EmojiPicker.scss";
|
||||
@import "./views/globals/_MatrixToolbar.scss";
|
||||
@import "./views/groups/_GroupPublicityToggle.scss";
|
||||
@import "./views/groups/_GroupRoomList.scss";
|
||||
@import "./views/groups/_GroupUserSettings.scss";
|
||||
|
|
@ -162,25 +166,32 @@
|
|||
@import "./views/rooms/_EditMessageComposer.scss";
|
||||
@import "./views/rooms/_EntityTile.scss";
|
||||
@import "./views/rooms/_EventTile.scss";
|
||||
@import "./views/rooms/_GroupLayout.scss";
|
||||
@import "./views/rooms/_IRCLayout.scss";
|
||||
@import "./views/rooms/_InviteOnlyIcon.scss";
|
||||
@import "./views/rooms/_JumpToBottomButton.scss";
|
||||
@import "./views/rooms/_LinkPreviewWidget.scss";
|
||||
@import "./views/rooms/_MemberDeviceInfo.scss";
|
||||
@import "./views/rooms/_MemberInfo.scss";
|
||||
@import "./views/rooms/_MemberList.scss";
|
||||
@import "./views/rooms/_MessageComposer.scss";
|
||||
@import "./views/rooms/_MessageComposerFormatBar.scss";
|
||||
@import "./views/rooms/_NotificationBadge.scss";
|
||||
@import "./views/rooms/_PinnedEventTile.scss";
|
||||
@import "./views/rooms/_PinnedEventsPanel.scss";
|
||||
@import "./views/rooms/_PresenceLabel.scss";
|
||||
@import "./views/rooms/_ReplyPreview.scss";
|
||||
@import "./views/rooms/_RoomBreadcrumbs.scss";
|
||||
@import "./views/rooms/_RoomBreadcrumbs2.scss";
|
||||
@import "./views/rooms/_RoomDropTarget.scss";
|
||||
@import "./views/rooms/_RoomHeader.scss";
|
||||
@import "./views/rooms/_RoomList.scss";
|
||||
@import "./views/rooms/_RoomList2.scss";
|
||||
@import "./views/rooms/_RoomPreviewBar.scss";
|
||||
@import "./views/rooms/_RoomRecoveryReminder.scss";
|
||||
@import "./views/rooms/_RoomSublist2.scss";
|
||||
@import "./views/rooms/_RoomTile.scss";
|
||||
@import "./views/rooms/_RoomTile2.scss";
|
||||
@import "./views/rooms/_RoomTileIcon.scss";
|
||||
@import "./views/rooms/_RoomUpgradeWarningBar.scss";
|
||||
@import "./views/rooms/_SearchBar.scss";
|
||||
@import "./views/rooms/_SendMessageComposer.scss";
|
||||
|
|
@ -200,10 +211,12 @@
|
|||
@import "./views/settings/_ProfileSettings.scss";
|
||||
@import "./views/settings/_SetIdServer.scss";
|
||||
@import "./views/settings/_SetIntegrationManager.scss";
|
||||
@import "./views/settings/_UpdateCheckButton.scss";
|
||||
@import "./views/settings/tabs/_SettingsTab.scss";
|
||||
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
|
||||
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
|
||||
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
|
||||
|
|
@ -213,6 +226,8 @@
|
|||
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
|
||||
@import "./views/terms/_InlineTermsAgreement.scss";
|
||||
@import "./views/verification/_VerificationShowSas.scss";
|
||||
@import "./views/voip/_CallContainer.scss";
|
||||
@import "./views/voip/_CallView.scss";
|
||||
@import "./views/voip/_CallView2.scss";
|
||||
@import "./views/voip/_IncomingCallbox.scss";
|
||||
@import "./views/voip/_VideoView.scss";
|
||||
|
|
|
|||
|
|
@ -14,58 +14,59 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
$font-1px: 0.067rem;
|
||||
$font-2px: 0.133rem;
|
||||
$font-3px: 0.200rem;
|
||||
$font-4px: 0.267rem;
|
||||
$font-5px: 0.333rem;
|
||||
$font-6px: 0.400rem;
|
||||
$font-7px: 0.467rem;
|
||||
$font-8px: 0.533rem;
|
||||
$font-9px: 0.600rem;
|
||||
$font-10px: 0.667rem;
|
||||
$font-10-4px: 0.693rem;
|
||||
$font-11px: 0.733rem;
|
||||
$font-12px: 0.800rem;
|
||||
$font-13px: 0.867rem;
|
||||
$font-14px: 0.933rem;
|
||||
$font-15px: 1.000rem;
|
||||
$font-16px: 1.067rem;
|
||||
$font-17px: 1.133rem;
|
||||
$font-18px: 1.200rem;
|
||||
$font-19px: 1.267rem;
|
||||
$font-20px: 1.3333333rem;
|
||||
$font-21px: 1.400rem;
|
||||
$font-22px: 1.467rem;
|
||||
$font-23px: 1.533rem;
|
||||
$font-24px: 1.600rem;
|
||||
$font-25px: 1.667rem;
|
||||
$font-26px: 1.733rem;
|
||||
$font-27px: 1.800rem;
|
||||
$font-28px: 1.867rem;
|
||||
$font-29px: 1.933rem;
|
||||
$font-30px: 2.000rem;
|
||||
$font-31px: 2.067rem;
|
||||
$font-32px: 2.133rem;
|
||||
$font-33px: 2.200rem;
|
||||
$font-34px: 2.267rem;
|
||||
$font-35px: 2.333rem;
|
||||
$font-36px: 2.400rem;
|
||||
$font-37px: 2.467rem;
|
||||
$font-38px: 2.533rem;
|
||||
$font-39px: 2.600rem;
|
||||
$font-40px: 2.667rem;
|
||||
$font-41px: 2.733rem;
|
||||
$font-42px: 2.800rem;
|
||||
$font-43px: 2.867rem;
|
||||
$font-44px: 2.933rem;
|
||||
$font-45px: 3.000rem;
|
||||
$font-46px: 3.067rem;
|
||||
$font-47px: 3.133rem;
|
||||
$font-48px: 3.200rem;
|
||||
$font-49px: 3.267rem;
|
||||
$font-50px: 3.333rem;
|
||||
$font-51px: 3.400rem;
|
||||
$font-52px: 3.467rem;
|
||||
$font-88px: 5.887rem;
|
||||
$font-400px: 26.667rem;
|
||||
$font-1px: 0.1rem;
|
||||
$font-1-5px: 0.15rem;
|
||||
$font-2px: 0.2rem;
|
||||
$font-3px: 0.3rem;
|
||||
$font-4px: 0.4rem;
|
||||
$font-5px: 0.5rem;
|
||||
$font-6px: 0.6rem;
|
||||
$font-7px: 0.7rem;
|
||||
$font-8px: 0.8rem;
|
||||
$font-9px: 0.9rem;
|
||||
$font-10px: 1.0rem;
|
||||
$font-10-4px: 1.04rem;
|
||||
$font-11px: 1.1rem;
|
||||
$font-12px: 1.2rem;
|
||||
$font-13px: 1.3rem;
|
||||
$font-14px: 1.4rem;
|
||||
$font-15px: 1.5rem;
|
||||
$font-16px: 1.6rem;
|
||||
$font-17px: 1.7rem;
|
||||
$font-18px: 1.8rem;
|
||||
$font-19px: 1.9rem;
|
||||
$font-20px: 2.0rem;
|
||||
$font-21px: 2.1rem;
|
||||
$font-22px: 2.2rem;
|
||||
$font-23px: 2.3rem;
|
||||
$font-24px: 2.4rem;
|
||||
$font-25px: 2.5rem;
|
||||
$font-26px: 2.6rem;
|
||||
$font-27px: 2.7rem;
|
||||
$font-28px: 2.8rem;
|
||||
$font-29px: 2.9rem;
|
||||
$font-30px: 3.0rem;
|
||||
$font-31px: 3.1rem;
|
||||
$font-32px: 3.2rem;
|
||||
$font-33px: 3.3rem;
|
||||
$font-34px: 3.4rem;
|
||||
$font-35px: 3.5rem;
|
||||
$font-36px: 3.6rem;
|
||||
$font-37px: 3.7rem;
|
||||
$font-38px: 3.8rem;
|
||||
$font-39px: 3.9rem;
|
||||
$font-40px: 4.0rem;
|
||||
$font-41px: 4.1rem;
|
||||
$font-42px: 4.2rem;
|
||||
$font-43px: 4.3rem;
|
||||
$font-44px: 4.4rem;
|
||||
$font-45px: 4.5rem;
|
||||
$font-46px: 4.6rem;
|
||||
$font-47px: 4.7rem;
|
||||
$font-48px: 4.8rem;
|
||||
$font-49px: 4.9rem;
|
||||
$font-50px: 5.0rem;
|
||||
$font-51px: 5.1rem;
|
||||
$font-52px: 5.2rem;
|
||||
$font-88px: 8.8rem;
|
||||
$font-400px: 40rem;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ limitations under the License.
|
|||
display: flex;
|
||||
/* LeftPanel 260px */
|
||||
min-width: 260px;
|
||||
max-width: 50%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
201
res/css/structures/_LeftPanel2.scss
Normal file
201
res/css/structures/_LeftPanel2.scss
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
|
||||
|
||||
$tagPanelWidth: 70px; // only applies in this file, used for calculations
|
||||
|
||||
.mx_LeftPanel2 {
|
||||
background-color: $roomlist2-bg-color;
|
||||
min-width: 260px;
|
||||
max-width: 50%;
|
||||
|
||||
// Create a row-based flexbox for the TagPanel and the room list
|
||||
display: flex;
|
||||
|
||||
.mx_LeftPanel2_tagPanelContainer {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: $tagPanelWidth;
|
||||
height: 100%;
|
||||
|
||||
// Create another flexbox so the TagPanel fills the container
|
||||
display: flex;
|
||||
|
||||
// TagPanel handles its own CSS
|
||||
}
|
||||
|
||||
&:not(.mx_LeftPanel2_hasTagPanel) {
|
||||
.mx_LeftPanel2_roomListContainer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Note: The 'room list' in this context is actually everything that isn't the tag
|
||||
// panel, such as the menu options, breadcrumbs, filtering, etc
|
||||
.mx_LeftPanel2_roomListContainer {
|
||||
width: calc(100% - $tagPanelWidth);
|
||||
|
||||
// Create another flexbox (this time a column) for the room list components
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_LeftPanel2_userHeader {
|
||||
/* 12px top, 12px sides, 20px bottom (using 13px bottom to account
|
||||
* for internal whitespace in the breadcrumbs)
|
||||
*/
|
||||
padding: 12px 12px 13px;
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
// Create another flexbox column for the rows to stack within
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// This is basically just breadcrumbs. The row above that is handled by the UserMenu
|
||||
.mx_LeftPanel2_headerRow {
|
||||
// Create yet another flexbox, this time within the row, to ensure items stay
|
||||
// aligned correctly. This is also a row-based flexbox.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_breadcrumbsContainer {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
&.mx_IndicatorScrollbar_leftOverflow {
|
||||
mask-image: linear-gradient(90deg, transparent, black 10%);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_rightOverflow {
|
||||
mask-image: linear-gradient(90deg, black, black 90%, transparent);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
|
||||
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_filterContainer {
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
// Create a flexbox to organize the inputs
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_RoomSearch_expanded + .mx_LeftPanel2_exploreButton {
|
||||
// Cheaty way to return the occupied space to the filter input
|
||||
flex-basis: 0;
|
||||
margin: 0;
|
||||
width: 0;
|
||||
|
||||
// Don't forget to hide the masked ::before icon,
|
||||
// using display:none or visibility:hidden would break accessibility
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_exploreButton {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 20px;
|
||||
background-color: $roomlist2-button-bg-color;
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-image: url('$(res)/img/feather-customised/compass.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_roomListWrapper {
|
||||
// Create a flexbox to ensure the containing items cause appropriate overflow.
|
||||
display: flex;
|
||||
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
margin-top: 12px; // so we're not up against the search/filter
|
||||
|
||||
&.mx_LeftPanel2_roomListWrapper_stickyBottom {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
&.mx_LeftPanel2_roomListWrapper_stickyTop {
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_actualRoomListContainer {
|
||||
flex-grow: 1; // fill the available space
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
position: relative; // for sticky headers
|
||||
|
||||
// Create a flexbox to trick the layout engine
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// These styles override the defaults for the minimized (66px) layout
|
||||
&.mx_LeftPanel2_minimized {
|
||||
min-width: unset;
|
||||
|
||||
// We have to forcefully set the width to override the resizer's style attribute.
|
||||
&.mx_LeftPanel2_hasTagPanel {
|
||||
width: calc(68px + $tagPanelWidth) !important;
|
||||
}
|
||||
&:not(.mx_LeftPanel2_hasTagPanel) {
|
||||
width: 68px !important;
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_roomListContainer {
|
||||
width: 68px;
|
||||
|
||||
.mx_LeftPanel2_filterContainer {
|
||||
// Organize the flexbox into a centered column layout
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.mx_LeftPanel2_exploreButton {
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -41,10 +41,6 @@ limitations under the License.
|
|||
height: 40px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_toolbarShowing {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mx_MatrixChat {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -70,7 +66,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
/* not the left panel, and not the resize handle, so the roomview/groupview/... */
|
||||
.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
|
||||
.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_LeftPanel2):not(.mx_ResizeHandle) {
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
flex: 1 1 0;
|
||||
|
|
|
|||
|
|
@ -63,6 +63,10 @@ limitations under the License.
|
|||
padding-left: 32px;
|
||||
padding-top: 8px;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_roomName a,
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ limitations under the License.
|
|||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
min-width: 264px;
|
||||
max-width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -67,22 +68,27 @@ limitations under the License.
|
|||
|
||||
.mx_RightPanel_membersButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/user.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_filesButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/files.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_notifsButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/notifications.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_groupMembersButton::before {
|
||||
mask-image: url('$(res)/img/icons-people.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_roomsButton::before {
|
||||
mask-image: url('$(res)/img/icons-room-nobg.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_highlight::after {
|
||||
|
|
|
|||
81
res/css/structures/_RoomSearch.scss
Normal file
81
res/css/structures/_RoomSearch.scss
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
// Note: this component expects to be contained within a flexbox
|
||||
.mx_RoomSearch {
|
||||
flex: 1;
|
||||
border-radius: 20px;
|
||||
background-color: $roomlist2-button-bg-color;
|
||||
height: 26px;
|
||||
padding: 2px;
|
||||
|
||||
// Create a flexbox for the icons (easier to manage)
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_RoomSearch_icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask: url('$(res)/img/feather-customised/search-input.svg');
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.mx_RoomSearch_input {
|
||||
border: none !important; // !important to override default app-wide styles
|
||||
flex: 1 !important; // !important to override default app-wide styles
|
||||
color: $primary-fg-color !important; // !important to override default app-wide styles
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-16px;
|
||||
|
||||
&:not(.mx_RoomSearch_inputExpanded)::placeholder {
|
||||
color: $primary-fg-color !important; // !important to override default app-wide styles
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSearch_expanded {
|
||||
.mx_RoomSearch_clearButton {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSearch_clearButton {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&.mx_RoomSearch_minimized {
|
||||
border-radius: 32px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
padding: 8px;
|
||||
|
||||
.mx_RoomSearch_icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -69,7 +69,7 @@ limitations under the License.
|
|||
height: 100%;
|
||||
}
|
||||
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
|
||||
height: $font-40px;
|
||||
height: 40px;
|
||||
padding: 10px 0 9px 0;
|
||||
}
|
||||
|
||||
|
|
@ -116,7 +116,7 @@ limitations under the License.
|
|||
position: absolute;
|
||||
left: -15px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
top: -8px; // (16px / 2)
|
||||
top: -8px; // (16px from height / 2)
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ limitations under the License.
|
|||
margin: 0 4px;
|
||||
grid-row: 2 / 4;
|
||||
grid-column: 1;
|
||||
background-color: white;
|
||||
box-shadow: 0px 4px 12px $menu-box-shadow-color;
|
||||
background-color: $dark-panel-bg-color;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -37,16 +37,15 @@ limitations under the License.
|
|||
grid-row: 1 / 3;
|
||||
grid-column: 1;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
box-shadow: 0px 4px 12px $menu-box-shadow-color;
|
||||
background-color: $dark-panel-bg-color;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr;
|
||||
column-gap: 10px;
|
||||
grid-template-columns: 22px 1fr;
|
||||
column-gap: 8px;
|
||||
row-gap: 4px;
|
||||
padding: 8px;
|
||||
padding-right: 16px;
|
||||
|
||||
&.mx_Toast_hasIcon {
|
||||
&::after {
|
||||
|
|
@ -68,17 +67,45 @@ limitations under the License.
|
|||
background-image: url("$(res)/img/e2e/warning.svg");
|
||||
}
|
||||
|
||||
h2, .mx_Toast_body {
|
||||
.mx_Toast_title, .mx_Toast_body {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
&:not(.mx_Toast_hasIcon) {
|
||||
padding-left: 12px;
|
||||
|
||||
h2 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
margin: 0;
|
||||
font-size: $font-15px;
|
||||
font-weight: 600;
|
||||
.mx_Toast_title {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Toast_title,
|
||||
.mx_Toast_description {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.mx_Toast_title {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
h2 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
margin: 0;
|
||||
font-size: $font-15px;
|
||||
font-weight: 600;
|
||||
display: inline;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-left: 8px;
|
||||
float: right;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-22px;
|
||||
color: $muted-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Toast_body {
|
||||
|
|
@ -87,7 +114,13 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Toast_buttons {
|
||||
float: right;
|
||||
display: flex;
|
||||
|
||||
.mx_FormButton {
|
||||
min-width: 96px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Toast_description {
|
||||
|
|
@ -96,6 +129,15 @@ limitations under the License.
|
|||
text-overflow: ellipsis;
|
||||
margin: 4px 0 11px 0;
|
||||
font-size: $font-12px;
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Toast_deviceID {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ limitations under the License.
|
|||
margin: 0 7px;
|
||||
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
|
||||
mask-repeat: no-repeat;
|
||||
width: 10px;
|
||||
width: $font-22px;
|
||||
height: 6px;
|
||||
background-color: $roomsublist-label-fg-color;
|
||||
}
|
||||
|
|
|
|||
196
res/css/structures/_UserMenu.scss
Normal file
196
res/css/structures/_UserMenu.scss
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
/*
|
||||
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_UserMenu {
|
||||
.mx_UserMenu_headerButtons {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_row {
|
||||
// Create a row-based flexbox to ensure items stay aligned correctly.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_UserMenu_userAvatarContainer {
|
||||
position: relative; // to make default avatars work
|
||||
margin-right: 8px;
|
||||
height: 32px; // to remove the unknown 4px gap the browser puts below it
|
||||
|
||||
.mx_UserMenu_userAvatar {
|
||||
border-radius: 32px; // should match avatar size
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_userName {
|
||||
font-weight: 600;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
flex: 1;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_UserMenu_headerButtons {
|
||||
// No special styles: the rest of the layout happens to make it work.
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_UserMenu_minimized {
|
||||
.mx_UserMenu_userHeader {
|
||||
.mx_UserMenu_row {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_UserMenu_userAvatarContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_contextMenu {
|
||||
width: 247px;
|
||||
|
||||
.mx_UserMenu_contextMenu_redRow {
|
||||
.mx_AccessibleButton {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
color: $warning-color !important; // !important to override styles from context menu
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_contextMenu_header {
|
||||
padding: 20px;
|
||||
|
||||
// Create a flexbox to organize the header a bit easier
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_UserMenu_contextMenu_name {
|
||||
// Create another flexbox of columns to handle large user IDs
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button
|
||||
|
||||
* {
|
||||
// Automatically grow all subelements to fit the container
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_UserMenu_contextMenu_displayName {
|
||||
font-weight: bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
}
|
||||
|
||||
.mx_UserMenu_contextMenu_userId {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_contextMenu_themeButton {
|
||||
min-width: 32px;
|
||||
max-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 8px;
|
||||
border-radius: 32px;
|
||||
background-color: $theme-button-bg-color;
|
||||
cursor: pointer;
|
||||
|
||||
// to make alignment easier, create flexbox for the image
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconHome::before {
|
||||
mask-image: url('$(res)/img/feather-customised/home.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconBell::before {
|
||||
mask-image: url('$(res)/img/feather-customised/notifications.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconLock::before {
|
||||
mask-image: url('$(res)/img/feather-customised/lock.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconSettings::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconArchive::before {
|
||||
mask-image: url('$(res)/img/feather-customised/archive.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconMessage::before {
|
||||
mask-image: url('$(res)/img/feather-customised/message-circle.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconSignOut::before {
|
||||
mask-image: url('$(res)/img/feather-customised/sign-out.svg');
|
||||
}
|
||||
}
|
||||
|
|
@ -146,3 +146,12 @@ limitations under the License.
|
|||
.mx_AuthBody_spinner {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_AuthBody {
|
||||
border-radius: 4px;
|
||||
width: auto;
|
||||
max-width: 500px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,3 +21,9 @@ limitations under the License.
|
|||
padding: 25px 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_AuthHeader {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,3 +23,9 @@ limitations under the License.
|
|||
.mx_AuthHeaderLogo img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_AuthHeaderLogo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,3 +29,9 @@ limitations under the License.
|
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
|
||||
background-color: $authpage-modal-bg-color;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_AuthPage_modal {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,16 +18,6 @@ $PassphraseStrengthHigh: $accent-color;
|
|||
$PassphraseStrengthMedium: $username-variant5-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 {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
|
|
@ -36,15 +26,7 @@ progress.mx_PassphraseField_progress {
|
|||
position: absolute;
|
||||
top: -12px;
|
||||
|
||||
border-radius: 2px;
|
||||
&::-moz-progress-bar {
|
||||
border-radius: 2px;
|
||||
}
|
||||
&::-webkit-progress-bar,
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@mixin ProgressBarBorderRadius "2px";
|
||||
@mixin ProgressBarColour $PassphraseStrengthLow;
|
||||
&[value="2"], &[value="3"] {
|
||||
@mixin ProgressBarColour $PassphraseStrengthMedium;
|
||||
|
|
|
|||
34
res/css/views/avatars/_DecoratedRoomAvatar.scss
Normal file
34
res/css/views/avatars/_DecoratedRoomAvatar.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
// XXX: We shouldn't be using TemporaryTile anywhere - delete it.
|
||||
.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
|
||||
position: relative;
|
||||
|
||||
.mx_RoomTileIcon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mx_NotificationBadge, .mx_RoomTile2_badgeContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
30
res/css/views/avatars/_PulsedAvatar.scss
Normal file
30
res/css/views/avatars/_PulsedAvatar.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -18,8 +18,3 @@ limitations under the License.
|
|||
margin-top: 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_GroupAddressPicker_checkboxContainer input[type="checkbox"] {
|
||||
/* Stop flex from shrinking the checkbox */
|
||||
width: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ limitations under the License.
|
|||
margin-left: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-repeat: none;
|
||||
}
|
||||
|
||||
.mx_ShareDialog_split {
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
/*
|
||||
Copyright 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_UnknownDeviceDialog {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
// userid
|
||||
.mx_UnknownDeviceDialog p {
|
||||
font-weight: bold;
|
||||
font-size: $font-16px;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog .mx_Dialog_content {
|
||||
margin-bottom: 24px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog_deviceList > li {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog_deviceList > li > * {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -21,6 +21,10 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_appearanceIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/brush.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_voiceIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/phone.svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,20 +15,79 @@ See the License for the specific language governing permissions and
|
|||
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 {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_primaryContainer {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_passPhraseInput,
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyInput {
|
||||
.mx_AccessSecretStorageDialog_passPhraseInput {
|
||||
width: 300px;
|
||||
border: 1px solid $accent-color;
|
||||
border-radius: 5px;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,29 @@ limitations under the License.
|
|||
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 {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
padding-top: 20px;
|
||||
|
|
@ -59,6 +82,36 @@ limitations under the License.
|
|||
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 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -73,33 +126,42 @@ limitations under the License.
|
|||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyHeader {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyContainer {
|
||||
display: flex;
|
||||
width: 380px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKey {
|
||||
width: 262px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: $info-plinth-fg-color;
|
||||
background-color: $info-plinth-bg-color;
|
||||
margin-right: 12px;
|
||||
border-radius: 6px;
|
||||
word-spacing: 1em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
|
||||
flex: 1;
|
||||
width: 160px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_continueSpinner {
|
||||
margin-top: 33px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_continueSpinner img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ limitations under the License.
|
|||
border-radius: 3px;
|
||||
border: solid 1px $accent-color;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mx_AddressSelector.mx_AddressSelector_empty {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ limitations under the License.
|
|||
display: inline;
|
||||
}
|
||||
|
||||
.mx_InlineSpinner img {
|
||||
.mx_InlineSpinner_spin img {
|
||||
margin: 0px 6px;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
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.
|
||||
*/
|
||||
|
||||
.mx_ProgressBar {
|
||||
height: 5px;
|
||||
border: 1px solid $progressbar-color;
|
||||
}
|
||||
progress.mx_ProgressBar {
|
||||
height: 4px;
|
||||
width: 60px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
|
||||
.mx_ProgressBar_fill {
|
||||
height: 100%;
|
||||
background-color: $progressbar-color;
|
||||
@mixin ProgressBarBorderRadius "10px";
|
||||
@mixin ProgressBarColour $accent-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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
99
res/css/views/elements/_Slider.scss
Normal file
99
res/css/views/elements/_Slider.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
/*
|
||||
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_Slider {
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_Slider_dotContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mx_Slider_bar {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
height: 1em;
|
||||
width: 100%;
|
||||
padding: 0 0.5em; // half the width of a dot.
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_Slider_bar > hr {
|
||||
width: 100%;
|
||||
height: 0.4em;
|
||||
background-color: $slider-background-color;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mx_Slider_selection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% - 1em); // 2 * half the width of a dot
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_Slider_selectionDot {
|
||||
position: absolute;
|
||||
width: 1.1em;
|
||||
height: 1.1em;
|
||||
background-color: $slider-selection-color;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 6px lightgrey;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mx_Slider_selection > hr {
|
||||
margin: 0;
|
||||
border: 0.2em solid $slider-selection-color;
|
||||
}
|
||||
|
||||
.mx_Slider_dot {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
border-radius: 50%;
|
||||
background-color: $slider-background-color;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.mx_Slider_dotActive {
|
||||
background-color: $slider-selection-color;
|
||||
}
|
||||
|
||||
.mx_Slider_dotValue {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: $slider-background-color;
|
||||
}
|
||||
|
||||
// The following is a hack to center the labels without adding
|
||||
// any width to the slider's dots.
|
||||
.mx_Slider_labelContainer {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.mx_Slider_label {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
left: -50%;
|
||||
}
|
||||
|
|
@ -23,6 +23,16 @@ limitations under the License.
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_Spinner_spin img {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MatrixChat_middlePanel .mx_Spinner {
|
||||
height: auto;
|
||||
}
|
||||
|
|
|
|||
84
res/css/views/elements/_StyledCheckbox.scss
Normal file
84
res/css/views/elements/_StyledCheckbox.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
/*
|
||||
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_Checkbox {
|
||||
$size: $font-16px;
|
||||
$border-size: $font-1-5px;
|
||||
$border-radius: $font-4px;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
input[type=checkbox] {
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& + label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
& + label > .mx_Checkbox_background {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
|
||||
flex-shrink: 0;
|
||||
|
||||
height: $size;
|
||||
width: $size;
|
||||
size: 0.5rem;
|
||||
|
||||
border: $border-size solid rgba($muted-fg-color, 0.5);
|
||||
box-sizing: border-box;
|
||||
border-radius: $border-radius;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
filter: invert(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label > .mx_Checkbox_background {
|
||||
background: $accent-color;
|
||||
border-color: $accent-color;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
& + label > *:not(.mx_Checkbox_background) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:disabled + label {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:checked:disabled + label > .mx_Checkbox_background {
|
||||
background-color: $accent-color;
|
||||
border-color: $accent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
117
res/css/views/elements/_StyledRadioButton.scss
Normal file
117
res/css/views/elements/_StyledRadioButton.scss
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
/**
|
||||
* This component expects the parent to specify a positive padding and
|
||||
* width
|
||||
*/
|
||||
|
||||
.mx_RadioButton {
|
||||
$radio-circle-color: $muted-fg-color;
|
||||
$active-radio-circle-color: $accent-color;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-grow: 1;
|
||||
|
||||
> .mx_RadioButton_content {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx_RadioButton_spacer {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
height: $font-16px;
|
||||
width: $font-16px;
|
||||
}
|
||||
|
||||
> input[type=radio] {
|
||||
// Remove the OS's representation
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
|
||||
+ div {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
box-sizing: border-box;
|
||||
height: $font-16px;
|
||||
width: $font-16px;
|
||||
|
||||
border: $font-1-5px solid $radio-circle-color;
|
||||
border-radius: $font-16px;
|
||||
|
||||
> div {
|
||||
box-sizing: border-box;
|
||||
|
||||
height: $font-8px;
|
||||
width: $font-8px;
|
||||
|
||||
border-radius: $font-8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
& + div {
|
||||
border-color: $active-radio-circle-color;
|
||||
|
||||
& > div {
|
||||
background: $active-radio-circle-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
& + div,
|
||||
& + div + span {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
& + div {
|
||||
border-color: $radio-circle-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked:disabled {
|
||||
& + div > div {
|
||||
background-color: $radio-circle-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton_outlined {
|
||||
border: 1px solid $input-darker-bg-color;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_RadioButton_checked {
|
||||
border-color: $accent-color;
|
||||
}
|
||||
|
|
@ -55,7 +55,7 @@ limitations under the License.
|
|||
border-radius: 4px;
|
||||
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
|
||||
background-color: $menu-bg-color;
|
||||
z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
|
||||
z-index: 6000; // Higher than context menu so tooltips can be used everywhere
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
line-height: $font-14px;
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@ limitations under the License.
|
|||
|
||||
.mx_EmojiPicker_footer {
|
||||
border-top: 1px solid $message-action-bar-border-color;
|
||||
height: 72px;
|
||||
min-height: 72px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,73 +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_MatrixToolbar {
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_warning {
|
||||
margin-left: 16px;
|
||||
margin-right: 8px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_info {
|
||||
padding-left: 16px;
|
||||
padding-right: 8px;
|
||||
background-color: $info-bg-color;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_error {
|
||||
padding-left: 16px;
|
||||
padding-right: 8px;
|
||||
background-color: $warning-bg-color;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_link {
|
||||
color: $accent-fg-color !important;
|
||||
text-decoration: underline !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_close {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_close img {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_action {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_changelog {
|
||||
white-space: pre;
|
||||
}
|
||||
|
|
@ -37,7 +37,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 8px;
|
||||
cursor: pointer;
|
||||
|
|
@ -68,11 +67,9 @@ limitations under the License.
|
|||
display: inline-block; /* anti-zalgo, with overflow hidden */
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding-left: 65px; /* left gutter */
|
||||
padding-bottom: 0px;
|
||||
padding-top: 0px;
|
||||
margin: 0px;
|
||||
line-height: $font-17px;
|
||||
/* the next three lines, along with overflow hidden, truncate long display names */
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -104,9 +101,7 @@ limitations under the License.
|
|||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
left: 0px;
|
||||
width: 46px; /* 8 + 30 (avatar) + 8 */
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -117,10 +112,7 @@ limitations under the License.
|
|||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
position: relative;
|
||||
padding-left: 65px; /* left gutter */
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
border-radius: 4px;
|
||||
line-height: $font-22px;
|
||||
}
|
||||
|
||||
.mx_RoomView_timeline_rr_enabled,
|
||||
|
|
@ -151,10 +143,6 @@ limitations under the License.
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_EventTile_info .mx_EventTile_line {
|
||||
padding-left: 83px;
|
||||
}
|
||||
|
||||
/* HACK to override line-height which is already marked important elsewhere */
|
||||
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
|
||||
font-size: 48px !important;
|
||||
|
|
@ -171,10 +159,15 @@ limitations under the License.
|
|||
}
|
||||
|
||||
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
|
||||
// The first set is to handle the 'group layout' (default) and the second for the IRC layout
|
||||
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp {
|
||||
.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
|
||||
.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
|
||||
.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
|
||||
.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp,
|
||||
.mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
|
@ -361,6 +354,11 @@ limitations under the License.
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_unauthenticated {
|
||||
background-image: url('$(res)/img/e2e/normal.svg');
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -560,84 +558,6 @@ limitations under the License.
|
|||
|
||||
/* end of overrides */
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_EventTile {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_info {
|
||||
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info
|
||||
padding-top: 0px;
|
||||
font-size: $font-13px;
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
line-height: $font-20px;
|
||||
}
|
||||
.mx_EventTile_avatar {
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile .mx_SenderProfile {
|
||||
font-size: $font-13px;
|
||||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_emote {
|
||||
// add a bit more space for emotes so that avatars don't collide
|
||||
padding-top: 8px;
|
||||
.mx_EventTile_avatar {
|
||||
top: 2px;
|
||||
}
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
|
||||
padding-top: 0;
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.mx_EventTile_readAvatars {
|
||||
top: 27px;
|
||||
}
|
||||
|
||||
.mx_EventTile_continuation .mx_EventTile_readAvatars,
|
||||
.mx_EventTile_emote .mx_EventTile_readAvatars {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.mx_EventTile_info .mx_EventTile_readAvatars {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.mx_RoomView_MessageList h2 {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body {
|
||||
p, ul, ol, dl, blockquote, pre, table {
|
||||
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_tileError {
|
||||
color: red;
|
||||
text-align: center;
|
||||
|
|
@ -657,3 +577,14 @@ limitations under the License.
|
|||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
padding-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.mx_EventTile_content {
|
||||
margin-top: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
130
res/css/views/rooms/_GroupLayout.scss
Normal file
130
res/css/views/rooms/_GroupLayout.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
$left-gutter: 65px;
|
||||
|
||||
.mx_GroupLayout {
|
||||
.mx_EventTile {
|
||||
> .mx_SenderProfile {
|
||||
line-height: $font-17px;
|
||||
padding-left: $left-gutter;
|
||||
}
|
||||
|
||||
> .mx_EventTile_line {
|
||||
padding-left: $left-gutter;
|
||||
}
|
||||
|
||||
> .mx_EventTile_avatar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
position: absolute;
|
||||
width: 46px; /* 8 + 30 (avatar) + 8 */
|
||||
}
|
||||
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
line-height: $font-22px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_info .mx_EventTile_line {
|
||||
padding-left: calc($left-gutter + 18px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Compact layout overrides */
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_EventTile {
|
||||
padding-top: 4px;
|
||||
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.mx_EventTile_info {
|
||||
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info
|
||||
padding-top: 0px;
|
||||
font-size: $font-13px;
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
line-height: $font-20px;
|
||||
}
|
||||
.mx_EventTile_avatar {
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SenderProfile {
|
||||
font-size: $font-13px;
|
||||
}
|
||||
|
||||
&.mx_EventTile_emote {
|
||||
// add a bit more space for emotes so that avatars don't collide
|
||||
padding-top: 8px;
|
||||
.mx_EventTile_avatar {
|
||||
top: 2px;
|
||||
}
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_EventTile_emote.mx_EventTile_continuation {
|
||||
padding-top: 0;
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.mx_EventTile_readAvatars {
|
||||
top: 27px;
|
||||
}
|
||||
|
||||
&.mx_EventTile_continuation .mx_EventTile_readAvatars,
|
||||
&.mx_EventTile_emote .mx_EventTile_readAvatars {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&.mx_EventTile_info .mx_EventTile_readAvatars {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body {
|
||||
p, ul, ol, dl, blockquote, pre, table {
|
||||
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomView_MessageList h2 {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
223
res/css/views/rooms/_IRCLayout.scss
Normal file
223
res/css/views/rooms/_IRCLayout.scss
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
$icon-width: 14px;
|
||||
$timestamp-width: 45px;
|
||||
$right-padding: 5px;
|
||||
$irc-line-height: $font-18px;
|
||||
|
||||
.mx_IRCLayout {
|
||||
--name-width: 70px;
|
||||
|
||||
line-height: $irc-line-height !important;
|
||||
|
||||
.mx_EventTile {
|
||||
|
||||
// timestamps are links which shouldn't be underlined
|
||||
> a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding-top: 0;
|
||||
|
||||
> * {
|
||||
margin-right: $right-padding;
|
||||
}
|
||||
|
||||
> .mx_EventTile_msgOption {
|
||||
order: 5;
|
||||
flex-shrink: 0;
|
||||
|
||||
.mx_EventTile_readAvatars {
|
||||
top: 0.2rem; // ($irc-line-height - avatar height) / 2
|
||||
}
|
||||
}
|
||||
|
||||
> .mx_SenderProfile {
|
||||
order: 2;
|
||||
flex-shrink: 0;
|
||||
width: var(--name-width);
|
||||
text-overflow: ellipsis;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
order: 3;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
> .mx_EventTile_avatar {
|
||||
order: 1;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex-shrink: 0;
|
||||
height: $irc-line-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
// Need to use important to override the js provided height and width values.
|
||||
> .mx_BaseAvatar, > .mx_BaseAvatar > * {
|
||||
height: $font-14px !important;
|
||||
width: $font-14px !important;
|
||||
font-size: $font-10px !important;
|
||||
line-height: $font-15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
font-size: $font-10px;
|
||||
width: $timestamp-width;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
> .mx_EventTile_e2eIcon {
|
||||
position: relative;
|
||||
right: unset;
|
||||
left: unset;
|
||||
top: 0;
|
||||
|
||||
padding: 0;
|
||||
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
height: $font-18px;
|
||||
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.mx_EventTile_line {
|
||||
.mx_EventTile_e2eIcon,
|
||||
.mx_TextualEvent,
|
||||
.mx_MTextBody,
|
||||
.mx_ReplyThread_wrapper_empty {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_reply {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.mx_EditMessageComposer_buttons {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_emote {
|
||||
> .mx_EventTile_avatar {
|
||||
margin-left: calc(var(--name-width) + $icon-width + $right-padding);
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_EventListSummary {
|
||||
> .mx_EventTile_line {
|
||||
padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
|
||||
}
|
||||
|
||||
.mx_EventListSummary_avatars {
|
||||
padding: 0;
|
||||
margin: 0 9px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_info {
|
||||
.mx_EventTile_avatar {
|
||||
left: calc(var(--name-width) + 10px + $icon-width);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mx_EventTile_line {
|
||||
left: calc(var(--name-width) + 10px + $icon-width);
|
||||
}
|
||||
|
||||
.mx_TextualEvent {
|
||||
line-height: $irc-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Suppress highlight thing from the normal Layout.
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.mx_SenderProfile_hover {
|
||||
background-color: $primary-bg-color;
|
||||
overflow: hidden;
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
|
||||
> .mx_SenderProfile_name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SenderProfile:hover {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.mx_SenderProfile_hover:hover {
|
||||
overflow: visible;
|
||||
width: max(auto, 100%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mx_ReplyThread {
|
||||
margin: 0;
|
||||
.mx_SenderProfile {
|
||||
width: unset;
|
||||
max-width: var(--name-width);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ProfileResizer {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 15px;
|
||||
left: calc(80px + var(--name-width));
|
||||
cursor: col-resize;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
// Need to use important to override the js provided height and width values.
|
||||
.mx_Flair > img {
|
||||
height: $font-14px !important;
|
||||
width: $font-14px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -41,6 +41,11 @@ limitations under the License.
|
|||
// with text-align in parent
|
||||
display: inline-block;
|
||||
padding: 0 4px;
|
||||
color: $roomtile-badge-fg-color;
|
||||
background-color: $roomtile-name-color;
|
||||
}
|
||||
|
||||
.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
|
||||
color: $secondary-accent-color;
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,95 +0,0 @@
|
|||
/*
|
||||
Copyright 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_MemberDeviceInfo {
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo_icon {
|
||||
margin-top: 4px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100%;
|
||||
}
|
||||
.mx_MemberDeviceInfo_icon_blacklisted {
|
||||
mask-image: url('$(res)/img/e2e/blacklisted.svg');
|
||||
background-color: $warning-color;
|
||||
}
|
||||
.mx_MemberDeviceInfo_icon_verified {
|
||||
mask-image: url('$(res)/img/e2e/verified.svg');
|
||||
background-color: $accent-color;
|
||||
}
|
||||
.mx_MemberDeviceInfo_icon_unverified {
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo > .mx_DeviceVerifyButtons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 1 auto;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo_textButton {
|
||||
@mixin mx_DialogButton_small;
|
||||
margin: 2px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo_textButton:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo_deviceId {
|
||||
word-break: break-word;
|
||||
font-size: $font-13px;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo_deviceInfo {
|
||||
margin: 0 5px 5px 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* "Unblacklist" is too long for a regular button: make it wider and
|
||||
reduce the padding. */
|
||||
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
|
||||
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
|
||||
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
|
||||
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
|
||||
float: right;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
|
||||
color: $e2e-verified-color;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
|
||||
color: $e2e-unverified-color;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
|
||||
color: $e2e-warning-color;
|
||||
}
|
||||
|
|
@ -214,8 +214,12 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/feather-customised/video.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_emoji::before {
|
||||
mask-image: url('$(res)/img/feather-customised/emoji3.custom.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_stickers::before {
|
||||
mask-image: url('$(res)/img/feather-customised/face.svg');
|
||||
mask-image: url('$(res)/img/feather-customised/sticker.custom.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatting {
|
||||
|
|
|
|||
70
res/css/views/rooms/_NotificationBadge.scss
Normal file
70
res/css/views/rooms/_NotificationBadge.scss
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
/*
|
||||
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_NotificationBadge {
|
||||
&:not(.mx_NotificationBadge_visible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Badges are structured a bit weirdly to work around issues with non-monospace
|
||||
// font styles. The badge pill is actually a background div and the count floats
|
||||
// within that. For example:
|
||||
//
|
||||
// ( 99+ ) <-- Rounded pill is a _bg class.
|
||||
// ^- The count is an element floating within that.
|
||||
|
||||
&.mx_NotificationBadge_visible {
|
||||
background-color: $roomtile2-default-badge-bg-color;
|
||||
|
||||
// Create a flexbox to order the count a bit easier
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.mx_NotificationBadge_highlighted {
|
||||
// TODO: Use a more specific variable
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
// These are the 3 background types
|
||||
|
||||
&.mx_NotificationBadge_dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&.mx_NotificationBadge_2char {
|
||||
width: $font-16px;
|
||||
height: $font-16px;
|
||||
border-radius: $font-16px;
|
||||
}
|
||||
|
||||
&.mx_NotificationBadge_3char {
|
||||
width: $font-26px;
|
||||
height: $font-16px;
|
||||
border-radius: $font-16px;
|
||||
}
|
||||
|
||||
// The following is the floating badge
|
||||
|
||||
.mx_NotificationBadge_count {
|
||||
font-size: $font-10px;
|
||||
line-height: $font-14px;
|
||||
color: #fff; // TODO: Variable
|
||||
}
|
||||
}
|
||||
}
|
||||
68
res/css/views/rooms/_RoomBreadcrumbs2.scss
Normal file
68
res/css/views/rooms/_RoomBreadcrumbs2.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
|
||||
|
||||
.mx_RoomBreadcrumbs2 {
|
||||
width: 100%;
|
||||
|
||||
// Create a flexbox for the crumbs
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
.mx_RoomBreadcrumbs2_crumb {
|
||||
margin-right: 8px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
// These classes come from the CSSTransition component. There's many more classes we
|
||||
// could care about, but this is all we worried about for now. The animation works by
|
||||
// first triggering the enter state with the newest breadcrumb off screen (-40px) then
|
||||
// sliding it into view.
|
||||
&.mx_RoomBreadcrumbs2-enter {
|
||||
margin-left: -40px; // 32px for the avatar, 8px for the margin
|
||||
}
|
||||
&.mx_RoomBreadcrumbs2-enter-active {
|
||||
margin-left: 0;
|
||||
|
||||
// Timing function is as-requested by design.
|
||||
// NOTE: The transition time MUST match the value passed to CSSTransition!
|
||||
transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs2_placeholder {
|
||||
font-weight: 600;
|
||||
font-size: $font-14px;
|
||||
line-height: 32px; // specifically to match the height this is not scaled
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs2_Tooltip {
|
||||
margin-left: -42px;
|
||||
margin-top: -42px;
|
||||
|
||||
&.mx_Tooltip {
|
||||
background-color: $tagpanel-bg-color;
|
||||
color: $accent-fg-color;
|
||||
border: 0;
|
||||
|
||||
.mx_Tooltip_chevron {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -267,3 +267,12 @@ limitations under the License.
|
|||
.mx_RoomHeader_pinsIndicatorUnread {
|
||||
background-color: $pinned-unread-color;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_RoomHeader_wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.mx_RoomHeader {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomList.mx_RoomList2 {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mx_RoomList {
|
||||
/* take up remaining space below TopLeftMenu */
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2016 OpenMarket Ltd
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -14,21 +14,14 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_EncryptedEventDialog .mx_DeviceVerifyButtons {
|
||||
float: right;
|
||||
padding: 0px;
|
||||
margin-right: 42px;
|
||||
// TODO: Rename to mx_RoomList during replacement of old component
|
||||
|
||||
.mx_RoomList2 {
|
||||
width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists)
|
||||
|
||||
// Create a column-based flexbox for the sublists. That's pretty much all we have to
|
||||
// worry about in this stylesheet.
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
|
||||
@mixin mx_DialogButton;
|
||||
background-color: $primary-bg-color;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_EncryptedEventDialog button {
|
||||
margin-top: 0px;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap; // let the column overflow
|
||||
}
|
||||
392
res/css/views/rooms/_RoomSublist2.scss
Normal file
392
res/css/views/rooms/_RoomSublist2.scss
Normal file
|
|
@ -0,0 +1,392 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
|
||||
|
||||
.mx_RoomSublist2 {
|
||||
// The sublist is a column of rows, essentially
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: 8px;
|
||||
width: 100%;
|
||||
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
.mx_RoomSublist2_headerContainer {
|
||||
// Create a flexbox to make alignment easy
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
// ***************************
|
||||
// Sticky Headers Start
|
||||
|
||||
// Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the
|
||||
// headerContainer, however due to our layout concerns we actually have to
|
||||
// calculate it manually so we can sticky things in the right places. We also
|
||||
// target the headerText instead of the container to reduce jumps when scrolling,
|
||||
// and to help hide the badges/other buttons that could appear on hover. This
|
||||
// all works by ensuring the header text has a fixed height when sticky so the
|
||||
// fixed height of the container can maintain the scroll position.
|
||||
|
||||
// The combined height must be set in the LeftPanel2 component for sticky headers
|
||||
// to work correctly.
|
||||
padding-bottom: 8px;
|
||||
height: 24px;
|
||||
|
||||
// Hide the header container if the contained element is stickied.
|
||||
// We don't use display:none as that causes the header to go away too.
|
||||
&.mx_RoomSublist2_headerContainer_hasSticky {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_stickable {
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
|
||||
// Create a flexbox to make ordering easy
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
// We use a generic sticky class for 2 reasons: to reduce style duplication and
|
||||
// to identify when a header is sticky. If we didn't have a consistent sticky class,
|
||||
// we'd have to do the "is sticky" checks again on click, as clicking the header
|
||||
// when sticky scrolls instead of collapses the list.
|
||||
&.mx_RoomSublist2_headerContainer_sticky {
|
||||
position: fixed;
|
||||
height: 32px; // to match the header container
|
||||
// width set by JS
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_headerContainer_stickyBottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// We don't have a top style because the top is dependent on the room list header's
|
||||
// height, and is therefore calculated in JS.
|
||||
// The class, mx_RoomSublist2_headerContainer_stickyTop, is applied though.
|
||||
}
|
||||
|
||||
// Sticky Headers End
|
||||
// ***************************
|
||||
|
||||
.mx_RoomSublist2_badgeContainer {
|
||||
// Create another flexbox row because it's super easy to position the badge this way.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
// Apply the width and margin to the badge so the container doesn't occupy dead space
|
||||
.mx_NotificationBadge {
|
||||
// Do not set a width so the badges get properly sized
|
||||
margin-left: 8px; // same as menu+aux buttons
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.mx_RoomSublist2_headerContainer_withAux) {
|
||||
.mx_NotificationBadge {
|
||||
margin-right: 4px; // just to push it over a bit, aligning it with the other elements
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_auxButton,
|
||||
.mx_RoomSublist2_menuButton {
|
||||
margin-left: 8px; // should be the same as the notification badge
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 32px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $muted-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide the menu button by default
|
||||
.mx_RoomSublist2_menuButton {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_auxButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/plus.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_menuButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_headerText {
|
||||
flex: 1;
|
||||
max-width: calc(100% - 16px); // 16px is the badge width
|
||||
text-transform: uppercase;
|
||||
line-height: $font-16px;
|
||||
font-size: $font-12px;
|
||||
font-weight: 600;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.mx_RoomSublist2_collapseBtn {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $primary-fg-color;
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_collapseBtn_collapsed::before {
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizeBox {
|
||||
position: relative;
|
||||
|
||||
// Create another flexbox column for the tiles
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.mx_RoomSublist2_tiles {
|
||||
flex: 1 0 0;
|
||||
overflow: hidden;
|
||||
// need this to be flex otherwise the overflow hidden from above
|
||||
// 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
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
mask-image: linear-gradient(0deg, transparent, black 3px);
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizerHandles_showNButton {
|
||||
flex: 0 0 32px;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizerHandles {
|
||||
flex: 0 0 4px;
|
||||
}
|
||||
|
||||
// Class name comes from the ResizableBox component
|
||||
// The hover state needs to use the whole sublist, not just the resizable box,
|
||||
// so that selector is below and one level higher.
|
||||
.mx_RoomSublist2_resizerHandle {
|
||||
cursor: ns-resize;
|
||||
border-radius: 3px;
|
||||
|
||||
// Override styles from library
|
||||
width: unset !important;
|
||||
height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
|
||||
|
||||
// This is positioned directly below the 'show more' button.
|
||||
position: absolute;
|
||||
bottom: 0 !important; // override from library
|
||||
|
||||
// Together, these make the bar 64px wide
|
||||
// These are also overridden from the library
|
||||
left: calc(50% - 32px) !important;
|
||||
right: calc(50% - 32px) !important;
|
||||
}
|
||||
|
||||
&:hover, &.mx_RoomSublist2_hasMenuOpen {
|
||||
.mx_RoomSublist2_resizerHandle {
|
||||
opacity: 0.8;
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_showNButton {
|
||||
cursor: pointer;
|
||||
font-size: $font-13px;
|
||||
line-height: $font-18px;
|
||||
color: $roomtile2-preview-color;
|
||||
|
||||
// Update the render() function for RoomSublist2 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_RoomSublist2_showNButtonChevron {
|
||||
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 {
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_showLessButtonChevron {
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_hasMenuOpen,
|
||||
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:focus-within,
|
||||
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
visibility: visible;
|
||||
width: 24px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_minimized {
|
||||
.mx_RoomSublist2_headerContainer {
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.mx_RoomSublist2_badgeContainer {
|
||||
order: 0;
|
||||
align-self: flex-end;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_stickable {
|
||||
order: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_auxButton {
|
||||
order: 2;
|
||||
visibility: visible;
|
||||
width: 32px !important; // !important to override hover styles
|
||||
height: 32px !important; // !important to override hover styles
|
||||
margin-left: 0 !important; // !important to override hover styles
|
||||
background-color: $roomlist2-button-bg-color;
|
||||
margin-top: 8px;
|
||||
|
||||
&::before {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizeBox {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_showNButton {
|
||||
flex-direction: column;
|
||||
|
||||
.mx_RoomSublist2_showNButtonChevron {
|
||||
margin-right: 12px; // to center
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_menuButton {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_hasMenuOpen,
|
||||
& > .mx_RoomSublist2_headerContainer:hover {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment
|
||||
right: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 0;
|
||||
z-index: 1; // occlude the list name
|
||||
|
||||
// This is the same color as the left panel background because it needs
|
||||
// to occlude the sublist title
|
||||
background-color: $roomlist2-bg-color;
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_contextMenu {
|
||||
padding: 20px 16px;
|
||||
width: 250px;
|
||||
|
||||
hr {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px; // additional 16px
|
||||
border: 1px solid $roomsublist2-divider-color;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_contextMenu_title {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.mx_RadioButton, .mx_Checkbox {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_addRoomTooltip {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ limitations under the License.
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
height: $font-34px;
|
||||
height: 34px;
|
||||
margin: 0;
|
||||
padding: 0 8px 0 10px;
|
||||
position: relative;
|
||||
|
|
@ -81,6 +81,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomTile_avatar_container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_RoomTile_avatar {
|
||||
|
|
|
|||
241
res/css/views/rooms/_RoomTile2.scss
Normal file
241
res/css/views/rooms/_RoomTile2.scss
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
|
||||
|
||||
// Note: the room tile expects to be in a flexbox column container
|
||||
.mx_RoomTile2 {
|
||||
margin-bottom: 4px;
|
||||
padding: 4px;
|
||||
|
||||
// The tile is also a flexbox row itself
|
||||
display: flex;
|
||||
|
||||
&.mx_RoomTile2_selected,
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&.mx_RoomTile2_hasMenuOpen {
|
||||
background-color: $roomtile2-selected-bg-color;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
.mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_nameContainer {
|
||||
flex-grow: 1;
|
||||
min-width: 0; // allow flex to shrink it
|
||||
margin-right: 8px; // spacing to buttons/badges
|
||||
|
||||
// Create a new column layout flexbox for the name parts
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.mx_RoomTile2_name,
|
||||
.mx_RoomTile2_messagePreview {
|
||||
margin: 0 2px;
|
||||
width: 100%;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_name {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-18px;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_messagePreview {
|
||||
font-size: $font-13px;
|
||||
line-height: $font-18px;
|
||||
color: $roomtile2-preview-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_nameWithPreview {
|
||||
margin-top: -4px; // shift the name up a bit more
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile2_notificationsButton {
|
||||
margin-left: 4px; // spacing between buttons
|
||||
}
|
||||
|
||||
.mx_RoomTile2_badgeContainer {
|
||||
height: 16px;
|
||||
// don't set width so that it takes no space when there is no badge to show
|
||||
margin: auto 0; // vertically align
|
||||
|
||||
// Create a flexbox to make aligning dot badges easier
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_NotificationBadge {
|
||||
margin-right: 2px; // centering
|
||||
}
|
||||
|
||||
.mx_NotificationBadge_dot {
|
||||
// make the smaller dot occupy the same width for centering
|
||||
margin-left: 5px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// The context menu buttons are hidden by default
|
||||
.mx_RoomTile2_menuButton,
|
||||
.mx_RoomTile2_notificationsButton {
|
||||
width: 20px;
|
||||
min-width: 20px; // yay flex
|
||||
height: 20px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
position: relative;
|
||||
display: none;
|
||||
|
||||
&::before {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
// If the room has an overriden notification setting then we always show the notifications menu button
|
||||
.mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_menuButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
|
||||
}
|
||||
|
||||
&:not(.mx_RoomTile2_minimized) {
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&.mx_RoomTile2_hasMenuOpen {
|
||||
// Hide the badge container on hover because it'll be a menu button
|
||||
.mx_RoomTile2_badgeContainer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_notificationsButton,
|
||||
.mx_RoomTile2_menuButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomTile2_minimized {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// We use these both in context menus and the room tiles
|
||||
.mx_RoomTile2_iconBell::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconBellDot::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell-notification.custom.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconBellCrossed::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell-crossed.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconBellMentions::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell-mentions.custom.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconCheck::before {
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile2_contextMenu {
|
||||
.mx_RoomTile2_contextMenu_redRow {
|
||||
.mx_AccessibleButton {
|
||||
color: $warning-color !important; // !important to override styles from context menu
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile2_contextMenu_activeRow {
|
||||
&.mx_AccessibleButton, .mx_AccessibleButton {
|
||||
color: $accent-color !important; // !important to override styles from context menu
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile2_iconStar::before {
|
||||
mask-image: url('$(res)/img/feather-customised/star.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile2_iconFavorite::before {
|
||||
mask-image: url('$(res)/img/feather-customised/favourites.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile2_iconArrowDown::before {
|
||||
mask-image: url('$(res)/img/feather-customised/arrow-down.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile2_iconSettings::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile2_iconSignOut::before {
|
||||
mask-image: url('$(res)/img/feather-customised/sign-out.svg');
|
||||
}
|
||||
}
|
||||
69
res/css/views/rooms/_RoomTileIcon.scss
Normal file
69
res/css/views/rooms/_RoomTileIcon.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomTileIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 12px;
|
||||
background-color: $roomlist2-bg-color; // to match the room list itself
|
||||
}
|
||||
|
||||
.mx_RoomTileIcon_globe::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
mask-image: url('$(res)/img/globe.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTileIcon_offline::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
border-radius: 8px;
|
||||
background-color: $presence-offline;
|
||||
}
|
||||
|
||||
.mx_RoomTileIcon_online::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
border-radius: 8px;
|
||||
background-color: $presence-online;
|
||||
}
|
||||
|
||||
.mx_RoomTileIcon_away::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
border-radius: 8px;
|
||||
background-color: $presence-away;
|
||||
}
|
||||
23
res/css/views/settings/_UpdateCheckButton.scss
Normal file
23
res/css/views/settings/_UpdateCheckButton.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/*
|
||||
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_UpdateCheckButton_summary {
|
||||
margin-left: 16px;
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
230
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
Normal file
230
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
/*
|
||||
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_AppearanceUserSettingsTab_fontSlider,
|
||||
.mx_AppearanceUserSettingsTab_fontSlider_preview,
|
||||
.mx_AppearanceUserSettingsTab_Layout {
|
||||
@mixin mx_Settings_fullWidthField;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab .mx_Field {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontScaling {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background: rgba($appearance-tab-border-color, 0.2);
|
||||
border-radius: 10px;
|
||||
font-size: 10px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider_preview {
|
||||
border: 1px solid $appearance-tab-border-color;
|
||||
border-radius: 10px;
|
||||
padding: 0 16px 9px 16px;
|
||||
pointer-events: none;
|
||||
|
||||
.mx_EventTile_msgOption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mx_IRCLayout {
|
||||
padding-top: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider_smallText {
|
||||
font-size: 15px;
|
||||
padding-right: 20px;
|
||||
padding-left: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider_largeText {
|
||||
font-size: 18px;
|
||||
padding-left: 20px;
|
||||
padding-right: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab {
|
||||
> .mx_SettingsTab_SubHeading {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_themeSection {
|
||||
$radio-bg-color: $input-darker-bg-color;
|
||||
color: $primary-fg-color;
|
||||
|
||||
> .mx_ThemeSelectors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
margin-top: 4px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
> .mx_RadioButton {
|
||||
padding: $font-16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
width: 180px;
|
||||
|
||||
background: $radio-bg-color;
|
||||
opacity: 0.4;
|
||||
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
|
||||
margin-right: 15px;
|
||||
margin-top: 10px;
|
||||
|
||||
font-weight: 600;
|
||||
color: $muted-fg-color;
|
||||
|
||||
> span {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
> .mx_RadioButton_enabled {
|
||||
opacity: 1;
|
||||
|
||||
// These colors need to be hardcoded because they don't change with the theme
|
||||
&.mx_ThemeSelector_light {
|
||||
background-color: #f3f8fd;
|
||||
color: #2e2f32;
|
||||
}
|
||||
|
||||
&.mx_ThemeSelector_dark {
|
||||
// 5% lightened version of 181b21
|
||||
background-color: #25282e;
|
||||
color: #f3f8fd;
|
||||
|
||||
> input > div {
|
||||
border-color: $input-darker-bg-color;
|
||||
> div {
|
||||
border-color: $input-darker-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_ThemeSelector_black {
|
||||
background-color: #000000;
|
||||
color: #f3f8fd;
|
||||
|
||||
> input > div {
|
||||
border-color: $input-darker-bg-color;
|
||||
> div {
|
||||
border-color: $input-darker-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SettingsTab_customFontSizeField {
|
||||
margin-left: calc($font-16px + 10px);
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
color: $primary-fg-color;
|
||||
|
||||
.mx_AppearanceUserSettingsTab_spacer {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
> .mx_AppearanceUserSettingsTab_Layout_RadioButton {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 300px;
|
||||
|
||||
border: 1px solid $appearance-tab-border-color;
|
||||
border-radius: 10px;
|
||||
|
||||
.mx_EventTile_msgOption,
|
||||
.mx_MessageActionBar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_RadioButton {
|
||||
flex-grow: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mx_EventTile_content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
|
||||
border-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton {
|
||||
border-top: 1px solid $appearance-tab-border-color;
|
||||
|
||||
> input + div {
|
||||
border-color: rgba($muted-fg-color, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton_checked {
|
||||
background-color: rgba($accent-color, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_Advanced {
|
||||
color: $primary-fg-color;
|
||||
|
||||
> * {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_AdvancedToggle {
|
||||
color: $accent-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_systemFont {
|
||||
margin-left: calc($font-16px + 10px);
|
||||
}
|
||||
}
|
||||
|
|
@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_GeneralUserSettingsTab_changePassword .mx_Field,
|
||||
.mx_GeneralUserSettingsTab_themeSection .mx_Field {
|
||||
.mx_GeneralUserSettingsTab_changePassword .mx_Field {
|
||||
@mixin mx_Settings_fullWidthField;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,4 +63,25 @@ limitations under the License.
|
|||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SecurityUserSettingsTab_warning {
|
||||
color: $notice-primary-color;
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
margin-top: 30px;
|
||||
|
||||
&::before {
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: 0 center;
|
||||
mask-size: $font-24px;
|
||||
position: absolute;
|
||||
width: $font-24px;
|
||||
height: $font-24px;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $notice-primary-color;
|
||||
mask-image: url('$(res)/img/feather-customised/alert-triangle.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
89
res/css/views/voip/_CallContainer.scss
Normal file
89
res/css/views/voip/_CallContainer.scss
Normal 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_IncomingCallBox2 {
|
||||
min-width: 250px;
|
||||
background-color: $primary-bg-color;
|
||||
padding: 8px;
|
||||
|
||||
.mx_IncomingCallBox2_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_IncomingCallBox2_buttons {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
> .mx_IncomingCallBox2_spacer {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
> * {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
margin-right: 0;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
96
res/css/views/voip/_CallView2.scss
Normal file
96
res/css/views/voip/_CallView2.scss
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
|
||||
|
||||
.mx_CallView2_voice {
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
font-weight: bold;
|
||||
|
||||
border-radius: 8px;
|
||||
min-width: 200px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// Hacky vertical align
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
> div > p,
|
||||
> div > h1 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: $font-13px;
|
||||
line-height: $font-15px;
|
||||
}
|
||||
|
||||
> div > p {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> * {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView2_hangup {
|
||||
position: absolute;
|
||||
|
||||
right: 8px;
|
||||
bottom: 10px;
|
||||
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
|
||||
border-radius: 35px;
|
||||
|
||||
background-color: $notice-primary-color;
|
||||
|
||||
z-index: 101;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
top: 6.5px;
|
||||
left: 7.5px;
|
||||
|
||||
mask: url('$(res)/img/hangup.svg');
|
||||
mask-size: contain;
|
||||
background-size: contain;
|
||||
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
5
res/img/feather-customised/alert-triangle.svg
Normal file
5
res/img/feather-customised/alert-triangle.svg
Normal 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 fill-rule="evenodd" clip-rule="evenodd" d="M10.29 3.86002L1.82002 18C1.46466 18.6154 1.46254 19.3732 1.81445 19.9905C2.16635 20.6079 2.81943 20.9922 3.53002 21H20.47C21.1806 20.9922 21.8337 20.6079 22.1856 19.9905C22.5375 19.3732 22.5354 18.6154 22.18 18L13.71 3.86002C13.3475 3.2623 12.6991 2.89728 12 2.89728C11.3009 2.89728 10.6526 3.2623 10.29 3.86002Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 9V13" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="12" cy="17" r="1" fill="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 665 B |
1
res/img/feather-customised/archive.svg
Normal file
1
res/img/feather-customised/archive.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
|
||||
|
After Width: | Height: | Size: 361 B |
1
res/img/feather-customised/arrow-down.svg
Normal file
1
res/img/feather-customised/arrow-down.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 313 B |
4
res/img/feather-customised/bell-crossed.svg
Normal file
4
res/img/feather-customised/bell-crossed.svg
Normal 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="M8.31422 2.4647C8.07372 2.6004 7.98877 2.90537 8.12448 3.14587C8.26018 3.38637 8.56515 3.47132 8.80565 3.33562L8.31422 2.4647ZM18.9999 9.00016L18.4999 8.9999V9.00016H18.9999ZM18.4999 13.0002C18.4999 13.2763 18.7238 13.5002 18.9999 13.5002C19.2761 13.5002 19.4999 13.2763 19.4999 13.0002H18.4999ZM17 17.5004C17.2761 17.5004 17.5 17.2765 17.5 17.0004C17.5 16.7242 17.2761 16.5004 17 16.5004V17.5004ZM2 16.5004C1.72386 16.5004 1.5 16.7242 1.5 17.0004C1.5 17.2765 1.72386 17.5004 2 17.5004V16.5004ZM5 9.00036H5.5L5.5 8.99973L5 9.00036ZM6.22429 6.00974C6.35096 5.76436 6.25474 5.46276 6.00937 5.33608C5.764 5.2094 5.46239 5.30562 5.33571 5.551L6.22429 6.00974ZM14.1625 21.2509C14.301 21.012 14.2197 20.7061 13.9808 20.5675C13.742 20.4289 13.436 20.5103 13.2975 20.7491L14.1625 21.2509ZM10.7025 20.7491C10.5639 20.5103 10.2579 20.4289 10.0191 20.5675C9.78021 20.7061 9.6989 21.012 9.83746 21.2509L10.7025 20.7491ZM8.80565 3.33562C10.8187 2.19975 13.2834 2.21831 15.2791 3.38436L15.7836 2.52094C13.4809 1.17549 10.6369 1.15408 8.31422 2.4647L8.80565 3.33562ZM15.2791 3.38436C17.2748 4.55042 18.5011 6.68854 18.4999 8.9999L19.4999 9.00041C19.5013 6.33346 18.0863 3.86639 15.7836 2.52094L15.2791 3.38436ZM18.4999 9.00016V13.0002H19.4999V9.00016H18.4999ZM17 16.5004H2V17.5004H17V16.5004ZM2 17.5004C3.933 17.5004 5.5 15.9334 5.5 14.0004H4.5C4.5 15.3811 3.38071 16.5004 2 16.5004V17.5004ZM5.5 14.0004V9.00036H4.5V14.0004H5.5ZM5.5 8.99973C5.49869 7.95947 5.74707 6.93408 6.22429 6.00974L5.33571 5.551C4.78509 6.61755 4.49849 7.80069 4.5 9.00099L5.5 8.99973ZM13.2975 20.7491C13.0291 21.2117 12.5348 21.4965 12 21.4965V22.4965C12.8913 22.4965 13.7152 22.0219 14.1625 21.2509L13.2975 20.7491ZM12 21.4965C11.4652 21.4965 10.9708 21.2117 10.7025 20.7491L9.83746 21.2509C10.2847 22.0219 11.1086 22.4965 12 22.4965V21.4965Z" fill="#2E2F32"/>
|
||||
<path d="M1 1L23 23" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
3
res/img/feather-customised/bell-mentions.custom.svg
Normal file
3
res/img/feather-customised/bell-mentions.custom.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<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="M6.62998 3.57476C7.55241 1.6636 9.6476 0.644608 11.692 1.13263C13.7342 1.62012 15.1666 3.47754 15.1667 5.60305V5.60308V6.01222C15.1667 6.95553 14.4163 7.73965 13.4668 7.73965C12.9349 7.73965 12.4655 7.49363 12.1555 7.11141C11.7768 7.49925 11.2519 7.74098 10.6668 7.74098C9.49647 7.74098 8.56689 6.77368 8.56689 5.60441C8.56689 4.43514 9.49647 3.46784 10.6668 3.46784C11.8348 3.46784 12.7629 4.43111 12.7668 5.59709L12.7668 5.60308V6.01222C12.7668 6.4247 13.0908 6.73965 13.4668 6.73965C13.8428 6.73965 14.1667 6.4247 14.1667 6.01222V5.60311V5.60308C14.1666 3.92595 13.0379 2.48201 11.4598 2.1053C9.8839 1.72911 8.25387 2.51086 7.53057 4.00944C6.80579 5.5111 7.19017 7.3233 8.44894 8.38151C9.70415 9.43672 11.5011 9.46808 12.7905 8.45807C13.0079 8.28778 13.3221 8.32596 13.4924 8.54335C13.6627 8.76074 13.6245 9.07501 13.4071 9.24529C11.745 10.5473 9.42229 10.5062 7.80545 9.14696C6.19216 7.79072 5.70903 5.48285 6.62998 3.57476ZM10.6668 4.46784C10.07 4.46784 9.56689 4.96597 9.56689 5.60441C9.56689 6.24285 10.07 6.74098 10.6668 6.74098C11.2637 6.74098 11.7668 6.24285 11.7668 5.60441C11.7668 4.96597 11.2637 4.46784 10.6668 4.46784ZM5.48951 2.14C5.61741 2.38474 5.5227 2.68682 5.27796 2.81472C3.92878 3.51981 3 4.95881 3 6.62506V10.0347C3 10.6137 2.8091 11.1505 2.48631 11.5805H13.8333C14.1095 11.5805 14.3333 11.8043 14.3333 12.0805C14.3333 12.3566 14.1095 12.5805 13.8333 12.5805H0.5C0.223858 12.5805 0 12.3566 0 12.0805C0 11.8043 0.223858 11.5805 0.5 11.5805C1.31782 11.5805 2 10.8991 2 10.0347V6.62506C2 4.58053 3.14094 2.80322 4.81479 1.92845C5.05953 1.80055 5.36161 1.89527 5.48951 2.14ZM5.76678 14.3741C6.00698 14.2379 6.31214 14.3222 6.44836 14.5624C6.59999 14.8298 6.8752 14.9886 7.16676 14.9886C7.45832 14.9886 7.73354 14.8298 7.88516 14.5624C8.02139 14.3222 8.32654 14.2379 8.56674 14.3741C8.80695 14.5104 8.89124 14.8155 8.75502 15.0557C8.42959 15.6296 7.82596 15.9886 7.16676 15.9886C6.50756 15.9886 5.90393 15.6296 5.5785 15.0557C5.44228 14.8155 5.52657 14.5104 5.76678 14.3741Z" fill="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
5
res/img/feather-customised/bell-notification.custom.svg
Normal file
5
res/img/feather-customised/bell-notification.custom.svg
Normal 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="M13.73 21C13.3722 21.6168 12.7131 21.9965 12 21.9965C11.287 21.9965 10.6278 21.6168 10.27 21" stroke="#2E2F32" stroke-linecap="round"/>
|
||||
<path d="M11.9999 2.00024C8.13388 2.00024 4.99988 5.13425 4.99988 9.00024V14.0002C4.99988 15.6571 3.65673 17.0002 1.99988 17.0002H21.9999C20.343 17.0002 18.9999 15.6571 18.9999 14.0002V12.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="18.75" cy="5.25" r="4.75" stroke="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 563 B |
3
res/img/feather-customised/bell.svg
Normal file
3
res/img/feather-customised/bell.svg
Normal 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="M22 17.5C22.2761 17.5 22.5 17.2761 22.5 17C22.5 16.7239 22.2761 16.5 22 16.5V17.5ZM2 16.5C1.72386 16.5 1.5 16.7239 1.5 17C1.5 17.2761 1.72386 17.5 2 17.5V16.5ZM5 9H4.5H5ZM19 9H19.5H19ZM14.1625 21.2509C14.3011 21.012 14.2197 20.7061 13.9809 20.5675C13.742 20.4289 13.4361 20.5103 13.2975 20.7491L14.1625 21.2509ZM10.7025 20.7491C10.5639 20.5103 10.258 20.4289 10.0191 20.5675C9.78025 20.7061 9.69894 21.012 9.8375 21.2509L10.7025 20.7491ZM22 16.5H2V17.5H22V16.5ZM2 17.5C3.933 17.5 5.5 15.933 5.5 14H4.5C4.5 15.3807 3.38071 16.5 2 16.5V17.5ZM5.5 14V9H4.5V14H5.5ZM5.5 9C5.5 5.41015 8.41015 2.5 12 2.5V1.5C7.85786 1.5 4.5 4.85786 4.5 9H5.5ZM12 2.5C15.5899 2.5 18.5 5.41015 18.5 9H19.5C19.5 4.85786 16.1421 1.5 12 1.5V2.5ZM18.5 9V14H19.5V9H18.5ZM18.5 14C18.5 15.933 20.067 17.5 22 17.5V16.5C20.6193 16.5 19.5 15.3807 19.5 14H18.5ZM13.2975 20.7491C13.0292 21.2117 12.5348 21.4965 12 21.4965V22.4965C12.8913 22.4965 13.7153 22.0219 14.1625 21.2509L13.2975 20.7491ZM12 21.4965C11.4652 21.4965 10.9708 21.2117 10.7025 20.7491L9.8375 21.2509C10.2847 22.0219 11.1087 22.4965 12 22.4965V21.4965Z" fill="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
5
res/img/feather-customised/brush.svg
Normal file
5
res/img/feather-customised/brush.svg
Normal 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="M12 16.5C12 18.9853 9.98528 21 7.5 21C6.21514 21 3 21 3 21C3 21 3 17.7004 3 16.5C3 14.0147 5.01472 12 7.5 12C9.98528 12 12 14.0147 12 16.5Z" stroke="#2E2F32" stroke-linejoin="round"/>
|
||||
<path d="M8.25 12L17.1955 3.69345C18.0632 2.88776 19.4127 2.91274 20.25 3.75V3.75C21.0873 4.58726 21.1122 5.93682 20.3065 6.80449L12 15.75" stroke="#2E2F32"/>
|
||||
<path d="M11.25 9C11.25 9 12.3929 9.45 13.5 10.5C14.6071 11.55 15 12.75 15 12.75" stroke="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 556 B |
1
res/img/feather-customised/chevron-right.svg
Normal file
1
res/img/feather-customised/chevron-right.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 270 B |
1
res/img/feather-customised/chevron-up.svg
Normal file
1
res/img/feather-customised/chevron-up.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 268 B |
1
res/img/feather-customised/compass.svg
Normal file
1
res/img/feather-customised/compass.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg>
|
||||
|
After Width: | Height: | Size: 342 B |
6
res/img/feather-customised/emoji3.custom.svg
Normal file
6
res/img/feather-customised/emoji3.custom.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="11.5" stroke="#2E2F32" stroke-linecap="round"/>
|
||||
<path d="M6.95508 14.75C8.02332 16.4046 9.88349 17.5 11.9995 17.5C14.1155 17.5 15.9757 16.4046 17.0439 14.75" stroke="#2E2F32" stroke-linecap="round"/>
|
||||
<path d="M8.8 9.5C8.8 9.88024 8.69689 10.2154 8.5407 10.4497C8.38357 10.6854 8.18847 10.8 8 10.8C7.81153 10.8 7.61643 10.6854 7.4593 10.4497C7.30311 10.2154 7.2 9.88024 7.2 9.5C7.2 9.11976 7.30311 8.78457 7.4593 8.55028C7.61643 8.31459 7.81153 8.2 8 8.2C8.18847 8.2 8.38357 8.31459 8.5407 8.55028C8.69689 8.78457 8.8 9.11976 8.8 9.5Z" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
|
||||
<path d="M16.8 9.5C16.8 9.88024 16.6969 10.2154 16.5407 10.4497C16.3836 10.6854 16.1885 10.8 16 10.8C15.8115 10.8 15.6164 10.6854 15.4593 10.4497C15.3031 10.2154 15.2 9.88024 15.2 9.5C15.2 9.11976 15.3031 8.78457 15.4593 8.55028C15.6164 8.31459 15.8115 8.2 16 8.2C16.1885 8.2 16.3836 8.31459 16.5407 8.55028C16.6969 8.78457 16.8 9.11976 16.8 9.5Z" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
res/img/feather-customised/favourites.svg
Normal file
3
res/img/feather-customised/favourites.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.41411 0.432179C7.59217 -0.144061 8.40783 -0.144059 8.58589 0.43218L10.1715 5.56319H15.3856C15.9721 5.56319 16.224 6.30764 15.7578 6.66373L11.5135 9.90611L13.1185 15.1001C13.2948 15.6705 12.6348 16.1309 12.1604 15.7684L8 12.5902L3.83965 15.7684C3.3652 16.1309 2.70521 15.6705 2.88148 15.1001L4.4865 9.90611L0.242159 6.66373C-0.223967 6.30764 0.0278507 5.56319 0.614427 5.56319H5.82854L7.41411 0.432179Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 533 B |
1
res/img/feather-customised/more-horizontal.svg
Normal file
1
res/img/feather-customised/more-horizontal.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
|
||||
|
After Width: | Height: | Size: 343 B |
11
res/img/feather-customised/secure-backup.svg
Normal file
11
res/img/feather-customised/secure-backup.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="2" width="22" height="21">
|
||||
<rect x="1" y="2" width="21.5" height="5" fill="white"/>
|
||||
<rect x="1" y="17.7" width="21.5" height="5" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path d="M3.16626 12.4014C3.16626 7.64675 6.99526 3.81775 11.75 3.81775C13.0964 3.81775 14.4429 4.15437 15.6631 4.74345H14.9899C14.5691 4.74345 14.2325 5.08006 14.2325 5.50083C14.2325 5.9216 14.5691 6.25822 14.9899 6.25822H17.3041C17.809 6.25822 18.1877 5.83745 18.1877 5.3746V3.06037C18.1877 2.6396 17.8511 2.30298 17.4303 2.30298C17.0096 2.30298 16.673 2.6396 16.673 3.06037V3.60737C16.6309 3.56529 16.5888 3.5653 16.5467 3.52322C15.074 2.72376 13.433 2.30298 11.75 2.30298C6.1958 2.30298 1.65149 6.84729 1.65149 12.4014C1.65149 14.0845 2.07226 15.7676 2.87172 17.2403C2.99795 17.4928 3.25041 17.619 3.54495 17.619C3.67118 17.619 3.79741 17.5769 3.92364 17.5348C4.30233 17.3245 4.42857 16.8616 4.21819 16.525C3.50288 15.2627 3.16626 13.8321 3.16626 12.4014Z" fill="#2E2F32"/>
|
||||
<path d="M20.6281 7.56263C20.4177 7.18394 19.9548 7.05771 19.6182 7.2681C19.2395 7.47848 19.1133 7.94133 19.3237 8.27794C19.9969 9.54025 20.3756 10.9288 20.3756 12.4015C20.3756 17.1562 16.5045 20.9852 11.7919 20.9852C10.4454 20.9852 9.09897 20.6486 7.87874 20.0595H8.55198C8.97275 20.0595 9.30937 19.7229 9.30937 19.3021C9.30937 18.8813 8.97275 18.5447 8.55198 18.5447H6.23774C5.73282 18.5447 5.35413 18.9655 5.35413 19.4283V21.7426C5.35413 22.1633 5.69075 22.4999 6.11152 22.4999C6.53229 22.4999 6.8689 22.1633 6.8689 21.7426V21.1956C6.91098 21.2376 6.95306 21.2376 6.99514 21.2797C8.42575 22.0792 10.0667 22.4999 11.7498 22.4999C17.304 22.4999 21.8483 17.9556 21.8483 12.4015C21.8483 10.7184 21.4275 9.03532 20.6281 7.56263Z" fill="#2E2F32"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 9C1.89543 9 1 9.89543 1 11V14C1 15.1046 1.89543 16 3 16H21C22.1046 16 23 15.1046 23 14V11C23 9.89543 22.1046 9 21 9H3ZM5.25 10.5C4.83579 10.5 4.5 10.8358 4.5 11.25C4.5 11.6642 4.83579 12 5.25 12H7.75C8.16421 12 8.5 11.6642 8.5 11.25C8.5 10.8358 8.16421 10.5 7.75 10.5H5.25ZM9.5 11.25C9.5 10.8358 9.83579 10.5 10.25 10.5H10.75C11.1642 10.5 11.5 10.8358 11.5 11.25C11.5 11.6642 11.1642 12 10.75 12H10.25C9.83579 12 9.5 11.6642 9.5 11.25ZM13.25 10.5C12.8358 10.5 12.5 10.8358 12.5 11.25C12.5 11.6642 12.8358 12 13.25 12H15.75C16.1642 12 16.5 11.6642 16.5 11.25C16.5 10.8358 16.1642 10.5 15.75 10.5H13.25ZM17.5 11.25C17.5 10.8358 17.8358 10.5 18.25 10.5H18.75C19.1642 10.5 19.5 10.8358 19.5 11.25C19.5 11.6642 19.1642 12 18.75 12H18.25C17.8358 12 17.5 11.6642 17.5 11.25ZM5.25 13C4.83579 13 4.5 13.3358 4.5 13.75C4.5 14.1642 4.83579 14.5 5.25 14.5H5.75C6.16421 14.5 6.5 14.1642 6.5 13.75C6.5 13.3358 6.16421 13 5.75 13H5.25ZM7.5 13.75C7.5 13.3358 7.83579 13 8.25 13H10.75C11.1642 13 11.5 13.3358 11.5 13.75C11.5 14.1642 11.1642 14.5 10.75 14.5H8.25C7.83579 14.5 7.5 14.1642 7.5 13.75ZM13.25 13C12.8358 13 12.5 13.3358 12.5 13.75C12.5 14.1642 12.8358 14.5 13.25 14.5H13.75C14.1642 14.5 14.5 14.1642 14.5 13.75C14.5 13.3358 14.1642 13 13.75 13H13.25Z" fill="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
11
res/img/feather-customised/secure-phrase.svg
Normal file
11
res/img/feather-customised/secure-phrase.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="2" width="22" height="21">
|
||||
<rect x="1" y="2" width="21.5" height="5" fill="white"/>
|
||||
<rect x="1" y="17.7" width="21.5" height="5" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path d="M3.16626 12.4014C3.16626 7.64675 6.99526 3.81775 11.75 3.81775C13.0964 3.81775 14.4429 4.15437 15.6631 4.74345H14.9899C14.5691 4.74345 14.2325 5.08006 14.2325 5.50083C14.2325 5.9216 14.5691 6.25822 14.9899 6.25822H17.3041C17.809 6.25822 18.1877 5.83745 18.1877 5.3746V3.06037C18.1877 2.6396 17.8511 2.30298 17.4303 2.30298C17.0096 2.30298 16.673 2.6396 16.673 3.06037V3.60737C16.6309 3.56529 16.5888 3.5653 16.5467 3.52322C15.074 2.72376 13.433 2.30298 11.75 2.30298C6.1958 2.30298 1.65149 6.84729 1.65149 12.4014C1.65149 14.0845 2.07226 15.7676 2.87172 17.2403C2.99795 17.4928 3.25041 17.619 3.54495 17.619C3.67118 17.619 3.79741 17.5769 3.92364 17.5348C4.30233 17.3245 4.42857 16.8616 4.21819 16.525C3.50288 15.2627 3.16626 13.8321 3.16626 12.4014Z" fill="#2E2F32"/>
|
||||
<path d="M20.6281 7.56263C20.4177 7.18394 19.9548 7.05771 19.6182 7.2681C19.2395 7.47848 19.1133 7.94133 19.3237 8.27794C19.9969 9.54025 20.3756 10.9288 20.3756 12.4015C20.3756 17.1562 16.5045 20.9852 11.7919 20.9852C10.4454 20.9852 9.09897 20.6486 7.87874 20.0595H8.55198C8.97275 20.0595 9.30937 19.7229 9.30937 19.3021C9.30937 18.8813 8.97275 18.5447 8.55198 18.5447H6.23774C5.73282 18.5447 5.35413 18.9655 5.35413 19.4283V21.7426C5.35413 22.1633 5.69075 22.4999 6.11152 22.4999C6.53229 22.4999 6.8689 22.1633 6.8689 21.7426V21.1956C6.91098 21.2376 6.95306 21.2376 6.99514 21.2797C8.42575 22.0792 10.0667 22.4999 11.7498 22.4999C17.304 22.4999 21.8483 17.9556 21.8483 12.4015C21.8483 10.7184 21.4275 9.03532 20.6281 7.56263Z" fill="#2E2F32"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 11C1 9.89543 1.89543 9 3 9H21C22.1046 9 23 9.89543 23 11V14C23 15.1046 22.1046 16 21 16H3C1.89543 16 1 15.1046 1 14V11ZM6 12.5C6 13.3284 5.32843 14 4.5 14C3.67157 14 3 13.3284 3 12.5C3 11.6716 3.67157 11 4.5 11C5.32843 11 6 11.6716 6 12.5ZM9.5 14C10.3284 14 11 13.3284 11 12.5C11 11.6716 10.3284 11 9.5 11C8.67157 11 8 11.6716 8 12.5C8 13.3284 8.67157 14 9.5 14ZM16 12.5C16 13.3284 15.3284 14 14.5 14C13.6716 14 13 13.3284 13 12.5C13 11.6716 13.6716 11 14.5 11C15.3284 11 16 11.6716 16 12.5ZM19.5 14C20.3284 14 21 13.3284 21 12.5C21 11.6716 20.3284 11 19.5 11C18.6716 11 18 11.6716 18 12.5C18 13.3284 18.6716 14 19.5 14Z" fill="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
1
res/img/feather-customised/star.svg
Normal file
1
res/img/feather-customised/star.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
|
After Width: | Height: | Size: 339 B |
4
res/img/feather-customised/sticker.custom.svg
Normal file
4
res/img/feather-customised/sticker.custom.svg
Normal 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="M11.7947 23.4982C5.53814 23.3887 0.5 18.2827 0.5 12C0.5 5.64873 5.64873 0.5 12 0.5C18.2827 0.5 23.3887 5.53814 23.4982 11.7947L11.7947 23.4982Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.7137 23.496C10.6345 20.1166 11.3182 16.403 13.8244 13.875C16.3306 11.347 20.0122 10.6574 23.3625 11.7459" stroke="#2E2F32" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 493 B |
1
res/img/feather-customised/sun.svg
Normal file
1
res/img/feather-customised/sun.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
||||
|
After Width: | Height: | Size: 650 B |
BIN
res/img/file.png
BIN
res/img/file.png
Binary file not shown.
|
Before Width: | Height: | Size: 482 B |
Binary file not shown.
|
Before Width: | Height: | Size: 503 B |
|
|
@ -1,18 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: bin/sketchtool 1.4 (305) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icons_browse_files</title>
|
||||
<desc>Created with bin/sketchtool.</desc>
|
||||
<defs></defs>
|
||||
<g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="02_13-Chat-member-profile" sketch:type="MSArtboardGroup" transform="translate(-1025.000000, -33.000000)">
|
||||
<g id="icons_browse_files" sketch:type="MSLayerGroup" transform="translate(1025.000000, 32.000000)">
|
||||
<g id="Rectangle-5-+-Rectangle-6-Copy" transform="translate(0.000000, 1.000000)" sketch:type="MSShapeGroup">
|
||||
<path d="M0,4.00955791 C0,1.79514022 1.78163126,0 3.99825563,0 L9.59161955,0 C9.59161955,0 16.3225806,6.49234232 16.3225806,6.49234232 L16.3225806,18.0063928 C16.3225806,20.2120012 14.5290874,22 12.3296282,22 L3.99295243,22 C1.7877057,22 0,20.1996477 0,17.9904421 L0,4.00955791 Z" id="Rectangle-5" stroke="#76CFA6"></path>
|
||||
<path d="M15.6804916,7.49527496 L11.5273266,7.49527496 C10.3308881,7.49527496 9.3609831,6.52527676 9.3609831,5.3289315 L9.3609831,1.88544393 L15.6804916,7.49527496 Z" id="Rectangle-6-Copy" fill="#FFFFFF"></path>
|
||||
<path d="M16.3225806,7.09677419 L11.4129801,7.09677419 C10.2050375,7.09677419 9.22580645,6.11744908 9.22580645,4.90960051 L9.22580645,0" id="Rectangle-6" stroke="#76CFA6"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
6
res/img/globe.svg
Normal file
6
res/img/globe.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon">
|
||||
<path id="sea" fill-rule="evenodd" clip-rule="evenodd" d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM4.6693 2.43613C4.8306 2.64728 4.94732 2.80007 4.45289 2.80007C4.14732 2.80007 3.84175 2.74171 3.58076 2.69186C3.15847 2.61121 2.85289 2.55285 2.85289 2.80007C2.85289 3.00007 3.65289 3.40007 4.45289 3.80007C5.25289 4.20007 6.05289 4.60007 6.05289 4.80007C6.05289 5.20007 6.05289 7.60007 5.25289 7.20007C4.45289 6.80007 2.45289 5.20007 2.45289 4.80007C2.45289 4.65277 2.18168 4.39698 1.85897 4.09263C1.30535 3.57051 0.600192 2.90547 0.852893 2.40007C1.25289 1.60007 2.85289 6.51479e-05 5.25289 0.800065C4.98623 1.06673 4.45289 1.68007 4.45289 2.00007C4.45289 2.15285 4.56961 2.30564 4.6693 2.43613Z" fill="#2E2F32"/>
|
||||
<path id="earth" d="M4.45294 2.80007C5.25294 2.80007 4.45294 2.40007 4.45294 2.00007C4.45294 1.68007 4.98627 1.06673 5.25294 0.800065C2.85294 6.51479e-05 1.25294 1.60007 0.852941 2.40007C0.452941 3.20007 2.45294 4.40007 2.45294 4.80007C2.45294 5.20007 4.45294 6.80007 5.25294 7.20007C6.05294 7.60007 6.05294 5.20007 6.05294 4.80007C6.05294 4.40007 2.85294 3.20007 2.85294 2.80007C2.85294 2.40007 3.65294 2.80007 4.45294 2.80007Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
res/img/spinner.svg
Normal file
3
res/img/spinner.svg
Normal 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="M5.60236 3.67346C3.10764 5.59313 1.5 8.60882 1.5 12C1.5 17.799 6.20101 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 8.6452 20.9267 5.65787 18.4776 3.73562L17.7648 4.44842C20.0354 6.18437 21.5 8.92114 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 8.88471 3.9995 6.11966 6.31612 4.38722L5.60236 3.67346Z" fill="#03b381"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 508 B |
|
|
@ -103,6 +103,24 @@ $eventtile-meta-color: $roomtopic-color;
|
|||
|
||||
$header-divider-color: $header-panel-text-primary-color;
|
||||
|
||||
// ********************
|
||||
|
||||
// V2 Room List
|
||||
// TODO: Remove the 2 from all of these when the new list takes over
|
||||
|
||||
$theme-button-bg-color: #e3e8f0;
|
||||
|
||||
$roomlist2-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
|
||||
$roomlist2-bg-color: $header-panel-bg-color;
|
||||
|
||||
$roomsublist2-divider-color: $primary-fg-color;
|
||||
|
||||
$roomtile2-preview-color: #9e9e9e;
|
||||
$roomtile2-default-badge-bg-color: #61708b;
|
||||
$roomtile2-selected-bg-color: #1A1D23;
|
||||
|
||||
// ********************
|
||||
|
||||
$roomtile-name-color: $header-panel-text-primary-color;
|
||||
$roomtile-selected-color: $text-primary-color;
|
||||
$roomtile-notified-color: $text-primary-color;
|
||||
|
|
@ -180,6 +198,9 @@ $breadcrumb-placeholder-bg-color: #272c35;
|
|||
|
||||
$user-tile-hover-bg-color: $header-panel-bg-color;
|
||||
|
||||
// Appearance tab colors
|
||||
$appearance-tab-border-color: $room-highlight-color;
|
||||
|
||||
// ***** Mixins! *****
|
||||
|
||||
@define-mixin mx_DialogButton {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
$font-family: var(--font-family, $font-family);
|
||||
$monospace-font-family: var(--font-family-monospace, $monospace-font-family);
|
||||
//
|
||||
// --accent-color
|
||||
$accent-color: var(--accent-color);
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ $focus-bg-color: #dddddd;
|
|||
$accent-fg-color: #ffffff;
|
||||
$accent-color-50pct: rgba(3, 179, 129, 0.5); //#03b381 in rgb
|
||||
$accent-color-darker: #92caad;
|
||||
$accent-color-alt: #238CF5;
|
||||
$accent-color-alt: #238cf5;
|
||||
|
||||
$selection-fg-color: $primary-bg-color;
|
||||
|
||||
|
|
@ -46,8 +46,8 @@ $focus-brightness: 105%;
|
|||
$warning-color: $notice-primary-color; // red
|
||||
$orange-warning-color: #ff8d13; // used for true warnings
|
||||
// background colour for warnings
|
||||
$warning-bg-color: #DF2A8B;
|
||||
$info-bg-color: #2A9EDF;
|
||||
$warning-bg-color: #df2a8b;
|
||||
$info-bg-color: #2a9edf;
|
||||
$mention-user-pill-bg-color: $warning-color;
|
||||
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
|
|
@ -71,7 +71,7 @@ $tagpanel-bg-color: #27303a;
|
|||
$plinth-bg-color: $secondary-accent-color;
|
||||
|
||||
// used by RoomDropTarget
|
||||
$droptarget-bg-color: rgba(255,255,255,0.5);
|
||||
$droptarget-bg-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
// used by AddressSelector
|
||||
$selected-color: $secondary-accent-color;
|
||||
|
|
@ -157,18 +157,38 @@ $rte-group-pill-color: #aaa;
|
|||
|
||||
$topleftmenu-color: #212121;
|
||||
$roomheader-color: #45474a;
|
||||
$roomheader-addroom-bg-color: #91A1C0;
|
||||
$roomheader-addroom-bg-color: #91a1c0;
|
||||
$roomheader-addroom-fg-color: $accent-fg-color;
|
||||
$tagpanel-button-color: #91A1C0;
|
||||
$roomheader-button-color: #91A1C0;
|
||||
$groupheader-button-color: #91A1C0;
|
||||
$rightpanel-button-color: #91A1C0;
|
||||
$composer-button-color: #91A1C0;
|
||||
$tagpanel-button-color: #91a1c0;
|
||||
$roomheader-button-color: #91a1c0;
|
||||
$groupheader-button-color: #91a1c0;
|
||||
$rightpanel-button-color: #91a1c0;
|
||||
$composer-button-color: #91a1c0;
|
||||
$roomtopic-color: #9e9e9e;
|
||||
$eventtile-meta-color: $roomtopic-color;
|
||||
|
||||
$composer-e2e-icon-color: #c9ced6;
|
||||
$header-divider-color: #91A1C0;
|
||||
$header-divider-color: #91a1c0;
|
||||
|
||||
// ********************
|
||||
|
||||
// V2 Room List
|
||||
// TODO: Remove the 2 from all of these when the new list takes over
|
||||
|
||||
$theme-button-bg-color: #e3e8f0;
|
||||
|
||||
$roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
|
||||
$roomlist2-bg-color: $header-panel-bg-color;
|
||||
|
||||
$roomsublist2-divider-color: $primary-fg-color;
|
||||
|
||||
$roomtile2-preview-color: #9e9e9e;
|
||||
$roomtile2-default-badge-bg-color: #61708b;
|
||||
$roomtile2-selected-bg-color: #fff;
|
||||
|
||||
$presence-online: $accent-color;
|
||||
$presence-away: #d9b072;
|
||||
$presence-offline: #e3e8f0;
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
@ -262,6 +282,10 @@ $togglesw-off-color: #c1c9d6;
|
|||
$togglesw-on-color: $accent-color;
|
||||
$togglesw-ball-color: #fff;
|
||||
|
||||
// Slider
|
||||
$slider-selection-color: $accent-color;
|
||||
$slider-background-color: #c1c9d6;
|
||||
|
||||
$progressbar-color: #000;
|
||||
|
||||
$room-warning-bg-color: $yellow-background;
|
||||
|
|
@ -302,6 +326,9 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
|
|||
|
||||
$user-tile-hover-bg-color: $header-panel-bg-color;
|
||||
|
||||
// FontSlider colors
|
||||
$appearance-tab-border-color: $input-darker-bg-color;
|
||||
|
||||
// ***** Mixins! *****
|
||||
|
||||
@define-mixin mx_DialogButton {
|
||||
|
|
|
|||
20
src/@types/common.ts
Normal file
20
src/@types/common.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
// Based on https://stackoverflow.com/a/53229857/3532235
|
||||
export type Without<T, U> = {[P in Exclude<keyof T, keyof U>] ? : never};
|
||||
export type XOR<T, U> = (T | U) extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
|
||||
export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
|
||||
22
src/@types/global.d.ts
vendored
22
src/@types/global.d.ts
vendored
|
|
@ -15,13 +15,31 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import * as ModernizrStatic from "modernizr";
|
||||
import ContentMessages from "../ContentMessages";
|
||||
import { IMatrixClientPeg } from "../MatrixClientPeg";
|
||||
import ToastStore from "../stores/ToastStore";
|
||||
import DeviceListener from "../DeviceListener";
|
||||
import { RoomListStore2 } from "../stores/room-list/RoomListStore2";
|
||||
import { PlatformPeg } from "../PlatformPeg";
|
||||
import RoomListLayoutStore from "../stores/room-list/RoomListLayoutStore";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
Modernizr: ModernizrStatic;
|
||||
mxMatrixClientPeg: IMatrixClientPeg;
|
||||
Olm: {
|
||||
init: () => Promise<void>;
|
||||
};
|
||||
|
||||
mx_ContentMessages: ContentMessages;
|
||||
mx_ToastStore: ToastStore;
|
||||
mx_DeviceListener: DeviceListener;
|
||||
mx_RoomListStore2: RoomListStore2;
|
||||
mx_RoomListLayoutStore: RoomListLayoutStore;
|
||||
mxPlatformPeg: PlatformPeg;
|
||||
|
||||
// TODO: Remove flag before launch: https://github.com/vector-im/riot-web/issues/14231
|
||||
mx_QuietRoomListLogging: boolean;
|
||||
}
|
||||
|
||||
// workaround for https://github.com/microsoft/TypeScript/issues/30933
|
||||
|
|
@ -34,6 +52,10 @@ declare global {
|
|||
hasStorageAccess?: () => Promise<boolean>;
|
||||
}
|
||||
|
||||
interface Navigator {
|
||||
userLanguage?: string;
|
||||
}
|
||||
|
||||
interface StorageEstimate {
|
||||
usageDetails?: {[key: string]: number};
|
||||
}
|
||||
|
|
|
|||
38
src/@types/polyfill.ts
Normal file
38
src/@types/polyfill.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
// This is intended to fix re-resizer because of its unguarded `instanceof TouchEvent` checks.
|
||||
export function polyfillTouchEvent() {
|
||||
// Firefox doesn't have touch events without touch devices being present, so create a fake
|
||||
// one we can rely on lying about.
|
||||
if (!window.TouchEvent) {
|
||||
// We have no intention of actually using this, so just lie.
|
||||
window.TouchEvent = class TouchEvent extends UIEvent {
|
||||
public get altKey(): boolean { return false; }
|
||||
public get changedTouches(): any { return []; }
|
||||
public get ctrlKey(): boolean { return false; }
|
||||
public get metaKey(): boolean { return false; }
|
||||
public get shiftKey(): boolean { return false; }
|
||||
public get targetTouches(): any { return []; }
|
||||
public get touches(): any { return []; }
|
||||
public get rotation(): number { return 0.0; }
|
||||
public get scale(): number { return 0.0; }
|
||||
constructor(eventType: string, params?: any) {
|
||||
super(eventType, params);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ import RoomViewStore from './stores/RoomViewStore';
|
|||
*/
|
||||
class ActiveRoomObserver {
|
||||
constructor() {
|
||||
this._listeners = {};
|
||||
this._listeners = {}; // key=roomId, value=function(isActive:boolean)
|
||||
|
||||
this._activeRoomId = RoomViewStore.getRoomId();
|
||||
// TODO: We could self-destruct when the last listener goes away, or at least
|
||||
|
|
@ -35,6 +35,10 @@ class ActiveRoomObserver {
|
|||
this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate.bind(this));
|
||||
}
|
||||
|
||||
get activeRoomId(): string {
|
||||
return this._activeRoomId;
|
||||
}
|
||||
|
||||
addListener(roomId, listener) {
|
||||
if (!this._listeners[roomId]) this._listeners[roomId] = [];
|
||||
this._listeners[roomId].push(listener);
|
||||
|
|
@ -51,23 +55,23 @@ class ActiveRoomObserver {
|
|||
}
|
||||
}
|
||||
|
||||
_emit(roomId) {
|
||||
_emit(roomId, isActive: boolean) {
|
||||
if (!this._listeners[roomId]) return;
|
||||
|
||||
for (const l of this._listeners[roomId]) {
|
||||
l.call();
|
||||
l.call(null, isActive);
|
||||
}
|
||||
}
|
||||
|
||||
_onRoomViewStoreUpdate() {
|
||||
// emit for the old room ID
|
||||
if (this._activeRoomId) this._emit(this._activeRoomId);
|
||||
if (this._activeRoomId) this._emit(this._activeRoomId, false);
|
||||
|
||||
// update our cache
|
||||
this._activeRoomId = RoomViewStore.getRoomId();
|
||||
|
||||
// and emit for the new one
|
||||
if (this._activeRoomId) this._emit(this._activeRoomId);
|
||||
if (this._activeRoomId) this._emit(this._activeRoomId, true);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import {MatrixClientPeg} from './MatrixClientPeg';
|
|||
import DMRoomMap from './utils/DMRoomMap';
|
||||
import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
|
||||
|
||||
// Not to be used for BaseAvatar urls as that has similar default avatar fallback already
|
||||
export function avatarUrlForMember(member, width, height, resizeMethod) {
|
||||
let url;
|
||||
if (member && member.getAvatarUrl) {
|
||||
|
|
|
|||
|
|
@ -1,193 +0,0 @@
|
|||
// @flow
|
||||
|
||||
/*
|
||||
Copyright 2016 Aviral Dasgupta
|
||||
Copyright 2016 OpenMarket Ltd
|
||||
Copyright 2018 New Vector Ltd
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {MatrixClient} from "matrix-js-sdk";
|
||||
import dis from './dispatcher';
|
||||
import BaseEventIndexManager from './indexing/BaseEventIndexManager';
|
||||
|
||||
/**
|
||||
* Base class for classes that provide platform-specific functionality
|
||||
* eg. Setting an application badge or displaying notifications
|
||||
*
|
||||
* Instances of this class are provided by the application.
|
||||
*/
|
||||
export default class BasePlatform {
|
||||
constructor() {
|
||||
this.notificationCount = 0;
|
||||
this.errorDidOccur = false;
|
||||
|
||||
dis.register(this._onAction.bind(this));
|
||||
}
|
||||
|
||||
_onAction(payload: Object) {
|
||||
switch (payload.action) {
|
||||
case 'on_client_not_viable':
|
||||
case 'on_logged_out':
|
||||
this.setNotificationCount(0);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Used primarily for Analytics
|
||||
getHumanReadableName(): string {
|
||||
return 'Base Platform';
|
||||
}
|
||||
|
||||
setNotificationCount(count: number) {
|
||||
this.notificationCount = count;
|
||||
}
|
||||
|
||||
setErrorStatus(errorDidOccur: boolean) {
|
||||
this.errorDidOccur = errorDidOccur;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the platform supports displaying
|
||||
* notifications, otherwise false.
|
||||
* @returns {boolean} whether the platform supports displaying notifications
|
||||
*/
|
||||
supportsNotifications(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the application currently has permission
|
||||
* to display notifications. Otherwise false.
|
||||
* @returns {boolean} whether the application has permission to display notifications
|
||||
*/
|
||||
maySendNotifications(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Requests permission to send notifications. Returns
|
||||
* a promise that is resolved when the user has responded
|
||||
* to the request. The promise has a single string argument
|
||||
* that is 'granted' if the user allowed the request or
|
||||
* 'denied' otherwise.
|
||||
*/
|
||||
requestNotificationPermission(): Promise<string> {
|
||||
}
|
||||
|
||||
displayNotification(title: string, msg: string, avatarUrl: string, room: Object) {
|
||||
}
|
||||
|
||||
loudNotification(ev: Event, room: Object) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a promise that resolves to a string representing
|
||||
* the current version of the application.
|
||||
*/
|
||||
getAppVersion(): Promise<string> {
|
||||
throw new Error("getAppVersion not implemented!");
|
||||
}
|
||||
|
||||
/*
|
||||
* If it's not expected that capturing the screen will work
|
||||
* with getUserMedia, return a string explaining why not.
|
||||
* Otherwise, return null.
|
||||
*/
|
||||
screenCaptureErrorString(): string {
|
||||
return "Not implemented";
|
||||
}
|
||||
|
||||
/**
|
||||
* Restarts the application, without neccessarily reloading
|
||||
* any application code
|
||||
*/
|
||||
reload() {
|
||||
throw new Error("reload not implemented!");
|
||||
}
|
||||
|
||||
supportsAutoLaunch(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
// XXX: Surely this should be a setting like any other?
|
||||
async getAutoLaunchEnabled(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
async setAutoLaunchEnabled(enabled: boolean): void {
|
||||
throw new Error("Unimplemented");
|
||||
}
|
||||
|
||||
supportsAutoHideMenuBar(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
async getAutoHideMenuBarEnabled(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
async setAutoHideMenuBarEnabled(enabled: boolean): void {
|
||||
throw new Error("Unimplemented");
|
||||
}
|
||||
|
||||
supportsMinimizeToTray(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
async getMinimizeToTrayEnabled(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
async setMinimizeToTrayEnabled(enabled: boolean): void {
|
||||
throw new Error("Unimplemented");
|
||||
}
|
||||
|
||||
/**
|
||||
* Get our platform specific EventIndexManager.
|
||||
*
|
||||
* @return {BaseEventIndexManager} The EventIndex manager for our platform,
|
||||
* can be null if the platform doesn't support event indexing.
|
||||
*/
|
||||
getEventIndexingManager(): BaseEventIndexManager | null {
|
||||
return null;
|
||||
}
|
||||
|
||||
setLanguage(preferredLangs: string[]) {}
|
||||
|
||||
getSSOCallbackUrl(hsUrl: string, isUrl: string, fragmentAfterLogin: string): URL {
|
||||
const url = new URL(window.location.href);
|
||||
url.hash = fragmentAfterLogin || "";
|
||||
url.searchParams.set("homeserver", hsUrl);
|
||||
url.searchParams.set("identityServer", isUrl);
|
||||
return url;
|
||||
}
|
||||
|
||||
/**
|
||||
* Begin Single Sign On flows.
|
||||
* @param {MatrixClient} mxClient the matrix client using which we should start the flow
|
||||
* @param {"sso"|"cas"} loginType the type of SSO it is, CAS/SSO.
|
||||
* @param {string} fragmentAfterLogin the hash to pass to the app during sso callback.
|
||||
*/
|
||||
startSingleSignOn(mxClient: MatrixClient, loginType: "sso" | "cas", fragmentAfterLogin: string) {
|
||||
const callbackUrl = this.getSSOCallbackUrl(mxClient.getHomeserverUrl(), mxClient.getIdentityServerUrl(),
|
||||
fragmentAfterLogin);
|
||||
window.location.href = mxClient.getSsoLoginUrl(callbackUrl.toString(), loginType); // redirect to SSO
|
||||
}
|
||||
|
||||
onKeyDown(ev: KeyboardEvent): boolean {
|
||||
return false; // no shortcuts implemented
|
||||
}
|
||||
}
|
||||
284
src/BasePlatform.ts
Normal file
284
src/BasePlatform.ts
Normal file
|
|
@ -0,0 +1,284 @@
|
|||
/*
|
||||
Copyright 2016 Aviral Dasgupta
|
||||
Copyright 2016 OpenMarket Ltd
|
||||
Copyright 2018 New Vector Ltd
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {MatrixClient} from "matrix-js-sdk/src/client";
|
||||
import dis from './dispatcher/dispatcher';
|
||||
import BaseEventIndexManager from './indexing/BaseEventIndexManager';
|
||||
import {ActionPayload} from "./dispatcher/payloads";
|
||||
import {CheckUpdatesPayload} from "./dispatcher/payloads/CheckUpdatesPayload";
|
||||
import {Action} from "./dispatcher/actions";
|
||||
import {hideToast as hideUpdateToast} from "./toasts/UpdateToast";
|
||||
|
||||
export const SSO_HOMESERVER_URL_KEY = "mx_sso_hs_url";
|
||||
export const SSO_ID_SERVER_URL_KEY = "mx_sso_is_url";
|
||||
|
||||
export enum UpdateCheckStatus {
|
||||
Checking = "CHECKING",
|
||||
Error = "ERROR",
|
||||
NotAvailable = "NOTAVAILABLE",
|
||||
Downloading = "DOWNLOADING",
|
||||
Ready = "READY",
|
||||
}
|
||||
|
||||
const UPDATE_DEFER_KEY = "mx_defer_update";
|
||||
|
||||
/**
|
||||
* Base class for classes that provide platform-specific functionality
|
||||
* eg. Setting an application badge or displaying notifications
|
||||
*
|
||||
* Instances of this class are provided by the application.
|
||||
*/
|
||||
export default abstract class BasePlatform {
|
||||
protected notificationCount = 0;
|
||||
protected errorDidOccur = false;
|
||||
|
||||
constructor() {
|
||||
dis.register(this.onAction);
|
||||
this.startUpdateCheck = this.startUpdateCheck.bind(this);
|
||||
}
|
||||
|
||||
abstract async getConfig(): Promise<{}>;
|
||||
|
||||
abstract getDefaultDeviceDisplayName(): string;
|
||||
|
||||
protected onAction = (payload: ActionPayload) => {
|
||||
switch (payload.action) {
|
||||
case 'on_client_not_viable':
|
||||
case 'on_logged_out':
|
||||
this.setNotificationCount(0);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Used primarily for Analytics
|
||||
abstract getHumanReadableName(): string;
|
||||
|
||||
setNotificationCount(count: number) {
|
||||
this.notificationCount = count;
|
||||
}
|
||||
|
||||
setErrorStatus(errorDidOccur: boolean) {
|
||||
this.errorDidOccur = errorDidOccur;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether we can call checkForUpdate on this platform build
|
||||
*/
|
||||
async canSelfUpdate(): Promise<boolean> {
|
||||
return false;
|
||||
}
|
||||
|
||||
startUpdateCheck() {
|
||||
hideUpdateToast();
|
||||
localStorage.removeItem(UPDATE_DEFER_KEY);
|
||||
dis.dispatch<CheckUpdatesPayload>({
|
||||
action: Action.CheckUpdates,
|
||||
status: UpdateCheckStatus.Checking,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the currently running app to the latest available version
|
||||
* and replace this instance of the app with the new version.
|
||||
*/
|
||||
installUpdate() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the version update has been deferred and that deferment is still in effect
|
||||
* @param newVersion the version string to check
|
||||
*/
|
||||
protected shouldShowUpdate(newVersion: string): boolean {
|
||||
try {
|
||||
const [version, deferUntil] = JSON.parse(localStorage.getItem(UPDATE_DEFER_KEY));
|
||||
return newVersion !== version || Date.now() > deferUntil;
|
||||
} catch (e) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Ignore the pending update and don't prompt about this version
|
||||
* until the next morning (8am).
|
||||
*/
|
||||
deferUpdate(newVersion: string) {
|
||||
const date = new Date(Date.now() + 24 * 60 * 60 * 1000);
|
||||
date.setHours(8, 0, 0, 0); // set to next 8am
|
||||
localStorage.setItem(UPDATE_DEFER_KEY, JSON.stringify([newVersion, date.getTime()]));
|
||||
hideUpdateToast();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the platform supports displaying
|
||||
* notifications, otherwise false.
|
||||
* @returns {boolean} whether the platform supports displaying notifications
|
||||
*/
|
||||
supportsNotifications(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the application currently has permission
|
||||
* to display notifications. Otherwise false.
|
||||
* @returns {boolean} whether the application has permission to display notifications
|
||||
*/
|
||||
maySendNotifications(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Requests permission to send notifications. Returns
|
||||
* a promise that is resolved when the user has responded
|
||||
* to the request. The promise has a single string argument
|
||||
* that is 'granted' if the user allowed the request or
|
||||
* 'denied' otherwise.
|
||||
*/
|
||||
abstract requestNotificationPermission(): Promise<string>;
|
||||
|
||||
abstract displayNotification(title: string, msg: string, avatarUrl: string, room: Object);
|
||||
|
||||
loudNotification(ev: Event, room: Object) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a promise that resolves to a string representing the current version of the application.
|
||||
*/
|
||||
abstract getAppVersion(): Promise<string>;
|
||||
|
||||
/*
|
||||
* If it's not expected that capturing the screen will work
|
||||
* with getUserMedia, return a string explaining why not.
|
||||
* Otherwise, return null.
|
||||
*/
|
||||
screenCaptureErrorString(): string {
|
||||
return "Not implemented";
|
||||
}
|
||||
|
||||
/**
|
||||
* Restarts the application, without neccessarily reloading
|
||||
* any application code
|
||||
*/
|
||||
abstract reload();
|
||||
|
||||
supportsAutoLaunch(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
// XXX: Surely this should be a setting like any other?
|
||||
async getAutoLaunchEnabled(): Promise<boolean> {
|
||||
return false;
|
||||
}
|
||||
|
||||
async setAutoLaunchEnabled(enabled: boolean): Promise<void> {
|
||||
throw new Error("Unimplemented");
|
||||
}
|
||||
|
||||
supportsAutoHideMenuBar(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
async getAutoHideMenuBarEnabled(): Promise<boolean> {
|
||||
return false;
|
||||
}
|
||||
|
||||
async setAutoHideMenuBarEnabled(enabled: boolean): Promise<void> {
|
||||
throw new Error("Unimplemented");
|
||||
}
|
||||
|
||||
supportsMinimizeToTray(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
async getMinimizeToTrayEnabled(): Promise<boolean> {
|
||||
return false;
|
||||
}
|
||||
|
||||
async setMinimizeToTrayEnabled(enabled: boolean): Promise<void> {
|
||||
throw new Error("Unimplemented");
|
||||
}
|
||||
|
||||
/**
|
||||
* Get our platform specific EventIndexManager.
|
||||
*
|
||||
* @return {BaseEventIndexManager} The EventIndex manager for our platform,
|
||||
* can be null if the platform doesn't support event indexing.
|
||||
*/
|
||||
getEventIndexingManager(): BaseEventIndexManager | null {
|
||||
return null;
|
||||
}
|
||||
|
||||
setLanguage(preferredLangs: string[]) {}
|
||||
|
||||
protected getSSOCallbackUrl(fragmentAfterLogin: string): URL {
|
||||
const url = new URL(window.location.href);
|
||||
url.hash = fragmentAfterLogin || "";
|
||||
return url;
|
||||
}
|
||||
|
||||
/**
|
||||
* Begin Single Sign On flows.
|
||||
* @param {MatrixClient} mxClient the matrix client using which we should start the flow
|
||||
* @param {"sso"|"cas"} loginType the type of SSO it is, CAS/SSO.
|
||||
* @param {string} fragmentAfterLogin the hash to pass to the app during sso callback.
|
||||
*/
|
||||
startSingleSignOn(mxClient: MatrixClient, loginType: "sso" | "cas", fragmentAfterLogin: string) {
|
||||
// persist hs url and is url for when the user is returned to the app with the login token
|
||||
localStorage.setItem(SSO_HOMESERVER_URL_KEY, mxClient.getHomeserverUrl());
|
||||
if (mxClient.getIdentityServerUrl()) {
|
||||
localStorage.setItem(SSO_ID_SERVER_URL_KEY, mxClient.getIdentityServerUrl());
|
||||
}
|
||||
const callbackUrl = this.getSSOCallbackUrl(fragmentAfterLogin);
|
||||
window.location.href = mxClient.getSsoLoginUrl(callbackUrl.toString(), loginType); // redirect to SSO
|
||||
}
|
||||
|
||||
onKeyDown(ev: KeyboardEvent): boolean {
|
||||
return false; // no shortcuts implemented
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a previously stored pickle key. The pickle key is used for
|
||||
* encrypting libolm objects.
|
||||
* @param {string} userId the user ID for the user that the pickle key is for.
|
||||
* @param {string} userId the device ID that the pickle key is for.
|
||||
* @returns {string|null} the previously stored pickle key, or null if no
|
||||
* pickle key has been stored.
|
||||
*/
|
||||
async getPickleKey(userId: string, deviceId: string): Promise<string | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create and store a pickle key for encrypting libolm objects.
|
||||
* @param {string} userId the user ID for the user that the pickle key is for.
|
||||
* @param {string} userId the device ID that the pickle key is for.
|
||||
* @returns {string|null} the pickle key, or null if the platform does not
|
||||
* support storing pickle keys.
|
||||
*/
|
||||
async createPickleKey(userId: string, deviceId: string): Promise<string | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a previously stored pickle key from storage.
|
||||
* @param {string} userId the user ID for the user that the pickle key is for.
|
||||
* @param {string} userId the device ID that the pickle key is for.
|
||||
*/
|
||||
async destroyPickleKey(userId: string, deviceId: string): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
|
@ -59,8 +59,7 @@ import Modal from './Modal';
|
|||
import * as sdk from './index';
|
||||
import { _t } from './languageHandler';
|
||||
import Matrix from 'matrix-js-sdk';
|
||||
import dis from './dispatcher';
|
||||
import { showUnknownDeviceDialogForCalls } from './cryptodevices';
|
||||
import dis from './dispatcher/dispatcher';
|
||||
import WidgetUtils from './utils/WidgetUtils';
|
||||
import WidgetEchoStore from './stores/WidgetEchoStore';
|
||||
import SettingsStore, { SettingLevel } from './settings/SettingsStore';
|
||||
|
|
@ -119,62 +118,22 @@ function pause(audioId) {
|
|||
}
|
||||
}
|
||||
|
||||
function _reAttemptCall(call) {
|
||||
if (call.direction === 'outbound') {
|
||||
dis.dispatch({
|
||||
action: 'place_call',
|
||||
room_id: call.roomId,
|
||||
type: call.type,
|
||||
});
|
||||
} else {
|
||||
call.answer();
|
||||
}
|
||||
}
|
||||
|
||||
function _setCallListeners(call) {
|
||||
call.on("error", function(err) {
|
||||
console.error("Call error:", err);
|
||||
if (err.code === 'unknown_devices') {
|
||||
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
||||
|
||||
Modal.createTrackedDialog('Call Failed', '', QuestionDialog, {
|
||||
title: _t('Call Failed'),
|
||||
description: _t(
|
||||
"There are unknown sessions in this room: "+
|
||||
"if you proceed without verifying them, it will be "+
|
||||
"possible for someone to eavesdrop on your call.",
|
||||
),
|
||||
button: _t('Review Sessions'),
|
||||
onFinished: function(confirmed) {
|
||||
if (confirmed) {
|
||||
const room = MatrixClientPeg.get().getRoom(call.roomId);
|
||||
showUnknownDeviceDialogForCalls(
|
||||
MatrixClientPeg.get(),
|
||||
room,
|
||||
() => {
|
||||
_reAttemptCall(call);
|
||||
},
|
||||
call.direction === 'outbound' ? _t("Call Anyway") : _t("Answer Anyway"),
|
||||
call.direction === 'outbound' ? _t("Call") : _t("Answer"),
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
if (
|
||||
MatrixClientPeg.get().getTurnServers().length === 0 &&
|
||||
SettingsStore.getValue("fallbackICEServerAllowed") === null
|
||||
) {
|
||||
_showICEFallbackPrompt();
|
||||
return;
|
||||
}
|
||||
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
Modal.createTrackedDialog('Call Failed', '', ErrorDialog, {
|
||||
title: _t('Call Failed'),
|
||||
description: err.message,
|
||||
});
|
||||
if (
|
||||
MatrixClientPeg.get().getTurnServers().length === 0 &&
|
||||
SettingsStore.getValue("fallbackICEServerAllowed") === null
|
||||
) {
|
||||
_showICEFallbackPrompt();
|
||||
return;
|
||||
}
|
||||
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
Modal.createTrackedDialog('Call Failed', '', ErrorDialog, {
|
||||
title: _t('Call Failed'),
|
||||
description: err.message,
|
||||
});
|
||||
});
|
||||
call.on("hangup", function() {
|
||||
_setCallState(undefined, call.roomId, "ended");
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue