diff --git a/.eslintignore b/.eslintignore
index c4f7298047..e453170087 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -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/
diff --git a/.eslintignore.errorfiles b/.eslintignore.errorfiles
index aa2a6b7f0b..1c0a3d1254 100644
--- a/.eslintignore.errorfiles
+++ b/.eslintignore.errorfiles
@@ -1,37 +1,16 @@
# autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
-src/ImageUtils.js
src/Markdown.js
-src/Rooms.js
-src/Unread.js
src/Velociraptor.js
src/components/structures/RoomDirectory.js
-src/components/structures/ScrollPanel.js
-src/components/structures/UploadBar.js
-src/components/views/elements/AddressSelector.js
-src/components/views/elements/DirectorySearchBox.js
-src/components/views/messages/MFileBody.js
-src/components/views/messages/TextualBody.js
-src/components/views/rooms/AuxPanel.js
-src/components/views/rooms/LinkPreviewWidget.js
src/components/views/rooms/MemberList.js
-src/components/views/rooms/RoomPreviewBar.js
-src/components/views/settings/ChangeAvatar.js
-src/components/views/settings/DevicesPanel.js
-src/components/views/settings/Notifications.js
-src/rageshake/rageshake.js
src/ratelimitedfunc.js
src/utils/DMRoomMap.js
-src/utils/DecryptFile.js
-src/utils/DirectoryUtils.js
src/utils/MultiInviter.js
-src/utils/Receipt.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/
diff --git a/.eslintrc.js b/.eslintrc.js
index bc2a142c2d..99695b7a03 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -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
diff --git a/.gitignore b/.gitignore
index 33e8bfc7ac..e1dd7726e1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@ package-lock.json
/src/component-index.js
.DS_Store
+*.tmp
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a22954c3f..c31eedf93b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,810 @@
+Changes in [3.15.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.15.0) (2021-03-01)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.15.0-rc.1...v3.15.0)
+
+## Security notice
+
+matrix-react-sdk 3.15.0 fixes a low severity issue (CVE-2021-21320) where the
+user content sandbox can be abused to trick users into opening unexpected
+documents. The content is opened with a `blob` origin that cannot access Matrix
+user data, so messages and secrets are not at risk. Thanks to @keerok for
+responsibly disclosing this via Matrix's Security Disclosure Policy.
+
+## All changes
+
+ * Upgrade to JS SDK 9.8.0
+
+Changes in [3.15.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.15.0-rc.1) (2021-02-24)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.14.0...v3.15.0-rc.1)
+
+ * Upgrade to JS SDK 9.8.0-rc.1
+ * Translations update from Weblate
+ [\#5683](https://github.com/matrix-org/matrix-react-sdk/pull/5683)
+ * Fix object diffing when objects have different keys
+ [\#5681](https://github.com/matrix-org/matrix-react-sdk/pull/5681)
+ * Add if it's missing
+ [\#5673](https://github.com/matrix-org/matrix-react-sdk/pull/5673)
+ * Add email only if the verification is complete
+ [\#5629](https://github.com/matrix-org/matrix-react-sdk/pull/5629)
+ * Fix portrait videocalls
+ [\#5676](https://github.com/matrix-org/matrix-react-sdk/pull/5676)
+ * Tweak code block icon positions
+ [\#5643](https://github.com/matrix-org/matrix-react-sdk/pull/5643)
+ * Revert "Improve URL preview formatting and image upload thumbnail size"
+ [\#5677](https://github.com/matrix-org/matrix-react-sdk/pull/5677)
+ * Fix context menu leaving visible area
+ [\#5644](https://github.com/matrix-org/matrix-react-sdk/pull/5644)
+ * Jitsi conferences names, take 3
+ [\#5675](https://github.com/matrix-org/matrix-react-sdk/pull/5675)
+ * Update isUserOnDarkTheme to take use_system_theme in account
+ [\#5670](https://github.com/matrix-org/matrix-react-sdk/pull/5670)
+ * Discard some dead code
+ [\#5665](https://github.com/matrix-org/matrix-react-sdk/pull/5665)
+ * Add developer tool to explore and edit settings
+ [\#5664](https://github.com/matrix-org/matrix-react-sdk/pull/5664)
+ * Use and create new room helpers
+ [\#5663](https://github.com/matrix-org/matrix-react-sdk/pull/5663)
+ * Clear message previews when the maximum limit is reached for history
+ [\#5661](https://github.com/matrix-org/matrix-react-sdk/pull/5661)
+ * VoIP virtual rooms, mk II
+ [\#5639](https://github.com/matrix-org/matrix-react-sdk/pull/5639)
+ * Disable chat effects when reduced motion preferred
+ [\#5660](https://github.com/matrix-org/matrix-react-sdk/pull/5660)
+ * Improve URL preview formatting and image upload thumbnail size
+ [\#5637](https://github.com/matrix-org/matrix-react-sdk/pull/5637)
+ * Fix border radius when the panel is collapsed
+ [\#5641](https://github.com/matrix-org/matrix-react-sdk/pull/5641)
+ * Use a more generic layout setting - useIRCLayout → layout
+ [\#5571](https://github.com/matrix-org/matrix-react-sdk/pull/5571)
+ * Remove redundant lockOrigin parameter from usercontent
+ [\#5657](https://github.com/matrix-org/matrix-react-sdk/pull/5657)
+ * Set ICE candidate pool size option
+ [\#5655](https://github.com/matrix-org/matrix-react-sdk/pull/5655)
+ * Prepare to encrypt when a call arrives
+ [\#5654](https://github.com/matrix-org/matrix-react-sdk/pull/5654)
+ * Use config for host signup branding
+ [\#5650](https://github.com/matrix-org/matrix-react-sdk/pull/5650)
+ * Use randomly generated conference names for Jitsi
+ [\#5649](https://github.com/matrix-org/matrix-react-sdk/pull/5649)
+ * Modified regex to account for an immediate new line after slash commands
+ [\#5647](https://github.com/matrix-org/matrix-react-sdk/pull/5647)
+ * Fix codeblock scrollbar color for non-Firefox
+ [\#5642](https://github.com/matrix-org/matrix-react-sdk/pull/5642)
+ * Fix codeblock scrollbar colors
+ [\#5630](https://github.com/matrix-org/matrix-react-sdk/pull/5630)
+ * Added loading and disabled the button while searching for server
+ [\#5634](https://github.com/matrix-org/matrix-react-sdk/pull/5634)
+
+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 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)
diff --git a/README.md b/README.md
index 4db02418ba..73afe34df0 100644
--- a/README.md
+++ b/README.md
@@ -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
===============
diff --git a/code_style.md b/code_style.md
index fe04d2cc3d..5747540a76 100644
--- a/code_style.md
+++ b/code_style.md
@@ -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?
diff --git a/docs/widget-layouts.md b/docs/widget-layouts.md
new file mode 100644
index 0000000000..e7f72e2001
--- /dev/null
+++ b/docs/widget-layouts.md
@@ -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.
diff --git a/package.json b/package.json
index 3f073ce59c..7ed1b272da 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
- "version": "3.6.0",
+ "version": "3.15.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.3",
+ "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",
@@ -100,75 +101,80 @@
"tar-js": "^0.3.0",
"text-encoding-utf-8": "^1.0.2",
"url": "^0.11.0",
- "velocity-animate": "^1.5.2",
+ "velocity-animate": "^2.0.6",
"what-input": "^5.2.10",
"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.3",
- "@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": "^26.5.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",
- "lolex": "^5.1.2",
"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": [
- "/test/**/*-test.js"
+ "/test/**/*-test.[jt]s"
],
"setupFiles": [
"jest-canvas-mock"
diff --git a/release.sh b/release.sh
index e2cefcbe74..4742f00dea 100755
--- a/release.sh
+++ b/release.sh
@@ -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
diff --git a/res/css/_common.scss b/res/css/_common.scss
index 666129af34..6e9d252659 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -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 `` 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 {
@@ -323,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;
}
@@ -348,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 {
@@ -362,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
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 18cf0c52d8..d894688cac 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -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";
@@ -25,8 +27,10 @@
@import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss";
+@import "./structures/_SpacePanel.scss";
+@import "./structures/_SpaceRoomDirectory.scss";
+@import "./structures/_SpaceRoomView.scss";
@import "./structures/_TabbedView.scss";
-@import "./structures/_GroupFilterPanel.scss";
@import "./structures/_ToastContainer.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_UserMenu.scss";
@@ -44,18 +48,18 @@
@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/_AddExistingToSpaceDialog.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
@import "./views/dialogs/_BugReportDialog.scss";
@@ -69,25 +73,32 @@
@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/_SettingsDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
+@import "./views/dialogs/_SpaceSettingsDialog.scss";
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
@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";
@@ -101,17 +112,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";
@@ -120,6 +132,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";
@@ -136,6 +150,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";
@@ -179,6 +194,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";
@@ -201,6 +217,7 @@
@import "./views/settings/_DevicesPanel.scss";
@import "./views/settings/_E2eAdvancedPanel.scss";
@import "./views/settings/_EmailAddresses.scss";
+@import "./views/settings/_SpellCheckLanguages.scss";
@import "./views/settings/_IntegrationManager.scss";
@import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss";
@@ -221,9 +238,16 @@
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
+@import "./views/spaces/_SpaceBasicSettings.scss";
+@import "./views/spaces/_SpaceCreateMenu.scss";
+@import "./views/spaces/_SpacePublicShare.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";
diff --git a/res/css/structures/_CustomRoomTagPanel.scss b/res/css/structures/_CustomRoomTagPanel.scss
index 96813cccea..be1138cf5b 100644
--- a/res/css/structures/_CustomRoomTagPanel.scss
+++ b/res/css/structures/_CustomRoomTagPanel.scss
@@ -16,11 +16,6 @@ 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: $groupFilterPanel-bg-color;
max-height: 40vh;
diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss
index 04527bff48..9f72213d1a 100644
--- a/res/css/structures/_HomePage.scss
+++ b/res/css/structures/_HomePage.scss
@@ -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');
}
}
}
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 885dd77a84..f1f27014ee 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -15,6 +15,7 @@ limitations under the License.
*/
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
+$roomListCollapsedWidth: 68px;
.mx_LeftPanel {
background-color: $roomlist-bg-color;
@@ -32,22 +33,17 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
// Create another flexbox so the GroupFilterPanel fills the container
display: flex;
+ flex-direction: column;
// GroupFilterPanel handles its own CSS
}
- &:not(.mx_LeftPanel_hasGroupFilterPanel) {
- .mx_LeftPanel_roomListContainer {
- width: 100%;
- }
- }
-
// Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc
.mx_LeftPanel_roomListContainer {
- width: calc(100% - $groupFilterPanelWidth);
background-color: $roomlist-bg-color;
-
+ flex: 1 0 0;
+ min-width: 0;
// Create another flexbox (this time a column) for the room list components
display: flex;
flex-direction: column;
@@ -167,17 +163,15 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
// These styles override the defaults for the minimized (66px) layout
&.mx_LeftPanel_minimized {
min-width: unset;
-
- // We have to forcefully set the width to override the resizer's style attribute.
- &.mx_LeftPanel_hasGroupFilterPanel {
- width: calc(68px + $groupFilterPanelWidth) !important;
- }
- &:not(.mx_LeftPanel_hasGroupFilterPanel) {
- width: 68px !important;
- }
+ width: unset !important;
.mx_LeftPanel_roomListContainer {
- width: 68px;
+ width: $roomListCollapsedWidth;
+
+ .mx_LeftPanel_userHeader {
+ flex-direction: row;
+ justify-content: center;
+ }
.mx_LeftPanel_filterContainer {
// Organize the flexbox into a centered column layout
diff --git a/res/css/structures/_LeftPanelWidget.scss b/res/css/structures/_LeftPanelWidget.scss
new file mode 100644
index 0000000000..6e2d99bb37
--- /dev/null
+++ b/res/css/structures/_LeftPanelWidget.scss
@@ -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;
+}
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index f4e46a8e94..812a7f8472 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -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;
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 5bf0d953f3..5515fe4060 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -160,3 +160,20 @@ limitations under the License.
mask-position: center;
}
}
+
+.mx_RightPanel_scopeHeader {
+ margin: 24px;
+ text-align: center;
+ font-weight: $font-semi-bold;
+ font-size: $font-18px;
+ line-height: $font-22px;
+
+ .mx_BaseAvatar {
+ margin-right: 8px;
+ vertical-align: middle;
+ }
+
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+ }
+}
diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss
index 29e6fecd34..89cb21b7a6 100644
--- a/res/css/structures/_RoomDirectory.scss
+++ b/res/css/structures/_RoomDirectory.scss
@@ -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;
}
diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss
index cd4390ee5c..5bf2aee3ae 100644
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@@ -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;
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 572c7166d2..36bf96359b 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -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;
}
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
new file mode 100644
index 0000000000..9937117086
--- /dev/null
+++ b/res/css/structures/_SpacePanel.scss
@@ -0,0 +1,349 @@
+/*
+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.
+*/
+
+$topLevelHeight: 32px;
+$nestedHeight: 24px;
+$gutterSize: 17px;
+$activeStripeSize: 4px;
+$activeBorderTransparentGap: 2px;
+
+$activeBackgroundColor: $roomtile-selected-bg-color;
+$activeBorderColor: $secondary-fg-color;
+
+.mx_SpacePanel {
+ flex: 0 0 auto;
+ background-color: $groupFilterPanel-bg-color;
+ padding: 0;
+ margin: 0;
+
+ // Create another flexbox so the Panel fills the container
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+
+ .mx_SpacePanel_spaceTreeWrapper {
+ flex: 1;
+ }
+
+ .mx_SpacePanel_toggleCollapse {
+ flex: 0 0 auto;
+ width: 40px;
+ height: 40px;
+ mask-position: center;
+ mask-size: 32px;
+ mask-repeat: no-repeat;
+ margin-left: $gutterSize;
+ margin-bottom: 12px;
+ background-color: $roomlist-header-color;
+ mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
+
+ &.expanded {
+ transform: scaleX(-1);
+ }
+ }
+
+ ul {
+ margin: 0;
+ list-style: none;
+ padding: 0;
+ padding-left: 16px;
+ }
+
+ .mx_AutoHideScrollbar {
+ padding: 16px 12px 16px 0;
+ }
+
+ .mx_SpaceButton_toggleCollapse {
+ cursor: pointer;
+ }
+
+ .mx_SpaceItem.collapsed {
+ .mx_SpaceButton {
+ .mx_NotificationBadge {
+ right: -4px;
+ top: -4px;
+ }
+ }
+
+ & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
+ transform: rotate(-90deg);
+ }
+
+ & > .mx_SpaceTreeLevel {
+ display: none;
+ }
+ }
+
+ .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
+ margin-left: $gutterSize;
+ }
+
+ .mx_SpaceButton {
+ border-radius: 8px;
+ position: relative;
+ margin-bottom: 2px;
+ display: flex;
+ align-items: center;
+ padding: 4px;
+
+ &.mx_SpaceButton_active {
+ &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
+ background-color: $activeBackgroundColor;
+ border-radius: 8px;
+ }
+
+ &.mx_SpaceButton_narrow {
+ .mx_BaseAvatar, .mx_SpaceButton_avatarPlaceholder {
+ border: 2px $activeBorderColor solid;
+ border-radius: 11px;
+ }
+ }
+ }
+
+ .mx_SpaceButton_selectionWrapper {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ }
+
+ .mx_SpaceButton_name {
+ flex: 1;
+ margin-left: 8px;
+ white-space: nowrap;
+ display: block;
+ max-width: 150px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding-right: 8px;
+ font-size: $font-14px;
+ line-height: $font-18px;
+ }
+
+ .mx_SpaceButton_toggleCollapse {
+ width: calc($gutterSize - $activeStripeSize);
+ margin-left: 1px;
+ height: 20px;
+ mask-position: center;
+ mask-size: 20px;
+ mask-repeat: no-repeat;
+ background-color: $roomlist-header-color;
+ mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+ }
+
+ .mx_SpaceButton_icon {
+ width: $topLevelHeight;
+ min-width: $topLevelHeight;
+ height: $topLevelHeight;
+ border-radius: 8px;
+ position: relative;
+
+ &::before {
+ position: absolute;
+ content: '';
+ width: $topLevelHeight;
+ height: $topLevelHeight;
+ top: 0;
+ left: 0;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-size: 18px;
+ }
+ }
+
+ &.mx_SpaceButton_home .mx_SpaceButton_icon {
+ background-color: #ffffff;
+
+ &::before {
+ background-color: #3f3d3d;
+ mask-image: url('$(res)/img/element-icons/home.svg');
+ }
+ }
+
+ .mx_SpaceButton_avatarPlaceholder {
+ border: $activeBorderTransparentGap transparent solid;
+ padding: $activeBorderTransparentGap;
+ }
+
+ &.mx_SpaceButton_new .mx_SpaceButton_icon {
+ background-color: $accent-color;
+ transition: all .1s ease-in-out; // TODO transition
+
+ &::before {
+ background-color: #ffffff;
+ mask-image: url('$(res)/img/element-icons/plus.svg');
+ transition: all .2s ease-in-out; // TODO transition
+ }
+ }
+
+ &.mx_SpaceButton_newCancel .mx_SpaceButton_icon {
+ background-color: $icon-button-color;
+
+ &::before {
+ transform: rotate(45deg);
+ }
+ }
+
+ .mx_BaseAvatar {
+ /* moving the border-radius to this element from _image
+ element so we can add a border to it without the initials being displaced */
+ overflow: hidden;
+ border: 2px transparent solid;
+ padding: $activeBorderTransparentGap;
+
+ .mx_BaseAvatar_initial {
+ top: $activeBorderTransparentGap;
+ left: $activeBorderTransparentGap;
+ }
+
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+ }
+ }
+
+ .mx_SpaceButton_menuButton {
+ width: 20px;
+ min-width: 20px; // yay flex
+ height: 20px;
+ margin-top: auto;
+ margin-bottom: auto;
+ position: relative;
+ display: none;
+
+ &::before {
+ top: 2px;
+ left: 2px;
+ content: '';
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ mask-image: url('$(res)/img/element-icons/context-menu.svg');
+ background: $primary-fg-color;
+ }
+ }
+ }
+
+ .mx_SpacePanel_badgeContainer {
+ height: 16px;
+ // don't set width so that it takes no space when there is no badge to show
+ margin: auto 0; // vertically align
+
+ // Create a flexbox to make aligning dot badges easier
+ display: flex;
+ align-items: center;
+
+ .mx_NotificationBadge {
+ margin: 0 2px; // centering
+ }
+
+ .mx_NotificationBadge_dot {
+ // make the smaller dot occupy the same width for centering
+ margin-left: 7px;
+ margin-right: 7px;
+ }
+ }
+
+ &.collapsed {
+ .mx_SpaceButton {
+ .mx_SpacePanel_badgeContainer {
+ position: absolute;
+ right: 0px;
+ top: 2px;
+ }
+ }
+ }
+
+ &:not(.collapsed) {
+ .mx_SpaceButton:hover,
+ .mx_SpaceButton:focus-within,
+ .mx_SpaceButton_hasMenuOpen {
+ // Hide the badge container on hover because it'll be a menu button
+ .mx_SpacePanel_badgeContainer {
+ width: 0;
+ height: 0;
+ display: none;
+ }
+
+ .mx_SpaceButton_menuButton {
+ display: block;
+ }
+ }
+ }
+
+ /* root space buttons are bigger and not indented */
+ & > .mx_AutoHideScrollbar {
+ & > .mx_SpaceButton {
+ height: $topLevelHeight;
+
+ &.mx_SpaceButton_active::before {
+ height: $topLevelHeight;
+ }
+ }
+
+ & > ul {
+ padding-left: 0;
+ }
+ }
+}
+
+.mx_SpacePanel_contextMenu {
+ .mx_SpacePanel_contextMenu_header {
+ margin: 12px 16px 12px;
+ font-weight: $font-semi-bold;
+ font-size: $font-15px;
+ line-height: $font-18px;
+ }
+
+ .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
+ color: $accent-color;
+
+ .mx_SpacePanel_iconInvite::before {
+ background-color: $accent-color;
+ mask-image: url('$(res)/img/element-icons/room/invite.svg');
+ }
+ }
+
+ .mx_SpacePanel_iconSettings::before {
+ mask-image: url('$(res)/img/element-icons/settings.svg');
+ }
+
+ .mx_SpacePanel_iconLeave::before {
+ mask-image: url('$(res)/img/element-icons/leave.svg');
+ }
+
+ .mx_SpacePanel_iconHome::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
+ }
+
+ .mx_SpacePanel_iconMembers::before {
+ mask-image: url('$(res)/img/element-icons/room/members.svg');
+ }
+
+ .mx_SpacePanel_iconPlus::before {
+ mask-image: url('$(res)/img/element-icons/plus.svg');
+ }
+
+ .mx_SpacePanel_iconExplore::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+ }
+}
+
+
+.mx_SpacePanel_sharePublicSpace {
+ margin: 0;
+}
diff --git a/res/css/structures/_SpaceRoomDirectory.scss b/res/css/structures/_SpaceRoomDirectory.scss
new file mode 100644
index 0000000000..5cb91820cf
--- /dev/null
+++ b/res/css/structures/_SpaceRoomDirectory.scss
@@ -0,0 +1,231 @@
+/*
+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_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
+ max-width: 960px;
+ height: 100%;
+}
+
+.mx_SpaceRoomDirectory {
+ height: 100%;
+ margin-bottom: 12px;
+ color: $primary-fg-color;
+ word-break: break-word;
+ display: flex;
+ flex-direction: column;
+
+ .mx_Dialog_title {
+ display: flex;
+
+ .mx_BaseAvatar {
+ margin-right: 16px;
+ }
+
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+ }
+
+ > div {
+ > h1 {
+ font-weight: $font-semi-bold;
+ font-size: $font-18px;
+ line-height: $font-22px;
+ margin: 0;
+ }
+
+ > div {
+ color: $secondary-fg-color;
+ font-size: $font-15px;
+ line-height: $font-24px;
+ }
+ }
+ }
+
+ .mx_Dialog_content {
+ // TODO fix scrollbar
+ //display: flex;
+ //flex-direction: column;
+ //height: calc(100% - 80px);
+
+ .mx_AccessibleButton_kind_link {
+ padding: 0;
+ }
+
+ .mx_SearchBox {
+ margin: 24px 0 28px;
+ }
+
+ .mx_SpaceRoomDirectory_listHeader {
+ display: flex;
+ font-size: $font-12px;
+ line-height: $font-15px;
+ color: $secondary-fg-color;
+
+ .mx_FormButton {
+ margin-bottom: 8px;
+ }
+
+ > span {
+ margin: auto 0 0 auto;
+ }
+ }
+ }
+}
+
+.mx_SpaceRoomDirectory_list {
+ margin-top: 8px;
+
+ .mx_SpaceRoomDirectory_roomCount {
+ > h3 {
+ display: inline;
+ font-weight: $font-semi-bold;
+ font-size: $font-18px;
+ line-height: $font-22px;
+ color: $primary-fg-color;
+ }
+
+ > span {
+ margin-left: 8px;
+ font-size: $font-15px;
+ line-height: $font-24px;
+ color: $secondary-fg-color;
+ }
+ }
+
+ .mx_SpaceRoomDirectory_subspace {
+ margin-top: 8px;
+
+ .mx_SpaceRoomDirectory_subspace_info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: 8px;
+ color: $secondary-fg-color;
+ font-weight: $font-semi-bold;
+ font-size: $font-12px;
+ line-height: $font-15px;
+
+ .mx_BaseAvatar {
+ margin-right: 12px;
+ vertical-align: middle;
+ }
+
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+ }
+
+ .mx_SpaceRoomDirectory_actions {
+ text-align: right;
+ height: min-content;
+ margin-left: auto;
+ margin-right: 16px;
+ }
+ }
+
+ .mx_SpaceRoomDirectory_subspace_children {
+ margin-left: 12px;
+ border-left: 2px solid $space-button-outline-color;
+ padding-left: 24px;
+ }
+ }
+
+ .mx_SpaceRoomDirectory_roomTile {
+ padding: 16px;
+ border-radius: 8px;
+ border: 1px solid $space-button-outline-color;
+ margin: 8px 0 16px;
+ display: flex;
+ min-height: 76px;
+ box-sizing: border-box;
+
+ &.mx_AccessibleButton:hover {
+ background-color: rgba(141, 151, 165, 0.1);
+ }
+
+ .mx_BaseAvatar {
+ margin-right: 16px;
+ margin-top: 6px;
+ }
+
+ .mx_SpaceRoomDirectory_roomTile_info {
+ display: inline-block;
+ font-size: $font-15px;
+ flex-grow: 1;
+ height: min-content;
+ margin: auto 0;
+
+ .mx_SpaceRoomDirectory_roomTile_name {
+ font-weight: $font-semi-bold;
+ line-height: $font-18px;
+ }
+ .mx_SpaceRoomDirectory_roomTile_topic {
+ line-height: $font-24px;
+ color: $secondary-fg-color;
+ }
+ }
+
+ .mx_SpaceRoomDirectory_roomTile_memberCount {
+ position: relative;
+ margin: auto 0 auto 24px;
+ padding: 0 0 0 28px;
+ line-height: $font-24px;
+ display: inline-block;
+ width: 32px;
+
+ &::before {
+ position: absolute;
+ content: '';
+ width: 24px;
+ height: 24px;
+ top: 0;
+ left: 0;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ background-color: $secondary-fg-color;
+ mask-image: url('$(res)/img/element-icons/community-members.svg');
+ }
+ }
+
+ .mx_SpaceRoomDirectory_actions {
+ width: 180px;
+ text-align: right;
+ height: min-content;
+ margin: auto 0 auto 28px;
+
+ .mx_AccessibleButton {
+ vertical-align: middle;
+
+ & + .mx_AccessibleButton {
+ margin-left: 24px;
+ }
+ }
+ }
+ }
+
+ .mx_SpaceRoomDirectory_actions {
+ .mx_SpaceRoomDirectory_actionsText {
+ font-weight: normal;
+ font-size: $font-12px;
+ line-height: $font-15px;
+ color: $secondary-fg-color;
+ }
+
+ .mx_Checkbox {
+ display: inline-block;
+ }
+ }
+}
diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss
new file mode 100644
index 0000000000..38310d39a9
--- /dev/null
+++ b/res/css/structures/_SpaceRoomView.scss
@@ -0,0 +1,336 @@
+/*
+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.
+*/
+
+$SpaceRoomViewInnerWidth: 428px;
+
+.mx_SpaceRoomView {
+ .mx_MainSplit > div:first-child {
+ padding: 80px 60px;
+ flex-grow: 1;
+
+ h1 {
+ margin: 0;
+ font-size: $font-24px;
+ font-weight: $font-semi-bold;
+ color: $primary-fg-color;
+ width: max-content;
+ }
+
+ .mx_SpaceRoomView_description {
+ font-size: $font-15px;
+ color: $secondary-fg-color;
+ margin-top: 12px;
+ margin-bottom: 24px;
+ }
+
+ .mx_SpaceRoomView_buttons {
+ display: block;
+ margin-top: 44px;
+ width: $SpaceRoomViewInnerWidth;
+ text-align: right; // button alignment right
+
+ .mx_FormButton {
+ padding: 8px 22px;
+ margin-left: 16px;
+ }
+ }
+
+ .mx_Field {
+ max-width: $SpaceRoomViewInnerWidth;
+
+ & + .mx_Field {
+ margin-top: 28px;
+ }
+ }
+
+ .mx_SpaceRoomView_errorText {
+ font-weight: $font-semi-bold;
+ font-size: $font-12px;
+ line-height: $font-15px;
+ color: $notice-primary-color;
+ margin-bottom: 28px;
+ }
+
+ .mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+ }
+ }
+
+ .mx_SpaceRoomView_landing {
+ overflow-y: auto;
+
+ > .mx_BaseAvatar_image,
+ > .mx_BaseAvatar > .mx_BaseAvatar_image {
+ border-radius: 12px;
+ }
+
+ .mx_SpaceRoomView_landing_name {
+ margin: 24px 0 16px;
+ font-size: $font-15px;
+ color: $secondary-fg-color;
+
+ > span {
+ display: inline-block;
+ }
+
+ .mx_SpaceRoomView_landing_nameRow {
+ margin-top: 12px;
+
+ > h1 {
+ display: inline-block;
+ }
+ }
+
+ .mx_SpaceRoomView_landing_inviter {
+ .mx_BaseAvatar {
+ margin-right: 4px;
+ vertical-align: middle;
+ }
+ }
+
+ .mx_SpaceRoomView_landing_memberCount {
+ position: relative;
+ margin-left: 24px;
+ padding: 0 0 0 28px;
+ line-height: $font-24px;
+ vertical-align: text-bottom;
+
+ &::before {
+ position: absolute;
+ content: '';
+ width: 24px;
+ height: 24px;
+ top: 0;
+ left: 0;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ background-color: $accent-color;
+ mask-image: url('$(res)/img/element-icons/community-members.svg');
+ }
+ }
+ }
+
+ .mx_SpaceRoomView_landing_topic {
+ font-size: $font-15px;
+ }
+
+ .mx_SpaceRoomView_landing_joinButtons {
+ margin-top: 24px;
+
+ .mx_FormButton {
+ padding: 8px 22px;
+ }
+ }
+
+ .mx_SpaceRoomView_landing_adminButtons {
+ margin-top: 32px;
+
+ .mx_AccessibleButton {
+ position: relative;
+ width: 160px;
+ height: 124px;
+ box-sizing: border-box;
+ padding: 72px 16px 0;
+ border-radius: 12px;
+ border: 1px solid $space-button-outline-color;
+ margin-right: 28px;
+ margin-bottom: 28px;
+ font-size: $font-14px;
+ display: inline-block;
+ vertical-align: bottom;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ &:hover {
+ background-color: rgba(141, 151, 165, 0.1);
+ }
+
+ &::before, &::after {
+ position: absolute;
+ content: "";
+ left: 16px;
+ top: 16px;
+ height: 40px;
+ width: 40px;
+ border-radius: 20px;
+ }
+
+ &::after {
+ mask-position: center;
+ mask-size: 30px;
+ mask-repeat: no-repeat;
+ background: #ffffff; // white icon fill
+ }
+
+ &.mx_SpaceRoomView_landing_inviteButton {
+ &::before {
+ background-color: $accent-color;
+ }
+
+ &::after {
+ mask-image: url('$(res)/img/element-icons/room/invite.svg');
+ }
+ }
+
+ &.mx_SpaceRoomView_landing_addButton {
+ &::before {
+ background-color: #ac3ba8;
+ }
+
+ &::after {
+ mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+ }
+ }
+
+ &.mx_SpaceRoomView_landing_createButton {
+ &::before {
+ background-color: #368bd6;
+ }
+
+ &::after {
+ mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+ }
+ }
+
+ &.mx_SpaceRoomView_landing_settingsButton {
+ &::before {
+ background-color: #5c56f5;
+ }
+
+ &::after {
+ mask-image: url('$(res)/img/element-icons/settings.svg');
+ }
+ }
+ }
+ }
+
+ .mx_SpaceRoomDirectory_list {
+ max-width: 600px;
+
+ .mx_SpaceRoomDirectory_roomTile_actions {
+ display: none;
+ }
+ }
+ }
+
+ .mx_SpaceRoomView_privateScope {
+ .mx_RadioButton {
+ width: $SpaceRoomViewInnerWidth;
+ border-radius: 8px;
+ border: 1px solid $space-button-outline-color;
+ padding: 16px 16px 16px 72px;
+ margin-top: 36px;
+ cursor: pointer;
+ box-sizing: border-box;
+ position: relative;
+
+ > div:first-of-type {
+ // hide radio dot
+ display: none;
+ }
+
+ .mx_RadioButton_content {
+ margin: 0;
+
+ > h3 {
+ margin: 0 0 4px;
+ font-size: $font-15px;
+ font-weight: $font-semi-bold;
+ line-height: $font-18px;
+ }
+
+ > div {
+ color: $secondary-fg-color;
+ font-size: $font-15px;
+ line-height: $font-24px;
+ }
+ }
+
+ &::before {
+ content: "";
+ position: absolute;
+ height: 32px;
+ width: 32px;
+ top: 24px;
+ left: 20px;
+ background-color: $secondary-fg-color;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: contain;
+ }
+ }
+
+ .mx_RadioButton_checked {
+ border-color: $accent-color;
+
+ .mx_RadioButton_content {
+ > div {
+ color: $primary-fg-color;
+ }
+ }
+
+ &::before {
+ background-color: $accent-color;
+ }
+ }
+
+ .mx_SpaceRoomView_privateScope_justMeButton::before {
+ mask-image: url('$(res)/img/element-icons/room/members.svg');
+ }
+
+ .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {
+ mask-image: url('$(res)/img/element-icons/community-members.svg');
+ }
+ }
+
+ .mx_SpaceRoomView_inviteTeammates {
+ .mx_SpaceRoomView_inviteTeammates_buttons {
+ color: $secondary-fg-color;
+ margin-top: 28px;
+
+ .mx_AccessibleButton {
+ position: relative;
+ display: inline-block;
+ padding-left: 32px;
+ line-height: 24px; // to center icons
+
+ &::before {
+ content: "";
+ position: absolute;
+ height: 24px;
+ width: 24px;
+ top: 0;
+ left: 0;
+ background-color: $secondary-fg-color;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: contain;
+ }
+
+ & + .mx_AccessibleButton {
+ margin-left: 32px;
+ }
+ }
+
+ .mx_SpaceRoomView_inviteTeammates_inviteDialogButton::before {
+ mask-image: url('$(res)/img/element-icons/room/invite.svg');
+ }
+ }
+ }
+}
diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss
index fecac40e4e..3badb0850c 100644
--- a/res/css/structures/_UserMenu.scss
+++ b/res/css/structures/_UserMenu.scss
@@ -72,6 +72,7 @@ limitations under the License.
position: relative; // to make default avatars work
margin-right: 8px;
height: 32px; // to remove the unknown 4px gap the browser puts below it
+ padding: 3px 0; // to align with and without using doubleName
.mx_UserMenu_userAvatar {
border-radius: 32px; // should match avatar size
@@ -119,20 +120,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 +227,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 +273,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');
diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss
index 02436833a2..9c98ca3a1c 100644
--- a/res/css/structures/auth/_Login.scss
+++ b/res/css/structures/auth/_Login.scss
@@ -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;
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index 0ba0d10e06..90dca32e48 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -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 {
diff --git a/res/css/views/auth/_AuthHeader.scss b/res/css/views/auth/_AuthHeader.scss
index b1372affee..13d5195160 100644
--- a/res/css/views/auth/_AuthHeader.scss
+++ b/res/css/views/auth/_AuthHeader.scss
@@ -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;
}
diff --git a/res/css/views/auth/_AuthHeaderLogo.scss b/res/css/views/auth/_AuthHeaderLogo.scss
index 917dcabf67..86f0313b68 100644
--- a/res/css/views/auth/_AuthHeaderLogo.scss
+++ b/res/css/views/auth/_AuthHeaderLogo.scss
@@ -17,7 +17,7 @@ limitations under the License.
.mx_AuthHeaderLogo {
margin-top: 15px;
flex: 1;
- padding: 0 10px;
+ padding: 0 25px;
}
.mx_AuthHeaderLogo img {
diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss
index 05cddf2c48..ffaad3cd7a 100644
--- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss
+++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss
@@ -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 {
diff --git a/res/css/views/auth/_LanguageSelector.scss b/res/css/views/auth/_LanguageSelector.scss
index 781561f876..885ee7f30d 100644
--- a/res/css/views/auth/_LanguageSelector.scss
+++ b/res/css/views/auth/_LanguageSelector.scss
@@ -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 {
diff --git a/res/css/views/auth/_ServerTypeSelector.scss b/res/css/views/auth/_ServerTypeSelector.scss
deleted file mode 100644
index fbd3d2655d..0000000000
--- a/res/css/views/auth/_ServerTypeSelector.scss
+++ /dev/null
@@ -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;
-}
diff --git a/res/css/views/auth/_Welcome.scss b/res/css/views/auth/_Welcome.scss
index f0e2b3de33..894174d6e2 100644
--- a/res/css/views/auth/_Welcome.scss
+++ b/res/css/views/auth/_Welcome.scss
@@ -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;
}
diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss
index 1a1e14e7ac..cbddd97e18 100644
--- a/res/css/views/avatars/_BaseAvatar.scss
+++ b/res/css/views/avatars/_BaseAvatar.scss
@@ -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;
}
diff --git a/src/dispatcher/payloads/AppTileActionPayload.ts b/res/css/views/avatars/_WidgetAvatar.scss
similarity index 72%
rename from src/dispatcher/payloads/AppTileActionPayload.ts
rename to res/css/views/avatars/_WidgetAvatar.scss
index 3cdb0f8c1f..8e5cfb54d8 100644
--- a/src/dispatcher/payloads/AppTileActionPayload.ts
+++ b/res/css/views/avatars/_WidgetAvatar.scss
@@ -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;
}
diff --git a/src/resizer/index.js b/res/css/views/context_menus/_CallContextMenu.scss
similarity index 70%
rename from src/resizer/index.js
rename to res/css/views/context_menus/_CallContextMenu.scss
index 1fd8f4da46..55b73b0344 100644
--- a/src/resizer/index.js
+++ b/res/css/views/context_menus/_CallContextMenu.scss
@@ -1,6 +1,5 @@
/*
-Copyright 2018 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+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.
@@ -15,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-export FixedDistributor from "./distributors/fixed";
-export CollapseDistributor from "./distributors/collapse";
-export Resizer from "./resizer";
+.mx_CallContextMenu_item {
+ width: 205px;
+ height: 40px;
+ padding-left: 16px;
+ line-height: 40px;
+ vertical-align: center;
+}
diff --git a/res/css/views/context_menus/_IconizedContextMenu.scss b/res/css/views/context_menus/_IconizedContextMenu.scss
index d911ac6dfe..204435995f 100644
--- a/res/css/views/context_menus/_IconizedContextMenu.scss
+++ b/res/css/views/context_menus/_IconizedContextMenu.scss
@@ -75,6 +75,11 @@ limitations under the License.
background-color: $menu-selected-color;
}
+ &.mx_AccessibleButton_disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
img, .mx_IconizedContextMenu_icon { // icons
width: 16px;
min-width: 16px;
diff --git a/res/css/views/context_menus/_WidgetContextMenu.scss b/res/css/views/context_menus/_WidgetContextMenu.scss
deleted file mode 100644
index 60b7b93f99..0000000000
--- a/res/css/views/context_menus/_WidgetContextMenu.scss
+++ /dev/null
@@ -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;
- }
-}
diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
new file mode 100644
index 0000000000..0c9d8e3840
--- /dev/null
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
@@ -0,0 +1,185 @@
+/*
+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_AddExistingToSpaceDialog_wrapper {
+ .mx_Dialog {
+ display: flex;
+ flex-direction: column;
+ }
+}
+
+.mx_AddExistingToSpaceDialog {
+ width: 480px;
+ color: $primary-fg-color;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ min-height: 0;
+
+ .mx_Dialog_title {
+ display: flex;
+
+ .mx_BaseAvatar {
+ display: inline-flex;
+ margin: 5px 16px 5px 5px;
+ vertical-align: middle;
+ }
+
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+ margin: 0;
+ vertical-align: unset;
+ }
+
+ > div {
+ > h1 {
+ font-weight: $font-semi-bold;
+ font-size: $font-18px;
+ line-height: $font-22px;
+ margin: 0;
+ }
+
+ .mx_AddExistingToSpaceDialog_onlySpace {
+ color: $secondary-fg-color;
+ font-size: $font-15px;
+ line-height: $font-24px;
+ }
+ }
+
+ .mx_Dropdown_input {
+ border: none;
+
+ > .mx_Dropdown_option {
+ padding-left: 0;
+ flex: unset;
+ height: unset;
+ color: $secondary-fg-color;
+ font-size: $font-15px;
+ line-height: $font-24px;
+
+ .mx_BaseAvatar {
+ display: none;
+ }
+ }
+
+ .mx_Dropdown_menu {
+ .mx_AddExistingToSpaceDialog_dropdownOptionActive {
+ color: $accent-color;
+ padding-right: 32px;
+ position: relative;
+
+ &::before {
+ content: '';
+ width: 20px;
+ height: 20px;
+ top: 8px;
+ right: 0;
+ position: absolute;
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ background-color: $accent-color;
+ mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
+ }
+ }
+ }
+ }
+ }
+
+ .mx_SearchBox {
+ margin: 0;
+ }
+
+ .mx_AddExistingToSpaceDialog_errorText {
+ font-weight: $font-semi-bold;
+ font-size: $font-12px;
+ line-height: $font-15px;
+ color: $notice-primary-color;
+ margin-bottom: 28px;
+ }
+
+ .mx_AddExistingToSpaceDialog_content {
+ .mx_AddExistingToSpaceDialog_noResults {
+ margin-top: 24px;
+ }
+ }
+
+ .mx_AddExistingToSpaceDialog_section {
+ margin-top: 24px;
+
+ > h3 {
+ margin: 0;
+ color: $secondary-fg-color;
+ font-size: $font-12px;
+ font-weight: $font-semi-bold;
+ line-height: $font-15px;
+ }
+
+ .mx_AddExistingToSpaceDialog_entry {
+ display: flex;
+ margin-top: 12px;
+
+ .mx_BaseAvatar {
+ margin-right: 12px;
+ }
+
+ .mx_AddExistingToSpaceDialog_entry_name {
+ font-size: $font-15px;
+ line-height: 30px;
+ flex-grow: 1;
+ }
+
+ .mx_FormButton {
+ min-width: 92px;
+ font-weight: normal;
+ box-sizing: border-box;
+ }
+ }
+ }
+
+ .mx_AddExistingToSpaceDialog_section_spaces {
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+ }
+ }
+
+ .mx_AddExistingToSpaceDialog_footer {
+ display: flex;
+ margin-top: 32px;
+
+ > span {
+ flex-grow: 1;
+ font-size: $font-12px;
+ line-height: $font-15px;
+
+ > * {
+ vertical-align: middle;
+ }
+ }
+
+ .mx_AccessibleButton {
+ display: inline-block;
+ }
+
+ .mx_AccessibleButton_kind_link {
+ padding: 0;
+ }
+ }
+
+ .mx_FormButton {
+ padding: 8px 22px;
+ }
+}
diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index 35cb6bc7ab..8fee740016 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -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;
+ }
+}
diff --git a/res/css/views/dialogs/_FeedbackDialog.scss b/res/css/views/dialogs/_FeedbackDialog.scss
new file mode 100644
index 0000000000..fd225dd882
--- /dev/null
+++ b/res/css/views/dialogs/_FeedbackDialog.scss
@@ -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');
+ }
+ }
+}
diff --git a/res/css/views/dialogs/_HostSignupDialog.scss b/res/css/views/dialogs/_HostSignupDialog.scss
new file mode 100644
index 0000000000..ac4bc41951
--- /dev/null
+++ b/res/css/views/dialogs/_HostSignupDialog.scss
@@ -0,0 +1,143 @@
+/*
+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;
+ // Ensure dialog borders are always white as the HostSignupDialog
+ // does not yet support dark mode or theming in general.
+ // In the future we might want to pass the theme to the called
+ // iframe, should some hosting provider have that need.
+ background-color: #ffffff;
+
+ .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;
+ }
+}
diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index b9063f46b9..d8ff56663a 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -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;
diff --git a/src/utils/NamingUtils.ts b/res/css/views/dialogs/_ModalWidgetDialog.scss
similarity index 53%
rename from src/utils/NamingUtils.ts
rename to res/css/views/dialogs/_ModalWidgetDialog.scss
index 44ccb9b030..aa2dd0d395 100644
--- a/src/utils/NamingUtils.ts
+++ b/res/css/views/dialogs/_ModalWidgetDialog.scss
@@ -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;
+ }
}
diff --git a/src/components/views/avatars/PulsedAvatar.tsx b/res/css/views/dialogs/_RegistrationEmailPromptDialog.scss
similarity index 73%
rename from src/components/views/avatars/PulsedAvatar.tsx
rename to res/css/views/dialogs/_RegistrationEmailPromptDialog.scss
index b4e876b9f6..31fc6d7a04 100644
--- a/src/components/views/avatars/PulsedAvatar.tsx
+++ b/res/css/views/dialogs/_RegistrationEmailPromptDialog.scss
@@ -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 = (props) => {
- return
- {props.children}
-
;
-};
-
-export default PulsedAvatar;
diff --git a/res/css/views/dialogs/_RoomSettingsDialogBridges.scss b/res/css/views/dialogs/_RoomSettingsDialogBridges.scss
index a1793cc75e..c97a3b69b7 100644
--- a/res/css/views/dialogs/_RoomSettingsDialogBridges.scss
+++ b/res/css/views/dialogs/_RoomSettingsDialogBridges.scss
@@ -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;
+ }
}
}
}
diff --git a/res/css/views/dialogs/_ServerPickerDialog.scss b/res/css/views/dialogs/_ServerPickerDialog.scss
new file mode 100644
index 0000000000..b01b49d7af
--- /dev/null
+++ b/res/css/views/dialogs/_ServerPickerDialog.scss
@@ -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;
+ }
+}
diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss
new file mode 100644
index 0000000000..c1fa539e9b
--- /dev/null
+++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss
@@ -0,0 +1,55 @@
+/*
+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_SpaceSettingsDialog {
+ width: 480px;
+ color: $primary-fg-color;
+
+ .mx_SpaceSettings_errorText {
+ font-weight: $font-semi-bold;
+ font-size: $font-12px;
+ line-height: $font-15px;
+ color: $notice-primary-color;
+ margin-bottom: 28px;
+ }
+
+ .mx_ToggleSwitch {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 16px;
+ }
+
+ .mx_AccessibleButton_kind_danger {
+ margin-top: 28px;
+ }
+
+ .mx_SpaceSettingsDialog_buttons {
+ display: flex;
+ margin-top: 64px;
+
+ .mx_AccessibleButton {
+ display: inline-block;
+ }
+
+ .mx_AccessibleButton_kind_link {
+ margin-left: auto;
+ }
+ }
+
+ .mx_FormButton {
+ padding: 8px 22px;
+ }
+}
diff --git a/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss
new file mode 100644
index 0000000000..176919b84c
--- /dev/null
+++ b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss
@@ -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;
+ }
+ }
+}
diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss
index 96269cea43..9c26f8f120 100644
--- a/res/css/views/elements/_AccessibleButton.scss
+++ b/res/css/views/elements/_AccessibleButton.scss
@@ -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;
}
diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss
new file mode 100644
index 0000000000..69dde5925e
--- /dev/null
+++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss
@@ -0,0 +1,72 @@
+/*
+Copyright 2021 Šimon Brandner
+
+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;
+}
diff --git a/res/css/views/elements/_IconButton.scss b/res/css/views/elements/_IconButton.scss
deleted file mode 100644
index d8ebbeb65e..0000000000
--- a/res/css/views/elements/_IconButton.scss
+++ /dev/null
@@ -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');
- }
-}
diff --git a/res/css/views/elements/_MiniAvatarUploader.scss b/res/css/views/elements/_MiniAvatarUploader.scss
new file mode 100644
index 0000000000..698184a095
--- /dev/null
+++ b/res/css/views/elements/_MiniAvatarUploader.scss
@@ -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;
+}
diff --git a/res/css/views/elements/_SSOButtons.scss b/res/css/views/elements/_SSOButtons.scss
new file mode 100644
index 0000000000..e02816780f
--- /dev/null
+++ b/res/css/views/elements/_SSOButtons.scss
@@ -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;
+ }
+ }
+}
diff --git a/res/css/views/elements/_ServerPicker.scss b/res/css/views/elements/_ServerPicker.scss
new file mode 100644
index 0000000000..188eb5d655
--- /dev/null
+++ b/res/css/views/elements/_ServerPicker.scss
@@ -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;
+ }
+}
diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.scss
index d45645863f..cb2bf841dd 100644
--- a/res/css/views/messages/_CreateEvent.scss
+++ b/res/css/views/messages/_CreateEvent.scss
@@ -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');
+ }
}
diff --git a/res/css/views/messages/_EventTileBubble.scss b/res/css/views/messages/_EventTileBubble.scss
new file mode 100644
index 0000000000..e0f5d521cb
--- /dev/null
+++ b/res/css/views/messages/_EventTileBubble.scss
@@ -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;
+ }
+}
diff --git a/res/css/views/messages/_MJitsiWidgetEvent.scss b/res/css/views/messages/_MJitsiWidgetEvent.scss
index 3e51e89744..bea8651543 100644
--- a/res/css/views/messages/_MJitsiWidgetEvent.scss
+++ b/res/css/views/messages/_MJitsiWidgetEvent.scss
@@ -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;
- }
}
diff --git a/res/css/views/messages/_MVideoBody.scss b/res/css/views/messages/_MVideoBody.scss
index 3b05c53f34..ac3491bc8f 100644
--- a/res/css/views/messages/_MVideoBody.scss
+++ b/res/css/views/messages/_MVideoBody.scss
@@ -18,5 +18,6 @@ span.mx_MVideoBody {
video.mx_MVideoBody {
max-width: 100%;
height: auto;
+ border-radius: 4px;
}
}
diff --git a/res/css/views/messages/_RedactedBody.scss b/res/css/views/messages/_RedactedBody.scss
index e4ab0c0835..600ac0c6b7 100644
--- a/res/css/views/messages/_RedactedBody.scss
+++ b/res/css/views/messages/_RedactedBody.scss
@@ -30,7 +30,7 @@ limitations under the License.
mask-size: contain;
content: '';
position: absolute;
- top: 2px;
+ top: 1px;
left: 0;
}
}
diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss
index 076932ee97..66825030e0 100644
--- a/res/css/views/messages/_ViewSourceEvent.scss
+++ b/res/css/views/messages/_ViewSourceEvent.scss
@@ -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 {
diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
index 09c78ae5b4..4faa4b594f 100644
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@@ -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;
}
}
diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss
index 3ff3b52531..9a5a59bda8 100644
--- a/res/css/views/right_panel/_BaseCard.scss
+++ b/res/css/views/right_panel/_BaseCard.scss
@@ -128,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;
+ }
+ }
}
}
diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss
index 0031d3a64c..36882f4e8b 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.scss
+++ b/res/css/views/right_panel/_RoomSummaryCard.scss
@@ -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
+ }
}
}
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index f20c9b7868..87420ae4e7 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -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 {
diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.scss
index 315fd5213c..a90e744a5a 100644
--- a/res/css/views/right_panel/_WidgetCard.scss
+++ b/res/css/views/right_panel/_WidgetCard.scss
@@ -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;
+ }
}
}
}
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index 6e3ffbe5f0..492ed95973 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -24,76 +24,142 @@ $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_AppsContainer_resizer {
+ margin-bottom: 8px;
+}
+
.mx_AppsContainer {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: center;
height: 100%;
- margin-bottom: 8px;
+ width: 100%;
+ flex: 1;
+ min-height: 0;
+
+ .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_ResizeHandle_horizontal {
+ position: relative;
+
+ > div {
+ width: 0;
+ }
+ }
}
-.mx_AppsDrawer_minimised .mx_AppsContainer {
- // override the re-resizable inline styles
- height: inherit !important;
- min-height: inherit !important;
-}
+// TODO this should be 300px but that's too large
+$MinWidth: 240px;
-.mx_AddWidget_button {
- order: 2;
- cursor: pointer;
- padding: 0;
- margin: -3px auto 5px 0;
- color: $accent-color;
- font-size: $font-12px;
+.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%;
- border: 5px solid $widget-menu-bar-bg-color;
- border-radius: 4px;
+ min-width: $MinWidth;
+ border: 8px solid $widget-menu-bar-bg-color;
+ border-left-width: 5px;
+ border-right-width: 5px;
display: flex;
flex-direction: column;
-
- & + .mx_AppTile {
- margin-left: 5px;
- }
+ box-sizing: border-box;
+ background-color: $widget-menu-bar-bg-color;
}
.mx_AppTileFullWidth {
- 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 {
@@ -105,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 {
@@ -130,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 {
@@ -166,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 {
@@ -231,7 +275,6 @@ $MiniAppTileHeight: 200px;
.mx_AppPermissionWarning {
text-align: center;
- background-color: $widget-menu-bar-bg-color;
display: flex;
height: 100%;
flex-direction: column;
@@ -296,6 +339,10 @@ $MiniAppTileHeight: 200px;
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 {
@@ -323,10 +370,6 @@ $MiniAppTileHeight: 200px;
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;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 3b9a491db5..5841cf2853 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -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 {
@@ -266,17 +257,13 @@ $left-gutter: 64px;
display: inline-block;
width: 14px;
height: 14px;
- top: 29px;
+ // This aligns the avatar with the last line of the
+ // message. We want to move it one line up - 2.2rem
+ top: -2.2rem;
user-select: none;
z-index: 1;
}
-.mx_EventTile_continuation .mx_EventTile_readAvatars,
-.mx_EventTile_info .mx_EventTile_readAvatars,
-.mx_EventTile_emote .mx_EventTile_readAvatars {
- top: 7px;
-}
-
.mx_EventTile_readAvatars .mx_BaseAvatar {
position: absolute;
display: inline-block;
@@ -429,15 +416,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 +442,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 +487,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 +495,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 +522,42 @@ $left-gutter: 64px;
}
// Inserted adjacent to
blocks, (See TextualBody)
-.mx_EventTile_copyButton {
+.mx_EventTile_button {
position: absolute;
display: inline-block;
visibility: hidden;
cursor: pointer;
- top: 6px;
- right: 6px;
+ top: 8px;
+ right: 8px;
width: 19px;
height: 19px;
- mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color;
}
+.mx_EventTile_buttonBottom {
+ top: 33px;
+}
+.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;
}
diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
index 2b447be44a..903fabc8fd 100644
--- a/res/css/views/rooms/_GroupLayout.scss
+++ b/res/css/views/rooms/_GroupLayout.scss
@@ -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;
}
@@ -105,16 +105,9 @@ $left-gutter: 64px;
}
.mx_EventTile_readAvatars {
- top: 27px;
- }
-
- &.mx_EventTile_continuation .mx_EventTile_readAvatars,
- &.mx_EventTile_emote .mx_EventTile_readAvatars {
- top: 5px;
- }
-
- &.mx_EventTile_info .mx_EventTile_readAvatars {
- top: 4px;
+ // This aligns the avatar with the last line of the
+ // message. We want to move it one line up - 2rem
+ top: -2rem;
}
.mx_EventTile_content .markdown-body {
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 958d718b11..792c2f1f58 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -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 {
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index 182c280217..3f7f83d334 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -19,6 +19,7 @@ limitations under the License.
flex-direction: column;
flex: 1;
overflow-y: auto;
+ margin-top: 8px;
}
.mx_MemberInfo_name {
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index f00907aeef..075e9ff585 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -44,6 +44,17 @@ limitations under the License.
.mx_AutoHideScrollbar {
flex: 1 1 0;
}
+
+ .mx_RightPanel_scopeHeader {
+ // vertically align with position on other right panel cards
+ // to prevent it bouncing as user navigates right panel
+ margin-top: -8px;
+ }
+}
+
+.mx_GroupMemberList_query,
+.mx_GroupRoomList_query {
+ flex: 0 0 auto;
}
.mx_MemberList_chevron {
@@ -59,10 +70,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 +79,6 @@ limitations under the License.
}
}
-.mx_MemberList_query {
- height: 16px;
-}
-
.mx_MemberList_wrapper {
padding: 10px;
}
@@ -113,10 +118,10 @@ limitations under the License.
}
}
-.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');
}
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 71c0db947e..dea1b58741 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -227,18 +227,6 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
}
-.mx_MessageComposer_hangup::before {
- mask-image: url('$(res)/img/element-icons/call/hangup.svg');
-}
-
-.mx_MessageComposer_voicecall::before {
- mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
-}
-
-.mx_MessageComposer_videocall::before {
- mask-image: url('$(res)/img/element-icons/call/video-call.svg');
-}
-
.mx_MessageComposer_emoji::before {
mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
}
@@ -247,6 +235,32 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
}
+.mx_MessageComposer_sendMessage {
+ cursor: pointer;
+ position: relative;
+ margin-right: 6px;
+ width: 32px;
+ height: 32px;
+ border-radius: 100%;
+ background-color: $button-bg-color;
+
+ &::before {
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ top: 8px;
+ left: 9px;
+
+ mask-image: url('$(res)/img/element-icons/send-message.svg');
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ mask-position: center;
+
+ background-color: $button-fg-color;
+ content: '';
+ }
+}
+
.mx_MessageComposer_formatting {
cursor: pointer;
margin: 0 11px;
diff --git a/res/css/views/rooms/_NewRoomIntro.scss b/res/css/views/rooms/_NewRoomIntro.scss
new file mode 100644
index 0000000000..4322ba341c
--- /dev/null
+++ b/res/css/views/rooms/_NewRoomIntro.scss
@@ -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;
+ }
+}
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index d240877507..387d1588a3 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -241,10 +241,30 @@ 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');
}
+.mx_RoomHeader_voiceCallButton::before {
+ mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
+
+ // The call button SVG is padded slightly differently, so match it up to the size
+ // of the other icons
+ mask-size: 20px;
+ mask-position: center;
+}
+
+.mx_RoomHeader_videoCallButton::before {
+ mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+}
+
.mx_RoomHeader_showPanel {
height: 16px;
}
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 78e7307bc0..d49ed4b736 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -19,11 +19,17 @@ limitations under the License.
}
.mx_RoomList_iconPlus::before {
- mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
+ mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
+}
+.mx_RoomList_iconHash::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
}
.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 +39,6 @@ limitations under the License.
div:first-child {
font-weight: $font-semi-bold;
- margin-bottom: 8px;
}
.mx_AccessibleButton {
@@ -41,6 +46,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 +61,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');
}
}
diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss
index 543940fb78..92a475694e 100644
--- a/res/css/views/rooms/_RoomSublist.scss
+++ b/res/css/views/rooms/_RoomSublist.scss
@@ -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');
+ }
+}
diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.scss
index d99276b70a..da86797f42 100644
--- a/res/css/views/rooms/_Stickers.scss
+++ b/res/css/views/rooms/_Stickers.scss
@@ -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
}
}
diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss
index e6d09b9a2a..77a7bc5b68 100644
--- a/res/css/views/settings/_Notifications.scss
+++ b/res/css/views/settings/_Notifications.scss
@@ -64,6 +64,7 @@ limitations under the License.
.mx_UserNotifSettings_notifTable {
display: table;
+ position: relative;
}
.mx_UserNotifSettings_notifTable .mx_Spinner {
diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss
index 732cbedf02..4cbcb8e708 100644
--- a/res/css/views/settings/_ProfileSettings.scss
+++ b/res/css/views/settings/_ProfileSettings.scss
@@ -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;
}
diff --git a/res/css/views/auth/_ServerConfig.scss b/res/css/views/settings/_SpellCheckLanguages.scss
similarity index 57%
rename from res/css/views/auth/_ServerConfig.scss
rename to res/css/views/settings/_SpellCheckLanguages.scss
index a7e0057ab3..bb322c983f 100644
--- a/res/css/views/auth/_ServerConfig.scss
+++ b/res/css/views/settings/_SpellCheckLanguages.scss
@@ -1,6 +1,5 @@
/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2021 Šimon Brandner
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,21 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_ServerConfig_help:link {
- opacity: 0.8;
+.mx_ExistingSpellCheckLanguage {
+ display: flex;
+ align-items: center;
+ margin-bottom: 5px;
}
-.mx_ServerConfig_error {
- display: block;
- color: $warning-color;
+.mx_ExistingSpellCheckLanguage_language {
+ flex: 1;
+ margin-right: 10px;
}
-.mx_ServerConfig_identityServer {
- transform: scaleY(0);
- transform-origin: top;
- transition: transform 0.25s;
-
- &.mx_ServerConfig_identityServer_shown {
- transform: scaleY(1);
- }
+.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+
+.mx_SpellCheckLanguages {
+ @mixin mx_Settings_fullWidthField;
}
diff --git a/res/css/views/spaces/_SpaceBasicSettings.scss b/res/css/views/spaces/_SpaceBasicSettings.scss
new file mode 100644
index 0000000000..204ccab2b7
--- /dev/null
+++ b/res/css/views/spaces/_SpaceBasicSettings.scss
@@ -0,0 +1,86 @@
+/*
+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_SpaceBasicSettings {
+ .mx_Field {
+ margin: 32px 0;
+ }
+
+ .mx_SpaceBasicSettings_avatarContainer {
+ display: flex;
+ margin-top: 24px;
+
+ .mx_SpaceBasicSettings_avatar {
+ position: relative;
+ height: 80px;
+ width: 80px;
+ background-color: $tertiary-fg-color;
+ border-radius: 16px;
+ }
+
+ img.mx_SpaceBasicSettings_avatar {
+ width: 80px;
+ height: 80px;
+ object-fit: cover;
+ border-radius: 16px;
+ }
+
+ // only show it when the button is a div and not an img (has avatar)
+ div.mx_SpaceBasicSettings_avatar {
+ cursor: pointer;
+
+ &::before {
+ content: "";
+ position: absolute;
+ height: 80px;
+ width: 80px;
+ top: 0;
+ left: 0;
+ background-color: #ffffff; // white icon fill
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: 20px;
+ mask-image: url('$(res)/img/element-icons/camera.svg');
+ }
+ }
+
+ > input[type="file"] {
+ display: none;
+ }
+
+ > .mx_AccessibleButton_kind_link {
+ display: inline-block;
+ padding: 0;
+ margin: auto 16px;
+ color: #368bd6;
+ }
+
+ > .mx_SpaceBasicSettings_avatar_remove {
+ color: $notice-primary-color;
+ }
+ }
+
+ .mx_FormButton {
+ padding: 8px 22px;
+ margin-left: auto;
+ display: block;
+ width: min-content;
+ }
+
+ .mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+ }
+}
diff --git a/res/css/views/spaces/_SpaceCreateMenu.scss b/res/css/views/spaces/_SpaceCreateMenu.scss
new file mode 100644
index 0000000000..2a11ec9f23
--- /dev/null
+++ b/res/css/views/spaces/_SpaceCreateMenu.scss
@@ -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.
+*/
+
+// TODO: the space panel currently does not have a fixed width,
+// just the headers at each level have a max-width of 150px
+// so this will look slightly off for now. We should probably use css grid for the whole main layout...
+$spacePanelWidth: 200px;
+
+.mx_SpaceCreateMenu_wrapper {
+ // background blur everything except SpacePanel
+ .mx_ContextualMenu_background {
+ background-color: $dialog-backdrop-color;
+ opacity: 0.6;
+ left: $spacePanelWidth;
+ }
+
+ .mx_ContextualMenu {
+ padding: 24px;
+ width: 480px;
+ box-sizing: border-box;
+ background-color: $primary-bg-color;
+
+ > div {
+ > h2 {
+ font-weight: $font-semi-bold;
+ font-size: $font-18px;
+ margin-top: 4px;
+ }
+
+ > p {
+ font-size: $font-15px;
+ color: $secondary-fg-color;
+ margin: 0;
+ }
+ }
+
+ .mx_SpaceCreateMenuType {
+ position: relative;
+ padding: 16px 32px 16px 72px;
+ width: 432px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ border: 1px solid $input-darker-bg-color;
+ font-size: $font-15px;
+ margin: 20px 0;
+
+ > h3 {
+ font-weight: $font-semi-bold;
+ margin: 0 0 4px;
+ }
+
+ > span {
+ color: $secondary-fg-color;
+ }
+
+ &::before {
+ position: absolute;
+ content: '';
+ width: 32px;
+ height: 32px;
+ top: 24px;
+ left: 20px;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-size: 32px;
+ background-color: $tertiary-fg-color;
+ }
+
+ &:hover {
+ border-color: $accent-color;
+
+ &::before {
+ background-color: $accent-color;
+ }
+
+ > span {
+ color: $primary-fg-color;
+ }
+ }
+ }
+
+ .mx_SpaceCreateMenuType_public::before {
+ mask-image: url('$(res)/img/globe.svg');
+ mask-size: 26px;
+ }
+ .mx_SpaceCreateMenuType_private::before {
+ mask-image: url('$(res)/img/element-icons/lock.svg');
+ }
+
+ .mx_SpaceCreateMenu_back {
+ width: 28px;
+ height: 28px;
+ position: relative;
+ background-color: $theme-button-bg-color;
+ border-radius: 14px;
+ margin-bottom: 12px;
+
+ &::before {
+ content: "";
+ position: absolute;
+ height: 28px;
+ width: 28px;
+ top: 0;
+ left: 0;
+ background-color: $muted-fg-color;
+ transform: rotate(90deg);
+ mask-repeat: no-repeat;
+ mask-position: 2px 3px;
+ mask-size: 24px;
+ mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+ }
+ }
+
+ .mx_FormButton {
+ padding: 8px 22px;
+ margin-left: auto;
+ display: block;
+ width: min-content;
+ }
+
+ .mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+ }
+ }
+}
diff --git a/res/css/views/spaces/_SpacePublicShare.scss b/res/css/views/spaces/_SpacePublicShare.scss
new file mode 100644
index 0000000000..9ba0549ae3
--- /dev/null
+++ b/res/css/views/spaces/_SpacePublicShare.scss
@@ -0,0 +1,60 @@
+/*
+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_SpacePublicShare {
+ .mx_AccessibleButton {
+ border: 1px solid $space-button-outline-color;
+ box-sizing: border-box;
+ border-radius: 8px;
+ padding: 12px 24px 12px 52px;
+ margin-top: 16px;
+ width: $SpaceRoomViewInnerWidth;
+ font-size: $font-15px;
+ line-height: $font-24px;
+ position: relative;
+ display: flex;
+
+ > span {
+ color: #368bd6;
+ margin-left: auto;
+ }
+
+ &:hover {
+ background-color: rgba(141, 151, 165, 0.1);
+ }
+
+ &::before {
+ content: "";
+ position: absolute;
+ width: 30px;
+ height: 30px;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ mask-position: center;
+ background: $muted-fg-color;
+ left: 12px;
+ top: 9px;
+ }
+
+ &.mx_SpacePublicShare_shareButton::before {
+ mask-image: url('$(res)/img/element-icons/link.svg');
+ }
+
+ &.mx_SpacePublicShare_inviteButton::before {
+ mask-image: url('$(res)/img/element-icons/room/invite.svg');
+ }
+ }
+}
diff --git a/src/RoomListSorter.js b/res/css/views/toasts/_AnalyticsToast.scss
similarity index 57%
rename from src/RoomListSorter.js
rename to res/css/views/toasts/_AnalyticsToast.scss
index 0ff37a6af2..fdbe7f1c76 100644
--- a/src/RoomListSorter.js
+++ b/res/css/views/toasts/_AnalyticsToast.scss
@@ -1,5 +1,5 @@
/*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,18 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-'use strict';
+.mx_AnalyticsToast {
+ .mx_AccessibleButton_kind_danger {
+ background: none;
+ color: $accent-color;
+ }
-function tsOfNewestEvent(room) {
- if (room.timeline.length) {
- return room.timeline[room.timeline.length - 1].getTs();
- } else {
- return Number.MAX_SAFE_INTEGER;
+ .mx_AccessibleButton_kind_primary {
+ background: $accent-color;
+ color: #ffffff;
}
}
-
-export function mostRecentActivityFirst(roomList) {
- return roomList.sort(function(a, b) {
- return tsOfNewestEvent(b) - tsOfNewestEvent(a);
- });
-}
diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss
index 759797ae7b..8262075559 100644
--- a/res/css/views/voip/_CallContainer.scss
+++ b/res/css/views/voip/_CallContainer.scss
@@ -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;
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index f6f3d40308..7eb329594a 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -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;
+}
diff --git a/res/css/views/voip/_DialPad.scss b/res/css/views/voip/_DialPad.scss
new file mode 100644
index 0000000000..0c7bff0ce8
--- /dev/null
+++ b/res/css/views/voip/_DialPad.scss
@@ -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');
+ }
+}
diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
new file mode 100644
index 0000000000..520f51cf93
--- /dev/null
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -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;
+ }
+}
diff --git a/res/css/views/voip/_DialPadModal.scss b/res/css/views/voip/_DialPadModal.scss
new file mode 100644
index 0000000000..f9d7673a38
--- /dev/null
+++ b/res/css/views/voip/_DialPadModal.scss
@@ -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;
+ }
+}
diff --git a/res/css/views/voip/_VideoView.scss b/res/css/views/voip/_VideoFeed.scss
similarity index 63%
rename from res/css/views/voip/_VideoView.scss
rename to res/css/views/voip/_VideoFeed.scss
index feb60f4763..3e473a80b2 100644
--- a/res/css/views/voip/_VideoView.scss
+++ b/res/css/views/voip/_VideoFeed.scss
@@ -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,23 @@ 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%;
+ max-height: 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);
}
diff --git a/res/img/element-icons/brands/apple.svg b/res/img/element-icons/brands/apple.svg
new file mode 100644
index 0000000000..308c3c5d5a
--- /dev/null
+++ b/res/img/element-icons/brands/apple.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/brands/element.svg b/res/img/element-icons/brands/element.svg
new file mode 100644
index 0000000000..6861de0955
--- /dev/null
+++ b/res/img/element-icons/brands/element.svg
@@ -0,0 +1,6 @@
+
diff --git a/res/img/element-icons/brands/facebook.svg b/res/img/element-icons/brands/facebook.svg
new file mode 100644
index 0000000000..2742785424
--- /dev/null
+++ b/res/img/element-icons/brands/facebook.svg
@@ -0,0 +1,9 @@
+
diff --git a/res/img/element-icons/brands/github.svg b/res/img/element-icons/brands/github.svg
new file mode 100644
index 0000000000..503719520b
--- /dev/null
+++ b/res/img/element-icons/brands/github.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/brands/gitlab.svg b/res/img/element-icons/brands/gitlab.svg
new file mode 100644
index 0000000000..df84c41e21
--- /dev/null
+++ b/res/img/element-icons/brands/gitlab.svg
@@ -0,0 +1,9 @@
+
diff --git a/res/img/element-icons/brands/google.svg b/res/img/element-icons/brands/google.svg
new file mode 100644
index 0000000000..1b0b19ae5b
--- /dev/null
+++ b/res/img/element-icons/brands/google.svg
@@ -0,0 +1,6 @@
+
diff --git a/res/img/element-icons/brands/twitter.svg b/res/img/element-icons/brands/twitter.svg
new file mode 100644
index 0000000000..43eb825a59
--- /dev/null
+++ b/res/img/element-icons/brands/twitter.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/call/delete.svg b/res/img/element-icons/call/delete.svg
new file mode 100644
index 0000000000..133bdad4ca
--- /dev/null
+++ b/res/img/element-icons/call/delete.svg
@@ -0,0 +1,10 @@
+
diff --git a/res/img/element-icons/call/expand.svg b/res/img/element-icons/call/expand.svg
new file mode 100644
index 0000000000..91ef4d8a76
--- /dev/null
+++ b/res/img/element-icons/call/expand.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/call/video-muted.svg b/res/img/element-icons/call/video-muted.svg
deleted file mode 100644
index d2aea71d11..0000000000
--- a/res/img/element-icons/call/video-muted.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/res/img/element-icons/call/voice-muted.svg b/res/img/element-icons/call/voice-muted.svg
deleted file mode 100644
index 32abafb04a..0000000000
--- a/res/img/element-icons/call/voice-muted.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/res/img/element-icons/call/voice-unmuted.svg b/res/img/element-icons/call/voice-unmuted.svg
deleted file mode 100644
index e664080217..0000000000
--- a/res/img/element-icons/call/voice-unmuted.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/res/img/element-icons/camera.svg b/res/img/element-icons/camera.svg
new file mode 100644
index 0000000000..92d1f91dec
--- /dev/null
+++ b/res/img/element-icons/camera.svg
@@ -0,0 +1,10 @@
+
diff --git a/res/img/element-icons/chat-bubbles.svg b/res/img/element-icons/chat-bubbles.svg
new file mode 100644
index 0000000000..ac9db61f29
--- /dev/null
+++ b/res/img/element-icons/chat-bubbles.svg
@@ -0,0 +1,11 @@
+
diff --git a/res/img/element-icons/email-prompt.svg b/res/img/element-icons/email-prompt.svg
new file mode 100644
index 0000000000..19b8f82449
--- /dev/null
+++ b/res/img/element-icons/email-prompt.svg
@@ -0,0 +1,13 @@
+
diff --git a/res/img/element-icons/expand-space-panel.svg b/res/img/element-icons/expand-space-panel.svg
new file mode 100644
index 0000000000..11232acd58
--- /dev/null
+++ b/res/img/element-icons/expand-space-panel.svg
@@ -0,0 +1,4 @@
+
diff --git a/res/img/element-icons/feedback.svg b/res/img/element-icons/feedback.svg
new file mode 100644
index 0000000000..3ee20d18d9
--- /dev/null
+++ b/res/img/element-icons/feedback.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/i.svg b/res/img/element-icons/i.svg
new file mode 100644
index 0000000000..6674f1ed8d
--- /dev/null
+++ b/res/img/element-icons/i.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/link.svg b/res/img/element-icons/link.svg
new file mode 100644
index 0000000000..ab3d54b838
--- /dev/null
+++ b/res/img/element-icons/link.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/lock.svg b/res/img/element-icons/lock.svg
new file mode 100644
index 0000000000..06fe52a391
--- /dev/null
+++ b/res/img/element-icons/lock.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/plus.svg b/res/img/element-icons/plus.svg
new file mode 100644
index 0000000000..ea1972237d
--- /dev/null
+++ b/res/img/element-icons/plus.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/room/apps.svg b/res/img/element-icons/room/apps.svg
new file mode 100644
index 0000000000..c90704752c
--- /dev/null
+++ b/res/img/element-icons/room/apps.svg
@@ -0,0 +1,6 @@
+
diff --git a/res/img/element-icons/room/default_app.svg b/res/img/element-icons/room/default_app.svg
index 08734170df..baf9bc37fa 100644
--- a/res/img/element-icons/room/default_app.svg
+++ b/res/img/element-icons/room/default_app.svg
@@ -1,11 +1,21 @@
-
{_t(
"We'll store an encrypted copy of your keys on our server. " +
- "Secure your backup with a recovery passphrase.",
+ "Secure your backup with a Security Phrase.",
)}
{_t("For maximum security, this should be different from your account password.")}
@@ -252,10 +252,10 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
onValidate={this._onPassPhraseValidate}
fieldRef={this._passphraseField}
autoFocus={true}
- label={_td("Enter a recovery passphrase")}
- labelEnterPassword={_td("Enter a recovery passphrase")}
- labelStrongPassword={_td("Great! This recovery passphrase looks strong enough.")}
- labelAllowedButUnsafe={_td("Great! This recovery passphrase looks strong enough.")}
+ label={_td("Enter a Security Phrase")}
+ labelEnterPassword={_td("Enter a Security Phrase")}
+ labelStrongPassword={_td("Great! This Security Phrase looks strong enough.")}
+ labelAllowedButUnsafe={_td("Great! This Security Phrase looks strong enough.")}
/>
@@ -270,7 +270,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
{_t("Advanced")}
- {_t("Set up with a recovery key")}
+ {_t("Set up with a Security Key")}
;
@@ -310,7 +310,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return