OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering

pull/21833/head
Tulir Asokan 2021-02-19 21:47:10 +02:00
parent 2bb7b6535f a794bfdd3e
commit dfcf701449
544 changed files with 43286 additions and 15544 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore
View File

@ -1,4 +1,4 @@
src/component-index.js
test/end-to-end-tests/node_modules/
test/end-to-end-tests/riot/
test/end-to-end-tests/element/
test/end-to-end-tests/synapse/

52
.eslintignore.errorfiles
View File

@ -1,56 +1,16 @@
# autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
src/components/structures/RoomDirectory.js
src/components/structures/RoomStatusBar.js
src/components/structures/ScrollPanel.js
src/components/structures/SearchBox.js
src/components/structures/UploadBar.js
src/components/views/avatars/MemberAvatar.js
src/components/views/create_room/RoomAlias.js
src/components/views/dialogs/SetPasswordDialog.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/NewVersionBar.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/MemberInfo.js
src/components/views/rooms/MemberList.js
src/components/views/rooms/RoomList.js
src/components/views/rooms/RoomPreviewBar.js
src/components/views/rooms/SearchResultTile.js
src/components/views/settings/ChangeAvatar.js
src/components/views/settings/ChangePassword.js
src/components/views/settings/DevicesPanel.js
src/components/views/settings/Notifications.js
src/HtmlUtils.js
src/ImageUtils.js
src/Markdown.js
src/notifications/ContentRules.js
src/notifications/PushRuleVectorState.js
src/PlatformPeg.js
src/rageshake/rageshake.js
src/ratelimitedfunc.js
src/Rooms.js
src/Unread.js
src/utils/DecryptFile.js
src/utils/DirectoryUtils.js
src/utils/DMRoomMap.js
src/utils/FormattingUtils.js
src/utils/MultiInviter.js
src/utils/Receipt.js
src/Velociraptor.js
src/components/structures/RoomDirectory.js
src/components/views/rooms/MemberList.js
src/ratelimitedfunc.js
src/utils/DMRoomMap.js
src/utils/MultiInviter.js
test/components/structures/MessagePanel-test.js
test/components/views/dialogs/InteractiveAuthDialog-test.js
test/mock-clock.js
test/notifications/ContentRules-test.js
test/notifications/PushRuleVectorState-test.js
src/component-index.js
test/end-to-end-tests/node_modules/
test/end-to-end-tests/riot/
test/end-to-end-tests/element/
test/end-to-end-tests/synapse/

2
.eslintrc.js
View File

