diff --git a/.eslintignore.errorfiles b/.eslintignore.errorfiles
index 9973cfb120..1faffbbdf7 100644
--- a/.eslintignore.errorfiles
+++ b/.eslintignore.errorfiles
@@ -6,25 +6,20 @@ src/components/structures/RoomView.js
src/components/structures/ScrollPanel.js
src/components/structures/SearchBox.js
src/components/structures/UploadBar.js
-src/components/views/avatars/BaseAvatar.js
src/components/views/avatars/MemberAvatar.js
src/components/views/create_room/RoomAlias.js
src/components/views/dialogs/SetPasswordDialog.js
-src/components/views/dialogs/UnknownDeviceDialog.js
src/components/views/elements/AddressSelector.js
src/components/views/elements/DirectorySearchBox.js
src/components/views/elements/MemberEventListSummary.js
src/components/views/elements/UserSelector.js
-src/components/views/globals/MatrixToolbar.js
src/components/views/globals/NewVersionBar.js
-src/components/views/globals/UpdateCheckBar.js
src/components/views/messages/MFileBody.js
src/components/views/messages/TextualBody.js
src/components/views/room_settings/ColorSettings.js
src/components/views/rooms/Autocomplete.js
src/components/views/rooms/AuxPanel.js
src/components/views/rooms/LinkPreviewWidget.js
-src/components/views/rooms/MemberDeviceInfo.js
src/components/views/rooms/MemberInfo.js
src/components/views/rooms/MemberList.js
src/components/views/rooms/RoomList.js
diff --git a/.eslintrc.js b/.eslintrc.js
index 6a0576c58a..fc82e75ce2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,121 +1,34 @@
-const path = require('path');
-
-// get the path of the js-sdk so we can extend the config
-// eslint supports loading extended configs by module,
-// but only if they come from a module that starts with eslint-config-
-// So we load the filename directly (and it could be in node_modules/
-// or or ../node_modules/ etc)
-//
-// We add a `..` to the end because the js-sdk lives out of lib/, but the eslint
-// config is at the project root.
-const matrixJsSdkPath = path.join(path.dirname(require.resolve('matrix-js-sdk')), '..');
-
module.exports = {
+ extends: ["matrix-org", "matrix-org/react-legacy"],
parser: "babel-eslint",
- extends: [matrixJsSdkPath + "/.eslintrc.js"],
- plugins: [
- "react",
- "react-hooks",
- "flowtype",
- "babel"
- ],
+
+ env: {
+ browser: true,
+ node: true,
+ },
globals: {
LANGUAGES_FILE: "readonly",
},
- env: {
- es6: true,
- },
- parserOptions: {
- ecmaFeatures: {
- jsx: true,
- legacyDecorators: true,
- }
- },
rules: {
- // eslint's built in no-invalid-this rule breaks with class properties
- "no-invalid-this": "off",
- // so we replace it with a version that is class property aware
- "babel/no-invalid-this": "error",
-
- // We appear to follow this most of the time, so let's enforce it instead
- // of occasionally following it (or catching it in review)
- "keyword-spacing": "error",
-
- /** react **/
- // This just uses the react plugin to help eslint known when
- // variables have been used in JSX
- "react/jsx-uses-vars": "error",
- // Don't mark React as unused if we're using JSX
- "react/jsx-uses-react": "error",
-
- // bind or arrow function in props causes performance issues
- // (but we currently use them in some places)
- // It's disabled here, but we should using it sparingly.
- "react/jsx-no-bind": "off",
- "react/jsx-key": ["error"],
-
- // Components in JSX should always be defined.
- "react/jsx-no-undef": "error",
-
- // Assert no spacing in JSX curly brackets
- //
- //
- // https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/jsx-curly-spacing.md
- //
- // Disabled for now - if anything we'd like to *enforce* spacing in JSX
- // curly brackets for legibility, but in practice it's not clear that the
- // consistency particularly improves legibility here. --Matthew
- //
- // "react/jsx-curly-spacing": ["error", {"when": "never", "children": {"when": "always"}}],
-
- // Assert spacing before self-closing JSX tags, and no spacing before or
- // after the closing slash, and no spacing after the opening bracket of
- // the opening tag or closing tag.
- //
- // https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/jsx-tag-spacing.md
- "react/jsx-tag-spacing": ["error"],
-
- /** flowtype **/
- "flowtype/require-parameter-type": ["warn", {
- "excludeArrowFunctions": true,
- }],
- "flowtype/define-flow-type": "warn",
- "flowtype/require-return-type": ["warn",
- "always",
- {
- "annotateUndefined": "never",
- "excludeArrowFunctions": true,
- }
- ],
- "flowtype/space-after-type-colon": ["warn", "always"],
- "flowtype/space-before-type-colon": ["warn", "never"],
-
- /*
- * things that are errors in the js-sdk config that the current
- * code does not adhere to, turned down to warn
- */
- "max-len": ["warn", {
- // apparently people believe the length limit shouldn't apply
- // to JSX.
- ignorePattern: '^\\s*<',
- ignoreComments: true,
- ignoreRegExpLiterals: true,
- code: 120,
- }],
- "valid-jsdoc": ["warn"],
- "new-cap": ["warn"],
- "key-spacing": ["warn"],
- "prefer-const": ["warn"],
-
- // crashes currently: https://github.com/eslint/eslint/issues/6274
- "generator-star-spacing": "off",
-
- "react-hooks/rules-of-hooks": "error",
- "react-hooks/exhaustive-deps": "warn",
+ // Things we do that break the ideal style
+ "no-constant-condition": "off",
+ "prefer-promise-reject-errors": "off",
+ "no-async-promise-executor": "off",
+ "quotes": "off",
+ "indent": "off",
},
- settings: {
- flowtype: {
- onlyFilesWithFlowAnnotation: true
+
+ overrides: [{
+ "files": ["src/**/*.{ts, tsx}"],
+ "extends": ["matrix-org/ts"],
+ "rules": {
+ // We disable this while we're transitioning
+ "@typescript-eslint/no-explicit-any": "off",
+ // We'd rather not do this but we do
+ "@typescript-eslint/ban-ts-comment": "off",
+
+ "quotes": "off",
+ "no-extra-boolean-cast": "off",
},
- },
+ }],
};
diff --git a/.stylelintrc.js b/.stylelintrc.js
index 1690f2186f..313102ea83 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -17,7 +17,7 @@ module.exports = {
"at-rule-no-unknown": null,
"no-descending-specificity": null,
"scss/at-rule-no-unknown": [true, {
- // https://github.com/vector-im/riot-web/issues/10544
+ // https://github.com/vector-im/element-web/issues/10544
"ignoreAtRules": ["define-mixin"],
}],
}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b6f25f1858..29cbb040f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,1712 @@
+Changes in [3.2.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.2.0) (2020-08-17)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.2.0-rc.1...v3.2.0)
+
+ * Upgrade to JS SDK 8.1.0
+ * [Release] Fix corner rounding on images not always affecting right side
+ [\#5122](https://github.com/matrix-org/matrix-react-sdk/pull/5122)
+ * [Release] Message Action Bar watch for event send changes
+ [\#5116](https://github.com/matrix-org/matrix-react-sdk/pull/5116)
+ * Fix /op slash command to release
+ [\#5114](https://github.com/matrix-org/matrix-react-sdk/pull/5114)
+ * Fix action bar safe area regression
+ [\#5112](https://github.com/matrix-org/matrix-react-sdk/pull/5112)
+
+Changes in [3.2.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.2.0-rc.1) (2020-08-13)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.1.0...v3.2.0-rc.1)
+
+ * Upgrade to JS SDK 8.1.0-rc.1
+ * Update from Weblate
+ [\#5105](https://github.com/matrix-org/matrix-react-sdk/pull/5105)
+ * padding the timeline so that its scrollbar has its own space from the
+ resizer
+ [\#5103](https://github.com/matrix-org/matrix-react-sdk/pull/5103)
+ * Try to close notification on all platforms which support it, not just
+ electron
+ [\#5102](https://github.com/matrix-org/matrix-react-sdk/pull/5102)
+ * Fix exception when stripping replies from an event with a non-string body
+ [\#5101](https://github.com/matrix-org/matrix-react-sdk/pull/5101)
+ * Quick win session 24/07/2020
+ [\#5056](https://github.com/matrix-org/matrix-react-sdk/pull/5056)
+ * Remove rebranding toast
+ [\#5100](https://github.com/matrix-org/matrix-react-sdk/pull/5100)
+ * Generate previews for rooms when the option changes
+ [\#5098](https://github.com/matrix-org/matrix-react-sdk/pull/5098)
+ * Fix Bridge Settings tab
+ [\#5095](https://github.com/matrix-org/matrix-react-sdk/pull/5095)
+ * get screen type from app prop
+ [\#5081](https://github.com/matrix-org/matrix-react-sdk/pull/5081)
+ * Update rageshake app name
+ [\#5093](https://github.com/matrix-org/matrix-react-sdk/pull/5093)
+ * Factor out Iconized Context menu for reusability
+ [\#5085](https://github.com/matrix-org/matrix-react-sdk/pull/5085)
+ * Decouple Audible notifications from Desktop notifications
+ [\#5088](https://github.com/matrix-org/matrix-react-sdk/pull/5088)
+ * Make the room sublist show more/less buttons treeitems
+ [\#5087](https://github.com/matrix-org/matrix-react-sdk/pull/5087)
+ * Share and debug master cross-signing key
+ [\#5092](https://github.com/matrix-org/matrix-react-sdk/pull/5092)
+ * Create Map comparison utilities and convert Hooks to Typescript
+ [\#5086](https://github.com/matrix-org/matrix-react-sdk/pull/5086)
+ * Fix room list scrolling in Safari
+ [\#5090](https://github.com/matrix-org/matrix-react-sdk/pull/5090)
+ * Replace Riot with Element in docs and comments
+ [\#5083](https://github.com/matrix-org/matrix-react-sdk/pull/5083)
+ * When the room view isn't active don't highlight it in room list
+ [\#5027](https://github.com/matrix-org/matrix-react-sdk/pull/5027)
+ * remove emoji icons in autocomplete/reply by designer request
+ [\#5073](https://github.com/matrix-org/matrix-react-sdk/pull/5073)
+ * Add title and icon to empty state of file and notification panel
+ [\#5079](https://github.com/matrix-org/matrix-react-sdk/pull/5079)
+ * Mass redact ignore room creation events
+ [\#5045](https://github.com/matrix-org/matrix-react-sdk/pull/5045)
+ * Replace all chevrons with a single icon
+ [\#5067](https://github.com/matrix-org/matrix-react-sdk/pull/5067)
+ * Replace i18n generation script with something matching our project
+ [\#5077](https://github.com/matrix-org/matrix-react-sdk/pull/5077)
+ * Handle tag changes in sticky room updates
+ [\#5078](https://github.com/matrix-org/matrix-react-sdk/pull/5078)
+ * Remove leftover bits of TSLint
+ [\#5075](https://github.com/matrix-org/matrix-react-sdk/pull/5075)
+ * Clean up documentation of Whenable + fix other code concerns
+ [\#5076](https://github.com/matrix-org/matrix-react-sdk/pull/5076)
+ * Center the jump down/up icon, looks misaligned
+ [\#5074](https://github.com/matrix-org/matrix-react-sdk/pull/5074)
+ * [WIP] Support a new settings structure
+ [\#5058](https://github.com/matrix-org/matrix-react-sdk/pull/5058)
+ * Convert SettingsStore to TypeScript
+ [\#5062](https://github.com/matrix-org/matrix-react-sdk/pull/5062)
+
+Changes in [3.1.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.1.0) (2020-08-05)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.1.0-rc.1...v3.1.0)
+
+ * Upgrade JS SDK to 8.0.1
+ * Fix room list scrolling in Safari
+ [\#5091](https://github.com/matrix-org/matrix-react-sdk/pull/5091)
+ * Add null guard in InviteDialog
+ [\#5084](https://github.com/matrix-org/matrix-react-sdk/pull/5084)
+ * Add null guard in InviteDialog
+ [\#5082](https://github.com/matrix-org/matrix-react-sdk/pull/5082)
+ * Handle tag changes in sticky room updates
+ [\#5080](https://github.com/matrix-org/matrix-react-sdk/pull/5080)
+
+Changes in [3.1.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.1.0-rc.1) (2020-07-31)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.0.0...v3.1.0-rc.1)
+
+ * Upgrade JS SDK to 8.0.1-rc.1
+ * Update from Weblate
+ [\#5071](https://github.com/matrix-org/matrix-react-sdk/pull/5071)
+ * Add local echo for notifications in the new room list
+ [\#5065](https://github.com/matrix-org/matrix-react-sdk/pull/5065)
+ * Fix various small regressions in the room list's behaviour
+ [\#5070](https://github.com/matrix-org/matrix-react-sdk/pull/5070)
+ * Remove redundant lint dependencies
+ [\#5059](https://github.com/matrix-org/matrix-react-sdk/pull/5059)
+ * Fix key backup warning on soft logout page
+ [\#5069](https://github.com/matrix-org/matrix-react-sdk/pull/5069)
+ * Bump elliptic from 6.5.2 to 6.5.3
+ [\#5066](https://github.com/matrix-org/matrix-react-sdk/pull/5066)
+ * Fix crash on logging in again after soft logout
+ [\#5068](https://github.com/matrix-org/matrix-react-sdk/pull/5068)
+ * Convert right_panel to TS
+ [\#5036](https://github.com/matrix-org/matrix-react-sdk/pull/5036)
+ * Remove all unreferenced images
+ [\#5063](https://github.com/matrix-org/matrix-react-sdk/pull/5063)
+ * Provide nicer error for no known servers error when accepting an invite
+ [\#5061](https://github.com/matrix-org/matrix-react-sdk/pull/5061)
+ * add logging for keytar/pickle key
+ [\#5057](https://github.com/matrix-org/matrix-react-sdk/pull/5057)
+ * Don't speak the outgoing message if it is in the Sending state.
+ [\#4075](https://github.com/matrix-org/matrix-react-sdk/pull/4075)
+ * Remove poorly contrasted "dark style" heading in Room Preview Bar
+ [\#5052](https://github.com/matrix-org/matrix-react-sdk/pull/5052)
+ * Fix Query Matcher regression with certain unhomoglyph'd characters
+ [\#5050](https://github.com/matrix-org/matrix-react-sdk/pull/5050)
+ * Fix handlebar interaction
+ [\#4989](https://github.com/matrix-org/matrix-react-sdk/pull/4989)
+ * Minor improvements to filtering performance
+ [\#5054](https://github.com/matrix-org/matrix-react-sdk/pull/5054)
+ * Fix TextWithTooltip "leaking" tooltip wrappers
+ [\#5055](https://github.com/matrix-org/matrix-react-sdk/pull/5055)
+
+Changes in [3.0.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.0.0) (2020-07-27)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.10.1...v3.0.0)
+
+BREAKING CHANGES
+---
+
+ * The room list components have been replaced as part of this release, so the list, tiles, and other associated components now use a different prop / state contract.
+
+
+All Changes
+---
+
+ * Upgrade to JS SDK 8.0.0
+ * Update from Weblate
+ [\#5053](https://github.com/matrix-org/matrix-react-sdk/pull/5053)
+ * RoomList listen to notificationState updates for bolding
+ [\#5051](https://github.com/matrix-org/matrix-react-sdk/pull/5051)
+ * Ensure notification badges stop listening when they unmount
+ [\#5049](https://github.com/matrix-org/matrix-react-sdk/pull/5049)
+ * Improve RoomTile performance
+ [\#5048](https://github.com/matrix-org/matrix-react-sdk/pull/5048)
+ * Reward users for using stable ordering in their room list
+ [\#5047](https://github.com/matrix-org/matrix-react-sdk/pull/5047)
+ * Fix autocomplete suggesting a different thing mid-composition
+ [\#5030](https://github.com/matrix-org/matrix-react-sdk/pull/5030)
+ * Put low priority xor toggle back in the room list context menu
+ [\#5026](https://github.com/matrix-org/matrix-react-sdk/pull/5026)
+ * Fix autocompletion of Community IDs
+ [\#5040](https://github.com/matrix-org/matrix-react-sdk/pull/5040)
+ * Use OpenType tabular numbers in timestamps
+ [\#5042](https://github.com/matrix-org/matrix-react-sdk/pull/5042)
+ * Update packages to modern versions
+ [\#5046](https://github.com/matrix-org/matrix-react-sdk/pull/5046)
+ * Add dismiss button to rebrand toast
+ [\#5044](https://github.com/matrix-org/matrix-react-sdk/pull/5044)
+ * Fix Firefox composer regression exception
+ [\#5039](https://github.com/matrix-org/matrix-react-sdk/pull/5039)
+ * Fix BaseAvatar wrongly using Buttons when it needs not
+ [\#5037](https://github.com/matrix-org/matrix-react-sdk/pull/5037)
+ * Performance improvements round 2: Maps, freezing, dispatching, and flexbox
+ obliteration
+ [\#5038](https://github.com/matrix-org/matrix-react-sdk/pull/5038)
+ * Mixed bag of performance improvements: ScrollPanel and notifications
+ [\#5034](https://github.com/matrix-org/matrix-react-sdk/pull/5034)
+ * Update message previews
+ [\#5025](https://github.com/matrix-org/matrix-react-sdk/pull/5025)
+ * Translate create room buttons
+ [\#5035](https://github.com/matrix-org/matrix-react-sdk/pull/5035)
+ * Escape single quotes in composer placeholder
+ [\#5033](https://github.com/matrix-org/matrix-react-sdk/pull/5033)
+ * Don't hammer on the layout engine with avatar updates for the background
+ [\#5032](https://github.com/matrix-org/matrix-react-sdk/pull/5032)
+ * Ensure incremental updates to the ImportanceAlgorithm trigger A-Z order
+ [\#5031](https://github.com/matrix-org/matrix-react-sdk/pull/5031)
+ * don't syntax highlight languages that begin with "_"
+ [\#5029](https://github.com/matrix-org/matrix-react-sdk/pull/5029)
+ * Convert Modal to TypeScript
+ [\#4956](https://github.com/matrix-org/matrix-react-sdk/pull/4956)
+ * Use new eslint dependency and remove tslint
+ [\#4815](https://github.com/matrix-org/matrix-react-sdk/pull/4815)
+ * Support custom tags in the room list again
+ [\#5024](https://github.com/matrix-org/matrix-react-sdk/pull/5024)
+ * Fix the tag panel context menu
+ [\#5028](https://github.com/matrix-org/matrix-react-sdk/pull/5028)
+ * Tag Watcher don't create new filter if not needed, confuses references
+ [\#5021](https://github.com/matrix-org/matrix-react-sdk/pull/5021)
+ * Convert editor to TypeScript
+ [\#4978](https://github.com/matrix-org/matrix-react-sdk/pull/4978)
+ * Query Matcher use unhomoglyph for a little bit more leniency
+ [\#4977](https://github.com/matrix-org/matrix-react-sdk/pull/4977)
+ * Fix Breadcrumbs2 ending up with 2 tabIndexes on Firefox
+ [\#5017](https://github.com/matrix-org/matrix-react-sdk/pull/5017)
+ * Add min-width to floating Jitsi
+ [\#5023](https://github.com/matrix-org/matrix-react-sdk/pull/5023)
+ * Update crypto event icon to match rest of app styling
+ [\#5020](https://github.com/matrix-org/matrix-react-sdk/pull/5020)
+ * Fix Reactions Row Button vertical misalignment due to forced height
+ [\#5019](https://github.com/matrix-org/matrix-react-sdk/pull/5019)
+ * Use mouseleave instead of mouseout for hover events. Fix tooltip flicker
+ [\#5016](https://github.com/matrix-org/matrix-react-sdk/pull/5016)
+ * Fix slash commands null guard
+ [\#5015](https://github.com/matrix-org/matrix-react-sdk/pull/5015)
+ * Fix field tooltips
+ [\#5014](https://github.com/matrix-org/matrix-react-sdk/pull/5014)
+ * Fix community right panel button regression
+ [\#5022](https://github.com/matrix-org/matrix-react-sdk/pull/5022)
+ * [BREAKING] Remove the old room list
+ [\#5013](https://github.com/matrix-org/matrix-react-sdk/pull/5013)
+ * ellipse senders for images and videos
+ [\#4990](https://github.com/matrix-org/matrix-react-sdk/pull/4990)
+ * Sprinkle and consolidate some tooltips
+ [\#5012](https://github.com/matrix-org/matrix-react-sdk/pull/5012)
+ * Hopefully make cancel dialog a bit less weird
+ [\#4833](https://github.com/matrix-org/matrix-react-sdk/pull/4833)
+ * Fix emoji filterString
+ [\#5011](https://github.com/matrix-org/matrix-react-sdk/pull/5011)
+ * Fix size call for devtools state events
+ [\#5008](https://github.com/matrix-org/matrix-react-sdk/pull/5008)
+ * Fix `this` context in _setupHomeserverManagers for IntegrationManagers
+ [\#5010](https://github.com/matrix-org/matrix-react-sdk/pull/5010)
+ * Sync recently used reactions list across sessions
+ [\#4993](https://github.com/matrix-org/matrix-react-sdk/pull/4993)
+ * Null guard no e2ee for UserInfo
+ [\#5009](https://github.com/matrix-org/matrix-react-sdk/pull/5009)
+ * stop Inter from clobbering Twemoji
+ [\#5007](https://github.com/matrix-org/matrix-react-sdk/pull/5007)
+ * use a proper HTML sanitizer to strip , rather than a regexp
+ [\#5006](https://github.com/matrix-org/matrix-react-sdk/pull/5006)
+ * Convert room list log setting to a real setting
+ [\#5005](https://github.com/matrix-org/matrix-react-sdk/pull/5005)
+ * Bump lodash from 4.17.15 to 4.17.19 in /test/end-to-end-tests
+ [\#5003](https://github.com/matrix-org/matrix-react-sdk/pull/5003)
+ * Bump lodash from 4.17.15 to 4.17.19
+ [\#5004](https://github.com/matrix-org/matrix-react-sdk/pull/5004)
+ * Convert devtools dialog to use new room state format
+ [\#4936](https://github.com/matrix-org/matrix-react-sdk/pull/4936)
+ * Update checkbox
+ [\#5000](https://github.com/matrix-org/matrix-react-sdk/pull/5000)
+ * Increase width for country code dropdown
+ [\#5001](https://github.com/matrix-org/matrix-react-sdk/pull/5001)
+
+Changes in [2.10.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.10.1) (2020-07-16)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.10.0...v2.10.1)
+
+ * Post-launch Element Web polish
+ [\#5002](https://github.com/matrix-org/matrix-react-sdk/pull/5002)
+ * Move e2e icon
+ [\#4992](https://github.com/matrix-org/matrix-react-sdk/pull/4992)
+ * Wire up new room list breadcrumbs as an ARIA Toolbar
+ [\#4976](https://github.com/matrix-org/matrix-react-sdk/pull/4976)
+ * Fix Room Tile Icon to not ignore DMs in other tags
+ [\#4999](https://github.com/matrix-org/matrix-react-sdk/pull/4999)
+ * Fix filtering by community not showing DM rooms with community members
+ [\#4997](https://github.com/matrix-org/matrix-react-sdk/pull/4997)
+ * Fix enter in new room list filter breaking things
+ [\#4996](https://github.com/matrix-org/matrix-react-sdk/pull/4996)
+ * Notify left panel of resizing when it is collapsed&expanded
+ [\#4995](https://github.com/matrix-org/matrix-react-sdk/pull/4995)
+ * When removing a filter condition, try recalculate in case it wasn't last
+ [\#4994](https://github.com/matrix-org/matrix-react-sdk/pull/4994)
+ * Create a generic ARIA toolbar component
+ [\#4975](https://github.com/matrix-org/matrix-react-sdk/pull/4975)
+ * Fix /op Slash Command
+ [\#4604](https://github.com/matrix-org/matrix-react-sdk/pull/4604)
+ * Fix copy button in share dialog
+ [\#4998](https://github.com/matrix-org/matrix-react-sdk/pull/4998)
+ * Add tooltip to Room Tile Icon
+ [\#4987](https://github.com/matrix-org/matrix-react-sdk/pull/4987)
+ * Fix names jumping on hover in irc layout
+ [\#4991](https://github.com/matrix-org/matrix-react-sdk/pull/4991)
+ * check that encryptionInfo.sender is set
+ [\#4988](https://github.com/matrix-org/matrix-react-sdk/pull/4988)
+ * Update help link
+ [\#4986](https://github.com/matrix-org/matrix-react-sdk/pull/4986)
+ * Update cover photo link
+ [\#4985](https://github.com/matrix-org/matrix-react-sdk/pull/4985)
+
+Changes in [2.10.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.10.0) (2020-07-15)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.9.0...v2.10.0)
+
+ * Incorporate new toasts into end-to-end tests
+ [\#4983](https://github.com/matrix-org/matrix-react-sdk/pull/4983)
+ * Fix TS lint errors
+ [\#4982](https://github.com/matrix-org/matrix-react-sdk/pull/4982)
+ * Fix js lint errors after rebrand merge
+ [\#4981](https://github.com/matrix-org/matrix-react-sdk/pull/4981)
+ * Fix style lint
+ [\#4980](https://github.com/matrix-org/matrix-react-sdk/pull/4980)
+ * Fix alignment of login/syncing spinner
+ [\#4979](https://github.com/matrix-org/matrix-react-sdk/pull/4979)
+ * De labs font-scaling
+ [\#4899](https://github.com/matrix-org/matrix-react-sdk/pull/4899)
+ * Remove debug logging from new room list
+ [\#4972](https://github.com/matrix-org/matrix-react-sdk/pull/4972)
+ * Tweak sticky header hiding to avoid pop
+ [\#4974](https://github.com/matrix-org/matrix-react-sdk/pull/4974)
+ * Fix show-all keyboard focus regression
+ [\#4973](https://github.com/matrix-org/matrix-react-sdk/pull/4973)
+ * Clean up TODOs, comments, and imports in the new room list
+ [\#4970](https://github.com/matrix-org/matrix-react-sdk/pull/4970)
+ * Make EffectiveMembership utils generic
+ [\#4971](https://github.com/matrix-org/matrix-react-sdk/pull/4971)
+ * Update sticky headers when breadcrumbs pop in or out
+ [\#4969](https://github.com/matrix-org/matrix-react-sdk/pull/4969)
+ * Fix show less button occluding the last tile
+ [\#4967](https://github.com/matrix-org/matrix-react-sdk/pull/4967)
+ * Ensure breadcrumbs don't keep turning themselves back on
+ [\#4968](https://github.com/matrix-org/matrix-react-sdk/pull/4968)
+ * Update top vs. bottom sticky styles separately
+ [\#4966](https://github.com/matrix-org/matrix-react-sdk/pull/4966)
+ * Ensure RoomListStore2 gets reset when the client becomes invalidated
+ [\#4965](https://github.com/matrix-org/matrix-react-sdk/pull/4965)
+ * Add fade to show more button on room list
+ [\#4963](https://github.com/matrix-org/matrix-react-sdk/pull/4963)
+ * Fix extra room tiles being rendered on smaller sublists
+ [\#4964](https://github.com/matrix-org/matrix-react-sdk/pull/4964)
+ * Ensure tag changes (leaving rooms) causes rooms to move between lists
+ [\#4962](https://github.com/matrix-org/matrix-react-sdk/pull/4962)
+ * Fix badges for font size 20
+ [\#4958](https://github.com/matrix-org/matrix-react-sdk/pull/4958)
+ * Fix default sorting mechanics for new room list
+ [\#4960](https://github.com/matrix-org/matrix-react-sdk/pull/4960)
+ * Fix room sub list header collapse/jump interactions on bottom-most sublist
+ [\#4961](https://github.com/matrix-org/matrix-react-sdk/pull/4961)
+ * Fix room tile context menu for Historical rooms
+ [\#4959](https://github.com/matrix-org/matrix-react-sdk/pull/4959)
+ * "ignore"/"unignore" commands: validate user ID
+ [\#4895](https://github.com/matrix-org/matrix-react-sdk/pull/4895)
+ * Stop classname from overwritting baseavatar's
+ [\#4957](https://github.com/matrix-org/matrix-react-sdk/pull/4957)
+ * Remove redundant scroll-margins and fix RoomTile wrongly scrolling
+ [\#4952](https://github.com/matrix-org/matrix-react-sdk/pull/4952)
+ * Fix RoomAvatar viewAvatarOnClick to work on actual avatars instead of
+ default ones
+ [\#4953](https://github.com/matrix-org/matrix-react-sdk/pull/4953)
+ * Be consistent with the at-room pill avatar configurability
+ [\#4955](https://github.com/matrix-org/matrix-react-sdk/pull/4955)
+ * Room List v2 Enter in the filter field should select the first result
+ [\#4954](https://github.com/matrix-org/matrix-react-sdk/pull/4954)
+ * Enable the new room list by default
+ [\#4919](https://github.com/matrix-org/matrix-react-sdk/pull/4919)
+ * Convert ImportanceAlgorithm over to using NotificationColor instead
+ [\#4949](https://github.com/matrix-org/matrix-react-sdk/pull/4949)
+ * Internalize algorithm updates in the new room list store
+ [\#4951](https://github.com/matrix-org/matrix-react-sdk/pull/4951)
+ * Remove now-dead code from sublist resizing
+ [\#4950](https://github.com/matrix-org/matrix-react-sdk/pull/4950)
+ * Ensure triggered updates get fired for filters in the new room list
+ [\#4948](https://github.com/matrix-org/matrix-react-sdk/pull/4948)
+ * Handle off-cycle filtering updates in the new room list
+ [\#4947](https://github.com/matrix-org/matrix-react-sdk/pull/4947)
+ * Make the show more button do a clean cut on the room list while transparent
+ [\#4941](https://github.com/matrix-org/matrix-react-sdk/pull/4941)
+ * Stop safari from aggressively shrinking flex items
+ [\#4945](https://github.com/matrix-org/matrix-react-sdk/pull/4945)
+ * Fix search padding
+ [\#4946](https://github.com/matrix-org/matrix-react-sdk/pull/4946)
+ * Reduce event loop load caused by duplicate calculations in the new room list
+ [\#4943](https://github.com/matrix-org/matrix-react-sdk/pull/4943)
+ * Add an option to disable room list logging, and improve logging
+ [\#4944](https://github.com/matrix-org/matrix-react-sdk/pull/4944)
+ * Scroll fade for breadcrumbs
+ [\#4942](https://github.com/matrix-org/matrix-react-sdk/pull/4942)
+ * Auto expand room list on search
+ [\#4927](https://github.com/matrix-org/matrix-react-sdk/pull/4927)
+ * Fix rough badge alignment for community invite tiles again
+ [\#4939](https://github.com/matrix-org/matrix-react-sdk/pull/4939)
+ * Improve safety of new rooms in the room list
+ [\#4940](https://github.com/matrix-org/matrix-react-sdk/pull/4940)
+ * Don't destroy room notification states when replacing them
+ [\#4938](https://github.com/matrix-org/matrix-react-sdk/pull/4938)
+ * Move irc layout option to advanced
+ [\#4937](https://github.com/matrix-org/matrix-react-sdk/pull/4937)
+ * Potential solution to supporting transparent 'show more' buttons
+ [\#4932](https://github.com/matrix-org/matrix-react-sdk/pull/4932)
+ * Improve performance and stability in sticky headers for new room list
+ [\#4931](https://github.com/matrix-org/matrix-react-sdk/pull/4931)
+ * Move and improve notification state handling
+ [\#4935](https://github.com/matrix-org/matrix-react-sdk/pull/4935)
+ * Move list layout management to its own store
+ [\#4934](https://github.com/matrix-org/matrix-react-sdk/pull/4934)
+ * Noop first breadcrumb
+ [\#4933](https://github.com/matrix-org/matrix-react-sdk/pull/4933)
+ * Highlight "Jump to Bottom" badge when appropriate
+ [\#4892](https://github.com/matrix-org/matrix-react-sdk/pull/4892)
+ * Don't render the context menu within its trigger otherwise unhandled clicks
+ bubble
+ [\#4930](https://github.com/matrix-org/matrix-react-sdk/pull/4930)
+ * Protect rooms from getting lost due to complex transitions
+ [\#4929](https://github.com/matrix-org/matrix-react-sdk/pull/4929)
+ * Hide archive button
+ [\#4928](https://github.com/matrix-org/matrix-react-sdk/pull/4928)
+ * Enable options to favourite and low priority rooms
+ [\#4920](https://github.com/matrix-org/matrix-react-sdk/pull/4920)
+ * Move voip previews to bottom right corner
+ [\#4904](https://github.com/matrix-org/matrix-react-sdk/pull/4904)
+ * Focus room filter on openSearch
+ [\#4923](https://github.com/matrix-org/matrix-react-sdk/pull/4923)
+ * Swap out the resizer lib for something more stable in the new room list
+ [\#4924](https://github.com/matrix-org/matrix-react-sdk/pull/4924)
+ * Add wrapper to room list so sticky headers don't need a background
+ [\#4912](https://github.com/matrix-org/matrix-react-sdk/pull/4912)
+ * New room list view_room show_room_tile support
+ [\#4908](https://github.com/matrix-org/matrix-react-sdk/pull/4908)
+ * Convert Context Menu to TypeScript
+ [\#4871](https://github.com/matrix-org/matrix-react-sdk/pull/4871)
+ * Use html innerText for org.matrix.custom.html m.room.message room list
+ previews
+ [\#4925](https://github.com/matrix-org/matrix-react-sdk/pull/4925)
+ * Fix MELS summary of 3pid invite revocations
+ [\#4913](https://github.com/matrix-org/matrix-react-sdk/pull/4913)
+ * Fix sticky headers being left on display:none if they change too quickly
+ [\#4926](https://github.com/matrix-org/matrix-react-sdk/pull/4926)
+ * Fix gaps under resize handle
+ [\#4922](https://github.com/matrix-org/matrix-react-sdk/pull/4922)
+ * Fix DM handling in new room list
+ [\#4921](https://github.com/matrix-org/matrix-react-sdk/pull/4921)
+ * Respect and fix understanding of legacy options in new room list
+ [\#4918](https://github.com/matrix-org/matrix-react-sdk/pull/4918)
+ * Ensure DMs are not lost in the new room list, and clean up tag logging
+ [\#4916](https://github.com/matrix-org/matrix-react-sdk/pull/4916)
+ * Mute "Unknown room caused setting update" spam
+ [\#4915](https://github.com/matrix-org/matrix-react-sdk/pull/4915)
+ * Remove comment claiming encrypted rooms are handled incorrectly in the new
+ room list
+ [\#4917](https://github.com/matrix-org/matrix-react-sdk/pull/4917)
+ * Try using requestAnimationFrame if available for sticky headers
+ [\#4914](https://github.com/matrix-org/matrix-react-sdk/pull/4914)
+ * Show more/Show less keep focus in a relevant place
+ [\#4911](https://github.com/matrix-org/matrix-react-sdk/pull/4911)
+ * Change orange to our orange and do some lints
+ [\#4910](https://github.com/matrix-org/matrix-react-sdk/pull/4910)
+ * New Room List implement view_room_delta for keyboard shortcuts
+ [\#4900](https://github.com/matrix-org/matrix-react-sdk/pull/4900)
+ * New Room List accessibility
+ [\#4896](https://github.com/matrix-org/matrix-react-sdk/pull/4896)
+ * Improve room safety in the new room list
+ [\#4905](https://github.com/matrix-org/matrix-react-sdk/pull/4905)
+ * Fix a number of issues with the new room list's invites
+ [\#4906](https://github.com/matrix-org/matrix-react-sdk/pull/4906)
+ * Decrease default visible rooms down to 5
+ [\#4907](https://github.com/matrix-org/matrix-react-sdk/pull/4907)
+ * swap order of context menu buttons so it does not jump when muted
+ [\#4909](https://github.com/matrix-org/matrix-react-sdk/pull/4909)
+ * Fix some room list sticky header instabilities
+ [\#4901](https://github.com/matrix-org/matrix-react-sdk/pull/4901)
+ * null-guard against groups with a null name in new Room List
+ [\#4903](https://github.com/matrix-org/matrix-react-sdk/pull/4903)
+ * Allow vertical scrolling on the new room list breadcrumbs
+ [\#4902](https://github.com/matrix-org/matrix-react-sdk/pull/4902)
+ * Convert things to Typescript, including languageHandler
+ [\#4883](https://github.com/matrix-org/matrix-react-sdk/pull/4883)
+ * Fix minor issues with the badges in the new room list
+ [\#4894](https://github.com/matrix-org/matrix-react-sdk/pull/4894)
+ * Radio button outline fixes including for new room list context menu
+ [\#4893](https://github.com/matrix-org/matrix-react-sdk/pull/4893)
+ * First step towards a11y in the new room list
+ [\#4882](https://github.com/matrix-org/matrix-react-sdk/pull/4882)
+ * Fix theme selector clicks bubbling out and causing context menu to float
+ away
+ [\#4891](https://github.com/matrix-org/matrix-react-sdk/pull/4891)
+ * Revert "Remove a bunch of noisy logging from the room list"
+ [\#4890](https://github.com/matrix-org/matrix-react-sdk/pull/4890)
+ * Remove duplicate compact settings, handle device level updates
+ [\#4888](https://github.com/matrix-org/matrix-react-sdk/pull/4888)
+ * fix notifications icons some more
+ [\#4887](https://github.com/matrix-org/matrix-react-sdk/pull/4887)
+ * Remove a bunch of noisy logging from the room list
+ [\#4886](https://github.com/matrix-org/matrix-react-sdk/pull/4886)
+ * Fix bell icon mismatch on room tile between hover and context menu
+ [\#4884](https://github.com/matrix-org/matrix-react-sdk/pull/4884)
+ * Add a null guard for message event previews
+ [\#4885](https://github.com/matrix-org/matrix-react-sdk/pull/4885)
+ * Enable the new room list by default and trigger an initial render
+ [\#4881](https://github.com/matrix-org/matrix-react-sdk/pull/4881)
+ * Fix selection states of room tiles in the new room list
+ [\#4879](https://github.com/matrix-org/matrix-react-sdk/pull/4879)
+ * Update mute icon behaviour for new room list designs
+ [\#4876](https://github.com/matrix-org/matrix-react-sdk/pull/4876)
+ * Fix alignment of avatars on community invites
+ [\#4878](https://github.com/matrix-org/matrix-react-sdk/pull/4878)
+ * Don't include empty badge container in minimized view
+ [\#4880](https://github.com/matrix-org/matrix-react-sdk/pull/4880)
+ * Fix alignment of dot badges in new room list
+ [\#4877](https://github.com/matrix-org/matrix-react-sdk/pull/4877)
+ * Reorganize and match new room list badges to old list behaviour
+ [\#4861](https://github.com/matrix-org/matrix-react-sdk/pull/4861)
+ * Implement breadcrumb notifications and scrolling
+ [\#4862](https://github.com/matrix-org/matrix-react-sdk/pull/4862)
+ * Add click-to-jump on badge in the room sublist header
+ [\#4875](https://github.com/matrix-org/matrix-react-sdk/pull/4875)
+ * Room List v2 context menu interactions
+ [\#4870](https://github.com/matrix-org/matrix-react-sdk/pull/4870)
+ * Wedge community invites into the new room list
+ [\#4874](https://github.com/matrix-org/matrix-react-sdk/pull/4874)
+ * Check whether crypto is enabled in room recovery reminder
+ [\#4873](https://github.com/matrix-org/matrix-react-sdk/pull/4873)
+ * Fix room list 2's room tile wrapping wrongly
+ [\#4872](https://github.com/matrix-org/matrix-react-sdk/pull/4872)
+ * Hide scrollbar without pixel jumping
+ [\#4863](https://github.com/matrix-org/matrix-react-sdk/pull/4863)
+ * Room Tile context menu, notifications, indicator and placement
+ [\#4858](https://github.com/matrix-org/matrix-react-sdk/pull/4858)
+ * Improve resizing interactions in the new room list
+ [\#4865](https://github.com/matrix-org/matrix-react-sdk/pull/4865)
+ * Disable use of account-level ordering options in new room list
+ [\#4866](https://github.com/matrix-org/matrix-react-sdk/pull/4866)
+ * Remove context menu on invites in new room list
+ [\#4867](https://github.com/matrix-org/matrix-react-sdk/pull/4867)
+ * Fix reaction event crashes in message previews
+ [\#4868](https://github.com/matrix-org/matrix-react-sdk/pull/4868)
+
+Changes in [2.9.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.9.0) (2020-07-03)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.9.0-rc.1...v2.9.0)
+
+ * Upgrade to JS SDK 7.1.0
+ * Remove duplicate compact settings, handle device level updates
+ [\#4889](https://github.com/matrix-org/matrix-react-sdk/pull/4889)
+
+Changes in [2.9.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.9.0-rc.1) (2020-07-01)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.8.1...v2.9.0-rc.1)
+
+ * Upgrade to JS SDK 7.1.0-rc.1
+ * Update from Weblate
+ [\#4869](https://github.com/matrix-org/matrix-react-sdk/pull/4869)
+ * Fix a number of proliferation issues in the new room list
+ [\#4828](https://github.com/matrix-org/matrix-react-sdk/pull/4828)
+ * Fix jumping to read marker for events without tiles
+ [\#4860](https://github.com/matrix-org/matrix-react-sdk/pull/4860)
+ * De-duplicate rooms from the room autocomplete provider
+ [\#4859](https://github.com/matrix-org/matrix-react-sdk/pull/4859)
+ * Add file upload button to recovery key input
+ [\#4847](https://github.com/matrix-org/matrix-react-sdk/pull/4847)
+ * Implement new design on security setup & login
+ [\#4831](https://github.com/matrix-org/matrix-react-sdk/pull/4831)
+ * Fix /join slash command via servers including room id as a via
+ [\#4856](https://github.com/matrix-org/matrix-react-sdk/pull/4856)
+ * Add Generic Expiring Toast and timing hooks
+ [\#4855](https://github.com/matrix-org/matrix-react-sdk/pull/4855)
+ * Fix Room Custom Sounds regression and make ProgressBar relevant again
+ [\#4846](https://github.com/matrix-org/matrix-react-sdk/pull/4846)
+ * Including start_sso and start_cas in redirect loop prevention
+ [\#4854](https://github.com/matrix-org/matrix-react-sdk/pull/4854)
+ * Clean up TODO comments for new room list
+ [\#4850](https://github.com/matrix-org/matrix-react-sdk/pull/4850)
+ * Show timestamp of redaction on hover
+ [\#4622](https://github.com/matrix-org/matrix-react-sdk/pull/4622)
+ * Remove the DM button from new room tiles
+ [\#4849](https://github.com/matrix-org/matrix-react-sdk/pull/4849)
+ * Hide room list show less button if it would do nothing
+ [\#4848](https://github.com/matrix-org/matrix-react-sdk/pull/4848)
+ * Improve message preview copy in new room list
+ [\#4823](https://github.com/matrix-org/matrix-react-sdk/pull/4823)
+ * Allow the tag panel to be disabled in the new room list
+ [\#4844](https://github.com/matrix-org/matrix-react-sdk/pull/4844)
+ * Make the whole user row clickable in the new room list
+ [\#4843](https://github.com/matrix-org/matrix-react-sdk/pull/4843)
+ * Add a new spinner design behind a labs flag
+ [\#4842](https://github.com/matrix-org/matrix-react-sdk/pull/4842)
+ * ts-ignore because something is made of fail
+ [\#4845](https://github.com/matrix-org/matrix-react-sdk/pull/4845)
+ * Fix Welcome.html CAS and SSO URLs not working
+ [\#4838](https://github.com/matrix-org/matrix-react-sdk/pull/4838)
+ * More small tweaks in preparation for Notifications rework
+ [\#4835](https://github.com/matrix-org/matrix-react-sdk/pull/4835)
+ * Iterate on the new room list resize handle
+ [\#4840](https://github.com/matrix-org/matrix-react-sdk/pull/4840)
+ * Update sublists for new hover states
+ [\#4837](https://github.com/matrix-org/matrix-react-sdk/pull/4837)
+ * Tweak parts of the new room list design
+ [\#4839](https://github.com/matrix-org/matrix-react-sdk/pull/4839)
+ * Implement new resize handle for dogfooding
+ [\#4836](https://github.com/matrix-org/matrix-react-sdk/pull/4836)
+ * Hide app badge count for hidden upgraded rooms (non-highlight)
+ [\#4834](https://github.com/matrix-org/matrix-react-sdk/pull/4834)
+ * Move compact modern layout checkbox to 'advanced'
+ [\#4822](https://github.com/matrix-org/matrix-react-sdk/pull/4822)
+ * Allow the user to resize the new sublists to 1 tile
+ [\#4825](https://github.com/matrix-org/matrix-react-sdk/pull/4825)
+ * Make LoggedInView a real component because it uses shouldComponentUpdate
+ [\#4832](https://github.com/matrix-org/matrix-react-sdk/pull/4832)
+ * Small tweaks in preparation for Notifications rework
+ [\#4829](https://github.com/matrix-org/matrix-react-sdk/pull/4829)
+ * Remove extraneous debug from the new left panel
+ [\#4826](https://github.com/matrix-org/matrix-react-sdk/pull/4826)
+ * Fix icons in the new user menu not showing up
+ [\#4824](https://github.com/matrix-org/matrix-react-sdk/pull/4824)
+ * Fix sticky room disappearing/jumping in search results
+ [\#4817](https://github.com/matrix-org/matrix-react-sdk/pull/4817)
+ * Show cross-signing / secret storage reset button in more cases
+ [\#4821](https://github.com/matrix-org/matrix-react-sdk/pull/4821)
+ * Use theme-capable icons in the user menu
+ [\#4819](https://github.com/matrix-org/matrix-react-sdk/pull/4819)
+ * Font support in custom themes
+ [\#4814](https://github.com/matrix-org/matrix-react-sdk/pull/4814)
+ * Decrease margin between new sublists
+ [\#4816](https://github.com/matrix-org/matrix-react-sdk/pull/4816)
+ * Update profile information in User Menu and truncate where needed
+ [\#4818](https://github.com/matrix-org/matrix-react-sdk/pull/4818)
+ * Fix MessageActionBar in irc layout
+ [\#4802](https://github.com/matrix-org/matrix-react-sdk/pull/4802)
+ * Mark messages with a black shield if the megolm session isn't trusted
+ [\#4797](https://github.com/matrix-org/matrix-react-sdk/pull/4797)
+ * Custom font selection
+ [\#4761](https://github.com/matrix-org/matrix-react-sdk/pull/4761)
+ * Use the correct timeline reference for message previews
+ [\#4812](https://github.com/matrix-org/matrix-react-sdk/pull/4812)
+ * Fix read receipt handling in the new room list
+ [\#4811](https://github.com/matrix-org/matrix-react-sdk/pull/4811)
+ * Improve unread/badge states in new room list (mk II)
+ [\#4805](https://github.com/matrix-org/matrix-react-sdk/pull/4805)
+ * Only fire setting changes for changed settings
+ [\#4803](https://github.com/matrix-org/matrix-react-sdk/pull/4803)
+ * Trigger room-specific watchers whenever a higher level change happens
+ [\#4804](https://github.com/matrix-org/matrix-react-sdk/pull/4804)
+ * Have the theme switcher set the device-level theme to match settings
+ [\#4810](https://github.com/matrix-org/matrix-react-sdk/pull/4810)
+ * Fix layout of minimized view for new room list
+ [\#4808](https://github.com/matrix-org/matrix-react-sdk/pull/4808)
+ * Fix sticky headers over/under extending themselves in the new room list
+ [\#4809](https://github.com/matrix-org/matrix-react-sdk/pull/4809)
+ * Update read receipt remainder for internal font size change
+ [\#4806](https://github.com/matrix-org/matrix-react-sdk/pull/4806)
+ * Fix some appearance tab crash and implement style nits
+ [\#4801](https://github.com/matrix-org/matrix-react-sdk/pull/4801)
+ * Add message preview for font slider
+ [\#4770](https://github.com/matrix-org/matrix-react-sdk/pull/4770)
+ * Add layout options to the appearance tab
+ [\#4773](https://github.com/matrix-org/matrix-react-sdk/pull/4773)
+ * Update from Weblate
+ [\#4800](https://github.com/matrix-org/matrix-react-sdk/pull/4800)
+ * Support accounts with cross signing but no SSSS
+ [\#4717](https://github.com/matrix-org/matrix-react-sdk/pull/4717)
+ * Look for existing verification requests after login
+ [\#4762](https://github.com/matrix-org/matrix-react-sdk/pull/4762)
+ * Add a checkpoint to index newly encrypted rooms.
+ [\#4611](https://github.com/matrix-org/matrix-react-sdk/pull/4611)
+ * Add support to paginate search results when using Seshat.
+ [\#4705](https://github.com/matrix-org/matrix-react-sdk/pull/4705)
+ * User versions in the event index.
+ [\#4788](https://github.com/matrix-org/matrix-react-sdk/pull/4788)
+ * Fix crash when filtering new room list too fast
+ [\#4796](https://github.com/matrix-org/matrix-react-sdk/pull/4796)
+ * hide search results from unknown rooms
+ [\#4795](https://github.com/matrix-org/matrix-react-sdk/pull/4795)
+ * Mark the new room list as ready for general testing
+ [\#4794](https://github.com/matrix-org/matrix-react-sdk/pull/4794)
+ * Extend QueryMatcher's sorting heuristic
+ [\#4784](https://github.com/matrix-org/matrix-react-sdk/pull/4784)
+ * Lint ts semicolons (aka. The great semicolon migration)
+ [\#4791](https://github.com/matrix-org/matrix-react-sdk/pull/4791)
+ * Revert "Use recovery keys over passphrases"
+ [\#4790](https://github.com/matrix-org/matrix-react-sdk/pull/4790)
+ * Clear `top` when not sticking headers to the top
+ [\#4783](https://github.com/matrix-org/matrix-react-sdk/pull/4783)
+ * Don't show a 'show less' button when it's impossible to collapse
+ [\#4785](https://github.com/matrix-org/matrix-react-sdk/pull/4785)
+ * Fix show less/more button occluding the list automatically
+ [\#4786](https://github.com/matrix-org/matrix-react-sdk/pull/4786)
+ * Improve room switching in the new room list
+ [\#4787](https://github.com/matrix-org/matrix-react-sdk/pull/4787)
+ * Remove labs option to cache 'passphrase'
+ [\#4789](https://github.com/matrix-org/matrix-react-sdk/pull/4789)
+ * Remove escape backslashes in non-Markdown messages
+ [\#4694](https://github.com/matrix-org/matrix-react-sdk/pull/4694)
+
+Changes in [2.8.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.8.1) (2020-06-29)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.8.0...v2.8.1)
+
+ * Support accounts with cross signing but no SSSS
+ [\#4852](https://github.com/matrix-org/matrix-react-sdk/pull/4852)
+
+Changes in [2.8.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.8.0) (2020-06-23)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.8.0-rc.1...v2.8.0)
+
+ * Upgrade to JS SDK 7.0.0
+ * Update read receipt remainder for internal font size change
+ [\#4807](https://github.com/matrix-org/matrix-react-sdk/pull/4807)
+ * Revert "Use recovery keys over passphrases"
+ [\#4793](https://github.com/matrix-org/matrix-react-sdk/pull/4793)
+
+Changes in [2.8.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.8.0-rc.1) (2020-06-17)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.7.2...v2.8.0-rc.1)
+
+ * Upgrade to JS SDK 7.0.0-rc.1
+ * Fix Styled Checkbox and Radio Button disabled state
+ [\#4778](https://github.com/matrix-org/matrix-react-sdk/pull/4778)
+ * clean up and fix the isMasterRuleEnabled logic
+ [\#4782](https://github.com/matrix-org/matrix-react-sdk/pull/4782)
+ * Fix case-sensitivity of /me to match rest of slash commands
+ [\#4763](https://github.com/matrix-org/matrix-react-sdk/pull/4763)
+ * Add a 'show less' button to the new room list
+ [\#4765](https://github.com/matrix-org/matrix-react-sdk/pull/4765)
+ * Update from Weblate
+ [\#4781](https://github.com/matrix-org/matrix-react-sdk/pull/4781)
+ * Sticky and collapsing headers for new room list
+ [\#4758](https://github.com/matrix-org/matrix-react-sdk/pull/4758)
+ * Make the room list labs setting reload on change
+ [\#4780](https://github.com/matrix-org/matrix-react-sdk/pull/4780)
+ * Handle/hide old rooms in the room list
+ [\#4767](https://github.com/matrix-org/matrix-react-sdk/pull/4767)
+ * Add some media queries to improve UI on mobile (#3991)
+ [\#4656](https://github.com/matrix-org/matrix-react-sdk/pull/4656)
+ * Match fuzzy filtering a bit more reliably in the new room list
+ [\#4769](https://github.com/matrix-org/matrix-react-sdk/pull/4769)
+ * Improve Field ts definitions some more
+ [\#4777](https://github.com/matrix-org/matrix-react-sdk/pull/4777)
+ * Fix alignment of checkboxes in new room list's context menu
+ [\#4776](https://github.com/matrix-org/matrix-react-sdk/pull/4776)
+ * Fix Field ts def, fix LocalEchoWrapper and NotificationsEnabledController
+ [\#4775](https://github.com/matrix-org/matrix-react-sdk/pull/4775)
+ * Add presence indicators and globes to new room list
+ [\#4774](https://github.com/matrix-org/matrix-react-sdk/pull/4774)
+ * Include the sticky room when filtering in the new room list
+ [\#4772](https://github.com/matrix-org/matrix-react-sdk/pull/4772)
+ * Add a home button to the new room list menu when available
+ [\#4771](https://github.com/matrix-org/matrix-react-sdk/pull/4771)
+ * use group layout for search results
+ [\#4764](https://github.com/matrix-org/matrix-react-sdk/pull/4764)
+ * Fix m.id.phone spec compliance
+ [\#4757](https://github.com/matrix-org/matrix-react-sdk/pull/4757)
+ * User Info default power levels for ban/kick/redact to 50 as per spec
+ [\#4759](https://github.com/matrix-org/matrix-react-sdk/pull/4759)
+ * Match new room list's text search to old room list
+ [\#4768](https://github.com/matrix-org/matrix-react-sdk/pull/4768)
+ * Fix ordering of recent rooms in the new room list
+ [\#4766](https://github.com/matrix-org/matrix-react-sdk/pull/4766)
+ * Change theme selector to use new styled radio buttons
+ [\#4731](https://github.com/matrix-org/matrix-react-sdk/pull/4731)
+ * Use recovery keys over passphrases
+ [\#4686](https://github.com/matrix-org/matrix-react-sdk/pull/4686)
+ * Update from Weblate
+ [\#4760](https://github.com/matrix-org/matrix-react-sdk/pull/4760)
+ * Initial dark theme support for new room list
+ [\#4756](https://github.com/matrix-org/matrix-react-sdk/pull/4756)
+ * Support per-list options and algorithms on the new room list
+ [\#4754](https://github.com/matrix-org/matrix-react-sdk/pull/4754)
+ * Send read marker updates immediately after moving visually
+ [\#4755](https://github.com/matrix-org/matrix-react-sdk/pull/4755)
+ * Add a minimized view to the new room list
+ [\#4753](https://github.com/matrix-org/matrix-react-sdk/pull/4753)
+ * Fix e2e icon alignment in irc-layout
+ [\#4752](https://github.com/matrix-org/matrix-react-sdk/pull/4752)
+ * Add some resource leak protection to new room list badges
+ [\#4750](https://github.com/matrix-org/matrix-react-sdk/pull/4750)
+ * Fix read-receipt alignment
+ [\#4747](https://github.com/matrix-org/matrix-react-sdk/pull/4747)
+ * Show message previews on the new room list tiles
+ [\#4751](https://github.com/matrix-org/matrix-react-sdk/pull/4751)
+ * Fix various layout concerns with the new room list
+ [\#4749](https://github.com/matrix-org/matrix-react-sdk/pull/4749)
+ * Prioritize text on the clipboard over file
+ [\#4748](https://github.com/matrix-org/matrix-react-sdk/pull/4748)
+ * Move Settings flag to ts
+ [\#4729](https://github.com/matrix-org/matrix-react-sdk/pull/4729)
+ * Add a context menu to rooms in the new room list
+ [\#4743](https://github.com/matrix-org/matrix-react-sdk/pull/4743)
+ * Add hover states and basic context menu to new room list
+ [\#4742](https://github.com/matrix-org/matrix-react-sdk/pull/4742)
+ * Update resize handle for new designs in new room list
+ [\#4741](https://github.com/matrix-org/matrix-react-sdk/pull/4741)
+ * Improve general stability in the new room list
+ [\#4740](https://github.com/matrix-org/matrix-react-sdk/pull/4740)
+ * Reimplement breadcrumbs for new room list
+ [\#4735](https://github.com/matrix-org/matrix-react-sdk/pull/4735)
+ * Add styled radio buttons
+ [\#4744](https://github.com/matrix-org/matrix-react-sdk/pull/4744)
+ * Hide checkbox tick on dark backgrounds
+ [\#4730](https://github.com/matrix-org/matrix-react-sdk/pull/4730)
+ * Make checkboxes a11y friendly
+ [\#4746](https://github.com/matrix-org/matrix-react-sdk/pull/4746)
+ * EventIndex: Store and restore the encryption info for encrypted events.
+ [\#4738](https://github.com/matrix-org/matrix-react-sdk/pull/4738)
+ * Use IDestroyable instead of IDisposable
+ [\#4739](https://github.com/matrix-org/matrix-react-sdk/pull/4739)
+ * Add/improve badge counts in new room list
+ [\#4734](https://github.com/matrix-org/matrix-react-sdk/pull/4734)
+ * Convert FormattingUtils to TypeScript and add badge utility function
+ [\#4732](https://github.com/matrix-org/matrix-react-sdk/pull/4732)
+ * Add filtering and exploring to the new room list
+ [\#4736](https://github.com/matrix-org/matrix-react-sdk/pull/4736)
+ * Support prioritized room list filters
+ [\#4737](https://github.com/matrix-org/matrix-react-sdk/pull/4737)
+ * Clean up font scaling appearance
+ [\#4733](https://github.com/matrix-org/matrix-react-sdk/pull/4733)
+ * Add user menu to new room list
+ [\#4722](https://github.com/matrix-org/matrix-react-sdk/pull/4722)
+ * New room list basic styling and layout
+ [\#4711](https://github.com/matrix-org/matrix-react-sdk/pull/4711)
+ * Fix read receipt overlap
+ [\#4727](https://github.com/matrix-org/matrix-react-sdk/pull/4727)
+ * Load correct default font size
+ [\#4726](https://github.com/matrix-org/matrix-react-sdk/pull/4726)
+ * send state of lowBandwidth in rageshakes
+ [\#4724](https://github.com/matrix-org/matrix-react-sdk/pull/4724)
+ * Change internal font size from from 15 to 10
+ [\#4725](https://github.com/matrix-org/matrix-react-sdk/pull/4725)
+ * Upgrade deps
+ [\#4723](https://github.com/matrix-org/matrix-react-sdk/pull/4723)
+ * Ensure active Jitsi conference is closed on widget pop-out
+ [\#4444](https://github.com/matrix-org/matrix-react-sdk/pull/4444)
+ * Introduce sticky rooms to the new room list
+ [\#4720](https://github.com/matrix-org/matrix-react-sdk/pull/4720)
+ * Handle remaining cases for room updates in new room list
+ [\#4721](https://github.com/matrix-org/matrix-react-sdk/pull/4721)
+ * Allow searching the emoji picker using other emoji
+ [\#4719](https://github.com/matrix-org/matrix-react-sdk/pull/4719)
+ * New room list scrolling and resizing
+ [\#4697](https://github.com/matrix-org/matrix-react-sdk/pull/4697)
+ * Don't show FormatBar if composer is empty
+ [\#4696](https://github.com/matrix-org/matrix-react-sdk/pull/4696)
+ * Split the left panel into new and old for new room list designs
+ [\#4687](https://github.com/matrix-org/matrix-react-sdk/pull/4687)
+ * Fix compact layout regression
+ [\#4712](https://github.com/matrix-org/matrix-react-sdk/pull/4712)
+ * fix emoji in safari
+ [\#4710](https://github.com/matrix-org/matrix-react-sdk/pull/4710)
+ * Fix not being able to dismiss new login toasts
+ [\#4709](https://github.com/matrix-org/matrix-react-sdk/pull/4709)
+ * Fix exceptions from Tooltip
+ [\#4708](https://github.com/matrix-org/matrix-react-sdk/pull/4708)
+ * Stop removing variation selector from quick reactions
+ [\#4707](https://github.com/matrix-org/matrix-react-sdk/pull/4707)
+ * Tidy up continuation algorithm and make it work for hidden profile changes
+ [\#4704](https://github.com/matrix-org/matrix-react-sdk/pull/4704)
+ * Profile settings should never show a disambiguated display name
+ [\#4699](https://github.com/matrix-org/matrix-react-sdk/pull/4699)
+ * Prevent (double) 4S bootstrap from RestoreKeyBackupDialog
+ [\#4701](https://github.com/matrix-org/matrix-react-sdk/pull/4701)
+ * Stop checkbox styling bleeding through room address selector
+ [\#4691](https://github.com/matrix-org/matrix-react-sdk/pull/4691)
+ * Center HeaderButtons
+ [\#4695](https://github.com/matrix-org/matrix-react-sdk/pull/4695)
+ * Add .well-known option to control default e2ee behaviour
+ [\#4605](https://github.com/matrix-org/matrix-react-sdk/pull/4605)
+ * Add max-width to right and left panels
+ [\#4692](https://github.com/matrix-org/matrix-react-sdk/pull/4692)
+ * Fix login loop where the sso flow returns to `#/login`
+ [\#4685](https://github.com/matrix-org/matrix-react-sdk/pull/4685)
+ * Don't clear MAU toasts when a successful sync comes in
+ [\#4690](https://github.com/matrix-org/matrix-react-sdk/pull/4690)
+ * Add initial filtering support to new room list
+ [\#4681](https://github.com/matrix-org/matrix-react-sdk/pull/4681)
+ * Bubble up a decline-to-render of verification events to outside wrapper
+ [\#4664](https://github.com/matrix-org/matrix-react-sdk/pull/4664)
+ * upgrade to twemoji 13.0.0
+ [\#4672](https://github.com/matrix-org/matrix-react-sdk/pull/4672)
+ * Apply FocusLock to ImageView to capture Escape handling
+ [\#4666](https://github.com/matrix-org/matrix-react-sdk/pull/4666)
+ * Fix the 'complete security' screen
+ [\#4689](https://github.com/matrix-org/matrix-react-sdk/pull/4689)
+ * add null-guard for Autocomplete containerRef
+ [\#4688](https://github.com/matrix-org/matrix-react-sdk/pull/4688)
+ * Remove legacy codepaths for Unknown Device Error (UDE/UDD) handling
+ [\#4660](https://github.com/matrix-org/matrix-react-sdk/pull/4660)
+ * Remove feature_cross_signing
+ [\#4655](https://github.com/matrix-org/matrix-react-sdk/pull/4655)
+ * Autocomplete: use scrollIntoView for auto-scroll to fix it
+ [\#4670](https://github.com/matrix-org/matrix-react-sdk/pull/4670)
+
+Changes in [2.7.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.7.2) (2020-06-16)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.7.1...v2.7.2)
+
+ * Upgrade to JS SDK 6.2.2
+
+Changes in [2.7.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.7.1) (2020-06-05)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.7.0...v2.7.1)
+
+ * Upgrade to JS SDK 6.2.1
+ * Fix exceptions from Tooltip
+ [\#4716](https://github.com/matrix-org/matrix-react-sdk/pull/4716)
+ * Fix not being able to dismiss new login toasts
+ [\#4715](https://github.com/matrix-org/matrix-react-sdk/pull/4715)
+ * Fix compact layout regression
+ [\#4714](https://github.com/matrix-org/matrix-react-sdk/pull/4714)
+
+Changes in [2.7.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.7.0) (2020-06-04)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.7.0-rc.2...v2.7.0)
+
+ * Upgrade to JS SDK 6.2.0
+ * Prevent (double) 4S bootstrap from RestoreKeyBackupDialog
+ [\#4703](https://github.com/matrix-org/matrix-react-sdk/pull/4703)
+ * Fix checkbox bleed
+ [\#4702](https://github.com/matrix-org/matrix-react-sdk/pull/4702)
+ * Fix login loop where the sso flow returns to `#/login` to release
+ [\#4693](https://github.com/matrix-org/matrix-react-sdk/pull/4693)
+
+Changes in [2.7.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.7.0-rc.2) (2020-06-02)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.7.0-rc.1...v2.7.0-rc.2)
+
+ * Rewire the Sticker button to be an Emoji Picker
+ [\#3747](https://github.com/matrix-org/matrix-react-sdk/pull/3747)
+
+Changes in [2.7.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.7.0-rc.1) (2020-06-02)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.6.1...v2.7.0-rc.1)
+
+ * Upgrade to JS SDK 6.2.0-rc.1
+ * Update from Weblate
+ [\#4683](https://github.com/matrix-org/matrix-react-sdk/pull/4683)
+ * Make auth argument in the register request compliant with r0.6.0
+ [\#4347](https://github.com/matrix-org/matrix-react-sdk/pull/4347)
+ * Revert "Prevent PersistedElements overflowing scrolled areas"
+ [\#4682](https://github.com/matrix-org/matrix-react-sdk/pull/4682)
+ * Remove unused TagPanelButtons
+ [\#4680](https://github.com/matrix-org/matrix-react-sdk/pull/4680)
+ * Pass roomId to IRCTimelineProfileResizer
+ [\#4679](https://github.com/matrix-org/matrix-react-sdk/pull/4679)
+ * Remove logging to console for irc name resize
+ [\#4678](https://github.com/matrix-org/matrix-react-sdk/pull/4678)
+ * Use arrow functions instead of binding `this`
+ [\#4677](https://github.com/matrix-org/matrix-react-sdk/pull/4677)
+ * Increase specificity of compact layout selectors
+ [\#4675](https://github.com/matrix-org/matrix-react-sdk/pull/4675)
+ * Create and use stylised checkboxes
+ [\#4665](https://github.com/matrix-org/matrix-react-sdk/pull/4665)
+ * useIRCLayout moved to props
+ [\#4676](https://github.com/matrix-org/matrix-react-sdk/pull/4676)
+ * Fix paste image to upload
+ [\#4674](https://github.com/matrix-org/matrix-react-sdk/pull/4674)
+ * Fix FilePanel and NotificationsPanel regression
+ [\#4647](https://github.com/matrix-org/matrix-react-sdk/pull/4647)
+ * Allow deferring of Update Toast until the next morning
+ [\#4669](https://github.com/matrix-org/matrix-react-sdk/pull/4669)
+ * Give contextual feedback for manual update check instead of banner
+ [\#4668](https://github.com/matrix-org/matrix-react-sdk/pull/4668)
+ * Dialog wrap title instead of taking same space as the close/cancel button
+ [\#4659](https://github.com/matrix-org/matrix-react-sdk/pull/4659)
+ * Update Modular hosting link
+ [\#4627](https://github.com/matrix-org/matrix-react-sdk/pull/4627)
+ * Fix field placeholder regression
+ [\#4663](https://github.com/matrix-org/matrix-react-sdk/pull/4663)
+ * Fix/document a number of UIA oddities
+ [\#4667](https://github.com/matrix-org/matrix-react-sdk/pull/4667)
+ * Stop copy icon repeating weirdly
+ [\#4662](https://github.com/matrix-org/matrix-react-sdk/pull/4662)
+ * Try and fix the Notifier race
+ [\#4661](https://github.com/matrix-org/matrix-react-sdk/pull/4661)
+ * set the client's pickle key if the platform can store one
+ [\#4657](https://github.com/matrix-org/matrix-react-sdk/pull/4657)
+ * Migrate Banners to Toasts
+ [\#4624](https://github.com/matrix-org/matrix-react-sdk/pull/4624)
+ * Move Appearance tab to ts
+ [\#4658](https://github.com/matrix-org/matrix-react-sdk/pull/4658)
+ * Fix room alias lookup vs peeking race condition
+ [\#4606](https://github.com/matrix-org/matrix-react-sdk/pull/4606)
+ * Fix encryption icon miss-alignment
+ [\#4651](https://github.com/matrix-org/matrix-react-sdk/pull/4651)
+ * Fix sublist sizing regression
+ [\#4649](https://github.com/matrix-org/matrix-react-sdk/pull/4649)
+ * Fix lines overflowing room list width
+ [\#4650](https://github.com/matrix-org/matrix-react-sdk/pull/4650)
+ * Remove the keyshare dialog
+ [\#4648](https://github.com/matrix-org/matrix-react-sdk/pull/4648)
+ * Update badge counts in new room list as needed
+ [\#4654](https://github.com/matrix-org/matrix-react-sdk/pull/4654)
+ * EventIndex: Handle invalid m.room.redaction events correctly.
+ [\#4653](https://github.com/matrix-org/matrix-react-sdk/pull/4653)
+ * EventIndex: Print out the checkpoint if there was an error during a crawl
+ [\#4652](https://github.com/matrix-org/matrix-react-sdk/pull/4652)
+ * Move Field to Typescript
+ [\#4635](https://github.com/matrix-org/matrix-react-sdk/pull/4635)
+ * Use connection error to detect network problem
+ [\#4646](https://github.com/matrix-org/matrix-react-sdk/pull/4646)
+ * Revert default font size to 15px
+ [\#4641](https://github.com/matrix-org/matrix-react-sdk/pull/4641)
+ * Add logging when room join fails
+ [\#4645](https://github.com/matrix-org/matrix-react-sdk/pull/4645)
+ * Remove EncryptedEventDialog
+ [\#4644](https://github.com/matrix-org/matrix-react-sdk/pull/4644)
+ * Migrate Toasts to Typescript and to granular priority system
+ [\#4618](https://github.com/matrix-org/matrix-react-sdk/pull/4618)
+ * Update Crypto Store Too New copy
+ [\#4632](https://github.com/matrix-org/matrix-react-sdk/pull/4632)
+ * MemberAvatar should not have its own letter fallback, it should use
+ BaseAvatar
+ [\#4643](https://github.com/matrix-org/matrix-react-sdk/pull/4643)
+ * Fix media upload issues with abort and status bar
+ [\#4630](https://github.com/matrix-org/matrix-react-sdk/pull/4630)
+ * fix viewGroup to actually show the group if possible
+ [\#4633](https://github.com/matrix-org/matrix-react-sdk/pull/4633)
+ * Update confirm passphrase copy
+ [\#4634](https://github.com/matrix-org/matrix-react-sdk/pull/4634)
+ * Improve accessibility of the emoji picker
+ [\#4636](https://github.com/matrix-org/matrix-react-sdk/pull/4636)
+ * Fix Emoji Picker footer being too small if text overflows
+ [\#4631](https://github.com/matrix-org/matrix-react-sdk/pull/4631)
+ * Improve style of toasts to match Figma
+ [\#4613](https://github.com/matrix-org/matrix-react-sdk/pull/4613)
+ * Iterate toast count indicator more logically
+ [\#4620](https://github.com/matrix-org/matrix-react-sdk/pull/4620)
+ * Fix reacting to redactions
+ [\#4626](https://github.com/matrix-org/matrix-react-sdk/pull/4626)
+ * Fix sentMessageAndIsAlone by dispatching `message_sent` more consistently
+ [\#4628](https://github.com/matrix-org/matrix-react-sdk/pull/4628)
+ * Update from Weblate
+ [\#4640](https://github.com/matrix-org/matrix-react-sdk/pull/4640)
+ * Replace `alias` with `address` in copy for consistency
+ [\#4402](https://github.com/matrix-org/matrix-react-sdk/pull/4402)
+ * Convert MatrixClientPeg to TypeScript
+ [\#4638](https://github.com/matrix-org/matrix-react-sdk/pull/4638)
+ * Fix BaseAvatar wrongly retrying urls
+ [\#4629](https://github.com/matrix-org/matrix-react-sdk/pull/4629)
+ * Fix event highlights not being updated to reflect edits
+ [\#4637](https://github.com/matrix-org/matrix-react-sdk/pull/4637)
+ * Calculate badges in the new room list more reliably
+ [\#4625](https://github.com/matrix-org/matrix-react-sdk/pull/4625)
+ * Transition BaseAvatar to hooks
+ [\#4101](https://github.com/matrix-org/matrix-react-sdk/pull/4101)
+ * Convert BasePlatform and BaseEventIndexManager to Typescript
+ [\#4614](https://github.com/matrix-org/matrix-react-sdk/pull/4614)
+ * Fix: Tag_DM is not defined
+ [\#4619](https://github.com/matrix-org/matrix-react-sdk/pull/4619)
+ * Fix visibility of message timestamps
+ [\#4615](https://github.com/matrix-org/matrix-react-sdk/pull/4615)
+ * Rewrite the room list store
+ [\#4253](https://github.com/matrix-org/matrix-react-sdk/pull/4253)
+ * Update code style to mention switch statements
+ [\#4610](https://github.com/matrix-org/matrix-react-sdk/pull/4610)
+ * Fix key backup restore with SSSS
+ [\#4612](https://github.com/matrix-org/matrix-react-sdk/pull/4612)
+ * Handle null tokens in the crawler loop.
+ [\#4608](https://github.com/matrix-org/matrix-react-sdk/pull/4608)
+ * Font scaling settings and slider
+ [\#4424](https://github.com/matrix-org/matrix-react-sdk/pull/4424)
+ * Prevent PersistedElements overflowing scrolled areas
+ [\#4494](https://github.com/matrix-org/matrix-react-sdk/pull/4494)
+ * IRC ui layout
+ [\#4531](https://github.com/matrix-org/matrix-react-sdk/pull/4531)
+ * Remove SSSS key upgrade check from rageshake
+ [\#4607](https://github.com/matrix-org/matrix-react-sdk/pull/4607)
+ * Label the create room button better than "Add room"
+ [\#4603](https://github.com/matrix-org/matrix-react-sdk/pull/4603)
+ * Convert the dispatcher to TypeScript
+ [\#4593](https://github.com/matrix-org/matrix-react-sdk/pull/4593)
+ * Consolidate password/passphrase fields into a component & add dynamic colour
+ to progress
+ [\#4599](https://github.com/matrix-org/matrix-react-sdk/pull/4599)
+ * UserView, show Welcome page in the mid panel instead of empty space
+ [\#4590](https://github.com/matrix-org/matrix-react-sdk/pull/4590)
+ * Update from Weblate
+ [\#4601](https://github.com/matrix-org/matrix-react-sdk/pull/4601)
+ * Make email auth component fail better if server claims email isn't validated
+ [\#4600](https://github.com/matrix-org/matrix-react-sdk/pull/4600)
+ * Add new keyboard shortcuts for jump to unread and upload file
+ [\#4588](https://github.com/matrix-org/matrix-react-sdk/pull/4588)
+ * accept and linkify local domains like those from mDNS
+ [\#4594](https://github.com/matrix-org/matrix-react-sdk/pull/4594)
+ * Revert "ImageView make clicking off it easier"
+ [\#4586](https://github.com/matrix-org/matrix-react-sdk/pull/4586)
+ * wrap node-qrcode in a React FC and use it for ShareDialog
+ [\#4394](https://github.com/matrix-org/matrix-react-sdk/pull/4394)
+ * Pass screenAfterLogin through SSO in the callback url
+ [\#4585](https://github.com/matrix-org/matrix-react-sdk/pull/4585)
+ * Remove debugging that causes email addresses to load forever
+ [\#4597](https://github.com/matrix-org/matrix-react-sdk/pull/4597)
+
+Changes in [2.6.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.6.1) (2020-05-22)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.6.0...v2.6.1)
+
+ * Fix key backup restore with SSSS
+ [\#4617](https://github.com/matrix-org/matrix-react-sdk/pull/4617)
+ * Remove SSSS key upgrade check from rageshake
+ [\#4616](https://github.com/matrix-org/matrix-react-sdk/pull/4616)
+
+Changes in [2.6.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.6.0) (2020-05-19)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.6.0-rc.1...v2.6.0)
+
+ * Upgrade to JS SDK 6.1.0
+ * Revert "ImageView make clicking off it easier"
+ [\#4602](https://github.com/matrix-org/matrix-react-sdk/pull/4602)
+ * Remove debugging that causes email addresses to load forever (to release)
+ [\#4598](https://github.com/matrix-org/matrix-react-sdk/pull/4598)
+
+Changes in [2.6.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.6.0-rc.1) (2020-05-14)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0...v2.6.0-rc.1)
+
+ * Upgrade to JS SDK 6.1.0-rc.1
+ * Update from Weblate
+ [\#4596](https://github.com/matrix-org/matrix-react-sdk/pull/4596)
+ * Fix message edits dialog being wrong and sometimes crashing
+ [\#4595](https://github.com/matrix-org/matrix-react-sdk/pull/4595)
+ * Acquire a new session before enacting deactivation
+ [\#4584](https://github.com/matrix-org/matrix-react-sdk/pull/4584)
+ * Remove UI for upgrading 4S to symmetric encryption
+ [\#4581](https://github.com/matrix-org/matrix-react-sdk/pull/4581)
+ * Add copy to SSO prompts during cross-signing setup
+ [\#4555](https://github.com/matrix-org/matrix-react-sdk/pull/4555)
+ * Re-fix OpenID requests from widgets
+ [\#4592](https://github.com/matrix-org/matrix-react-sdk/pull/4592)
+ * Fix persistent widgets on desktop / http
+ [\#4591](https://github.com/matrix-org/matrix-react-sdk/pull/4591)
+ * Updated link and added:Yarn two is not yet used.
+ [\#4589](https://github.com/matrix-org/matrix-react-sdk/pull/4589)
+ * Fix topic dialog not supporting escape as it didn't have a "Close"
+ [\#4578](https://github.com/matrix-org/matrix-react-sdk/pull/4578)
+ * Default to public room when creating room from room directory
+ [\#4579](https://github.com/matrix-org/matrix-react-sdk/pull/4579)
+ * Replace png flags and add Kosovo to country code dropdown
+ [\#4576](https://github.com/matrix-org/matrix-react-sdk/pull/4576)
+ * Rename `trash (custom).svg` as electron doesn't like paths with spaces
+ [\#4583](https://github.com/matrix-org/matrix-react-sdk/pull/4583)
+ * Fix sign in / up links on previewed rooms
+ [\#4582](https://github.com/matrix-org/matrix-react-sdk/pull/4582)
+ * Avoid soft crash if unknown device in verification
+ [\#4580](https://github.com/matrix-org/matrix-react-sdk/pull/4580)
+ * Add slash commands /query and /msg to match IRC
+ [\#4568](https://github.com/matrix-org/matrix-react-sdk/pull/4568)
+ * Send cross-signing debug booleans over rageshake
+ [\#4570](https://github.com/matrix-org/matrix-react-sdk/pull/4570)
+ * Prompt user to specify an alternate server if theirs has registration off
+ [\#4575](https://github.com/matrix-org/matrix-react-sdk/pull/4575)
+ * Don't try and redact redactions for "Remove recent messages"
+ [\#4573](https://github.com/matrix-org/matrix-react-sdk/pull/4573)
+ * View Source should target the replacing event rather than the root one
+ [\#4571](https://github.com/matrix-org/matrix-react-sdk/pull/4571)
+ * Fix passphrase reset in key backup restore dialog
+ [\#4569](https://github.com/matrix-org/matrix-react-sdk/pull/4569)
+ * Ensure key backup gets dealt with correctly during secret storage reset
+ [\#4556](https://github.com/matrix-org/matrix-react-sdk/pull/4556)
+ * Fix crash for broken invites
+ [\#4565](https://github.com/matrix-org/matrix-react-sdk/pull/4565)
+ * Fix rageshake with no matrix client
+ [\#4572](https://github.com/matrix-org/matrix-react-sdk/pull/4572)
+ * Update from Weblate
+ [\#4567](https://github.com/matrix-org/matrix-react-sdk/pull/4567)
+ * Bring back UnknownBody for UISIs
+ [\#4564](https://github.com/matrix-org/matrix-react-sdk/pull/4564)
+ * clear tag panel selection if the community selected is left
+ [\#4559](https://github.com/matrix-org/matrix-react-sdk/pull/4559)
+ * Close ImageView when redacting
+ [\#4560](https://github.com/matrix-org/matrix-react-sdk/pull/4560)
+ * Redesign redactions
+ [\#4484](https://github.com/matrix-org/matrix-react-sdk/pull/4484)
+ * Don't try to reload profile information when closing the user panel
+ [\#4547](https://github.com/matrix-org/matrix-react-sdk/pull/4547)
+ * Fix right panel hiding when viewing room member
+ [\#4558](https://github.com/matrix-org/matrix-react-sdk/pull/4558)
+ * Don't erase password confirm on registration error
+ [\#4540](https://github.com/matrix-org/matrix-react-sdk/pull/4540)
+ * Add a loading state for email addresses/phone numbers in settings
+ [\#4557](https://github.com/matrix-org/matrix-react-sdk/pull/4557)
+ * set the meta tag for theme-color to the same theme css background
+ [\#4554](https://github.com/matrix-org/matrix-react-sdk/pull/4554)
+ * Update Invite Dialog copy to include email addresses
+ [\#4497](https://github.com/matrix-org/matrix-react-sdk/pull/4497)
+ * Fix slider toggle regression.
+ [\#4546](https://github.com/matrix-org/matrix-react-sdk/pull/4546)
+ * Fix a crash where a name could unexpectedly be an empty list
+ [\#4552](https://github.com/matrix-org/matrix-react-sdk/pull/4552)
+ * Solves communities can be dragged from context menu
+ [\#4492](https://github.com/matrix-org/matrix-react-sdk/pull/4492)
+ * Remove prefixes for composer avatar urls
+ [\#4553](https://github.com/matrix-org/matrix-react-sdk/pull/4553)
+ * Fix reply RR spacing getting doubled
+ [\#4541](https://github.com/matrix-org/matrix-react-sdk/pull/4541)
+ * Differentiate copy for own untrusted device dialog
+ [\#4549](https://github.com/matrix-org/matrix-react-sdk/pull/4549)
+ * EventIndex: Reduce the logging the event index is producing.
+ [\#4548](https://github.com/matrix-org/matrix-react-sdk/pull/4548)
+ * Increase rageshake size limit to 5mb
+ [\#4543](https://github.com/matrix-org/matrix-react-sdk/pull/4543)
+ * Update from Weblate
+ [\#4542](https://github.com/matrix-org/matrix-react-sdk/pull/4542)
+ * Guard against race when waiting for cross-signing to be ready
+ [\#4539](https://github.com/matrix-org/matrix-react-sdk/pull/4539)
+ * Wait for user to be verified in e2e setup
+ [\#4537](https://github.com/matrix-org/matrix-react-sdk/pull/4537)
+ * Convert MatrixChat to a TypeScript class
+ [\#4462](https://github.com/matrix-org/matrix-react-sdk/pull/4462)
+ * Mark room as read when escape is pressed
+ [\#4271](https://github.com/matrix-org/matrix-react-sdk/pull/4271)
+ * Only show key backup reminder when confirmed by server to be missing
+ [\#4534](https://github.com/matrix-org/matrix-react-sdk/pull/4534)
+ * Add device name to unverified session toast
+ [\#4535](https://github.com/matrix-org/matrix-react-sdk/pull/4535)
+ * Show progress when loading keys
+ [\#4507](https://github.com/matrix-org/matrix-react-sdk/pull/4507)
+ * Fix device verification toasts not disappearing
+ [\#4532](https://github.com/matrix-org/matrix-react-sdk/pull/4532)
+ * Update toast copy again
+ [\#4529](https://github.com/matrix-org/matrix-react-sdk/pull/4529)
+ * Re-apply theme after login
+ [\#4518](https://github.com/matrix-org/matrix-react-sdk/pull/4518)
+ * Reduce maximum width of toasts & allow multiple lines
+ [\#4525](https://github.com/matrix-org/matrix-react-sdk/pull/4525)
+ * Treat sessions that are there when we log in as old
+ [\#4524](https://github.com/matrix-org/matrix-react-sdk/pull/4524)
+ * Allow resetting storage from the access dialog
+ [\#4521](https://github.com/matrix-org/matrix-react-sdk/pull/4521)
+ * Update (bulk) unverified device toast copy
+ [\#4522](https://github.com/matrix-org/matrix-react-sdk/pull/4522)
+ * Make new device toasts appear above review toasts
+ [\#4519](https://github.com/matrix-org/matrix-react-sdk/pull/4519)
+ * Separate toasts for existing & new device verification
+ [\#4511](https://github.com/matrix-org/matrix-react-sdk/pull/4511)
+ * Slightly darker toggle off bg color
+ [\#4477](https://github.com/matrix-org/matrix-react-sdk/pull/4477)
+ * Fix pill vertical align
+ [\#4514](https://github.com/matrix-org/matrix-react-sdk/pull/4514)
+ * Fix set up encryption toast to use "set up" as action
+ [\#4502](https://github.com/matrix-org/matrix-react-sdk/pull/4502)
+ * Don't enable e2ee when inviting a 3pid
+ [\#4509](https://github.com/matrix-org/matrix-react-sdk/pull/4509)
+ * Fix internal link styling in Security Settings
+ [\#4510](https://github.com/matrix-org/matrix-react-sdk/pull/4510)
+ * Small custom theming fixes
+ [\#4508](https://github.com/matrix-org/matrix-react-sdk/pull/4508)
+ * Fix scaling issues
+ [\#4355](https://github.com/matrix-org/matrix-react-sdk/pull/4355)
+ * Aggregate device verify toasts
+ [\#4506](https://github.com/matrix-org/matrix-react-sdk/pull/4506)
+ * Support setting username and avatar colors in custom themes
+ [\#4503](https://github.com/matrix-org/matrix-react-sdk/pull/4503)
+ * only clear on continuations where the clear isn't done by SenderProfile
+ [\#4501](https://github.com/matrix-org/matrix-react-sdk/pull/4501)
+ * cap width of editable item list item to leave space for its X button
+ [\#4495](https://github.com/matrix-org/matrix-react-sdk/pull/4495)
+ * Add a link from settings / devices to your user profile
+ [\#4498](https://github.com/matrix-org/matrix-react-sdk/pull/4498)
+ * Update from Weblate
+ [\#4496](https://github.com/matrix-org/matrix-react-sdk/pull/4496)
+ * Make icon change in SetupEncryptionDialog
+ [\#4485](https://github.com/matrix-org/matrix-react-sdk/pull/4485)
+ * Remove invite only padlocks feature flag
+ [\#4487](https://github.com/matrix-org/matrix-react-sdk/pull/4487)
+ * Fix incorrect toast if security setup skipped
+ [\#4486](https://github.com/matrix-org/matrix-react-sdk/pull/4486)
+ * Revert "Update emojibase for fixed emoji codepoints and Emoji 13 support"
+ [\#4482](https://github.com/matrix-org/matrix-react-sdk/pull/4482)
+ * Fix widget URL templating (again)
+ [\#4481](https://github.com/matrix-org/matrix-react-sdk/pull/4481)
+ * Fix recovery link on login verification flow
+ [\#4479](https://github.com/matrix-org/matrix-react-sdk/pull/4479)
+ * Make avatars in pills occupy the entire space using cropping
+ [\#4476](https://github.com/matrix-org/matrix-react-sdk/pull/4476)
+ * Use WidgetType more often to avoid breaking new sticker pickers
+ [\#4458](https://github.com/matrix-org/matrix-react-sdk/pull/4458)
+ * Update logging for unmanaged widgets, and add TODO comments for other areas
+ [\#4460](https://github.com/matrix-org/matrix-react-sdk/pull/4460)
+ * Fix OpenID requests from widgets
+ [\#4459](https://github.com/matrix-org/matrix-react-sdk/pull/4459)
+ * Take encrypted message search out of labs
+ [\#4467](https://github.com/matrix-org/matrix-react-sdk/pull/4467)
+ * Fix BigEmoji for replies
+ [\#4475](https://github.com/matrix-org/matrix-react-sdk/pull/4475)
+ * Update login security copy and design to match Figma
+ [\#4472](https://github.com/matrix-org/matrix-react-sdk/pull/4472)
+ * Fix i18n of SSO UIA copy in Deactivate Account Dialog
+ [\#4471](https://github.com/matrix-org/matrix-react-sdk/pull/4471)
+ * Assert type of domNode as HTMLElement to fix build
+ [\#4470](https://github.com/matrix-org/matrix-react-sdk/pull/4470)
+ * Unignored in settings
+ [\#4466](https://github.com/matrix-org/matrix-react-sdk/pull/4466)
+ * Skip auth flow test for signing upload when password present
+ [\#4464](https://github.com/matrix-org/matrix-react-sdk/pull/4464)
+ * If user cannot set email during registration don't tell them to
+ [\#4461](https://github.com/matrix-org/matrix-react-sdk/pull/4461)
+ * Fix post-ts autocomplete, it is not null
+ [\#4463](https://github.com/matrix-org/matrix-react-sdk/pull/4463)
+ * Convert autocomplete stuff to TypeScript
+ [\#4452](https://github.com/matrix-org/matrix-react-sdk/pull/4452)
+ * Add a back button to the devtools verifications panel
+ [\#4455](https://github.com/matrix-org/matrix-react-sdk/pull/4455)
+ * Fix: wait until cross-signing keys are fetched to show verify button
+ [\#4456](https://github.com/matrix-org/matrix-react-sdk/pull/4456)
+ * Handle load error in create secret storage dialog
+ [\#4451](https://github.com/matrix-org/matrix-react-sdk/pull/4451)
+ * Allow iframes and Jitsi URLs in /addwidget
+ [\#4382](https://github.com/matrix-org/matrix-react-sdk/pull/4382)
+ * Support m.jitsi-typed widgets as Jitsi widgets
+ [\#4379](https://github.com/matrix-org/matrix-react-sdk/pull/4379)
+ * Don't recheck DeviceListener until after initial sync is finished
+ [\#4450](https://github.com/matrix-org/matrix-react-sdk/pull/4450)
+ * Fix CSS class in ButtonPlaceholder
+ [\#4449](https://github.com/matrix-org/matrix-react-sdk/pull/4449)
+ * Password Login make sure tab takes user to password field
+ [\#4441](https://github.com/matrix-org/matrix-react-sdk/pull/4441)
+ * Network Dropdown fix things not scrolling properly
+ [\#4439](https://github.com/matrix-org/matrix-react-sdk/pull/4439)
+ * ImageView make clicking off it easier
+ [\#4448](https://github.com/matrix-org/matrix-react-sdk/pull/4448)
+ * Add slash command to send a rageshake
+ [\#4443](https://github.com/matrix-org/matrix-react-sdk/pull/4443)
+ * EventIndex: Filter out events that don't have a propper content value.
+ [\#4446](https://github.com/matrix-org/matrix-react-sdk/pull/4446)
+ * Revert "Fix Filepanel scroll position state lost when room is changed"
+ [\#4445](https://github.com/matrix-org/matrix-react-sdk/pull/4445)
+ * Update seshat copy to remove trailing full stop
+ [\#4442](https://github.com/matrix-org/matrix-react-sdk/pull/4442)
+ * Fix Filepanel scroll position state lost when room is changed
+ [\#4388](https://github.com/matrix-org/matrix-react-sdk/pull/4388)
+ * Fix end-to-end tests for end-to-end encryption verification
+ [\#4436](https://github.com/matrix-org/matrix-react-sdk/pull/4436)
+ * Don't explode if the e2e test directory exists when crashing
+ [\#4437](https://github.com/matrix-org/matrix-react-sdk/pull/4437)
+ * Bump https-proxy-agent from 2.2.1 to 2.2.4 in /test/end-to-end-tests
+ [\#4430](https://github.com/matrix-org/matrix-react-sdk/pull/4430)
+ * Minor updates to e2e test instructions on Windows
+ [\#4432](https://github.com/matrix-org/matrix-react-sdk/pull/4432)
+ * Fix typo
+ [\#4435](https://github.com/matrix-org/matrix-react-sdk/pull/4435)
+ * Catch errors sooner so users can recover more easily
+ [\#4122](https://github.com/matrix-org/matrix-react-sdk/pull/4122)
+ * Rageshake: remind user of unsupported browser and send modernizr report
+ [\#4381](https://github.com/matrix-org/matrix-react-sdk/pull/4381)
+ * Design tweaks for DM Room Tiles
+ [\#4338](https://github.com/matrix-org/matrix-react-sdk/pull/4338)
+ * Don't break spills over multiple lines, ellipsis them at max-1-line
+ [\#4434](https://github.com/matrix-org/matrix-react-sdk/pull/4434)
+ * Turn the end-to-end tests back on and fix the lazy-loading tests
+ [\#4433](https://github.com/matrix-org/matrix-react-sdk/pull/4433)
+ * Fix key backup debug panel
+ [\#4431](https://github.com/matrix-org/matrix-react-sdk/pull/4431)
+ * Convert cross-signing feature flag to setting
+ [\#4416](https://github.com/matrix-org/matrix-react-sdk/pull/4416)
+ * Make RoomPublishSetting import-skinnable
+ [\#4428](https://github.com/matrix-org/matrix-react-sdk/pull/4428)
+ * Iterate cross-signing copy
+ [\#4425](https://github.com/matrix-org/matrix-react-sdk/pull/4425)
+ * Fix: ensure twemoji font is loaded when showing SAS emojis
+ [\#4422](https://github.com/matrix-org/matrix-react-sdk/pull/4422)
+ * Revert "Fix: load Twemoji before login so complete security gets the right
+ emojis during SAS"
+ [\#4421](https://github.com/matrix-org/matrix-react-sdk/pull/4421)
+ * Fix: load Twemoji before login so complete security gets the right emojis
+ during SAS
+ [\#4419](https://github.com/matrix-org/matrix-react-sdk/pull/4419)
+ * consolidate and fix copy to clipboard
+ [\#4410](https://github.com/matrix-org/matrix-react-sdk/pull/4410)
+ * Fix Message Context Menu options not displaying: block
+ [\#4418](https://github.com/matrix-org/matrix-react-sdk/pull/4418)
+ * Fix pills being broken by unescaped characters
+ [\#4411](https://github.com/matrix-org/matrix-react-sdk/pull/4411)
+
+Changes in [2.5.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0) (2020-05-05)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.6...v2.5.0)
+
+ * Upgrade to JS SDK 6.0.0
+ * EventIndex: Reduce the logging the event index is producing.
+ [\#4551](https://github.com/matrix-org/matrix-react-sdk/pull/4551)
+ * Differentiate copy for own untrusted device dialog
+ [\#4550](https://github.com/matrix-org/matrix-react-sdk/pull/4550)
+ * More detailed progress for key backup progress
+ [\#4545](https://github.com/matrix-org/matrix-react-sdk/pull/4545)
+ * Increase rageshake size limit to 5mb
+ [\#4544](https://github.com/matrix-org/matrix-react-sdk/pull/4544)
+
+Changes in [2.5.0-rc.6](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.6) (2020-05-01)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.5...v2.5.0-rc.6)
+
+ * Upgrade to JS SDK 6.0.0-rc.2
+ * Wait for user to be verified in e2e setup
+ [\#4538](https://github.com/matrix-org/matrix-react-sdk/pull/4538)
+ * Add device name to unverified session toast
+ [\#4536](https://github.com/matrix-org/matrix-react-sdk/pull/4536)
+
+Changes in [2.5.0-rc.5](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.5) (2020-04-30)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.4...v2.5.0-rc.5)
+
+ * Upgrade to JS SDK 6.0.0-rc.1
+ * Fix device verification toasts not disappearing
+ [\#4533](https://github.com/matrix-org/matrix-react-sdk/pull/4533)
+ * Allow resetting storage from the access dialog
+ [\#4526](https://github.com/matrix-org/matrix-react-sdk/pull/4526)
+ * Update toast copy again
+ [\#4530](https://github.com/matrix-org/matrix-react-sdk/pull/4530)
+ * Reduce maximum width of toasts & allow multiple lines
+ [\#4528](https://github.com/matrix-org/matrix-react-sdk/pull/4528)
+ * Treat sessions that are there when we log in as old
+ [\#4527](https://github.com/matrix-org/matrix-react-sdk/pull/4527)
+ * Update (bulk) unverified device toast copy
+ [\#4523](https://github.com/matrix-org/matrix-react-sdk/pull/4523)
+ * Make new device toasts appear above review toasts
+ [\#4520](https://github.com/matrix-org/matrix-react-sdk/pull/4520)
+ * Separate toasts for existing & new device verification
+ [\#4517](https://github.com/matrix-org/matrix-react-sdk/pull/4517)
+ * Aggregate device verify toasts
+ [\#4516](https://github.com/matrix-org/matrix-react-sdk/pull/4516)
+ * Fix set up encryption toast to use "set up" as action
+ [\#4515](https://github.com/matrix-org/matrix-react-sdk/pull/4515)
+ * Fix internal link styling in Security Settings
+ [\#4512](https://github.com/matrix-org/matrix-react-sdk/pull/4512)
+ * Don't enable e2ee when inviting a 3pid
+ [\#4513](https://github.com/matrix-org/matrix-react-sdk/pull/4513)
+ * only clear on continuations where the clear isn't done by SenderProfile
+ [\#4505](https://github.com/matrix-org/matrix-react-sdk/pull/4505)
+ * cap width of editable item list item to leave space for its X button
+ [\#4504](https://github.com/matrix-org/matrix-react-sdk/pull/4504)
+ * Add a link from settings / devices to your user profile
+ [\#4499](https://github.com/matrix-org/matrix-react-sdk/pull/4499)
+ * Make icon change in SetupEncryptionDialog
+ [\#4490](https://github.com/matrix-org/matrix-react-sdk/pull/4490)
+ * Remove invite only padlocks feature flag for release
+ [\#4488](https://github.com/matrix-org/matrix-react-sdk/pull/4488)
+ * Fix incorrect toast if security setup skipped
+ [\#4489](https://github.com/matrix-org/matrix-react-sdk/pull/4489)
+ * Revert "Update emojibase for fixed emoji codepoints and Emoji 13 support"
+ [\#4483](https://github.com/matrix-org/matrix-react-sdk/pull/4483)
+ * Fix recovery link on login verification flow
+ [\#4480](https://github.com/matrix-org/matrix-react-sdk/pull/4480)
+
+Changes in [2.5.0-rc.4](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.4) (2020-04-23)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.3...v2.5.0-rc.4)
+
+ * Upgrade to JS SDK 5.3.1-rc.4
+ * Take encrypted message search out of labs for release
+ [\#4468](https://github.com/matrix-org/matrix-react-sdk/pull/4468)
+ * Update login security copy and design to match Figma [to release]
+ [\#4474](https://github.com/matrix-org/matrix-react-sdk/pull/4474)
+ * Fix i18n of SSO UIA copy in Deactivate Account Dialog on release
+ [\#4473](https://github.com/matrix-org/matrix-react-sdk/pull/4473)
+ * Skip auth flow test for signing upload when password present
+ [\#4465](https://github.com/matrix-org/matrix-react-sdk/pull/4465)
+ * Fix: wait until cross-signing keys are fetched to show verify button
+ [\#4457](https://github.com/matrix-org/matrix-react-sdk/pull/4457)
+ * Handle load error in create secret storage dialog
+ [\#4454](https://github.com/matrix-org/matrix-react-sdk/pull/4454)
+ * Don't recheck DeviceListener until after initial sync is finished
+ [\#4450](https://github.com/matrix-org/matrix-react-sdk/pull/4450)
+ * EventIndex: Filter out events that don't have a propper content value.
+ [\#4447](https://github.com/matrix-org/matrix-react-sdk/pull/4447)
+
+Changes in [2.5.0-rc.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.3) (2020-04-17)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.2...v2.5.0-rc.3)
+
+ * Upgrade to JS SDK 5.3.1-rc.3
+
+Changes in [2.5.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.2) (2020-04-16)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.1...v2.5.0-rc.2)
+
+ * Upgrade to JS SDK 5.3.1-rc.2
+ * [Release] Convert cross-signing flag to a setting
+ [\#4429](https://github.com/matrix-org/matrix-react-sdk/pull/4429)
+ * Iterate cross-signing copy
+ [\#4426](https://github.com/matrix-org/matrix-react-sdk/pull/4426)
+ * Fix: ensure twemoji font is loaded when showing SAS emojis
+ [\#4423](https://github.com/matrix-org/matrix-react-sdk/pull/4423)
+
+Changes in [2.5.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.1) (2020-04-15)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.4.0-rc.1...v2.5.0-rc.1)
+
+ * Upgrade to JS SDK 5.3.1-rc.1
+ * null-guard MatrixClientPeg in RoomViewStore
+ [\#4415](https://github.com/matrix-org/matrix-react-sdk/pull/4415)
+ * Fix: prevent spurious notifications from indexer
+ [\#4414](https://github.com/matrix-org/matrix-react-sdk/pull/4414)
+ * Login block on initialSync with spinners
+ [\#4413](https://github.com/matrix-org/matrix-react-sdk/pull/4413)
+ * Allow network dropdown to be scrollable and fix context menu padding calc
+ [\#4408](https://github.com/matrix-org/matrix-react-sdk/pull/4408)
+ * Remove end-to-end message info option when cross-signing is used
+ [\#4412](https://github.com/matrix-org/matrix-react-sdk/pull/4412)
+ * Minimize widgets by default
+ [\#4378](https://github.com/matrix-org/matrix-react-sdk/pull/4378)
+ * Add comments to highlight where we'll need m.widget support
+ [\#4380](https://github.com/matrix-org/matrix-react-sdk/pull/4380)
+ * Fix: dont try to enable 4S if cross-signing is disabled
+ [\#4407](https://github.com/matrix-org/matrix-react-sdk/pull/4407)
+ * Fix: don't confuse user with spinner during complete security step
+ [\#4406](https://github.com/matrix-org/matrix-react-sdk/pull/4406)
+ * Fix: avoid potential crash during certain verification paths
+ [\#4405](https://github.com/matrix-org/matrix-react-sdk/pull/4405)
+ * Add riot-desktop shortcuts for forward/back matching browsers&slack
+ [\#4392](https://github.com/matrix-org/matrix-react-sdk/pull/4392)
+ * Convert LoggedInView to an ES6 PureComponent Class & TypeScript
+ [\#4398](https://github.com/matrix-org/matrix-react-sdk/pull/4398)
+ * Fix width of MVideoBody in FilePanel
+ [\#4396](https://github.com/matrix-org/matrix-react-sdk/pull/4396)
+ * Remove unused react-addons-css-transition-group
+ [\#4397](https://github.com/matrix-org/matrix-react-sdk/pull/4397)
+ * Fix emoji tooltip flickering
+ [\#4395](https://github.com/matrix-org/matrix-react-sdk/pull/4395)
+ * Pass along key backup for bootstrap
+ [\#4374](https://github.com/matrix-org/matrix-react-sdk/pull/4374)
+ * Fix create room dialog e2ee private room setting
+ [\#4403](https://github.com/matrix-org/matrix-react-sdk/pull/4403)
+ * Sort emoji by shortcodes for autocomplete primarily for :-1 and :+1
+ [\#4391](https://github.com/matrix-org/matrix-react-sdk/pull/4391)
+ * Fix invalid commands when figuring out whether to set isTyping
+ [\#4390](https://github.com/matrix-org/matrix-react-sdk/pull/4390)
+ * op/deop return error if trying to affect an unknown user
+ [\#4389](https://github.com/matrix-org/matrix-react-sdk/pull/4389)
+ * Composer pills respect showPillAvatar setting
+ [\#4384](https://github.com/matrix-org/matrix-react-sdk/pull/4384)
+ * Only send typing notification when composing commands which send messages
+ [\#4385](https://github.com/matrix-org/matrix-react-sdk/pull/4385)
+ * Reverse order of they match/they don't match buttons
+ [\#4386](https://github.com/matrix-org/matrix-react-sdk/pull/4386)
+ * Use singular text on 'delete sessions' button for SSO
+ [\#4383](https://github.com/matrix-org/matrix-react-sdk/pull/4383)
+ * Pass widget data through from sticker picker
+ [\#4377](https://github.com/matrix-org/matrix-react-sdk/pull/4377)
+ * Obliterate widgets when they are minimized
+ [\#4376](https://github.com/matrix-org/matrix-react-sdk/pull/4376)
+ * Fix image thumbnail width when read receipts are hidden
+ [\#4370](https://github.com/matrix-org/matrix-react-sdk/pull/4370)
+ * Add toggle for e2ee when creating private room
+ [\#4362](https://github.com/matrix-org/matrix-react-sdk/pull/4362)
+ * Fix logging for failed searches
+ [\#4372](https://github.com/matrix-org/matrix-react-sdk/pull/4372)
+ * Ensure UI is updated when cross-signing gets disabled
+ [\#4369](https://github.com/matrix-org/matrix-react-sdk/pull/4369)
+ * Retry the request for the master key from SSSS on login
+ [\#4371](https://github.com/matrix-org/matrix-react-sdk/pull/4371)
+ * Upgrade deps
+ [\#4365](https://github.com/matrix-org/matrix-react-sdk/pull/4365)
+ * App load tweaks, i18n and localStorage
+ [\#4367](https://github.com/matrix-org/matrix-react-sdk/pull/4367)
+ * Fix encoding of widget arguments
+ [\#4366](https://github.com/matrix-org/matrix-react-sdk/pull/4366)
+
+Changes in [2.4.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.4.0-rc.1) (2020-04-08)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.3.1...v2.4.0-rc.1)
+
+ * Upgrade to JS SDK to 5.3.0-rc.1
+ * EventIndex: Log if we had all events in a checkpoint but are continuing.
+ [\#4363](https://github.com/matrix-org/matrix-react-sdk/pull/4363)
+ * Update from Weblate
+ [\#4364](https://github.com/matrix-org/matrix-react-sdk/pull/4364)
+ * Support deactivating your account with SSO
+ [\#4356](https://github.com/matrix-org/matrix-react-sdk/pull/4356)
+ * Add debug status for cached backup key format
+ [\#4359](https://github.com/matrix-org/matrix-react-sdk/pull/4359)
+ * Fix composer placeholder not updating
+ [\#4361](https://github.com/matrix-org/matrix-react-sdk/pull/4361)
+ * Fix sas verification buttons to match figma
+ [\#4358](https://github.com/matrix-org/matrix-react-sdk/pull/4358)
+ * Don't show fallback text for verification requests
+ [\#4345](https://github.com/matrix-org/matrix-react-sdk/pull/4345)
+ * Fix share dialog correctly
+ [\#4360](https://github.com/matrix-org/matrix-react-sdk/pull/4360)
+ * Use singular copy when only deleting one device
+ [\#4357](https://github.com/matrix-org/matrix-react-sdk/pull/4357)
+ * Deem m.sticker events as actionable for reacting
+ [\#4288](https://github.com/matrix-org/matrix-react-sdk/pull/4288)
+ * Don't show spinner over encryption setup dialogs
+ [\#4354](https://github.com/matrix-org/matrix-react-sdk/pull/4354)
+ * Support Jitsi information from client .well-known
+ [\#4348](https://github.com/matrix-org/matrix-react-sdk/pull/4348)
+ * Add new default home page fallback
+ [\#4350](https://github.com/matrix-org/matrix-react-sdk/pull/4350)
+ * Check more account data in toast listener
+ [\#4351](https://github.com/matrix-org/matrix-react-sdk/pull/4351)
+ * Don't try to send presence updates until the client is started
+ [\#4353](https://github.com/matrix-org/matrix-react-sdk/pull/4353)
+ * Fix copy button on code blocks when there is no code tag just pre
+ [\#4352](https://github.com/matrix-org/matrix-react-sdk/pull/4352)
+ * Clear sessionStorage on sign out
+ [\#4346](https://github.com/matrix-org/matrix-react-sdk/pull/4346)
+ * Re-request room keys after auth
+ [\#4341](https://github.com/matrix-org/matrix-react-sdk/pull/4341)
+ * Update emojibase for fixed emoji codepoints and Emoji 13 support
+ [\#4344](https://github.com/matrix-org/matrix-react-sdk/pull/4344)
+ * App load order tweaks for code splitting
+ [\#4343](https://github.com/matrix-org/matrix-react-sdk/pull/4343)
+ * Fix alignment of e2e icon in userinfo and expose full displayname in title
+ [\#4312](https://github.com/matrix-org/matrix-react-sdk/pull/4312)
+ * Adjust copy & UX for self-verification
+ [\#4342](https://github.com/matrix-org/matrix-react-sdk/pull/4342)
+ * QR code reciprocation
+ [\#4334](https://github.com/matrix-org/matrix-react-sdk/pull/4334)
+ * Fix Hangul typing does not work properly
+ [\#4339](https://github.com/matrix-org/matrix-react-sdk/pull/4339)
+ * Fix: dismiss setup encryption toast if cross-signing is ready
+ [\#4336](https://github.com/matrix-org/matrix-react-sdk/pull/4336)
+ * Fix read marker visibility for grouped events
+ [\#4340](https://github.com/matrix-org/matrix-react-sdk/pull/4340)
+ * Make all 'font-size's and 'line-height's rem
+ [\#4305](https://github.com/matrix-org/matrix-react-sdk/pull/4305)
+ * Fix spurious extra devices on registration
+ [\#4337](https://github.com/matrix-org/matrix-react-sdk/pull/4337)
+ * Fix the edit messager composer
+ [\#4333](https://github.com/matrix-org/matrix-react-sdk/pull/4333)
+ * Fix Room Settings Dialog Notifications tab icon
+ [\#4321](https://github.com/matrix-org/matrix-react-sdk/pull/4321)
+ * Fix various cases of React warnings by silencing them
+ [\#4331](https://github.com/matrix-org/matrix-react-sdk/pull/4331)
+ * Only apply padding to standard textual buttons (kind buttons)
+ [\#4332](https://github.com/matrix-org/matrix-react-sdk/pull/4332)
+ * Use console.log in place of console.warn for less warnings
+ [\#4330](https://github.com/matrix-org/matrix-react-sdk/pull/4330)
+ * Revert componentDidMount changes on breadcrumbs
+ [\#4329](https://github.com/matrix-org/matrix-react-sdk/pull/4329)
+ * Use new method for checking secret storage key
+ [\#4309](https://github.com/matrix-org/matrix-react-sdk/pull/4309)
+ * Label and use UNSAFE_componentWillMount to minimize warnings
+ [\#4315](https://github.com/matrix-org/matrix-react-sdk/pull/4315)
+ * Fix a number of minor code quality issues
+ [\#4314](https://github.com/matrix-org/matrix-react-sdk/pull/4314)
+ * Use componentDidMount in place of componentWillMount where possible
+ [\#4313](https://github.com/matrix-org/matrix-react-sdk/pull/4313)
+ * EventIndex: Mark the initial checkpoints for a full crawl.
+ [\#4325](https://github.com/matrix-org/matrix-react-sdk/pull/4325)
+ * Fix UserInfo e2e buttons to match Figma
+ [\#4320](https://github.com/matrix-org/matrix-react-sdk/pull/4320)
+ * Only auto-scroll to RoomTile when clicking on RoomTile or via shortcuts
+ [\#4316](https://github.com/matrix-org/matrix-react-sdk/pull/4316)
+ * Support SSO for interactive authentication
+ [\#4292](https://github.com/matrix-org/matrix-react-sdk/pull/4292)
+ * Fix /invite Slash Command
+ [\#4328](https://github.com/matrix-org/matrix-react-sdk/pull/4328)
+ * Fix jitsi popout URL
+ [\#4326](https://github.com/matrix-org/matrix-react-sdk/pull/4326)
+ * Use our own jitsi widget for the popout URL
+ [\#4323](https://github.com/matrix-org/matrix-react-sdk/pull/4323)
+ * Fix popout support for jitsi widgets
+ [\#4319](https://github.com/matrix-org/matrix-react-sdk/pull/4319)
+ * Fix: legacy verify user throwing error
+ [\#4318](https://github.com/matrix-org/matrix-react-sdk/pull/4318)
+ * Document settingDefaults
+ [\#3046](https://github.com/matrix-org/matrix-react-sdk/pull/3046)
+ * Fix Ctrl+/ for Finnish keyboard where it includes Shift
+ [\#4317](https://github.com/matrix-org/matrix-react-sdk/pull/4317)
+ * Rework SlashCommands to better expose aliases
+ [\#4302](https://github.com/matrix-org/matrix-react-sdk/pull/4302)
+ * Fix EventListSummary when RR rendering is disabled
+ [\#4311](https://github.com/matrix-org/matrix-react-sdk/pull/4311)
+ * Update link to css location.
+ [\#4299](https://github.com/matrix-org/matrix-react-sdk/pull/4299)
+ * Fix peeking keeping two timeline update mechanisms in play
+ [\#4310](https://github.com/matrix-org/matrix-react-sdk/pull/4310)
+ * Pass new secret storage key to bootstrap path
+ [\#4308](https://github.com/matrix-org/matrix-react-sdk/pull/4308)
+ * Show red shield for users that become unverified
+ [\#4303](https://github.com/matrix-org/matrix-react-sdk/pull/4303)
+ * Accessibility fixed for Event List Summary and Composer Format Bar
+ [\#4295](https://github.com/matrix-org/matrix-react-sdk/pull/4295)
+ * Support $riot: Templates for SSO/CAS urls in the welcome.html page
+ [\#4279](https://github.com/matrix-org/matrix-react-sdk/pull/4279)
+ * Added the /html command
+ [\#4296](https://github.com/matrix-org/matrix-react-sdk/pull/4296)
+ * EventIndex: Better logging on how many events are added.
+ [\#4301](https://github.com/matrix-org/matrix-react-sdk/pull/4301)
+ * Field: mark id as optional in propTypes
+ [\#4307](https://github.com/matrix-org/matrix-react-sdk/pull/4307)
+ * Fix view community link icon contrast
+ [\#4254](https://github.com/matrix-org/matrix-react-sdk/pull/4254)
+ * Remove underscore from Jitsi conference names
+ [\#4304](https://github.com/matrix-org/matrix-react-sdk/pull/4304)
+ * Refactor shield display logic; changed rules for DMs
+ [\#4290](https://github.com/matrix-org/matrix-react-sdk/pull/4290)
+ * Fix: bring back global thin scrollbars
+ [\#4300](https://github.com/matrix-org/matrix-react-sdk/pull/4300)
+ * Keyboard shortcuts: Escape cancel reply and fix Ctrl+K
+ [\#4297](https://github.com/matrix-org/matrix-react-sdk/pull/4297)
+ * Field: make id optional, generate one if not provided
+ [\#4298](https://github.com/matrix-org/matrix-react-sdk/pull/4298)
+ * Fix ugly scrollbars in TabbedView (settings), emojipicker and widgets
+ [\#4293](https://github.com/matrix-org/matrix-react-sdk/pull/4293)
+ * Rename secret storage force-reset variable to avoid confusion
+ [\#4274](https://github.com/matrix-org/matrix-react-sdk/pull/4274)
+ * Fix: can't dismiss unverified session toast when encryption hasn't been
+ upgraded
+ [\#4291](https://github.com/matrix-org/matrix-react-sdk/pull/4291)
+ * Blank out UserInfo avatar when changing between members
+ [\#4289](https://github.com/matrix-org/matrix-react-sdk/pull/4289)
+ * Add cancel button to verification panel
+ [\#4283](https://github.com/matrix-org/matrix-react-sdk/pull/4283)
+ * Show ongoing verification request straight away when navigating to member
+ [\#4284](https://github.com/matrix-org/matrix-react-sdk/pull/4284)
+ * Fix: allow scrolling while window is not focused & remove scrollbar hack
+ [\#4276](https://github.com/matrix-org/matrix-react-sdk/pull/4276)
+ * Show whether backup key is cached
+ [\#4287](https://github.com/matrix-org/matrix-react-sdk/pull/4287)
+ * Rename unverified session toast
+ [\#4285](https://github.com/matrix-org/matrix-react-sdk/pull/4285)
+ * Fix: pick last active DM for verification request
+ [\#4286](https://github.com/matrix-org/matrix-react-sdk/pull/4286)
+ * Fix formatBar not hidden after highlight and backspacing some text
+ [\#4269](https://github.com/matrix-org/matrix-react-sdk/pull/4269)
+
Changes in [2.3.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.3.1) (2020-04-01)
===================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.3.0...v2.3.1)
diff --git a/README.md b/README.md
index 69aafeb724..e468d272d0 100644
--- a/README.md
+++ b/README.md
@@ -11,14 +11,14 @@ a 'skin'. A skin provides:
* The containing application
* Zero or more 'modules' containing non-UI functionality
-As of Aug 2018, the only skin that exists is `vector-im/riot-web`; it and
+As of Aug 2018, the only skin that exists is `vector-im/element-web`; it and
`matrix-org/matrix-react-sdk` should effectively
be considered as a single project (for instance, matrix-react-sdk bugs
-are currently filed against vector-im/riot-web rather than this project).
+are currently filed against vector-im/element-web rather than this project).
Translation Status
==================
-[](https://translate.riot.im/engage/riot-web/?utm_source=widget)
+[](https://translate.riot.im/engage/element-web/?utm_source=widget)
Developer Guide
===============
@@ -41,10 +41,10 @@ https://github.com/matrix-org/matrix-react-sdk/blob/master/code_style.md
Code should be committed as follows:
* All new components: https://github.com/matrix-org/matrix-react-sdk/tree/master/src/components
- * Riot-specific components: https://github.com/vector-im/riot-web/tree/master/src/components
+ * Element-specific components: https://github.com/vector-im/element-web/tree/master/src/components
* In practice, `matrix-react-sdk` is still evolving so fast that the maintenance
- burden of customising and overriding these components for Riot can seriously
- impede development. So right now, there should be very few (if any) customisations for Riot.
+ burden of customising and overriding these components for Element can seriously
+ impede development. So right now, there should be very few (if any) customisations for Element.
* CSS: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/css
* Theme specific CSS & resources: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/themes
@@ -71,7 +71,7 @@ practices that anyone working with the SDK needs to be be aware of and uphold:
* The view's CSS file MUST have the same name (e.g. view/rooms/MessageTile.css).
CSS for matrix-react-sdk currently resides in
- https://github.com/vector-im/riot-web/tree/master/src/skins/vector/css/matrix-react-sdk.
+ https://github.com/vector-im/element-web/tree/master/src/skins/vector/css/matrix-react-sdk.
* Per-view CSS is optional - it could choose to inherit all its styling from
the context of the rest of the app, although this is unusual for any but
@@ -125,7 +125,7 @@ from it.
Github Issues
=============
-All issues should be filed under https://github.com/vector-im/riot-web/issues
+All issues should be filed under https://github.com/vector-im/element-web/issues
for now.
Development
@@ -133,8 +133,10 @@ Development
Ensure you have the latest LTS version of Node.js installed.
-Using `yarn` instead of `npm` is recommended. Please see the Yarn [install
-guide](https://yarnpkg.com/docs/install/) if you do not have it already.
+Using `yarn` instead of `npm` is recommended. Please see the Yarn 1 [install
+guide](https://classic.yarnpkg.com/docs/install) if you do not have it
+already. This project has not yet been migrated to Yarn 2, so please ensure
+`yarn --version` shows a version from the 1.x series.
`matrix-react-sdk` depends on `matrix-js-sdk`. To make use of changes in the
latter and to ensure tests run against the develop branch of `matrix-js-sdk`,
@@ -172,5 +174,5 @@ yarn test
## End-to-End tests
-Make sure you've got your Riot development server running (by doing `yarn start` in riot-web), and then in this project, run `yarn run e2etests`.
+Make sure you've got your Element development server running (by doing `yarn start` in element-web), and then in this project, run `yarn run e2etests`.
See `test/end-to-end-tests/README.md` for more information.
diff --git a/code_style.md b/code_style.md
index 3ad0d38873..fe04d2cc3d 100644
--- a/code_style.md
+++ b/code_style.md
@@ -4,7 +4,7 @@ Matrix JavaScript/ECMAScript Style Guide
The intention of this guide is to make Matrix's JavaScript codebase clean,
consistent with other popular JavaScript styles and consistent with the rest of
the Matrix codebase. For reference, the Matrix Python style guide can be found
-at https://github.com/matrix-org/synapse/blob/master/docs/code_style.rst
+at https://github.com/matrix-org/synapse/blob/master/docs/code_style.md
This document reflects how we would like Matrix JavaScript code to look, with
acknowledgement that a significant amount of code is written to older
@@ -17,7 +17,7 @@ writing in modern ECMAScript and using a transpile step to generate the file
that applications can then include. There are significant benefits in being
able to use modern ECMAScript, although the tooling for doing so can be awkward
for library code, especially with regard to translating source maps and line
-number throgh from the original code to the final application.
+number through from the original code to the final application.
General Style
-------------
@@ -151,6 +151,7 @@ General Style
Don't set things to undefined. Reserve that value to mean "not yet set to anything."
Boolean objects are verboten.
- Use JSDoc
+- Use switch-case statements where there are 5 or more branches running against the same variable.
ECMAScript
----------
diff --git a/docs/ciderEditor.md b/docs/ciderEditor.md
index 00033b5b8c..f522dc2fc4 100644
--- a/docs/ciderEditor.md
+++ b/docs/ciderEditor.md
@@ -1,6 +1,6 @@
# The CIDER (Contenteditable-Input-Diff-Error-Reconcile) editor
-The CIDER editor is a custom editor written for Riot.
+The CIDER editor is a custom editor written for Element.
Most of the code can be found in the `/editor/` directory of the `matrix-react-sdk` project.
It is used to power the composer main composer (both to send and edit messages), and might be used for other usecases where autocomplete is desired (invite box, ...).
diff --git a/docs/img/RoomListStore2.png b/docs/img/RoomListStore2.png
new file mode 100644
index 0000000000..9952d1c910
Binary files /dev/null and b/docs/img/RoomListStore2.png differ
diff --git a/docs/jitsi.md b/docs/jitsi.md
index 779ef79d3a..2b63ce0f72 100644
--- a/docs/jitsi.md
+++ b/docs/jitsi.md
@@ -25,7 +25,7 @@ which takes several parameters:
be null.
The react-sdk will assume that `jitsi.html` is at the path of wherever it is currently
-being served. For example, `https://riot.im/develop/jitsi.html` or `vector://webapp/jitsi.html`.
+being served. For example, `https://develop.element.io/jitsi.html` or `vector://webapp/jitsi.html`.
The `jitsi.html` wrapper can use the react-sdk's `WidgetApi` to communicate, making
it easier to actually implement the feature.
diff --git a/docs/local-echo-dev.md b/docs/local-echo-dev.md
new file mode 100644
index 0000000000..e4725a9b07
--- /dev/null
+++ b/docs/local-echo-dev.md
@@ -0,0 +1,39 @@
+# Local echo (developer docs)
+
+The React SDK provides some local echo functionality to allow for components to do something
+quickly and fall back when it fails. This is all available in the `local-echo` directory within
+`stores`.
+
+Echo is handled in EchoChambers, with `GenericEchoChamber` being the base implementation for all
+chambers. The `EchoChamber` class is provided as semantic access to a `GenericEchoChamber`
+implementation, such as the `RoomEchoChamber` (which handles echoable details of a room).
+
+Anything that can be locally echoed will be provided by the `GenericEchoChamber` implementation.
+The echo chamber will also need to deal with external changes, and has full control over whether
+or not something has successfully been echoed.
+
+An `EchoContext` is provided to echo chambers (usually with a matching type: `RoomEchoContext`
+gets provided to a `RoomEchoChamber` for example) with details about their intended area of
+effect, as well as manage `EchoTransaction`s. An `EchoTransaction` is simply a unit of work that
+needs to be locally echoed.
+
+The `EchoStore` manages echo chamber instances, builds contexts, and is generally less semantically
+accessible than the `EchoChamber` class. For separation of concerns, and to try and keep things
+tidy, this is an intentional design decision.
+
+**Note**: The local echo stack uses a "whenable" pattern, which is similar to thenables and
+`EventEmitter`. Whenables are ways of actioning a changing condition without having to deal
+with listeners being torn down. Once the reference count of the Whenable causes garbage collection,
+the Whenable's listeners will also be torn down. This is accelerated by the `IDestroyable` interface
+usage.
+
+## Audit functionality
+
+The UI supports a "Server isn't responding" dialog which includes a partial audit log-like
+structure to it. This is partially the reason for added complexity of `EchoTransaction`s
+and `EchoContext`s - this information feeds the UI states which then provide direct retry
+mechanisms.
+
+The `EchoStore` is responsible for ensuring that the appropriate non-urgent toast (lower left)
+is set up, where the dialog then drives through the contexts and transactions.
+
diff --git a/docs/room-list-store.md b/docs/room-list-store.md
new file mode 100644
index 0000000000..fa849e2505
--- /dev/null
+++ b/docs/room-list-store.md
@@ -0,0 +1,151 @@
+# Room list sorting
+
+It's so complicated it needs its own README.
+
+
+
+Legend:
+* Orange = External event.
+* Purple = Deterministic flow.
+* Green = Algorithm definition.
+* Red = Exit condition/point.
+* Blue = Process definition.
+
+## Algorithms involved
+
+There's two main kinds of algorithms involved in the room list store: list ordering and tag sorting.
+Throughout the code an intentional decision has been made to call them the List Algorithm and Sorting
+Algorithm respectively. The list algorithm determines the primary ordering of a given tag whereas the
+tag sorting defines how rooms within that tag get sorted, at the discretion of the list ordering.
+
+Behaviour of the overall room list (sticky rooms, etc) are determined by the generically-named Algorithm
+class. Here is where much of the coordination from the room list store is done to figure out which list
+algorithm to call, instead of having all the logic in the room list store itself.
+
+
+Tag sorting is effectively the comparator supplied to the list algorithm. This gives the list algorithm
+the power to decide when and how to apply the tag sorting, if at all. For example, the importance algorithm,
+later described in this document, heavily uses the list ordering behaviour to break the tag into categories.
+Each category then gets sorted by the appropriate tag sorting algorithm.
+
+### Tag sorting algorithm: Alphabetical
+
+When used, rooms in a given tag will be sorted alphabetically, where the alphabet's order is a problem
+for the browser. All we do is a simple string comparison and expect the browser to return something
+useful.
+
+### Tag sorting algorithm: Manual
+
+Manual sorting makes use of the `order` property present on all tags for a room, per the
+[Matrix specification](https://matrix.org/docs/spec/client_server/r0.6.0#room-tagging). Smaller values
+of `order` cause rooms to appear closer to the top of the list.
+
+### Tag sorting algorithm: Recent
+
+Rooms get ordered by the timestamp of the most recent useful message. Usefulness is yet another algorithm
+in the room list system which determines whether an event type is capable of bubbling up in the room list.
+Normally events like room messages, stickers, and room security changes will be considered useful enough
+to cause a shift in time.
+
+Note that this is reliant on the event timestamps of the most recent message. Because Matrix is eventually
+consistent this means that from time to time a room might plummet or skyrocket across the tag due to the
+timestamp contained within the event (generated server-side by the sender's server).
+
+### List ordering algorithm: Natural
+
+This is the easiest of the algorithms to understand because it does essentially nothing. It imposes no
+behavioural changes over the tag sorting algorithm and is by far the simplest way to order a room list.
+Historically, it's been the only option in Element and extremely common in most chat applications due to
+its relative deterministic behaviour.
+
+### List ordering algorithm: Importance
+
+On the other end of the spectrum, this is the most complicated algorithm which exists. There's major
+behavioural changes, and the tag sorting algorithm gets selectively applied depending on circumstances.
+
+Each tag which is not manually ordered gets split into 4 sections or "categories". Manually ordered tags
+simply get the manual sorting algorithm applied to them with no further involvement from the importance
+algorithm. There are 4 categories: Red, Grey, Bold, and Idle. Each has their own definition based off
+relative (perceived) importance to the user:
+
+* **Red**: The room has unread mentions waiting for the user.
+* **Grey**: The room has unread notifications waiting for the user. Notifications are simply unread
+ messages which cause a push notification or badge count. Typically, this is the default as rooms get
+ set to 'All Messages'.
+* **Bold**: The room has unread messages waiting for the user. Essentially this is a grey room without
+ a badge/notification count (or 'Mentions Only'/'Muted').
+* **Idle**: No useful (see definition of useful above) activity has occurred in the room since the user
+ last read it.
+
+Conveniently, each tag gets ordered by those categories as presented: red rooms appear above grey, grey
+above bold, etc.
+
+Once the algorithm has determined which rooms belong in which categories, the tag sorting algorithm
+gets applied to each category in a sub-list fashion. This should result in the red rooms (for example)
+being sorted alphabetically amongst each other as well as the grey rooms sorted amongst each other, but
+collectively the tag will be sorted into categories with red being at the top.
+
+## Sticky rooms
+
+When the user visits a room, that room becomes 'sticky' in the list, regardless of ordering algorithm.
+From a code perspective, the underlying algorithm is not aware of a sticky room and instead the base class
+manages which room is sticky. This is to ensure that all algorithms handle it the same.
+
+The sticky flag is simply to say it will not move higher or lower down the list while it is active. For
+example, if using the importance algorithm, the room would naturally become idle once viewed and thus
+would normally fly down the list out of sight. The sticky room concept instead holds it in place, never
+letting it fly down until the user moves to another room.
+
+Only one room can be sticky at a time. Room updates around the sticky room will still hold the sticky
+room in place. The best example of this is the importance algorithm: if the user has 3 red rooms and
+selects the middle room, they will see exactly one room above their selection at all times. If they
+receive another notification which causes the room to move into the topmost position, the room that was
+above the sticky room will move underneath to allow for the new room to take the top slot, maintaining
+the sticky room's position.
+
+Though only applicable to the importance algorithm, the sticky room is not aware of category boundaries
+and thus the user can see a shift in what kinds of rooms move around their selection. An example would
+be the user having 4 red rooms, the user selecting the third room (leaving 2 above it), and then having
+the rooms above it read on another device. This would result in 1 red room and 1 other kind of room
+above the sticky room as it will try to maintain 2 rooms above the sticky room.
+
+An exception for the sticky room placement is when there's suddenly not enough rooms to maintain the placement
+exactly. This typically happens if the user selects a room and leaves enough rooms where it cannot maintain
+the N required rooms above the sticky room. In this case, the sticky room will simply decrease N as needed.
+The N value will never increase while selection remains unchanged: adding a bunch of rooms after having
+put the sticky room in a position where it's had to decrease N will not increase N.
+
+## Responsibilities of the store
+
+The store is responsible for the ordering, upkeep, and tracking of all rooms. The room list component simply gets
+an object containing the tags it needs to worry about and the rooms within. The room list component will
+decide which tags need rendering (as it commonly filters out empty tags in most cases), and will deal with
+all kinds of filtering.
+
+## Filtering
+
+Filters are provided to the store as condition classes, which are then passed along to the algorithm
+implementations. The implementations then get to decide how to actually filter the rooms, however in
+practice the base `Algorithm` class deals with the filtering in a more optimized/generic way.
+
+The results of filters get cached to avoid needlessly iterating over potentially thousands of rooms,
+as the old room list store does. When a filter condition changes, it emits an update which (in this
+case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a
+minor subset where possible to avoid over-iterating rooms.
+
+All filter conditions are considered "stable" by the consumers, meaning that the consumer does not
+expect a change in the condition unless the condition says it has changed. This is intentional to
+maintain the caching behaviour described above.
+
+## Class breakdowns
+
+The `RoomListStore` is the major coordinator of various algorithm implementations, which take care
+of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` class is responsible
+for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: tags get
+defined on rooms and are not defined as a collection of rooms (unlike how they are presented to the
+user). Various list-specific utilities are also included, though they are expected to move somewhere
+more general when needed. For example, the `membership` utilities could easily be moved elsewhere
+as needed.
+
+The various bits throughout the room list store should also have jsdoc of some kind to help describe
+what they do and how they work.
diff --git a/docs/scrolling.md b/docs/scrolling.md
index 71329e5c32..a5232359a7 100644
--- a/docs/scrolling.md
+++ b/docs/scrolling.md
@@ -13,7 +13,7 @@ ScrollPanel supports a mode to prevent it shrinking. This is used to prevent a j
BACAT scrolling implements a different way of restoring the scroll position in the timeline while tiles out of view are changing height or tiles are being added or removed. It was added in https://github.com/matrix-org/matrix-react-sdk/pull/2842.
-The motivation for the changes is having noticed that setting scrollTop while scrolling tends to not work well, with it interrupting ongoing scrolling and also querying scrollTop reporting outdated values and consecutive scroll adjustments cancelling each out previous ones. This seems to be worse on macOS than other platforms, presumably because of a higher resolution in scroll events there. Also see https://github.com/vector-im/riot-web/issues/528. The BACAT approach allows to only have to change the scroll offset when adding or removing tiles.
+The motivation for the changes is having noticed that setting scrollTop while scrolling tends to not work well, with it interrupting ongoing scrolling and also querying scrollTop reporting outdated values and consecutive scroll adjustments cancelling each out previous ones. This seems to be worse on macOS than other platforms, presumably because of a higher resolution in scroll events there. Also see https://github.com/vector-im/element-web/issues/528. The BACAT approach allows to only have to change the scroll offset when adding or removing tiles.
The approach taken instead is to vertically align the timeline tiles to the bottom of the scroll container (using flexbox) and give the timeline inside the scroll container an explicit height, initially set to a multiple of the PAGE_SIZE (400px at time of writing) as needed by the content. When scrolled up, we can compensate for anything that grew below the viewport by changing the height of the timeline to maintain what's currently visible in the viewport without adjusting the scrollTop and hence without jumping.
diff --git a/docs/settings.md b/docs/settings.md
index 46e4a68fdb..4172c72c15 100644
--- a/docs/settings.md
+++ b/docs/settings.md
@@ -9,7 +9,7 @@ of dealing with the different levels and exposes easy to use getters and setters
## Levels
Granular Settings rely on a series of known levels in order to use the correct value for the scenario. These levels, in
-order of prioirty, are:
+order of priority, are:
* `device` - The current user's device
* `room-device` - The current user's device, but only when in a specific room
* `room-account` - The current user's account, but only when in a specific room
@@ -25,33 +25,10 @@ that room administrators cannot force account-only settings upon participants.
## Settings
Settings are the different options a user may set or experience in the application. These are pre-defined in
-`src/settings/Settings.js` under the `SETTINGS` constant and have the following minimum requirements:
-```
-// The ID is used to reference the setting throughout the application. This must be unique.
-"theSettingId": {
- // The levels this setting supports is required. In `src/settings/Settings.js` there are various pre-set arrays
- // for this option - they should be used where possible to avoid copy/pasting arrays across settings.
- supportedLevels: [...],
+`src/settings/Settings.ts` under the `SETTINGS` constant, and match the `ISetting` interface as defined there.
- // The default for this setting serves two purposes: It provides a value if the setting is not defined at other
- // levels, and it serves to demonstrate the expected type to other developers. The value isn't enforced, but it
- // should be respected throughout the code. The default may be any data type.
- default: false,
-
- // The display name has two notations: string and object. The object notation allows for different translatable
- // strings to be used for different levels, while the string notation represents the string for all levels.
-
- displayName: _td("Change something"), // effectively `displayName: { "default": _td("Change something") }`
- displayName: {
- "room": _td("Change something for participants of this room"),
-
- // Note: the default will be used if the level requested (such as `device`) does not have a string defined here.
- "default": _td("Change something"),
- }
-}
-```
-
-Settings that support the config level can be set in the config file under the `settingDefaults` key (note that some settings, like the "theme" setting, are special cased in the config file):
+Settings that support the config level can be set in the config file under the `settingDefaults` key (note that some
+settings, like the "theme" setting, are special cased in the config file):
```json
{
...
@@ -119,38 +96,29 @@ for you. If a display name cannot be found, it will return `null`.
## Features
-Occasionally some parts of the application may be undergoing testing and are not quite production ready. These are
-commonly known to be behind a "labs flag". Features behind lab flags must go through the granular settings system, and
-look and act very much normal settings. The exception is that they must supply `isFeature: true` as part of the setting
-definition and should go through the helper functions on `SettingsStore`.
+Feature flags are just like regular settings with some underlying semantics for how they are meant to be used. Usually
+a feature flag is used when a portion of the application is under development or not ready for full release yet, such
+as new functionality or experimental ideas. In these cases, the feature name *should* be named with the `feature_*`
+convention and must be tagged with `isFeature: true` in the setting definition. By doing so, the feature will automatically
+appear in the "labs" section of the user's settings.
-Although features have levels and a default value, the calculation of those options is blocked by the feature's state.
-A feature's state is determined from the `SdkConfig` and is a little complex. If `enableLabs` (a legacy flag) is `true`
-then the feature's state is `labs`, if it is `false`, the state is `disable`. If `enableLabs` is not set then the state
-is determined from the `features` config, such as in the following:
+Features can be controlled at the config level using the following structure:
```json
"features": {
- "feature_lazyloading": "labs"
+ "feature_lazyloading": true
}
```
-In this example, `feature_lazyloading` is in the `labs` state. It may also be in the `enable` or `disable` state with a
-similar approach. If the state is invalid, the feature is in the `disable` state. A feature's levels are only calculated
-if it is in the `labs` state, therefore the default only applies in that scenario. If the state is `enable`, the feature
-is always-on.
-Once a feature flag has served its purpose, it is generally recommended to remove it and the associated feature flag
-checks. This would enable the feature implicitly as it is part of the application now.
+When `true`, the user will see the feature as enabled. Similarly, when `false` the user will see the feature as disabled.
+The user will only be able to change/see these states if `showLabsSettings: true` is in the config.
### Determining if a feature is enabled
-A simple call to `SettingsStore.isFeatureEnabled` will tell you if the feature is enabled. This will perform all the
-required calculations to determine if the feature is enabled based upon the configuration and user selection.
+Call `SettingsStore.getValue()` as you would for any other setting.
### Enabling a feature
-Features can only be enabled if the feature is in the `labs` state, otherwise this is a no-op. To find the current set
-of features in the `labs` state, call `SettingsStore.getLabsFeatures`. To set the value, call
-`SettingsStore.setFeatureEnabled`.
+Call `SettingsStore.setValue("feature_name", null, SettingLevel.DEVICE, true)`.
## Setting controllers
@@ -162,7 +130,7 @@ kept up to date with the setting where it is otherwise not possible. An example
they can only be considered enabled if the platform supports notifications, and enabling notifications requires
additional steps to actually enable notifications.
-For more information, see `src/settings/controllers/SettingController.js`.
+For more information, see `src/settings/controllers/SettingController.ts`.
## Local echo
@@ -222,7 +190,7 @@ The `SettingsStore` uses the hardcoded `LEVEL_ORDER` constant to ensure that it
The array is checked from left to right, simulating the behaviour of overriding values from the higher levels. Each
level should be defined in this array, including `default`.
-Handlers (`src/settings/handlers/SettingsHandler.js`) represent a single level and are responsible for getting and
+Handlers (`src/settings/handlers/SettingsHandler.ts`) represent a single level and are responsible for getting and
setting values at that level. Handlers also provide additional information to the `SettingsStore` such as if the level
is supported or if the current user may set values at the level. The `SettingsStore` will use the handler to enforce
checks and manipulate settings. Handlers are also responsible for dealing with migration patterns or legacy settings for
@@ -230,7 +198,7 @@ their level (for example, a setting being renamed or using a different key from
Handlers are provided to the `SettingsStore` via the `LEVEL_HANDLERS` constant. `SettingsStore` will optimize lookups by
only considering handlers that are supported on the platform.
-Local echo is achieved through `src/settings/handlers/LocalEchoWrapper.js` which acts as a wrapper around a given
+Local echo is achieved through `src/settings/handlers/LocalEchoWrapper.ts` which acts as a wrapper around a given
handler. This is automatically applied to all defined `LEVEL_HANDLERS` and proxies the calls to the wrapped handler
where possible. The echo is achieved by a simple object cache stored within the class itself. The cache is invalidated
immediately upon the proxied save call succeeding or failing.
@@ -240,20 +208,7 @@ Controllers are notified of changes by the `SettingsStore`, and are given the op
### Features
-Features automatically get considered as `disabled` if they are not listed in the `SdkConfig` or `enableLabs` is
-false/not set. Features are always checked against the configuration before going through the level order as they have
-the option of being forced-on or forced-off for the application. This is done by the `features` section and looks
-something like this:
-
-```
-"features": {
- "feature_groups": "enable",
- "feature_pinning": "disable", // the default
- "feature_presence": "labs"
-}
-```
-
-If `enableLabs` is true in the configuration, the default for features becomes `"labs"`.
+See above for feature reference.
### Watchers
diff --git a/docs/usercontent.md b/docs/usercontent.md
index e54851dd0d..db0e34e5fa 100644
--- a/docs/usercontent.md
+++ b/docs/usercontent.md
@@ -5,9 +5,9 @@ letting the browser and user interact with the resulting data may be dangerous,
previously `usercontent.riot.im` was used to act as a sandbox on a different origin to close the attack surface,
it is now possible to do by using a combination of a sandboxed iframe and some code written into the app which consumes this SDK.
-Usercontent is an iframe sandbox target for allowing a user to safely download a decrypted attachment from a sandboxed origin where it cannot be used to XSS your riot session out from under you.
+Usercontent is an iframe sandbox target for allowing a user to safely download a decrypted attachment from a sandboxed origin where it cannot be used to XSS your Element session out from under you.
-Its function is to create an Object URL for the user/browser to use but bound to an origin different to that of the riot instance to protect against XSS.
+Its function is to create an Object URL for the user/browser to use but bound to an origin different to that of the Element instance to protect against XSS.
It exposes a function over a postMessage API, when sent an object with the matching fields to render a download link with the Object URL:
@@ -24,4 +24,4 @@ It exposes a function over a postMessage API, when sent an object with the match
If only imgSrc, imgStyle and style are passed then just update the existing link without overwriting other things about it.
-It is expected that this target be available at `usercontent/` relative to the root of the app, this can be seen in riot-web's webpack config.
+It is expected that this target be available at `usercontent/` relative to the root of the app, this can be seen in element-web's webpack config.
diff --git a/package.json b/package.json
index 67907c0d98..ab71f68b08 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
- "version": "2.3.1",
+ "version": "3.2.0",
"description": "SDK for matrix.org using React",
"author": "matrix.org",
"repository": {
@@ -45,118 +45,135 @@
"start": "echo THIS IS FOR LEGACY PURPOSES ONLY. && yarn start:all",
"start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn start:build\" \"yarn reskindex:watch\"",
"start:build": "babel src -w -s -d lib --verbose --extensions \".ts,.js\"",
- "lint": "yarn lint:types && yarn lint:ts && yarn lint:js && yarn lint:style",
+ "lint": "yarn lint:types && yarn lint:js && yarn lint:style",
"lint:js": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
- "lint:ts": "tslint --project ./tsconfig.json -t stylish",
"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"
},
"dependencies": {
- "@babel/runtime": "^7.8.3",
- "blueimp-canvas-to-blob": "^3.5.0",
+ "@babel/runtime": "^7.10.5",
+ "await-lock": "^2.0.1",
+ "blueimp-canvas-to-blob": "^3.27.0",
"browser-encrypt-attachment": "^0.3.0",
"browser-request": "^0.3.3",
- "classnames": "^2.1.2",
- "commonmark": "^0.28.1",
- "counterpart": "^0.18.0",
- "create-react-class": "^15.6.0",
- "diff-dom": "^4.1.3",
- "diff-match-patch": "^1.0.4",
- "emojibase-data": "^4.0.2",
- "emojibase-regex": "^3.0.0",
+ "classnames": "^2.2.6",
+ "commonmark": "^0.29.1",
+ "counterpart": "^0.18.6",
+ "create-react-class": "^15.6.3",
+ "diff-dom": "^4.1.6",
+ "diff-match-patch": "^1.0.5",
+ "emojibase-data": "^5.0.1",
+ "emojibase-regex": "^4.0.1",
"escape-html": "^1.0.3",
- "file-saver": "^1.3.3",
- "filesize": "3.5.6",
+ "file-saver": "^1.3.8",
+ "filesize": "3.6.1",
"flux": "2.1.1",
- "focus-visible": "^5.0.2",
- "fuse.js": "^2.2.0",
- "gfm.css": "^1.1.1",
+ "focus-visible": "^5.1.0",
+ "fuse.js": "^2.7.4",
+ "gfm.css": "^1.1.2",
"glob-to-regexp": "^0.4.1",
- "highlight.js": "^9.15.8",
- "html-entities": "^1.2.1",
+ "highlight.js": "^10.1.2",
+ "html-entities": "^1.3.1",
"is-ip": "^2.0.0",
- "linkifyjs": "^2.1.6",
- "lodash": "^4.17.14",
+ "linkifyjs": "^2.1.9",
+ "lodash": "^4.17.19",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
- "minimist": "^1.2.0",
- "pako": "^1.0.5",
+ "minimist": "^1.2.5",
+ "pako": "^1.0.11",
"parse5": "^5.1.1",
"png-chunks-extract": "^1.0.0",
"project-name-generator": "^2.1.7",
- "prop-types": "^15.5.8",
+ "prop-types": "^15.7.2",
"qrcode": "^1.4.4",
- "qrcode-react": "^0.1.16",
- "qs": "^6.6.0",
- "react": "^16.9.0",
+ "qs": "^6.9.4",
+ "re-resizable": "^6.5.4",
+ "react": "^16.13.1",
"react-beautiful-dnd": "^4.0.1",
- "react-dom": "^16.9.0",
- "react-focus-lock": "^2.2.1",
- "resize-observer-polyfill": "^1.5.0",
- "sanitize-html": "^1.18.4",
- "text-encoding-utf-8": "^1.0.1",
+ "react-dom": "^16.13.1",
+ "react-focus-lock": "^2.4.1",
+ "react-transition-group": "^4.4.1",
+ "resize-observer-polyfill": "^1.5.1",
+ "sanitize-html": "^1.27.1",
+ "tar-js": "^0.3.0",
+ "text-encoding-utf-8": "^1.0.2",
"url": "^0.11.0",
"velocity-animate": "^1.5.2",
- "what-input": "^5.2.6",
+ "what-input": "^5.2.10",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
- "@babel/cli": "^7.7.5",
- "@babel/core": "^7.7.5",
- "@babel/plugin-proposal-class-properties": "^7.7.4",
- "@babel/plugin-proposal-decorators": "^7.7.4",
- "@babel/plugin-proposal-export-default-from": "^7.7.4",
- "@babel/plugin-proposal-numeric-separator": "^7.7.4",
- "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
- "@babel/plugin-transform-flow-comments": "^7.7.4",
- "@babel/plugin-transform-runtime": "^7.8.3",
- "@babel/preset-env": "^7.7.6",
- "@babel/preset-flow": "^7.7.4",
- "@babel/preset-react": "^7.7.4",
- "@babel/preset-typescript": "^7.7.4",
- "@babel/register": "^7.7.4",
- "@peculiar/webcrypto": "^1.0.22",
+ "@babel/cli": "^7.10.5",
+ "@babel/core": "^7.10.5",
+ "@babel/parser": "^7.11.0",
+ "@babel/plugin-proposal-class-properties": "^7.10.4",
+ "@babel/plugin-proposal-decorators": "^7.10.5",
+ "@babel/plugin-proposal-export-default-from": "^7.10.4",
+ "@babel/plugin-proposal-numeric-separator": "^7.10.4",
+ "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
+ "@babel/plugin-transform-flow-comments": "^7.10.4",
+ "@babel/plugin-transform-runtime": "^7.10.5",
+ "@babel/preset-env": "^7.10.4",
+ "@babel/preset-flow": "^7.10.4",
+ "@babel/preset-react": "^7.10.4",
+ "@babel/preset-typescript": "^7.10.4",
+ "@babel/register": "^7.10.5",
+ "@babel/traverse": "^7.11.0",
+ "@peculiar/webcrypto": "^1.1.2",
"@types/classnames": "^2.2.10",
+ "@types/counterpart": "^0.18.1",
+ "@types/flux": "^3.1.9",
+ "@types/linkifyjs": "^2.1.3",
+ "@types/lodash": "^4.14.158",
"@types/modernizr": "^3.5.3",
- "@types/react": "16.9",
- "babel-eslint": "^10.0.3",
+ "@types/node": "^12.12.51",
+ "@types/pako": "^1.0.1",
+ "@types/qrcode": "^1.3.4",
+ "@types/react": "^16.9",
+ "@types/react-dom": "^16.9.8",
+ "@types/react-transition-group": "^4.4.0",
+ "@types/sanitize-html": "^1.23.3",
+ "@types/zxcvbn": "^4.4.0",
+ "@typescript-eslint/eslint-plugin": "^3.7.0",
+ "@typescript-eslint/parser": "^3.7.0",
+ "babel-eslint": "^10.1.0",
"babel-jest": "^24.9.0",
- "chokidar": "^3.3.1",
- "concurrently": "^4.0.1",
- "enzyme": "^3.10.0",
- "enzyme-adapter-react-16": "^1.15.1",
- "eslint": "^5.12.0",
- "eslint-config-google": "^0.7.1",
- "eslint-plugin-babel": "^5.2.1",
- "eslint-plugin-flowtype": "^2.30.0",
- "eslint-plugin-jest": "^23.0.4",
- "eslint-plugin-react": "^7.7.0",
- "eslint-plugin-react-hooks": "^2.0.1",
- "estree-walker": "^0.5.0",
+ "chokidar": "^3.4.1",
+ "concurrently": "^4.1.2",
+ "enzyme": "^3.11.0",
+ "enzyme-adapter-react-16": "^1.15.2",
+ "eslint": "7.5.0",
+ "eslint-config-matrix-org": "^0.1.2",
+ "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",
"file-loader": "^3.0.1",
- "flow-parser": "^0.57.3",
- "glob": "^5.0.14",
+ "glob": "^5.0.15",
"jest": "^24.9.0",
+ "jest-canvas-mock": "^2.2.0",
"lolex": "^5.1.2",
"matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.2.2",
- "react-test-renderer": "^16.9.0",
- "rimraf": "^2.4.3",
- "source-map-loader": "^0.2.3",
+ "react-test-renderer": "^16.13.1",
+ "rimraf": "^2.7.1",
+ "source-map-loader": "^0.2.4",
"stylelint": "^9.10.1",
- "stylelint-config-standard": "^18.2.0",
- "stylelint-scss": "^3.9.0",
- "tslint": "^5.20.1",
- "typescript": "^3.7.3",
- "walk": "^2.3.9",
- "webpack": "^4.20.2",
- "webpack-cli": "^3.1.1"
+ "stylelint-config-standard": "^18.3.0",
+ "stylelint-scss": "^3.18.0",
+ "typescript": "^3.9.7",
+ "walk": "^2.3.14",
+ "webpack": "^4.43.0",
+ "webpack-cli": "^3.3.12"
},
"jest": {
"testMatch": [
"/test/**/*-test.js"
],
+ "setupFiles": [
+ "jest-canvas-mock"
+ ],
"setupFilesAfterEnv": [
"/test/setupTests.js"
],
diff --git a/res/css/_common.scss b/res/css/_common.scss
index 03442ca510..a22d77f3d3 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -19,7 +19,7 @@ limitations under the License.
@import "./_font-sizes.scss";
:root {
- font-size: 15px;
+ font-size: 10px;
}
html {
@@ -38,7 +38,7 @@ body {
margin: 0px;
// needed to match the designs correctly on macOS
- // see https://github.com/vector-im/riot-web/issues/11425
+ // see https://github.com/vector-im/element-web/issues/11425
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@@ -160,9 +160,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
background-color: transparent;
color: $input-darker-fg-color;
border-radius: 4px;
- border: 1px solid $dialog-close-fg-color;
- // these things should probably not be defined
- // globally
+ border: 1px solid rgba($primary-fg-color, .1);
+ // these things should probably not be defined globally
margin: 9px;
flex: 0 0 auto;
}
@@ -175,7 +174,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
.mx_textinput input::placeholder {
- color: $roomsublist-label-fg-color;
+ color: rgba($input-darker-fg-color, .75);
}
}
@@ -227,7 +226,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
#mx_theme_tertiaryAccentColor {
- color: $roomsublist-label-bg-color;
+ color: $tertiary-accent-color;
}
/* Expected z-indexes for dialogs:
@@ -264,7 +263,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
padding: 25px 30px 30px 30px;
max-height: 80%;
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
- border-radius: 4px;
+ border-radius: 8px;
overflow-y: auto;
}
@@ -319,7 +318,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
.mx_Dialog_titleImage {
- vertical-align: middle;
+ vertical-align: sub;
width: 25px;
height: 25px;
margin-left: -2px;
@@ -335,6 +334,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
text-align: center;
}
+.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
+ margin-right: 20px; // leave space for the 'X' cancel button
+}
.mx_Dialog_title.danger {
color: $warning-color;
@@ -425,12 +427,16 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border-radius: 8px;
padding: 0px;
box-shadow: none;
+
+ /* Don't show scroll-bars on spinner dialogs */
+ overflow-x: hidden;
+ overflow-y: hidden;
}
// TODO: Review mx_GeneralButton usage to see if it can use a different class
// These classes were brought in from the old UserSettings and are included here to avoid
// breaking the app.
-// Ref: https://github.com/vector-im/riot-web/issues/8420
+// Ref: https://github.com/vector-im/element-web/issues/8420
.mx_GeneralButton {
@mixin mx_DialogButton;
display: inline;
@@ -578,3 +584,36 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
// So it fits in the space provided by the page
max-width: 120px;
}
+
+@define-mixin ProgressBarColour $colour {
+ color: $colour;
+ &::-moz-progress-bar {
+ background-color: $colour;
+ }
+ &::-webkit-progress-value {
+ background-color: $colour;
+ }
+}
+
+@define-mixin ProgressBarBorderRadius $radius {
+ border-radius: $radius;
+ &::-moz-progress-bar {
+ border-radius: $radius;
+ }
+ &::-webkit-progress-bar,
+ &::-webkit-progress-value {
+ border-radius: $radius;
+ }
+}
+
+@define-mixin unreal-focus {
+ outline-width: 2px;
+ outline-style: solid;
+ outline-color: Highlight;
+
+ /* WebKit gets its native focus styles. */
+ @media (-webkit-min-device-pixel-ratio: 0) {
+ outline-color: -webkit-focus-ring-color;
+ outline-style: auto;
+ }
+}
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 0ba2b609e8..aedb5c1334 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -1,6 +1,7 @@
// autogenerated by rethemendex.sh
@import "./_common.scss";
@import "./_font-sizes.scss";
+@import "./_font-weights.scss";
@import "./structures/_AutoHideScrollbar.scss";
@import "./structures/_CompatibilityPage.scss";
@import "./structures/_ContextualMenu.scss";
@@ -15,19 +16,20 @@
@import "./structures/_MainSplit.scss";
@import "./structures/_MatrixChat.scss";
@import "./structures/_MyGroups.scss";
+@import "./structures/_NonUrgentToastContainer.scss";
@import "./structures/_NotificationPanel.scss";
@import "./structures/_RightPanel.scss";
@import "./structures/_RoomDirectory.scss";
+@import "./structures/_RoomSearch.scss";
@import "./structures/_RoomStatusBar.scss";
-@import "./structures/_RoomSubList.scss";
@import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss";
@import "./structures/_ToastContainer.scss";
-@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss";
+@import "./structures/_UserMenu.scss";
@import "./structures/_ViewSource.scss";
@import "./structures/auth/_CompleteSecurity.scss";
@import "./structures/auth/_Login.scss";
@@ -41,11 +43,15 @@
@import "./views/auth/_CountryDropdown.scss";
@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/context_menus/_IconizedContextMenu.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_RoomTileContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@@ -54,15 +60,14 @@
@import "./views/context_menus/_WidgetContextMenu.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
+@import "./views/dialogs/_BugReportDialog.scss";
@import "./views/dialogs/_ChangelogDialog.scss";
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@import "./views/dialogs/_ConfirmUserActionDialog.scss";
@import "./views/dialogs/_CreateGroupDialog.scss";
@import "./views/dialogs/_CreateRoomDialog.scss";
@import "./views/dialogs/_DeactivateAccountDialog.scss";
-@import "./views/dialogs/_DeviceVerifyDialog.scss";
@import "./views/dialogs/_DevtoolsDialog.scss";
-@import "./views/dialogs/_EncryptedEventDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss";
@import "./views/dialogs/_IncomingSasDialog.scss";
@import "./views/dialogs/_InviteDialog.scss";
@@ -73,6 +78,7 @@
@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
@import "./views/dialogs/_RoomUpgradeDialog.scss";
@import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
+@import "./views/dialogs/_ServerOfflineDialog.scss";
@import "./views/dialogs/_SetEmailDialog.scss";
@import "./views/dialogs/_SetMxIdDialog.scss";
@import "./views/dialogs/_SetPasswordDialog.scss";
@@ -81,7 +87,6 @@
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
@import "./views/dialogs/_TermsDialog.scss";
-@import "./views/dialogs/_UnknownDeviceDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
@import "./views/dialogs/_WidgetOpenIDPermissionsDialog.scss";
@@ -104,16 +109,19 @@
@import "./views/elements/_IconButton.scss";
@import "./views/elements/_ImageView.scss";
@import "./views/elements/_InlineSpinner.scss";
-@import "./views/elements/_InteractiveTooltip.scss";
@import "./views/elements/_ManageIntegsButton.scss";
@import "./views/elements/_PowerSelector.scss";
@import "./views/elements/_ProgressBar.scss";
+@import "./views/elements/_QRCode.scss";
@import "./views/elements/_ReplyThread.scss";
@import "./views/elements/_ResizeHandle.scss";
@import "./views/elements/_RichText.scss";
@import "./views/elements/_RoleButton.scss";
@import "./views/elements/_RoomAliasField.scss";
+@import "./views/elements/_Slider.scss";
@import "./views/elements/_Spinner.scss";
+@import "./views/elements/_StyledCheckbox.scss";
+@import "./views/elements/_StyledRadioButton.scss";
@import "./views/elements/_SyntaxHighlight.scss";
@import "./views/elements/_TextWithTooltip.scss";
@import "./views/elements/_ToggleSwitch.scss";
@@ -121,7 +129,6 @@
@import "./views/elements/_TooltipButton.scss";
@import "./views/elements/_Validation.scss";
@import "./views/emojipicker/_EmojiPicker.scss";
-@import "./views/globals/_MatrixToolbar.scss";
@import "./views/groups/_GroupPublicityToggle.scss";
@import "./views/groups/_GroupRoomList.scss";
@import "./views/groups/_GroupUserSettings.scss";
@@ -139,7 +146,7 @@
@import "./views/messages/_MjolnirBody.scss";
@import "./views/messages/_ReactionsRow.scss";
@import "./views/messages/_ReactionsRowButton.scss";
-@import "./views/messages/_ReactionsRowButtonTooltip.scss";
+@import "./views/messages/_RedactedBody.scss";
@import "./views/messages/_RoomAvatarEvent.scss";
@import "./views/messages/_SenderProfile.scss";
@import "./views/messages/_TextualEvent.scss";
@@ -159,31 +166,31 @@
@import "./views/rooms/_EditMessageComposer.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
-@import "./views/rooms/_InviteOnlyIcon.scss";
+@import "./views/rooms/_GroupLayout.scss";
+@import "./views/rooms/_IRCLayout.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewWidget.scss";
-@import "./views/rooms/_MemberDeviceInfo.scss";
@import "./views/rooms/_MemberInfo.scss";
@import "./views/rooms/_MemberList.scss";
@import "./views/rooms/_MessageComposer.scss";
@import "./views/rooms/_MessageComposerFormatBar.scss";
+@import "./views/rooms/_NotificationBadge.scss";
@import "./views/rooms/_PinnedEventTile.scss";
@import "./views/rooms/_PinnedEventsPanel.scss";
@import "./views/rooms/_PresenceLabel.scss";
@import "./views/rooms/_ReplyPreview.scss";
@import "./views/rooms/_RoomBreadcrumbs.scss";
-@import "./views/rooms/_RoomDropTarget.scss";
@import "./views/rooms/_RoomHeader.scss";
@import "./views/rooms/_RoomList.scss";
@import "./views/rooms/_RoomPreviewBar.scss";
@import "./views/rooms/_RoomRecoveryReminder.scss";
+@import "./views/rooms/_RoomSublist.scss";
@import "./views/rooms/_RoomTile.scss";
@import "./views/rooms/_RoomUpgradeWarningBar.scss";
@import "./views/rooms/_SearchBar.scss";
@import "./views/rooms/_SendMessageComposer.scss";
@import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss";
-@import "./views/rooms/_UserOnlineDot.scss";
@import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_AvatarSetting.scss";
@import "./views/settings/_CrossSigningPanel.scss";
@@ -197,10 +204,12 @@
@import "./views/settings/_ProfileSettings.scss";
@import "./views/settings/_SetIdServer.scss";
@import "./views/settings/_SetIntegrationManager.scss";
+@import "./views/settings/_UpdateCheckButton.scss";
@import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
+@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
@@ -209,7 +218,8 @@
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/terms/_InlineTermsAgreement.scss";
+@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
@import "./views/verification/_VerificationShowSas.scss";
+@import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallView.scss";
-@import "./views/voip/_IncomingCallbox.scss";
@import "./views/voip/_VideoView.scss";
diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss
index 5cd19ce620..caa3a452b0 100644
--- a/res/css/_font-sizes.scss
+++ b/res/css/_font-sizes.scss
@@ -14,58 +14,60 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-$font-1px: 0.067rem;
-$font-2px: 0.133rem;
-$font-3px: 0.200rem;
-$font-4px: 0.267rem;
-$font-5px: 0.333rem;
-$font-6px: 0.400rem;
-$font-7px: 0.467rem;
-$font-8px: 0.533rem;
-$font-9px: 0.600rem;
-$font-10px: 0.667rem;
-$font-10-4px: 0.693rem;
-$font-11px: 0.733rem;
-$font-12px: 0.800rem;
-$font-13px: 0.867rem;
-$font-14px: 0.933rem;
-$font-15px: 1.000rem;
-$font-16px: 1.067rem;
-$font-17px: 1.133rem;
-$font-18px: 1.200rem;
-$font-19px: 1.267rem;
-$font-20px: 1.333rem;
-$font-21px: 1.400rem;
-$font-22px: 1.467rem;
-$font-23px: 1.533rem;
-$font-24px: 1.600rem;
-$font-25px: 1.667rem;
-$font-26px: 1.733rem;
-$font-27px: 1.800rem;
-$font-28px: 1.867rem;
-$font-29px: 1.933rem;
-$font-30px: 2.000rem;
-$font-31px: 2.067rem;
-$font-32px: 2.133rem;
-$font-33px: 2.200rem;
-$font-34px: 2.267rem;
-$font-35px: 2.333rem;
-$font-36px: 2.400rem;
-$font-37px: 2.467rem;
-$font-38px: 2.533rem;
-$font-39px: 2.600rem;
-$font-40px: 2.667rem;
-$font-41px: 2.733rem;
-$font-42px: 2.800rem;
-$font-43px: 2.867rem;
-$font-44px: 2.933rem;
-$font-45px: 3.000rem;
-$font-46px: 3.067rem;
-$font-47px: 3.133rem;
-$font-48px: 3.200rem;
-$font-49px: 3.267rem;
-$font-50px: 3.333rem;
-$font-51px: 3.400rem;
-$font-52px: 3.467rem;
-$font-88px: 5.887rem;
-$font-400px: 26.667rem;
+$font-1px: 0.1rem;
+$font-1-5px: 0.15rem;
+$font-2px: 0.2rem;
+$font-3px: 0.3rem;
+$font-4px: 0.4rem;
+$font-5px: 0.5rem;
+$font-6px: 0.6rem;
+$font-7px: 0.7rem;
+$font-8px: 0.8rem;
+$font-9px: 0.9rem;
+$font-10px: 1.0rem;
+$font-10-4px: 1.04rem;
+$font-11px: 1.1rem;
+$font-12px: 1.2rem;
+$font-13px: 1.3rem;
+$font-14px: 1.4rem;
+$font-15px: 1.5rem;
+$font-16px: 1.6rem;
+$font-17px: 1.7rem;
+$font-18px: 1.8rem;
+$font-19px: 1.9rem;
+$font-20px: 2.0rem;
+$font-21px: 2.1rem;
+$font-22px: 2.2rem;
+$font-23px: 2.3rem;
+$font-24px: 2.4rem;
+$font-25px: 2.5rem;
+$font-26px: 2.6rem;
+$font-27px: 2.7rem;
+$font-28px: 2.8rem;
+$font-29px: 2.9rem;
+$font-30px: 3.0rem;
+$font-31px: 3.1rem;
+$font-32px: 3.2rem;
+$font-33px: 3.3rem;
+$font-34px: 3.4rem;
+$font-35px: 3.5rem;
+$font-36px: 3.6rem;
+$font-37px: 3.7rem;
+$font-38px: 3.8rem;
+$font-39px: 3.9rem;
+$font-40px: 4.0rem;
+$font-41px: 4.1rem;
+$font-42px: 4.2rem;
+$font-43px: 4.3rem;
+$font-44px: 4.4rem;
+$font-45px: 4.5rem;
+$font-46px: 4.6rem;
+$font-47px: 4.7rem;
+$font-48px: 4.8rem;
+$font-49px: 4.9rem;
+$font-50px: 5.0rem;
+$font-51px: 5.1rem;
+$font-52px: 5.2rem;
+$font-78px: 7.8rem;
+$font-88px: 8.8rem;
+$font-400px: 40rem;
diff --git a/res/css/_font-weights.scss b/res/css/_font-weights.scss
new file mode 100644
index 0000000000..3e2b19d516
--- /dev/null
+++ b/res/css/_font-weights.scss
@@ -0,0 +1,17 @@
+/*
+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.
+*/
+
+$font-semi-bold: 600;
diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss
index 61070a0541..658033339a 100644
--- a/res/css/structures/_ContextualMenu.scss
+++ b/res/css/structures/_ContextualMenu.scss
@@ -31,7 +31,7 @@ limitations under the License.
}
.mx_ContextualMenu {
- border-radius: 4px;
+ border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
color: $primary-fg-color;
diff --git a/res/css/structures/_CustomRoomTagPanel.scss b/res/css/structures/_CustomRoomTagPanel.scss
index 1fb18ec41e..3feb2565be 100644
--- a/res/css/structures/_CustomRoomTagPanel.scss
+++ b/res/css/structures/_CustomRoomTagPanel.scss
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+// TODO: Update design for custom tags to match new designs
+
.mx_LeftPanel_tagPanelContainer {
display: flex;
flex-direction: column;
@@ -50,7 +52,7 @@ limitations under the License.
background-color: $accent-color-alt;
width: 5px;
position: absolute;
- left: -15px;
+ left: -9px;
border-radius: 0 3px 3px 0;
- top: 2px; // 10 [padding-top] - (56 - 40)/2
+ top: 5px; // just feels right (see comment above about designs needing to be updated)
}
diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss
index 859ee28035..21b30d804a 100644
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@@ -41,13 +41,19 @@ limitations under the License.
.mx_FilePanel .mx_EventTile {
word-break: break-word;
+ margin-top: 32px;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody {
margin-right: 0px;
}
+.mx_FilePanel .mx_EventTile .mx_MFileBody {
+ line-height: 2.4rem;
+}
+
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
+ padding-top: 8px;
display: flex;
font-size: $font-14px;
color: $event-timestamp-color;
@@ -60,7 +66,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
flex: 1 0 0;
- font-size: $font-11px;
+ font-size: $font-14px;
text-align: right;
white-space: nowrap;
}
@@ -80,7 +86,7 @@ limitations under the License.
flex: 1 1 auto;
line-height: initial;
padding: 0px;
- font-size: $font-11px;
+ font-size: $font-14px;
opacity: 1.0;
color: $event-timestamp-color;
}
@@ -90,7 +96,7 @@ limitations under the License.
text-align: right;
visibility: visible;
position: initial;
- font-size: $font-11px;
+ font-size: $font-14px;
opacity: 1.0;
color: $event-timestamp-color;
}
@@ -109,3 +115,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
background-color: $primary-bg-color;
}
+
+.mx_FilePanel_empty::before {
+ mask-image: url('$(res)/img/element-icons/room/files.svg');
+}
diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss
index ed0cf121a4..2350d9f28a 100644
--- a/res/css/structures/_GroupView.scss
+++ b/res/css/structures/_GroupView.scss
@@ -29,12 +29,12 @@ limitations under the License.
align-items: center;
display: flex;
padding-bottom: 10px;
+ padding-left: 19px;
}
.mx_GroupView_header_view {
border-bottom: 1px solid $primary-hairline-color;
padding-bottom: 0px;
- padding-left: 19px;
padding-right: 8px;
}
@@ -63,11 +63,11 @@ limitations under the License.
}
.mx_GroupHeader_editButton::before {
- mask-image: url('$(res)/img/feather-customised/settings.svg');
+ mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_GroupHeader_shareButton::before {
- mask-image: url('$(res)/img/icons-share.svg');
+ mask-image: url('$(res)/img/element-icons/room/share.svg');
}
.mx_GroupView_hostingSignup img {
@@ -182,6 +182,7 @@ limitations under the License.
.mx_GroupView_body {
flex-grow: 1;
+ margin: 0 24px;
}
.mx_GroupView_rooms {
@@ -250,6 +251,7 @@ limitations under the License.
.mx_GroupView_membershipSubSection {
justify-content: space-between;
display: flex;
+ padding-bottom: 8px;
}
.mx_GroupView_membershipSubSection .mx_Spinner {
diff --git a/res/css/structures/_HeaderButtons.scss b/res/css/structures/_HeaderButtons.scss
index eef7653b24..9ef40e9d6a 100644
--- a/res/css/structures/_HeaderButtons.scss
+++ b/res/css/structures/_HeaderButtons.scss
@@ -22,7 +22,7 @@ limitations under the License.
content: "";
background-color: $header-divider-color;
opacity: 0.5;
- margin: 0 15px;
+ margin: 6px 8px;
border-radius: 1px;
width: 1px;
}
diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss
index 0160cf368b..04527bff48 100644
--- a/res/css/structures/_HomePage.scss
+++ b/res/css/structures/_HomePage.scss
@@ -72,7 +72,7 @@ limitations under the License.
&:hover {
color: $accent-color;
- background: rgba(#03b381, 0.06);
+ background: rgba($accent-color, 0.06);
&::before {
background-color: $accent-color;
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 7d57425f6f..5112d07c46 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -1,6 +1,5 @@
/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,163 +14,182 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_LeftPanel_container {
- display: flex;
- /* LeftPanel 260px */
- min-width: 260px;
- flex: 0 0 auto;
-}
-
-.mx_LeftPanel_container.collapsed {
- min-width: unset;
- /* Collapsed LeftPanel 50px */
- flex: 0 0 50px;
-}
-
-.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
- /* TagPanel 70px + Collapsed LeftPanel 50px */
- flex: 0 0 120px;
-}
-
-.mx_LeftPanel_tagPanelContainer {
- flex: 0 0 70px;
- height: 100%;
-}
-
-.mx_LeftPanel_hideButton {
- position: absolute;
- top: 10px;
- right: 0px;
- padding: 8px;
- cursor: pointer;
-}
+$tagPanelWidth: 56px; // only applies in this file, used for calculations
.mx_LeftPanel {
- flex: 1;
- overflow-x: hidden;
- display: flex;
- flex-direction: column;
- min-height: 0;
-}
+ background-color: $roomlist-bg-color;
+ min-width: 260px;
+ max-width: 50%;
-.mx_LeftPanel .mx_AppTile_mini {
- height: 132px;
-}
-
-.mx_LeftPanel .mx_RoomList_scrollbar {
- order: 1;
-
- flex: 1 1 0;
-
- overflow-y: auto;
- z-index: 6;
-}
-
-.mx_LeftPanel .mx_BottomLeftMenu {
- order: 3;
-
- border-top: 1px solid $panel-divider-color;
- margin-left: 16px; /* gutter */
- margin-right: 16px; /* gutter */
- flex: 0 0 60px;
- z-index: 1;
-}
-
-.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
- flex: 0 0 160px;
- margin-bottom: 9px;
-}
-
-.mx_LeftPanel .mx_BottomLeftMenu_options {
- margin-top: 18px;
-}
-
-.mx_BottomLeftMenu_options object {
- pointer-events: none;
-}
-
-.mx_BottomLeftMenu_options > div {
- display: inline-block;
-}
-
-.mx_BottomLeftMenu_options .mx_RoleButton {
- margin-left: 0px;
- margin-right: 10px;
- height: 30px;
-}
-
-.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
- float: right;
-}
-
-.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
- margin-right: 0px;
-}
-
-.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
- float: none;
-}
-
-.mx_MatrixChat_useCompactLayout {
- .mx_LeftPanel .mx_BottomLeftMenu {
- flex: 0 0 50px;
- }
-
- .mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
- flex: 0 0 160px;
- }
-
- .mx_LeftPanel .mx_BottomLeftMenu_options {
- margin-top: 12px;
- }
-}
-
-.mx_LeftPanel_exploreAndFilterRow {
+ // Create a row-based flexbox for the TagPanel and the room list
display: flex;
- .mx_SearchBox {
- flex: 1 1 0;
- min-width: 0;
- margin: 4px 9px 1px 9px;
- }
-}
+ .mx_LeftPanel_tagPanelContainer {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: $tagPanelWidth;
+ height: 100%;
-.mx_LeftPanel_explore {
- flex: 0 0 50%;
- overflow: hidden;
- transition: flex-basis 0.2s;
- box-sizing: border-box;
+ // Create another flexbox so the TagPanel fills the container
+ display: flex;
- &.mx_LeftPanel_explore_hidden {
- flex-basis: 0;
+ // TagPanel handles its own CSS
}
- .mx_AccessibleButton {
- font-size: $font-14px;
- margin: 4px 0 1px 9px;
- padding: 9px;
- padding-left: 42px;
- font-weight: 600;
- color: $notice-secondary-color;
- position: relative;
- border-radius: 4px;
+ &:not(.mx_LeftPanel_hasTagPanel) {
+ .mx_LeftPanel_roomListContainer {
+ width: 100%;
+ }
+ }
- &:hover {
- background-color: $primary-bg-color;
+ // Note: The 'room list' in this context is actually everything that isn't the tag
+ // panel, such as the menu options, breadcrumbs, filtering, etc
+ .mx_LeftPanel_roomListContainer {
+ width: calc(100% - $tagPanelWidth);
+ background-color: $roomlist-bg-color;
+
+ // Create another flexbox (this time a column) for the room list components
+ display: flex;
+ flex-direction: column;
+
+ .mx_LeftPanel_userHeader {
+ /* 12px top, 12px sides, 20px bottom (using 13px bottom to account
+ * for internal whitespace in the breadcrumbs)
+ */
+ padding: 12px;
+ flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
+
+ // Create another flexbox column for the rows to stack within
+ display: flex;
+ flex-direction: column;
}
- &::before {
- cursor: pointer;
- mask: url('$(res)/img/explore.svg');
- mask-repeat: no-repeat;
- mask-position: center center;
- content: "";
- left: 14px;
- top: 10px;
- width: 16px;
- height: 16px;
- background-color: $notice-secondary-color;
- position: absolute;
+ .mx_LeftPanel_breadcrumbsContainer {
+ overflow-y: hidden;
+ overflow-x: scroll;
+ margin: 12px 12px 0 12px;
+ flex: 0 0 auto;
+ // Create yet another flexbox, this time within the row, to ensure items stay
+ // aligned correctly. This is also a row-based flexbox.
+ display: flex;
+ align-items: center;
+
+ &.mx_IndicatorScrollbar_leftOverflow {
+ mask-image: linear-gradient(90deg, transparent, black 5%);
+ }
+
+ &.mx_IndicatorScrollbar_rightOverflow {
+ mask-image: linear-gradient(90deg, black, black 95%, transparent);
+ }
+
+ &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
+ mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
+ }
+ }
+
+ .mx_LeftPanel_filterContainer {
+ margin-left: 12px;
+ margin-right: 12px;
+
+ flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
+
+ // Create a flexbox to organize the inputs
+ display: flex;
+ align-items: center;
+
+ .mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
+ & + .mx_LeftPanel_exploreButton {
+ // Cheaty way to return the occupied space to the filter input
+ flex-basis: 0;
+ margin: 0;
+ width: 0;
+
+ // Don't forget to hide the masked ::before icon,
+ // using display:none or visibility:hidden would break accessibility
+ &::before {
+ content: none;
+ }
+ }
+ }
+
+ .mx_LeftPanel_exploreButton {
+ width: 32px;
+ height: 32px;
+ border-radius: 8px;
+ background-color: $roomlist-button-bg-color;
+ position: relative;
+ margin-left: 8px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ width: 16px;
+ height: 16px;
+ mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ background: $secondary-fg-color;
+ }
+ }
+ }
+
+ .mx_LeftPanel_roomListFilterCount {
+ font-size: $font-13px;
+ font-weight: $font-semi-bold;
+ margin-left: 12px;
+ margin-top: 14px;
+ margin-bottom: -4px; // to counteract the normal roomListWrapper margin-top
+ }
+
+ .mx_LeftPanel_roomListWrapper {
+ overflow: hidden;
+ margin-top: 10px; // so we're not up against the search/filter
+ flex: 1 0 0; // needed in Safari to properly set flex-basis
+
+ &.mx_LeftPanel_roomListWrapper_stickyBottom {
+ padding-bottom: 32px;
+ }
+
+ &.mx_LeftPanel_roomListWrapper_stickyTop {
+ padding-top: 32px;
+ }
+ }
+
+ .mx_LeftPanel_actualRoomListContainer {
+ position: relative; // for sticky headers
+ height: 100%; // ensure scrolling still works
+ }
+ }
+
+ // These styles override the defaults for the minimized (66px) layout
+ &.mx_LeftPanel_minimized {
+ min-width: unset;
+
+ // We have to forcefully set the width to override the resizer's style attribute.
+ &.mx_LeftPanel_hasTagPanel {
+ width: calc(68px + $tagPanelWidth) !important;
+ }
+ &:not(.mx_LeftPanel_hasTagPanel) {
+ width: 68px !important;
+ }
+
+ .mx_LeftPanel_roomListContainer {
+ width: 68px;
+
+ .mx_LeftPanel_filterContainer {
+ // Organize the flexbox into a centered column layout
+ flex-direction: column;
+ justify-content: center;
+
+ .mx_LeftPanel_exploreButton {
+ margin-left: 0;
+ margin-top: 8px;
+ background-color: transparent;
+ }
+ }
}
}
}
diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss
index 25e1153fce..dc62cb8218 100644
--- a/res/css/structures/_MainSplit.scss
+++ b/res/css/structures/_MainSplit.scss
@@ -21,8 +21,22 @@ limitations under the License.
height: 100%;
}
-// move hit area 5px to the right so it doesn't overlap with the timeline scrollbar
-.mx_MainSplit > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
- margin: 0 -10px 0 0;
- padding: 0 10px 0 0;
+.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
+ padding: 5px;
+ // margin left to not allow the handle to not encroach on the space for the scrollbar
+ margin-left: 8px;
+
+ &:hover .mx_RightPanel_ResizeHandle {
+ // Need to use important to override element style attributes
+ // set by re-resizable
+ top: 50% !important;
+ transform: translate(0, -50%);
+
+ height: 64px !important; // to match width of the ones on roomlist
+ width: 4px !important;
+ border-radius: 4px !important;
+
+ background-color: $primary-fg-color;
+ opacity: 0.8;
+ }
}
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index c5a5d50068..f4e46a8e94 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -41,10 +41,6 @@ limitations under the License.
height: 40px;
}
-.mx_MatrixChat_toolbarShowing {
- height: auto;
-}
-
.mx_MatrixChat {
width: 100%;
height: 100%;
@@ -70,15 +66,36 @@ limitations under the License.
}
/* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) {
background-color: $primary-bg-color;
flex: 1 1 0;
min-width: 0;
- /* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
+ /* To fix https://github.com/vector-im/element-web/issues/3298 where Safari
needed height 100% all the way down to the HomePage. Height does not
have to be auto, empirically.
*/
height: 100%;
}
+
+.mx_MatrixChat > .mx_LeftPanel2:hover + .mx_ResizeHandle_horizontal,
+.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
+ position: relative;
+
+ &::before {
+ position: absolute;
+ left: 6px;
+ 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;
+ }
+}
diff --git a/res/css/structures/_NonUrgentToastContainer.scss b/res/css/structures/_NonUrgentToastContainer.scss
new file mode 100644
index 0000000000..826a812406
--- /dev/null
+++ b/res/css/structures/_NonUrgentToastContainer.scss
@@ -0,0 +1,35 @@
+/*
+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_NonUrgentToastContainer {
+ position: absolute;
+ bottom: 30px;
+ left: 28px;
+ z-index: 101; // same level as other toasts
+
+ .mx_NonUrgentToastContainer_toast {
+ padding: 10px 12px;
+ border-radius: 8px;
+ width: 320px;
+ font-size: $font-13px;
+ margin-top: 8px;
+
+ // We don't use variables on the colours because we want it to be the same
+ // in all themes.
+ background-color: #17191c;
+ color: #fff;
+ }
+}
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index 44205b1f01..715a94fe2c 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -63,6 +63,10 @@ limitations under the License.
padding-left: 32px;
padding-top: 8px;
position: relative;
+
+ a {
+ display: flex;
+ }
}
.mx_NotificationPanel .mx_EventTile_roomName a,
@@ -95,3 +99,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_content {
margin-right: 0px;
}
+
+.mx_NotificationPanel_empty::before {
+ mask-image: url('$(res)/img/element-icons/notifications.svg');
+}
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 10878322e3..c7c0d6fac4 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -19,9 +19,16 @@ limitations under the License.
overflow-x: hidden;
flex: 0 0 auto;
position: relative;
- min-width: 264px;
display: flex;
flex-direction: column;
+ border-radius: 8px;
+ padding: 4px 0;
+ box-sizing: border-box;
+ height: 100%;
+
+ .mx_RoomView_MessageList {
+ padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
+ }
}
.mx_RightPanel_header {
@@ -43,56 +50,67 @@ limitations under the License.
.mx_RightPanel_headerButton {
cursor: pointer;
flex: 0 0 auto;
- vertical-align: top;
- margin-left: 5px;
- margin-right: 5px;
- text-align: center;
- border-bottom: 2px solid transparent;
- height: 20px;
- width: 20px;
+ margin-left: 1px;
+ margin-right: 1px;
+ height: 32px;
+ width: 32px;
position: relative;
+ border-radius: 100%;
&::before {
content: '';
position: absolute;
- top: 0;
- left: 0;
- height: 20px;
- width: 20px;
- background-color: $rightpanel-button-color;
+ top: 4px; // center with parent of 32px
+ left: 4px; // center with parent of 32px
+ height: 24px;
+ width: 24px;
+ background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
.mx_RightPanel_membersButton::before {
- mask-image: url('$(res)/img/feather-customised/user.svg');
+ mask-image: url('$(res)/img/element-icons/room/members.svg');
+ mask-position: center;
}
.mx_RightPanel_filesButton::before {
- mask-image: url('$(res)/img/feather-customised/files.svg');
+ mask-image: url('$(res)/img/element-icons/room/files.svg');
+ mask-position: center;
}
.mx_RightPanel_notifsButton::before {
- mask-image: url('$(res)/img/feather-customised/notifications.svg');
+ mask-image: url('$(res)/img/element-icons/notifications.svg');
+ mask-position: center;
}
.mx_RightPanel_groupMembersButton::before {
- mask-image: url('$(res)/img/icons-people.svg');
+ mask-image: url('$(res)/img/element-icons/community-members.svg');
+ mask-position: center;
}
.mx_RightPanel_roomsButton::before {
- mask-image: url('$(res)/img/icons-room-nobg.svg');
+ mask-image: url('$(res)/img/element-icons/community-rooms.svg');
+ mask-position: center;
}
-.mx_RightPanel_headerButton_highlight::after {
- content: '';
- position: absolute;
- bottom: -6px;
- left: 0;
- right: 0;
- height: 2px;
- background-color: $button-bg-color;
+.mx_RightPanel_headerButton_highlight {
+ background: rgba($accent-color, 0.25);
+ // make the icon the accent color too
+ &::before {
+ background-color: $accent-color !important;
+ }
+}
+
+.mx_RightPanel_headerButton:not(.mx_RightPanel_headerButton_highlight) {
+ &:hover {
+ background: rgba($accent-color, 0.1);
+
+ &::before {
+ background-color: $accent-color;
+ }
+ }
}
.mx_RightPanel_headerButton_badge {
@@ -126,3 +144,28 @@ limitations under the License.
order: 2;
margin: auto;
}
+
+.mx_RightPanel_empty {
+ margin-right: -42px;
+
+ h2 {
+ font-weight: 700;
+ margin: 16px 0;
+ }
+
+ h2, p {
+ font-size: $font-14px;
+ }
+
+ &::before {
+ content: '';
+ display: block;
+ margin: 11px auto 29px auto;
+ height: 42px;
+ width: 42px;
+ background-color: $rightpanel-button-color;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ mask-position: center;
+ }
+}
diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss
new file mode 100644
index 0000000000..c33a3c0ff9
--- /dev/null
+++ b/res/css/structures/_RoomSearch.scss
@@ -0,0 +1,94 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// Note: this component expects to be contained within a flexbox
+.mx_RoomSearch {
+ flex: 1;
+ border-radius: 8px;
+ background-color: $roomlist-button-bg-color;
+ // keep border thickness consistent to prevent movement
+ border: 1px solid transparent;
+ height: 28px;
+ padding: 2px;
+
+ // Create a flexbox for the icons (easier to manage)
+ display: flex;
+ align-items: center;
+
+ .mx_RoomSearch_icon {
+ width: 16px;
+ height: 16px;
+ mask: url('$(res)/img/element-icons/roomlist/search.svg');
+ mask-repeat: no-repeat;
+ background-color: $secondary-fg-color;
+ margin-left: 7px;
+ }
+
+ .mx_RoomSearch_input {
+ border: none !important; // !important to override default app-wide styles
+ flex: 1 !important; // !important to override default app-wide styles
+ color: $primary-fg-color !important; // !important to override default app-wide styles
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ font-size: $font-12px;
+ line-height: $font-16px;
+
+ &:not(.mx_RoomSearch_inputExpanded)::placeholder {
+ color: $tertiary-fg-color !important; // !important to override default app-wide styles
+ }
+ }
+
+ &.mx_RoomSearch_hasQuery {
+ border-color: $secondary-fg-color;
+ }
+
+ &.mx_RoomSearch_focused {
+ box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
+ border-color: transparent;
+ }
+
+ &.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
+ background-color: $roomlist-filter-active-bg-color;
+
+ .mx_RoomSearch_clearButton {
+ width: 16px;
+ height: 16px;
+ mask-image: url('$(res)/img/element-icons/roomlist/search-clear.svg');
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ background-color: $secondary-fg-color;
+ margin-right: 8px;
+ }
+ }
+
+ .mx_RoomSearch_clearButton {
+ width: 0;
+ height: 0;
+ }
+
+ &.mx_RoomSearch_minimized {
+ border-radius: 32px;
+ height: auto;
+ width: auto;
+ padding: 8px;
+
+ .mx_RoomSearch_icon {
+ margin-left: 0;
+ }
+ }
+}
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
deleted file mode 100644
index 2c53258b08..0000000000
--- a/res/css/structures/_RoomSubList.scss
+++ /dev/null
@@ -1,187 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/* a word of explanation about the flex-shrink values employed here:
- there are 3 priotized categories of screen real-estate grabbing,
- each with a flex-shrink difference of 4 order of magnitude,
- so they ideally wouldn't affect each other.
- lowest category: .mx_RoomSubList
- flex-shrink: 10000000
- distribute size of items within the same category by their size
- middle category: .mx_RoomSubList.resized-sized
- flex-shrink: 1000
- applied when using the resizer, will have a max-height set to it,
- to limit the size
- highest category: .mx_RoomSubList.resized-all
- flex-shrink: 1
- small flex-shrink value (1), is only added if you can drag the resizer so far
- so in practice you can only assign this category if there is enough space.
-*/
-
-.mx_RoomSubList {
- display: flex;
- flex-direction: column;
-}
-
-
-.mx_RoomSubList_nonEmpty .mx_AutoHideScrollbar_offset {
- padding-bottom: 4px;
-}
-
-.mx_RoomSubList_labelContainer {
- display: flex;
- flex-direction: row;
- align-items: center;
- flex: 0 0 auto;
- margin: 0 8px;
- padding: 0 8px;
- height: 36px;
-}
-
-.mx_RoomSubList_labelContainer.focus-visible:focus-within {
- background-color: $roomtile-focused-bg-color;
-}
-
-.mx_RoomSubList_label {
- flex: 1;
- cursor: pointer;
- display: flex;
- align-items: center;
- padding: 0 6px;
-}
-
-.mx_RoomSubList_label > span {
- flex: 1 1 auto;
- text-transform: uppercase;
- color: $roomsublist-label-fg-color;
- font-weight: 700;
- font-size: $font-12px;
- margin-left: 8px;
-}
-
-.mx_RoomSubList_badge > div {
- flex: 0 0 auto;
- border-radius: $font-16px;
- font-weight: 600;
- font-size: $font-12px;
- padding: 0 5px;
- color: $roomtile-badge-fg-color;
- background-color: $roomtile-name-color;
- cursor: pointer;
-}
-
-.mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
- margin-left: 7px;
-}
-
-.mx_RoomSubList_addRoom {
- background-color: $roomheader-addroom-bg-color;
- border-radius: 10px; // 16/2 + 2 padding
- height: 16px;
- flex: 0 0 16px;
- position: relative;
-
- &::before {
- background-color: $roomheader-addroom-fg-color;
- mask: url('$(res)/img/icons-room-add.svg');
- mask-repeat: no-repeat;
- mask-position: center;
- content: '';
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- }
-}
-
-.mx_RoomSubList_badgeHighlight > div {
- color: $accent-fg-color;
- background-color: $warning-color;
-}
-
-.mx_RoomSubList_chevron {
- pointer-events: none;
- mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
- mask-repeat: no-repeat;
- transition: transform 0.2s ease-in;
- width: 10px;
- height: 6px;
- margin-left: 2px;
- background-color: $roomsublist-label-fg-color;
-}
-
-.mx_RoomSubList_chevronDown {
- transform: rotateZ(0deg);
-}
-
-.mx_RoomSubList_chevronUp {
- transform: rotateZ(180deg);
-}
-
-.mx_RoomSubList_chevronRight {
- transform: rotateZ(-90deg);
-}
-
-.mx_RoomSubList_scroll {
- /* let rooms list grab as much space as it needs (auto),
- potentially overflowing and showing a scrollbar */
- flex: 0 1 auto;
- padding: 0 8px;
-}
-
-.collapsed {
- .mx_RoomSubList_scroll {
- padding: 0;
- }
-
- .mx_RoomSubList_labelContainer {
- margin-right: 8px;
- margin-left: 2px;
- padding: 0;
- }
-
- .mx_RoomSubList_addRoom {
- margin-left: 3px;
- margin-right: 10px;
- }
-
- .mx_RoomSubList_label > span {
- display: none;
- }
-}
-
-// overflow indicators
-.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
- &.mx_IndicatorScrollbar_topOverflow::before {
- position: sticky;
- content: "";
- top: 0;
- left: 0;
- right: 0;
- height: 8px;
- z-index: 100;
- display: block;
- pointer-events: none;
- transition: background-image 0.1s ease-in;
- background: linear-gradient(to top, $panel-gradient);
- }
-
-
- &.mx_IndicatorScrollbar_topOverflow {
- margin-top: -8px;
- }
-}
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index f2154ef448..3b60c4e62b 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -261,7 +261,7 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_voipButton {
float: right;
margin-right: 13px;
- margin-top: 10px;
+ margin-top: 13px;
cursor: pointer;
}
diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 4a78c8df92..b2d05ad7e6 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -33,7 +33,7 @@ limitations under the License.
.mx_TagPanel .mx_TagPanel_clearButton_container {
/* Constant height within flex mx_TagPanel */
height: 70px;
- width: 60px;
+ width: 56px;
flex: none;
@@ -51,7 +51,7 @@ limitations under the License.
.mx_TagPanel .mx_TagPanel_divider {
height: 0px;
- width: 42px;
+ width: 34px;
border-bottom: 1px solid $panel-divider-color;
display: none;
}
@@ -66,15 +66,13 @@ limitations under the License.
flex-direction: column;
align-items: center;
- height: 100%;
+ padding-top: 6px;
}
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
- height: $font-40px;
- padding: 10px 0 9px 0;
+ margin: 6px 0;
}
.mx_TagPanel .mx_TagTile {
- margin: 9px 0;
// opacity: 0.5;
position: relative;
}
@@ -86,8 +84,8 @@ limitations under the License.
.mx_TagPanel .mx_TagTile_plus {
margin-bottom: 12px;
- height: 40px;
- width: 40px;
+ height: 32px;
+ width: 32px;
border-radius: 20px;
background-color: $roomheader-addroom-bg-color;
position: relative;
@@ -110,13 +108,12 @@ limitations under the License.
.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
content: '';
- height: calc(100% + 16px);
+ height: 100%;
background-color: $accent-color;
- width: 5px;
+ width: 4px;
position: absolute;
- left: -15px;
+ left: -12px;
border-radius: 0 3px 3px 0;
- top: -8px; // (16px / 2)
}
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
@@ -159,7 +156,7 @@ limitations under the License.
font-weight: 600;
font-size: $font-14px;
padding: 0 5px;
- background-color: $roomtile-name-color;
+ background-color: $muted-fg-color;
}
.mx_TagTile_badgeHighlight {
diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 6ec4a0d152..544dcbc180 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -28,8 +28,8 @@ limitations under the License.
margin: 0 4px;
grid-row: 2 / 4;
grid-column: 1;
- background-color: white;
- box-shadow: 0px 4px 12px $menu-box-shadow-color;
+ background-color: $dark-panel-bg-color;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
@@ -37,26 +37,28 @@ limitations under the License.
grid-row: 1 / 3;
grid-column: 1;
color: $primary-fg-color;
- background-color: $primary-bg-color;
- box-shadow: 0px 4px 12px $menu-box-shadow-color;
+ background-color: $dark-panel-bg-color;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px;
overflow: hidden;
display: grid;
- grid-template-columns: 20px 1fr;
- column-gap: 10px;
+ grid-template-columns: 22px 1fr;
+ column-gap: 8px;
row-gap: 4px;
padding: 8px;
- padding-right: 16px;
&.mx_Toast_hasIcon {
- &::after {
+ &::before, &::after {
content: "";
width: 22px;
height: 22px;
grid-column: 1;
grid-row: 1;
mask-size: 100%;
+ mask-position: center;
mask-repeat: no-repeat;
+ background-size: 100%;
+ background-repeat: no-repeat;
}
&.mx_Toast_icon_verification::after {
@@ -64,21 +66,59 @@ limitations under the License.
background-color: $primary-fg-color;
}
- &.mx_Toast_icon_verification_warning::after {
- background-image: url("$(res)/img/e2e/warning.svg");
+ &.mx_Toast_icon_verification_warning {
+ // white infill for the hollow svg mask
+ &::before {
+ background-color: #ffffff;
+ mask-image: url('$(res)/img/e2e/normal.svg');
+ mask-size: 90%;
+ }
+
+ &::after {
+ mask-image: url("$(res)/img/e2e/warning.svg");
+ background-color: $notice-primary-color;
+ }
}
- h2, .mx_Toast_body {
+ .mx_Toast_title, .mx_Toast_body {
grid-column: 2;
}
}
+ &:not(.mx_Toast_hasIcon) {
+ padding-left: 12px;
- h2 {
- grid-column: 1 / 3;
- grid-row: 1;
- margin: 0;
- font-size: $font-15px;
- font-weight: 600;
+ .mx_Toast_title {
+ grid-column: 1 / -1;
+ }
+ }
+
+ .mx_Toast_title,
+ .mx_Toast_description {
+ padding-right: 8px;
+ }
+
+ .mx_Toast_title {
+ width: 100%;
+ box-sizing: border-box;
+
+ h2 {
+ grid-column: 1 / 3;
+ grid-row: 1;
+ margin: 0;
+ font-size: $font-15px;
+ font-weight: 600;
+ display: inline;
+ width: auto;
+ vertical-align: middle;
+ }
+
+ span {
+ padding-left: 8px;
+ float: right;
+ font-size: $font-12px;
+ line-height: $font-22px;
+ color: $muted-fg-color;
+ }
}
.mx_Toast_body {
@@ -87,7 +127,13 @@ limitations under the License.
}
.mx_Toast_buttons {
+ float: right;
display: flex;
+
+ .mx_FormButton {
+ min-width: 96px;
+ box-sizing: border-box;
+ }
}
.mx_Toast_description {
@@ -96,6 +142,15 @@ limitations under the License.
text-overflow: ellipsis;
margin: 4px 0 11px 0;
font-size: $font-12px;
+
+ .mx_AccessibleButton_kind_link {
+ font-size: inherit;
+ padding: 0;
+ }
+
+ a {
+ text-decoration: none;
+ }
}
.mx_Toast_deviceID {
diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss
deleted file mode 100644
index 53d44e7c24..0000000000
--- a/res/css/structures/_TopLeftMenuButton.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_TopLeftMenuButton {
- flex: 0 0 52px;
- border-bottom: 1px solid $panel-divider-color;
- color: $topleftmenu-color;
- background-color: $primary-bg-color;
- display: flex;
- align-items: center;
- min-width: 0;
- padding: 0 4px;
- overflow: hidden;
-}
-
-.mx_TopLeftMenuButton .mx_BaseAvatar {
- margin: 0 7px;
-}
-
-.mx_TopLeftMenuButton_name {
- margin: 0 7px;
- font-size: $font-18px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- font-weight: 600;
-}
-
-.mx_TopLeftMenuButton_chevron {
- margin: 0 7px;
- mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
- mask-repeat: no-repeat;
- width: 10px;
- height: 6px;
- background-color: $roomsublist-label-fg-color;
-}
diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss
new file mode 100644
index 0000000000..78795c85a2
--- /dev/null
+++ b/res/css/structures/_UserMenu.scss
@@ -0,0 +1,196 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserMenu {
+
+ // to make the ... button sort of aligned with the explore button below
+ padding-right: 6px;
+
+ .mx_UserMenu_headerButtons {
+ width: 16px;
+ height: 16px;
+ position: relative;
+ display: block;
+
+ &::before {
+ content: '';
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ background: $primary-fg-color;
+ mask-image: url('$(res)/img/element-icons/context-menu.svg');
+ }
+ }
+
+ .mx_UserMenu_row {
+ // Create a row-based flexbox to ensure items stay aligned correctly.
+ display: flex;
+ align-items: center;
+
+ .mx_UserMenu_userAvatarContainer {
+ position: relative; // to make default avatars work
+ margin-right: 8px;
+ height: 32px; // to remove the unknown 4px gap the browser puts below it
+
+ .mx_UserMenu_userAvatar {
+ border-radius: 32px; // should match avatar size
+ object-fit: cover;
+ }
+ }
+
+ .mx_UserMenu_userName {
+ font-weight: 600;
+ font-size: $font-15px;
+ line-height: $font-20px;
+ flex: 1;
+
+ // Ellipsize any text overflow
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .mx_UserMenu_headerButtons {
+ // No special styles: the rest of the layout happens to make it work.
+ }
+ }
+
+ &.mx_UserMenu_minimized {
+ .mx_UserMenu_userHeader {
+ .mx_UserMenu_row {
+ justify-content: center;
+ }
+
+ .mx_UserMenu_userAvatarContainer {
+ margin-right: 0;
+ }
+ }
+ }
+}
+
+.mx_UserMenu_contextMenu {
+ width: 247px;
+
+ &.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red {
+ .mx_AccessibleButton {
+ padding-top: 16px;
+ padding-bottom: 16px;
+ }
+ }
+
+ .mx_UserMenu_contextMenu_header {
+ padding: 20px;
+
+ // Create a flexbox to organize the header a bit easier
+ display: flex;
+ align-items: center;
+
+ .mx_UserMenu_contextMenu_name {
+ // Create another flexbox of columns to handle large user IDs
+ display: flex;
+ flex-direction: column;
+ width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button
+
+ * {
+ // Automatically grow all subelements to fit the container
+ flex: 1;
+ width: 100%;
+
+ // Ellipsize any text overflow
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .mx_UserMenu_contextMenu_displayName {
+ font-weight: bold;
+ font-size: $font-15px;
+ line-height: $font-20px;
+ }
+
+ .mx_UserMenu_contextMenu_userId {
+ font-size: $font-15px;
+ line-height: $font-24px;
+ }
+ }
+
+ .mx_UserMenu_contextMenu_themeButton {
+ min-width: 32px;
+ max-width: 32px;
+ width: 32px;
+ height: 32px;
+ margin-left: 8px;
+ border-radius: 32px;
+ background-color: $theme-button-bg-color;
+ cursor: pointer;
+
+ // to make alignment easier, create flexbox for the image
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ .mx_IconizedContextMenu_icon {
+ width: 16px;
+ height: 16px;
+ display: block;
+
+ &::before {
+ content: '';
+ width: 16px;
+ height: 16px;
+ display: block;
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ background: $primary-fg-color;
+ }
+ }
+
+ .mx_UserMenu_iconHome::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
+ }
+
+ .mx_UserMenu_iconBell::before {
+ mask-image: url('$(res)/img/element-icons/notifications.svg');
+ }
+
+ .mx_UserMenu_iconLock::before {
+ mask-image: url('$(res)/img/element-icons/security.svg');
+ }
+
+ .mx_UserMenu_iconSettings::before {
+ mask-image: url('$(res)/img/element-icons/settings.svg');
+ }
+
+ .mx_UserMenu_iconArchive::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/archived.svg');
+ }
+
+ .mx_UserMenu_iconMessage::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/feedback.svg');
+ }
+
+ .mx_UserMenu_iconSignOut::before {
+ mask-image: url('$(res)/img/element-icons/leave.svg');
+ }
+}
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index 4b2d6b1bf1..0ba0d10e06 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -128,6 +128,11 @@ limitations under the License.
margin-top: 16px;
font-size: $font-15px;
line-height: $font-24px;
+
+ .mx_InlineSpinner img {
+ vertical-align: sub;
+ margin-right: 5px;
+ }
}
.mx_AuthBody_paddedFooter_subtitle {
@@ -147,26 +152,11 @@ limitations under the License.
margin: 1em 0;
}
-.mx_AuthBody_passwordScore {
- width: 100%;
- appearance: none;
- height: 4px;
- border: 0;
- border-radius: 2px;
- position: absolute;
- top: -12px;
-
- &::-moz-progress-bar {
- border-radius: 2px;
- background-color: $accent-color;
- }
-
- &::-webkit-progress-bar,
- &::-webkit-progress-value {
- border-radius: 2px;
- }
-
- &::-webkit-progress-value {
- background-color: $accent-color;
+@media only screen and (max-width: 480px) {
+ .mx_AuthBody {
+ border-radius: 4px;
+ width: auto;
+ max-width: 500px;
+ padding: 10px;
}
}
diff --git a/res/css/views/auth/_AuthHeader.scss b/res/css/views/auth/_AuthHeader.scss
index b3d07b1925..b1372affee 100644
--- a/res/css/views/auth/_AuthHeader.scss
+++ b/res/css/views/auth/_AuthHeader.scss
@@ -21,3 +21,9 @@ limitations under the License.
padding: 25px 40px;
box-sizing: border-box;
}
+
+@media only screen and (max-width: 480px) {
+ .mx_AuthHeader {
+ display: none;
+ }
+}
diff --git a/res/css/views/auth/_AuthHeaderLogo.scss b/res/css/views/auth/_AuthHeaderLogo.scss
index 091fb0197b..917dcabf67 100644
--- a/res/css/views/auth/_AuthHeaderLogo.scss
+++ b/res/css/views/auth/_AuthHeaderLogo.scss
@@ -23,3 +23,9 @@ limitations under the License.
.mx_AuthHeaderLogo img {
width: 100%;
}
+
+@media only screen and (max-width: 480px) {
+ .mx_AuthHeaderLogo {
+ display: none;
+ }
+}
diff --git a/res/css/views/auth/_AuthPage.scss b/res/css/views/auth/_AuthPage.scss
index 8ef48b6265..e3409792f0 100644
--- a/res/css/views/auth/_AuthPage.scss
+++ b/res/css/views/auth/_AuthPage.scss
@@ -29,3 +29,9 @@ limitations under the License.
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: $authpage-modal-bg-color;
}
+
+@media only screen and (max-width: 480px) {
+ .mx_AuthPage_modal {
+ margin-top: 0;
+ }
+}
diff --git a/res/css/views/auth/_PassphraseField.scss b/res/css/views/auth/_PassphraseField.scss
new file mode 100644
index 0000000000..bf8e7f4438
--- /dev/null
+++ b/res/css/views/auth/_PassphraseField.scss
@@ -0,0 +1,37 @@
+/*
+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.
+*/
+
+$PassphraseStrengthHigh: $accent-color;
+$PassphraseStrengthMedium: $username-variant5-color;
+$PassphraseStrengthLow: $notice-primary-color;
+
+progress.mx_PassphraseField_progress {
+ appearance: none;
+ width: 100%;
+ border: 0;
+ height: 4px;
+ position: absolute;
+ top: -12px;
+
+ @mixin ProgressBarBorderRadius "2px";
+ @mixin ProgressBarColour $PassphraseStrengthLow;
+ &[value="2"], &[value="3"] {
+ @mixin ProgressBarColour $PassphraseStrengthMedium;
+ }
+ &[value="4"] {
+ @mixin ProgressBarColour $PassphraseStrengthHigh;
+ }
+}
diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss
index e59598278f..1a1e14e7ac 100644
--- a/res/css/views/avatars/_BaseAvatar.scss
+++ b/res/css/views/avatars/_BaseAvatar.scss
@@ -22,7 +22,7 @@ limitations under the License.
// different results during full reflow of the page vs. incremental reflow
// of small portions. While that's surely a browser bug, we can avoid it by
// using `inline-block` instead of the default `inline`.
- // https://github.com/vector-im/riot-web/issues/5594
+ // https://github.com/vector-im/element-web/issues/5594
// https://bugzilla.mozilla.org/show_bug.cgi?id=1535053
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
display: inline-block;
diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss
new file mode 100644
index 0000000000..e0afd9de66
--- /dev/null
+++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss
@@ -0,0 +1,73 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// XXX: We shouldn't be using TemporaryTile anywhere - delete it.
+.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
+ position: relative;
+
+ &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
+ mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg');
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ }
+
+ .mx_DecoratedRoomAvatar_icon {
+ position: absolute;
+ bottom: -2px;
+ right: -2px;
+ margin: 4px;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ }
+
+ .mx_DecoratedRoomAvatar_icon::before {
+ content: '';
+ width: 8px;
+ height: 8px;
+ position: absolute;
+ border-radius: 8px;
+ }
+
+ .mx_DecoratedRoomAvatar_icon_globe::before {
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ background: $secondary-fg-color;
+ mask-image: url('$(res)/img/globe.svg');
+ }
+
+ .mx_DecoratedRoomAvatar_icon_offline::before {
+ background-color: $presence-offline;
+ }
+
+ .mx_DecoratedRoomAvatar_icon_online::before {
+ background-color: $presence-online;
+ }
+
+ .mx_DecoratedRoomAvatar_icon_away::before {
+ background-color: $presence-away;
+ }
+
+ .mx_NotificationBadge, .mx_RoomTile_badgeContainer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 18px;
+ width: 18px;
+ }
+}
diff --git a/res/css/views/avatars/_PulsedAvatar.scss b/res/css/views/avatars/_PulsedAvatar.scss
new file mode 100644
index 0000000000..ce9e3382ab
--- /dev/null
+++ b/res/css/views/avatars/_PulsedAvatar.scss
@@ -0,0 +1,30 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_PulsedAvatar {
+ @keyframes shadow-pulse {
+ 0% {
+ box-shadow: 0 0 0 0px rgba($accent-color, 0.2);
+ }
+ 100% {
+ box-shadow: 0 0 0 6px rgba($accent-color, 0);
+ }
+ }
+
+ img {
+ animation: shadow-pulse 1s infinite;
+ }
+}
diff --git a/res/css/views/context_menus/_IconizedContextMenu.scss b/res/css/views/context_menus/_IconizedContextMenu.scss
new file mode 100644
index 0000000000..7913058995
--- /dev/null
+++ b/res/css/views/context_menus/_IconizedContextMenu.scss
@@ -0,0 +1,148 @@
+/*
+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.
+*/
+
+// A context menu that largely fits the | [icon] [label] | format.
+.mx_IconizedContextMenu {
+ min-width: 146px;
+
+ .mx_IconizedContextMenu_optionList {
+ & > * {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+
+ // the notFirst class is for cases where the optionList might be under a header of sorts.
+ &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
+ // This is a bit of a hack when we could just use a simple border-top property,
+ // however we have a (kinda) good reason for doing it this way: we need opacity.
+ // To get the right color, we need an opacity modifier which means we have to work
+ // around the problem. PostCSS doesn't support the opacity() function, and if we
+ // use something like postcss-functions we quickly run into an issue where the
+ // function we would define gets passed a CSS variable for custom themes, which
+ // can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
+ //
+ // Therefore, we just hack in a line and border the thing ourselves
+ &::before {
+ border-top: 1px solid $primary-fg-color;
+ opacity: 0.1;
+ content: '';
+
+ // Counteract the padding problems (width: 100% ignores the 40px padding,
+ // unless we position it absolutely then it does the right thing).
+ width: 100%;
+ position: absolute;
+ left: 0;
+ }
+ }
+
+ // round the top corners of the top button for the hover effect to be bounded
+ &:first-child .mx_AccessibleButton:first-child {
+ border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
+ }
+
+ // round the bottom corners of the bottom button for the hover effect to be bounded
+ &:last-child .mx_AccessibleButton:last-child {
+ border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
+ }
+
+ .mx_AccessibleButton {
+ // pad the inside of the button so that the hover background is padded too
+ padding-top: 12px;
+ padding-bottom: 12px;
+ text-decoration: none;
+ color: $primary-fg-color;
+ font-size: $font-15px;
+ line-height: $font-24px;
+
+ // Create a flexbox to more easily define the list items
+ display: flex;
+ align-items: center;
+
+ &:hover {
+ background-color: $menu-selected-color;
+ }
+
+ img, .mx_IconizedContextMenu_icon { // icons
+ width: 16px;
+ min-width: 16px;
+ max-width: 16px;
+ }
+
+ span.mx_IconizedContextMenu_label { // labels
+ padding-left: 14px;
+ width: 100%;
+ flex: 1;
+
+ // Ellipsize any text overflow
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+ }
+ }
+
+ .mx_IconizedContextMenu_icon {
+ position: relative;
+ width: 16px;
+ height: 16px;
+
+ &::before {
+ content: '';
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ background: $primary-fg-color;
+ }
+ }
+
+ .mx_IconizedContextMenu_optionList_red {
+ .mx_AccessibleButton {
+ color: $warning-color !important;
+ }
+
+ .mx_IconizedContextMenu_icon::before {
+ background-color: $warning-color;
+ }
+ }
+
+ .mx_IconizedContextMenu_active {
+ &.mx_AccessibleButton, .mx_AccessibleButton {
+ color: $accent-color !important;
+ }
+
+ .mx_IconizedContextMenu_icon::before {
+ background-color: $accent-color;
+ }
+ }
+
+ &.mx_IconizedContextMenu_compact {
+ .mx_IconizedContextMenu_optionList > * {
+ padding: 8px 16px 8px 11px;
+ }
+ }
+
+ .mx_IconizedContextMenu_checked {
+ margin-left: 16px;
+ margin-right: -5px;
+
+ &::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
+ }
+ }
+}
diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss
index e4ccc030a2..8929c8906e 100644
--- a/res/css/views/context_menus/_TagTileContextMenu.scss
+++ b/res/css/views/context_menus/_TagTileContextMenu.scss
@@ -15,9 +15,8 @@ limitations under the License.
*/
.mx_TagTileContextMenu_item {
- padding-top: 8px;
+ padding: 8px;
padding-right: 20px;
- padding-bottom: 8px;
cursor: pointer;
white-space: nowrap;
display: flex;
@@ -25,15 +24,22 @@ limitations under the License.
line-height: $font-16px;
}
-.mx_TagTileContextMenu_item object {
- pointer-events: none;
+.mx_TagTileContextMenu_item::before {
+ content: '';
+ height: 15px;
+ width: 15px;
+ background-color: currentColor;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ margin-right: 8px;
}
+.mx_TagTileContextMenu_viewCommunity::before {
+ mask-image: url('$(res)/img/element-icons/view-community.svg');
+}
-.mx_TagTileContextMenu_item_icon {
- padding-right: 8px;
- padding-left: 4px;
- display: inline-block;
+.mx_TagTileContextMenu_hideCommunity::before {
+ mask-image: url('$(res)/img/element-icons/hide.svg');
}
.mx_TagTileContextMenu_separator {
diff --git a/res/css/views/dialogs/_BugReportDialog.scss b/res/css/views/dialogs/_BugReportDialog.scss
new file mode 100644
index 0000000000..1920ac33ea
--- /dev/null
+++ b/res/css/views/dialogs/_BugReportDialog.scss
@@ -0,0 +1,23 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BugReportDialog {
+ .mx_BugReportDialog_download {
+ .mx_AccessibleButton_kind_link {
+ padding-left: 0;
+ }
+ }
+}
diff --git a/res/css/views/dialogs/_GroupAddressPicker.scss b/res/css/views/dialogs/_GroupAddressPicker.scss
index 20a7cc1047..5fa18931f0 100644
--- a/res/css/views/dialogs/_GroupAddressPicker.scss
+++ b/res/css/views/dialogs/_GroupAddressPicker.scss
@@ -18,8 +18,3 @@ limitations under the License.
margin-top: 10px;
display: flex;
}
-
-.mx_GroupAddressPicker_checkboxContainer input[type="checkbox"] {
- /* Stop flex from shrinking the checkbox */
- width: 20px;
-}
diff --git a/res/css/views/dialogs/_RoomSettingsDialog.scss b/res/css/views/dialogs/_RoomSettingsDialog.scss
index 3751c15643..d4199a1e66 100644
--- a/res/css/views/dialogs/_RoomSettingsDialog.scss
+++ b/res/css/views/dialogs/_RoomSettingsDialog.scss
@@ -18,19 +18,19 @@ limitations under the License.
// ==========================================================
.mx_RoomSettingsDialog_settingsIcon::before {
- mask-image: url('$(res)/img/feather-customised/settings.svg');
+ mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_RoomSettingsDialog_securityIcon::before {
- mask-image: url('$(res)/img/feather-customised/lock.svg');
+ mask-image: url('$(res)/img/element-icons/security.svg');
}
.mx_RoomSettingsDialog_rolesIcon::before {
- mask-image: url('$(res)/img/feather-customised/users-sm.svg');
+ mask-image: url('$(res)/img/element-icons/room/settings/roles.svg');
}
.mx_RoomSettingsDialog_notificationsIcon::before {
- mask-image: url('$(res)/img/feather-customised/notifications.svg');
+ mask-image: url('$(res)/img/element-icons/notifications.svg');
}
.mx_RoomSettingsDialog_bridgesIcon::before {
@@ -39,7 +39,7 @@ limitations under the License.
}
.mx_RoomSettingsDialog_warningIcon::before {
- mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
+ mask-image: url('$(res)/img/element-icons/room/settings/advanced.svg');
}
.mx_RoomSettingsDialog .mx_Dialog_title {
diff --git a/res/css/views/dialogs/_ServerOfflineDialog.scss b/res/css/views/dialogs/_ServerOfflineDialog.scss
new file mode 100644
index 0000000000..ae4b70beb3
--- /dev/null
+++ b/res/css/views/dialogs/_ServerOfflineDialog.scss
@@ -0,0 +1,72 @@
+/*
+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_ServerOfflineDialog {
+ .mx_ServerOfflineDialog_content {
+ padding-right: 85px;
+ color: $primary-fg-color;
+
+ hr {
+ border-color: $primary-fg-color;
+ opacity: 0.1;
+ border-bottom: none;
+ }
+
+ ul {
+ padding: 16px;
+
+ li:nth-child(n + 2) {
+ margin-top: 16px;
+ }
+ }
+
+ .mx_ServerOfflineDialog_content_context {
+ .mx_ServerOfflineDialog_content_context_timestamp {
+ display: inline-block;
+ width: 115px;
+ color: $muted-fg-color;
+ line-height: 24px; // same as avatar
+ vertical-align: top;
+ }
+
+ .mx_ServerOfflineDialog_content_context_timeline {
+ display: inline-block;
+ width: calc(100% - 155px); // 115px timestamp width + 40px right margin
+
+ .mx_ServerOfflineDialog_content_context_timeline_header {
+ span {
+ margin-left: 8px;
+ vertical-align: middle;
+ }
+ }
+
+ .mx_ServerOfflineDialog_content_context_txn {
+ position: relative;
+ margin-top: 8px;
+
+ .mx_ServerOfflineDialog_content_context_txn_desc {
+ width: calc(100% - 100px); // 100px is an arbitrary margin for the button
+ }
+
+ .mx_AccessibleButton {
+ float: right;
+ padding: 0;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/res/css/views/dialogs/_ShareDialog.scss b/res/css/views/dialogs/_ShareDialog.scss
index 9a2f67dea3..c343b872fd 100644
--- a/res/css/views/dialogs/_ShareDialog.scss
+++ b/res/css/views/dialogs/_ShareDialog.scss
@@ -51,10 +51,12 @@ limitations under the License.
display: inherit;
}
.mx_ShareDialog_matrixto_copy > div {
- background-image: url($copy-button-url);
+ mask-image: url($copy-button-url);
+ background-color: $message-action-bar-fg-color;
margin-left: 5px;
width: 20px;
height: 20px;
+ background-repeat: no-repeat;
}
.mx_ShareDialog_split {
@@ -64,9 +66,6 @@ limitations under the License.
.mx_ShareDialog_qrcode_container {
float: left;
- background-color: #ffffff;
- padding: 5px; // makes qr code more readable in dark theme
- border-radius: 5px;
height: 256px;
width: 256px;
margin-right: 64px;
diff --git a/res/css/views/dialogs/_UnknownDeviceDialog.scss b/res/css/views/dialogs/_UnknownDeviceDialog.scss
deleted file mode 100644
index daa6bd2352..0000000000
--- a/res/css/views/dialogs/_UnknownDeviceDialog.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_UnknownDeviceDialog {
- height: 100%;
- display: flex;
- flex-direction: column;
-}
-
-.mx_UnknownDeviceDialog ul {
- list-style: none;
- padding: 0;
-}
-// userid
-.mx_UnknownDeviceDialog p {
- font-weight: bold;
- font-size: $font-16px;
-}
-
-.mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
- flex-direction: row !important;
-}
-
-.mx_UnknownDeviceDialog .mx_Dialog_content {
- margin-bottom: 24px;
- overflow-y: scroll;
-}
-
-.mx_UnknownDeviceDialog_deviceList > li {
- padding: 4px;
-}
-
-.mx_UnknownDeviceDialog_deviceList > li > * {
- padding-bottom: 0;
-}
diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss
index 4d831d7858..bd472710ea 100644
--- a/res/css/views/dialogs/_UserSettingsDialog.scss
+++ b/res/css/views/dialogs/_UserSettingsDialog.scss
@@ -18,37 +18,41 @@ limitations under the License.
// ==========================================================
.mx_UserSettingsDialog_settingsIcon::before {
- mask-image: url('$(res)/img/feather-customised/settings.svg');
+ mask-image: url('$(res)/img/element-icons/settings.svg');
+}
+
+.mx_UserSettingsDialog_appearanceIcon::before {
+ mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
}
.mx_UserSettingsDialog_voiceIcon::before {
- mask-image: url('$(res)/img/feather-customised/phone.svg');
+ mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
.mx_UserSettingsDialog_bellIcon::before {
- mask-image: url('$(res)/img/feather-customised/notifications.svg');
+ mask-image: url('$(res)/img/element-icons/notifications.svg');
}
.mx_UserSettingsDialog_preferencesIcon::before {
- mask-image: url('$(res)/img/feather-customised/sliders.svg');
+ mask-image: url('$(res)/img/element-icons/settings/preference.svg');
}
.mx_UserSettingsDialog_securityIcon::before {
- mask-image: url('$(res)/img/feather-customised/lock.svg');
+ mask-image: url('$(res)/img/element-icons/security.svg');
}
.mx_UserSettingsDialog_helpIcon::before {
- mask-image: url('$(res)/img/feather-customised/help-circle.svg');
+ mask-image: url('$(res)/img/element-icons/settings/help.svg');
}
.mx_UserSettingsDialog_labsIcon::before {
- mask-image: url('$(res)/img/feather-customised/flag.svg');
+ mask-image: url('$(res)/img/element-icons/settings/lab-flags.svg');
}
.mx_UserSettingsDialog_mjolnirIcon::before {
- mask-image: url('$(res)/img/feather-customised/face.svg');
+ mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
}
.mx_UserSettingsDialog_flairIcon::before {
- mask-image: url('$(res)/img/feather-customised/flair.svg');
+ mask-image: url('$(res)/img/element-icons/settings/flair.svg');
}
diff --git a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
index b9babd05f5..9be98e25b2 100644
--- a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
+++ b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
@@ -35,17 +35,6 @@ limitations under the License.
align-items: flex-start;
}
-.mx_CreateKeyBackupDialog_passPhraseHelp {
- flex: 1;
- height: 85px;
- margin-left: 20px;
- font-size: 80%;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseHelp progress {
- width: 100%;
-}
-
.mx_CreateKeyBackupDialog_passPhraseInput {
flex: none;
width: 250px;
diff --git a/res/css/views/dialogs/secretstorage/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/secretstorage/_AccessSecretStorageDialog.scss
index db11e91bdb..63d0ca555d 100644
--- a/res/css/views/dialogs/secretstorage/_AccessSecretStorageDialog.scss
+++ b/res/css/views/dialogs/secretstorage/_AccessSecretStorageDialog.scss
@@ -15,20 +15,79 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+.mx_AccessSecretStorageDialog_titleWithIcon::before {
+ content: '';
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+ top: 5px;
+ background-color: $primary-fg-color;
+}
+
+.mx_AccessSecretStorageDialog_secureBackupTitle::before {
+ mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
+}
+
+.mx_AccessSecretStorageDialog_securePhraseTitle::before {
+ mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
+}
+
.mx_AccessSecretStorageDialog_keyStatus {
height: 30px;
}
-.mx_AccessSecretStorageDialog_primaryContainer {
- /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
- padding: 20px;
-}
-
-.mx_AccessSecretStorageDialog_passPhraseInput,
-.mx_AccessSecretStorageDialog_recoveryKeyInput {
+.mx_AccessSecretStorageDialog_passPhraseInput {
width: 300px;
border: 1px solid $accent-color;
border-radius: 5px;
padding: 10px;
}
+.mx_AccessSecretStorageDialog_recoveryKeyEntry {
+ display: flex;
+ align-items: center;
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
+ flex-grow: 1;
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
+ margin: 16px;
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
+ &::before {
+ content: "";
+ display: inline-block;
+ vertical-align: bottom;
+ width: 20px;
+ height: 20px;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: 20px;
+ margin-right: 5px;
+ }
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
+ color: $input-valid-border-color;
+ &::before {
+ mask-image: url('$(res)/img/feather-customised/check.svg');
+ background-color: $input-valid-border-color;
+ }
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
+ color: $input-invalid-border-color;
+ &::before {
+ mask-image: url('$(res)/img/feather-customised/x.svg');
+ background-color: $input-invalid-border-color;
+ }
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
+ display: none;
+}
diff --git a/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss b/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
index a9ebd54b31..d30803b1f0 100644
--- a/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
+++ b/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
@@ -48,6 +48,29 @@ limitations under the License.
margin-bottom: 1em;
}
+.mx_CreateSecretStorageDialog_titleWithIcon::before {
+ content: '';
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+ top: 5px;
+ background-color: $primary-fg-color;
+}
+
+.mx_CreateSecretStorageDialog_secureBackupTitle::before {
+ mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
+}
+
+.mx_CreateSecretStorageDialog_securePhraseTitle::before {
+ mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
+}
+
+.mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody {
+ text-align: center;
+}
+
.mx_CreateSecretStorageDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding-top: 20px;
@@ -59,6 +82,36 @@ limitations under the License.
display: block;
}
+.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
+ margin-bottom: 16px;
+ padding: 11px;
+}
+
+.mx_CreateSecretStorageDialog_optionTitle {
+ color: $dialog-title-fg-color;
+ font-weight: 600;
+ font-size: $font-18px;
+ padding-bottom: 10px;
+}
+
+.mx_CreateSecretStorageDialog_optionIcon {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+ top: 5px;
+ background-color: $primary-fg-color;
+}
+
+.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
+ mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
+}
+
+.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
+ mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
+}
+
.mx_CreateSecretStorageDialog_passPhraseContainer {
display: flex;
align-items: flex-start;
@@ -68,49 +121,47 @@ limitations under the License.
margin-top: 0px;
}
-.mx_CreateSecretStorageDialog_passPhraseHelp {
- flex: 1;
- height: 64px;
- margin-left: 20px;
- font-size: 80%;
-}
-
-.mx_CreateSecretStorageDialog_passPhraseHelp progress {
- width: 100%;
-}
-
.mx_CreateSecretStorageDialog_passPhraseMatch {
width: 200px;
margin-left: 20px;
}
-.mx_CreateSecretStorageDialog_recoveryKeyHeader {
- margin-bottom: 1em;
-}
-
.mx_CreateSecretStorageDialog_recoveryKeyContainer {
- display: flex;
+ width: 380px;
+ margin-left: auto;
+ margin-right: auto;
}
.mx_CreateSecretStorageDialog_recoveryKey {
- width: 262px;
+ font-weight: bold;
+ text-align: center;
padding: 20px;
color: $info-plinth-fg-color;
background-color: $info-plinth-bg-color;
- margin-right: 12px;
+ border-radius: 6px;
+ word-spacing: 1em;
+ margin-bottom: 20px;
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons {
- flex: 1;
display: flex;
+ justify-content: space-between;
align-items: center;
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
- margin-right: 10px;
-}
-
-.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
- flex: 1;
+ width: 160px;
+ padding-left: 0px;
+ padding-right: 0px;
white-space: nowrap;
}
+
+.mx_CreateSecretStorageDialog_continueSpinner {
+ margin-top: 33px;
+ text-align: right;
+}
+
+.mx_CreateSecretStorageDialog_continueSpinner img {
+ width: 20px;
+ height: 20px;
+}
diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss
index bd5c67c7ed..ae0927386a 100644
--- a/res/css/views/directory/_NetworkDropdown.scss
+++ b/res/css/views/directory/_NetworkDropdown.scss
@@ -145,13 +145,14 @@ limitations under the License.
&::after {
content: "";
position: absolute;
- width: 24px;
- height: 24px;
- right: -28px; // - (24 + 4)
+ width: 26px;
+ height: 26px;
+ right: -27.5px; // - (width: 26 + spacing to align with X above: 1.5)
+ top: -3px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
- mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+ mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
background-color: $primary-fg-color;
}
diff --git a/res/css/views/elements/_AddressSelector.scss b/res/css/views/elements/_AddressSelector.scss
index dd78fcc0f0..087504390c 100644
--- a/res/css/views/elements/_AddressSelector.scss
+++ b/res/css/views/elements/_AddressSelector.scss
@@ -23,6 +23,7 @@ limitations under the License.
border-radius: 3px;
border: solid 1px $accent-color;
cursor: pointer;
+ z-index: 1;
}
.mx_AddressSelector.mx_AddressSelector_empty {
diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss
index dd8511cc42..2a2508c17c 100644
--- a/res/css/views/elements/_Dropdown.scss
+++ b/res/css/views/elements/_Dropdown.scss
@@ -77,12 +77,18 @@ limitations under the License.
white-space: nowrap;
}
-.mx_Dropdown_option img {
+.mx_Dropdown_option img,
+.mx_Dropdown_option .mx_Dropdown_option_emoji {
margin: 5px;
width: 16px;
vertical-align: middle;
}
+.mx_Dropdown_option_emoji {
+ font-size: $font-16px;
+ line-height: $font-16px;
+}
+
input.mx_Dropdown_option,
input.mx_Dropdown_option:focus {
font-weight: normal;
diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
index cf5bc7ab41..f67da6477b 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@@ -191,5 +191,5 @@ limitations under the License.
}
.mx_Field .mx_CountryDropdown {
- width: 67px;
+ width: $font-78px;
}
diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 983ef074f2..0a4ed2a194 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -37,7 +37,7 @@ limitations under the License.
order: 2;
/* min-width hack needed for FF */
min-width: 0px;
- max-height: 90%;
+ height: 90%;
flex: 15 15 0;
display: flex;
align-items: center;
diff --git a/res/css/views/elements/_InlineSpinner.scss b/res/css/views/elements/_InlineSpinner.scss
index 612b6209c6..6b91e45923 100644
--- a/res/css/views/elements/_InlineSpinner.scss
+++ b/res/css/views/elements/_InlineSpinner.scss
@@ -18,7 +18,7 @@ limitations under the License.
display: inline;
}
-.mx_InlineSpinner img {
+.mx_InlineSpinner_spin img {
margin: 0px 6px;
vertical-align: -3px;
}
diff --git a/res/css/views/elements/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.scss
deleted file mode 100644
index db98d95709..0000000000
--- a/res/css/views/elements/_InteractiveTooltip.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_InteractiveTooltip_wrapper {
- position: fixed;
- z-index: 5000;
-}
-
-.mx_InteractiveTooltip {
- border-radius: 3px;
- background-color: $interactive-tooltip-bg-color;
- color: $interactive-tooltip-fg-color;
- position: absolute;
- font-size: $font-10px;
- font-weight: 600;
- padding: 6px;
- z-index: 5001;
-}
-
-.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
- top: 10px; // 8px chevron + 2px spacing
-}
-
-.mx_InteractiveTooltip_chevron_top {
- position: absolute;
- left: calc(50% - 8px);
- top: -8px;
- width: 0;
- height: 0;
- border-left: 8px solid transparent;
- border-bottom: 8px solid $interactive-tooltip-bg-color;
- border-right: 8px solid transparent;
-}
-
-// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
-// by Sebastiano Guerriero (@guerriero_se)
-@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
- .mx_InteractiveTooltip_chevron_top {
- height: 16px;
- width: 16px;
- background-color: inherit;
- border: none;
- clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
- transform: rotate(135deg);
- border-radius: 0 0 0 3px;
- top: calc(-8px / 1.414); // sqrt(2) because of rotation
- }
-}
-
-.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
- bottom: 10px; // 8px chevron + 2px spacing
-}
-
-.mx_InteractiveTooltip_chevron_bottom {
- position: absolute;
- left: calc(50% - 8px);
- bottom: -8px;
- width: 0;
- height: 0;
- border-left: 8px solid transparent;
- border-top: 8px solid $interactive-tooltip-bg-color;
- border-right: 8px solid transparent;
-}
-
-// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
-// by Sebastiano Guerriero (@guerriero_se)
-@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
- .mx_InteractiveTooltip_chevron_bottom {
- height: 16px;
- width: 16px;
- background-color: inherit;
- border: none;
- clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
- transform: rotate(-45deg);
- border-radius: 0 0 0 3px;
- bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
- }
-}
diff --git a/res/css/views/elements/_ProgressBar.scss b/res/css/views/elements/_ProgressBar.scss
index a3fee232d0..e49d85af04 100644
--- a/res/css/views/elements/_ProgressBar.scss
+++ b/res/css/views/elements/_ProgressBar.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,12 +14,26 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_ProgressBar {
- height: 5px;
- border: 1px solid $progressbar-color;
-}
+progress.mx_ProgressBar {
+ height: 4px;
+ width: 60px;
+ border-radius: 10px;
+ overflow: hidden;
+ appearance: none;
+ border: 0;
-.mx_ProgressBar_fill {
- height: 100%;
- background-color: $progressbar-color;
+ @mixin ProgressBarBorderRadius "10px";
+ @mixin ProgressBarColour $accent-color;
+ ::-webkit-progress-value {
+ transition: width 1s;
+ }
+ ::-moz-progress-bar {
+ transition: padding-bottom 1s;
+ padding-bottom: var(--value);
+ transform-origin: 0 0;
+ transform: rotate(-90deg) translateX(-15px);
+ padding-left: 15px;
+
+ height: 0;
+ }
}
diff --git a/src/utils/rem.js b/res/css/views/elements/_QRCode.scss
similarity index 85%
rename from src/utils/rem.js
rename to res/css/views/elements/_QRCode.scss
index 1f18c9de05..96d9114b54 100644
--- a/src/utils/rem.js
+++ b/res/css/views/elements/_QRCode.scss
@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-// converts a pixel value to rem.
-export default function(pixelVal) {
- return pixelVal / 15 + "rem";
+.mx_QRCode {
+ img {
+ border-radius: 8px;
+ }
}
diff --git a/res/css/views/elements/_ResizeHandle.scss b/res/css/views/elements/_ResizeHandle.scss
index 5544799a34..5189f80b30 100644
--- a/res/css/views/elements/_ResizeHandle.scss
+++ b/res/css/views/elements/_ResizeHandle.scss
@@ -34,7 +34,7 @@ limitations under the License.
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -10px 0 0;
- padding: 0 10px 0 0;
+ padding: 0 8px 0 0;
}
.mx_ResizeHandle > div {
diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
new file mode 100644
index 0000000000..58ba2813b4
--- /dev/null
+++ b/res/css/views/elements/_Slider.scss
@@ -0,0 +1,99 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_Slider {
+ position: relative;
+ margin: 0px;
+ flex-grow: 1;
+}
+
+.mx_Slider_dotContainer {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.mx_Slider_bar {
+ display: flex;
+ box-sizing: border-box;
+ position: absolute;
+ height: 1em;
+ width: 100%;
+ padding: 0 0.5em; // half the width of a dot.
+ align-items: center;
+}
+
+.mx_Slider_bar > hr {
+ width: 100%;
+ height: 0.4em;
+ background-color: $slider-background-color;
+ border: 0;
+}
+
+.mx_Slider_selection {
+ display: flex;
+ align-items: center;
+ width: calc(100% - 1em); // 2 * half the width of a dot
+ height: 1em;
+ position: absolute;
+ pointer-events: none;
+}
+
+.mx_Slider_selectionDot {
+ position: absolute;
+ width: 1.1em;
+ height: 1.1em;
+ background-color: $slider-selection-color;
+ border-radius: 50%;
+ box-shadow: 0 0 6px lightgrey;
+ z-index: 10;
+}
+
+.mx_Slider_selection > hr {
+ margin: 0;
+ border: 0.2em solid $slider-selection-color;
+}
+
+.mx_Slider_dot {
+ height: 1em;
+ width: 1em;
+ border-radius: 50%;
+ background-color: $slider-background-color;
+ z-index: 0;
+}
+
+.mx_Slider_dotActive {
+ background-color: $slider-selection-color;
+}
+
+.mx_Slider_dotValue {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: $slider-background-color;
+}
+
+// The following is a hack to center the labels without adding
+// any width to the slider's dots.
+.mx_Slider_labelContainer {
+ width: 1em;
+}
+
+.mx_Slider_label {
+ position: relative;
+ width: fit-content;
+ left: -50%;
+}
diff --git a/res/css/views/elements/_StyledCheckbox.scss b/res/css/views/elements/_StyledCheckbox.scss
new file mode 100644
index 0000000000..e2d61c033b
--- /dev/null
+++ b/res/css/views/elements/_StyledCheckbox.scss
@@ -0,0 +1,90 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+.mx_Checkbox {
+ $size: $font-16px;
+ $border-size: $font-1-5px;
+ $border-radius: $font-4px;
+
+ display: flex;
+ align-items: flex-start;
+
+ input[type=checkbox] {
+ appearance: none;
+ margin: 0;
+ padding: 0;
+
+ & + label {
+ display: flex;
+ align-items: center;
+
+ flex-grow: 1;
+ }
+
+ & + label > .mx_Checkbox_background {
+ display: inline-flex;
+ position: relative;
+
+ flex-shrink: 0;
+
+ height: $size;
+ width: $size;
+ size: 0.5rem;
+
+ border: $border-size solid rgba($muted-fg-color, 0.5);
+ box-sizing: border-box;
+ border-radius: $border-radius;
+
+ img {
+ display: none;
+
+ height: 100%;
+ width: 100%;
+ filter: invert(100%);
+ }
+ }
+
+ &:checked + label > .mx_Checkbox_background {
+ background: $accent-color;
+ border-color: $accent-color;
+
+ img {
+ display: block;
+ }
+ }
+
+ & + label > *:not(.mx_Checkbox_background) {
+ margin-left: 10px;
+ }
+
+ &:disabled + label {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ &:checked:disabled + label > .mx_Checkbox_background {
+ background-color: $accent-color;
+ border-color: $accent-color;
+ }
+
+ &.focus-visible {
+ & + label .mx_Checkbox_background {
+ @mixin unreal-focus;
+ }
+ }
+ }
+}
diff --git a/res/css/views/elements/_StyledRadioButton.scss b/res/css/views/elements/_StyledRadioButton.scss
new file mode 100644
index 0000000000..62fb5c5512
--- /dev/null
+++ b/res/css/views/elements/_StyledRadioButton.scss
@@ -0,0 +1,124 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+* This component expects the parent to specify a positive padding and
+* width
+*/
+
+.mx_RadioButton {
+ $radio-circle-color: $muted-fg-color;
+ $active-radio-circle-color: $accent-color;
+ position: relative;
+
+ display: flex;
+ align-items: baseline;
+ flex-grow: 1;
+
+ > .mx_RadioButton_content {
+ flex-grow: 1;
+
+ display: flex;
+ flex-direction: column;
+
+ margin-left: 8px;
+ margin-right: 8px;
+ }
+
+ .mx_RadioButton_spacer {
+ flex-shrink: 0;
+ flex-grow: 0;
+
+ height: $font-16px;
+ width: $font-16px;
+ }
+
+ > input[type=radio] {
+ // Remove the OS's representation
+ margin: 0;
+ padding: 0;
+ appearance: none;
+
+ + div {
+ flex-shrink: 0;
+ flex-grow: 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ box-sizing: border-box;
+ height: $font-16px;
+ width: $font-16px;
+ margin-left: 2px; // For the highlight on focus
+
+ border: $font-1-5px solid $radio-circle-color;
+ border-radius: $font-16px;
+
+ > div {
+ box-sizing: border-box;
+
+ height: $font-8px;
+ width: $font-8px;
+
+ border-radius: $font-8px;
+ }
+ }
+
+ &.focus-visible {
+ & + div {
+ @mixin unreal-focus;
+ }
+ }
+
+ &:checked {
+ & + div {
+ border-color: $active-radio-circle-color;
+
+ & > div {
+ background: $active-radio-circle-color;
+ }
+ }
+ }
+
+ &:disabled {
+ & + div,
+ & + div + span {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ & + div {
+ border-color: $radio-circle-color;
+ }
+ }
+
+ &:checked:disabled {
+ & + div > div {
+ background-color: $radio-circle-color;
+ }
+ }
+ }
+}
+
+.mx_RadioButton_outlined {
+ border: 1px solid $input-darker-bg-color;
+ border-radius: 8px;
+}
+
+.mx_RadioButton_checked {
+ border-color: $accent-color;
+}
diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss
index 7c65fbc90d..62669889ee 100644
--- a/res/css/views/elements/_ToggleSwitch.scss
+++ b/res/css/views/elements/_ToggleSwitch.scss
@@ -24,11 +24,6 @@ limitations under the License.
background-color: $togglesw-off-color;
opacity: 0.5;
-
- display: flex;
- flex-direction: row;
- flex: 0 0 auto;
- align-items: center;
}
.mx_ToggleSwitch_enabled {
@@ -38,16 +33,18 @@ limitations under the License.
.mx_ToggleSwitch.mx_ToggleSwitch_on {
background-color: $togglesw-on-color;
+
+ > .mx_ToggleSwitch_ball {
+ left: calc(100% - $font-20px);
+ }
}
.mx_ToggleSwitch_ball {
- transition: left 0.15s ease-out 0.1s;
+ position: relative;
width: $font-20px;
height: $font-20px;
border-radius: $font-20px;
background-color: $togglesw-ball-color;
-}
-
-.mx_ToggleSwitch_on {
- flex-direction: row-reverse;
+ transition: left 0.15s ease-out 0.1s;
+ left: 0;
}
diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index 73ac9b3558..d90c818f94 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -51,21 +51,27 @@ limitations under the License.
.mx_Tooltip {
display: none;
position: fixed;
- border: 1px solid $menu-border-color;
- border-radius: 4px;
+ border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
- background-color: $menu-bg-color;
- z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
+ z-index: 6000; // Higher than context menu so tooltips can be used everywhere
padding: 10px;
pointer-events: none;
line-height: $font-14px;
font-size: $font-12px;
- font-weight: 600;
- color: $primary-fg-color;
+ font-weight: 500;
max-width: 200px;
word-break: break-word;
margin-right: 50px;
+ background-color: $inverted-bg-color;
+ color: $accent-fg-color;
+ border: 0;
+ text-align: center;
+
+ .mx_Tooltip_chevron {
+ display: none;
+ }
+
&.mx_Tooltip_visible {
animation: mx_fadein 0.2s forwards;
}
@@ -75,18 +81,23 @@ limitations under the License.
}
}
-.mx_Tooltip_timeline {
- box-shadow: none;
- background-color: $tooltip-timeline-bg-color;
- color: $tooltip-timeline-fg-color;
- text-align: center;
- border: none;
- border-radius: 3px;
- font-size: $font-14px;
- line-height: 1.2;
- padding: 6px 8px;
+// These tooltips use an older style with a chevron
+.mx_Field_tooltip {
+ background-color: $menu-bg-color;
+ color: $primary-fg-color;
+ border: 1px solid $menu-border-color;
+ text-align: unset;
- .mx_Tooltip_chevron::after {
- border-right-color: $tooltip-timeline-bg-color;
+ .mx_Tooltip_chevron {
+ display: unset;
}
}
+
+.mx_Tooltip_title {
+ font-weight: 600;
+}
+
+.mx_Tooltip_sub {
+ opacity: 0.7;
+ margin-top: 4px;
+}
diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss
index 24561eeeb9..400e40e233 100644
--- a/res/css/views/emojipicker/_EmojiPicker.scss
+++ b/res/css/views/emojipicker/_EmojiPicker.scss
@@ -190,7 +190,7 @@ limitations under the License.
.mx_EmojiPicker_footer {
border-top: 1px solid $message-action-bar-border-color;
- height: 72px;
+ min-height: 72px;
display: flex;
align-items: center;
diff --git a/res/css/views/globals/_MatrixToolbar.scss b/res/css/views/globals/_MatrixToolbar.scss
deleted file mode 100644
index 5fdf572f99..0000000000
--- a/res/css/views/globals/_MatrixToolbar.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_MatrixToolbar {
- background-color: $accent-color;
- color: $accent-fg-color;
-
- display: flex;
- align-items: center;
-}
-
-.mx_MatrixToolbar_warning {
- margin-left: 16px;
- margin-right: 8px;
- margin-top: -2px;
-}
-
-.mx_MatrixToolbar_info {
- padding-left: 16px;
- padding-right: 8px;
- background-color: $info-bg-color;
-}
-
-.mx_MatrixToolbar_error {
- padding-left: 16px;
- padding-right: 8px;
- background-color: $warning-bg-color;
-}
-
-.mx_MatrixToolbar_content {
- flex: 1;
-}
-
-.mx_MatrixToolbar_link {
- color: $accent-fg-color !important;
- text-decoration: underline !important;
- cursor: pointer;
-}
-
-.mx_MatrixToolbar_clickable {
- cursor: pointer;
-}
-
-.mx_MatrixToolbar_close {
- cursor: pointer;
-}
-
-.mx_MatrixToolbar_close img {
- display: block;
- float: right;
- margin-right: 10px;
-}
-
-.mx_MatrixToolbar_action {
- margin-right: 16px;
-}
-
-.mx_MatrixToolbar_changelog {
- white-space: pre;
-}
diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 547b16e9ad..1c773c2f06 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -25,6 +25,7 @@ limitations under the License.
height: 100%;
left: 0;
top: 0;
+ border-radius: 4px;
}
.mx_MImageBody_thumbnail_container {
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index 9f3971ecf0..1254b496b5 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -24,7 +24,7 @@ limitations under the License.
line-height: $font-24px;
border-radius: 4px;
background: $message-action-bar-bg-color;
- top: -18px;
+ top: -26px;
right: 8px;
user-select: none;
// Ensure the action bar appears above over things, like the read marker.
@@ -41,7 +41,7 @@ limitations under the License.
width: calc(10px + 48px + 100% + 8px);
// safe area + action bar
height: calc(20px + 100%);
- top: -20px;
+ top: -12px;
left: -58px;
z-index: -1;
cursor: initial;
@@ -91,17 +91,17 @@ limitations under the License.
}
.mx_MessageActionBar_reactButton::after {
- mask-image: url('$(res)/img/react.svg');
+ mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
}
.mx_MessageActionBar_replyButton::after {
- mask-image: url('$(res)/img/reply.svg');
+ mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
}
.mx_MessageActionBar_editButton::after {
- mask-image: url('$(res)/img/edit.svg');
+ mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
}
.mx_MessageActionBar_optionsButton::after {
- mask-image: url('$(res)/img/icon_context.svg');
+ mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
diff --git a/res/css/views/messages/_MessageTimestamp.scss b/res/css/views/messages/_MessageTimestamp.scss
index f8d91cc083..85c910296a 100644
--- a/res/css/views/messages/_MessageTimestamp.scss
+++ b/res/css/views/messages/_MessageTimestamp.scss
@@ -17,4 +17,5 @@ limitations under the License.
.mx_MessageTimestamp {
color: $event-timestamp-color;
font-size: $font-10px;
+ font-variant-numeric: tabular-nums;
}
diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index fe5b081042..7158ffc027 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -16,7 +16,6 @@ limitations under the License.
.mx_ReactionsRowButton {
display: inline-flex;
- height: 20px;
line-height: $font-21px;
margin-right: 6px;
padding: 0 6px;
@@ -35,11 +34,6 @@ limitations under the License.
border-color: $reaction-row-button-selected-border-color;
}
- // ignore mouse events for all children, treat it as one entire hoverable entity
- * {
- pointer-events: none;
- }
-
.mx_ReactionsRowButton_content {
max-width: 100px;
overflow: hidden;
diff --git a/res/css/views/messages/_RedactedBody.scss b/res/css/views/messages/_RedactedBody.scss
new file mode 100644
index 0000000000..e4ab0c0835
--- /dev/null
+++ b/res/css/views/messages/_RedactedBody.scss
@@ -0,0 +1,36 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RedactedBody {
+ white-space: pre-wrap;
+ color: $muted-fg-color;
+ vertical-align: middle;
+
+ padding-left: 20px;
+ position: relative;
+
+ &::before {
+ height: 14px;
+ width: 14px;
+ background-color: $muted-fg-color;
+ mask-image: url('$(res)/img/feather-customised/trash.custom.svg');
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: contain;
+ content: '';
+ position: absolute;
+ top: 2px;
+ left: 0;
+ }
+}
diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
index 637d25d7a1..09c78ae5b4 100644
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@@ -15,28 +15,45 @@ limitations under the License.
*/
.mx_cryptoEvent {
-
display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content;
+ &.mx_cryptoEvent_icon::before,
&.mx_cryptoEvent_icon::after {
grid-column: 1;
grid-row: 1 / 3;
width: 16px;
height: 16px;
content: "";
- background-image: url("$(res)/img/e2e/normal.svg");
- background-repeat: no-repeat;
- background-size: 100%;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: contain;
+ mask-image: url('$(res)/img/e2e/normal.svg');
+ background-color: $composer-e2e-icon-color;
margin-top: 4px;
}
+ // white infill for the transparency
+ &.mx_cryptoEvent_icon::before {
+ background-color: #ffffff;
+ mask-image: url('$(res)/img/e2e/normal.svg');
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: 90%;
+ }
+
&.mx_cryptoEvent_icon_verified::after {
- background-image: url("$(res)/img/e2e/verified.svg");
+ mask-image: url("$(res)/img/e2e/verified.svg");
+ background-color: $accent-color;
}
&.mx_cryptoEvent_icon_warning::after {
- background-image: url("$(res)/img/e2e/warning.svg");
+ mask-image: url("$(res)/img/e2e/warning.svg");
+ background-color: $notice-primary-color;
}
.mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 26b81e94f3..6f86d1ad18 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -53,7 +53,7 @@ limitations under the License.
}
.mx_UserInfo_separator {
- border-bottom: 1px solid lightgray;
+ border-bottom: 1px solid rgba($primary-fg-color, .1);
}
.mx_UserInfo_memberDetailsContainer {
@@ -121,7 +121,7 @@ limitations under the License.
h3 {
text-transform: uppercase;
color: $notice-secondary-color;
- font-weight: bold;
+ font-weight: 600;
font-size: $font-12px;
margin: 4px 0;
}
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index d6fb055bc0..aae255f81a 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -49,7 +49,7 @@ $MiniAppTileHeight: 114px;
order: 2;
cursor: pointer;
padding: 0;
- margin: 5px auto 5px 0px;
+ margin: 5px auto 5px 0;
color: $accent-color;
font-size: $font-12px;
}
@@ -87,7 +87,7 @@ $MiniAppTileHeight: 114px;
margin: 0;
padding: 0;
border: 5px solid $widget-menu-bar-bg-color;
- border-radius: 4px;
+ border-radius: 8px;
display: flex;
flex-direction: column;
}
@@ -117,6 +117,7 @@ $MiniAppTileHeight: 114px;
.mx_AppTile_persistedWrapper div {
width: 100%;
height: 100%;
+ min-width: 300px;
}
.mx_AppTileMenuBar {
diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss
index a4aebdb708..f8e0a382b1 100644
--- a/res/css/views/rooms/_Autocomplete.scss
+++ b/res/css/views/rooms/_Autocomplete.scss
@@ -6,9 +6,10 @@
border: 1px solid $primary-hairline-color;
background: $primary-bg-color;
border-bottom: none;
- border-radius: 4px 4px 0 0;
+ border-radius: 8px 8px 0 0;
max-height: 50vh;
overflow: auto;
+ box-shadow: 0px -16px 32px $composer-shadow-color;
}
.mx_Autocomplete_ProviderSection {
diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss
index 584ea17433..a3473dedec 100644
--- a/res/css/views/rooms/_E2EIcon.scss
+++ b/res/css/views/rooms/_E2EIcon.scss
@@ -22,28 +22,58 @@ limitations under the License.
display: block;
}
-.mx_E2EIcon_warning::after,
-.mx_E2EIcon_normal::after,
-.mx_E2EIcon_verified::after {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background-repeat: no-repeat;
- background-size: contain;
+.mx_E2EIcon_warning,
+.mx_E2EIcon_normal,
+.mx_E2EIcon_verified {
+ &::before, &::after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: contain;
+ }
+}
+
+// white infill for the transparency
+.mx_E2EIcon::before {
+ background-color: #ffffff;
+ mask-image: url('$(res)/img/e2e/normal.svg');
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: 90%;
+}
+
+// transparent-looking border surrounding the shield for when overlain over avatars
+.mx_E2EIcon_bordered {
+ mask-image: url('$(res)/img/e2e/normal.svg');
+ background-color: $header-panel-bg-color;
+
+ // shrink the actual badge
+ &::after {
+ mask-size: 75%;
+ }
+ // shrink the infill of the badge
+ &::before {
+ mask-size: 65%;
+ }
}
.mx_E2EIcon_warning::after {
- background-image: url('$(res)/img/e2e/warning.svg');
+ mask-image: url('$(res)/img/e2e/warning.svg');
+ background-color: $notice-primary-color;
}
.mx_E2EIcon_normal::after {
- background-image: url('$(res)/img/e2e/normal.svg');
+ mask-image: url('$(res)/img/e2e/normal.svg');
+ background-color: $composer-e2e-icon-color;
}
.mx_E2EIcon_verified::after {
- background-image: url('$(res)/img/e2e/verified.svg');
+ mask-image: url('$(res)/img/e2e/verified.svg');
+ background-color: $accent-color;
}
diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index 8db71f297c..27a4e67089 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -26,8 +26,6 @@ limitations under the License.
position: absolute;
bottom: 2px;
right: 7px;
- height: 15px;
- width: 15px;
}
}
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 99377ee5be..eb0e1dd7b0 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+$left-gutter: 64px;
+
.mx_EventTile {
max-width: 100%;
clear: both;
@@ -37,7 +39,6 @@ limitations under the License.
}
.mx_EventTile_avatar {
- position: absolute;
top: 14px;
left: 8px;
cursor: pointer;
@@ -46,7 +47,7 @@ limitations under the License.
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
top: $font-8px;
- left: 65px;
+ left: $left-gutter;
}
.mx_EventTile_continuation {
@@ -68,15 +69,13 @@ limitations under the License.
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden;
cursor: pointer;
- padding-left: 65px; /* left gutter */
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
- line-height: $font-17px;
/* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap;
text-overflow: ellipsis;
- max-width: calc(100% - 65px);
+ max-width: calc(100% - $left-gutter);
}
.mx_EventTile .mx_SenderProfile .mx_Flair {
@@ -104,9 +103,7 @@ limitations under the License.
visibility: hidden;
white-space: nowrap;
left: 0px;
- width: 46px; /* 8 + 30 (avatar) + 8 */
text-align: center;
- position: absolute;
user-select: none;
}
@@ -116,17 +113,14 @@ limitations under the License.
.mx_EventTile_line, .mx_EventTile_reply {
position: relative;
- padding-left: 65px; /* left gutter */
- padding-top: 3px;
- padding-bottom: 3px;
+ padding-left: $left-gutter;
border-radius: 4px;
- line-height: $font-22px;
}
.mx_RoomView_timeline_rr_enabled,
// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
.mx_EventListSummary {
- .mx_EventTile_line, .mx_EventTile_reply {
+ .mx_EventTile_line {
/* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
margin-right: 110px;
}
@@ -151,10 +145,6 @@ limitations under the License.
margin-right: 10px;
}
-.mx_EventTile_info .mx_EventTile_line {
- padding-left: 83px;
-}
-
/* HACK to override line-height which is already marked important elsewhere */
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
font-size: 48px !important;
@@ -171,10 +161,15 @@ limitations under the License.
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+// The first set is to handle the 'group layout' (default) and the second for the IRC layout
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
-.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp {
+.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp {
visibility: visible;
}
@@ -189,7 +184,7 @@ limitations under the License.
* TODO: ultimately we probably want some transition on here.
*/
.mx_EventTile_selected > .mx_EventTile_line {
- border-left: $accent-color 5px solid;
+ border-left: $accent-color 4px solid;
padding-left: 60px;
background-color: $event-selected-color;
}
@@ -244,34 +239,6 @@ limitations under the License.
color: $event-notsent-color;
}
-.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
-.mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
- --lozenge-color: $event-redacted-fg-color;
- --lozenge-border-color: $event-redacted-border-color;
- display: block;
- height: 22px;
- width: 250px;
- border-radius: 11px;
- background:
- repeating-linear-gradient(
- -45deg,
- var(--lozenge-color),
- var(--lozenge-color) 3px,
- transparent 3px,
- transparent 6px
- );
- box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
-}
-
-.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
- opacity: 0.4;
-}
-
-div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
- --lozenge-color: $event-notsent-color;
- --lozenge-border-color: $event-notsent-color;
-}
-
.mx_EventTile_contextual {
opacity: 0.4;
}
@@ -363,29 +330,67 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_e2eIcon {
position: absolute;
top: 6px;
- left: 46px;
- width: 15px;
- height: 15px;
+ left: 44px;
+ width: 14px;
+ height: 14px;
display: block;
bottom: 0;
right: 0;
opacity: 0.2;
background-repeat: no-repeat;
background-size: contain;
+
+ &::before, &::after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: contain;
+ }
+
+ &::before {
+ background-color: #ffffff;
+ mask-image: url('$(res)/img/e2e/normal.svg');
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: 90%;
+ }
}
.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
- background-image: url('$(res)/img/e2e/warning.svg');
+ &::after {
+ mask-image: url('$(res)/img/e2e/warning.svg');
+ background-color: $notice-primary-color;
+ }
opacity: 1;
}
.mx_EventTile_e2eIcon_unknown {
- background-image: url('$(res)/img/e2e/warning.svg');
+ &::after {
+ mask-image: url('$(res)/img/e2e/warning.svg');
+ background-color: $notice-primary-color;
+ }
opacity: 1;
}
.mx_EventTile_e2eIcon_unencrypted {
- background-image: url('$(res)/img/e2e/warning.svg');
+ &::after {
+ mask-image: url('$(res)/img/e2e/warning.svg');
+ background-color: $notice-primary-color;
+ }
+ opacity: 1;
+}
+
+.mx_EventTile_e2eIcon_unauthenticated {
+ &::after {
+ mask-image: url('$(res)/img/e2e/normal.svg');
+ background-color: $composer-e2e-icon-color;
+ }
opacity: 1;
}
@@ -427,10 +432,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
margin-bottom: 0px;
}
-.mx_EventTile_12hr .mx_EventTile_e2eIcon {
- padding-left: 5px;
-}
-
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
@@ -438,15 +439,15 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
- border-left: $e2e-verified-color 5px solid;
+ border-left: $e2e-verified-color 4px solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
- border-left: $e2e-unverified-color 5px solid;
+ border-left: $e2e-unverified-color 4px solid;
}
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
- border-left: $e2e-unknown-color 5px solid;
+ border-left: $e2e-unknown-color 4px solid;
}
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
@@ -539,7 +540,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
right: 6px;
width: 19px;
height: 19px;
- background-image: url($copy-button-url);
+ mask-image: url($copy-button-url);
+ background-color: $message-action-bar-fg-color;
}
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
@@ -567,7 +569,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_content .markdown-body a {
color: $accent-color-alt;
- text-decoration: underline;
}
.mx_EventTile_content .markdown-body .hljs {
@@ -588,84 +589,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
/* end of overrides */
-.mx_MatrixChat_useCompactLayout {
- .mx_EventTile {
- padding-top: 4px;
- }
-
- .mx_EventTile.mx_EventTile_info {
- // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
- padding-top: 0px;
- font-size: $font-13px;
- .mx_EventTile_line, .mx_EventTile_reply {
- line-height: $font-20px;
- }
- .mx_EventTile_avatar {
- top: 4px;
- }
- }
-
- .mx_EventTile .mx_SenderProfile {
- font-size: $font-13px;
- }
-
- .mx_EventTile.mx_EventTile_emote {
- // add a bit more space for emotes so that avatars don't collide
- padding-top: 8px;
- .mx_EventTile_avatar {
- top: 2px;
- }
- .mx_EventTile_line, .mx_EventTile_reply {
- padding-top: 0px;
- padding-bottom: 1px;
- }
- }
-
- .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
- padding-top: 0;
- .mx_EventTile_line, .mx_EventTile_reply {
- padding-top: 0px;
- padding-bottom: 0px;
- }
- }
-
- .mx_EventTile_line, .mx_EventTile_reply {
- padding-top: 0px;
- padding-bottom: 0px;
- }
-
- .mx_EventTile_avatar {
- top: 2px;
- }
-
- .mx_EventTile_e2eIcon {
- top: 3px;
- }
-
- .mx_EventTile_readAvatars {
- top: 27px;
- }
-
- .mx_EventTile_continuation .mx_EventTile_readAvatars,
- .mx_EventTile_emote .mx_EventTile_readAvatars {
- top: 5px;
- }
-
- .mx_EventTile_info .mx_EventTile_readAvatars {
- top: 4px;
- }
-
- .mx_RoomView_MessageList h2 {
- margin-top: 6px;
- }
-
- .mx_EventTile_content .markdown-body {
- p, ul, ol, dl, blockquote, pre, table {
- margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
- }
- }
-}
-
.mx_EventTile_tileError {
color: red;
text-align: center;
@@ -685,3 +608,14 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
margin-left: 1em;
}
}
+
+@media only screen and (max-width: 480px) {
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding-left: 0;
+ margin-right: 0;
+ }
+ .mx_EventTile_content {
+ margin-top: 10px;
+ margin-right: 0;
+ }
+}
diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
new file mode 100644
index 0000000000..2b447be44a
--- /dev/null
+++ b/res/css/views/rooms/_GroupLayout.scss
@@ -0,0 +1,130 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$left-gutter: 64px;
+
+.mx_GroupLayout {
+ .mx_EventTile {
+ > .mx_SenderProfile {
+ line-height: $font-17px;
+ padding-left: $left-gutter;
+ }
+
+ > .mx_EventTile_line {
+ padding-left: $left-gutter;
+ }
+
+ > .mx_EventTile_avatar {
+ position: absolute;
+ }
+
+ .mx_MessageTimestamp {
+ position: absolute;
+ width: 46px; /* 8 + 30 (avatar) + 8 */
+ }
+
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding-top: 3px;
+ padding-bottom: 3px;
+ line-height: $font-22px;
+ }
+ }
+
+ .mx_EventTile_info .mx_EventTile_line {
+ padding-left: calc($left-gutter + 18px);
+ }
+}
+
+/* Compact layout overrides */
+
+.mx_MatrixChat_useCompactLayout {
+ .mx_EventTile {
+ padding-top: 4px;
+
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ &.mx_EventTile_info {
+ // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
+ padding-top: 0px;
+ font-size: $font-13px;
+ .mx_EventTile_line, .mx_EventTile_reply {
+ line-height: $font-20px;
+ }
+ .mx_EventTile_avatar {
+ top: 4px;
+ }
+ }
+
+ .mx_SenderProfile {
+ font-size: $font-13px;
+ }
+
+ &.mx_EventTile_emote {
+ // add a bit more space for emotes so that avatars don't collide
+ padding-top: 8px;
+ .mx_EventTile_avatar {
+ top: 2px;
+ }
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding-top: 0px;
+ padding-bottom: 1px;
+ }
+ }
+
+ &.mx_EventTile_emote.mx_EventTile_continuation {
+ padding-top: 0;
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding-top: 0px;
+ padding-bottom: 0px;
+ }
+ }
+
+ .mx_EventTile_avatar {
+ top: 2px;
+ }
+
+ .mx_EventTile_e2eIcon {
+ top: 3px;
+ }
+
+ .mx_EventTile_readAvatars {
+ top: 27px;
+ }
+
+ &.mx_EventTile_continuation .mx_EventTile_readAvatars,
+ &.mx_EventTile_emote .mx_EventTile_readAvatars {
+ top: 5px;
+ }
+
+ &.mx_EventTile_info .mx_EventTile_readAvatars {
+ top: 4px;
+ }
+
+ .mx_EventTile_content .markdown-body {
+ p, ul, ol, dl, blockquote, pre, table {
+ margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
+ }
+ }
+ }
+
+ .mx_RoomView_MessageList h2 {
+ margin-top: 6px;
+ }
+}
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
new file mode 100644
index 0000000000..958d718b11
--- /dev/null
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -0,0 +1,225 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$icon-width: 14px;
+$timestamp-width: 45px;
+$right-padding: 5px;
+$irc-line-height: $font-18px;
+
+.mx_IRCLayout {
+ --name-width: 70px;
+
+ line-height: $irc-line-height !important;
+
+ .mx_EventTile {
+
+ // timestamps are links which shouldn't be underlined
+ > a {
+ text-decoration: none;
+ }
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding-top: 0;
+
+ > * {
+ margin-right: $right-padding;
+ }
+
+ > .mx_EventTile_msgOption {
+ order: 5;
+ flex-shrink: 0;
+
+ .mx_EventTile_readAvatars {
+ top: 0.2rem; // ($irc-line-height - avatar height) / 2
+ }
+ }
+
+ > .mx_SenderProfile {
+ order: 2;
+ flex-shrink: 0;
+ width: var(--name-width);
+ text-overflow: ellipsis;
+ text-align: left;
+ display: flex;
+ align-items: center;
+ overflow: visible;
+ justify-content: flex-end;
+ }
+
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ order: 3;
+ flex-grow: 1;
+ flex-shrink: 1;
+ min-width: 0;
+ }
+
+ > .mx_EventTile_avatar {
+ order: 1;
+ position: relative;
+ top: 0;
+ left: 0;
+ flex-shrink: 0;
+ height: $irc-line-height;
+ display: flex;
+ align-items: center;
+
+ // Need to use important to override the js provided height and width values.
+ > .mx_BaseAvatar, > .mx_BaseAvatar > * {
+ height: $font-14px !important;
+ width: $font-14px !important;
+ font-size: $font-10px !important;
+ line-height: $font-15px !important;
+ }
+ }
+
+ .mx_MessageTimestamp {
+ font-size: $font-10px;
+ width: $timestamp-width;
+ text-align: right;
+ }
+
+ > .mx_EventTile_e2eIcon {
+ position: absolute;
+ right: unset;
+ left: unset;
+ top: 0;
+
+ padding: 0;
+
+ flex-shrink: 0;
+ flex-grow: 0;
+
+ height: $font-18px;
+
+ background-position: center;
+ }
+
+ .mx_EventTile_line {
+ .mx_EventTile_e2eIcon,
+ .mx_TextualEvent,
+ .mx_MTextBody,
+ .mx_ReplyThread_wrapper_empty {
+ display: inline-block;
+ }
+ }
+
+ .mx_EventTile_reply {
+ order: 4;
+ }
+
+ .mx_EditMessageComposer_buttons {
+ position: relative;
+ }
+ }
+
+ .mx_EventTile_emote {
+ > .mx_EventTile_avatar {
+ margin-left: calc(var(--name-width) + $icon-width + $right-padding);
+ }
+ }
+
+ blockquote {
+ margin: 0;
+ }
+
+ .mx_EventListSummary {
+ > .mx_EventTile_line {
+ padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
+ }
+
+ .mx_EventListSummary_avatars {
+ padding: 0;
+ margin: 0 9px 0 0;
+ }
+ }
+
+ .mx_EventTile.mx_EventTile_info {
+ .mx_EventTile_avatar {
+ left: calc(var(--name-width) + 10px + $icon-width);
+ top: 0;
+ }
+
+ .mx_EventTile_line {
+ left: calc(var(--name-width) + 10px + $icon-width);
+ }
+
+ .mx_TextualEvent {
+ line-height: $irc-line-height;
+ }
+ }
+
+ // Suppress highlight thing from the normal Layout.
+ .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
+ .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
+ .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
+ padding-left: 0;
+ border-left: 0;
+ }
+
+ .mx_SenderProfile_hover {
+ background-color: $primary-bg-color;
+ overflow: hidden;
+
+ > span {
+ display: flex;
+
+ > .mx_SenderProfile_name,
+ > .mx_SenderProfile_aux {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ min-width: var(--name-width);
+ }
+ }
+ }
+
+ .mx_SenderProfile:hover {
+ justify-content: flex-start;
+ }
+
+ .mx_SenderProfile_hover:hover {
+ overflow: visible;
+ width: max(auto, 100%);
+ z-index: 10;
+ }
+
+ .mx_ReplyThread {
+ margin: 0;
+ .mx_SenderProfile {
+ width: unset;
+ max-width: var(--name-width);
+ }
+ }
+
+ .mx_ProfileResizer {
+ position: absolute;
+ height: 100%;
+ width: 15px;
+ left: calc(80px + var(--name-width));
+ cursor: col-resize;
+ z-index: 100;
+ }
+
+ // Need to use important to override the js provided height and width values.
+ .mx_Flair > img {
+ height: $font-14px !important;
+ width: $font-14px !important;
+ }
+}
diff --git a/res/css/views/rooms/_InviteOnlyIcon.scss b/res/css/views/rooms/_InviteOnlyIcon.scss
deleted file mode 100644
index b71fd6348d..0000000000
--- a/res/css/views/rooms/_InviteOnlyIcon.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-@define-mixin mx_InviteOnlyIcon {
- width: 12px;
- height: 12px;
- position: relative;
- display: block !important;
-}
-
-@define-mixin mx_InviteOnlyIcon_padlock {
- background-color: $roomtile-name-color;
- mask-image: url("$(res)/img/feather-customised/lock-solid.svg");
- mask-position: center;
- mask-repeat: no-repeat;
- mask-size: contain;
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.mx_InviteOnlyIcon_large {
- @mixin mx_InviteOnlyIcon;
- margin: 0 4px;
-
- &::before {
- @mixin mx_InviteOnlyIcon_padlock;
- width: 12px;
- height: 12px;
- }
-}
-
-.mx_InviteOnlyIcon_small {
- @mixin mx_InviteOnlyIcon;
- left: -2px;
-
- &::before {
- @mixin mx_InviteOnlyIcon_padlock;
- width: 10px;
- height: 10px;
- }
-}
diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss
index 63cf574596..6cb3b6bce9 100644
--- a/res/css/views/rooms/_JumpToBottomButton.scss
+++ b/res/css/views/rooms/_JumpToBottomButton.scss
@@ -41,6 +41,11 @@ limitations under the License.
// with text-align in parent
display: inline-block;
padding: 0 4px;
+ color: $accent-fg-color;
+ background-color: $muted-fg-color;
+}
+
+.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
color: $secondary-accent-color;
background-color: $warning-color;
}
@@ -51,7 +56,7 @@ limitations under the License.
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
- border: 1.3px solid $roomtile-name-color;
+ border: 1.3px solid $muted-fg-color;
cursor: pointer;
}
@@ -62,8 +67,8 @@ limitations under the License.
bottom: 0;
left: 0;
right: 0;
- mask: url('$(res)/img/icon-jump-to-bottom.svg');
+ mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
mask-repeat: no-repeat;
- mask-position: 9px 14px;
- background: $roomtile-name-color;
+ mask-size: contain;
+ background: $muted-fg-color;
}
diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss
deleted file mode 100644
index 71b05a93fc..0000000000
--- a/res/css/views/rooms/_MemberDeviceInfo.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_MemberDeviceInfo {
- display: flex;
- padding-bottom: 10px;
- align-items: flex-start;
-}
-
-.mx_MemberDeviceInfo_icon {
- margin-top: 4px;
- width: 12px;
- height: 12px;
- mask-repeat: no-repeat;
- mask-size: 100%;
-}
-.mx_MemberDeviceInfo_icon_blacklisted {
- mask-image: url('$(res)/img/e2e/blacklisted.svg');
- background-color: $warning-color;
-}
-.mx_MemberDeviceInfo_icon_verified {
- mask-image: url('$(res)/img/e2e/verified.svg');
- background-color: $accent-color;
-}
-.mx_MemberDeviceInfo_icon_unverified {
- mask-image: url('$(res)/img/e2e/warning.svg');
- background-color: $warning-color;
-}
-
-.mx_MemberDeviceInfo > .mx_DeviceVerifyButtons {
- display: flex;
- flex-direction: column;
- flex: 0 1 auto;
- align-items: stretch;
-}
-
-.mx_MemberDeviceInfo_textButton {
- @mixin mx_DialogButton_small;
- margin: 2px;
- flex: 1;
-}
-
-.mx_MemberDeviceInfo_textButton:hover {
- @mixin mx_DialogButton_hover;
-}
-
-.mx_MemberDeviceInfo_deviceId {
- word-break: break-word;
- font-size: $font-13px;
-}
-
-.mx_MemberDeviceInfo_deviceInfo {
- margin: 0 5px 5px 8px;
- flex: 1;
-}
-
-/* "Unblacklist" is too long for a regular button: make it wider and
- reduce the padding. */
-.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
-.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
- padding-left: 1em;
- padding-right: 1em;
-}
-
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
- float: right;
- padding-left: 1em;
-}
-
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
- color: $e2e-verified-color;
-}
-
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
- color: $e2e-unverified-color;
-}
-
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
- color: $e2e-warning-color;
-}
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index 99dc2338d4..90667d41b4 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -26,6 +26,10 @@ limitations under the License.
flex: 1 0 auto;
}
+ .mx_SearchBox {
+ margin-bottom: 5px;
+ }
+
h2 {
text-transform: uppercase;
color: $h3-color;
@@ -59,32 +63,27 @@ limitations under the License.
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
flex: 1 1 0;
+
+ // stricter rule to override the one in _common.scss
+ &[type="text"] {
+ font-size: $font-12px;
+ }
}
-
-
.mx_MemberList_wrapper {
padding: 10px;
}
-
-.mx_MemberList_invite,
-.mx_RightPanel_invite {
+.mx_MemberList_invite {
flex: 0 0 auto;
position: relative;
background-color: $button-bg-color;
border-radius: 4px;
- padding: 8px;
- margin: 9px;
+ margin: 5px 9px 9px;
display: flex;
justify-content: center;
color: $button-fg-color;
font-weight: 600;
-
- .mx_RightPanel_icon {
- padding-right: 5px;
- padding-top: 2px;
- }
}
.mx_MemberList_invite.mx_AccessibleButton_disabled {
@@ -93,8 +92,17 @@ limitations under the License.
}
.mx_MemberList_invite span {
- background-image: url('$(res)/img/feather-customised/user-add.svg');
+ background-image: url('$(res)/img/element-icons/room/invite.svg');
background-repeat: no-repeat;
background-position: center left;
- padding-left: 25px;
+ background-size: 20px;
+ padding: 8px 0 8px 25px;
+}
+
+.mx_MemberList_inviteCommunity span {
+ background-image: url('$(res)/img/icon-invite-people.svg');
+}
+
+.mx_MemberList_addRoomToCommunity span {
+ background-image: url('$(res)/img/icons-room-add.svg');
}
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 7b223be3a4..a403a8dc4c 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -20,7 +20,8 @@ limitations under the License.
margin: auto;
border-top: 1px solid $primary-hairline-color;
position: relative;
- padding-left: 84px;
+ padding-left: 82px;
+ padding-right: 6px;
}
.mx_MessageComposer_replaced_wrapper {
@@ -60,7 +61,7 @@ limitations under the License.
.mx_MessageComposer .mx_MessageComposer_avatar {
position: absolute;
- left: 27px;
+ left: 26px;
}
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
@@ -76,8 +77,8 @@ limitations under the License.
left: 60px;
margin-right: 0; // Counteract the E2EIcon class
margin-left: 3px; // Counteract the E2EIcon class
- width: 15px;
- height: 15px;
+ width: 12px;
+ height: 12px;
}
.mx_MessageComposer_noperm_error {
@@ -178,44 +179,72 @@ limitations under the License.
color: $accent-color;
}
+.mx_MessageComposer_button_highlight {
+ background: rgba($accent-color, 0.25);
+ // make the icon the accent color too
+ &::before {
+ background-color: $accent-color !important;
+ }
+}
+
.mx_MessageComposer_button {
position: relative;
- margin-right: 12px;
+ margin-right: 6px;
cursor: pointer;
- height: 20px;
- width: 20px;
+ height: 26px;
+ width: 26px;
+ border-radius: 100%;
&::before {
content: '';
position: absolute;
+ top: 3px;
+ left: 3px;
height: 20px;
width: 20px;
- background-color: $composer-button-color;
+ background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
+
+ &:hover {
+ background: rgba($accent-color, 0.1);
+
+ &::before {
+ background-color: $accent-color;
+ }
+ }
+
+ &.mx_MessageComposer_hangup::before {
+ background-color: $warning-color;
+ }
}
+
.mx_MessageComposer_upload::before {
- mask-image: url('$(res)/img/feather-customised/paperclip.svg');
+ mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
}
.mx_MessageComposer_hangup::before {
- mask-image: url('$(res)/img/hangup.svg');
+ mask-image: url('$(res)/img/element-icons/call/hangup.svg');
}
.mx_MessageComposer_voicecall::before {
- mask-image: url('$(res)/img/feather-customised/phone.svg');
+ mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
.mx_MessageComposer_videocall::before {
- mask-image: url('$(res)/img/feather-customised/video.svg');
+ mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+}
+
+.mx_MessageComposer_emoji::before {
+ mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
}
.mx_MessageComposer_stickers::before {
- mask-image: url('$(res)/img/feather-customised/face.svg');
+ mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
}
.mx_MessageComposer_formatting {
@@ -279,7 +308,7 @@ limitations under the License.
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
- background-color: $composer-button-color;
+ background-color: $icon-button-color;
&.mx_MessageComposer_markdownDisabled {
opacity: 0.2;
diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss
index 27ee7b9795..d97c49630a 100644
--- a/res/css/views/rooms/_MessageComposerFormatBar.scss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.scss
@@ -75,23 +75,23 @@ limitations under the License.
}
.mx_MessageComposerFormatBar_buttonIconBold::after {
- mask-image: url('$(res)/img/format/bold.svg');
+ mask-image: url('$(res)/img/element-icons/room/format-bar/bold.svg');
}
.mx_MessageComposerFormatBar_buttonIconItalic::after {
- mask-image: url('$(res)/img/format/italics.svg');
+ mask-image: url('$(res)/img/element-icons/room/format-bar/italic.svg');
}
.mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
- mask-image: url('$(res)/img/format/strikethrough.svg');
+ mask-image: url('$(res)/img/element-icons/room/format-bar/strikethrough.svg');
}
.mx_MessageComposerFormatBar_buttonIconQuote::after {
- mask-image: url('$(res)/img/format/quote.svg');
+ mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg');
}
.mx_MessageComposerFormatBar_buttonIconCode::after {
- mask-image: url('$(res)/img/format/code.svg');
+ mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
}
}
diff --git a/res/css/views/rooms/_NotificationBadge.scss b/res/css/views/rooms/_NotificationBadge.scss
new file mode 100644
index 0000000000..64b2623238
--- /dev/null
+++ b/res/css/views/rooms/_NotificationBadge.scss
@@ -0,0 +1,72 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_NotificationBadge {
+ &:not(.mx_NotificationBadge_visible) {
+ display: none;
+ }
+
+ // Badges are structured a bit weirdly to work around issues with non-monospace
+ // font styles. The badge pill is actually a background div and the count floats
+ // within that. For example:
+ //
+ // ( 99+ ) <-- Rounded pill is a _bg class.
+ // ^- The count is an element floating within that.
+
+ &.mx_NotificationBadge_visible {
+ background-color: $roomtile-default-badge-bg-color;
+
+ // Create a flexbox to order the count a bit easier
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &.mx_NotificationBadge_highlighted {
+ // TODO: Use a more specific variable
+ background-color: $warning-color;
+ }
+
+ // These are the 3 background types
+
+ &.mx_NotificationBadge_dot {
+ background-color: $primary-fg-color; // increased visibility
+
+ width: 6px;
+ height: 6px;
+ border-radius: 6px;
+ }
+
+ &.mx_NotificationBadge_2char {
+ width: $font-16px;
+ height: $font-16px;
+ border-radius: $font-16px;
+ }
+
+ &.mx_NotificationBadge_3char {
+ width: $font-26px;
+ height: $font-16px;
+ border-radius: $font-16px;
+ }
+
+ // The following is the floating badge
+
+ .mx_NotificationBadge_count {
+ font-size: $font-10px;
+ line-height: $font-14px;
+ color: #fff; // TODO: Variable
+ }
+ }
+}
diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss
index 4dc4cb2c40..10f8e21e43 100644
--- a/res/css/views/rooms/_ReplyPreview.scss
+++ b/res/css/views/rooms/_ReplyPreview.scss
@@ -15,16 +15,13 @@ limitations under the License.
*/
.mx_ReplyPreview {
- position: absolute;
- bottom: 0;
- z-index: 1000;
- width: 100%;
border: 1px solid $primary-hairline-color;
background: $primary-bg-color;
border-bottom: none;
- border-radius: 4px 4px 0 0;
+ border-radius: 8px 8px 0 0;
max-height: 50vh;
overflow: auto;
+ box-shadow: 0px -16px 32px $composer-shadow-color;
}
.mx_ReplyPreview_section {
diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss
index 3858d836e6..6512797401 100644
--- a/res/css/views/rooms/_RoomBreadcrumbs.scss
+++ b/res/css/views/rooms/_RoomBreadcrumbs.scss
@@ -1,5 +1,5 @@
/*
-Copyright 2019 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,98 +15,42 @@ limitations under the License.
*/
.mx_RoomBreadcrumbs {
- position: relative;
- height: 42px;
- padding: 8px;
- padding-bottom: 0;
+ width: 100%;
+
+ // Create a flexbox for the crumbs
display: flex;
flex-direction: row;
-
- // repeating circles as empty placeholders
- background:
- radial-gradient(
- circle at center,
- $breadcrumb-placeholder-bg-color,
- $breadcrumb-placeholder-bg-color 15px,
- transparent 16px
- );
- background-size: 36px;
- background-position: 6px -1px;
- background-repeat: repeat-x;
-
-
- // Autohide the scrollbar
- overflow-x: hidden;
- &:hover {
- overflow-x: visible;
- }
-
- .mx_AutoHideScrollbar {
- display: flex;
- flex-direction: row;
- height: 100%;
- }
+ align-items: flex-start;
.mx_RoomBreadcrumbs_crumb {
- margin-left: 4px;
- height: 32px;
- display: inline-block;
- transition: transform 0.3s, width 0.3s;
- position: relative;
-
- .mx_RoomTile_badge {
- position: absolute;
- top: -3px;
- right: -4px;
- }
-
- .mx_RoomBreadcrumbs_dmIndicator {
- position: absolute;
- bottom: 0;
- right: -4px;
- }
- }
-
- .mx_RoomBreadcrumbs_animate {
- margin-left: 0;
+ margin-right: 8px;
width: 32px;
- transform: scale(1);
}
- .mx_RoomBreadcrumbs_preAnimate {
- width: 0;
- transform: scale(0);
+ // These classes come from the CSSTransition component. There's many more classes we
+ // could care about, but this is all we worried about for now. The animation works by
+ // first triggering the enter state with the newest breadcrumb off screen (-40px) then
+ // sliding it into view.
+ &.mx_RoomBreadcrumbs-enter {
+ margin-left: -40px; // 32px for the avatar, 8px for the margin
+ }
+ &.mx_RoomBreadcrumbs-enter-active {
+ margin-left: 0;
+
+ // Timing function is as-requested by design.
+ // NOTE: The transition time MUST match the value passed to CSSTransition!
+ transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
}
- .mx_RoomBreadcrumbs_left {
- opacity: 0.5;
- }
-
- // Note: we have to manually control the gradient and stuff, but the IndicatorScrollbar
- // will deal with left/right positioning for us. Normally we'd use position:sticky on
- // a few key elements, however that doesn't work in horizontal scrolling scenarios.
-
- .mx_IndicatorScrollbar_leftOverflowIndicator,
- .mx_IndicatorScrollbar_rightOverflowIndicator {
- display: none;
- }
-
- .mx_IndicatorScrollbar_leftOverflowIndicator {
- background: linear-gradient(to left, $panel-gradient);
- }
-
- .mx_IndicatorScrollbar_rightOverflowIndicator {
- background: linear-gradient(to right, $panel-gradient);
- }
-
- &.mx_IndicatorScrollbar_leftOverflow .mx_IndicatorScrollbar_leftOverflowIndicator,
- &.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 15px;
- display: block;
- pointer-events: none;
- z-index: 100;
+ .mx_RoomBreadcrumbs_placeholder {
+ font-weight: 600;
+ font-size: $font-14px;
+ line-height: 32px; // specifically to match the height this is not scaled
+ height: 32px;
}
}
+
+.mx_RoomBreadcrumbs_Tooltip {
+ margin-left: -42px;
+ margin-top: -42px;
+}
diff --git a/res/css/views/rooms/_RoomDropTarget.scss b/res/css/views/rooms/_RoomDropTarget.scss
deleted file mode 100644
index 2e8145c2c9..0000000000
--- a/res/css/views/rooms/_RoomDropTarget.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_RoomDropTarget_container {
- background-color: $secondary-accent-color;
- padding-left: 18px;
- padding-right: 18px;
- padding-top: 8px;
- padding-bottom: 7px;
-}
-
-.collapsed .mx_RoomDropTarget_container {
- padding-right: 10px;
- padding-left: 10px;
-}
-
-.mx_RoomDropTarget {
- font-size: $font-13px;
- padding-top: 5px;
- padding-bottom: 5px;
- border: 1px dashed $accent-color;
- color: $primary-fg-color;
- background-color: $droptarget-bg-color;
- border-radius: 4px;
-}
-
-
-.mx_RoomDropTarget_label {
- position: relative;
- margin-top: 3px;
- line-height: $font-21px;
- z-index: 1;
- text-align: center;
-}
-
-.collapsed .mx_RoomDropTarget_avatar {
- float: none;
-}
-
-.collapsed .mx_RoomDropTarget_label {
- display: none;
-}
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 80f6c40f39..a880a7bee2 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -15,26 +15,34 @@ limitations under the License.
*/
.mx_RoomHeader {
- flex: 0 0 52px;
+ flex: 0 0 50px;
border-bottom: 1px solid $primary-hairline-color;
+ background-color: $roomheader-bg-color;
- .mx_E2EIcon {
- margin: 0;
- position: absolute;
- bottom: -2px;
- right: -6px;
- height: 15px;
- width: 15px;
+ .mx_RoomHeader_e2eIcon {
+ height: 12px;
+ width: 12px;
+
+ .mx_E2EIcon {
+ margin: 0;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ }
}
}
.mx_RoomHeader_wrapper {
margin: auto;
- height: 52px;
+ height: 50px;
display: flex;
align-items: center;
min-width: 0;
- padding: 0 10px 0 19px;
+ padding: 0 10px 0 18px;
+
+ .mx_InviteOnlyIcon_large {
+ margin: 0;
+ }
}
.mx_RoomHeader_spinner {
@@ -67,7 +75,6 @@ limitations under the License.
.mx_RoomHeader_buttons {
display: flex;
background-color: $primary-bg-color;
- padding-right: 5px;
}
.mx_RoomHeader_info {
@@ -173,7 +180,7 @@ limitations under the License.
.mx_RoomHeader_avatar {
flex: 0;
- margin: 0 7px;
+ margin: 0 6px 0 7px;
position: relative;
}
@@ -201,41 +208,53 @@ limitations under the License.
.mx_RoomHeader_button {
position: relative;
- margin-left: 10px;
+ margin-left: 1px;
+ margin-right: 1px;
cursor: pointer;
- height: 20px;
- width: 20px;
+ height: 32px;
+ width: 32px;
+ border-radius: 100%;
&::before {
content: '';
position: absolute;
- height: 20px;
- width: 20px;
- background-color: $roomheader-button-color;
+ top: 4px; // center with parent of 32px
+ left: 4px; // center with parent of 32px
+ height: 24px;
+ width: 24px;
+ background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
+
+ &:hover {
+ background: rgba($accent-color, 0.1);
+
+ &::before {
+ background-color: $accent-color;
+ }
+ }
}
.mx_RoomHeader_settingsButton::before {
- mask-image: url('$(res)/img/feather-customised/settings.svg');
+ mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_RoomHeader_forgetButton::before {
- mask-image: url('$(res)/img/leave.svg');
+ mask-image: url('$(res)/img/element-icons/leave.svg');
width: 26px;
}
.mx_RoomHeader_searchButton::before {
- mask-image: url('$(res)/img/feather-customised/search.svg');
+ mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
}
.mx_RoomHeader_shareButton::before {
- mask-image: url('$(res)/img/feather-customised/share.svg');
+ mask-image: url('$(res)/img/element-icons/room/share.svg');
}
.mx_RoomHeader_manageIntegsButton::before {
- mask-image: url('$(res)/img/feather-customised/grid.svg');
+ mask-image: url('$(res)/img/element-icons/room/integrations.svg');
}
.mx_RoomHeader_showPanel {
@@ -251,7 +270,7 @@ limitations under the License.
}
.mx_RoomHeader_pinnedButton::before {
- mask-image: url('$(res)/img/icons-pin.svg');
+ mask-image: url('$(res)/img/element-icons/room/pin.svg');
}
.mx_RoomHeader_pinsIndicator {
@@ -267,3 +286,12 @@ limitations under the License.
.mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color;
}
+
+@media only screen and (max-width: 480px) {
+ .mx_RoomHeader_wrapper {
+ padding: 0;
+ }
+ .mx_RoomHeader {
+ overflow: hidden;
+ }
+}
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 50a9e7ee1f..78e7307bc0 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -1,6 +1,5 @@
/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -16,51 +15,45 @@ limitations under the License.
*/
.mx_RoomList {
- /* take up remaining space below TopLeftMenu */
- flex: 1;
- min-height: 0;
- overflow-y: hidden;
+ padding-right: 7px; // width of the scrollbar, to line things up
}
-.mx_RoomList .mx_ResizeHandle {
- // needed so the z-index takes effect
- position: relative;
+.mx_RoomList_iconPlus::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
+}
+.mx_RoomList_iconExplore::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
-/* hide resize handles next to collapsed / empty sublists */
-.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
- display: none;
-}
-
-.mx_RoomList_expandButton {
- margin-left: 8px;
- cursor: pointer;
- padding-left: 12px;
- padding-right: 12px;
-}
-
-.mx_RoomList_emptySubListTip_container {
- padding-left: 18px;
- padding-right: 18px;
- padding-top: 8px;
- padding-bottom: 7px;
-}
-
-.mx_RoomList_emptySubListTip {
+.mx_RoomList_explorePrompt {
+ margin: 4px 12px 4px;
+ padding-top: 12px;
+ border-top: 1px solid $tertiary-fg-color;
font-size: $font-13px;
- padding: 5px;
- border: 1px dashed $accent-color;
- color: $primary-fg-color;
- background-color: $droptarget-bg-color;
- border-radius: 4px;
- line-height: $font-16px;
-}
-.mx_RoomList_emptySubListTip .mx_RoleButton {
- vertical-align: -2px;
-}
+ div:first-child {
+ font-weight: $font-semi-bold;
+ margin-bottom: 8px;
+ }
-.mx_RoomList_headerButtons {
- position: absolute;
- right: 60px;
+ .mx_AccessibleButton {
+ color: $secondary-fg-color;
+ position: relative;
+ padding: 0 0 0 24px;
+ font-size: inherit;
+
+ &::before {
+ content: '';
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: $secondary-fg-color;
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+ }
+ }
}
diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index 8708f13ada..0b1da7a41c 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -58,11 +58,6 @@ limitations under the License.
}
}
-.mx_RoomPreviewBar_dark {
- background-color: $tagpanel-bg-color;
- color: $accent-fg-color;
-}
-
.mx_RoomPreviewBar_actions {
display: flex;
}
diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss
new file mode 100644
index 0000000000..543940fb78
--- /dev/null
+++ b/res/css/views/rooms/_RoomSublist.scss
@@ -0,0 +1,389 @@
+/*
+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_RoomSublist {
+ margin-left: 8px;
+ margin-bottom: 4px;
+
+ .mx_RoomSublist_headerContainer {
+ // Create a flexbox to make alignment easy
+ display: flex;
+ align-items: center;
+
+ // ***************************
+ // Sticky Headers Start
+
+ // Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the
+ // headerContainer, however due to our layout concerns we actually have to
+ // calculate it manually so we can sticky things in the right places. We also
+ // target the headerText instead of the container to reduce jumps when scrolling,
+ // and to help hide the badges/other buttons that could appear on hover. This
+ // all works by ensuring the header text has a fixed height when sticky so the
+ // fixed height of the container can maintain the scroll position.
+
+ // The combined height must be set in the LeftPanel component for sticky headers
+ // to work correctly.
+ padding-bottom: 8px;
+ height: 24px;
+ color: $roomlist-header-color;
+
+ .mx_RoomSublist_stickable {
+ flex: 1;
+ max-width: 100%;
+
+ // Create a flexbox to make ordering easy
+ display: flex;
+ align-items: center;
+
+ // We use a generic sticky class for 2 reasons: to reduce style duplication and
+ // to identify when a header is sticky. If we didn't have a consistent sticky class,
+ // we'd have to do the "is sticky" checks again on click, as clicking the header
+ // when sticky scrolls instead of collapses the list.
+ &.mx_RoomSublist_headerContainer_sticky {
+ position: fixed;
+ height: 32px; // to match the header container
+ // width set by JS
+ 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.
+ }
+
+ // Sticky Headers End
+ // ***************************
+
+ .mx_RoomSublist_badgeContainer {
+ // Create another flexbox row because it's super easy to position the badge this way.
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ // Apply the width and margin to the badge so the container doesn't occupy dead space
+ .mx_NotificationBadge {
+ // Do not set a width so the badges get properly sized
+ margin-left: 8px; // same as menu+aux buttons
+ }
+ }
+
+ &:not(.mx_RoomSublist_headerContainer_withAux) {
+ .mx_NotificationBadge {
+ margin-right: 4px; // just to push it over a bit, aligning it with the other elements
+ }
+ }
+
+ .mx_RoomSublist_auxButton,
+ .mx_RoomSublist_menuButton {
+ margin-left: 8px; // should be the same as the notification badge
+ position: relative;
+ width: 24px;
+ height: 24px;
+ border-radius: 32px;
+
+ &::before {
+ content: '';
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ background: $muted-fg-color;
+ }
+ }
+
+ // Hide the menu button by default
+ .mx_RoomSublist_menuButton {
+ visibility: hidden;
+ width: 0;
+ margin: 0;
+ }
+
+ .mx_RoomSublist_auxButton::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
+ }
+
+ .mx_RoomSublist_menuButton::before {
+ mask-image: url('$(res)/img/element-icons/context-menu.svg');
+ }
+
+ .mx_RoomSublist_headerText {
+ flex: 1;
+ max-width: calc(100% - 16px); // 16px is the badge width
+ line-height: $font-16px;
+ font-size: $font-13px;
+ font-weight: 600;
+
+ // Ellipsize any text overflow
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+
+ .mx_RoomSublist_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_RoomSublist_collapseBtn_collapsed::before {
+ transform: rotate(-90deg);
+ }
+ }
+ }
+ }
+
+ // In the general case, we leave height of headers alone even if sticky, so
+ // that the sublists below them do not jump. However, that leaves a gap
+ // when scrolled to the top above the first sublist (whose header can only
+ // ever stick to top), so we force height to 0 for only that first header.
+ // See also https://github.com/vector-im/element-web/issues/14429.
+ &:first-child .mx_RoomSublist_headerContainer {
+ height: 0;
+ padding-bottom: 4px;
+ }
+
+ .mx_RoomSublist_resizeBox {
+ position: relative;
+
+ // Create another flexbox column for the tiles
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ .mx_RoomSublist_tiles {
+ flex: 1 0 0;
+ overflow: hidden;
+ // need this to be flex otherwise the overflow hidden from above
+ // sometimes vertically centers the clipped list ... no idea why it would do this
+ // as the box model should be top aligned. Happens in both FF and Chromium
+ display: flex;
+ flex-direction: column;
+
+ mask-image: linear-gradient(0deg, transparent, black 4px);
+ }
+
+ .mx_RoomSublist_resizerHandles_showNButton {
+ flex: 0 0 32px;
+ }
+
+ .mx_RoomSublist_resizerHandles {
+ flex: 0 0 4px;
+ }
+
+ // Class name comes from the ResizableBox component
+ // The hover state needs to use the whole sublist, not just the resizable box,
+ // so that selector is below and one level higher.
+ .mx_RoomSublist_resizerHandle {
+ cursor: ns-resize;
+ border-radius: 3px;
+
+ // Override styles from library
+ width: unset !important;
+ height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
+
+ // This is positioned directly below the 'show more' button.
+ position: absolute;
+ bottom: 0 !important; // override from library
+
+ // Together, these make the bar 64px wide
+ // These are also overridden from the library
+ left: calc(50% - 32px) !important;
+ right: calc(50% - 32px) !important;
+ }
+
+ &:hover, &.mx_RoomSublist_hasMenuOpen {
+ .mx_RoomSublist_resizerHandle {
+ opacity: 0.8;
+ background-color: $primary-fg-color;
+ }
+ }
+ }
+
+ .mx_RoomSublist_showNButton {
+ cursor: pointer;
+ font-size: $font-13px;
+ line-height: $font-18px;
+ color: $roomtile-preview-color;
+
+ // Update the render() function for RoomSublist if these change
+ // Update the ListLayout class for minVisibleTiles if these change.
+ height: 24px;
+ padding-bottom: 4px;
+
+ // We create a flexbox to cheat at alignment
+ display: flex;
+ align-items: center;
+
+ .mx_RoomSublist_showNButtonChevron {
+ position: relative;
+ width: 18px;
+ height: 18px;
+ margin-left: 12px;
+ margin-right: 16px;
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ background: $roomlist-header-color;
+ left: -1px; // adjust for image position
+ }
+
+ .mx_RoomSublist_showMoreButtonChevron,
+ .mx_RoomSublist_showLessButtonChevron {
+ mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+ }
+
+ .mx_RoomSublist_showLessButtonChevron {
+ transform: rotate(180deg);
+ }
+ }
+
+ &.mx_RoomSublist_hasMenuOpen,
+ &:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:focus-within,
+ &:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:hover {
+ .mx_RoomSublist_menuButton {
+ visibility: visible;
+ width: 24px;
+ margin-left: 8px;
+ }
+ }
+
+ &.mx_RoomSublist_minimized {
+ .mx_RoomSublist_headerContainer {
+ height: auto;
+ flex-direction: column;
+ position: relative;
+
+ .mx_RoomSublist_badgeContainer {
+ order: 0;
+ align-self: flex-end;
+ margin-right: 0;
+ }
+
+ .mx_RoomSublist_stickable {
+ order: 1;
+ max-width: 100%;
+ }
+
+ .mx_RoomSublist_auxButton {
+ order: 2;
+ visibility: visible;
+ width: 32px !important; // !important to override hover styles
+ height: 32px !important; // !important to override hover styles
+ margin-left: 0 !important; // !important to override hover styles
+ background-color: $roomlist-button-bg-color;
+ margin-top: 8px;
+
+ &::before {
+ top: 8px;
+ left: 8px;
+ }
+ }
+ }
+
+ .mx_RoomSublist_resizeBox {
+ align-items: center;
+ }
+
+ .mx_RoomSublist_showNButton {
+ flex-direction: column;
+
+ .mx_RoomSublist_showNButtonChevron {
+ margin-right: 12px; // to center
+ }
+ }
+
+ .mx_RoomSublist_menuButton {
+ height: 16px;
+ }
+
+ &.mx_RoomSublist_hasMenuOpen,
+ & > .mx_RoomSublist_headerContainer:hover {
+ .mx_RoomSublist_menuButton {
+ visibility: visible;
+ position: absolute;
+ bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment
+ right: 0;
+ width: 16px;
+ height: 16px;
+ border-radius: 0;
+ z-index: 1; // occlude the list name
+
+ // This is the same color as the left panel background because it needs
+ // to occlude the sublist title
+ background-color: $roomlist-bg-color;
+
+ &::before {
+ top: 0;
+ left: 0;
+ }
+ }
+
+ &.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) {
+ .mx_RoomSublist_menuButton {
+ bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
+ }
+ }
+ }
+ }
+}
+
+.mx_RoomSublist_contextMenu {
+ padding: 20px 16px;
+ width: 250px;
+
+ hr {
+ margin-top: 16px;
+ margin-bottom: 16px;
+ margin-right: 16px; // additional 16px
+ border: 1px solid $roomsublist-divider-color;
+ opacity: 0.1;
+ }
+
+ .mx_RoomSublist_contextMenu_title {
+ font-size: $font-15px;
+ line-height: $font-20px;
+ font-weight: 600;
+ margin-bottom: 4px;
+ }
+
+ .mx_RadioButton, .mx_Checkbox {
+ margin-top: 8px;
+ }
+}
+
+.mx_RoomSublist_addRoomTooltip {
+ margin-top: -3px;
+}
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index 5bc7d5624d..8eca3f1efa 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -1,6 +1,5 @@
/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,213 +14,182 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+// Note: the room tile expects to be in a flexbox column container
.mx_RoomTile {
- display: flex;
- flex-direction: row;
- align-items: center;
- cursor: pointer;
- height: $font-34px;
- margin: 0;
- padding: 0 8px 0 10px;
- position: relative;
-
- .mx_RoomTile_menuButton {
- display: none;
- flex: 0 0 16px;
- height: 16px;
- background-image: url('$(res)/img/icon_context.svg');
- background-repeat: no-repeat;
- background-position: center;
- }
-
- .mx_UserOnlineDot {
- display: block;
- margin-right: 5px;
- }
-}
-
-.mx_RoomTile:focus {
- filter: none !important;
- background-color: $roomtile-focused-bg-color;
-}
-
-.mx_RoomTile_tooltip {
- display: inline-block;
- position: relative;
- top: -54px;
- left: -12px;
-}
-
-.mx_RoomTile_nameContainer {
- display: flex;
- align-items: center;
- flex: 1;
- vertical-align: middle;
- min-width: 0;
-}
-
-.mx_RoomTile_labelContainer {
- display: flex;
- flex-direction: column;
- flex: 1;
- min-width: 0;
-}
-
-.mx_RoomTile_subtext {
- display: inline-block;
- font-size: $font-11px;
- padding: 0 0 0 7px;
- margin: 0;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: clip;
- position: relative;
- bottom: 4px;
-}
-
-.mx_RoomTile_avatar_container {
- position: relative;
-}
-
-.mx_RoomTile_avatar {
- flex: 0;
+ margin-bottom: 4px;
padding: 4px;
- width: 24px;
- vertical-align: middle;
-}
-.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
- padding-top: 0;
- vertical-align: super;
-}
+ // The tile is also a flexbox row itself
+ display: flex;
-.mx_RoomTile_dm {
- display: block;
- position: absolute;
- bottom: 0;
- right: -5px;
- z-index: 2;
-}
+ &.mx_RoomTile_selected,
+ &:hover,
+ &:focus-within,
+ &.mx_RoomTile_hasMenuOpen {
+ background-color: $roomtile-selected-bg-color;
+ border-radius: 8px;
+ }
-// Note we match .mx_E2EIcon to make sure this matches more tightly than just
-// .mx_E2EIcon on its own
-.mx_RoomTile_e2eIcon.mx_E2EIcon {
- height: 14px;
- width: 14px;
- display: block;
- position: absolute;
- bottom: -2px;
- right: -5px;
- z-index: 1;
- margin: 0;
-}
+ .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
+ margin-right: 8px;
+ }
-.mx_RoomTile_name {
- font-size: $font-14px;
- padding: 0 4px;
- color: $roomtile-name-color;
- white-space: nowrap;
- overflow-x: hidden;
- text-overflow: ellipsis;
-}
+ .mx_RoomTile_nameContainer {
+ flex-grow: 1;
+ min-width: 0; // allow flex to shrink it
+ margin-right: 8px; // spacing to buttons/badges
-.mx_RoomTile_badge {
- flex: 0 1 content;
- border-radius: 0.8em;
- padding: 0 0.4em;
- color: $roomtile-badge-fg-color;
- font-weight: 600;
- font-size: $font-12px;
-}
-
-.collapsed {
- .mx_RoomTile {
- margin: 0 6px;
- padding: 0 2px;
- position: relative;
+ // Create a new column layout flexbox for the name parts
+ display: flex;
+ flex-direction: column;
justify-content: center;
+
+ .mx_RoomTile_name,
+ .mx_RoomTile_messagePreview {
+ margin: 0 2px;
+ width: 100%;
+
+ // Ellipsize any text overflow
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .mx_RoomTile_name {
+ font-size: $font-14px;
+ line-height: $font-18px;
+ }
+
+ .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
+ font-weight: 600;
+ }
+
+ .mx_RoomTile_messagePreview {
+ font-size: $font-13px;
+ line-height: $font-18px;
+ color: $roomtile-preview-color;
+ }
+
+ .mx_RoomTile_nameWithPreview {
+ margin-top: -4px; // shift the name up a bit more
+ }
}
- .mx_RoomTile_name {
+ .mx_RoomTile_notificationsButton {
+ margin-left: 4px; // spacing between buttons
+ }
+
+ .mx_RoomTile_badgeContainer {
+ height: 16px;
+ // don't set width so that it takes no space when there is no badge to show
+ margin: auto 0; // vertically align
+
+ // Create a flexbox to make aligning dot badges easier
+ display: flex;
+ align-items: center;
+
+ .mx_NotificationBadge {
+ margin-right: 2px; // centering
+ }
+
+ .mx_NotificationBadge_dot {
+ // make the smaller dot occupy the same width for centering
+ margin-left: 5px;
+ margin-right: 7px;
+ }
+ }
+
+ // The context menu buttons are hidden by default
+ .mx_RoomTile_menuButton,
+ .mx_RoomTile_notificationsButton {
+ width: 20px;
+ min-width: 20px; // yay flex
+ height: 20px;
+ margin-top: auto;
+ margin-bottom: auto;
+ position: relative;
display: none;
+
+ &::before {
+ top: 2px;
+ left: 2px;
+ content: '';
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ background: $primary-fg-color;
+ }
}
- .mx_RoomTile_badge {
- position: absolute;
- right: 6px;
- top: 0px;
- border-radius: 16px;
- z-index: 3;
- border: 0.18em solid $secondary-accent-color;
- }
-
- .mx_RoomTile_menuButton {
- display: none; // no design for this for now
- }
- .mx_UserOnlineDot {
- display: none; // no design for this for now
- }
-}
-
-// toggle menuButton and badge on menu displayed
-.mx_RoomTile_menuDisplayed,
-// or on keyboard focus of room tile
-.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:focus-within,
-// or on pointer hover
-.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover {
- .mx_RoomTile_menuButton {
+ // If the room has an overriden notification setting then we always show the notifications menu button
+ .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
- .mx_UserOnlineDot {
- display: none;
+
+ .mx_RoomTile_menuButton::before {
+ mask-image: url('$(res)/img/element-icons/context-menu.svg');
+ }
+
+ &:not(.mx_RoomTile_minimized) {
+ &:hover,
+ &:focus-within,
+ &.mx_RoomTile_hasMenuOpen {
+ // Hide the badge container on hover because it'll be a menu button
+ .mx_RoomTile_badgeContainer {
+ width: 0;
+ height: 0;
+ display: none;
+ }
+
+ .mx_RoomTile_notificationsButton,
+ .mx_RoomTile_menuButton {
+ display: block;
+ }
+ }
+ }
+
+ &.mx_RoomTile_minimized {
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+
+ .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
+ margin-right: 0;
+ }
}
}
-.mx_RoomTile_unreadNotify .mx_RoomTile_badge,
-.mx_RoomTile_badge.mx_RoomTile_badgeUnread {
- background-color: $roomtile-name-color;
+// We use these both in context menus and the room tiles
+.mx_RoomTile_iconBell::before {
+ mask-image: url('$(res)/img/element-icons/notifications.svg');
+}
+.mx_RoomTile_iconBellDot::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
+}
+.mx_RoomTile_iconBellCrossed::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
+}
+.mx_RoomTile_iconBellMentions::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
}
-.mx_RoomTile_highlight .mx_RoomTile_badge,
-.mx_RoomTile_badge.mx_RoomTile_badgeRed {
- color: $accent-fg-color;
- background-color: $warning-color;
-}
+.mx_RoomTile_contextMenu {
+ .mx_RoomTile_iconStar::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
+ }
-.mx_RoomTile_unread, .mx_RoomTile_highlight {
- .mx_RoomTile_name {
- font-weight: 600;
- color: $roomtile-selected-color;
+ .mx_RoomTile_iconArrowDown::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg');
+ }
+
+ .mx_RoomTile_iconSettings::before {
+ mask-image: url('$(res)/img/element-icons/settings.svg');
+ }
+
+ .mx_RoomTile_iconSignOut::before {
+ mask-image: url('$(res)/img/element-icons/leave.svg');
}
}
-
-.mx_RoomTile_selected {
- border-radius: 4px;
- background-color: $roomtile-selected-bg-color;
-}
-
-.mx_DNDRoomTile {
- transform: none;
- transition: transform 0.2s;
-}
-
-.mx_DNDRoomTile_dragging {
- transform: scale(1.05, 1.05);
-}
-
-.mx_RoomTile_arrow {
- position: absolute;
- right: 0px;
-}
-
-.mx_RoomTile.mx_RoomTile_transparent {
- background-color: transparent;
-}
-
-.mx_RoomTile.mx_RoomTile_transparent:focus {
- background-color: $roomtile-transparent-focused-color;
-}
-
-.mx_GroupInviteTile .mx_RoomTile_name {
- flex: 1;
-}
diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss
index 0b646666e7..9f6a8d52ce 100644
--- a/res/css/views/rooms/_SendMessageComposer.scss
+++ b/res/css/views/rooms/_SendMessageComposer.scss
@@ -44,10 +44,5 @@ limitations under the License.
overflow-y: auto;
}
}
-
- .mx_SendMessageComposer_overlayWrapper {
- position: relative;
- height: 0;
- }
}
diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.scss
index d33ecc0bb6..4bd45631cc 100644
--- a/res/css/views/rooms/_Stickers.scss
+++ b/res/css/views/rooms/_Stickers.scss
@@ -31,7 +31,7 @@
.mx_Stickers_addLink {
display: inline;
cursor: pointer;
- text-decoration: underline;
+ color: $button-link-fg-color;
}
.mx_Stickers_hideStickers {
diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss
index 28eddf1fa2..8841b042a0 100644
--- a/res/css/views/rooms/_TopUnreadMessagesBar.scss
+++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss
@@ -28,7 +28,7 @@ limitations under the License.
content: "";
position: absolute;
top: -8px;
- left: 11px;
+ left: 10.5px;
width: 4px;
height: 4px;
border-radius: 16px;
@@ -42,19 +42,20 @@ limitations under the License.
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
- border: 1.3px solid $roomtile-name-color;
+ border: 1.3px solid $muted-fg-color;
cursor: pointer;
}
.mx_TopUnreadMessagesBar_scrollUp::before {
content: "";
position: absolute;
- width: 38px;
- height: 38px;
- mask-image: url('$(res)/img/icon-jump-to-first-unread.svg');
+ width: 36px;
+ height: 36px;
+ mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
mask-repeat: no-repeat;
- mask-position: 9px 13px;
- background: $roomtile-name-color;
+ mask-size: contain;
+ background: $muted-fg-color;
+ transform: rotate(180deg);
}
.mx_TopUnreadMessagesBar_markAsRead {
@@ -62,7 +63,7 @@ limitations under the License.
width: 18px;
height: 18px;
background: $primary-bg-color;
- border: 1.3px solid $roomtile-name-color;
+ border: 1.3px solid $muted-fg-color;
border-radius: 10px;
margin: 5px auto;
}
@@ -76,5 +77,5 @@ limitations under the License.
mask-repeat: no-repeat;
mask-size: 10px;
mask-position: 4px 4px;
- background: $roomtile-name-color;
+ background: $muted-fg-color;
}
diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
index 8b135152d6..1c0dabbeb5 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -59,7 +59,7 @@ limitations under the License.
flex: 1;
font-size: $font-14px;
font-weight: 600;
- color: $eventtile-meta-color;
+ color: $roomtopic-color;
}
.mx_WhoIsTypingTile_label > span {
diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.scss
index 9fa10907b4..eddcf9f55a 100644
--- a/res/css/views/settings/_AvatarSetting.scss
+++ b/res/css/views/settings/_AvatarSetting.scss
@@ -27,28 +27,6 @@ limitations under the License.
.mx_AccessibleButton.mx_AccessibleButton_kind_primary {
margin-top: 8px;
-
- div {
- position: relative;
- height: 12px;
- width: 12px;
- display: inline;
- padding-right: 6px; // 0.5 * 12px
- left: -6px; // 0.5 * 12px
- top: 3px;
- }
-
- div::before {
- content: '';
- position: absolute;
- height: 12px;
- width: 12px;
-
- background-color: $button-primary-fg-color;
- mask-repeat: no-repeat;
- mask-size: contain;
- mask-image: url('$(res)/img/feather-customised/upload.svg');
- }
}
.mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
diff --git a/res/css/views/rooms/_UserOnlineDot.scss b/res/css/views/settings/_UpdateCheckButton.scss
similarity index 73%
rename from res/css/views/rooms/_UserOnlineDot.scss
rename to res/css/views/settings/_UpdateCheckButton.scss
index f9da8648ed..f35a023ac1 100644
--- a/res/css/views/rooms/_UserOnlineDot.scss
+++ b/res/css/views/settings/_UpdateCheckButton.scss
@@ -1,5 +1,5 @@
/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_UserOnlineDot {
- border-radius: 50%;
- background-color: $accent-color;
- height: 6px;
- width: 6px;
- display: inline-block;
+.mx_UpdateCheckButton_summary {
+ margin-left: 16px;
+
+ .mx_AccessibleButton_kind_link {
+ padding: 0;
+ }
}
diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
index b5a57dfefb..23dcc532b2 100644
--- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
+++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_SecurityRoomSettingsTab label {
- display: block;
-}
-
.mx_SecurityRoomSettingsTab_warning {
display: block;
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
new file mode 100644
index 0000000000..94983a60bf
--- /dev/null
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -0,0 +1,230 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_AppearanceUserSettingsTab_fontSlider,
+.mx_AppearanceUserSettingsTab_fontSlider_preview,
+.mx_AppearanceUserSettingsTab_Layout {
+ @mixin mx_Settings_fullWidthField;
+}
+
+.mx_AppearanceUserSettingsTab .mx_Field {
+ width: 256px;
+}
+
+.mx_AppearanceUserSettingsTab_fontScaling {
+ color: $primary-fg-color;
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 15px;
+ background: rgba($appearance-tab-border-color, 0.2);
+ border-radius: 10px;
+ font-size: 10px;
+ margin-top: 24px;
+ margin-bottom: 24px;
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider_preview {
+ border: 1px solid $appearance-tab-border-color;
+ border-radius: 10px;
+ padding: 0 16px 9px 16px;
+ pointer-events: none;
+
+ .mx_EventTile_msgOption {
+ display: none;
+ }
+
+ &.mx_IRCLayout {
+ padding-top: 9px;
+ }
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider_smallText {
+ font-size: 15px;
+ padding-right: 20px;
+ padding-left: 5px;
+ font-weight: 500;
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider_largeText {
+ font-size: 18px;
+ padding-left: 20px;
+ padding-right: 5px;
+ font-weight: 500;
+}
+
+.mx_AppearanceUserSettingsTab {
+ > .mx_SettingsTab_SubHeading {
+ margin-bottom: 32px;
+ }
+}
+
+.mx_AppearanceUserSettingsTab_themeSection {
+ $radio-bg-color: $input-darker-bg-color;
+ color: $primary-fg-color;
+
+ > .mx_ThemeSelectors {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ margin-top: 4px;
+ margin-bottom: 30px;
+
+ > .mx_RadioButton {
+ padding: $font-16px;
+ box-sizing: border-box;
+ border-radius: 10px;
+ width: 180px;
+
+ background: $radio-bg-color;
+ opacity: 0.4;
+
+ flex-shrink: 1;
+ flex-grow: 0;
+
+ margin-right: 15px;
+ margin-top: 10px;
+
+ font-weight: 600;
+ color: $muted-fg-color;
+
+ > span {
+ justify-content: center;
+ }
+ }
+
+ > .mx_RadioButton_enabled {
+ opacity: 1;
+
+ // These colors need to be hardcoded because they don't change with the theme
+ &.mx_ThemeSelector_light {
+ background-color: #f3f8fd;
+ color: #2e2f32;
+ }
+
+ &.mx_ThemeSelector_dark {
+ // 5% lightened version of 181b21
+ background-color: #25282e;
+ color: #f3f8fd;
+
+ > input > div {
+ border-color: $input-darker-bg-color;
+ > div {
+ border-color: $input-darker-bg-color;
+ }
+ }
+ }
+
+ &.mx_ThemeSelector_black {
+ background-color: #000000;
+ color: #f3f8fd;
+
+ > input > div {
+ border-color: $input-darker-bg-color;
+ > div {
+ border-color: $input-darker-bg-color;
+ }
+ }
+ }
+ }
+ }
+}
+
+.mx_SettingsTab_customFontSizeField {
+ margin-left: calc($font-16px + 10px);
+}
+
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
+ display: flex;
+ flex-direction: row;
+
+ color: $primary-fg-color;
+
+ .mx_AppearanceUserSettingsTab_spacer {
+ width: 24px;
+ }
+
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton {
+ flex-grow: 0;
+ flex-shrink: 1;
+ display: flex;
+ flex-direction: column;
+
+ width: 300px;
+
+ border: 1px solid $appearance-tab-border-color;
+ border-radius: 10px;
+
+ .mx_EventTile_msgOption,
+ .mx_MessageActionBar {
+ display: none;
+ }
+
+ .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
+ flex-grow: 1;
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ pointer-events: none;
+ }
+
+ .mx_RadioButton {
+ flex-grow: 0;
+ padding: 10px;
+ }
+
+ .mx_EventTile_content {
+ margin-right: 0;
+ }
+
+ &.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
+ border-color: $accent-color;
+ }
+ }
+
+ .mx_RadioButton {
+ border-top: 1px solid $appearance-tab-border-color;
+
+ > input + div {
+ border-color: rgba($muted-fg-color, 0.2);
+ }
+ }
+
+ .mx_RadioButton_checked {
+ background-color: rgba($accent-color, 0.08);
+ }
+}
+
+.mx_AppearanceUserSettingsTab_Advanced {
+ color: $primary-fg-color;
+
+ > * {
+ margin-bottom: 16px;
+ }
+
+ .mx_AppearanceUserSettingsTab_AdvancedToggle {
+ color: $accent-color;
+ cursor: pointer;
+ }
+
+ .mx_AppearanceUserSettingsTab_systemFont {
+ margin-left: calc($font-16px + 10px);
+ }
+}
diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
index 62d230e752..6c9b89cf5a 100644
--- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
@@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_GeneralUserSettingsTab_changePassword .mx_Field,
-.mx_GeneralUserSettingsTab_themeSection .mx_Field {
+.mx_GeneralUserSettingsTab_changePassword .mx_Field {
@mixin mx_Settings_fullWidthField;
}
@@ -23,6 +22,12 @@ limitations under the License.
margin-top: 0;
}
+.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
+.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
+ // Move the spinner to the left side of the container (default center)
+ justify-content: left;
+}
+
.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,
diff --git a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
index 8700f8747d..d6466a03f9 100644
--- a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
@@ -63,4 +63,25 @@ limitations under the License.
font-size: inherit;
}
}
+
+ .mx_SecurityUserSettingsTab_warning {
+ color: $notice-primary-color;
+ position: relative;
+ padding-left: 40px;
+ margin-top: 30px;
+
+ &::before {
+ mask-repeat: no-repeat;
+ mask-position: 0 center;
+ mask-size: $font-24px;
+ position: absolute;
+ width: $font-24px;
+ height: $font-24px;
+ content: "";
+ top: 0;
+ left: 0;
+ background-color: $notice-primary-color;
+ mask-image: url('$(res)/img/feather-customised/alert-triangle.svg');
+ }
+ }
}
diff --git a/res/css/views/toasts/_NonUrgentEchoFailureToast.scss b/res/css/views/toasts/_NonUrgentEchoFailureToast.scss
new file mode 100644
index 0000000000..9a8229b38e
--- /dev/null
+++ b/res/css/views/toasts/_NonUrgentEchoFailureToast.scss
@@ -0,0 +1,37 @@
+/*
+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_NonUrgentEchoFailureToast {
+ .mx_NonUrgentEchoFailureToast_icon {
+ display: inline-block;
+ width: $font-18px;
+ height: $font-18px;
+ mask-position: center;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ background-color: #fff; // we know that non-urgent toasts are always styled the same
+ mask-image: url('$(res)/img/element-icons/cloud-off.svg');
+ margin-right: 8px;
+ }
+
+ span { // includes the i18n block
+ vertical-align: middle;
+ }
+
+ .mx_AccessibleButton {
+ padding: 0;
+ }
+}
diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss
new file mode 100644
index 0000000000..8d1b68dd99
--- /dev/null
+++ b/res/css/views/voip/_CallContainer.scss
@@ -0,0 +1,89 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CallContainer {
+ position: absolute;
+ right: 20px;
+ bottom: 72px;
+ border-radius: 8px;
+ overflow: hidden;
+ z-index: 100;
+ box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
+
+ cursor: pointer;
+
+ .mx_CallPreview {
+ .mx_VideoView {
+ width: 350px;
+ }
+
+ .mx_VideoView_localVideoFeed {
+ border-radius: 8px;
+ overflow: hidden;
+ }
+ }
+
+ .mx_IncomingCallBox {
+ min-width: 250px;
+ background-color: $primary-bg-color;
+ padding: 8px;
+
+ .mx_IncomingCallBox_CallerInfo {
+ display: flex;
+ direction: row;
+
+ img {
+ margin: 8px;
+ }
+
+ > div {
+ display: flex;
+ flex-direction: column;
+
+ justify-content: center;
+ }
+
+ h1, p {
+ margin: 0px;
+ padding: 0px;
+ font-size: $font-14px;
+ line-height: $font-16px;
+ }
+
+ h1 {
+ font-weight: bold;
+ }
+ }
+
+ .mx_IncomingCallBox_buttons {
+ padding: 8px;
+ display: flex;
+ flex-direction: row;
+
+ > .mx_IncomingCallBox_spacer {
+ width: 8px;
+ }
+
+ > * {
+ flex-shrink: 0;
+ flex-grow: 1;
+ margin-right: 0;
+ font-size: $font-15px;
+ line-height: $font-24px;
+ }
+ }
+ }
+}
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index 4650f30c1d..f6f3d40308 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -18,8 +19,76 @@ limitations under the License.
background-color: $accent-color;
color: $accent-fg-color;
cursor: pointer;
- text-align: center;
padding: 6px;
font-weight: bold;
- font-size: $font-13px;
+
+ border-radius: 8px;
+ min-width: 200px;
+
+ display: flex;
+ align-items: center;
+
+ img {
+ margin: 4px;
+ margin-right: 10px;
+ }
+
+ > div {
+ display: flex;
+ flex-direction: column;
+ // Hacky vertical align
+ padding-top: 3px;
+ }
+
+ > div > p,
+ > div > h1 {
+ padding: 0;
+ margin: 0;
+ font-size: $font-13px;
+ line-height: $font-15px;
+ }
+
+ > div > p {
+ font-weight: bold;
+ }
+
+ > * {
+ flex-grow: 0;
+ flex-shrink: 0;
+ }
+}
+
+.mx_CallView_hangup {
+ position: absolute;
+
+ right: 8px;
+ bottom: 10px;
+
+ height: 35px;
+ width: 35px;
+
+ border-radius: 35px;
+
+ background-color: $notice-primary-color;
+
+ z-index: 101;
+
+ cursor: pointer;
+
+ &::before {
+ content: '';
+ position: absolute;
+
+ height: 20px;
+ width: 20px;
+
+ top: 6.5px;
+ left: 7.5px;
+
+ mask: url('$(res)/img/hangup.svg');
+ mask-size: contain;
+ background-size: contain;
+
+ background-color: $primary-fg-color;
+ }
}
diff --git a/res/css/views/voip/_IncomingCallbox.scss b/res/css/views/voip/_IncomingCallbox.scss
deleted file mode 100644
index ed33de470d..0000000000
--- a/res/css/views/voip/_IncomingCallbox.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_IncomingCallBox {
- text-align: center;
- border: 1px solid #a4a4a4;
- border-radius: 8px;
- background-color: $primary-bg-color;
- position: fixed;
- z-index: 1000;
- padding: 6px;
- margin-top: -3px;
- margin-left: -20px;
- width: 200px;
-}
-
-.mx_IncomingCallBox_chevron {
- padding: 12px;
- position: absolute;
- left: -21px;
- top: 0px;
-}
-
-.mx_IncomingCallBox_title {
- padding: 6px;
- font-weight: bold;
-}
-
-.mx_IncomingCallBox_buttons {
- display: flex;
-}
-
-.mx_IncomingCallBox_buttons_cell {
- vertical-align: middle;
- padding: 6px;
- flex: 1;
-}
-
-.mx_IncomingCallBox_buttons_decline,
-.mx_IncomingCallBox_buttons_accept {
- vertical-align: middle;
- width: 80px;
- height: 36px;
- line-height: $font-36px;
- border-radius: 36px;
- color: $accent-fg-color;
- margin: auto;
-}
-
-.mx_IncomingCallBox_buttons_decline {
- background-color: $voip-decline-color;
-}
-
-.mx_IncomingCallBox_buttons_accept {
- background-color: $voip-accept-color;
-}
diff --git a/res/fonts/Inter/Inter-Bold.woff b/res/fonts/Inter/Inter-Bold.woff
new file mode 100644
index 0000000000..61e1c25e64
Binary files /dev/null and b/res/fonts/Inter/Inter-Bold.woff differ
diff --git a/res/fonts/Inter/Inter-Bold.woff2 b/res/fonts/Inter/Inter-Bold.woff2
new file mode 100644
index 0000000000..6c401bb09b
Binary files /dev/null and b/res/fonts/Inter/Inter-Bold.woff2 differ
diff --git a/res/fonts/Inter/Inter-BoldItalic.woff b/res/fonts/Inter/Inter-BoldItalic.woff
new file mode 100644
index 0000000000..2de403edd1
Binary files /dev/null and b/res/fonts/Inter/Inter-BoldItalic.woff differ
diff --git a/res/fonts/Inter/Inter-BoldItalic.woff2 b/res/fonts/Inter/Inter-BoldItalic.woff2
new file mode 100644
index 0000000000..80efd4848d
Binary files /dev/null and b/res/fonts/Inter/Inter-BoldItalic.woff2 differ
diff --git a/res/fonts/Inter/Inter-Italic.woff b/res/fonts/Inter/Inter-Italic.woff
new file mode 100644
index 0000000000..e7da6663fe
Binary files /dev/null and b/res/fonts/Inter/Inter-Italic.woff differ
diff --git a/res/fonts/Inter/Inter-Italic.woff2 b/res/fonts/Inter/Inter-Italic.woff2
new file mode 100644
index 0000000000..8559dfde38
Binary files /dev/null and b/res/fonts/Inter/Inter-Italic.woff2 differ
diff --git a/res/fonts/Inter/Inter-Medium.woff b/res/fonts/Inter/Inter-Medium.woff
new file mode 100644
index 0000000000..8c36a6345e
Binary files /dev/null and b/res/fonts/Inter/Inter-Medium.woff differ
diff --git a/res/fonts/Inter/Inter-Medium.woff2 b/res/fonts/Inter/Inter-Medium.woff2
new file mode 100644
index 0000000000..3b31d3350a
Binary files /dev/null and b/res/fonts/Inter/Inter-Medium.woff2 differ
diff --git a/res/fonts/Inter/Inter-MediumItalic.woff b/res/fonts/Inter/Inter-MediumItalic.woff
new file mode 100644
index 0000000000..fb79e91ff4
Binary files /dev/null and b/res/fonts/Inter/Inter-MediumItalic.woff differ
diff --git a/res/fonts/Inter/Inter-MediumItalic.woff2 b/res/fonts/Inter/Inter-MediumItalic.woff2
new file mode 100644
index 0000000000..d32c111f9c
Binary files /dev/null and b/res/fonts/Inter/Inter-MediumItalic.woff2 differ
diff --git a/res/fonts/Inter/Inter-Regular.woff b/res/fonts/Inter/Inter-Regular.woff
new file mode 100644
index 0000000000..7d587c40bf
Binary files /dev/null and b/res/fonts/Inter/Inter-Regular.woff differ
diff --git a/res/fonts/Inter/Inter-Regular.woff2 b/res/fonts/Inter/Inter-Regular.woff2
new file mode 100644
index 0000000000..d5ffd2a1f1
Binary files /dev/null and b/res/fonts/Inter/Inter-Regular.woff2 differ
diff --git a/res/fonts/Inter/Inter-SemiBold.woff b/res/fonts/Inter/Inter-SemiBold.woff
new file mode 100644
index 0000000000..99df06cbee
Binary files /dev/null and b/res/fonts/Inter/Inter-SemiBold.woff differ
diff --git a/res/fonts/Inter/Inter-SemiBold.woff2 b/res/fonts/Inter/Inter-SemiBold.woff2
new file mode 100644
index 0000000000..df746af999
Binary files /dev/null and b/res/fonts/Inter/Inter-SemiBold.woff2 differ
diff --git a/res/fonts/Inter/Inter-SemiBoldItalic.woff b/res/fonts/Inter/Inter-SemiBoldItalic.woff
new file mode 100644
index 0000000000..91e192b9f1
Binary files /dev/null and b/res/fonts/Inter/Inter-SemiBoldItalic.woff differ
diff --git a/res/fonts/Inter/Inter-SemiBoldItalic.woff2 b/res/fonts/Inter/Inter-SemiBoldItalic.woff2
new file mode 100644
index 0000000000..ff8774ccb4
Binary files /dev/null and b/res/fonts/Inter/Inter-SemiBoldItalic.woff2 differ
diff --git a/res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2 b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2
index 593d7c8f5c..a52e5a3800 100644
Binary files a/res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2 and b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2 differ
diff --git a/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2
index 277324851f..660a93193d 100644
Binary files a/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 and b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 differ
diff --git a/res/img/attach.png b/res/img/attach.png
deleted file mode 100644
index 1bcb70045d..0000000000
Binary files a/res/img/attach.png and /dev/null differ
diff --git a/res/img/button-text-block-quote-on.svg b/res/img/button-text-block-quote-on.svg
deleted file mode 100644
index f8a86125c9..0000000000
--- a/res/img/button-text-block-quote-on.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-block-quote.svg b/res/img/button-text-block-quote.svg
deleted file mode 100644
index d70c261f5d..0000000000
--- a/res/img/button-text-block-quote.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-bold-on.svg b/res/img/button-text-bold-on.svg
deleted file mode 100644
index 161e740e90..0000000000
--- a/res/img/button-text-bold-on.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-bold.svg b/res/img/button-text-bold.svg
deleted file mode 100644
index 0fd0baa07e..0000000000
--- a/res/img/button-text-bold.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-bulleted-list-on.svg b/res/img/button-text-bulleted-list-on.svg
deleted file mode 100644
index d4a40e889c..0000000000
--- a/res/img/button-text-bulleted-list-on.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-bulleted-list.svg b/res/img/button-text-bulleted-list.svg
deleted file mode 100644
index ae3e640d8e..0000000000
--- a/res/img/button-text-bulleted-list.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-deleted-on.svg b/res/img/button-text-deleted-on.svg
deleted file mode 100644
index 2914fcabe6..0000000000
--- a/res/img/button-text-deleted-on.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-deleted.svg b/res/img/button-text-deleted.svg
deleted file mode 100644
index 5f262dc350..0000000000
--- a/res/img/button-text-deleted.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-formatting.svg b/res/img/button-text-formatting.svg
deleted file mode 100644
index d697010d40..0000000000
--- a/res/img/button-text-formatting.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
diff --git a/res/img/button-text-inline-code-on.svg b/res/img/button-text-inline-code-on.svg
deleted file mode 100644
index 8d1439c97b..0000000000
--- a/res/img/button-text-inline-code-on.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-inline-code.svg b/res/img/button-text-inline-code.svg
deleted file mode 100644
index 24026cb709..0000000000
--- a/res/img/button-text-inline-code.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-italic-on.svg b/res/img/button-text-italic-on.svg
deleted file mode 100644
index 15fe588596..0000000000
--- a/res/img/button-text-italic-on.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-italic.svg b/res/img/button-text-italic.svg
deleted file mode 100644
index b5722e827b..0000000000
--- a/res/img/button-text-italic.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-numbered-list-on.svg b/res/img/button-text-numbered-list-on.svg
deleted file mode 100644
index 869a2c2cc2..0000000000
--- a/res/img/button-text-numbered-list-on.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-numbered-list.svg b/res/img/button-text-numbered-list.svg
deleted file mode 100644
index 8e5b8b87b6..0000000000
--- a/res/img/button-text-numbered-list.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-underlined-on.svg b/res/img/button-text-underlined-on.svg
deleted file mode 100644
index 870be3ce6a..0000000000
--- a/res/img/button-text-underlined-on.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/button-text-underlined.svg b/res/img/button-text-underlined.svg
deleted file mode 100644
index 26f448539c..0000000000
--- a/res/img/button-text-underlined.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/call.png b/res/img/call.png
deleted file mode 100644
index a7805e0596..0000000000
Binary files a/res/img/call.png and /dev/null differ
diff --git a/res/img/cancel-black.png b/res/img/cancel-black.png
deleted file mode 100644
index 87dcfd41a8..0000000000
Binary files a/res/img/cancel-black.png and /dev/null differ
diff --git a/res/img/cancel-black2.png b/res/img/cancel-black2.png
deleted file mode 100644
index a928c61b09..0000000000
Binary files a/res/img/cancel-black2.png and /dev/null differ
diff --git a/res/img/cancel.png b/res/img/cancel.png
deleted file mode 100644
index 2bda8ff5bf..0000000000
Binary files a/res/img/cancel.png and /dev/null differ
diff --git a/res/img/chevron-left.png b/res/img/chevron-left.png
deleted file mode 100644
index efb0065de9..0000000000
Binary files a/res/img/chevron-left.png and /dev/null differ
diff --git a/res/img/chevron-right.png b/res/img/chevron-right.png
deleted file mode 100644
index 18a4684e47..0000000000
Binary files a/res/img/chevron-right.png and /dev/null differ
diff --git a/res/img/chevron.png b/res/img/chevron.png
deleted file mode 100644
index 81236f91bc..0000000000
Binary files a/res/img/chevron.png and /dev/null differ
diff --git a/res/img/close-white.png b/res/img/close-white.png
deleted file mode 100644
index d8752ed9fe..0000000000
Binary files a/res/img/close-white.png and /dev/null differ
diff --git a/res/img/create-big.png b/res/img/create-big.png
deleted file mode 100644
index b7307a11c7..0000000000
Binary files a/res/img/create-big.png and /dev/null differ
diff --git a/res/img/create-big.svg b/res/img/create-big.svg
deleted file mode 100644
index 2450542b63..0000000000
--- a/res/img/create-big.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
\ No newline at end of file
diff --git a/res/img/create.png b/res/img/create.png
deleted file mode 100644
index 2d6107ac50..0000000000
Binary files a/res/img/create.png and /dev/null differ
diff --git a/res/img/delete.png b/res/img/delete.png
deleted file mode 100644
index 8ff20a116d..0000000000
Binary files a/res/img/delete.png and /dev/null differ
diff --git a/res/img/directory-big.png b/res/img/directory-big.png
deleted file mode 100644
index 03cab69c4a..0000000000
Binary files a/res/img/directory-big.png and /dev/null differ
diff --git a/res/img/download.png b/res/img/download.png
deleted file mode 100644
index 1999ebf7ab..0000000000
Binary files a/res/img/download.png and /dev/null differ
diff --git a/res/img/e2e/blacklisted.svg b/res/img/e2e/blacklisted.svg
deleted file mode 100644
index ac99d23f05..0000000000
--- a/res/img/e2e/blacklisted.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/res/img/e2e/lock-verified.svg b/res/img/e2e/lock-verified.svg
deleted file mode 100644
index 819dfacc49..0000000000
--- a/res/img/e2e/lock-verified.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/res/img/e2e/lock-warning.svg b/res/img/e2e/lock-warning.svg
deleted file mode 100644
index de2bded7f8..0000000000
--- a/res/img/e2e/lock-warning.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
diff --git a/res/img/e2e/normal.svg b/res/img/e2e/normal.svg
index 5b848bc27f..23ca78e44d 100644
--- a/res/img/e2e/normal.svg
+++ b/res/img/e2e/normal.svg
@@ -1,3 +1,3 @@
-