@ -22,6 +22,8 @@ module.exports = {
"files": ["src/**/*.{ts,tsx}"],
"extends": ["matrix-org/ts"],
"rules": {
// We're okay being explicit at the moment
"@typescript-eslint/no-empty-interface": "off",
// We disable this while we're transitioning
"@typescript-eslint/no-explicit-any": "off",
// We'd rather not do this but we do

827
CHANGELOG.md
View File

@ -1,3 +1,830 @@
Changes in [3.14.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.14.0) (2021-02-16)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.14.0-rc.1...v3.14.0)
* Upgrade to JS SDK 9.7.0
* [Release] Use config for host signup branding
[\#5651](https://github.com/matrix-org/matrix-react-sdk/pull/5651)
Changes in [3.14.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.14.0-rc.1) (2021-02-10)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.13.1...v3.14.0-rc.1)
* Upgrade to JS SDK 9.7.0-rc.1
* Translations update from Weblate
[\#5636](https://github.com/matrix-org/matrix-react-sdk/pull/5636)
* Add host signup modal with iframe
[\#5450](https://github.com/matrix-org/matrix-react-sdk/pull/5450)
* Fix duplication of codeblock elements
[\#5633](https://github.com/matrix-org/matrix-react-sdk/pull/5633)
* Handle undefined call stats
[\#5632](https://github.com/matrix-org/matrix-react-sdk/pull/5632)
* Avoid delayed displaying of sources in source picker
[\#5631](https://github.com/matrix-org/matrix-react-sdk/pull/5631)
* Give breadcrumbs toolbar an accessibility label.
[\#5628](https://github.com/matrix-org/matrix-react-sdk/pull/5628)
* Fix the %s in logs
[\#5627](https://github.com/matrix-org/matrix-react-sdk/pull/5627)
* Fix jumpy notifications settings UI
[\#5625](https://github.com/matrix-org/matrix-react-sdk/pull/5625)
* Improve displaying of code blocks
[\#5559](https://github.com/matrix-org/matrix-react-sdk/pull/5559)
* Fix desktop Matrix screen sharing and add a screen/window picker
[\#5525](https://github.com/matrix-org/matrix-react-sdk/pull/5525)
* Call "MatrixClientPeg.get()" only once in method "findOverrideMuteRule"
[\#5498](https://github.com/matrix-org/matrix-react-sdk/pull/5498)
* Close current modal when session is logged out
[\#5616](https://github.com/matrix-org/matrix-react-sdk/pull/5616)
* Switch room explorer list to CSS grid
[\#5551](https://github.com/matrix-org/matrix-react-sdk/pull/5551)
* Improve SSO login start screen and 3pid invite handling somewhat
[\#5622](https://github.com/matrix-org/matrix-react-sdk/pull/5622)
* Don't jump to bottom on reaction
[\#5621](https://github.com/matrix-org/matrix-react-sdk/pull/5621)
* Fix several profile settings oddities
[\#5620](https://github.com/matrix-org/matrix-react-sdk/pull/5620)
* Add option to hide the stickers button in the composer
[\#5530](https://github.com/matrix-org/matrix-react-sdk/pull/5530)
* Fix confusing right panel button behaviour
[\#5598](https://github.com/matrix-org/matrix-react-sdk/pull/5598)
* Fix jumping timestamp if hovering a message with e2e indicator bar
[\#5601](https://github.com/matrix-org/matrix-react-sdk/pull/5601)
* Fix avatar and trash alignment
[\#5614](https://github.com/matrix-org/matrix-react-sdk/pull/5614)
* Fix z-index of stickerpicker
[\#5617](https://github.com/matrix-org/matrix-react-sdk/pull/5617)
* Fix permalink via parsing for rooms
[\#5615](https://github.com/matrix-org/matrix-react-sdk/pull/5615)
* Fix "Terms and Conditions" checkbox alignment
[\#5613](https://github.com/matrix-org/matrix-react-sdk/pull/5613)
* Fix flair height after accent changes
[\#5611](https://github.com/matrix-org/matrix-react-sdk/pull/5611)
* Iterate Social Logins work around edge cases and branding
[\#5609](https://github.com/matrix-org/matrix-react-sdk/pull/5609)
* Lock widget room ID when added
[\#5607](https://github.com/matrix-org/matrix-react-sdk/pull/5607)
* Better errors for SSO failures
[\#5605](https://github.com/matrix-org/matrix-react-sdk/pull/5605)
* Increase language search bar width
[\#5549](https://github.com/matrix-org/matrix-react-sdk/pull/5549)
* Scroll to bottom on message_sent
[\#5565](https://github.com/matrix-org/matrix-react-sdk/pull/5565)
* Fix new rooms being titled 'Empty Room'
[\#5587](https://github.com/matrix-org/matrix-react-sdk/pull/5587)
* Fix saving the collapsed state of the left panel
[\#5593](https://github.com/matrix-org/matrix-react-sdk/pull/5593)
* Fix app-url hint in the e2e-test run script output
[\#5600](https://github.com/matrix-org/matrix-react-sdk/pull/5600)
* Fix RoomView re-mounting breaking peeking
[\#5602](https://github.com/matrix-org/matrix-react-sdk/pull/5602)
* Tweak a few room ID checks
[\#5592](https://github.com/matrix-org/matrix-react-sdk/pull/5592)
* Remove pills from event permalinks with text
[\#5575](https://github.com/matrix-org/matrix-react-sdk/pull/5575)
Changes in [3.13.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.13.1) (2021-02-04)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.13.0...v3.13.1)
* [Release] Fix z-index of stickerpicker
[\#5618](https://github.com/matrix-org/matrix-react-sdk/pull/5618)
Changes in [3.13.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.13.0) (2021-02-03)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.13.0-rc.1...v3.13.0)
* Upgrade to JS SDK 9.6.0
* [Release] Fix flair height after accent changes
[\#5612](https://github.com/matrix-org/matrix-react-sdk/pull/5612)
* [Release] Iterate Social Logins work around edge cases and branding
[\#5610](https://github.com/matrix-org/matrix-react-sdk/pull/5610)
* [Release] Lock widget room ID when added
[\#5608](https://github.com/matrix-org/matrix-react-sdk/pull/5608)
* [Release] Better errors for SSO failures
[\#5606](https://github.com/matrix-org/matrix-react-sdk/pull/5606)
* [Release] Fix RoomView re-mounting breaking peeking
[\#5603](https://github.com/matrix-org/matrix-react-sdk/pull/5603)
Changes in [3.13.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.13.0-rc.1) (2021-01-29)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.12.1...v3.13.0-rc.1)
* Upgrade to JS SDK 9.6.0-rc.1
* Translations update from Weblate
[\#5597](https://github.com/matrix-org/matrix-react-sdk/pull/5597)
* Support managed hybrid widgets from config
[\#5596](https://github.com/matrix-org/matrix-react-sdk/pull/5596)
* Add managed hybrid call widgets when supported
[\#5594](https://github.com/matrix-org/matrix-react-sdk/pull/5594)
* Tweak mobile guide toast copy
[\#5595](https://github.com/matrix-org/matrix-react-sdk/pull/5595)
* Improve SSO auth flow
[\#5578](https://github.com/matrix-org/matrix-react-sdk/pull/5578)
* Add optional mobile guide toast
[\#5586](https://github.com/matrix-org/matrix-react-sdk/pull/5586)
* Fix invisible text after logging out in the dark theme
[\#5588](https://github.com/matrix-org/matrix-react-sdk/pull/5588)
* Fix escape for cancelling replies
[\#5591](https://github.com/matrix-org/matrix-react-sdk/pull/5591)
* Update widget-api to beta.12
[\#5589](https://github.com/matrix-org/matrix-react-sdk/pull/5589)
* Add commands for DM conversion
[\#5540](https://github.com/matrix-org/matrix-react-sdk/pull/5540)
* Run a UI refresh over the OIDC Exchange confirmation dialog
[\#5580](https://github.com/matrix-org/matrix-react-sdk/pull/5580)
* Allow stickerpickers the legacy "visibility" capability
[\#5581](https://github.com/matrix-org/matrix-react-sdk/pull/5581)
* Hide local video if it is muted
[\#5529](https://github.com/matrix-org/matrix-react-sdk/pull/5529)
* Don't use name width in reply thread for IRC layout
[\#5518](https://github.com/matrix-org/matrix-react-sdk/pull/5518)
* Update code_style.md
[\#5554](https://github.com/matrix-org/matrix-react-sdk/pull/5554)
* Fix Czech capital letters like ŠČŘ...
[\#5569](https://github.com/matrix-org/matrix-react-sdk/pull/5569)
* Add optional search shortcut
[\#5548](https://github.com/matrix-org/matrix-react-sdk/pull/5548)
* Fix Sudden 'find a room' UI shows up when the only room moves to favourites
[\#5584](https://github.com/matrix-org/matrix-react-sdk/pull/5584)
* Increase PersistedElement's z-index
[\#5568](https://github.com/matrix-org/matrix-react-sdk/pull/5568)
* Remove check that prevents Jitsi widgets from being unpinned
[\#5582](https://github.com/matrix-org/matrix-react-sdk/pull/5582)
* Fix Jitsi widgets causing localized tile crashes
[\#5583](https://github.com/matrix-org/matrix-react-sdk/pull/5583)
* Log candidates for calls
[\#5573](https://github.com/matrix-org/matrix-react-sdk/pull/5573)
* Upgrade deps 2021-01
[\#5579](https://github.com/matrix-org/matrix-react-sdk/pull/5579)
* Fix "Continuing without email" dialog bug
[\#5566](https://github.com/matrix-org/matrix-react-sdk/pull/5566)
* Require registration for verification actions
[\#5574](https://github.com/matrix-org/matrix-react-sdk/pull/5574)
* Don't play the hangup sound when the call is answered from elsewhere
[\#5572](https://github.com/matrix-org/matrix-react-sdk/pull/5572)
* Move to newer base image for end-to-end tests
[\#5570](https://github.com/matrix-org/matrix-react-sdk/pull/5570)
* Update widgets in the room upon join
[\#5564](https://github.com/matrix-org/matrix-react-sdk/pull/5564)
* Update AuxPanel and related buttons when widgets change or on reload
[\#5563](https://github.com/matrix-org/matrix-react-sdk/pull/5563)
* Add VoIP user mapper
[\#5560](https://github.com/matrix-org/matrix-react-sdk/pull/5560)
* Improve styling of SSO Buttons for multiple IdPs
[\#5558](https://github.com/matrix-org/matrix-react-sdk/pull/5558)
* Fixes for the general tab in the room dialog
[\#5522](https://github.com/matrix-org/matrix-react-sdk/pull/5522)
* fix issue 16226 to allow switching back to default HS.
[\#5561](https://github.com/matrix-org/matrix-react-sdk/pull/5561)
* Support room-defined widget layouts
[\#5553](https://github.com/matrix-org/matrix-react-sdk/pull/5553)
* Change a bunch of strings from Recovery Key/Phrase to Security Key/Phrase
[\#5533](https://github.com/matrix-org/matrix-react-sdk/pull/5533)
* Give a bigger target area to AppsDrawer vertical resizer
[\#5557](https://github.com/matrix-org/matrix-react-sdk/pull/5557)
* Fix minimized left panel avatar alignment
[\#5493](https://github.com/matrix-org/matrix-react-sdk/pull/5493)
* Ensure component index has been written before renaming
[\#5556](https://github.com/matrix-org/matrix-react-sdk/pull/5556)
* Fixed continue button while selecting home-server
[\#5552](https://github.com/matrix-org/matrix-react-sdk/pull/5552)
* Wire up MSC2931 widget navigation
[\#5527](https://github.com/matrix-org/matrix-react-sdk/pull/5527)
* Various fixes for Bridge Info page (MSC2346)
[\#5454](https://github.com/matrix-org/matrix-react-sdk/pull/5454)
* Use room-specific listeners for message preview and community prototype
[\#5547](https://github.com/matrix-org/matrix-react-sdk/pull/5547)
* Fix some misc. React warnings when viewing timeline
[\#5546](https://github.com/matrix-org/matrix-react-sdk/pull/5546)
* Use device storage for allowed widgets if account data not supported
[\#5544](https://github.com/matrix-org/matrix-react-sdk/pull/5544)
* Fix incoming call box on dark theme
[\#5542](https://github.com/matrix-org/matrix-react-sdk/pull/5542)
* Convert DMRoomMap to typescript
[\#5541](https://github.com/matrix-org/matrix-react-sdk/pull/5541)
* Add in-call dialpad for DTMF sending
[\#5532](https://github.com/matrix-org/matrix-react-sdk/pull/5532)
Changes in [3.12.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.12.1) (2021-01-26)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.12.0...v3.12.1)
* Upgrade to JS SDK 9.5.1
Changes in [3.12.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.12.0) (2021-01-18)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.12.0-rc.1...v3.12.0)
* Upgrade to JS SDK 9.5.0
* Fix incoming call box on dark theme
[\#5543](https://github.com/matrix-org/matrix-react-sdk/pull/5543)
Changes in [3.12.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.12.0-rc.1) (2021-01-13)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.11.1...v3.12.0-rc.1)
* Upgrade to JS SDK 9.5.0-rc.1
* Fix soft crash on soft logout page
[\#5539](https://github.com/matrix-org/matrix-react-sdk/pull/5539)
* Translations update from Weblate
[\#5538](https://github.com/matrix-org/matrix-react-sdk/pull/5538)
* Run TypeScript tests
[\#5537](https://github.com/matrix-org/matrix-react-sdk/pull/5537)
* Add a basic widget explorer to devtools (per-room)
[\#5528](https://github.com/matrix-org/matrix-react-sdk/pull/5528)
* Add <input type="password"> to security key field
[\#5534](https://github.com/matrix-org/matrix-react-sdk/pull/5534)
* Fix avatar upload prompt/tooltip floating wrong and permissions
[\#5526](https://github.com/matrix-org/matrix-react-sdk/pull/5526)
* Add a dialpad UI for PSTN lookup
[\#5523](https://github.com/matrix-org/matrix-react-sdk/pull/5523)
* Basic call transfer initiation support
[\#5494](https://github.com/matrix-org/matrix-react-sdk/pull/5494)
* Fix #15988
[\#5524](https://github.com/matrix-org/matrix-react-sdk/pull/5524)
* Bump node-notifier from 8.0.0 to 8.0.1
[\#5520](https://github.com/matrix-org/matrix-react-sdk/pull/5520)
* Use TypeScript source for development, swap to build during release
[\#5503](https://github.com/matrix-org/matrix-react-sdk/pull/5503)
* Look for emoji in the body that will be displayed
[\#5517](https://github.com/matrix-org/matrix-react-sdk/pull/5517)
* Bump ini from 1.3.5 to 1.3.7
[\#5486](https://github.com/matrix-org/matrix-react-sdk/pull/5486)
* Recognise `*.element.io` links as Element permalinks
[\#5514](https://github.com/matrix-org/matrix-react-sdk/pull/5514)
* Fixes for call UI
[\#5509](https://github.com/matrix-org/matrix-react-sdk/pull/5509)
* Add a snowfall chat effect (with /snowfall command)
[\#5511](https://github.com/matrix-org/matrix-react-sdk/pull/5511)
* fireworks effect
[\#5507](https://github.com/matrix-org/matrix-react-sdk/pull/5507)
* Don't play call end sound for calls that never started
[\#5506](https://github.com/matrix-org/matrix-react-sdk/pull/5506)
* Add /tableflip slash command
[\#5485](https://github.com/matrix-org/matrix-react-sdk/pull/5485)
* Import from src in IncomingCallBox.tsx
[\#5504](https://github.com/matrix-org/matrix-react-sdk/pull/5504)
* Social Login support both https and mxc icons
[\#5499](https://github.com/matrix-org/matrix-react-sdk/pull/5499)
* Fix padding in confirmation email registration prompt
[\#5501](https://github.com/matrix-org/matrix-react-sdk/pull/5501)
* Fix room list help prompt alignment
[\#5500](https://github.com/matrix-org/matrix-react-sdk/pull/5500)
Changes in [3.11.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.11.1) (2020-12-21)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.11.0...v3.11.1)
* Upgrade JS SDK to 9.4.1
Changes in [3.11.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.11.0) (2020-12-21)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.11.0-rc.2...v3.11.0)
* Upgrade JS SDK to 9.4.0
* [Release] Look for emoji in the body that will be displayed
[\#5519](https://github.com/matrix-org/matrix-react-sdk/pull/5519)
* [Release] Recognise `*.element.io` links as Element permalinks
[\#5516](https://github.com/matrix-org/matrix-react-sdk/pull/5516)
* [Release] Fixes for call UI
[\#5513](https://github.com/matrix-org/matrix-react-sdk/pull/5513)
* [RELEASE] Add a snowfall chat effect (with /snowfall command)
[\#5512](https://github.com/matrix-org/matrix-react-sdk/pull/5512)
* [Release] Fix padding in confirmation email registration prompt
[\#5502](https://github.com/matrix-org/matrix-react-sdk/pull/5502)
Changes in [3.11.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.11.0-rc.2) (2020-12-16)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.11.0-rc.1...v3.11.0-rc.2)
* Upgrade JS SDK to 9.4.0-rc.2
Changes in [3.11.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.11.0-rc.1) (2020-12-16)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.10.0...v3.11.0-rc.1)
* Upgrade JS SDK to 9.4.0-rc.1
* Translations update from Weblate
[\#5497](https://github.com/matrix-org/matrix-react-sdk/pull/5497)
* Unregister from the dispatcher in CallHandler
[\#5495](https://github.com/matrix-org/matrix-react-sdk/pull/5495)
* Better adhere to MSC process
[\#5496](https://github.com/matrix-org/matrix-react-sdk/pull/5496)
* Use random pickle key on all platforms
[\#5483](https://github.com/matrix-org/matrix-react-sdk/pull/5483)
* Fix mx_MemberList icons
[\#5492](https://github.com/matrix-org/matrix-react-sdk/pull/5492)
* Convert InviteDialog to TypeScript
[\#5491](https://github.com/matrix-org/matrix-react-sdk/pull/5491)
* Add keyboard shortcut for emoji reactions
[\#5425](https://github.com/matrix-org/matrix-react-sdk/pull/5425)
* Run chat effects on events sent by widgets too
[\#5488](https://github.com/matrix-org/matrix-react-sdk/pull/5488)
* Fix being unable to pin widgets
[\#5487](https://github.com/matrix-org/matrix-react-sdk/pull/5487)
* Line 1 / 2 Support
[\#5468](https://github.com/matrix-org/matrix-react-sdk/pull/5468)
* Remove impossible labs feature: sending hidden read receipts
[\#5484](https://github.com/matrix-org/matrix-react-sdk/pull/5484)
* Fix height of Remote Video in call
[\#5456](https://github.com/matrix-org/matrix-react-sdk/pull/5456)
* Add UI for hold functionality
[\#5446](https://github.com/matrix-org/matrix-react-sdk/pull/5446)
* Allow SearchBox to expand to fill width
[\#5411](https://github.com/matrix-org/matrix-react-sdk/pull/5411)
* Use room alias in generated permalink for rooms
[\#5451](https://github.com/matrix-org/matrix-react-sdk/pull/5451)
* Only show confetti if the current room is receiving an appropriate event
[\#5482](https://github.com/matrix-org/matrix-react-sdk/pull/5482)
* Throttle RoomState.members handler to improve performance
[\#5481](https://github.com/matrix-org/matrix-react-sdk/pull/5481)
* Handle manual hs urls better for the server picker
[\#5477](https://github.com/matrix-org/matrix-react-sdk/pull/5477)
* Add Olm as a dev dependency for types
[\#5479](https://github.com/matrix-org/matrix-react-sdk/pull/5479)
* Hide Invite to this room CTA if no permission
[\#5476](https://github.com/matrix-org/matrix-react-sdk/pull/5476)
* Fix width of underline in server picker dialog
[\#5478](https://github.com/matrix-org/matrix-react-sdk/pull/5478)
* Fix confetti room unread state check
[\#5475](https://github.com/matrix-org/matrix-react-sdk/pull/5475)
* Show confetti in a chat room on command or emoji
[\#5140](https://github.com/matrix-org/matrix-react-sdk/pull/5140)
* Fix inverted settings default value
[\#5391](https://github.com/matrix-org/matrix-react-sdk/pull/5391)
* Improve usability of the Server Picker Dialog
[\#5474](https://github.com/matrix-org/matrix-react-sdk/pull/5474)
* Fix typos in some strings
[\#5473](https://github.com/matrix-org/matrix-react-sdk/pull/5473)
* Bump highlight.js from 10.1.2 to 10.4.1
[\#5472](https://github.com/matrix-org/matrix-react-sdk/pull/5472)
* Remove old app test script path
[\#5471](https://github.com/matrix-org/matrix-react-sdk/pull/5471)
* add support for giving reason when redacting
[\#5260](https://github.com/matrix-org/matrix-react-sdk/pull/5260)
* Add support for Netlify to fetchdep script
[\#5469](https://github.com/matrix-org/matrix-react-sdk/pull/5469)
* Nest other layers inside on automation
[\#5467](https://github.com/matrix-org/matrix-react-sdk/pull/5467)
* Rebrand various CI scripts and modules
[\#5466](https://github.com/matrix-org/matrix-react-sdk/pull/5466)
* Add more widget sanity checking
[\#5462](https://github.com/matrix-org/matrix-react-sdk/pull/5462)
* Fix React complaining about unknown DOM props
[\#5465](https://github.com/matrix-org/matrix-react-sdk/pull/5465)
* Jump to home page when leaving a room
[\#5464](https://github.com/matrix-org/matrix-react-sdk/pull/5464)
* Fix SSO buttons for Social Logins
[\#5463](https://github.com/matrix-org/matrix-react-sdk/pull/5463)
* Social Login and login delight tweaks
[\#5426](https://github.com/matrix-org/matrix-react-sdk/pull/5426)
Changes in [3.10.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.10.0) (2020-12-07)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.10.0-rc.1...v3.10.0)
* Upgrade to JS SDK 9.3.0
Changes in [3.10.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.10.0-rc.1) (2020-12-02)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.9.0...v3.10.0-rc.1)
* Upgrade to JS SDK 9.3.0-rc.1
* Translations update from Weblate
[\#5461](https://github.com/matrix-org/matrix-react-sdk/pull/5461)
* Fix VoIP call plinth on dark theme
[\#5460](https://github.com/matrix-org/matrix-react-sdk/pull/5460)
* Add sanity checking around widget pinning
[\#5459](https://github.com/matrix-org/matrix-react-sdk/pull/5459)
* Update i18n for Appearance User Settings
[\#5457](https://github.com/matrix-org/matrix-react-sdk/pull/5457)
* Only show 'answered elsewhere' if we tried to answer too
[\#5455](https://github.com/matrix-org/matrix-react-sdk/pull/5455)
* Fixed Avatar for 3PID invites
[\#5442](https://github.com/matrix-org/matrix-react-sdk/pull/5442)
* Slightly better error if we can't capture user media
[\#5449](https://github.com/matrix-org/matrix-react-sdk/pull/5449)
* Make it possible in-code to hide rooms from the room list
[\#5445](https://github.com/matrix-org/matrix-react-sdk/pull/5445)
* Fix the stickerpicker
[\#5447](https://github.com/matrix-org/matrix-react-sdk/pull/5447)
* Add live password validation to change password dialog
[\#5436](https://github.com/matrix-org/matrix-react-sdk/pull/5436)
* LaTeX rendering in element-web using KaTeX
[\#5244](https://github.com/matrix-org/matrix-react-sdk/pull/5244)
* Add lifecycle customisation point after logout
[\#5448](https://github.com/matrix-org/matrix-react-sdk/pull/5448)
* Simplify UserMenu for Guests as they can't use most of the options
[\#5421](https://github.com/matrix-org/matrix-react-sdk/pull/5421)
* Fix known issues with modal widgets
[\#5444](https://github.com/matrix-org/matrix-react-sdk/pull/5444)
* Fix existing widgets not having approved capabilities for their function
[\#5443](https://github.com/matrix-org/matrix-react-sdk/pull/5443)
* Use the WidgetDriver to run OIDC requests
[\#5440](https://github.com/matrix-org/matrix-react-sdk/pull/5440)
* Add a customisation point for widget permissions and fix amnesia issues
[\#5439](https://github.com/matrix-org/matrix-react-sdk/pull/5439)
* Fix Widget event notification text including spurious space
[\#5441](https://github.com/matrix-org/matrix-react-sdk/pull/5441)
* Move call listener out of MatrixChat
[\#5438](https://github.com/matrix-org/matrix-react-sdk/pull/5438)
* New Look in-Call View
[\#5432](https://github.com/matrix-org/matrix-react-sdk/pull/5432)
* Support arbitrary widgets sticking to the screen + sending stickers
[\#5435](https://github.com/matrix-org/matrix-react-sdk/pull/5435)
* Auth typescripting and validation tweaks
[\#5433](https://github.com/matrix-org/matrix-react-sdk/pull/5433)
* Add new widget API actions for changing rooms and sending/receiving events
[\#5385](https://github.com/matrix-org/matrix-react-sdk/pull/5385)
* Revert room header click behaviour to opening room settings
[\#5434](https://github.com/matrix-org/matrix-react-sdk/pull/5434)
* Add option to send/edit a message with Ctrl + Enter / Command + Enter
[\#5160](https://github.com/matrix-org/matrix-react-sdk/pull/5160)
* Add Analytics instrumentation to the Homepage
[\#5409](https://github.com/matrix-org/matrix-react-sdk/pull/5409)
* Fix encrypted video playback in Chrome-based browsers
[\#5430](https://github.com/matrix-org/matrix-react-sdk/pull/5430)
* Add border-radius for video
[\#5333](https://github.com/matrix-org/matrix-react-sdk/pull/5333)
* Push name to the end, near text, in IRC layout
[\#5166](https://github.com/matrix-org/matrix-react-sdk/pull/5166)
* Disable notifications for the room you have recently been active in
[\#5325](https://github.com/matrix-org/matrix-react-sdk/pull/5325)
* Search through the list of unfiltered rooms rather than the rooms in the
state which are already filtered by the search text
[\#5331](https://github.com/matrix-org/matrix-react-sdk/pull/5331)
* Lighten blockquote colour in dark mode
[\#5353](https://github.com/matrix-org/matrix-react-sdk/pull/5353)
* Specify community description img must be mxc urls
[\#5364](https://github.com/matrix-org/matrix-react-sdk/pull/5364)
* Add keyboard shortcut to close the current conversation
[\#5253](https://github.com/matrix-org/matrix-react-sdk/pull/5253)
* Redirect user home from auth screens if they are already logged in
[\#5423](https://github.com/matrix-org/matrix-react-sdk/pull/5423)
Changes in [3.9.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.9.0) (2020-11-23)
===================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.9.0-rc.1...v3.9.0)
* Upgrade JS SDK to 9.2.0
* [Release] Fix encrypted video playback in Chrome-based browsers
[\#5431](https://github.com/matrix-org/matrix-react-sdk/pull/5431)
Changes in [3.9.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.9.0-rc.1) (2020-11-18)
=============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.8.0...v3.9.0-rc.1)
* Upgrade JS SDK to 9.2.0-rc.1
* Translations update from Weblate
[\#5429](https://github.com/matrix-org/matrix-react-sdk/pull/5429)
* Fix message search summary text
[\#5428](https://github.com/matrix-org/matrix-react-sdk/pull/5428)
* Shrink new room intro top margin to half for encryption bubble tile
[\#5427](https://github.com/matrix-org/matrix-react-sdk/pull/5427)
* Small delight tweaks to improve rough corners in the app
[\#5418](https://github.com/matrix-org/matrix-react-sdk/pull/5418)
* Fix DM logic to always pick a more reliable DM room
[\#5424](https://github.com/matrix-org/matrix-react-sdk/pull/5424)
* Update styling of the Analytics toast
[\#5408](https://github.com/matrix-org/matrix-react-sdk/pull/5408)
* Fix vertical centering of the Homepage and button layout
[\#5420](https://github.com/matrix-org/matrix-react-sdk/pull/5420)
* Fix BaseAvatar sometimes messing up and duplicating the url
[\#5422](https://github.com/matrix-org/matrix-react-sdk/pull/5422)
* Disable buttons when required by MSC2790
[\#5412](https://github.com/matrix-org/matrix-react-sdk/pull/5412)
* Fix drag drop file to upload for Safari
[\#5414](https://github.com/matrix-org/matrix-react-sdk/pull/5414)
* Fix poorly i18n'd string
[\#5416](https://github.com/matrix-org/matrix-react-sdk/pull/5416)
* Fix the feedback not closing without feedback/countly
[\#5417](https://github.com/matrix-org/matrix-react-sdk/pull/5417)
* Fix New Room Intro invite to this room button
[\#5419](https://github.com/matrix-org/matrix-react-sdk/pull/5419)
* Change how we expose Role in User Info and hide in DMs
[\#5413](https://github.com/matrix-org/matrix-react-sdk/pull/5413)
* Disallow sending of empty messages
[\#5390](https://github.com/matrix-org/matrix-react-sdk/pull/5390)
* hide some validation tooltips if fields are valid.
[\#5403](https://github.com/matrix-org/matrix-react-sdk/pull/5403)
* Improvements around new room empty space interactions
[\#5398](https://github.com/matrix-org/matrix-react-sdk/pull/5398)
* Implement call hold
[\#5366](https://github.com/matrix-org/matrix-react-sdk/pull/5366)
* Fix Skeleton UI showing up when not intended.
[\#5407](https://github.com/matrix-org/matrix-react-sdk/pull/5407)
* Close context menu when user clicks the Home button
[\#5406](https://github.com/matrix-org/matrix-react-sdk/pull/5406)
* Skip e2ee warn logout prompt if user has no megolm sessions to lose
[\#5410](https://github.com/matrix-org/matrix-react-sdk/pull/5410)
* Allow country names to be translated
[\#5405](https://github.com/matrix-org/matrix-react-sdk/pull/5405)
* Support thirdparty lookup for phone numbers
[\#5396](https://github.com/matrix-org/matrix-react-sdk/pull/5396)
* Change "Password" to "New Password"
[\#5371](https://github.com/matrix-org/matrix-react-sdk/pull/5371)
* Add customisation point for dehydration key
[\#5397](https://github.com/matrix-org/matrix-react-sdk/pull/5397)
* Rebrand Riot -> Element in the permalink classes
[\#5386](https://github.com/matrix-org/matrix-react-sdk/pull/5386)
* Invite / Create DM UX tweaks
[\#5387](https://github.com/matrix-org/matrix-react-sdk/pull/5387)
* Tweaks to toasts and post-registration landing
[\#5383](https://github.com/matrix-org/matrix-react-sdk/pull/5383)
Changes in [3.8.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.8.0) (2020-11-09)
===================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.8.0-rc.1...v3.8.0)
* Upgrade JS SDK to 9.1.0
Changes in [3.8.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.8.0-rc.1) (2020-11-04)
=============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.7.1...v3.8.0-rc.1)
* Upgrade JS SDK to 9.1.0-rc.1
* Log when saving profile
[\#5394](https://github.com/matrix-org/matrix-react-sdk/pull/5394)
* Translations update from Weblate
[\#5395](https://github.com/matrix-org/matrix-react-sdk/pull/5395)
* Hide prompt to add email for notifications if 3pid ui feature is off
[\#5392](https://github.com/matrix-org/matrix-react-sdk/pull/5392)
* Fix room list message preview copy for hangup events
[\#5388](https://github.com/matrix-org/matrix-react-sdk/pull/5388)
* Track UISIs as Countly Events
[\#5382](https://github.com/matrix-org/matrix-react-sdk/pull/5382)
* Don't let users accidentally redact ACL events
[\#5384](https://github.com/matrix-org/matrix-react-sdk/pull/5384)
* Two more easy files to remove from eslintignore
[\#5378](https://github.com/matrix-org/matrix-react-sdk/pull/5378)
* Fix Widget OpenID Permissions for realsies
[\#5381](https://github.com/matrix-org/matrix-react-sdk/pull/5381)
* Fix regression with OpenID permissions on widgets
[\#5380](https://github.com/matrix-org/matrix-react-sdk/pull/5380)
* Fix room directory events happening in the wrong order for Funnels
[\#5379](https://github.com/matrix-org/matrix-react-sdk/pull/5379)
* Remove a couple more files from eslintignore
[\#5377](https://github.com/matrix-org/matrix-react-sdk/pull/5377)
* Fix countly method bindings and errors
[\#5376](https://github.com/matrix-org/matrix-react-sdk/pull/5376)
* Fix a bunch of silly lint errors
[\#5375](https://github.com/matrix-org/matrix-react-sdk/pull/5375)
* Typescript: ImageUtils
[\#5374](https://github.com/matrix-org/matrix-react-sdk/pull/5374)
* Convert AuxPanel to TypeScript
[\#5373](https://github.com/matrix-org/matrix-react-sdk/pull/5373)
* Only pass metrics if they exist otherwise Countly will be unhappy!
[\#5372](https://github.com/matrix-org/matrix-react-sdk/pull/5372)
* Fix CountlyAnalytics NPE on MatrixClientPeg
[\#5370](https://github.com/matrix-org/matrix-react-sdk/pull/5370)
* fix CountlyAnalytics canEnable on wrong target
[\#5369](https://github.com/matrix-org/matrix-react-sdk/pull/5369)
* Initial Countly work
[\#5365](https://github.com/matrix-org/matrix-react-sdk/pull/5365)
* Fix videos not playing in non-encrypted rooms
[\#5368](https://github.com/matrix-org/matrix-react-sdk/pull/5368)
* Fix custom tag layout which regressed in #5309
[\#5367](https://github.com/matrix-org/matrix-react-sdk/pull/5367)
* Watch replyToEvent at RoomView to prevent races
[\#5360](https://github.com/matrix-org/matrix-react-sdk/pull/5360)
* Add a UI Feature flag for room history settings
[\#5362](https://github.com/matrix-org/matrix-react-sdk/pull/5362)
* Hide inline images when preference disabled
[\#5361](https://github.com/matrix-org/matrix-react-sdk/pull/5361)
* Fix React warning by moving handler to each button
[\#5359](https://github.com/matrix-org/matrix-react-sdk/pull/5359)
* Do not preload encrypted videos|images unless autoplay or thumbnailing is on
[\#5352](https://github.com/matrix-org/matrix-react-sdk/pull/5352)
* Fix theme variable passed to Jitsi
[\#5357](https://github.com/matrix-org/matrix-react-sdk/pull/5357)
* docs: added comment explanation
[\#5349](https://github.com/matrix-org/matrix-react-sdk/pull/5349)
* Modal Widgets - MSC2790
[\#5252](https://github.com/matrix-org/matrix-react-sdk/pull/5252)
* Widgets fixes
[\#5350](https://github.com/matrix-org/matrix-react-sdk/pull/5350)
* Fix User Menu avatar colouring being based on wrong string
[\#5348](https://github.com/matrix-org/matrix-react-sdk/pull/5348)
* Support 'answered elsewhere'
[\#5345](https://github.com/matrix-org/matrix-react-sdk/pull/5345)
Changes in [3.7.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.7.1) (2020-10-28)
===================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.7.0...v3.7.1)
* Upgrade JS SDK to 9.0.1
* [Release] Fix theme variable passed to Jitsi
[\#5358](https://github.com/matrix-org/matrix-react-sdk/pull/5358)
* [Release] Widget fixes
[\#5351](https://github.com/matrix-org/matrix-react-sdk/pull/5351)
Changes in [3.7.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.7.0) (2020-10-26)
===================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.7.0-rc.2...v3.7.0)
* Upgrade JS SDK to 9.0.0
Changes in [3.7.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.7.0-rc.2) (2020-10-21)
=============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.7.0-rc.1...v3.7.0-rc.2)
* Fix JS SDK dependency to use 9.0.0-rc.1 as intended
Changes in [3.7.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.7.0-rc.1) (2020-10-21)
=============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.6.1...v3.7.0-rc.1)
* Upgrade JS SDK to 9.0.0-rc.1
* Update Weblate URL
[\#5346](https://github.com/matrix-org/matrix-react-sdk/pull/5346)
* Translations update from Weblate
[\#5347](https://github.com/matrix-org/matrix-react-sdk/pull/5347)
* Left Panel Widget support
[\#5247](https://github.com/matrix-org/matrix-react-sdk/pull/5247)
* Pinned widgets work
[\#5266](https://github.com/matrix-org/matrix-react-sdk/pull/5266)
* Convert resizer to Typescript
[\#5343](https://github.com/matrix-org/matrix-react-sdk/pull/5343)
* Hide filtering microcopy when left panel is minimized
[\#5338](https://github.com/matrix-org/matrix-react-sdk/pull/5338)
* Skip editor confirmation of upgrades
[\#5344](https://github.com/matrix-org/matrix-react-sdk/pull/5344)
* Spec compliance, /search doesn't have to return results
[\#5337](https://github.com/matrix-org/matrix-react-sdk/pull/5337)
* Fix excessive hosting link padding
[\#5336](https://github.com/matrix-org/matrix-react-sdk/pull/5336)
* Adjust for new widget messaging APIs
[\#5341](https://github.com/matrix-org/matrix-react-sdk/pull/5341)
* Fix case where sublist context menu missed an update
[\#5339](https://github.com/matrix-org/matrix-react-sdk/pull/5339)
* Add analytics to VoIP
[\#5340](https://github.com/matrix-org/matrix-react-sdk/pull/5340)
* Fix Jitsi OpenIDC auth
[\#5334](https://github.com/matrix-org/matrix-react-sdk/pull/5334)
* Support rejecting calls
[\#5324](https://github.com/matrix-org/matrix-react-sdk/pull/5324)
* Don't show admin tooling if we're not in the room
[\#5330](https://github.com/matrix-org/matrix-react-sdk/pull/5330)
* Show Integrations error if iframe failed to load too
[\#5328](https://github.com/matrix-org/matrix-react-sdk/pull/5328)
* Add security customisation points
[\#5327](https://github.com/matrix-org/matrix-react-sdk/pull/5327)
* Discard all mx_fadable legacy cruft which is totally useless
[\#5326](https://github.com/matrix-org/matrix-react-sdk/pull/5326)
* Fix background-image: url(null) for backdrop filter
[\#5319](https://github.com/matrix-org/matrix-react-sdk/pull/5319)
* Make the ACL update message less noisy
[\#5316](https://github.com/matrix-org/matrix-react-sdk/pull/5316)
* Fix aspect ratio of avatar before clicking Save
[\#5318](https://github.com/matrix-org/matrix-react-sdk/pull/5318)
* Don't supply popout widgets with widget parameters
[\#5323](https://github.com/matrix-org/matrix-react-sdk/pull/5323)
* Changed rainbow algorithm
[\#5301](https://github.com/matrix-org/matrix-react-sdk/pull/5301)
* Renamed TagPanel and TagOrderStore
[\#5309](https://github.com/matrix-org/matrix-react-sdk/pull/5309)
* Fix/clarify boolean logic for reaction previews
[\#5321](https://github.com/matrix-org/matrix-react-sdk/pull/5321)
* Support glare for VoIP calls
[\#5311](https://github.com/matrix-org/matrix-react-sdk/pull/5311)
* Round of Typescript conversions
[\#5314](https://github.com/matrix-org/matrix-react-sdk/pull/5314)
* Fix broken rendering of Room Create when showHiddenEvents enabled
[\#5317](https://github.com/matrix-org/matrix-react-sdk/pull/5317)
* Improve LHS resize performance and tidy stale props&classes
[\#5313](https://github.com/matrix-org/matrix-react-sdk/pull/5313)
* event-index: Pass the user/device id pair when initializing the event index.
[\#5312](https://github.com/matrix-org/matrix-react-sdk/pull/5312)
* Fix various aspects of (jitsi) widgets
[\#5315](https://github.com/matrix-org/matrix-react-sdk/pull/5315)
* Fix rogue (partial) call bar
[\#5310](https://github.com/matrix-org/matrix-react-sdk/pull/5310)
* Rewrite call state machine
[\#5308](https://github.com/matrix-org/matrix-react-sdk/pull/5308)
* Convert `src/SecurityManager.js` to TypeScript
[\#5307](https://github.com/matrix-org/matrix-react-sdk/pull/5307)
* Fix templating for v1 jitsi widgets
[\#5305](https://github.com/matrix-org/matrix-react-sdk/pull/5305)
* Use new preparing event for widget communications
[\#5303](https://github.com/matrix-org/matrix-react-sdk/pull/5303)
* Fix parsing issue in event tile preview for appearance tab
[\#5302](https://github.com/matrix-org/matrix-react-sdk/pull/5302)
* Track replyToEvent along with Cider state & history
[\#5284](https://github.com/matrix-org/matrix-react-sdk/pull/5284)
* Roving Tab Index should not interfere with inputs
[\#5299](https://github.com/matrix-org/matrix-react-sdk/pull/5299)
* Visual tweaks from 2020-10-06 polishing
[\#5298](https://github.com/matrix-org/matrix-react-sdk/pull/5298)
* Convert auth lifecycle to TS, remove dead ILAG code
[\#5296](https://github.com/matrix-org/matrix-react-sdk/pull/5296)
Changes in [3.6.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.6.1) (2020-10-20)
===================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.6.0...v3.6.1)
* [Release] Adjust for new widget messaging APIs
[\#5342](https://github.com/matrix-org/matrix-react-sdk/pull/5342)
* [Release] Fix Jitsi OpenIDC auth
[\#5335](https://github.com/matrix-org/matrix-react-sdk/pull/5335)
Changes in [3.6.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.6.0) (2020-10-12)
===================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.6.0-rc.1...v3.6.0)
* Upgrade JS SDK to 8.5.0
* [Release] Fix templating for v1 jitsi widgets
[\#5306](https://github.com/matrix-org/matrix-react-sdk/pull/5306)
* [Release] Use new preparing event for widget communications
[\#5304](https://github.com/matrix-org/matrix-react-sdk/pull/5304)
Changes in [3.6.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.6.0-rc.1) (2020-10-07)
=============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.5.0...v3.6.0-rc.1)
* Upgrade JS SDK to 8.5.0-rc.1
* Update from Weblate
[\#5297](https://github.com/matrix-org/matrix-react-sdk/pull/5297)
* Fix edited replies being wrongly treated as big emoji
[\#5295](https://github.com/matrix-org/matrix-react-sdk/pull/5295)
* Fix StopGapWidget infinitely recursing
[\#5294](https://github.com/matrix-org/matrix-react-sdk/pull/5294)
* Fix editing and redactions not updating the Reply Thread
[\#5281](https://github.com/matrix-org/matrix-react-sdk/pull/5281)
* Hide Jump to Read Receipt button for users who have not yet sent an RR
[\#5282](https://github.com/matrix-org/matrix-react-sdk/pull/5282)
* fix img tags not always being rendered correctly
[\#5279](https://github.com/matrix-org/matrix-react-sdk/pull/5279)
* Hopefully fix righhtpanel crash
[\#5293](https://github.com/matrix-org/matrix-react-sdk/pull/5293)
* Fix naive pinning limit and app tile widgetMessaging NPE
[\#5283](https://github.com/matrix-org/matrix-react-sdk/pull/5283)
* Show server errors from saving profile settings
[\#5272](https://github.com/matrix-org/matrix-react-sdk/pull/5272)
* Update copy for `redact` permission
[\#5273](https://github.com/matrix-org/matrix-react-sdk/pull/5273)
* Remove width limit on widgets
[\#5265](https://github.com/matrix-org/matrix-react-sdk/pull/5265)
* Fix call container avatar initial centering
[\#5280](https://github.com/matrix-org/matrix-react-sdk/pull/5280)
* Fix right panel for peeking rooms
[\#5268](https://github.com/matrix-org/matrix-react-sdk/pull/5268)
* Add support for dehydrated devices
[\#5239](https://github.com/matrix-org/matrix-react-sdk/pull/5239)
* Use Own Profile Store for the Profile Settings
[\#5277](https://github.com/matrix-org/matrix-react-sdk/pull/5277)
* null-guard defaultAvatarUrlForString
[\#5270](https://github.com/matrix-org/matrix-react-sdk/pull/5270)
* Choose first result on enter in the emoji picker
[\#5257](https://github.com/matrix-org/matrix-react-sdk/pull/5257)
* Fix room directory clipping links in the room's topic
[\#5276](https://github.com/matrix-org/matrix-react-sdk/pull/5276)
* Decorate failed e2ee downgrade attempts better
[\#5278](https://github.com/matrix-org/matrix-react-sdk/pull/5278)
* MELS use latest avatar rather than the first avatar
[\#5262](https://github.com/matrix-org/matrix-react-sdk/pull/5262)
* Fix Encryption Panel close button clashing with Base Card
[\#5261](https://github.com/matrix-org/matrix-react-sdk/pull/5261)
* Wrap canEncryptToAllUsers in a try/catch to handle server errors
[\#5275](https://github.com/matrix-org/matrix-react-sdk/pull/5275)
* Fix conditional on communities prototype room creation dialog
[\#5274](https://github.com/matrix-org/matrix-react-sdk/pull/5274)
* Fix ensureDmExists for encryption detection
[\#5271](https://github.com/matrix-org/matrix-react-sdk/pull/5271)
* Switch to using the Widget API SDK for widget messaging
[\#5171](https://github.com/matrix-org/matrix-react-sdk/pull/5171)
* Ensure package links exist when releasing
[\#5269](https://github.com/matrix-org/matrix-react-sdk/pull/5269)
* Fix the call preview when not in same room as the call
[\#5267](https://github.com/matrix-org/matrix-react-sdk/pull/5267)
* Make the hangup button do things for conference calls
[\#5223](https://github.com/matrix-org/matrix-react-sdk/pull/5223)
* Render Jitsi widget state events in a more obvious way
[\#5222](https://github.com/matrix-org/matrix-react-sdk/pull/5222)
* Make the PIP Jitsi look and feel like the 1:1 PIP
[\#5226](https://github.com/matrix-org/matrix-react-sdk/pull/5226)
* Trim range when formatting so that it excludes leading/trailing spaces
[\#5263](https://github.com/matrix-org/matrix-react-sdk/pull/5263)
* Fix button label on the Set Password Dialog
[\#5264](https://github.com/matrix-org/matrix-react-sdk/pull/5264)
* fix link to classic yarn's `yarn link`
[\#5259](https://github.com/matrix-org/matrix-react-sdk/pull/5259)
* Fix index mismatch between username colors styles and custom theming
[\#5256](https://github.com/matrix-org/matrix-react-sdk/pull/5256)
* Disable autocompletion on security key input during login
[\#5258](https://github.com/matrix-org/matrix-react-sdk/pull/5258)
* fix uninitialised state and eventlistener leak in RoomUpgradeWarningBar
[\#5255](https://github.com/matrix-org/matrix-react-sdk/pull/5255)
* Only set title when it changes
[\#5254](https://github.com/matrix-org/matrix-react-sdk/pull/5254)
* Convert CallHandler to typescript
[\#5248](https://github.com/matrix-org/matrix-react-sdk/pull/5248)
* Retry loading i18n language if it fails
[\#5209](https://github.com/matrix-org/matrix-react-sdk/pull/5209)
* Rework profile area for user and room settings to be more clear
[\#5243](https://github.com/matrix-org/matrix-react-sdk/pull/5243)
* Validation improve pattern for derived data
[\#5241](https://github.com/matrix-org/matrix-react-sdk/pull/5241)
Changes in [3.5.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.5.0) (2020-09-28)
===================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.5.0-rc.1...v3.5.0)

2
README.md
View File

@ -18,7 +18,7 @@ are currently filed against vector-im/element-web rather than this project).
Translation Status
==================
[![Translation status](https://translate.riot.im/widgets/element-web/-/multi-auto.svg)](https://translate.riot.im/engage/element-web/?utm_source=widget)
[![Translation status](https://translate.element.io/widgets/element-web/-/multi-auto.svg)](https://translate.element.io/engage/element-web/?utm_source=widget)
Developer Guide
===============

17
__test-utils__/environment.js Normal file
View File

@ -0,0 +1,17 @@
const BaseEnvironment = require("jest-environment-jsdom-sixteen");
class Environment extends BaseEnvironment {
constructor(config, options) {
super(Object.assign({}, config, {
globals: Object.assign({}, config.globals, {
// Explicitly specify the correct globals to workaround Jest bug
// https://github.com/facebook/jest/issues/7780
Uint32Array: Uint32Array,
Uint8Array: Uint8Array,
ArrayBuffer: ArrayBuffer,
}),
}), options);
}
}
module.exports = Environment;

17
code_style.md
View File

@ -35,12 +35,6 @@ General Style
- lowerCamelCase for functions and variables.
- Single line ternary operators are fine.
- UPPER_SNAKE_CASE for constants
- Single quotes for strings by default, for consistency with most JavaScript styles:
```javascript
"bad" // Bad
'good' // Good
```
- Use parentheses or `` ` `` instead of `\` for line continuation where ever possible
- Open braces on the same line (consistent with Node):
@ -162,7 +156,14 @@ ECMAScript
- Be careful mixing arrow functions and regular functions, eg. if one function in a promise chain is an
arrow function, they probably all should be.
- Apart from that, newer ES features should be used whenever the author deems them to be appropriate.
- Flow annotations are welcome and encouraged.
TypeScript
----------
- TypeScript is preferred over the use of JavaScript
- It's desirable to convert existing JavaScript files to TypeScript. TypeScript conversions should be done in small
chunks without functional changes to ease the review process.
- Use full type definitions for function parameters and return values.
- Avoid `any` types and `any` casts
React
-----
@ -201,6 +202,8 @@ React
this.state = { counter: 0 };
}
```
- Prefer class components over function components and hooks (not a strict rule though)
- Think about whether your component really needs state: are you duplicating
information in component state that could be derived from the model?

60
docs/widget-layouts.md Normal file
View File

@ -0,0 +1,60 @@
# Widget layout support
Rooms can have a default widget layout to auto-pin certain widgets, make the container different
sizes, etc. These are defined through the `io.element.widgets.layout` state event (empty state key).
Full example content:
```json5
{
"widgets": {
"first-widget-id": {
"container": "top",
"index": 0,
"width": 60,
"height": 40
},
"second-widget-id": {
"container": "right"
}
}
}
```
As shown, there are two containers possible for widgets. These containers have different behaviour
and interpret the other options differently.
## `top` container
This is the "App Drawer" or any pinned widgets in a room. This is by far the most versatile container
though does introduce potential usability issues upon members of the room (widgets take up space and
therefore fewer messages can be shown).
The `index` for a widget determines which order the widgets show up in from left to right. Widgets
without an `index` will show up as the rightmost widgets. Tiebreaks (same `index` or multiple defined
without an `index`) are resolved by comparing widget IDs. A maximum of 3 widgets can be in the top
container - any which exceed this will be ignored (placed into the `right` container). Smaller numbers
represent leftmost widgets.
The `width` is relative width within the container in percentage points. This will be clamped to a
range of 0-100 (inclusive). The widgets will attempt to scale to relative proportions when more than
100% space is allocated. For example, if 3 widgets are defined at 40% width each then the client will
attempt to show them at 33% width each.
Note that the client may impose minimum widths on the widgets, such as a 10% minimum to avoid pinning
hidden widgets. In general, widgets defined in the 30-70% range each will be free of these restrictions.
The `height` is not in fact applied per-widget but is recorded per-widget for potential future
capabilities in future containers. The top container will take the tallest `height` and use that for
the height of the whole container, and thus all widgets in that container. The `height` is relative
to the container, like with `width`, meaning that 100% will consume as much space as the client is
willing to sacrifice to the widget container. Like with `width`, the client may impose minimums to avoid
the container being uselessly small. Heights in the 30-100% range are generally acceptable. The height
is also clamped to be within 0-100, inclusive.
## `right` container
This is the default container and has no special configuration. Widgets which overflow from the top
container will be put in this container instead. Putting a widget in the right container does not
automatically show it - it only mentions that widgets should not be in another container.
The behaviour of this container may change in the future.

154
package.json
View File

@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
"version": "3.5.0",
"version": "3.14.0",
"description": "SDK for matrix.org using React",
"author": "matrix.org",
"repository": {
@ -27,11 +27,12 @@
"matrix-gen-i18n": "scripts/gen-i18n.js",
"matrix-prune-i18n": "scripts/prune-i18n.js"
},
"main": "./lib/index.js",
"typings": "./lib/index.d.ts",
"main": "./src/index.js",
"matrix_src_main": "./src/index.js",
"matrix_lib_main": "./lib/index.js",
"matrix_lib_typings": "./lib/index.d.ts",
"scripts": {
"prepare": "yarn build",
"prepublishOnly": "yarn build",
"i18n": "matrix-gen-i18n",
"prunei18n": "matrix-prune-i18n",
"diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
@ -50,49 +51,49 @@
"lint:types": "tsc --noEmit --jsx react",
"lint:style": "stylelint 'res/css/**/*.scss'",
"test": "jest",
"test:e2e": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080"
"test:e2e": "./test/end-to-end-tests/run.sh --app-url http://localhost:8080"
},
"dependencies": {
"@babel/runtime": "^7.10.5",
"await-lock": "^2.0.1",
"blueimp-canvas-to-blob": "^3.27.0",
"@babel/runtime": "^7.12.5",
"await-lock": "^2.1.0",
"blueimp-canvas-to-blob": "^3.28.0",
"browser-encrypt-attachment": "^0.3.0",
"browser-request": "^0.3.3",
"cheerio": "^1.0.0-rc.5",
"classnames": "^2.2.6",
"commonmark": "^0.29.1",
"commonmark": "^0.29.3",
"counterpart": "^0.18.6",
"diff-dom": "^4.1.6",
"diff-dom": "^4.2.2",
"diff-match-patch": "^1.0.5",
"emojibase-data": "^5.0.1",
"emojibase-regex": "^4.0.1",
"emojibase-data": "^5.1.1",
"emojibase-regex": "^4.1.1",
"escape-html": "^1.0.3",
"file-saver": "^1.3.8",
"filesize": "3.6.1",
"file-saver": "^2.0.5",
"filesize": "6.1.0",
"flux": "2.1.1",
"focus-visible": "^5.1.0",
"fuse.js": "^2.7.4",
"focus-visible": "^5.2.0",
"gfm.css": "^1.1.2",
"glob-to-regexp": "^0.4.1",
"highlight.js": "^10.1.2",
"html-entities": "^1.3.1",
"is-ip": "^2.0.0",
"highlight.js": "^10.5.0",
"html-entities": "^1.4.0",
"is-ip": "^3.1.0",
"katex": "^0.12.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.19",
"lodash": "^4.17.20",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
"matrix-widget-api": "^0.1.0-beta.2",
"matrix-widget-api": "^0.1.0-beta.13",
"minimist": "^1.2.5",
"pako": "^1.0.11",
"parse5": "^5.1.1",
"pako": "^2.0.3",
"parse5": "^6.0.1",
"png-chunks-extract": "^1.0.0",
"project-name-generator": "^2.1.7",
"prop-types": "^15.7.2",
"qrcode": "^1.4.4",
"qs": "^6.9.4",
"re-resizable": "^6.5.4",
"react": "^16.13.1",
"qs": "^6.9.6",
"re-resizable": "^6.9.0",
"react": "^16.14.0",
"react-beautiful-dnd": "^4.0.1",
"react-dom": "^16.13.1",
"react-focus-lock": "^2.4.1",
"react-dom": "^16.14.0",
"react-focus-lock": "^2.5.0",
"react-transition-group": "^4.4.1",
"resize-observer-polyfill": "^1.5.1",
"rfc4648": "^1.4.0",
@ -105,68 +106,75 @@
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"@babel/cli": "^7.10.5",
"@babel/core": "^7.10.5",
"@babel/parser": "^7.11.0",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.5",
"@babel/plugin-proposal-export-default-from": "^7.10.4",
"@babel/plugin-proposal-numeric-separator": "^7.10.4",
"@babel/plugin-proposal-object-rest-spread": "^7.10.4",
"@babel/plugin-transform-flow-comments": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"@babel/preset-flow": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@babel/register": "^7.10.5",
"@babel/traverse": "^7.11.0",
"@peculiar/webcrypto": "^1.1.2",
"@types/classnames": "^2.2.10",
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/parser": "^7.12.11",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-decorators": "^7.12.12",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-proposal-numeric-separator": "^7.12.7",
"@babel/plugin-proposal-object-rest-spread": "^7.12.1",
"@babel/plugin-transform-flow-comments": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-flow": "^7.12.1",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@babel/register": "^7.12.10",
"@babel/traverse": "^7.12.12",
"@peculiar/webcrypto": "^1.1.4",
"@sinonjs/fake-timers": "^7.0.2",
"@types/classnames": "^2.2.11",
"@types/counterpart": "^0.18.1",
"@types/flux": "^3.1.9",
"@types/jest": "^26.0.20",
"@types/linkifyjs": "^2.1.3",
"@types/lodash": "^4.14.158",
"@types/lodash": "^4.14.168",
"@types/modernizr": "^3.5.3",
"@types/node": "^12.12.51",
"@types/node": "^14.14.22",
"@types/pako": "^1.0.1",
"@types/qrcode": "^1.3.4",
"@types/qrcode": "^1.3.5",
"@types/react": "^16.9",
"@types/react-dom": "^16.9.8",
"@types/react-dom": "^16.9.10",
"@types/react-transition-group": "^4.4.0",
"@types/sanitize-html": "^1.23.3",
"@types/sanitize-html": "^1.27.0",
"@types/zxcvbn": "^4.4.0",
"@typescript-eslint/eslint-plugin": "^3.7.0",
"@typescript-eslint/parser": "^3.7.0",
"@typescript-eslint/eslint-plugin": "^4.14.0",
"@typescript-eslint/parser": "^4.14.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^24.9.0",
"chokidar": "^3.4.1",
"concurrently": "^4.1.2",
"babel-jest": "^26.6.3",
"chokidar": "^3.5.1",
"concurrently": "^5.3.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "7.5.0",
"eslint-config-matrix-org": "^0.1.2",
"enzyme-adapter-react-16": "^1.15.6",
"eslint": "7.18.0",
"eslint-config-matrix-org": "^0.2.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-flowtype": "^2.50.3",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^2.5.1",
"glob": "^5.0.15",
"jest": "^24.9.0",
"jest-canvas-mock": "^2.2.0",
"lolex": "^5.1.2",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"glob": "^7.1.6",
"jest": "^26.6.3",
"jest-canvas-mock": "^2.3.0",
"jest-environment-jsdom-sixteen": "^1.0.3",
"matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.2.2",
"react-test-renderer": "^16.13.1",
"rimraf": "^2.7.1",
"stylelint": "^9.10.1",
"stylelint-config-standard": "^18.3.0",
"olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
"react-test-renderer": "^16.14.0",
"rimraf": "^3.0.2",
"stylelint": "^13.9.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.18.0",
"typescript": "^3.9.7",
"typescript": "^4.1.3",
"walk": "^2.3.14"
},
"resolutions": {
"**/@types/react": "^16.14"
},
"jest": {
"testEnvironment": "./__test-utils__/environment.js",
"testMatch": [
"<rootDir>/test/**/*-test.js"
"<rootDir>/test/**/*-test.[jt]s"
],
"setupFiles": [
"jest-canvas-mock"

4
release.sh
View File

@ -32,9 +32,7 @@ do
echo "Upgrading $i to $latestver..."
yarn add -E $i@$latestver
git add -u
# The `-e` flag opens the editor and gives you a chance to check
# the upgrade for correctness.
git commit -m "Upgrade $i to $latestver" -e
git commit -m "Upgrade $i to $latestver"
fi
fi
done

29
res/css/_common.scss
View File

@ -17,9 +17,15 @@ limitations under the License.
*/
@import "./_font-sizes.scss";
@import "./_font-weights.scss";
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
$EventTile_e2e_state_indicator_width: 4px;
$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width);
:root {
font-size: 10px;
}
@ -59,6 +65,10 @@ pre, code {
color: $accent-color;
}
.text-muted {
color: $muted-fg-color;
}
b {
// On Firefox, the default weight for `<b>` is `bolder` which results in no bold
// effect since we only have specific weights of our fonts available.
@ -165,7 +175,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 1px solid rgba($primary-fg-color, .1);
// these things should probably not be defined globally
margin: 9px;
flex: 0 0 auto;
}
.mx_textinput {
@ -208,12 +217,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 0;
}
/* applied to side-panels and messagepanel when in RoomSettings */
.mx_fadable {
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
// These are magic constants which are excluded from tinting, to let themes
// (which only have CSS, unlike skins) tell the app what their non-tinted
// colourscheme is by inspecting the stylesheet DOM.
@ -262,7 +265,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
font-weight: 300;
font-size: $font-15px;
position: relative;
padding: 25px 30px 30px 30px;
padding: 24px;
max-height: 80%;
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
border-radius: 8px;
@ -329,6 +332,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_title {
font-size: $font-22px;
font-weight: $font-semi-bold;
line-height: $font-36px;
color: $dialog-title-fg-color;
}
@ -354,8 +358,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
background-color: $dialog-close-fg-color;
cursor: pointer;
position: absolute;
top: 4px;
right: 0px;
top: 10px;
right: 0;
}
.mx_Dialog_content {
@ -368,6 +372,11 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_buttons {
margin-top: 20px;
text-align: right;
.mx_Dialog_buttons_additive {
// The consumer is responsible for positioning their elements.
float: left;
}
}
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied

29
res/css/_components.scss
View File

@ -9,10 +9,12 @@
@import "./structures/_CustomRoomTagPanel.scss";
@import "./structures/_FilePanel.scss";
@import "./structures/_GenericErrorPage.scss";
@import "./structures/_GroupFilterPanel.scss";
@import "./structures/_GroupView.scss";
@import "./structures/_HeaderButtons.scss";
@import "./structures/_HomePage.scss";
@import "./structures/_LeftPanel.scss";
@import "./structures/_LeftPanelWidget.scss";
@import "./structures/_MainSplit.scss";
@import "./structures/_MatrixChat.scss";
@import "./structures/_MyGroups.scss";
@ -26,7 +28,6 @@
@import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss";
@import "./structures/_ToastContainer.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_UserMenu.scss";
@ -44,18 +45,17 @@
@import "./views/auth/_InteractiveAuthEntryComponents.scss";
@import "./views/auth/_LanguageSelector.scss";
@import "./views/auth/_PassphraseField.scss";
@import "./views/auth/_ServerConfig.scss";
@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/avatars/_WidgetAvatar.scss";
@import "./views/context_menus/_CallContextMenu.scss";
@import "./views/context_menus/_IconizedContextMenu.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
@import "./views/context_menus/_WidgetContextMenu.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
@import "./views/dialogs/_BugReportDialog.scss";
@ -69,20 +69,23 @@
@import "./views/dialogs/_DeactivateAccountDialog.scss";
@import "./views/dialogs/_DevtoolsDialog.scss";
@import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
@import "./views/dialogs/_FeedbackDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss";
@import "./views/dialogs/_HostSignupDialog.scss";
@import "./views/dialogs/_IncomingSasDialog.scss";
@import "./views/dialogs/_InviteDialog.scss";
@import "./views/dialogs/_KeyboardShortcutsDialog.scss";
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
@import "./views/dialogs/_ModalWidgetDialog.scss";
@import "./views/dialogs/_NewSessionReviewDialog.scss";
@import "./views/dialogs/_RegistrationEmailPromptDialog.scss";
@import "./views/dialogs/_RoomSettingsDialog.scss";
@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
@import "./views/dialogs/_RoomUpgradeDialog.scss";
@import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
@import "./views/dialogs/_ServerOfflineDialog.scss";
@import "./views/dialogs/_ServerPickerDialog.scss";
@import "./views/dialogs/_SetEmailDialog.scss";
@import "./views/dialogs/_SetMxIdDialog.scss";
@import "./views/dialogs/_SetPasswordDialog.scss";
@import "./views/dialogs/_SettingsDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
@ -90,6 +93,7 @@
@import "./views/dialogs/_TermsDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss";
@import "./views/dialogs/_WidgetOpenIDPermissionsDialog.scss";
@import "./views/dialogs/security/_AccessSecretStorageDialog.scss";
@import "./views/dialogs/security/_CreateCrossSigningDialog.scss";
@ -103,17 +107,18 @@
@import "./views/elements/_AddressTile.scss";
@import "./views/elements/_DesktopBuildsNotice.scss";
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_DesktopCapturerSourcePicker.scss";
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_ErrorBoundary.scss";
@import "./views/elements/_EventListSummary.scss";
@import "./views/elements/_Field.scss";
@import "./views/elements/_FormButton.scss";
@import "./views/elements/_IconButton.scss";
@import "./views/elements/_ImageView.scss";
@import "./views/elements/_InfoTooltip.scss";
@import "./views/elements/_InlineSpinner.scss";
@import "./views/elements/_ManageIntegsButton.scss";
@import "./views/elements/_MiniAvatarUploader.scss";
@import "./views/elements/_PowerSelector.scss";
@import "./views/elements/_ProgressBar.scss";
@import "./views/elements/_QRCode.scss";
@ -122,6 +127,8 @@
@import "./views/elements/_RichText.scss";
@import "./views/elements/_RoleButton.scss";
@import "./views/elements/_RoomAliasField.scss";
@import "./views/elements/_SSOButtons.scss";
@import "./views/elements/_ServerPicker.scss";
@import "./views/elements/_Slider.scss";
@import "./views/elements/_Spinner.scss";
@import "./views/elements/_StyledCheckbox.scss";
@ -138,6 +145,7 @@
@import "./views/groups/_GroupUserSettings.scss";
@import "./views/messages/_CreateEvent.scss";
@import "./views/messages/_DateSeparator.scss";
@import "./views/messages/_EventTileBubble.scss";
@import "./views/messages/_MEmoteBody.scss";
@import "./views/messages/_MFileBody.scss";
@import "./views/messages/_MImageBody.scss";
@ -182,6 +190,7 @@
@import "./views/rooms/_MemberList.scss";
@import "./views/rooms/_MessageComposer.scss";
@import "./views/rooms/_MessageComposerFormatBar.scss";
@import "./views/rooms/_NewRoomIntro.scss";
@import "./views/rooms/_NotificationBadge.scss";
@import "./views/rooms/_PinnedEventTile.scss";
@import "./views/rooms/_PinnedEventsPanel.scss";
@ -226,8 +235,12 @@
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/terms/_InlineTermsAgreement.scss";
@import "./views/toasts/_AnalyticsToast.scss";
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_VideoView.scss";
@import "./views/voip/_DialPad.scss";
@import "./views/voip/_DialPadContextMenu.scss";
@import "./views/voip/_DialPadModal.scss";
@import "./views/voip/_VideoFeed.scss";

7
res/css/structures/_CustomRoomTagPanel.scss
View File

@ -16,13 +16,8 @@ limitations under the License.
// TODO: Update design for custom tags to match new designs
.mx_LeftPanel_tagPanelContainer {
display: flex;
flex-direction: column;
}
.mx_CustomRoomTagPanel {
background-color: $tagpanel-bg-color;
background-color: $groupFilterPanel-bg-color;
max-height: 40vh;
}

34
res/css/structures/_TagPanel.scss → res/css/structures/_GroupFilterPanel.scss
View File

@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_TagPanel {
.mx_GroupFilterPanel {
flex: 1;
background-color: $tagpanel-bg-color;
background-color: $groupFilterPanel-bg-color;
cursor: pointer;
display: flex;
@ -26,49 +26,49 @@ limitations under the License.
min-height: 0;
}
.mx_TagPanel_items_selected {
.mx_GroupFilterPanel_items_selected {
cursor: pointer;
}
.mx_TagPanel .mx_TagPanel_divider {
.mx_GroupFilterPanel .mx_GroupFilterPanel_divider {
height: 0px;
width: 90%;
border: none;
border-bottom: 1px solid $tagpanel-divider-color;
border-bottom: 1px solid $groupFilterPanel-divider-color;
}
.mx_TagPanel .mx_TagPanel_scroller {
.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
flex-grow: 1;
width: 100%;
}
.mx_TagPanel .mx_TagPanel_tagTileContainer {
.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 6px;
}
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer > div {
margin: 6px 0;
}
.mx_TagPanel .mx_TagTile {
.mx_GroupFilterPanel .mx_TagTile {
// opacity: 0.5;
position: relative;
}
.mx_TagPanel .mx_TagTile.mx_TagTile_prototype {
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
padding: 3px;
}
.mx_TagPanel .mx_TagTile:focus,
.mx_TagPanel .mx_TagTile:hover,
.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
.mx_GroupFilterPanel .mx_TagTile:focus,
.mx_GroupFilterPanel .mx_TagTile:hover,
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected {
// opacity: 1;
}
.mx_TagPanel .mx_TagTile.mx_TagTile_selected_prototype {
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
background-color: $primary-bg-color;
border-radius: 6px;
}
@ -108,7 +108,7 @@ limitations under the License.
}
}
.mx_TagPanel .mx_TagTile_plus {
.mx_GroupFilterPanel .mx_TagTile_plus {
margin-bottom: 12px;
height: 32px;
width: 32px;
@ -132,7 +132,7 @@ limitations under the License.
}
}
.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected::before {
content: '';
height: 100%;
background-color: $accent-color;
@ -142,7 +142,7 @@ limitations under the License.
border-radius: 0 3px 3px 0;
}
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus {
filter: none;
}

37
res/css/structures/_HomePage.scss
View File

@ -26,9 +26,10 @@ limitations under the License.
.mx_HomePage_default {
text-align: center;
display: flex;
.mx_HomePage_default_wrapper {
padding: 25vh 0 12px;
margin: auto;
}
img {
@ -50,56 +51,54 @@ limitations under the License.
color: $muted-fg-color;
}
.mx_MiniAvatarUploader {
margin: 0 auto;
}
.mx_HomePage_default_buttons {
margin: 80px auto 0;
margin: 60px auto 0;
width: fit-content;
.mx_AccessibleButton {
padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
width: 104px; // 120px - 2* 8px
margin: 0 39px; // 55px - 2* 8px
width: 160px;
height: 132px;
margin: 20px;
position: relative;
display: inline-block;
border-radius: 8px;
vertical-align: top;
word-break: break-word;
box-sizing: border-box;
font-weight: 600;
font-size: $font-15px;
line-height: $font-20px;
color: $muted-fg-color;
&:hover {
color: $accent-color;
background: rgba($accent-color, 0.06);
&::before {
background-color: $accent-color;
}
}
color: #fff; // on all themes
background-color: $accent-color;
&::before {
top: 20px;
left: 40px; // (120px-40px)/2
left: 60px; // (160px-40px)/2
width: 40px;
height: 40px;
content: '';
position: absolute;
background-color: $muted-fg-color;
background-color: #fff; // on all themes
mask-repeat: no-repeat;
mask-size: contain;
}
&.mx_HomePage_button_sendDm::before {
mask-image: url('$(res)/img/feather-customised/message-circle.svg');
mask-image: url('$(res)/img/element-icons/feedback.svg');
}
&.mx_HomePage_button_explore::before {
mask-image: url('$(res)/img/feather-customised/explore.svg');
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
&.mx_HomePage_button_createGroup::before {
mask-image: url('$(res)/img/feather-customised/group.svg');
mask-image: url('$(res)/img/element-icons/community-members.svg');
}
}
}

28
res/css/structures/_LeftPanel.scss
View File

@ -14,29 +14,30 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$tagPanelWidth: 56px; // only applies in this file, used for calculations
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
.mx_LeftPanel {
background-color: $roomlist-bg-color;
min-width: 260px;
max-width: 50%;
// Create a row-based flexbox for the TagPanel and the room list
// Create a row-based flexbox for the GroupFilterPanel and the room list
display: flex;
.mx_LeftPanel_tagPanelContainer {
.mx_LeftPanel_GroupFilterPanelContainer {
flex-grow: 0;
flex-shrink: 0;
flex-basis: $tagPanelWidth;
flex-basis: $groupFilterPanelWidth;
height: 100%;
// Create another flexbox so the TagPanel fills the container
// Create another flexbox so the GroupFilterPanel fills the container
display: flex;
flex-direction: column;
// TagPanel handles its own CSS
// GroupFilterPanel handles its own CSS
}
&:not(.mx_LeftPanel_hasTagPanel) {
&:not(.mx_LeftPanel_hasGroupFilterPanel) {
.mx_LeftPanel_roomListContainer {
width: 100%;
}
@ -45,7 +46,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
// Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc
.mx_LeftPanel_roomListContainer {
width: calc(100% - $tagPanelWidth);
width: calc(100% - $groupFilterPanelWidth);
background-color: $roomlist-bg-color;
// Create another flexbox (this time a column) for the room list components
@ -169,16 +170,21 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
min-width: unset;
// We have to forcefully set the width to override the resizer's style attribute.
&.mx_LeftPanel_hasTagPanel {
width: calc(68px + $tagPanelWidth) !important;
&.mx_LeftPanel_hasGroupFilterPanel {
width: calc(68px + $groupFilterPanelWidth) !important;
}
&:not(.mx_LeftPanel_hasTagPanel) {
&:not(.mx_LeftPanel_hasGroupFilterPanel) {
width: 68px !important;
}
.mx_LeftPanel_roomListContainer {
width: 68px;
.mx_LeftPanel_userHeader {
flex-direction: row;
justify-content: center;
}
.mx_LeftPanel_filterContainer {
// Organize the flexbox into a centered column layout
flex-direction: column;

145
res/css/structures/_LeftPanelWidget.scss Normal file
View File

@ -0,0 +1,145 @@
/*
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_LeftPanelWidget {
// largely based on RoomSublist
margin-left: 8px;
margin-bottom: 4px;
.mx_LeftPanelWidget_headerContainer {
display: flex;
align-items: center;
height: 24px;
color: $roomlist-header-color;
margin-top: 4px;
.mx_LeftPanelWidget_stickable {
flex: 1;
max-width: 100%;
display: flex;
align-items: center;
}
.mx_LeftPanelWidget_headerText {
flex: 1;
max-width: calc(100% - 16px);
line-height: $font-16px;
font-size: $font-13px;
font-weight: 600;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.mx_LeftPanelWidget_collapseBtn {
display: inline-block;
position: relative;
width: 14px;
height: 14px;
margin-right: 6px;
&::before {
content: '';
width: 18px;
height: 18px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $roomlist-header-color;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
&.mx_LeftPanelWidget_collapseBtn_collapsed::before {
transform: rotate(-90deg);
}
}
}
}
.mx_LeftPanelWidget_resizeBox {
position: relative;
display: flex;
flex-direction: column;
overflow: visible; // let the resize handle out
}
.mx_AppTileFullWidth {
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;
box-sizing: border-box;
mask-image: linear-gradient(0deg, transparent, black 4px);
}
.mx_LeftPanelWidget_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
// Override styles from library
width: unset !important;
height: 4px !important;
position: absolute;
top: -24px !important; // override from library - puts it in the margin-top of the headerContainer
// 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_LeftPanelWidget_resizerHandle {
opacity: 0.8;
background-color: $primary-fg-color;
}
.mx_LeftPanelWidget_maximizeButton {
margin-left: 8px;
margin-right: 7px;
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;
mask-image: url('$(res)/img/feather-customised/maximise.svg');
background: $muted-fg-color;
}
}
}
.mx_LeftPanelWidget_maximizeButtonTooltip {
margin-top: -3px;
}

1
res/css/structures/_MatrixChat.scss
View File

@ -79,7 +79,6 @@ limitations under the License.
height: 100%;
}
.mx_MatrixChat > .mx_LeftPanel2:hover + .mx_ResizeHandle_horizontal,
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
position: relative;

28
res/css/structures/_RoomDirectory.scss
View File

@ -64,28 +64,23 @@ limitations under the License.
}
.mx_RoomDirectory_table {
font-size: $font-12px;
color: $primary-fg-color;
width: 100%;
display: grid;
font-size: $font-12px;
grid-template-columns: max-content auto max-content max-content max-content;
row-gap: 24px;
text-align: left;
table-layout: fixed;
width: 100%;
}
.mx_RoomDirectory_roomAvatar {
width: 32px;
padding-right: 14px;
vertical-align: top;
}
.mx_RoomDirectory_roomDescription {
padding-bottom: 16px;
padding: 2px 14px 0 0;
}
.mx_RoomDirectory_roomMemberCount {
align-self: center;
color: $light-fg-color;
width: 60px;
padding: 0 10px;
text-align: center;
padding: 3px 10px 0;
&::before {
background-color: $light-fg-color;
@ -105,8 +100,7 @@ limitations under the License.
}
.mx_RoomDirectory_join, .mx_RoomDirectory_preview {
width: 80px;
text-align: center;
align-self: center;
white-space: nowrap;
}
@ -133,6 +127,10 @@ limitations under the License.
.mx_RoomDirectory_topic {
cursor: initial;
color: $light-fg-color;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.mx_RoomDirectory_alias {

66
res/css/structures/_RoomStatusBar.scss
View File

@ -19,57 +19,6 @@ limitations under the License.
min-height: 50px;
}
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_RoomStatusBar_indicator {
padding-left: 17px;
padding-right: 12px;
margin-left: -73px;
margin-top: 15px;
float: left;
width: 24px;
text-align: center;
}
.mx_RoomStatusBar_callBar {
height: 50px;
line-height: $font-50px;
}
.mx_RoomStatusBar_placeholderIndicator span {
color: $primary-fg-color;
opacity: 0.5;
position: relative;
top: -4px;
/*
animation-duration: 1s;
animation-name: bounce;
animation-direction: alternate;
animation-iteration-count: infinite;
*/
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
animation-delay: 0.3s;
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(2) {
animation-delay: 0.6s;
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(3) {
animation-delay: 0.9s;
}
@keyframes bounce {
from {
opacity: 0.5;
top: 0;
}
to {
opacity: 0.2;
top: -3px;
}
}
.mx_RoomStatusBar_typingIndicatorAvatars {
width: 52px;
margin-top: -1px;
@ -153,16 +102,6 @@ limitations under the License.
display: block;
}
.mx_RoomStatusBar_isAlone {
height: 50px;
line-height: $font-50px;
color: $primary-fg-color;
opacity: 0.5;
overflow-y: hidden;
display: block;
}
.mx_MatrixChat_useCompactLayout {
.mx_RoomStatusBar {
min-height: 40px;
@ -172,11 +111,6 @@ limitations under the License.
margin-top: 10px;
}
.mx_RoomStatusBar_callBar {
height: 40px;
line-height: $font-40px;
}
.mx_RoomStatusBar_typingBar {
height: 40px;
line-height: $font-40px;

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

@ -219,7 +219,7 @@ hr.mx_RoomView_myReadMarker {
position: relative;
top: -1px;
z-index: 1;
transition: width 400ms easeInSine 1s, opacity 400ms easeInSine 1s;
transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s;
width: 99%;
opacity: 1;
}

21
res/css/structures/_TabbedView.scss
View File

@ -17,7 +17,7 @@ limitations under the License.
.mx_TabbedView {
margin: 0;
padding: 0 0 0 58px;
padding: 0 0 0 16px;
display: flex;
flex-direction: column;
position: absolute;
@ -25,6 +25,7 @@ limitations under the License.
bottom: 0;
left: 0;
right: 0;
margin-top: 8px;
}
.mx_TabbedView_tabLabels {
@ -35,13 +36,13 @@ limitations under the License.
}
.mx_TabbedView_tabLabel {
display: flex;
align-items: center;
vertical-align: text-top;
cursor: pointer;
display: block;
border-radius: 3px;
font-size: $font-14px;
min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
margin-bottom: 6px;
padding: 8px 0;
border-radius: 8px;
font-size: $font-13px;
position: relative;
}
@ -51,9 +52,8 @@ limitations under the License.
}
.mx_TabbedView_maskedIcon {
margin-left: 6px;
margin-right: 9px;
margin-top: 1px;
margin-left: 8px;
margin-right: 16px;
width: 16px;
height: 16px;
display: inline-block;
@ -65,10 +65,9 @@ limitations under the License.
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 22px;
height: 16px;
mask-position: center;
content: '';
vertical-align: middle;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {

39
res/css/structures/_UserMenu.scss
View File

@ -119,20 +119,16 @@ limitations under the License.
}
&.mx_UserMenu_minimized {
.mx_UserMenu_userHeader {
.mx_UserMenu_row {
justify-content: center;
}
padding-right: 0px;
.mx_UserMenu_userAvatarContainer {
margin-right: 0;
}
.mx_UserMenu_userAvatarContainer {
margin-right: 0px;
}
}
}
.mx_UserMenu_contextMenu {
width: 247px;
width: 258px;
// These override the styles already present on the user menu rather than try to
// define a new menu. They are specifically for the stacked menu when a community
@ -230,6 +226,30 @@ limitations under the License.
align-items: center;
justify-content: center;
}
&.mx_UserMenu_contextMenu_guestPrompts,
&.mx_UserMenu_contextMenu_hostingLink {
padding-top: 0;
}
&.mx_UserMenu_contextMenu_guestPrompts {
display: inline-block;
> span {
font-weight: 600;
display: block;
& + span {
margin-top: 8px;
}
}
.mx_AccessibleButton_kind_link {
font-weight: normal;
font-size: inherit;
padding: 0;
}
}
}
.mx_IconizedContextMenu_icon {
@ -252,6 +272,9 @@ limitations under the License.
.mx_UserMenu_iconHome::before {
mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
}
.mx_UserMenu_iconHosting::before {
mask-image: url('$(res)/img/element-icons/brands/element.svg');
}
.mx_UserMenu_iconBell::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');

11
res/css/structures/auth/_Login.scss
View File

@ -18,7 +18,7 @@ limitations under the License.
.mx_Login_submit {
@mixin mx_DialogButton;
width: 100%;
margin-top: 35px;
margin-top: 24px;
margin-bottom: 24px;
box-sizing: border-box;
text-align: center;
@ -33,12 +33,6 @@ limitations under the License.
cursor: default;
}
.mx_AuthBody a.mx_Login_sso_link:link,
.mx_AuthBody a.mx_Login_sso_link:hover,
.mx_AuthBody a.mx_Login_sso_link:visited {
color: $button-primary-fg-color;
}
.mx_Login_loader {
display: inline;
position: relative;
@ -87,10 +81,13 @@ limitations under the License.
}
.mx_Login_underlinedServerName {
width: max-content;
border-bottom: 1px dashed $accent-color;
}
div.mx_AccessibleButton_kind_link.mx_Login_forgot {
display: block;
margin: 0 auto;
// style it as a link
font-size: inherit;
padding: 0;

20
res/css/views/auth/_AuthBody.scss
View File

@ -34,7 +34,11 @@ limitations under the License.
h3 {
font-size: $font-14px;
font-weight: 600;
color: $authpage-primary-color;
color: $authpage-secondary-color;
}
h3.mx_AuthBody_centered {
text-align: center;
}
a:link,
@ -96,12 +100,6 @@ limitations under the License.
}
}
.mx_AuthBody_editServerDetails {
padding-left: 1em;
font-size: $font-12px;
font-weight: normal;
}
.mx_AuthBody_fieldRow {
display: flex;
margin-bottom: 10px;
@ -146,6 +144,14 @@ limitations under the License.
display: block;
text-align: center;
width: 100%;
> a {
font-weight: $font-semi-bold;
}
}
.mx_SSOButtons + .mx_AuthBody_changeFlow {
margin-top: 24px;
}
.mx_AuthBody_spinner {

2
res/css/views/auth/_AuthHeader.scss
View File

@ -18,7 +18,7 @@ limitations under the License.
display: flex;
flex-direction: column;
width: 206px;
padding: 25px 40px;
padding: 25px 25px;
box-sizing: border-box;
}

2
res/css/views/auth/_AuthHeaderLogo.scss
View File

@ -17,7 +17,7 @@ limitations under the License.
.mx_AuthHeaderLogo {
margin-top: 15px;
flex: 1;
padding: 0 10px;
padding: 0 25px;
}
.mx_AuthHeaderLogo img {

34
res/css/views/auth/_InteractiveAuthEntryComponents.scss
View File

@ -14,6 +14,35 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_InteractiveAuthEntryComponents_emailWrapper {
padding-right: 100px;
position: relative;
margin-top: 32px;
margin-bottom: 32px;
&::before, &::after {
position: absolute;
width: 116px;
height: 116px;
content: "";
right: -10px;
}
&::before {
background-color: rgba(244, 246, 250, 0.91);
border-radius: 50%;
top: -20px;
}
&::after {
background-image: url('$(res)/img/element-icons/email-prompt.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
top: -25px;
}
}
.mx_InteractiveAuthEntryComponents_msisdnWrapper {
text-align: center;
}
@ -54,7 +83,10 @@ limitations under the License.
}
.mx_InteractiveAuthEntryComponents_termsPolicy {
display: block;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.mx_InteractiveAuthEntryComponents_passwordSection {

1
res/css/views/auth/_LanguageSelector.scss
View File

@ -23,6 +23,7 @@ limitations under the License.
font-size: $font-14px;
font-weight: 600;
color: $authpage-lang-color;
width: auto;
}
.mx_AuthBody_language .mx_Dropdown_arrow {

35
res/css/views/auth/_ServerConfig.scss
View File

@ -1,35 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ServerConfig_help:link {
opacity: 0.8;
}
.mx_ServerConfig_error {
display: block;
color: $warning-color;
}
.mx_ServerConfig_identityServer {
transform: scaleY(0);
transform-origin: top;
transition: transform 0.25s;
&.mx_ServerConfig_identityServer_shown {
transform: scaleY(1);
}
}

69
res/css/views/auth/_ServerTypeSelector.scss
View File

@ -1,69 +0,0 @@
/*
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ServerTypeSelector {
display: flex;
margin-bottom: 28px;
}
.mx_ServerTypeSelector_type {
margin: 0 5px;
}
.mx_ServerTypeSelector_type:first-child {
margin-left: 0;
}
.mx_ServerTypeSelector_type:last-child {
margin-right: 0;
}
.mx_ServerTypeSelector_label {
text-align: center;
font-weight: 600;
color: $authpage-primary-color;
margin: 8px 0;
}
.mx_ServerTypeSelector_type .mx_AccessibleButton {
padding: 10px;
border: 1px solid $input-border-color;
border-radius: 4px;
}
.mx_ServerTypeSelector_type.mx_ServerTypeSelector_type_selected .mx_AccessibleButton {
border-color: $input-valid-border-color;
}
.mx_ServerTypeSelector_logo {
display: flex;
justify-content: center;
height: 18px;
margin-bottom: 12px;
font-weight: 600;
color: $authpage-primary-color;
}
.mx_ServerTypeSelector_logo > div {
display: flex;
width: 70%;
align-items: center;
justify-content: space-evenly;
}
.mx_ServerTypeSelector_description {
font-size: $font-10px;
}

3
res/css/views/auth/_Welcome.scss
View File

@ -18,7 +18,6 @@ limitations under the License.
display: flex;
flex-direction: column;
align-items: center;
&.mx_WelcomePage_registrationDisabled {
.mx_ButtonCreateAccount {
display: none;
@ -27,6 +26,6 @@ limitations under the License.
}
.mx_Welcome .mx_AuthBody_language {
width: 120px;
width: 160px;
margin-bottom: 10px;
}

2
res/css/views/avatars/_BaseAvatar.scss
View File

@ -41,7 +41,7 @@ limitations under the License.
.mx_BaseAvatar_image {
object-fit: cover;
border-radius: 40px;
border-radius: 125px;
vertical-align: top;
background-color: $avatar-bg-color;
}

8
src/dispatcher/payloads/AppTileActionPayload.ts → res/css/views/avatars/_WidgetAvatar.scss
View File

@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { ActionPayload } from "../payloads";
import { Action } from "../actions";
export interface AppTileActionPayload extends ActionPayload {
action: Action.AppTileDelete | Action.AppTileRevoke;
widgetId: string;
.mx_WidgetAvatar {
border-radius: 4px;
}

17
src/extend.js → res/css/views/context_menus/_CallContextMenu.scss
View File

@ -1,5 +1,5 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,13 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
'use strict';
export default function(dest, src) {
for (const i in src) {
if (src.hasOwnProperty(i)) {
dest[i] = src[i];
}
}
return dest;
.mx_CallContextMenu_item {
width: 205px;
height: 40px;
padding-left: 16px;
line-height: 40px;
vertical-align: center;
}

36
res/css/views/context_menus/_WidgetContextMenu.scss
View File

@ -1,36 +0,0 @@
/*
Copyright 2019 The Matrix.org Foundaction 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_WidgetContextMenu {
padding: 6px;
.mx_WidgetContextMenu_option {
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
}
.mx_WidgetContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: solid;
border-top-width: 1px;
border-color: $menu-border-color;
}
}

51
res/css/views/dialogs/_DevtoolsDialog.scss
View File

@ -223,3 +223,54 @@ limitations under the License.
content: ":";
}
}
.mx_DevTools_SettingsExplorer {
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
th {
// Colour choice: first one autocomplete gave me.
border-bottom: 1px solid $accent-color;
text-align: left;
}
td, th {
width: 360px; // "feels right" number
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
td + td, th + th {
width: auto;
}
tr:hover {
// Colour choice: first one autocomplete gave me.
background-color: $accent-color-50pct;
}
}
.mx_DevTools_SettingsExplorer_mutable {
background-color: $accent-color;
}
.mx_DevTools_SettingsExplorer_immutable {
background-color: $warning-color;
}
.mx_DevTools_SettingsExplorer_edit {
float: right;
margin-right: 16px;
}
.mx_DevTools_SettingsExplorer_warning {
border: 2px solid $warning-color;
border-radius: 4px;
padding: 4px;
margin-bottom: 8px;
}
}

121
res/css/views/dialogs/_FeedbackDialog.scss Normal file
View File

@ -0,0 +1,121 @@
/*
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_FeedbackDialog {
hr {
margin: 24px 0;
border-color: $input-border-color;
}
.mx_Dialog_content {
margin-bottom: 24px;
> h2 {
margin-bottom: 32px;
}
}
.mx_FeedbackDialog_section {
position: relative;
padding-left: 52px;
> p {
color: $tertiary-fg-color;
}
.mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
}
a, .mx_AccessibleButton_kind_link {
color: $accent-color;
text-decoration: underline;
}
&::before, &::after {
content: "";
position: absolute;
width: 40px;
height: 40px;
left: 0;
top: 0;
}
&::before {
background-color: $icon-button-color;
border-radius: 20px;
}
&::after {
background: $avatar-initial-color; // TODO
mask-position: center;
mask-size: 24px;
mask-repeat: no-repeat;
}
}
.mx_FeedbackDialog_reportBug {
&::after {
mask-image: url('$(res)/img/feather-customised/bug.svg');
}
}
.mx_FeedbackDialog_rateApp {
.mx_RadioButton {
display: inline-flex;
font-size: 20px;
transition: font-size 1s, border .5s;
border-radius: 50%;
border: 2px solid transparent;
margin-top: 12px;
margin-bottom: 24px;
vertical-align: top;
cursor: pointer;
input[type="radio"] + div {
display: none;
}
.mx_RadioButton_content {
background: $icon-button-color;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 20px;
margin: 5px;
}
.mx_RadioButton_spacer {
display: none;
}
& + .mx_RadioButton {
margin-left: 16px;
}
}
.mx_RadioButton_checked {
font-size: 24px;
border-color: $accent-color;
}
&::after {
mask-image: url('$(res)/img/element-icons/feedback.svg');
}
}
}

138
res/css/views/dialogs/_HostSignupDialog.scss Normal file
View File

@ -0,0 +1,138 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_HostSignupDialog {
width: 90vw;
max-width: 580px;
height: 80vh;
max-height: 600px;
.mx_HostSignupDialog_info {
text-align: center;
.mx_HostSignupDialog_content_top {
margin-bottom: 24px;
}
.mx_HostSignupDialog_paragraphs {
text-align: left;
padding-left: 25%;
padding-right: 25%;
}
.mx_HostSignupDialog_buttons {
margin-bottom: 24px;
display: flex;
justify-content: center;
button {
padding: 12px;
margin: 0 16px;
}
}
.mx_HostSignupDialog_footer {
display: flex;
justify-content: center;
align-items: baseline;
img {
padding-right: 5px;
}
}
}
iframe {
width: 100%;
height: 100%;
border: none;
background-color: #fff;
min-height: 540px;
}
}
.mx_HostSignupDialog_text_dark {
color: $primary-fg-color;
}
.mx_HostSignupDialog_text_light {
color: $secondary-fg-color;
}
.mx_HostSignup_maximize_button {
mask: url('$(res)/img/feather-customised/maximise.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
width: 14px;
height: 14px;
background-color: $dialog-close-fg-color;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
}
.mx_HostSignup_minimize_button {
mask: url('$(res)/img/feather-customised/minimise.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
width: 14px;
height: 14px;
background-color: $dialog-close-fg-color;
cursor: pointer;
position: absolute;
top: 10px;
right: 25px;
}
.mx_HostSignup_persisted {
width: 90vw;
max-width: 580px;
height: 80vh;
max-height: 600px;
top: 0;
left: 0;
position: fixed;
display: none;
}
.mx_HostSignupDialog_minimized {
position: fixed;
bottom: 80px;
right: 26px;
width: 314px;
height: 217px;
overflow: hidden;
&.mx_Dialog {
padding: 12px;
}
.mx_Dialog_title {
text-align: left !important;
padding-left: 20px;
font-size: $font-15px;
}
iframe {
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
}

36
res/css/views/dialogs/_InviteDialog.scss
View File

@ -27,37 +27,29 @@ limitations under the License.
padding-left: 8px;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
.mx_InviteDialog_userTile {
margin: 6px 6px 0 0;
display: inline-block;
float: left;
position: relative;
top: 7px;
min-width: max-content; // prevent manipulation by flexbox
}
// Using a textarea for this element, to circumvent autofill
// Mostly copied from AddressPickerDialog
textarea,
textarea:focus {
height: 34px;
line-height: $font-34px;
// Mostly copied from AddressPickerDialog; overrides bunch of our default text input styles
> input[type="text"] {
margin: 6px 0 !important;
height: 24px;
line-height: $font-24px;
font-size: $font-14px;
padding-left: 12px;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
resize: none;
overflow: hidden;
box-sizing: border-box;
word-wrap: nowrap;
// Roughly fill about 2/5ths of the available space. This is to try and 'fill' the
// remaining space after a bunch of pills, but is a bit hacky. Ideally we'd have
// support for "fill remaining width", but traditional tricks don't work with what
// we're pushing into this "field". Flexbox just makes things worse. The theory is
// that users won't need more than about 2/5ths of the input to find the person
// they're looking for.
width: 40%;
min-width: 40%;
flex: 1 !important;
color: $primary-fg-color !important;
}
}
@ -148,6 +140,10 @@ limitations under the License.
}
}
.mx_InviteDialog_roomTile_nameStack {
display: inline-block;
}
.mx_InviteDialog_roomTile_name {
font-weight: 600;
font-size: $font-14px;

35
src/utils/NamingUtils.ts → res/css/views/dialogs/_ModalWidgetDialog.scss
View File

@ -14,16 +14,29 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import * as projectNameGenerator from "project-name-generator";
.mx_ModalWidgetDialog {
.mx_ModalWidgetDialog_warning {
margin-bottom: 24px;
/**
* Generates a human readable identifier. This should not be used for anything
* which needs secure/cryptographic random: just a level uniquness that is offered
* by something like Date.now().
* @returns {string} The randomly generated ID
*/
export function generateHumanReadableId(): string {
return projectNameGenerator({words: 3}).raw.map(w => {
return w[0].toUpperCase() + w.substring(1).toLowerCase();
}).join('');
> img {
vertical-align: middle;
margin-right: 8px;
}
}
.mx_ModalWidgetDialog_buttons {
float: right;
margin-top: 24px;
.mx_AccessibleButton + .mx_AccessibleButton {
margin-left: 8px;
}
}
iframe {
width: 100%;
height: 450px;
border: 0;
border-radius: 8px;
}
}

20
src/components/views/avatars/PulsedAvatar.tsx → res/css/views/dialogs/_RegistrationEmailPromptDialog.scss
View File

@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
.mx_RegistrationEmailPromptDialog {
width: 417px;
interface IProps {
.mx_Dialog_content {
margin-bottom: 24px;
color: $tertiary-fg-color;
}
.mx_Dialog_primary {
width: 100%;
}
}
const PulsedAvatar: React.FC<IProps> = (props) => {
return <div className="mx_PulsedAvatar">
{props.children}
</div>;
};
export default PulsedAvatar;

1
res/css/views/dialogs/_RoomSettingsDialog.scss
View File

@ -48,7 +48,6 @@ limitations under the License.
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
padding-left: 40px;
padding-right: 80px;
}

18
res/css/views/dialogs/_RoomSettingsDialogBridges.scss
View File

@ -89,24 +89,18 @@ limitations under the License.
}
}
.mx_showMore {
display: block;
text-align: left;
margin-top: 10px;
}
.metadata {
color: $muted-fg-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0;
}
.metadata.visible {
overflow-y: visible;
text-overflow: ellipsis;
white-space: normal;
padding: 0;
> li {
padding: 0;
border: 0;
}
}
}
}

78
res/css/views/dialogs/_ServerPickerDialog.scss Normal file
View File

@ -0,0 +1,78 @@
/*
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_ServerPickerDialog {
width: 468px;
box-sizing: border-box;
.mx_Dialog_content {
margin-bottom: 0;
> p {
color: $secondary-fg-color;
font-size: $font-14px;
margin: 16px 0;
&:first-of-type {
margin-bottom: 40px;
}
&:last-of-type {
margin: 0 24px 24px;
}
}
> h4 {
font-size: $font-15px;
font-weight: $font-semi-bold;
color: $secondary-fg-color;
margin-left: 8px;
}
> a {
color: $accent-color;
margin-left: 8px;
}
}
.mx_ServerPickerDialog_otherHomeserverRadio {
input[type="radio"] + div {
margin-top: auto;
margin-bottom: auto;
}
}
.mx_ServerPickerDialog_otherHomeserver {
border-top: none;
border-left: none;
border-right: none;
border-radius: unset;
> input {
padding-left: 0;
}
> label {
margin-left: 0;
}
}
.mx_AccessibleButton_kind_primary {
width: calc(100% - 64px);
margin: 0 8px;
padding: 15px 18px;
}
}

50
res/css/views/dialogs/_SetMxIdDialog.scss
View File

@ -1,50 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations 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_SetMxIdDialog .mx_Dialog_title {
padding-right: 40px;
}
.mx_SetMxIdDialog_input_group {
display: flex;
}
.mx_SetMxIdDialog_input {
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: $font-15px;
width: 100%;
max-width: 280px;
}
.mx_SetMxIdDialog_input.error,
.mx_SetMxIdDialog_input.error:focus {
border: 1px solid $warning-color;
}
.mx_SetMxIdDialog_input_group .mx_Spinner {
height: 37px;
padding-left: 10px;
justify-content: flex-start;
}
.mx_SetMxIdDialog .success {
color: $accent-color;
}

34
res/css/views/dialogs/_SetPasswordDialog.scss
View File

@ -1,34 +0,0 @@
/*
Copyright 2017 Vector Creations 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_SetPasswordDialog_change_password input {
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: $font-15px;
max-width: 280px;
margin-bottom: 10px;
}
.mx_SetPasswordDialog_change_password_button {
margin-top: 68px;
}
.mx_SetPasswordDialog .mx_Dialog_content {
margin-bottom: 0px;
}

1
res/css/views/dialogs/_SettingsDialog.scss
View File

@ -36,7 +36,6 @@ limitations under the License.
}
.mx_Dialog_title {
text-align: center;
margin-bottom: 24px;
}
}

75
res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss Normal file
View File

@ -0,0 +1,75 @@
/*
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_WidgetCapabilitiesPromptDialog {
.text-muted {
font-size: $font-12px;
}
.mx_Dialog_content {
margin-bottom: 16px;
}
.mx_WidgetCapabilitiesPromptDialog_cap {
margin-top: 20px;
font-size: $font-15px;
line-height: $font-15px;
.mx_WidgetCapabilitiesPromptDialog_byline {
color: $muted-fg-color;
margin-left: 26px;
font-size: $font-12px;
line-height: $font-12px;
}
}
.mx_Dialog_buttons {
margin-top: 40px; // double normal
}
.mx_SettingsFlag {
line-height: calc($font-14px + 7px + 7px); // 7px top & bottom padding
color: $muted-fg-color;
font-size: $font-12px;
.mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
// downsize the switch + ball
width: $font-32px;
height: $font-15px;
&.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
left: calc(100% - $font-15px);
}
.mx_ToggleSwitch_ball {
width: $font-15px;
height: $font-15px;
border-radius: $font-15px;
}
}
.mx_SettingsFlag_label {
display: inline-block;
vertical-align: middle;
}
}
}

2
res/css/views/elements/_AccessibleButton.scss
View File

@ -25,7 +25,7 @@ limitations under the License.
.mx_AccessibleButton_hasKind {
padding: 7px 18px;
text-align: center;
border-radius: 4px;
border-radius: 8px;
display: inline-block;
font-size: $font-14px;
}

72
res/css/views/elements/_DesktopCapturerSourcePicker.scss Normal file
View File

@ -0,0 +1,72 @@
/*
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_desktopCapturerSourcePicker {
overflow: hidden;
}
.mx_desktopCapturerSourcePicker_tabLabels {
display: flex;
padding: 0 0 8px 0;
}
.mx_desktopCapturerSourcePicker_tabLabel,
.mx_desktopCapturerSourcePicker_tabLabel_selected {
width: 100%;
text-align: center;
border-radius: 8px;
padding: 8px 0;
font-size: $font-13px;
}
.mx_desktopCapturerSourcePicker_tabLabel_selected {
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
}
.mx_desktopCapturerSourcePicker_panel {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
height: 500px;
overflow: overlay;
}
.mx_desktopCapturerSourcePicker_stream_button {
display: flex;
flex-direction: column;
margin: 8px;
border-radius: 4px;
}
.mx_desktopCapturerSourcePicker_stream_button:hover,
.mx_desktopCapturerSourcePicker_stream_button:focus {
background: $roomtile-selected-bg-color;
}
.mx_desktopCapturerSourcePicker_stream_thumbnail {
margin: 4px;
width: 312px;
}
.mx_desktopCapturerSourcePicker_stream_name {
margin: 0 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 312px;
}

55
res/css/views/elements/_IconButton.scss
View File

@ -1,55 +0,0 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_IconButton {
width: 32px;
height: 32px;
border-radius: 100%;
background-color: $accent-bg-color;
// don't shrink or grow if in a flex container
flex: 0 0 auto;
&.mx_AccessibleButton_disabled {
background-color: none;
&::before {
background-color: lightgrey;
}
}
&:hover {
opacity: 90%;
}
&::before {
content: "";
display: block;
width: 100%;
height: 100%;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 55%;
background-color: $accent-color;
}
&.mx_IconButton_icon_check::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
}
&.mx_IconButton_icon_edit::before {
mask-image: url('$(res)/img/feather-customised/edit.svg');
}
}

66
res/css/views/elements/_MiniAvatarUploader.scss Normal file
View File

@ -0,0 +1,66 @@
/*
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_MiniAvatarUploader {
position: relative;
width: min-content;
// this isn't a floating tooltip so override some things to not need to bother with z-index and floating
.mx_Tooltip {
display: inline-block;
position: absolute;
z-index: unset;
width: max-content;
left: 72px;
top: 0;
}
&::before, &::after {
content: '';
position: absolute;
height: 26px;
width: 26px;
right: -6px;
bottom: -6px;
}
&::before {
background-color: $primary-bg-color;
border-radius: 50%;
z-index: 1;
}
&::after {
background-color: $secondary-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/camera.svg');
mask-size: 16px;
z-index: 2;
}
&.mx_MiniAvatarUploader_busy::after {
background: url("$(res)/img/spinner.gif") no-repeat center;
background-size: 80%;
mask: unset;
}
}
.mx_MiniAvatarUploader_input {
display: none;
}

74
res/css/views/elements/_SSOButtons.scss Normal file
View File

@ -0,0 +1,74 @@
/*
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_SSOButtons {
display: flex;
flex-wrap: wrap;
justify-content: center;
.mx_SSOButtons_row {
& + .mx_SSOButtons_row {
margin-top: 16px;
}
}
.mx_SSOButton {
position: relative;
width: 100%;
padding: 7px 32px;
text-align: center;
border-radius: 8px;
display: inline-block;
font-size: $font-14px;
font-weight: $font-semi-bold;
border: 1px solid $input-border-color;
color: $primary-fg-color;
> img {
object-fit: contain;
position: absolute;
left: 8px;
top: 4px;
}
}
.mx_SSOButton_default {
color: $button-primary-bg-color;
background-color: $button-secondary-bg-color;
border-color: $button-primary-bg-color;
}
.mx_SSOButton_default.mx_SSOButton_primary {
color: $button-primary-fg-color;
background-color: $button-primary-bg-color;
}
.mx_SSOButton_mini {
box-sizing: border-box;
width: 50px; // 48px + 1px border on all sides
height: 50px; // 48px + 1px border on all sides
min-width: 50px; // prevent crushing by the flexbox
padding: 12px;
> img {
left: 12px;
top: 12px;
}
& + .mx_SSOButton_mini {
margin-left: 16px;
}
}
}

88
res/css/views/elements/_ServerPicker.scss Normal file
View File

@ -0,0 +1,88 @@
/*
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_ServerPicker {
margin-bottom: 14px;
border-bottom: 1px solid rgba(141, 151, 165, 0.2);
display: grid;
grid-template-columns: auto min-content;
grid-template-rows: auto auto auto;
font-size: $font-14px;
line-height: $font-20px;
> h3 {
font-weight: $font-semi-bold;
margin: 0 0 20px;
grid-column: 1;
grid-row: 1;
}
.mx_ServerPicker_help {
width: 20px;
height: 20px;
background-color: $icon-button-color;
border-radius: 10px;
grid-column: 2;
grid-row: 1;
margin-left: auto;
text-align: center;
color: #ffffff;
font-size: 16px;
position: relative;
&::before {
content: '';
width: 24px;
height: 24px;
position: absolute;
top: -2px;
left: -2px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/i.svg');
background: #ffffff;
}
}
.mx_ServerPicker_server {
color: $authpage-primary-color;
grid-column: 1;
grid-row: 2;
margin-bottom: 16px;
}
.mx_ServerPicker_change {
padding: 0;
font-size: inherit;
grid-column: 2;
grid-row: 2;
}
.mx_ServerPicker_desc {
margin-top: -12px;
color: $tertiary-fg-color;
grid-column: 1 / 2;
grid-row: 3;
margin-bottom: 16px;
}
}
.mx_ServerPicker_helpDialog {
.mx_Dialog_content {
width: 456px;
}
}

27
res/css/views/messages/_CreateEvent.scss
View File

@ -1,5 +1,5 @@
/*
Copyright 2018 New Vector Ltd
Copyright 2018, 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,25 +15,8 @@ limitations under the License.
*/
.mx_CreateEvent {
background-color: $info-plinth-bg-color;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.mx_CreateEvent_image {
float: left;
margin-right: 20px;
width: 72px;
height: 34px;
background-color: $primary-fg-color;
mask: url('$(res)/img/room-continuation.svg');
mask-repeat: no-repeat;
mask-position: center;
}
.mx_CreateEvent_header {
font-weight: bold;
&::before {
background-color: $composer-e2e-icon-color;
mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
}
}

60
res/css/views/messages/_EventTileBubble.scss Normal file
View File

@ -0,0 +1,60 @@
/*
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
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_EventTileBubble {
background-color: $dark-panel-bg-color;
padding: 10px;
border-radius: 8px;
margin: 10px auto;
max-width: 75%;
box-sizing: border-box;
display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content;
&::before, &::after {
position: relative;
grid-column: 1;
grid-row: 1 / 3;
width: 16px;
height: 16px;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
margin-top: 4px;
}
.mx_EventTileBubble_title, .mx_EventTileBubble_subtitle {
overflow-wrap: break-word;
}
.mx_EventTileBubble_title {
font-weight: 600;
font-size: $font-15px;
grid-column: 2;
grid-row: 1;
}
.mx_EventTileBubble_subtitle {
font-size: $font-12px;
grid-column: 2;
grid-row: 2;
}
}

33
res/css/views/messages/_MJitsiWidgetEvent.scss
View File

@ -15,41 +15,8 @@ limitations under the License.
*/
.mx_MJitsiWidgetEvent {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content;
&::before {
grid-column: 1;
grid-row: 1 / 3;
width: 16px;
height: 16px;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: $composer-e2e-icon-color; // XXX: Variable abuse
margin-top: 4px;
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
.mx_MJitsiWidgetEvent_title {
font-weight: 600;
font-size: $font-15px;
grid-column: 2;
grid-row: 1;
}
.mx_MJitsiWidgetEvent_subtitle {
grid-column: 2;
grid-row: 2;
}
.mx_MJitsiWidgetEvent_title,
.mx_MJitsiWidgetEvent_subtitle {
overflow-wrap: break-word;
}
}

3
res/css/views/messages/_MVideoBody.scss
View File

@ -17,6 +17,7 @@ limitations under the License.
span.mx_MVideoBody {
video.mx_MVideoBody {
max-width: 100%;
height: auto;
max-height: 300px;
border-radius: 4px;
}
}

2
res/css/views/messages/_RedactedBody.scss
View File

@ -30,7 +30,7 @@ limitations under the License.
mask-size: contain;
content: '';
position: absolute;
top: 2px;
top: 1px;
left: 0;
}
}

4
res/css/views/messages/_ViewSourceEvent.scss
View File

@ -35,13 +35,13 @@ limitations under the License.
mask-size: auto 12px;
visibility: hidden;
background-color: $accent-color;
mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
mask-image: url('$(res)/img/feather-customised/maximise.svg');
}
&.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
mask-position: 0 bottom;
margin-bottom: 7px;
mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
mask-image: url('$(res)/img/feather-customised/minimise.svg');
}
&:hover .mx_ViewSourceEvent_toggle {

48
res/css/views/messages/_common_CryptoEvent.scss
View File

@ -15,28 +15,6 @@ limitations under the License.
*/
.mx_cryptoEvent {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content;
&.mx_cryptoEvent_icon::before,
&.mx_cryptoEvent_icon::after {
grid-column: 1;
grid-row: 1 / 3;
width: 16px;
height: 16px;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $composer-e2e-icon-color;
margin-top: 4px;
}
// white infill for the transparency
&.mx_cryptoEvent_icon::before {
background-color: #ffffff;
@ -46,6 +24,11 @@ limitations under the License.
mask-size: 90%;
}
&.mx_cryptoEvent_icon::after {
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $composer-e2e-icon-color;
}
&.mx_cryptoEvent_icon_verified::after {
mask-image: url("$(res)/img/e2e/verified.svg");
background-color: $accent-color;
@ -56,25 +39,6 @@ limitations under the License.
background-color: $notice-primary-color;
}
.mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {
overflow-wrap: break-word;
}
.mx_cryptoEvent_title {
font-weight: 600;
font-size: $font-15px;
grid-column: 2;
grid-row: 1;
}
.mx_cryptoEvent_subtitle {
grid-column: 2;
grid-row: 2;
}
.mx_cryptoEvent_state, .mx_cryptoEvent_subtitle {
font-size: $font-12px;
}
.mx_cryptoEvent_state, .mx_cryptoEvent_buttons {
grid-column: 3;
@ -92,5 +56,7 @@ limitations under the License.
margin: auto 0;
text-align: center;
color: $notice-secondary-color;
overflow-wrap: break-word;
font-size: $font-12px;
}
}

10
res/css/views/right_panel/_BaseCard.scss
View File

@ -40,6 +40,7 @@ limitations under the License.
width: 20px;
margin: 12px;
top: 0;
border-radius: 10px;
&::before {
content: "";
@ -55,7 +56,6 @@ limitations under the License.
}
.mx_BaseCard_back {
border-radius: 4px;
left: 0;
&::before {
@ -66,7 +66,6 @@ limitations under the License.
}
.mx_BaseCard_close {
border-radius: 10px;
right: 0;
&::before {
@ -129,6 +128,13 @@ limitations under the License.
mask-size: 20px;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
&.mx_AccessibleButton_disabled {
padding-right: 12px;
&::after {
content: unset;
}
}
}
}

103
res/css/views/right_panel/_RoomSummaryCard.scss
View File

@ -110,28 +110,107 @@ limitations under the License.
.mx_RoomSummaryCard_appsGroup {
.mx_RoomSummaryCard_Button {
padding-left: 12px;
// this button is special so we have to override some of the original styling
// as we will be applying it in its children
padding: 0;
height: auto;
color: $tertiary-fg-color;
span {
color: $primary-fg-color;
.mx_RoomSummaryCard_icon_app {
padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding
text-overflow: ellipsis;
overflow: hidden;
.mx_BaseAvatar_image {
vertical-align: top;
margin-right: 12px;
}
span {
color: $primary-fg-color;
}
}
img {
vertical-align: top;
margin-right: 12px;
border-radius: 4px;
.mx_RoomSummaryCard_app_pinToggle,
.mx_RoomSummaryCard_app_options {
position: absolute;
top: 0;
height: 100%; // to give bigger interactive zone
width: 24px;
padding: 12px 4px;
box-sizing: border-box;
min-width: 24px; // prevent flexbox crushing
&:hover {
&::after {
content: '';
position: absolute;
height: 24px;
width: 24px;
top: 8px; // equal to padding-top of parent
left: 0;
border-radius: 12px;
background-color: rgba(141, 151, 165, 0.1);
}
}
&::before {
content: '';
position: absolute;
height: 16px;
width: 16px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px;
background-color: $icon-button-color;
}
}
.mx_RoomSummaryCard_app_pinToggle {
right: 24px;
&::before {
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
}
}
.mx_RoomSummaryCard_app_options {
right: 48px;
display: none;
&::before {
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
}
}
&.mx_RoomSummaryCard_Button_pinned {
&::after {
opacity: 0.2;
}
.mx_RoomSummaryCard_app_pinToggle::before {
background-color: $accent-color;
}
}
&:hover {
.mx_RoomSummaryCard_icon_app {
padding-right: 72px;
}
.mx_RoomSummaryCard_app_options {
display: unset;
}
}
&::before {
content: unset;
}
}
.mx_RoomSummaryCard_icon_app_pinned::after {
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
background-color: $accent-color;
transform: unset;
&::after {
top: 8px; // re-align based on the height change
pointer-events: none; // pass through to the real button
}
}
}

14
res/css/views/right_panel/_UserInfo.scss
View File

@ -173,26 +173,12 @@ limitations under the License.
margin: 6px 0;
.mx_IconButton, .mx_Spinner {
margin-left: 20px;
width: 16px;
height: 16px;
&::before {
mask-size: 80%;
}
}
.mx_UserInfo_roleDescription {
display: flex;
justify-content: center;
align-items: center;
// try to make it the same height as the dropdown
margin: 11px 0 12px 0;
.mx_IconButton {
margin-left: 6px;
}
}
.mx_Field {

49
res/css/views/right_panel/_WidgetCard.scss
View File

@ -24,34 +24,35 @@ limitations under the License.
border: 0;
}
&.mx_WidgetCard_noEdit {
.mx_AccessibleButton_kind_secondary {
margin: 0 12px;
.mx_BaseCard_header {
display: inline-flex;
&:first-child {
// expand the Pin to room primary action
flex-grow: 1;
}
& > h2 {
margin-right: 0;
flex-grow: 1;
}
}
.mx_WidgetCard_optionsButton {
position: relative;
height: 18px;
width: 26px;
&::before {
content: "";
position: absolute;
width: 20px;
.mx_WidgetCard_optionsButton {
position: relative;
margin-right: 44px;
height: 20px;
top: 6px;
left: 20px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
background-color: $secondary-fg-color;
width: 20px;
min-width: 20px; // prevent crushing by the flexbox
padding: 0;
&::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 4px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
background-color: $secondary-fg-color;
}
}
}
}

275
res/css/views/rooms/_AppsDrawer.scss
View File

@ -24,34 +24,69 @@ $MiniAppTileHeight: 200px;
flex-direction: column;
overflow: hidden;
.mx_AppsContainer_resizerHandleContainer {
width: 100%;
height: 10px;
margin-top: -3px; // move it up so the interactions are slightly more comfortable
display: block;
position: relative;
}
.mx_AppsContainer_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
// Override styles from library
width: unset !important;
height: 4px !important;
// Override styles from library, making the whole area the target area
width: 100% !important;
height: 100% !important;
// This is positioned directly below frame
position: absolute;
bottom: -8px !important; // override from library
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;
// We then render the pill handle in an ::after to keep it in the handle's
// area without being a massive line across the screen
&::after {
content: '';
position: absolute;
border-radius: 3px;
// The combination of these two should make the pill 4px high
top: 6px;
bottom: 0;
// Together, these make the bar 64px wide
// These are also overridden from the library
left: calc(50% - 32px);
right: calc(50% - 32px);
}
}
&:hover {
.mx_AppsContainer_resizerHandle {
.mx_AppsContainer_resizerHandle::after {
opacity: 0.8;
background: $primary-fg-color;
}
.mx_ResizeHandle_horizontal::before {
position: absolute;
left: 3px;
top: 50%;
transform: translate(0, -50%);
height: 64px; // to match width of the ones on roomlist
width: 4px;
border-radius: 4px;
content: '';
background-color: $primary-fg-color;
opacity: 0.8;
}
}
}
.mx_AppsDrawer_hidden {
display: none;
.mx_AppsContainer_resizer {
margin-bottom: 8px;
}
.mx_AppsContainer {
@ -60,63 +95,74 @@ $MiniAppTileHeight: 200px;
align-items: stretch;
justify-content: center;
height: 100%;
margin-bottom: 8px;
}
width: 100%;
flex: 1;
min-height: 0;
.mx_AppsDrawer_minimised .mx_AppsContainer {
// override the re-resizable inline styles
height: inherit !important;
min-height: inherit !important;
}
.mx_AppTile:first-of-type {
border-left-width: 8px;
border-radius: 10px 0 0 10px;
}
.mx_AppTile:last-of-type {
border-right-width: 8px;
border-radius: 0 10px 10px 0;
}
.mx_AddWidget_button {
order: 2;
cursor: pointer;
padding: 0;
margin: -3px auto 5px 0;
color: $accent-color;
font-size: $font-12px;
}
.mx_ResizeHandle_horizontal {
position: relative;
.mx_AddWidget_button_full_width {
max-width: 960px;
}
.mx_SetAppURLDialog_input {
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-hairline-color;
background-color: $primary-bg-color;
font-size: $font-15px;
}
.mx_AppTile {
max-width: 960px;
width: 50%;
border: 5px solid $widget-menu-bar-bg-color;
border-radius: 4px;
display: flex;
flex-direction: column;
& + .mx_AppTile {
margin-left: 5px;
> div {
width: 0;
}
}
}
// TODO this should be 300px but that's too large
$MinWidth: 240px;
.mx_AppsDrawer_2apps .mx_AppTile {
width: 50%;
&:nth-child(3) {
flex-grow: 1;
width: 0 !important;
min-width: $MinWidth !important;
}
}
.mx_AppsDrawer_3apps .mx_AppTile {
width: 33%;
&:nth-child(3) {
flex-grow: 1;
width: 0 !important;
min-width: $MinWidth !important;
}
}
.mx_AppTile {
width: 50%;
min-width: $MinWidth;
border: 8px solid $widget-menu-bar-bg-color;
border-left-width: 5px;
border-right-width: 5px;
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: $widget-menu-bar-bg-color;
}
.mx_AppTileFullWidth {
max-width: 960px;
width: 100%;
width: 100% !important; // to override the inline style set by the resizer
margin: 0;
padding: 0;
border: 5px solid $widget-menu-bar-bg-color;
border-radius: 8px;
display: flex;
flex-direction: column;
background-color: $widget-menu-bar-bg-color;
}
.mx_AppTile_mini {
max-width: 960px;
width: 100%;
margin: 0;
padding: 0;
@ -125,12 +171,6 @@ $MiniAppTileHeight: 200px;
height: $MiniAppTileHeight;
}
.mx_AppTile.mx_AppTile_minimised,
.mx_AppTileFullWidth.mx_AppTile_minimised,
.mx_AppTile_mini.mx_AppTile_minimised {
height: 14px;
}
.mx_AppTile .mx_AppTile_persistedWrapper,
.mx_AppTileFullWidth .mx_AppTile_persistedWrapper,
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
@ -150,19 +190,20 @@ $MiniAppTileHeight: 200px;
flex-direction: row;
align-items: center;
justify-content: space-between;
cursor: pointer;
width: 100%;
}
.mx_AppTileMenuBar_expanded {
padding-bottom: 5px;
padding-top: 2px;
padding-bottom: 8px;
}
.mx_AppTileMenuBarTitle {
display: flex;
flex-direction: row;
align-items: center;
pointer-events: none;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.mx_WidgetAvatar {
margin-right: 12px;
}
}
.mx_AppTileMenuBarTitle > :last-child {
@ -186,37 +227,20 @@ $MiniAppTileHeight: 200px;
margin: 0 3px;
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_minimise {
mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
background-color: $accent-color;
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maximise {
mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
background-color: $accent-color;
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
mask-image: url('$(res)/img/icon_context.svg');
}
.mx_AppTileMenuBarWidgetDelete {
filter: none;
}
.mx_AppTileMenuBarWidget:hover {
border: 1px solid $primary-fg-color;
border-radius: 2px;
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
}
.mx_AppTileBody {
height: 100%;
width: 100%;
overflow: hidden;
border-radius: 8px;
background-color: $widget-body-bg-color;
}
.mx_AppTileBody_mini {
@ -249,75 +273,8 @@ $MiniAppTileHeight: 200px;
display: block;
}
.mx_AppTileMenuBarWidgetPadding {
margin-right: 5px;
}
.mx_AppIconTile {
background-color: $lightbox-bg-color;
border: 1px solid rgba(0, 0, 0, 0);
width: 200px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 3px;
margin: 5px;
display: inline-block;
}
.mx_AppIconTile.mx_AppIconTile_active {
color: $accent-color;
border-color: $accent-color;
}
.mx_AppIconTile:hover {
border: 1px solid $accent-color;
box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5);
}
.mx_AppIconTile_content {
padding: 2px 16px;
height: 60px;
overflow: hidden;
}
.mx_AppIconTile_content h4 {
margin-top: 5px;
margin-bottom: 2px;
}
.mx_AppIconTile_content p {
margin-top: 0;
margin-bottom: 5px;
font-size: smaller;
}
.mx_AppIconTile_image {
padding: 10px;
max-width: 100px;
max-height: 100px;
width: auto;
height: auto;
}
.mx_AppIconTile_imageContainer {
text-align: center;
width: 100%;
background-color: white;
border-radius: 3px 3px 0 0;
height: 155px;
display: flex;
justify-content: center;
align-items: center;
}
form.mx_Custom_Widget_Form div {
margin-top: 10px;
margin-bottom: 10px;
}
.mx_AppPermissionWarning {
text-align: center;
background-color: $widget-menu-bar-bg-color;
display: flex;
height: 100%;
flex-direction: column;
@ -382,6 +339,10 @@ form.mx_Custom_Widget_Form div {
font-weight: bold;
position: relative;
height: 100%;
// match bg of border so that the cut corners have the right fill
background-color: $widget-body-bg-color !important;
border-radius: 8px;
}
.mx_AppLoading .mx_Spinner {
@ -409,10 +370,6 @@ form.mx_Custom_Widget_Form div {
display: none;
}
.mx_AppsDrawer_minimised .mx_AppsContainer_resizerHandle {
display: none;
}
/* Avoid apptile iframes capturing mouse event focus when resizing */
.mx_AppsDrawer_resizing iframe {
pointer-events: none;

74
res/css/views/rooms/_EventTile.scss
View File

@ -25,17 +25,8 @@ $left-gutter: 64px;
position: relative;
}
.mx_EventTile_bubble {
background-color: $dark-panel-bg-color;
padding: 10px;
border-radius: 5px;
margin: 10px auto;
max-width: 75%;
box-sizing: border-box;
}
.mx_EventTile.mx_EventTile_info {
padding-top: 0px;
padding-top: 1px;
}
.mx_EventTile_avatar {
@ -46,7 +37,7 @@ $left-gutter: 64px;
}
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
top: $font-8px;
top: $font-6px;
left: $left-gutter;
}
@ -83,7 +74,6 @@ $left-gutter: 64px;
margin-left: 5px;
display: inline-block;
vertical-align: top;
height: 16px;
overflow: hidden;
user-select: none;
@ -131,9 +121,10 @@ $left-gutter: 64px;
grid-template-columns: 1fr 100px;
.mx_EventTile_line {
margin-right: 0px;
margin-right: 0;
grid-column: 1 / 3;
padding: 0;
// override default padding of mx_EventTile_line so that we can be centered
padding: 0 !important;
}
.mx_EventTile_msgOption {
@ -429,15 +420,15 @@ $left-gutter: 64px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color 4px solid;
border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color 4px solid;
border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
}
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: $e2e-unknown-color 4px solid;
border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
}
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
@ -455,8 +446,7 @@ $left-gutter: 64px;
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
left: 3px;
width: auto;
width: $MessageTimestamp_width_hover;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
@ -501,7 +491,6 @@ $left-gutter: 64px;
// https://github.com/vector-im/vector-web/issues/754
overflow-x: overlay;
overflow-y: visible;
max-height: 30vh;
}
code {
@ -510,6 +499,22 @@ $left-gutter: 64px;
}
}
.mx_EventTile_lineNumbers {
float: left;
margin: 0 0.5em 0 -1.5em;
color: gray;
}
.mx_EventTile_lineNumber {
text-align: right;
display: block;
padding-left: 1em;
}
.mx_EventTile_collapsedCodeBlock {
max-height: 30vh;
}
.mx_EventTile:hover .mx_EventTile_body pre,
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
@ -521,21 +526,42 @@ $left-gutter: 64px;
}
// Inserted adjacent to <pre> blocks, (See TextualBody)
.mx_EventTile_copyButton {
.mx_EventTile_button {
position: absolute;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 6px;
right: 6px;
right: 12px;
width: 19px;
height: 19px;
mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color;
}
.mx_EventTile_buttonBottom {
top: 31px;
}
.mx_EventTile_copyButton {
mask-image: url($copy-button-url);
}
.mx_EventTile_collapseButton {
mask-size: 75%;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url($collapse-button-url);
}
.mx_EventTile_expandButton {
mask-size: 75%;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url($expand-button-url);
}
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
visibility: visible;
}

6
res/css/views/rooms/_GroupLayout.scss
View File

@ -20,7 +20,7 @@ $left-gutter: 64px;
.mx_GroupLayout {
.mx_EventTile {
> .mx_SenderProfile {
line-height: $font-17px;
line-height: $font-20px;
padding-left: $left-gutter;
}
@ -34,11 +34,11 @@ $left-gutter: 64px;
.mx_MessageTimestamp {
position: absolute;
width: 46px; /* 8 + 30 (avatar) + 8 */
width: $MessageTimestamp_width;
}
.mx_EventTile_line, .mx_EventTile_reply {
padding-top: 3px;
padding-top: 1px;
padding-bottom: 3px;
line-height: $font-22px;
}

12
res/css/views/rooms/_IRCLayout.scss
View File

@ -186,6 +186,7 @@ $irc-line-height: $font-18px;
overflow: hidden;
text-overflow: ellipsis;
min-width: var(--name-width);
text-align: end;
}
}
}
@ -206,6 +207,17 @@ $irc-line-height: $font-18px;
width: unset;
max-width: var(--name-width);
}
.mx_SenderProfile_hover {
background: transparent;
> span {
> .mx_SenderProfile_name,
> .mx_SenderProfile_aux {
min-width: inherit;
}
}
}
}
.mx_ProfileResizer {

5
res/css/views/rooms/_LinkPreviewWidget.scss
View File

@ -19,6 +19,8 @@ limitations under the License.
margin-right: 15px;
margin-bottom: 15px;
display: flex;
flex-direction: column;
max-width: 360px;
border-left: 4px solid $preview-widget-bar-color;
color: $preview-widget-fg-color;
}
@ -55,6 +57,9 @@ limitations under the License.
cursor: pointer;
width: 18px;
height: 18px;
padding: 0px 5px 5px 5px;
margin-left: auto;
margin-right: 0px;
img {
flex: 0 0 40px;

2
res/css/views/rooms/_MemberInfo.scss
View File

@ -70,7 +70,7 @@ limitations under the License.
}
.mx_MemberInfo_avatar {
background: $tagpanel-bg-color;
background: $groupFilterPanel-bg-color;
margin-bottom: 16px;
}

43
res/css/views/rooms/_MemberList.scss
View File

@ -46,6 +46,11 @@ limitations under the License.
}
}
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
flex: 0 0 auto;
}
.mx_MemberList_chevron {
position: absolute;
right: 35px;
@ -59,10 +64,8 @@ limitations under the License.
flex: 1 1 0px;
}
.mx_MemberList_query,
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
flex: 1 1 0;
.mx_MemberList_query {
height: 16px;
// stricter rule to override the one in _common.scss
&[type="text"] {
@ -70,10 +73,6 @@ limitations under the License.
}
}
.mx_MemberList_query {
height: 16px;
}
.mx_MemberList_wrapper {
padding: 10px;
}
@ -96,17 +95,27 @@ limitations under the License.
}
.mx_MemberList_invite span {
background-image: url('$(res)/img/element-icons/room/invite.svg');
background-repeat: no-repeat;
background-position: center left;
background-size: 20px;
padding: 8px 0 8px 25px;
padding: 8px 0;
display: inline-flex;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-image: url('$(res)/img/element-icons/room/invite.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: 20px;
width: 20px;
height: 20px;
margin-right: 5px;
}
}
.mx_MemberList_inviteCommunity span {
background-image: url('$(res)/img/icon-invite-people.svg');
.mx_MemberList_inviteCommunity span::before {
mask-image: url('$(res)/img/icon-invite-people.svg');
}
.mx_MemberList_addRoomToCommunity span {
background-image: url('$(res)/img/icons-room-add.svg');
.mx_MemberList_addRoomToCommunity span::before {
mask-image: url('$(res)/img/icons-room-add.svg');
}

67
res/css/views/rooms/_NewRoomIntro.scss Normal file
View File

@ -0,0 +1,67 @@
/*
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_NewRoomIntro {
margin: 40px 0 48px 64px;
.mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
&::before, &::after {
content: unset;
}
}
.mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
}
.mx_NewRoomIntro_buttons {
margin-top: 28px;
.mx_AccessibleButton {
line-height: $font-24px;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 20px;
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: text-bottom;
}
}
.mx_NewRoomIntro_inviteButton::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
}
> h2 {
margin-top: 24px;
font-size: $font-24px;
font-weight: 600;
}
> p {
margin: 0;
font-size: $font-15px;
color: $secondary-fg-color;
}
}

7
res/css/views/rooms/_RoomHeader.scss
View File

@ -241,6 +241,13 @@ limitations under the License.
width: 26px;
}
.mx_RoomHeader_appsButton::before {
mask-image: url('$(res)/img/element-icons/room/apps.svg');
}
.mx_RoomHeader_appsButton_highlight::before {
background-color: $accent-color;
}
.mx_RoomHeader_searchButton::before {
mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
}

14
res/css/views/rooms/_RoomList.scss
View File

@ -24,6 +24,9 @@ limitations under the License.
.mx_RoomList_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
.mx_RoomList_iconDialpad::before {
mask-image: url('$(res)/img/element-icons/roomlist/dialpad.svg');
}
.mx_RoomList_explorePrompt {
margin: 4px 12px 4px;
@ -33,7 +36,6 @@ limitations under the License.
div:first-child {
font-weight: $font-semi-bold;
margin-bottom: 8px;
}
.mx_AccessibleButton {
@ -41,6 +43,9 @@ limitations under the License.
position: relative;
padding: 0 0 0 24px;
font-size: inherit;
margin-top: 8px;
display: block;
text-align: start;
&::before {
content: '';
@ -53,6 +58,13 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
&.mx_RoomList_explorePrompt_startChat::before {
mask-image: url('$(res)/img/element-icons/feedback.svg');
}
&.mx_RoomList_explorePrompt_explore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
}

35
res/css/views/rooms/_RoomSublist.scss
View File

@ -59,10 +59,6 @@ limitations under the License.
width: calc(100% - 22px);
}
&.mx_RoomSublist_headerContainer_stickyBottom {
bottom: 0;
}
// We don't have a top style because the top is dependent on the room list header's
// height, and is therefore calculated in JS.
// The class, mx_RoomSublist_headerContainer_stickyTop, is applied though.
@ -201,6 +197,9 @@ limitations under the License.
.mx_RoomSublist_resizerHandles {
flex: 0 0 4px;
display: flex;
justify-content: center;
width: 100%;
}
// Class name comes from the ResizableBox component
@ -211,17 +210,12 @@ limitations under the License.
border-radius: 3px;
// Override styles from library
width: unset !important;
max-width: 64px;
height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
// This is positioned directly below the 'show more' button.
position: absolute;
position: relative !important;
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_RoomSublist_hasMenuOpen {
@ -387,3 +381,22 @@ limitations under the License.
.mx_RoomSublist_addRoomTooltip {
margin-top: -3px;
}
.mx_RoomSublist_skeletonUI {
position: relative;
margin-left: 4px;
height: 288px;
&::before {
background: $roomsublist-skeleton-ui-bg;
width: 100%;
height: 100%;
content: '';
position: absolute;
mask-repeat: repeat-y;
mask-size: auto 48px;
mask-image: url('$(res)/img/element-icons/roomlist/skeleton-ui.svg');
}
}

6
res/css/views/rooms/_Stickers.scss
View File

@ -16,9 +16,13 @@
border-bottom: none;
}
.mx_AppTileMenuBar {
padding: 0;
}
iframe {
// Sticker picker depends on the fixed height previously used for all tiles
height: 273px;
height: 283px; // height of the popout minus the AppTile menu bar
}
}

2
res/css/views/settings/_AvatarSetting.scss
View File

@ -16,6 +16,7 @@ limitations under the License.
.mx_AvatarSetting_avatar {
width: 90px;
min-width: 90px; // so it doesn't get crushed by the flexbox in languages with longer words
height: 90px;
margin-top: 8px;
position: relative;
@ -84,6 +85,7 @@ limitations under the License.
.mx_AvatarSetting_avatarPlaceholder {
display: block;
height: 90px;
width: inherit;
border-radius: 90px;
cursor: pointer;
}

1
res/css/views/settings/_Notifications.scss
View File

@ -64,6 +64,7 @@ limitations under the License.
.mx_UserNotifSettings_notifTable {
display: table;
position: relative;
}
.mx_UserNotifSettings_notifTable .mx_Spinner {

6
res/css/views/settings/_ProfileSettings.scss
View File

@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ProfileSettings_controls_topic {
& > textarea {
resize: vertical;
}
}
.mx_ProfileSettings_profile {
display: flex;
}

27
res/css/views/toasts/_AnalyticsToast.scss Normal file
View File

@ -0,0 +1,27 @@
/*
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_AnalyticsToast {
.mx_AccessibleButton_kind_danger {
background: none;
color: $accent-color;
}
.mx_AccessibleButton_kind_primary {
background: $accent-color;
color: #ffffff;
}
}

13
res/css/views/voip/_CallContainer.scss
View File

@ -18,10 +18,7 @@ limitations under the License.
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);
// Disable pointer events for Jitsi widgets to function. Direct
// calls have their own cursor and behaviour, but we need to make
@ -33,11 +30,11 @@ limitations under the License.
pointer-events: initial; // restore pointer events so the user can leave/interact
cursor: pointer;
.mx_VideoView {
.mx_CallView_video {
width: 350px;
}
.mx_VideoView_localVideoFeed {
.mx_VideoFeed_local {
border-radius: 8px;
overflow: hidden;
}
@ -49,8 +46,10 @@ limitations under the License.
.mx_IncomingCallBox {
min-width: 250px;
background-color: $primary-bg-color;
background-color: $voipcall-plinth-color;
padding: 8px;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
border-radius: 8px;
pointer-events: initial; // restore pointer events so the user can accept/decline
cursor: pointer;
@ -59,7 +58,7 @@ limitations under the License.
display: flex;
direction: row;
img {
img, .mx_BaseAvatar_initial {
margin: 8px;
}

387
res/css/views/voip/_CallView.scss
View File

@ -15,80 +15,357 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallView_voice {
background-color: $accent-color;
color: $accent-fg-color;
cursor: pointer;
padding: 6px;
font-weight: bold;
.mx_CallView {
border-radius: 8px;
min-width: 200px;
background-color: $voipcall-plinth-color;
padding-left: 8px;
padding-right: 8px;
// XXX: CallContainer sets pointer-events: none - should probably be set back in a better place
pointer-events: initial;
}
display: flex;
align-items: center;
.mx_CallView_large {
padding-bottom: 10px;
margin: 5px 5px 5px 18px;
img {
margin: 4px;
margin-right: 10px;
}
> div {
display: flex;
flex-direction: column;
// Hacky vertical align
padding-top: 3px;
}
> div > p,
> div > h1 {
padding: 0;
margin: 0;
font-size: $font-13px;
line-height: $font-15px;
}
> div > p {
font-weight: bold;
}
> * {
flex-grow: 0;
flex-shrink: 0;
.mx_CallView_voice {
height: 360px;
}
}
.mx_CallView_hangup {
.mx_CallView_pip {
width: 320px;
padding-bottom: 8px;
margin-top: 10px;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
border-radius: 8px;
.mx_CallView_voice {
height: 180px;
}
.mx_CallView_callControls {
bottom: 0px;
}
.mx_CallView_callControls_button {
&::before {
width: 36px;
height: 36px;
}
}
.mx_CallView_voice_holdText {
padding-top: 10px;
padding-bottom: 25px;
}
}
.mx_CallView_voice {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: $inverted-bg-color;
border-radius: 8px;
}
.mx_CallView_voice_avatarsContainer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
div {
margin-left: 12px;
margin-right: 12px;
}
}
.mx_CallView_voice_hold {
// This masks the avatar image so when it's blurred, the edge is still crisp
.mx_CallView_voice_avatarContainer {
border-radius: 2000px;
overflow: hidden;
position: relative;
}
}
.mx_CallView_voice_holdText {
height: 20px;
padding-top: 20px;
padding-bottom: 15px;
color: $accent-fg-color;
.mx_AccessibleButton_hasKind {
padding: 0px;
font-weight: bold;
}
}
.mx_CallView_video {
width: 100%;
position: relative;
z-index: 30;
border-radius: 8px;
overflow: hidden;
}
.mx_CallView_video_hold {
overflow: hidden;
// we keep these around in the DOM: it saved wiring them up again when the call
// is resumed and keeps the container the right size
.mx_VideoFeed {
visibility: hidden;
}
}
.mx_CallView_video_holdBackground {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
filter: blur(20px);
&::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
}
}
right: 8px;
bottom: 10px;
.mx_CallView_video_holdContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
color: $accent-fg-color;
text-align: center;
height: 35px;
width: 35px;
&::before {
display: block;
margin-left: auto;
margin-right: auto;
content: '';
width: 40px;
height: 40px;
background-image: url('$(res)/img/voip/paused.svg');
background-position: center;
background-size: cover;
}
.mx_CallView_pip &::before {
width: 30px;
height: 30px;
}
.mx_AccessibleButton_hasKind {
padding: 0px;
}
}
border-radius: 35px;
.mx_CallView_header {
height: 44px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
}
background-color: $notice-primary-color;
.mx_CallView_header_callType {
font-size: 1.2rem;
font-weight: bold;
vertical-align: middle;
}
z-index: 101;
.mx_CallView_header_secondaryCallInfo {
&::before {
content: '·';
margin-left: 6px;
margin-right: 6px;
}
}
.mx_CallView_header_controls {
margin-left: auto;
}
.mx_CallView_header_button {
display: inline-block;
vertical-align: middle;
cursor: pointer;
&::before {
content: '';
position: absolute;
display: inline-block;
height: 20px;
width: 20px;
top: 6.5px;
left: 7.5px;
mask: url('$(res)/img/hangup.svg');
vertical-align: middle;
background-color: $secondary-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
background-size: contain;
background-color: $primary-fg-color;
mask-position: center;
}
}
.mx_CallView_header_button_fullscreen {
&::before {
mask-image: url('$(res)/img/element-icons/call/fullscreen.svg');
}
}
.mx_CallView_header_button_expand {
&::before {
mask-image: url('$(res)/img/element-icons/call/expand.svg');
}
}
.mx_CallView_header_callInfo {
margin-left: 12px;
margin-right: 16px;
}
.mx_CallView_header_roomName {
font-weight: bold;
font-size: 12px;
line-height: initial;
height: 15px;
}
.mx_CallView_secondaryCall_roomName {
margin-left: 4px;
}
.mx_CallView_header_callTypeSmall {
font-size: 12px;
color: $secondary-fg-color;
line-height: initial;
height: 15px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 240px;
}
.mx_CallView_header_phoneIcon {
display: inline-block;
margin-right: 6px;
height: 16px;
width: 16px;
vertical-align: middle;
&::before {
content: '';
display: inline-block;
vertical-align: top;
height: 16px;
width: 16px;
background-color: $warning-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
}
.mx_CallView_callControls {
position: absolute;
display: flex;
justify-content: center;
bottom: 5px;
width: 100%;
opacity: 1;
transition: opacity 0.5s;
}
.mx_CallView_callControls_hidden {
opacity: 0.001; // opacity 0 can cause a re-layout
pointer-events: none;
}
.mx_CallView_callControls_button {
cursor: pointer;
margin-left: 8px;
margin-right: 8px;
&::before {
content: '';
display: inline-block;
height: 48px;
width: 48px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
}
.mx_CallView_callControls_dialpad {
margin-right: auto;
&::before {
background-image: url('$(res)/img/voip/dialpad.svg');
}
}
.mx_CallView_callControls_button_dialpad_hidden {
margin-right: auto;
cursor: initial;
}
.mx_CallView_callControls_button_micOn {
&::before {
background-image: url('$(res)/img/voip/mic-on.svg');
}
}
.mx_CallView_callControls_button_micOff {
&::before {
background-image: url('$(res)/img/voip/mic-off.svg');
}
}
.mx_CallView_callControls_button_vidOn {
&::before {
background-image: url('$(res)/img/voip/vid-on.svg');
}
}
.mx_CallView_callControls_button_vidOff {
&::before {
background-image: url('$(res)/img/voip/vid-off.svg');
}
}
.mx_CallView_callControls_button_hangup {
&::before {
background-image: url('$(res)/img/voip/hangup.svg');
}
}
.mx_CallView_callControls_button_more {
margin-left: auto;
&::before {
background-image: url('$(res)/img/voip/more.svg');
}
}
.mx_CallView_callControls_button_more_hidden {
margin-left: auto;
cursor: initial;
}
.mx_CallView_callControls_button_invisible {
visibility: hidden;
pointer-events: none;
position: absolute;
}

62
res/css/views/voip/_DialPad.scss Normal file
View File

@ -0,0 +1,62 @@
/*
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_DialPad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.mx_DialPad_button {
width: 40px;
height: 40px;
background-color: $theme-button-bg-color;
border-radius: 40px;
font-size: 18px;
font-weight: 600;
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.mx_DialPad_deleteButton, .mx_DialPad_dialButton {
&::before {
content: '';
display: inline-block;
height: 40px;
width: 40px;
vertical-align: middle;
mask-repeat: no-repeat;
mask-size: 20px;
mask-position: center;
background-color: $primary-bg-color;
}
}
.mx_DialPad_deleteButton {
background-color: $notice-primary-color;
&::before {
mask-image: url('$(res)/img/element-icons/call/delete.svg');
mask-position: 9px; // delete icon is right-heavy so have to be slightly to the left to look centered
}
}
.mx_DialPad_dialButton {
background-color: $accent-color;
&::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
}

47
res/css/views/voip/_DialPadContextMenu.scss Normal file
View File

@ -0,0 +1,47 @@
/*
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_DialPadContextMenu_header {
margin-top: 12px;
margin-left: 12px;
margin-right: 12px;
}
.mx_DialPadContextMenu_title {
color: $muted-fg-color;
font-size: 12px;
font-weight: 600;
}
.mx_DialPadContextMenu_dialled {
height: 1em;
font-size: 18px;
font-weight: 600;
}
.mx_DialPadContextMenu_dialPad {
margin: 16px;
}
.mx_DialPadContextMenu_horizSep {
position: relative;
&::before {
content: '';
position: absolute;
width: 100%;
border-bottom: 1px solid $input-darker-bg-color;
}
}

74
res/css/views/voip/_DialPadModal.scss Normal file
View File

@ -0,0 +1,74 @@
/*
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_Dialog_dialPadWrapper .mx_Dialog {
padding: 0px;
}
.mx_DialPadModal {
width: 192px;
height: 368px;
}
.mx_DialPadModal_header {
margin-top: 12px;
margin-left: 12px;
margin-right: 12px;
}
.mx_DialPadModal_title {
color: $muted-fg-color;
font-size: 12px;
font-weight: 600;
}
.mx_DialPadModal_cancel {
float: right;
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
width: 14px;
height: 14px;
background-color: $dialog-close-fg-color;
cursor: pointer;
}
.mx_DialPadModal_field {
border: none;
margin: 0px;
}
.mx_DialPadModal_field input {
font-size: 18px;
font-weight: 600;
}
.mx_DialPadModal_dialPad {
margin-left: 16px;
margin-right: 16px;
margin-top: 16px;
}
.mx_DialPadModal_horizSep {
position: relative;
&::before {
content: '';
position: absolute;
width: 100%;
border-bottom: 1px solid $input-darker-bg-color;
}
}

28
res/css/views/voip/_VideoView.scss → res/css/views/voip/_VideoFeed.scss
View File

@ -1,5 +1,5 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2015, 2016, 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,36 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_VideoView {
width: 100%;
position: relative;
z-index: 30;
}
.mx_VideoView video {
width: 100%;
}
.mx_VideoView_remoteVideoFeed {
.mx_VideoFeed_remote {
width: 100%;
background-color: #000;
z-index: 50;
}
.mx_VideoView_localVideoFeed {
.mx_VideoFeed_local {
width: 25%;
height: 25%;
position: absolute;
left: 10px;
bottom: 10px;
right: 10px;
top: 10px;
z-index: 100;
border-radius: 4px;
}
.mx_VideoView_localVideoFeed video {
width: auto;
height: 100%;
}
.mx_VideoView_localVideoFeed.mx_VideoView_localVideoFeed_flipped video {
.mx_VideoFeed_mirror {
transform: scale(-1, 1);
}

3
res/img/element-icons/brands/apple.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9803 1.2796C17.0771 2.54383 16.6773 3.79601 15.8657 4.77022C15.0784 5.74949 13.8854 6.31354 12.629 6.3006C12.5491 5.07276 12.9605 3.86352 13.7727 2.93921C14.5952 2.00238 15.7404 1.40982 16.9803 1.2796ZM20.9539 8.70795C19.5086 9.59652 18.6192 11.1635 18.5974 12.86C18.5994 14.7794 19.7489 16.5115 21.5166 17.2592C21.1766 18.3636 20.6642 19.4073 19.9982 20.3517C19.1038 21.6896 18.1661 22.9967 16.6777 23.0208C15.9698 23.0372 15.492 22.8336 14.9941 22.6215C14.4747 22.4003 13.9335 22.1697 13.0867 22.1697C12.1885 22.1697 11.6231 22.4077 11.0778 22.6372C10.6065 22.8355 10.1503 23.0275 9.50727 23.0542C8.08982 23.1067 7.00654 21.6263 6.07964 20.3009C4.22703 17.5943 2.78444 12.6733 4.71844 9.32483C5.62662 7.69286 7.32468 6.65727 9.19136 6.59696C9.99528 6.58042 10.7667 6.89028 11.443 7.16193C11.9602 7.36969 12.4219 7.5551 12.7999 7.5551C13.1321 7.5551 13.5809 7.37701 14.1038 7.16946C14.9276 6.84251 15.9356 6.44246 16.9628 6.55027C18.5589 6.60021 20.038 7.39984 20.9539 8.70795Z" fill="#17191C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

6
res/img/element-icons/brands/element.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.12012 1.02C6.12012 0.45667 6.57679 0 7.14012 0C10.8957 0 13.9401 3.04446 13.9401 6.8C13.9401 7.36333 13.4834 7.82 12.9201 7.82C12.3568 7.82 11.9001 7.36333 11.9001 6.8C11.9001 4.17112 9.76899 2.04 7.14012 2.04C6.57679 2.04 6.12012 1.58333 6.12012 1.02Z" fill="#1E1E1E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8799 15.98C10.8799 16.5433 10.4232 17 9.85988 17C6.10435 17 3.05989 13.9555 3.05989 10.2C3.05989 9.63667 3.51656 9.18 4.07989 9.18C4.64322 9.18 5.09989 9.63667 5.09989 10.2C5.09989 12.8289 7.23101 14.96 9.85988 14.96C10.4232 14.96 10.8799 15.4167 10.8799 15.98Z" fill="#1E1E1E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.02 10.88C0.45667 10.88 -1.99617e-08 10.4233 -4.45856e-08 9.86C-2.08745e-07 6.10447 3.04446 3.06 6.8 3.06C7.36333 3.06 7.82 3.51667 7.82 4.08C7.82 4.64334 7.36333 5.1 6.8 5.1C4.17113 5.1 2.04 7.23113 2.04 9.86C2.04 10.4233 1.58333 10.88 1.02 10.88Z" fill="#1E1E1E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.98 6.12C16.5433 6.12 17 6.57666 17 7.14C17 10.8955 13.9555 13.94 10.2 13.94C9.63667 13.94 9.18 13.4833 9.18 12.92C9.18 12.3567 9.63667 11.9 10.2 11.9C12.8289 11.9 14.96 9.76887 14.96 7.14C14.96 6.57666 15.4167 6.12 15.98 6.12Z" fill="#1E1E1E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

9
res/img/element-icons/brands/facebook.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="1" width="22" height="22">
<path d="M2.10154 1.5H23.1003V22.3716H2.10154V1.5Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.1 11.999C23.1 6.20003 18.399 1.49902 12.6 1.49902C6.801 1.49902 2.1 6.20003 2.1 11.999C2.1 17.2399 5.9397 21.5838 10.9594 22.3715V15.0342H8.29336V11.999H10.9594V9.68574C10.9594 7.05418 12.5269 5.60059 14.9254 5.60059C16.0742 5.60059 17.2758 5.80566 17.2758 5.80566V8.38965H15.9518C14.6474 8.38965 14.2406 9.19903 14.2406 10.0294V11.999H17.1527L16.6872 15.0342H14.2406V22.3715C19.2603 21.5838 23.1 17.2399 23.1 11.999Z" fill="#1877F2"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6872 15.0342L17.1527 11.999H14.2406V10.0294C14.2406 9.19903 14.6474 8.38965 15.9518 8.38965H17.2758V5.80566C17.2758 5.80566 16.0742 5.60059 14.9254 5.60059C12.5269 5.60059 10.9594 7.05418 10.9594 9.68574V11.999H8.29336V15.0342H10.9594V22.3715C11.494 22.4553 12.0419 22.499 12.6 22.499C13.1581 22.499 13.706 22.4553 14.2406 22.3715V15.0342H16.6872Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
res/img/element-icons/brands/github.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.8421 7.10595C19.9703 5.6121 18.7876 4.42942 17.2939 3.55764C15.8 2.68581 14.169 2.25001 12.3999 2.25001C10.6311 2.25001 8.9996 2.68594 7.50597 3.55764C6.01212 4.42938 4.82953 5.6121 3.95765 7.10595C3.08592 8.59976 2.65002 10.231 2.65002 11.9997C2.65002 14.1242 3.26987 16.0346 4.50987 17.7315C5.74973 19.4284 7.35145 20.6027 9.3149 21.2543C9.54345 21.2967 9.71264 21.2669 9.82265 21.1656C9.9327 21.0641 9.98766 20.937 9.98766 20.7848C9.98766 20.7595 9.98548 20.531 9.98126 20.0993C9.9769 19.6676 9.97485 19.291 9.97485 18.9696L9.68285 19.0202C9.49667 19.0543 9.26181 19.0687 8.97826 19.0646C8.69484 19.0607 8.40061 19.031 8.09598 18.9757C7.79121 18.921 7.50775 18.7941 7.24536 18.5952C6.98311 18.3963 6.79693 18.1359 6.68688 17.8145L6.55993 17.5224C6.47531 17.3279 6.3421 17.1119 6.1601 16.875C5.97811 16.638 5.79406 16.4773 5.60789 16.3927L5.519 16.329C5.45978 16.2868 5.40482 16.2358 5.35399 16.1766C5.30321 16.1174 5.2652 16.0582 5.23981 15.9988C5.21437 15.9395 5.23545 15.8908 5.30326 15.8526C5.37107 15.8144 5.49361 15.7959 5.67143 15.7959L5.92524 15.8338C6.09451 15.8677 6.3039 15.9691 6.55366 16.1384C6.80329 16.3077 7.0085 16.5277 7.16933 16.7984C7.36408 17.1455 7.59873 17.4099 7.87392 17.5919C8.14889 17.7739 8.42613 17.8648 8.70537 17.8648C8.98461 17.8648 9.22579 17.8436 9.429 17.8015C9.63198 17.7592 9.82243 17.6955 10.0002 17.611C10.0764 17.0437 10.2838 16.6079 10.6222 16.3033C10.1399 16.2526 9.70619 16.1762 9.32099 16.0747C8.93601 15.9731 8.53818 15.8081 8.12777 15.5794C7.71714 15.3509 7.37649 15.0673 7.10574 14.7289C6.83495 14.3904 6.61271 13.9459 6.43934 13.3959C6.26588 12.8457 6.17913 12.211 6.17913 11.4916C6.17913 10.4674 6.51351 9.59578 7.18213 8.87633C6.86892 8.10629 6.89849 7.24304 7.27093 6.28668C7.51638 6.21043 7.88037 6.26765 8.36273 6.45801C8.84517 6.64845 9.1984 6.8116 9.42277 6.94686C9.64714 7.08208 9.82692 7.19666 9.96236 7.2896C10.7496 7.06963 11.562 6.95962 12.3998 6.95962C13.2377 6.95962 14.0503 7.06963 14.8376 7.2896L15.32 6.98505C15.6498 6.78185 16.0394 6.59563 16.4877 6.42635C16.9363 6.25716 17.2793 6.21056 17.5164 6.28682C17.8971 7.24322 17.931 8.10642 17.6177 8.87647C18.2863 9.59591 18.6208 10.4677 18.6208 11.4918C18.6208 12.2111 18.5337 12.8478 18.3605 13.4023C18.1871 13.9568 17.963 14.4008 17.688 14.7353C17.4127 15.0697 17.0699 15.3511 16.6595 15.5795C16.249 15.808 15.851 15.973 15.466 16.0747C15.0809 16.1763 14.6472 16.2527 14.1648 16.3035C14.6048 16.6842 14.8248 17.2851 14.8248 18.106V20.7845C14.8248 20.9367 14.8777 21.0637 14.9836 21.1652C15.0894 21.2665 15.2565 21.2964 15.485 21.2539C17.4487 20.6024 19.0505 19.4281 20.2903 17.7311C21.53 16.0343 22.15 14.1238 22.15 11.9993C22.1496 10.2309 21.7135 8.59976 20.8421 7.10595Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

9
res/img/element-icons/brands/gitlab.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0005 20.3296L15.3166 10.1293H8.68921L12.0005 20.3296Z" fill="#E24329"/>
<path d="M4.04348 10.1293L3.03364 13.2283C2.94226 13.5097 3.04095 13.8203 3.28214 13.9957L11.9996 20.3296L4.04348 10.1293Z" fill="#FCA326"/>
<path d="M4.04248 10.1289H8.68727L6.68828 3.98572C6.58597 3.67143 6.1401 3.67143 6.03411 3.98572L4.04248 10.1289Z" fill="#E24329"/>
<path d="M19.9602 10.1293L20.9664 13.2283C21.0577 13.5097 20.9591 13.8203 20.7179 13.9957L11.9991 20.3296L19.9602 10.1293Z" fill="#FCA326"/>
<path d="M19.9616 10.1289H15.3168L17.3121 3.98572C17.4144 3.67143 17.8603 3.67143 17.9663 3.98572L19.9616 10.1289Z" fill="#E24329"/>
<path d="M11.9991 20.3296L15.3153 10.1293H19.9601L11.9991 20.3296Z" fill="#FC6D26"/>
<path d="M11.9985 20.3296L4.04248 10.1293H8.68727L11.9985 20.3296Z" fill="#FC6D26"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 905 B

6
res/img/element-icons/brands/google.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.501 12.2333C22.501 11.37 22.4296 10.74 22.2748 10.0867H12.2153V13.9833H18.12C18.001 14.9517 17.3582 16.41 15.9296 17.3899L15.9096 17.5204L19.0902 19.9351L19.3106 19.9567C21.3343 18.125 22.501 15.43 22.501 12.2333Z" fill="#4285F4"/>
<path d="M12.2147 22.5001C15.1075 22.5001 17.5361 21.5667 19.3099 19.9567L15.929 17.39C15.0242 18.0083 13.8099 18.44 12.2147 18.44C9.38142 18.44 6.97669 16.6083 6.11947 14.0767L5.99382 14.0871L2.68656 16.5955L2.64331 16.7133C4.40519 20.1433 8.02423 22.5001 12.2147 22.5001Z" fill="#34A853"/>
<path d="M6.12022 14.0767C5.89403 13.4234 5.76313 12.7233 5.76313 12C5.76313 11.2767 5.89403 10.5767 6.10832 9.92337L6.10233 9.78423L2.75361 7.2356L2.64405 7.28667C1.91789 8.71002 1.50122 10.3084 1.50122 12C1.50122 13.6917 1.91789 15.29 2.64405 16.7133L6.12022 14.0767Z" fill="#FBBC05"/>
<path d="M12.2148 5.55997C14.2267 5.55997 15.5838 6.41163 16.3576 7.12335L19.3814 4.23C17.5243 2.53834 15.1076 1.5 12.2148 1.5C8.02426 1.5 4.4052 3.85665 2.64331 7.28662L6.10759 9.92332C6.97671 7.39166 9.38146 5.55997 12.2148 5.55997Z" fill="#EB4335"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
res/img/element-icons/brands/twitter.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.04155 21C6.6153 21 4.35363 20.2943 2.45 19.0767C4.06624 19.1813 6.91855 18.9308 8.69268 17.2386C6.0238 17.1161 4.82019 15.0692 4.6632 14.1945C4.88997 14.2819 5.97147 14.3869 6.582 14.142C3.51192 13.3722 3.04094 10.678 3.1456 9.85573C3.72124 10.2581 4.69809 10.3981 5.08185 10.3631C2.22109 8.31618 3.25027 5.23707 3.75613 4.57226C5.80911 7.4165 8.8859 9.01393 12.6923 9.10278C12.6205 8.78802 12.5826 8.46032 12.5826 8.12373C12.5826 5.70819 14.5351 3.75 16.9435 3.75C18.2019 3.75 19.3358 4.28457 20.1318 5.13963C20.9727 4.94258 22.2382 4.4813 22.8569 4.0824C22.5451 5.20208 21.5742 6.13612 20.9869 6.48231C20.9918 6.49408 20.9821 6.47048 20.9869 6.48231C21.5028 6.40428 22.8986 6.13603 23.45 5.76192C23.1773 6.39094 22.148 7.4368 21.3033 8.02232C21.4604 14.9535 16.1574 21 9.04155 21Z" fill="#1D9BF0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 916 B

10
res/img/element-icons/call/delete.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M18.3333 2.49951H5.83333C5.25833 2.49951 4.80833 2.79118 4.50833 3.23285L0 9.99951L4.50833 16.7578C4.80833 17.1995 5.25833 17.4995 5.83333 17.4995H18.3333C19.25 17.4995 20 16.7495 20 15.8328V4.16618C20 3.24951 19.25 2.49951 18.3333 2.49951ZM15.8333 12.9912L14.6583 14.1662L11.6667 11.1745L8.675 14.1662L7.5 12.9912L10.4917 9.99951L7.5 7.00784L8.675 5.83284L11.6667 8.82451L14.6583 5.83284L15.8333 7.00784L12.8417 9.99951L15.8333 12.9912Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 692 B

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

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 19H18C18.55 19 19 18.55 19 18V6C19 5.45 18.55 5 18 5H13C12.45 5 12 4.55 12 4C12 3.45 12.45 3 13 3H19C20.11 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V13C3 12.45 3.45 12 4 12C4.55 12 5 12.45 5 13V18C5 18.55 5.45 19 6 19ZM10 4C10 4.55 9.55 5 9 5H6.41L15.54 14.13C15.93 14.52 15.93 15.15 15.54 15.54C15.15 15.93 14.52 15.93 14.13 15.54L5 6.41V9C5 9.55 4.55 10 4 10C3.45 10 3 9.55 3 9V4C3 3.44772 3.44772 3 4 3H9C9.55 3 10 3.45 10 4Z" fill="#737D8C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 580 B

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

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

Before

Width:  |  Height:  |  Size: 791 B

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

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

Before

Width:  |  Height:  |  Size: 913 B

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

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

Before

Width:  |  Height:  |  Size: 587 B

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