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

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

Browse source
This commit is contained in:
Tulir Asokan 2020-08-03 16:49:43 +03:00
commit db5121aeca
744 changed files with 33568 additions and 22073 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
.eslintrc.js
View file

@ -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 = { module.exports = {
extends: ["matrix-org", "matrix-org/react-legacy"],
parser: "babel-eslint", parser: "babel-eslint",
extends: [matrixJsSdkPath + "/.eslintrc.js"],
plugins: [ env: {
"react", browser: true,
"react-hooks", node: true,
"flowtype", },
"babel"
],
globals: { globals: {
LANGUAGES_FILE: "readonly", LANGUAGES_FILE: "readonly",
}, },
env: {
es6: true,
},
parserOptions: {
ecmaFeatures: {
jsx: true,
legacyDecorators: true,
}
},
rules: { rules: {
// eslint's built in no-invalid-this rule breaks with class properties // Things we do that break the ideal style
"no-invalid-this": "off", "no-constant-condition": "off",
// so we replace it with a version that is class property aware "prefer-promise-reject-errors": "off",
"babel/no-invalid-this": "error", "no-async-promise-executor": "off",
"quotes": "off",
"indent": "off",
},
// We appear to follow this most of the time, so let's enforce it instead overrides: [{
// of occasionally following it (or catching it in review) "files": ["src/**/*.{ts, tsx}"],
"keyword-spacing": "error", "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",
/** react **/ "quotes": "off",
// This just uses the react plugin to help eslint known when "no-extra-boolean-cast": "off",
// 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
// <Element prop={ consideredError} prop={notConsideredError} />
//
// 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",
},
settings: {
flowtype: {
onlyFilesWithFlowAnnotation: true
},
},
}; };

754
CHANGELOG.md
View file

@ -1,3 +1,757 @@
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 <mx-reply>, 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) 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) [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.7.0...v2.7.1)

BIN
docs/img/RoomListStore2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

39
docs/local-echo-dev.md Normal file
View file

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

79
src/stores/room-list/README.md → docs/room-list-store.md
View file

@ -2,20 +2,31 @@
It's so complicated it needs its own README. It's so complicated it needs its own README.
![](img/RoomListStore2.png)
Legend:
* Orange = External event.
* Purple = Deterministic flow.
* Green = Algorithm definition.
* Red = Exit condition/point.
* Blue = Process definition.
## Algorithms involved ## Algorithms involved
There's two main kinds of algorithms involved in the room list store: list ordering and tag sorting. 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 Throughout the code an intentional decision has been made to call them the List Algorithm and Sorting
Algorithm respectively. The list algorithm determines the behaviour of the room list whereas the sorting Algorithm respectively. The list algorithm determines the primary ordering of a given tag whereas the
algorithm determines how rooms get ordered within tags affected by the list algorithm. 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.
Behaviour of the room list takes the shape of determining what features the room list supports, as well
as determining where and when to apply the sorting algorithm in a tag. The importance algorithm, which
is described later in this doc, is an example of an algorithm which makes heavy behavioural changes
to the room list.
Tag sorting is effectively the comparator supplied to the list algorithm. This gives the list algorithm 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. 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 ### Tag sorting algorithm: Alphabetical
@ -70,33 +81,33 @@ Conveniently, each tag gets ordered by those categories as presented: red rooms
above bold, etc. above bold, etc.
Once the algorithm has determined which rooms belong in which categories, the tag sorting algorithm Once the algorithm has determined which rooms belong in which categories, the tag sorting algorithm
gets applied to each category in a sub-sub-list fashion. This should result in the red rooms (for example) 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 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. collectively the tag will be sorted into categories with red being at the top.
<!-- TODO: Implement sticky rooms as described below --> ## Sticky rooms
The algorithm also has a concept of a 'sticky' room which is the room the user is currently viewing. When the user visits a room, that room becomes 'sticky' in the list, regardless of ordering algorithm.
The sticky room will remain in position on the room list regardless of other factors going on as typically From a code perspective, the underlying algorithm is not aware of a sticky room and instead the base class
clicking on a room will cause it to change categories into 'idle'. This is done by preserving N rooms manages which room is sticky. This is to ensure that all algorithms handle it the same.
above the selected room at all times, where N is the number of rooms above the selected rooms when it was
selected.
For example, if the user has 3 red rooms and selects the middle room, they will always see exactly one The sticky flag is simply to say it will not move higher or lower down the list while it is active. For
room above their selection at all times. If they receive another notification, and the tag ordering is example, if using the importance algorithm, the room would naturally become idle once viewed and thus
specified as Recent, they'll see the new notification go to the top position, and the one that was previously would normally fly down the list out of sight. The sticky room concept instead holds it in place, never
there fall behind the sticky room. letting it fly down until the user moves to another room.
The sticky room's category is technically 'idle' while being viewed and is explicitly pulled out of the Only one room can be sticky at a time. Room updates around the sticky room will still hold the sticky
tag sorting algorithm's input as it must maintain its position in the list. When the user moves to another room in place. The best example of this is the importance algorithm: if the user has 3 red rooms and
room, the previous sticky room gets recalculated to determine which category it needs to be in as the user selects the middle room, they will see exactly one room above their selection at all times. If they
could have been scrolled up while new messages were received. 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.
Further, the sticky room is not aware of category boundaries and thus the user can see a shift in what Though only applicable to the importance algorithm, the sticky room is not aware of category boundaries
kinds of rooms move around their selection. An example would be the user having 4 red rooms, the user and thus the user can see a shift in what kinds of rooms move around their selection. An example would
selecting the third room (leaving 2 above it), and then having the rooms above it read on another device. be the user having 4 red rooms, the user selecting the third room (leaving 2 above it), and then having
This would result in 1 red room and 1 other kind of room above the sticky room as it will try to maintain the rooms above it read on another device. This would result in 1 red room and 1 other kind of room
2 rooms above the sticky 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 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 exactly. This typically happens if the user selects a room and leaves enough rooms where it cannot maintain
@ -128,13 +139,13 @@ maintain the caching behaviour described above.
## Class breakdowns ## Class breakdowns
The `RoomListStore` is the major coordinator of various `Algorithm` implementations, which take care The `RoomListStore` is the major coordinator of various algorithm implementations, which take care
of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` superclass is also of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` class is responsible
responsible for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: tags get
tags get defined on rooms and are not defined as a collection of rooms (unlike how they are presented defined on rooms and are not defined as a collection of rooms (unlike how they are presented to the
to the user). Various list-specific utilities are also included, though they are expected to move user). Various list-specific utilities are also included, though they are expected to move somewhere
somewhere more general when needed. For example, the `membership` utilities could easily be moved more general when needed. For example, the `membership` utilities could easily be moved elsewhere
elsewhere as needed. as needed.
The various bits throughout the room list store should also have jsdoc of some kind to help describe 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. what they do and how they work.

152
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "matrix-react-sdk", "name": "matrix-react-sdk",
"version": "2.7.1", "version": "3.0.0",
"description": "SDK for matrix.org using React", "description": "SDK for matrix.org using React",
"author": "matrix.org", "author": "matrix.org",
"repository": { "repository": {
@ -45,121 +45,125 @@
"start": "echo THIS IS FOR LEGACY PURPOSES ONLY. && yarn start:all", "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: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\"", "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: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:types": "tsc --noEmit --jsx react",
"lint:style": "stylelint 'res/css/**/*.scss'", "lint:style": "stylelint 'res/css/**/*.scss'",
"test": "jest", "test": "jest",
"test:e2e": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080" "test:e2e": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.8.3", "@babel/runtime": "^7.10.5",
"await-lock": "^2.0.1", "await-lock": "^2.0.1",
"blueimp-canvas-to-blob": "^3.5.0", "blueimp-canvas-to-blob": "^3.27.0",
"browser-encrypt-attachment": "^0.3.0", "browser-encrypt-attachment": "^0.3.0",
"browser-request": "^0.3.3", "browser-request": "^0.3.3",
"classnames": "^2.1.2", "classnames": "^2.2.6",
"commonmark": "^0.28.1", "commonmark": "^0.29.1",
"counterpart": "^0.18.0", "counterpart": "^0.18.6",
"create-react-class": "^15.6.0", "create-react-class": "^15.6.3",
"diff-dom": "^4.1.3", "diff-dom": "^4.1.6",
"diff-match-patch": "^1.0.4", "diff-match-patch": "^1.0.5",
"emojibase-data": "^5.0.1", "emojibase-data": "^5.0.1",
"emojibase-regex": "^4.0.1", "emojibase-regex": "^4.0.1",
"escape-html": "^1.0.3", "escape-html": "^1.0.3",
"file-saver": "^1.3.3", "file-saver": "^1.3.8",
"filesize": "3.5.6", "filesize": "3.6.1",
"flux": "2.1.1", "flux": "2.1.1",
"focus-visible": "^5.0.2", "focus-visible": "^5.1.0",
"fuse.js": "^2.2.0", "fuse.js": "^2.7.4",
"gfm.css": "^1.1.1", "gfm.css": "^1.1.2",
"glob-to-regexp": "^0.4.1", "glob-to-regexp": "^0.4.1",
"highlight.js": "^9.15.8", "highlight.js": "^10.1.2",
"html-entities": "^1.2.1", "html-entities": "^1.3.1",
"is-ip": "^2.0.0", "is-ip": "^2.0.0",
"linkifyjs": "^2.1.6", "linkifyjs": "^2.1.9",
"lodash": "^4.17.14", "lodash": "^4.17.19",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
"minimist": "^1.2.0", "minimist": "^1.2.5",
"pako": "^1.0.5", "pako": "^1.0.11",
"parse5": "^5.1.1", "parse5": "^5.1.1",
"png-chunks-extract": "^1.0.0", "png-chunks-extract": "^1.0.0",
"project-name-generator": "^2.1.7", "project-name-generator": "^2.1.7",
"prop-types": "^15.5.8", "prop-types": "^15.7.2",
"qrcode": "^1.4.4", "qrcode": "^1.4.4",
"qs": "^6.6.0", "qs": "^6.9.4",
"react": "^16.9.0", "re-resizable": "^6.5.4",
"react": "^16.13.1",
"react-beautiful-dnd": "^4.0.1", "react-beautiful-dnd": "^4.0.1",
"react-dom": "^16.9.0", "react-dom": "^16.13.1",
"react-focus-lock": "^2.2.1", "react-focus-lock": "^2.4.1",
"react-resizable": "^1.10.1", "react-transition-group": "^4.4.1",
"resize-observer-polyfill": "^1.5.0", "resize-observer-polyfill": "^1.5.1",
"sanitize-html": "^1.18.4", "sanitize-html": "^1.27.1",
"text-encoding-utf-8": "^1.0.1", "text-encoding-utf-8": "^1.0.2",
"url": "^0.11.0", "url": "^0.11.0",
"velocity-animate": "^1.5.2", "velocity-animate": "^1.5.2",
"what-input": "^5.2.6", "what-input": "^5.2.10",
"zxcvbn": "^4.4.2" "zxcvbn": "^4.4.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.7.5", "@babel/cli": "^7.10.5",
"@babel/core": "^7.7.5", "@babel/core": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.7.4", "@babel/parser": "^7.11.0",
"@babel/plugin-proposal-decorators": "^7.7.4", "@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-export-default-from": "^7.7.4", "@babel/plugin-proposal-decorators": "^7.10.5",
"@babel/plugin-proposal-numeric-separator": "^7.7.4", "@babel/plugin-proposal-export-default-from": "^7.10.4",
"@babel/plugin-proposal-object-rest-spread": "^7.7.4", "@babel/plugin-proposal-numeric-separator": "^7.10.4",
"@babel/plugin-transform-flow-comments": "^7.7.4", "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.8.3", "@babel/plugin-transform-flow-comments": "^7.10.4",
"@babel/preset-env": "^7.7.6", "@babel/plugin-transform-runtime": "^7.10.5",
"@babel/preset-flow": "^7.7.4", "@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.7.4", "@babel/preset-flow": "^7.10.4",
"@babel/preset-typescript": "^7.7.4", "@babel/preset-react": "^7.10.4",
"@babel/register": "^7.7.4", "@babel/preset-typescript": "^7.10.4",
"@peculiar/webcrypto": "^1.0.22", "@babel/register": "^7.10.5",
"@babel/traverse": "^7.11.0",
"@peculiar/webcrypto": "^1.1.2",
"@types/classnames": "^2.2.10", "@types/classnames": "^2.2.10",
"@types/counterpart": "^0.18.1",
"@types/flux": "^3.1.9", "@types/flux": "^3.1.9",
"@types/lodash": "^4.14.152", "@types/linkifyjs": "^2.1.3",
"@types/lodash": "^4.14.158",
"@types/modernizr": "^3.5.3", "@types/modernizr": "^3.5.3",
"@types/node": "^12.12.41", "@types/node": "^12.12.51",
"@types/qrcode": "^1.3.4", "@types/qrcode": "^1.3.4",
"@types/react": "^16.9", "@types/react": "^16.9",
"@types/react-dom": "^16.9.8", "@types/react-dom": "^16.9.8",
"@types/react-transition-group": "^4.4.0",
"@types/sanitize-html": "^1.23.3",
"@types/zxcvbn": "^4.4.0", "@types/zxcvbn": "^4.4.0",
"babel-eslint": "^10.0.3", "@typescript-eslint/eslint-plugin": "^3.7.0",
"@typescript-eslint/parser": "^3.7.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^24.9.0", "babel-jest": "^24.9.0",
"chokidar": "^3.3.1", "chokidar": "^3.4.1",
"concurrently": "^4.0.1", "concurrently": "^4.1.2",
"enzyme": "^3.10.0", "enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.1", "enzyme-adapter-react-16": "^1.15.2",
"eslint": "^5.12.0", "eslint": "7.5.0",
"eslint-config-google": "^0.7.1", "eslint-config-matrix-org": "^0.1.2",
"eslint-plugin-babel": "^5.2.1", "eslint-plugin-babel": "^5.3.1",
"eslint-plugin-flowtype": "^2.30.0", "eslint-plugin-flowtype": "^2.50.3",
"eslint-plugin-jest": "^23.0.4", "eslint-plugin-react": "^7.20.3",
"eslint-plugin-react": "^7.7.0", "eslint-plugin-react-hooks": "^2.5.1",
"eslint-plugin-react-hooks": "^2.0.1",
"estree-walker": "^0.5.0",
"file-loader": "^3.0.1", "file-loader": "^3.0.1",
"flow-parser": "^0.57.3", "glob": "^5.0.15",
"glob": "^5.0.14",
"jest": "^24.9.0", "jest": "^24.9.0",
"jest-canvas-mock": "^2.2.0", "jest-canvas-mock": "^2.2.0",
"lolex": "^5.1.2", "lolex": "^5.1.2",
"matrix-mock-request": "^1.2.3", "matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.2.2", "matrix-react-test-utils": "^0.2.2",
"react-test-renderer": "^16.9.0", "react-test-renderer": "^16.13.1",
"rimraf": "^2.4.3", "rimraf": "^2.7.1",
"source-map-loader": "^0.2.3", "source-map-loader": "^0.2.4",
"stylelint": "^9.10.1", "stylelint": "^9.10.1",
"stylelint-config-standard": "^18.2.0", "stylelint-config-standard": "^18.3.0",
"stylelint-scss": "^3.9.0", "stylelint-scss": "^3.18.0",
"tslint": "^5.20.1", "typescript": "^3.9.7",
"typescript": "^3.7.3", "walk": "^2.3.14",
"walk": "^2.3.9", "webpack": "^4.43.0",
"webpack": "^4.20.2", "webpack-cli": "^3.3.12"
"webpack-cli": "^3.1.1"
}, },
"jest": { "jest": {
"testMatch": [ "testMatch": [

127
res/css/_common.scss
View file

@ -19,7 +19,7 @@ limitations under the License.
@import "./_font-sizes.scss"; @import "./_font-sizes.scss";
:root { :root {
font-size: 15px; font-size: 10px;
} }
html { html {
@ -160,9 +160,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
background-color: transparent; background-color: transparent;
color: $input-darker-fg-color; color: $input-darker-fg-color;
border-radius: 4px; border-radius: 4px;
border: 1px solid $dialog-close-fg-color; border: 1px solid rgba($primary-fg-color, .1);
// these things should probably not be defined // these things should probably not be defined globally
// globally
margin: 9px; margin: 9px;
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -175,7 +174,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder, :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
.mx_textinput input::placeholder { .mx_textinput input::placeholder {
color: $roomsublist-label-fg-color; color: rgba($input-darker-fg-color, .75);
} }
} }
@ -227,7 +226,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
#mx_theme_tertiaryAccentColor { #mx_theme_tertiaryAccentColor {
color: $roomsublist-label-bg-color; color: $tertiary-accent-color;
} }
/* Expected z-indexes for dialogs: /* Expected z-indexes for dialogs:
@ -264,7 +263,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
padding: 25px 30px 30px 30px; padding: 25px 30px 30px 30px;
max-height: 80%; max-height: 80%;
box-shadow: 2px 15px 30px 0 $dialog-shadow-color; box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
border-radius: 4px; border-radius: 8px;
overflow-y: auto; overflow-y: auto;
} }
@ -319,7 +318,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
.mx_Dialog_titleImage { .mx_Dialog_titleImage {
vertical-align: middle; vertical-align: sub;
width: 25px; width: 25px;
height: 25px; height: 25px;
margin-left: -2px; margin-left: -2px;
@ -428,6 +427,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border-radius: 8px; border-radius: 8px;
padding: 0px; padding: 0px;
box-shadow: none; 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 // TODO: Review mx_GeneralButton usage to see if it can use a different class
@ -581,3 +584,111 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
// So it fits in the space provided by the page // So it fits in the space provided by the page
max-width: 120px; max-width: 120px;
} }
// A context menu that largely fits the | [icon] [label] | format.
.mx_IconizedContextMenu {
min-width: 146px;
.mx_IconizedContextMenu_optionList {
& > * {
padding-left: 20px;
padding-right: 20px;
}
// the notFirst class is for cases where the optionList might be under a header of sorts.
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
// This is a bit of a hack when we could just use a simple border-top property,
// however we have a (kinda) good reason for doing it this way: we need opacity.
// To get the right color, we need an opacity modifier which means we have to work
// around the problem. PostCSS doesn't support the opacity() function, and if we
// use something like postcss-functions we quickly run into an issue where the
// function we would define gets passed a CSS variable for custom themes, which
// can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
//
// Therefore, we just hack in a line and border the thing ourselves
&::before {
border-top: 1px solid $primary-fg-color;
opacity: 0.1;
content: '';
// Counteract the padding problems (width: 100% ignores the 40px padding,
// unless we position it absolutely then it does the right thing).
width: 100%;
position: absolute;
left: 0;
}
}
// round the top corners of the top button for the hover effect to be bounded
&:first-child .mx_AccessibleButton:first-child {
border-radius: 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_compact {
.mx_IconizedContextMenu_optionList > * {
padding: 8px 16px 8px 11px;
}
}
}
@define-mixin ProgressBarColour $colour {
color: $colour;
&::-moz-progress-bar {
background-color: $colour;
}
&::-webkit-progress-value {
background-color: $colour;
}
}
@define-mixin ProgressBarBorderRadius $radius {
border-radius: $radius;
&::-moz-progress-bar {
border-radius: $radius;
}
&::-webkit-progress-bar,
&::-webkit-progress-value {
border-radius: $radius;
}
}

22
res/css/_components.scss
View file

@ -15,19 +15,20 @@
@import "./structures/_MainSplit.scss"; @import "./structures/_MainSplit.scss";
@import "./structures/_MatrixChat.scss"; @import "./structures/_MatrixChat.scss";
@import "./structures/_MyGroups.scss"; @import "./structures/_MyGroups.scss";
@import "./structures/_NonUrgentToastContainer.scss";
@import "./structures/_NotificationPanel.scss"; @import "./structures/_NotificationPanel.scss";
@import "./structures/_RightPanel.scss"; @import "./structures/_RightPanel.scss";
@import "./structures/_RoomDirectory.scss"; @import "./structures/_RoomDirectory.scss";
@import "./structures/_RoomSearch.scss";
@import "./structures/_RoomStatusBar.scss"; @import "./structures/_RoomStatusBar.scss";
@import "./structures/_RoomSubList.scss";
@import "./structures/_RoomView.scss"; @import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss"; @import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss"; @import "./structures/_SearchBox.scss";
@import "./structures/_TabbedView.scss"; @import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss"; @import "./structures/_TagPanel.scss";
@import "./structures/_ToastContainer.scss"; @import "./structures/_ToastContainer.scss";
@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss"; @import "./structures/_UploadBar.scss";
@import "./structures/_UserMenu.scss";
@import "./structures/_ViewSource.scss"; @import "./structures/_ViewSource.scss";
@import "./structures/auth/_CompleteSecurity.scss"; @import "./structures/auth/_CompleteSecurity.scss";
@import "./structures/auth/_Login.scss"; @import "./structures/auth/_Login.scss";
@ -46,7 +47,9 @@
@import "./views/auth/_ServerTypeSelector.scss"; @import "./views/auth/_ServerTypeSelector.scss";
@import "./views/auth/_Welcome.scss"; @import "./views/auth/_Welcome.scss";
@import "./views/avatars/_BaseAvatar.scss"; @import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_DecoratedRoomAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss"; @import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/avatars/_PulsedAvatar.scss";
@import "./views/context_menus/_MessageContextMenu.scss"; @import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_RoomTileContextMenu.scss"; @import "./views/context_menus/_RoomTileContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss"; @import "./views/context_menus/_StatusMessageContextMenu.scss";
@ -68,10 +71,12 @@
@import "./views/dialogs/_KeyboardShortcutsDialog.scss"; @import "./views/dialogs/_KeyboardShortcutsDialog.scss";
@import "./views/dialogs/_MessageEditHistoryDialog.scss"; @import "./views/dialogs/_MessageEditHistoryDialog.scss";
@import "./views/dialogs/_NewSessionReviewDialog.scss"; @import "./views/dialogs/_NewSessionReviewDialog.scss";
@import "./views/dialogs/_RebrandDialog.scss";
@import "./views/dialogs/_RoomSettingsDialog.scss"; @import "./views/dialogs/_RoomSettingsDialog.scss";
@import "./views/dialogs/_RoomSettingsDialogBridges.scss"; @import "./views/dialogs/_RoomSettingsDialogBridges.scss";
@import "./views/dialogs/_RoomUpgradeDialog.scss"; @import "./views/dialogs/_RoomUpgradeDialog.scss";
@import "./views/dialogs/_RoomUpgradeWarningDialog.scss"; @import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
@import "./views/dialogs/_ServerOfflineDialog.scss";
@import "./views/dialogs/_SetEmailDialog.scss"; @import "./views/dialogs/_SetEmailDialog.scss";
@import "./views/dialogs/_SetMxIdDialog.scss"; @import "./views/dialogs/_SetMxIdDialog.scss";
@import "./views/dialogs/_SetPasswordDialog.scss"; @import "./views/dialogs/_SetPasswordDialog.scss";
@ -102,7 +107,6 @@
@import "./views/elements/_IconButton.scss"; @import "./views/elements/_IconButton.scss";
@import "./views/elements/_ImageView.scss"; @import "./views/elements/_ImageView.scss";
@import "./views/elements/_InlineSpinner.scss"; @import "./views/elements/_InlineSpinner.scss";
@import "./views/elements/_InteractiveTooltip.scss";
@import "./views/elements/_ManageIntegsButton.scss"; @import "./views/elements/_ManageIntegsButton.scss";
@import "./views/elements/_PowerSelector.scss"; @import "./views/elements/_PowerSelector.scss";
@import "./views/elements/_ProgressBar.scss"; @import "./views/elements/_ProgressBar.scss";
@ -115,6 +119,7 @@
@import "./views/elements/_Slider.scss"; @import "./views/elements/_Slider.scss";
@import "./views/elements/_Spinner.scss"; @import "./views/elements/_Spinner.scss";
@import "./views/elements/_StyledCheckbox.scss"; @import "./views/elements/_StyledCheckbox.scss";
@import "./views/elements/_StyledRadioButton.scss";
@import "./views/elements/_SyntaxHighlight.scss"; @import "./views/elements/_SyntaxHighlight.scss";
@import "./views/elements/_TextWithTooltip.scss"; @import "./views/elements/_TextWithTooltip.scss";
@import "./views/elements/_ToggleSwitch.scss"; @import "./views/elements/_ToggleSwitch.scss";
@ -140,7 +145,6 @@
@import "./views/messages/_MjolnirBody.scss"; @import "./views/messages/_MjolnirBody.scss";
@import "./views/messages/_ReactionsRow.scss"; @import "./views/messages/_ReactionsRow.scss";
@import "./views/messages/_ReactionsRowButton.scss"; @import "./views/messages/_ReactionsRowButton.scss";
@import "./views/messages/_ReactionsRowButtonTooltip.scss";
@import "./views/messages/_RedactedBody.scss"; @import "./views/messages/_RedactedBody.scss";
@import "./views/messages/_RoomAvatarEvent.scss"; @import "./views/messages/_RoomAvatarEvent.scss";
@import "./views/messages/_SenderProfile.scss"; @import "./views/messages/_SenderProfile.scss";
@ -163,32 +167,31 @@
@import "./views/rooms/_EventTile.scss"; @import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_GroupLayout.scss"; @import "./views/rooms/_GroupLayout.scss";
@import "./views/rooms/_IRCLayout.scss"; @import "./views/rooms/_IRCLayout.scss";
@import "./views/rooms/_InviteOnlyIcon.scss";
@import "./views/rooms/_JumpToBottomButton.scss"; @import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewWidget.scss"; @import "./views/rooms/_LinkPreviewWidget.scss";
@import "./views/rooms/_MemberInfo.scss"; @import "./views/rooms/_MemberInfo.scss";
@import "./views/rooms/_MemberList.scss"; @import "./views/rooms/_MemberList.scss";
@import "./views/rooms/_MessageComposer.scss"; @import "./views/rooms/_MessageComposer.scss";
@import "./views/rooms/_MessageComposerFormatBar.scss"; @import "./views/rooms/_MessageComposerFormatBar.scss";
@import "./views/rooms/_NotificationBadge.scss";
@import "./views/rooms/_PinnedEventTile.scss"; @import "./views/rooms/_PinnedEventTile.scss";
@import "./views/rooms/_PinnedEventsPanel.scss"; @import "./views/rooms/_PinnedEventsPanel.scss";
@import "./views/rooms/_PresenceLabel.scss"; @import "./views/rooms/_PresenceLabel.scss";
@import "./views/rooms/_ReplyPreview.scss"; @import "./views/rooms/_ReplyPreview.scss";
@import "./views/rooms/_ReplyTile.scss"; @import "./views/rooms/_ReplyTile.scss";
@import "./views/rooms/_RoomBreadcrumbs.scss"; @import "./views/rooms/_RoomBreadcrumbs.scss";
@import "./views/rooms/_RoomDropTarget.scss";
@import "./views/rooms/_RoomHeader.scss"; @import "./views/rooms/_RoomHeader.scss";
@import "./views/rooms/_RoomList.scss"; @import "./views/rooms/_RoomList.scss";
@import "./views/rooms/_RoomPreviewBar.scss"; @import "./views/rooms/_RoomPreviewBar.scss";
@import "./views/rooms/_RoomRecoveryReminder.scss"; @import "./views/rooms/_RoomRecoveryReminder.scss";
@import "./views/rooms/_RoomSublist2.scss"; @import "./views/rooms/_RoomSublist.scss";
@import "./views/rooms/_RoomTile.scss"; @import "./views/rooms/_RoomTile.scss";
@import "./views/rooms/_RoomTileIcon.scss";
@import "./views/rooms/_RoomUpgradeWarningBar.scss"; @import "./views/rooms/_RoomUpgradeWarningBar.scss";
@import "./views/rooms/_SearchBar.scss"; @import "./views/rooms/_SearchBar.scss";
@import "./views/rooms/_SendMessageComposer.scss"; @import "./views/rooms/_SendMessageComposer.scss";
@import "./views/rooms/_Stickers.scss"; @import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss"; @import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_UserOnlineDot.scss";
@import "./views/rooms/_WhoIsTypingTile.scss"; @import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_AvatarSetting.scss"; @import "./views/settings/_AvatarSetting.scss";
@import "./views/settings/_CrossSigningPanel.scss"; @import "./views/settings/_CrossSigningPanel.scss";
@ -216,7 +219,8 @@
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss"; @import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss"; @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/terms/_InlineTermsAgreement.scss"; @import "./views/terms/_InlineTermsAgreement.scss";
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
@import "./views/verification/_VerificationShowSas.scss"; @import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallView.scss"; @import "./views/voip/_CallView.scss";
@import "./views/voip/_IncomingCallbox.scss";
@import "./views/voip/_VideoView.scss"; @import "./views/voip/_VideoView.scss";

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

@ -14,59 +14,60 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$font-1px: 0.067rem; $font-1px: 0.1rem;
$font-1-5px: 0.100rem; $font-1-5px: 0.15rem;
$font-2px: 0.133rem; $font-2px: 0.2rem;
$font-3px: 0.200rem; $font-3px: 0.3rem;
$font-4px: 0.267rem; $font-4px: 0.4rem;
$font-5px: 0.333rem; $font-5px: 0.5rem;
$font-6px: 0.400rem; $font-6px: 0.6rem;
$font-7px: 0.467rem; $font-7px: 0.7rem;
$font-8px: 0.533rem; $font-8px: 0.8rem;
$font-9px: 0.600rem; $font-9px: 0.9rem;
$font-10px: 0.667rem; $font-10px: 1.0rem;
$font-10-4px: 0.693rem; $font-10-4px: 1.04rem;
$font-11px: 0.733rem; $font-11px: 1.1rem;
$font-12px: 0.800rem; $font-12px: 1.2rem;
$font-13px: 0.867rem; $font-13px: 1.3rem;
$font-14px: 0.933rem; $font-14px: 1.4rem;
$font-15px: 1.000rem; $font-15px: 1.5rem;
$font-16px: 1.067rem; $font-16px: 1.6rem;
$font-17px: 1.133rem; $font-17px: 1.7rem;
$font-18px: 1.200rem; $font-18px: 1.8rem;
$font-19px: 1.267rem; $font-19px: 1.9rem;
$font-20px: 1.3333333rem; $font-20px: 2.0rem;
$font-21px: 1.400rem; $font-21px: 2.1rem;
$font-22px: 1.467rem; $font-22px: 2.2rem;
$font-23px: 1.533rem; $font-23px: 2.3rem;
$font-24px: 1.600rem; $font-24px: 2.4rem;
$font-25px: 1.667rem; $font-25px: 2.5rem;
$font-26px: 1.733rem; $font-26px: 2.6rem;
$font-27px: 1.800rem; $font-27px: 2.7rem;
$font-28px: 1.867rem; $font-28px: 2.8rem;
$font-29px: 1.933rem; $font-29px: 2.9rem;
$font-30px: 2.000rem; $font-30px: 3.0rem;
$font-31px: 2.067rem; $font-31px: 3.1rem;
$font-32px: 2.133rem; $font-32px: 3.2rem;
$font-33px: 2.200rem; $font-33px: 3.3rem;
$font-34px: 2.267rem; $font-34px: 3.4rem;
$font-35px: 2.333rem; $font-35px: 3.5rem;
$font-36px: 2.400rem; $font-36px: 3.6rem;
$font-37px: 2.467rem; $font-37px: 3.7rem;
$font-38px: 2.533rem; $font-38px: 3.8rem;
$font-39px: 2.600rem; $font-39px: 3.9rem;
$font-40px: 2.667rem; $font-40px: 4.0rem;
$font-41px: 2.733rem; $font-41px: 4.1rem;
$font-42px: 2.800rem; $font-42px: 4.2rem;
$font-43px: 2.867rem; $font-43px: 4.3rem;
$font-44px: 2.933rem; $font-44px: 4.4rem;
$font-45px: 3.000rem; $font-45px: 4.5rem;
$font-46px: 3.067rem; $font-46px: 4.6rem;
$font-47px: 3.133rem; $font-47px: 4.7rem;
$font-48px: 3.200rem; $font-48px: 4.8rem;
$font-49px: 3.267rem; $font-49px: 4.9rem;
$font-50px: 3.333rem; $font-50px: 5.0rem;
$font-51px: 3.400rem; $font-51px: 5.1rem;
$font-52px: 3.467rem; $font-52px: 5.2rem;
$font-88px: 5.887rem; $font-78px: 7.8rem;
$font-400px: 26.667rem; $font-88px: 8.8rem;
$font-400px: 40rem;

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

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

6
res/css/structures/_CustomRoomTagPanel.scss
View file

@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// TODO: Update design for custom tags to match new designs
.mx_LeftPanel_tagPanelContainer { .mx_LeftPanel_tagPanelContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -50,7 +52,7 @@ limitations under the License.
background-color: $accent-color-alt; background-color: $accent-color-alt;
width: 5px; width: 5px;
position: absolute; position: absolute;
left: -15px; left: -9px;
border-radius: 0 3px 3px 0; 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)
} }

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

@ -109,3 +109,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line { .mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
background-color: $primary-bg-color; background-color: $primary-bg-color;
} }
.mx_FilePanel_empty::before {
mask-image: url('$(res)/img/element-icons/room/files.svg');
}

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

@ -29,12 +29,12 @@ limitations under the License.
align-items: center; align-items: center;
display: flex; display: flex;
padding-bottom: 10px; padding-bottom: 10px;
padding-left: 19px;
} }
.mx_GroupView_header_view { .mx_GroupView_header_view {
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
padding-bottom: 0px; padding-bottom: 0px;
padding-left: 19px;
padding-right: 8px; padding-right: 8px;
} }
@ -63,11 +63,11 @@ limitations under the License.
} }
.mx_GroupHeader_editButton::before { .mx_GroupHeader_editButton::before {
mask-image: url('$(res)/img/feather-customised/settings.svg'); mask-image: url('$(res)/img/element-icons/settings.svg');
} }
.mx_GroupHeader_shareButton::before { .mx_GroupHeader_shareButton::before {
mask-image: url('$(res)/img/icons-share.svg'); mask-image: url('$(res)/img/element-icons/room/share.svg');
} }
.mx_GroupView_hostingSignup img { .mx_GroupView_hostingSignup img {
@ -182,6 +182,7 @@ limitations under the License.
.mx_GroupView_body { .mx_GroupView_body {
flex-grow: 1; flex-grow: 1;
margin: 0 24px;
} }
.mx_GroupView_rooms { .mx_GroupView_rooms {
@ -250,6 +251,7 @@ limitations under the License.
.mx_GroupView_membershipSubSection { .mx_GroupView_membershipSubSection {
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
padding-bottom: 8px;
} }
.mx_GroupView_membershipSubSection .mx_Spinner { .mx_GroupView_membershipSubSection .mx_Spinner {

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

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

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

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

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

@ -1,6 +1,5 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -15,172 +14,171 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_LeftPanel_container { $tagPanelWidth: 56px; // only applies in this file, used for calculations
display: flex;
/* LeftPanel 260px */
min-width: 260px;
max-width: 50%;
flex: 0 0 auto;
}
// TODO: Remove temporary indicator of new room list implementation.
// This border is meant to visually distinguish between the two components when the
// user has turned on the new room list implementation, at least until the designs
// themselves give it away.
.mx_LeftPanel2 .mx_LeftPanel {
border-left: 5px #e26dff solid;
}
.mx_LeftPanel_container.collapsed {
min-width: unset;
/* Collapsed LeftPanel 50px */
flex: 0 0 50px;
}
.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 70px + Collapsed LeftPanel 50px */
flex: 0 0 120px;
}
.mx_LeftPanel_tagPanelContainer {
flex: 0 0 70px;
height: 100%;
}
.mx_LeftPanel_hideButton {
position: absolute;
top: 10px;
right: 0px;
padding: 8px;
cursor: pointer;
}
.mx_LeftPanel { .mx_LeftPanel {
flex: 1; background-color: $roomlist-bg-color;
overflow-x: hidden; min-width: 260px;
max-width: 50%;
// Create a row-based flexbox for the TagPanel and the room list
display: flex;
.mx_LeftPanel_tagPanelContainer {
flex-grow: 0;
flex-shrink: 0;
flex-basis: $tagPanelWidth;
height: 100%;
// Create another flexbox so the TagPanel fills the container
display: flex;
// TagPanel handles its own CSS
}
&:not(.mx_LeftPanel_hasTagPanel) {
.mx_LeftPanel_roomListContainer {
width: 100%;
}
}
// Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc
.mx_LeftPanel_roomListContainer {
width: calc(100% - $tagPanelWidth);
background-color: $roomlist-bg-color;
// Create another flexbox (this time a column) for the room list components
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0;
}
.mx_LeftPanel .mx_AppTile_mini { .mx_LeftPanel_userHeader {
height: 132px; /* 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
.mx_LeftPanel .mx_RoomList_scrollbar { // Create another flexbox column for the rows to stack within
order: 1;
flex: 1 1 0;
overflow-y: auto;
z-index: 6;
}
.mx_LeftPanel .mx_BottomLeftMenu {
order: 3;
border-top: 1px solid $panel-divider-color;
margin-left: 16px; /* gutter */
margin-right: 16px; /* gutter */
flex: 0 0 60px;
z-index: 1;
}
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px;
margin-bottom: 9px;
}
.mx_LeftPanel .mx_BottomLeftMenu_options {
margin-top: 18px;
}
.mx_BottomLeftMenu_options object {
pointer-events: none;
}
.mx_BottomLeftMenu_options > div {
display: inline-block;
}
.mx_BottomLeftMenu_options .mx_RoleButton {
margin-left: 0px;
margin-right: 10px;
height: 30px;
}
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
float: right;
}
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
margin-right: 0px;
}
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
float: none;
}
.mx_MatrixChat_useCompactLayout {
.mx_LeftPanel .mx_BottomLeftMenu {
flex: 0 0 50px;
}
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px;
}
.mx_LeftPanel .mx_BottomLeftMenu_options {
margin-top: 12px;
}
}
.mx_LeftPanel_exploreAndFilterRow {
display: flex; display: flex;
flex-direction: column;
}
.mx_SearchBox { .mx_LeftPanel_breadcrumbsContainer {
flex: 1 1 0; overflow-y: hidden;
min-width: 0; overflow-x: scroll;
margin: 4px 9px 1px 9px; 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_explore { .mx_LeftPanel_filterContainer {
flex: 0 0 50%; margin-left: 12px;
overflow: hidden; margin-right: 12px;
transition: flex-basis 0.2s;
box-sizing: border-box;
&.mx_LeftPanel_explore_hidden { flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
// Create a flexbox to organize the inputs
display: flex;
align-items: center;
.mx_RoomSearch_expanded + .mx_LeftPanel_exploreButton {
// Cheaty way to return the occupied space to the filter input
flex-basis: 0; 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_AccessibleButton { .mx_LeftPanel_exploreButton {
font-size: $font-14px; width: 28px;
margin: 4px 0 1px 9px; height: 28px;
padding: 9px; border-radius: 20px;
padding-left: 42px; background-color: $roomlist-button-bg-color;
font-weight: 600;
color: $notice-secondary-color;
position: relative; position: relative;
border-radius: 4px; margin-left: 8px;
&:hover {
background-color: $primary-bg-color;
}
&::before { &::before {
cursor: pointer; content: '';
mask: url('$(res)/img/explore.svg'); position: absolute;
mask-repeat: no-repeat; top: 6px;
mask-position: center center; left: 6px;
content: "";
left: 14px;
top: 10px;
width: 16px; width: 16px;
height: 16px; height: 16px;
background-color: $notice-secondary-color; mask-image: url('$(res)/img/feather-customised/compass.svg');
position: absolute; mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
}
.mx_LeftPanel_roomListWrapper {
overflow: hidden;
margin-top: 10px; // so we're not up against the search/filter
&.mx_LeftPanel_roomListWrapper_stickyBottom {
padding-bottom: 32px;
}
&.mx_LeftPanel_roomListWrapper_stickyTop {
padding-top: 32px;
}
}
.mx_LeftPanel_actualRoomListContainer {
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;
}
}
} }
} }
} }

20
res/css/structures/_MainSplit.scss
View file

@ -21,8 +21,20 @@ limitations under the License.
height: 100%; height: 100%;
} }
// move hit area 5px to the right so it doesn't overlap with the timeline scrollbar .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
.mx_MainSplit > .mx_ResizeHandle.mx_ResizeHandle_horizontal { padding: 5px;
margin: 0 -10px 0 0;
padding: 0 10px 0 0; &: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;
}
} }

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

@ -66,7 +66,7 @@ limitations under the License.
} }
/* not the left panel, and not the resize handle, so the roomview/groupview/... */ /* not the left panel, and not the resize handle, so the roomview/groupview/... */
.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_ResizeHandle) { .mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) {
background-color: $primary-bg-color; background-color: $primary-bg-color;
flex: 1 1 0; flex: 1 1 0;
@ -78,3 +78,24 @@ limitations under the License.
*/ */
height: 100%; 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;
}
}

35
res/css/structures/_NonUrgentToastContainer.scss Normal file
View file

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

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

@ -99,3 +99,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_content { .mx_NotificationPanel .mx_EventTile_content {
margin-right: 0px; margin-right: 0px;
} }
.mx_NotificationPanel_empty::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}

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

@ -19,10 +19,16 @@ limitations under the License.
overflow-x: hidden; overflow-x: hidden;
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
min-width: 264px;
max-width: 50%;
display: flex; display: flex;
flex-direction: column; 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 { .mx_RightPanel_header {
@ -44,22 +50,20 @@ limitations under the License.
.mx_RightPanel_headerButton { .mx_RightPanel_headerButton {
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;
vertical-align: top; margin-left: 1px;
margin-left: 5px; margin-right: 1px;
margin-right: 5px; height: 32px;
text-align: center; width: 32px;
border-bottom: 2px solid transparent;
height: 20px;
width: 20px;
position: relative; position: relative;
border-radius: 100%;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 4px; // center with parent of 32px
left: 0; left: 4px; // center with parent of 32px
height: 20px; height: 24px;
width: 20px; width: 24px;
background-color: $rightpanel-button-color; background-color: $rightpanel-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
@ -67,38 +71,46 @@ limitations under the License.
} }
.mx_RightPanel_membersButton::before { .mx_RightPanel_membersButton::before {
mask-image: url('$(res)/img/feather-customised/user.svg'); mask-image: url('$(res)/img/element-icons/room/members.svg');
mask-position: center; mask-position: center;
} }
.mx_RightPanel_filesButton::before { .mx_RightPanel_filesButton::before {
mask-image: url('$(res)/img/feather-customised/files.svg'); mask-image: url('$(res)/img/element-icons/room/files.svg');
mask-position: center; mask-position: center;
} }
.mx_RightPanel_notifsButton::before { .mx_RightPanel_notifsButton::before {
mask-image: url('$(res)/img/feather-customised/notifications.svg'); mask-image: url('$(res)/img/element-icons/notifications.svg');
mask-position: center; mask-position: center;
} }
.mx_RightPanel_groupMembersButton::before { .mx_RightPanel_groupMembersButton::before {
mask-image: url('$(res)/img/icons-people.svg'); mask-image: url('$(res)/img/element-icons/community-members.svg');
mask-position: center; mask-position: center;
} }
.mx_RightPanel_roomsButton::before { .mx_RightPanel_roomsButton::before {
mask-image: url('$(res)/img/icons-room-nobg.svg'); mask-image: url('$(res)/img/element-icons/community-rooms.svg');
mask-position: center; mask-position: center;
} }
.mx_RightPanel_headerButton_highlight::after { .mx_RightPanel_headerButton_highlight {
content: ''; background: rgba($accent-color, 0.25);
position: absolute; // make the icon the accent color too
bottom: -6px; &::before {
left: 0; background-color: $accent-color;
right: 0; }
height: 2px; }
background-color: $button-bg-color;
.mx_RightPanel_headerButton:not(.mx_RightPanel_headerButton_highlight) {
&:hover {
background: rgba($accent-color, 0.1);
&::before {
background-color: $accent-color;
}
}
} }
.mx_RightPanel_headerButton_badge { .mx_RightPanel_headerButton_badge {
@ -132,3 +144,28 @@ limitations under the License.
order: 2; order: 2;
margin: auto; 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;
}
}

81
res/css/structures/_RoomSearch.scss Normal file
View file

@ -0,0 +1,81 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
// Note: this component expects to be contained within a flexbox
.mx_RoomSearch {
flex: 1;
border-radius: 20px;
background-color: $roomlist-button-bg-color;
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/feather-customised/search-input.svg');
mask-repeat: no-repeat;
background: $primary-fg-color;
margin-left: 7px;
}
.mx_RoomSearch_input {
border: none !important; // !important to override default app-wide styles
flex: 1 !important; // !important to override default app-wide styles
color: $primary-fg-color !important; // !important to override default app-wide styles
padding: 0;
height: 100%;
width: 100%;
font-size: $font-12px;
line-height: $font-16px;
&:not(.mx_RoomSearch_inputExpanded)::placeholder {
color: $primary-fg-color !important; // !important to override default app-wide styles
}
}
&.mx_RoomSearch_expanded {
.mx_RoomSearch_clearButton {
width: 16px;
height: 16px;
mask-image: url('$(res)/img/feather-customised/x.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
margin-right: 8px;
}
}
.mx_RoomSearch_clearButton {
width: 0;
height: 0;
}
&.mx_RoomSearch_minimized {
border-radius: 32px;
height: auto;
width: auto;
padding: 8px;
.mx_RoomSearch_icon {
margin-left: 0;
}
}
}

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

@ -1,187 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/* a word of explanation about the flex-shrink values employed here:
there are 3 priotized categories of screen real-estate grabbing,
each with a flex-shrink difference of 4 order of magnitude,
so they ideally wouldn't affect each other.
lowest category: .mx_RoomSubList
flex-shrink: 10000000
distribute size of items within the same category by their size
middle category: .mx_RoomSubList.resized-sized
flex-shrink: 1000
applied when using the resizer, will have a max-height set to it,
to limit the size
highest category: .mx_RoomSubList.resized-all
flex-shrink: 1
small flex-shrink value (1), is only added if you can drag the resizer so far
so in practice you can only assign this category if there is enough space.
*/
.mx_RoomSubList {
display: flex;
flex-direction: column;
}
.mx_RoomSubList_nonEmpty .mx_AutoHideScrollbar_offset {
padding-bottom: 4px;
}
.mx_RoomSubList_labelContainer {
display: flex;
flex-direction: row;
align-items: center;
flex: 0 0 auto;
margin: 0 8px;
padding: 0 8px;
height: 36px;
}
.mx_RoomSubList_labelContainer.focus-visible:focus-within {
background-color: $roomtile-focused-bg-color;
}
.mx_RoomSubList_label {
flex: 1;
cursor: pointer;
display: flex;
align-items: center;
padding: 0 6px;
}
.mx_RoomSubList_label > span {
flex: 1 1 auto;
text-transform: uppercase;
color: $roomsublist-label-fg-color;
font-weight: 700;
font-size: $font-12px;
margin-left: 8px;
}
.mx_RoomSubList_badge > div {
flex: 0 0 auto;
border-radius: $font-16px;
font-weight: 600;
font-size: $font-12px;
padding: 0 5px;
color: $roomtile-badge-fg-color;
background-color: $roomtile-name-color;
cursor: pointer;
}
.mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
margin-left: 7px;
}
.mx_RoomSubList_addRoom {
background-color: $roomheader-addroom-bg-color;
border-radius: 10px; // 16/2 + 2 padding
height: 16px;
flex: 0 0 16px;
position: relative;
&::before {
background-color: $roomheader-addroom-fg-color;
mask: url('$(res)/img/icons-room-add.svg');
mask-repeat: no-repeat;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
.mx_RoomSubList_badgeHighlight > div {
color: $accent-fg-color;
background-color: $warning-color;
}
.mx_RoomSubList_chevron {
pointer-events: none;
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
mask-repeat: no-repeat;
transition: transform 0.2s ease-in;
width: 10px;
height: 6px;
margin-left: 2px;
background-color: $roomsublist-label-fg-color;
}
.mx_RoomSubList_chevronDown {
transform: rotateZ(0deg);
}
.mx_RoomSubList_chevronUp {
transform: rotateZ(180deg);
}
.mx_RoomSubList_chevronRight {
transform: rotateZ(-90deg);
}
.mx_RoomSubList_scroll {
/* let rooms list grab as much space as it needs (auto),
potentially overflowing and showing a scrollbar */
flex: 0 1 auto;
padding: 0 8px;
}
.collapsed {
.mx_RoomSubList_scroll {
padding: 0;
}
.mx_RoomSubList_labelContainer {
margin-right: 8px;
margin-left: 2px;
padding: 0;
}
.mx_RoomSubList_addRoom {
margin-left: 3px;
margin-right: 10px;
}
.mx_RoomSubList_label > span {
display: none;
}
}
// overflow indicators
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
&.mx_IndicatorScrollbar_topOverflow::before {
position: sticky;
content: "";
top: 0;
left: 0;
right: 0;
height: 8px;
z-index: 100;
display: block;
pointer-events: none;
transition: background-image 0.1s ease-in;
background: linear-gradient(to top, $panel-gradient);
}
&.mx_IndicatorScrollbar_topOverflow {
margin-top: -8px;
}
}

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

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

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

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

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

@ -48,14 +48,17 @@ limitations under the License.
padding: 8px; padding: 8px;
&.mx_Toast_hasIcon { &.mx_Toast_hasIcon {
&::after { &::before, &::after {
content: ""; content: "";
width: 22px; width: 22px;
height: 22px; height: 22px;
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
mask-size: 100%; mask-size: 100%;
mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-size: 100%;
background-repeat: no-repeat;
} }
&.mx_Toast_icon_verification::after { &.mx_Toast_icon_verification::after {
@ -63,8 +66,22 @@ limitations under the License.
background-color: $primary-fg-color; background-color: $primary-fg-color;
} }
&.mx_Toast_icon_verification_warning::after { &.mx_Toast_icon_verification_warning {
background-image: url("$(res)/img/e2e/warning.svg"); // white infill for the hollow svg mask
&::before {
background-color: #ffffff;
mask-image: url('$(res)/img/e2e/normal.svg');
mask-size: 90%;
}
&::after {
mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $notice-primary-color;
}
}
&.mx_Toast_icon_element_logo::after {
background-image: url("$(res)/img/element-logo.svg");
} }
.mx_Toast_title, .mx_Toast_body { .mx_Toast_title, .mx_Toast_body {

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

@ -1,49 +0,0 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_TopLeftMenuButton {
flex: 0 0 52px;
border-bottom: 1px solid $panel-divider-color;
color: $topleftmenu-color;
background-color: $primary-bg-color;
display: flex;
align-items: center;
min-width: 0;
padding: 0 4px;
overflow: hidden;
}
.mx_TopLeftMenuButton .mx_BaseAvatar {
margin: 0 7px;
}
.mx_TopLeftMenuButton_name {
margin: 0 7px;
font-size: $font-18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-weight: 600;
}
.mx_TopLeftMenuButton_chevron {
margin: 0 7px;
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
mask-repeat: no-repeat;
width: $font-22px;
height: 6px;
background-color: $roomsublist-label-fg-color;
}

201
res/css/structures/_UserMenu.scss Normal file
View file

@ -0,0 +1,201 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.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_UserMenu_contextMenu_redRow {
.mx_AccessibleButton {
padding-top: 16px;
padding-bottom: 16px;
color: $warning-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $warning-color;
}
}
.mx_UserMenu_contextMenu_header {
padding: 20px;
// Create a flexbox to organize the header a bit easier
display: flex;
align-items: center;
.mx_UserMenu_contextMenu_name {
// Create another flexbox of columns to handle large user IDs
display: flex;
flex-direction: column;
width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button
* {
// Automatically grow all subelements to fit the container
flex: 1;
width: 100%;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_UserMenu_contextMenu_displayName {
font-weight: bold;
font-size: $font-15px;
line-height: $font-20px;
}
.mx_UserMenu_contextMenu_userId {
font-size: $font-15px;
line-height: $font-24px;
}
}
.mx_UserMenu_contextMenu_themeButton {
min-width: 32px;
max-width: 32px;
width: 32px;
height: 32px;
margin-left: 8px;
border-radius: 32px;
background-color: $theme-button-bg-color;
cursor: pointer;
// to make alignment easier, create flexbox for the image
display: flex;
align-items: center;
justify-content: center;
}
}
.mx_IconizedContextMenu_icon {
width: 16px;
height: 16px;
display: block;
&::before {
content: '';
width: 16px;
height: 16px;
display: block;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
.mx_UserMenu_iconHome::before {
mask-image: url('$(res)/img/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');
}
}

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

@ -128,6 +128,11 @@ limitations under the License.
margin-top: 16px; margin-top: 16px;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
.mx_InlineSpinner img {
vertical-align: sub;
margin-right: 5px;
}
} }
.mx_AuthBody_paddedFooter_subtitle { .mx_AuthBody_paddedFooter_subtitle {
@ -146,3 +151,12 @@ limitations under the License.
.mx_AuthBody_spinner { .mx_AuthBody_spinner {
margin: 1em 0; margin: 1em 0;
} }
@media only screen and (max-width: 480px) {
.mx_AuthBody {
border-radius: 4px;
width: auto;
max-width: 500px;
padding: 10px;
}
}

6
res/css/views/auth/_AuthHeader.scss
View file

@ -21,3 +21,9 @@ limitations under the License.
padding: 25px 40px; padding: 25px 40px;
box-sizing: border-box; box-sizing: border-box;
} }
@media only screen and (max-width: 480px) {
.mx_AuthHeader {
display: none;
}
}

6
res/css/views/auth/_AuthHeaderLogo.scss
View file

@ -23,3 +23,9 @@ limitations under the License.
.mx_AuthHeaderLogo img { .mx_AuthHeaderLogo img {
width: 100%; width: 100%;
} }
@media only screen and (max-width: 480px) {
.mx_AuthHeaderLogo {
display: none;
}
}

6
res/css/views/auth/_AuthPage.scss
View file

@ -29,3 +29,9 @@ limitations under the License.
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: $authpage-modal-bg-color; background-color: $authpage-modal-bg-color;
} }
@media only screen and (max-width: 480px) {
.mx_AuthPage_modal {
margin-top: 0;
}
}

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

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

34
res/css/views/avatars/_DecoratedRoomAvatar.scss Normal file
View file

@ -0,0 +1,34 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
// XXX: We shouldn't be using TemporaryTile anywhere - delete it.
.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
position: relative;
.mx_RoomTileIcon {
position: absolute;
bottom: 0;
right: 0;
}
.mx_NotificationBadge, .mx_RoomTile_badgeContainer {
position: absolute;
top: 0;
right: 0;
height: 18px;
width: 18px;
}
}

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

@ -0,0 +1,30 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_PulsedAvatar {
@keyframes shadow-pulse {
0% {
box-shadow: 0 0 0 0px rgba($accent-color, 0.2);
}
100% {
box-shadow: 0 0 0 6px rgba($accent-color, 0);
}
}
img {
animation: shadow-pulse 1s infinite;
}
}

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

@ -15,9 +15,8 @@ limitations under the License.
*/ */
.mx_TagTileContextMenu_item { .mx_TagTileContextMenu_item {
padding-top: 8px; padding: 8px;
padding-right: 20px; padding-right: 20px;
padding-bottom: 8px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
@ -25,15 +24,22 @@ limitations under the License.
line-height: $font-16px; line-height: $font-16px;
} }
.mx_TagTileContextMenu_item object { .mx_TagTileContextMenu_item::before {
pointer-events: none; content: '';
height: 15px;
width: 15px;
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: contain;
margin-right: 8px;
} }
.mx_TagTileContextMenu_viewCommunity::before {
mask-image: url('$(res)/img/element-icons/view-community.svg');
}
.mx_TagTileContextMenu_item_icon { .mx_TagTileContextMenu_hideCommunity::before {
padding-right: 8px; mask-image: url('$(res)/img/element-icons/hide.svg');
padding-left: 4px;
display: inline-block;
} }
.mx_TagTileContextMenu_separator { .mx_TagTileContextMenu_separator {

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

@ -0,0 +1,64 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RebrandDialog {
text-align: center;
a:link,
a:hover,
a:visited {
@mixin mx_Dialog_link;
}
.mx_Dialog_buttons {
margin-top: 43px;
text-align: center;
}
}
.mx_RebrandDialog_body {
width: 550px;
margin-left: auto;
margin-right: auto;
}
.mx_RebrandDialog_logoContainer {
margin-top: 35px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.mx_RebrandDialog_logo {
margin-left: 28px;
margin-right: 28px;
width: 64px;
height: 64px;
}
.mx_RebrandDialog_chevron::after {
content: '';
display: inline-block;
width: 30px;
height: 30px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $muted-fg-color;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
transform: rotate(-90deg);
}

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

@ -18,19 +18,19 @@ limitations under the License.
// ========================================================== // ==========================================================
.mx_RoomSettingsDialog_settingsIcon::before { .mx_RoomSettingsDialog_settingsIcon::before {
mask-image: url('$(res)/img/feather-customised/settings.svg'); mask-image: url('$(res)/img/element-icons/settings.svg');
} }
.mx_RoomSettingsDialog_securityIcon::before { .mx_RoomSettingsDialog_securityIcon::before {
mask-image: url('$(res)/img/feather-customised/lock.svg'); mask-image: url('$(res)/img/element-icons/security.svg');
} }
.mx_RoomSettingsDialog_rolesIcon::before { .mx_RoomSettingsDialog_rolesIcon::before {
mask-image: url('$(res)/img/feather-customised/users-sm.svg'); mask-image: url('$(res)/img/element-icons/room/settings/roles.svg');
} }
.mx_RoomSettingsDialog_notificationsIcon::before { .mx_RoomSettingsDialog_notificationsIcon::before {
mask-image: url('$(res)/img/feather-customised/notifications.svg'); mask-image: url('$(res)/img/element-icons/notifications.svg');
} }
.mx_RoomSettingsDialog_bridgesIcon::before { .mx_RoomSettingsDialog_bridgesIcon::before {
@ -39,7 +39,7 @@ limitations under the License.
} }
.mx_RoomSettingsDialog_warningIcon::before { .mx_RoomSettingsDialog_warningIcon::before {
mask-image: url('$(res)/img/feather-customised/warning-triangle.svg'); mask-image: url('$(res)/img/element-icons/room/settings/advanced.svg');
} }
.mx_RoomSettingsDialog .mx_Dialog_title { .mx_RoomSettingsDialog .mx_Dialog_title {

72
res/css/views/dialogs/_ServerOfflineDialog.scss Normal file
View file

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

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

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

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

@ -18,41 +18,41 @@ limitations under the License.
// ========================================================== // ==========================================================
.mx_UserSettingsDialog_settingsIcon::before { .mx_UserSettingsDialog_settingsIcon::before {
mask-image: url('$(res)/img/feather-customised/settings.svg'); mask-image: url('$(res)/img/element-icons/settings.svg');
} }
.mx_UserSettingsDialog_appearanceIcon::before { .mx_UserSettingsDialog_appearanceIcon::before {
mask-image: url('$(res)/img/feather-customised/brush.svg'); mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
} }
.mx_UserSettingsDialog_voiceIcon::before { .mx_UserSettingsDialog_voiceIcon::before {
mask-image: url('$(res)/img/feather-customised/phone.svg'); mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
} }
.mx_UserSettingsDialog_bellIcon::before { .mx_UserSettingsDialog_bellIcon::before {
mask-image: url('$(res)/img/feather-customised/notifications.svg'); mask-image: url('$(res)/img/element-icons/notifications.svg');
} }
.mx_UserSettingsDialog_preferencesIcon::before { .mx_UserSettingsDialog_preferencesIcon::before {
mask-image: url('$(res)/img/feather-customised/sliders.svg'); mask-image: url('$(res)/img/element-icons/settings/preference.svg');
} }
.mx_UserSettingsDialog_securityIcon::before { .mx_UserSettingsDialog_securityIcon::before {
mask-image: url('$(res)/img/feather-customised/lock.svg'); mask-image: url('$(res)/img/element-icons/security.svg');
} }
.mx_UserSettingsDialog_helpIcon::before { .mx_UserSettingsDialog_helpIcon::before {
mask-image: url('$(res)/img/feather-customised/help-circle.svg'); mask-image: url('$(res)/img/element-icons/settings/help.svg');
} }
.mx_UserSettingsDialog_labsIcon::before { .mx_UserSettingsDialog_labsIcon::before {
mask-image: url('$(res)/img/feather-customised/flag.svg'); mask-image: url('$(res)/img/element-icons/settings/lab-flags.svg');
} }
.mx_UserSettingsDialog_mjolnirIcon::before { .mx_UserSettingsDialog_mjolnirIcon::before {
mask-image: url('$(res)/img/feather-customised/face.svg'); mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
} }
.mx_UserSettingsDialog_flairIcon::before { .mx_UserSettingsDialog_flairIcon::before {
mask-image: url('$(res)/img/feather-customised/flair.svg'); mask-image: url('$(res)/img/element-icons/settings/flair.svg');
} }

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

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

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

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

9
res/css/views/directory/_NetworkDropdown.scss
View file

@ -145,13 +145,14 @@ limitations under the License.
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
width: 24px; width: 26px;
height: 24px; height: 26px;
right: -28px; // - (24 + 4) right: -27.5px; // - (width: 26 + spacing to align with X above: 1.5)
top: -3px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; 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; background-color: $primary-fg-color;
} }

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

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

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

@ -18,7 +18,7 @@ limitations under the License.
display: inline; display: inline;
} }
.mx_InlineSpinner img { .mx_InlineSpinner_spin img {
margin: 0px 6px; margin: 0px 6px;
vertical-align: -3px; vertical-align: -3px;
} }

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

@ -1,91 +0,0 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_InteractiveTooltip_wrapper {
position: fixed;
z-index: 5000;
}
.mx_InteractiveTooltip {
border-radius: 3px;
background-color: $interactive-tooltip-bg-color;
color: $interactive-tooltip-fg-color;
position: absolute;
font-size: $font-10px;
font-weight: 600;
padding: 6px;
z-index: 5001;
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
top: 10px; // 8px chevron + 2px spacing
}
.mx_InteractiveTooltip_chevron_top {
position: absolute;
left: calc(50% - 8px);
top: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid $interactive-tooltip-bg-color;
border-right: 8px solid transparent;
}
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
// by Sebastiano Guerriero (@guerriero_se)
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
.mx_InteractiveTooltip_chevron_top {
height: 16px;
width: 16px;
background-color: inherit;
border: none;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(135deg);
border-radius: 0 0 0 3px;
top: calc(-8px / 1.414); // sqrt(2) because of rotation
}
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
bottom: 10px; // 8px chevron + 2px spacing
}
.mx_InteractiveTooltip_chevron_bottom {
position: absolute;
left: calc(50% - 8px);
bottom: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid $interactive-tooltip-bg-color;
border-right: 8px solid transparent;
}
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
// by Sebastiano Guerriero (@guerriero_se)
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
.mx_InteractiveTooltip_chevron_bottom {
height: 16px;
width: 16px;
background-color: inherit;
border: none;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(-45deg);
border-radius: 0 0 0 3px;
bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
}
}

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

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

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

@ -34,7 +34,7 @@ limitations under the License.
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal { .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -10px 0 0; margin: 0 -10px 0 0;
padding: 0 10px 0 0; padding: 0 8px 0 0;
} }
.mx_ResizeHandle > div { .mx_ResizeHandle > div {

20
res/css/views/elements/_StyledCheckbox.scss
View file

@ -24,7 +24,9 @@ limitations under the License.
align-items: flex-start; align-items: flex-start;
input[type=checkbox] { input[type=checkbox] {
display: none; appearance: none;
margin: 0;
padding: 0;
& + label { & + label {
display: flex; display: flex;
@ -48,6 +50,8 @@ limitations under the License.
border-radius: $border-radius; border-radius: $border-radius;
img { img {
display: none;
height: 100%; height: 100%;
width: 100%; width: 100%;
filter: invert(100%); filter: invert(100%);
@ -57,10 +61,24 @@ limitations under the License.
&:checked + label > .mx_Checkbox_background { &:checked + label > .mx_Checkbox_background {
background: $accent-color; background: $accent-color;
border-color: $accent-color; border-color: $accent-color;
img {
display: block;
}
} }
& + label > *:not(.mx_Checkbox_background) { & + label > *:not(.mx_Checkbox_background) {
margin-left: 10px; margin-left: 10px;
} }
&:disabled + label {
opacity: 0.5;
cursor: not-allowed;
}
&:checked:disabled + label > .mx_Checkbox_background {
background-color: $accent-color;
border-color: $accent-color;
}
} }
} }

117
res/css/views/elements/_StyledRadioButton.scss Normal file
View file

@ -0,0 +1,117 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/**
* This component expects the parent to specify a positive padding and
* width
*/
.mx_RadioButton {
$radio-circle-color: $muted-fg-color;
$active-radio-circle-color: $accent-color;
position: relative;
display: flex;
align-items: baseline;
flex-grow: 1;
> .mx_RadioButton_content {
flex-grow: 1;
display: flex;
flex-direction: column;
margin-left: 8px;
margin-right: 8px;
}
.mx_RadioButton_spacer {
flex-shrink: 0;
flex-grow: 0;
height: $font-16px;
width: $font-16px;
}
> input[type=radio] {
// Remove the OS's representation
margin: 0;
padding: 0;
appearance: none;
+ div {
flex-shrink: 0;
flex-grow: 0;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: $font-16px;
width: $font-16px;
border: $font-1-5px solid $radio-circle-color;
border-radius: $font-16px;
> div {
box-sizing: border-box;
height: $font-8px;
width: $font-8px;
border-radius: $font-8px;
}
}
&:checked {
& + div {
border-color: $active-radio-circle-color;
& > div {
background: $active-radio-circle-color;
}
}
}
&:disabled {
& + div,
& + div + span {
opacity: 0.5;
cursor: not-allowed;
}
& + div {
border-color: $radio-circle-color;
}
}
&:checked:disabled {
& + div > div {
background-color: $radio-circle-color;
}
}
}
}
.mx_RadioButton_outlined {
border: 1px solid $input-darker-bg-color;
border-radius: 8px;
}
.mx_RadioButton_checked {
border-color: $accent-color;
}

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

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

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

@ -91,17 +91,17 @@ limitations under the License.
} }
.mx_MessageActionBar_reactButton::after { .mx_MessageActionBar_reactButton::after {
mask-image: url('$(res)/img/react.svg'); mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
} }
.mx_MessageActionBar_replyButton::after { .mx_MessageActionBar_replyButton::after {
mask-image: url('$(res)/img/reply.svg'); mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
} }
.mx_MessageActionBar_editButton::after { .mx_MessageActionBar_editButton::after {
mask-image: url('$(res)/img/edit.svg'); mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
} }
.mx_MessageActionBar_optionsButton::after { .mx_MessageActionBar_optionsButton::after {
mask-image: url('$(res)/img/icon_context.svg'); mask-image: url('$(res)/img/element-icons/context-menu.svg');
} }

1
res/css/views/messages/_MessageTimestamp.scss
View file

@ -17,4 +17,5 @@ limitations under the License.
.mx_MessageTimestamp { .mx_MessageTimestamp {
color: $event-timestamp-color; color: $event-timestamp-color;
font-size: $font-10px; font-size: $font-10px;
font-variant-numeric: tabular-nums;
} }

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

@ -16,7 +16,6 @@ limitations under the License.
.mx_ReactionsRowButton { .mx_ReactionsRowButton {
display: inline-flex; display: inline-flex;
height: 20px;
line-height: $font-21px; line-height: $font-21px;
margin-right: 6px; margin-right: 6px;
padding: 0 6px; padding: 0 6px;
@ -35,11 +34,6 @@ limitations under the License.
border-color: $reaction-row-button-selected-border-color; border-color: $reaction-row-button-selected-border-color;
} }
// ignore mouse events for all children, treat it as one entire hoverable entity
* {
pointer-events: none;
}
.mx_ReactionsRowButton_content { .mx_ReactionsRowButton_content {
max-width: 100px; max-width: 100px;
overflow: hidden; overflow: hidden;

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

@ -15,28 +15,45 @@ limitations under the License.
*/ */
.mx_cryptoEvent { .mx_cryptoEvent {
display: grid; display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content; grid-template-columns: 24px minmax(0, 1fr) min-content;
&.mx_cryptoEvent_icon::before,
&.mx_cryptoEvent_icon::after { &.mx_cryptoEvent_icon::after {
grid-column: 1; grid-column: 1;
grid-row: 1 / 3; grid-row: 1 / 3;
width: 16px; width: 16px;
height: 16px; height: 16px;
content: ""; content: "";
background-image: url("$(res)/img/e2e/normal.svg"); top: 0;
background-repeat: no-repeat; bottom: 0;
background-size: 100%; left: 0;
right: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $composer-e2e-icon-color;
margin-top: 4px; margin-top: 4px;
} }
// white infill for the transparency
&.mx_cryptoEvent_icon::before {
background-color: #ffffff;
mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;
}
&.mx_cryptoEvent_icon_verified::after { &.mx_cryptoEvent_icon_verified::after {
background-image: url("$(res)/img/e2e/verified.svg"); mask-image: url("$(res)/img/e2e/verified.svg");
background-color: $accent-color;
} }
&.mx_cryptoEvent_icon_warning::after { &.mx_cryptoEvent_icon_warning::after {
background-image: url("$(res)/img/e2e/warning.svg"); mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $notice-primary-color;
} }
.mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state { .mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {

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

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

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

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

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

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

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

@ -22,9 +22,10 @@ limitations under the License.
display: block; display: block;
} }
.mx_E2EIcon_warning::after, .mx_E2EIcon_warning,
.mx_E2EIcon_normal::after, .mx_E2EIcon_normal,
.mx_E2EIcon_verified::after { .mx_E2EIcon_verified {
&::before, &::after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
@ -32,18 +33,47 @@ limitations under the License.
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-repeat: no-repeat; mask-repeat: no-repeat;
background-size: contain; mask-position: center;
mask-size: contain;
}
}
// white infill for the transparency
.mx_E2EIcon::before {
background-color: #ffffff;
mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;
}
// transparent-looking border surrounding the shield for when overlain over avatars
.mx_E2EIcon_bordered {
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $header-panel-bg-color;
// shrink the actual badge
&::after {
mask-size: 75%;
}
// shrink the infill of the badge
&::before {
mask-size: 65%;
}
} }
.mx_E2EIcon_warning::after { .mx_E2EIcon_warning::after {
background-image: url('$(res)/img/e2e/warning.svg'); mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
} }
.mx_E2EIcon_normal::after { .mx_E2EIcon_normal::after {
background-image: url('$(res)/img/e2e/normal.svg'); mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $composer-e2e-icon-color;
} }
.mx_E2EIcon_verified::after { .mx_E2EIcon_verified::after {
background-image: url('$(res)/img/e2e/verified.svg'); mask-image: url('$(res)/img/e2e/verified.svg');
background-color: $accent-color;
} }

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

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

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

@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$left-gutter: 64px;
.mx_EventTile { .mx_EventTile {
max-width: 100%; max-width: 100%;
clear: both; clear: both;
@ -45,7 +47,7 @@ limitations under the License.
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
top: $font-8px; top: $font-8px;
left: 65px; left: $left-gutter;
} }
.mx_EventTile_continuation { .mx_EventTile_continuation {
@ -73,7 +75,7 @@ limitations under the License.
/* the next three lines, along with overflow hidden, truncate long display names */ /* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: calc(100% - 65px); max-width: calc(100% - $left-gutter);
} }
.mx_EventTile .mx_SenderProfile .mx_Flair { .mx_EventTile .mx_SenderProfile .mx_Flair {
@ -111,7 +113,7 @@ limitations under the License.
.mx_EventTile_line, .mx_EventTile_reply { .mx_EventTile_line, .mx_EventTile_reply {
position: relative; position: relative;
padding-left: 65px; /* left gutter */ padding-left: $left-gutter;
border-radius: 4px; border-radius: 4px;
} }
@ -182,7 +184,7 @@ limitations under the License.
* TODO: ultimately we probably want some transition on here. * TODO: ultimately we probably want some transition on here.
*/ */
.mx_EventTile_selected > .mx_EventTile_line { .mx_EventTile_selected > .mx_EventTile_line {
border-left: $accent-color 5px solid; border-left: $accent-color 4px solid;
padding-left: 60px; padding-left: 60px;
background-color: $event-selected-color; background-color: $event-selected-color;
} }
@ -328,29 +330,67 @@ limitations under the License.
.mx_EventTile_e2eIcon { .mx_EventTile_e2eIcon {
position: absolute; position: absolute;
top: 6px; top: 6px;
left: 46px; left: 44px;
width: 15px; width: 14px;
height: 15px; height: 14px;
display: block; display: block;
bottom: 0; bottom: 0;
right: 0; right: 0;
opacity: 0.2; opacity: 0.2;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
&::before, &::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
&::before {
background-color: #ffffff;
mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;
}
} }
.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
background-image: url('$(res)/img/e2e/warning.svg'); &::after {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
}
opacity: 1; opacity: 1;
} }
.mx_EventTile_e2eIcon_unknown { .mx_EventTile_e2eIcon_unknown {
background-image: url('$(res)/img/e2e/warning.svg'); &::after {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
}
opacity: 1; opacity: 1;
} }
.mx_EventTile_e2eIcon_unencrypted { .mx_EventTile_e2eIcon_unencrypted {
background-image: url('$(res)/img/e2e/warning.svg'); &::after {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
}
opacity: 1;
}
.mx_EventTile_e2eIcon_unauthenticated {
&::after {
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $composer-e2e-icon-color;
}
opacity: 1; opacity: 1;
} }
@ -392,10 +432,6 @@ limitations under the License.
margin-bottom: 0px; margin-bottom: 0px;
} }
.mx_EventTile_12hr .mx_EventTile_e2eIcon {
padding-left: 5px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
@ -403,15 +439,15 @@ limitations under the License.
} }
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color 5px solid; border-left: $e2e-verified-color 4px solid;
} }
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color 5px solid; border-left: $e2e-unverified-color 4px solid;
} }
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: $e2e-unknown-color 5px solid; border-left: $e2e-unknown-color 4px solid;
} }
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
@ -500,7 +536,7 @@ limitations under the License.
display: inline-block; display: inline-block;
visibility: hidden; visibility: hidden;
cursor: pointer; cursor: pointer;
top: 6px; top: 8px;
right: 6px; right: 6px;
width: 19px; width: 19px;
height: 19px; height: 19px;
@ -532,7 +568,6 @@ limitations under the License.
.mx_EventTile_content .markdown-body a { .mx_EventTile_content .markdown-body a {
color: $accent-color-alt; color: $accent-color-alt;
text-decoration: underline;
} }
.mx_EventTile_content .markdown-body .hljs { .mx_EventTile_content .markdown-body .hljs {
@ -572,3 +607,14 @@ limitations under the License.
margin-left: 1em; 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;
}
}

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

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$left-gutter: 65px; $left-gutter: 64px;
.mx_GroupLayout { .mx_GroupLayout {
.mx_EventTile { .mx_EventTile {
@ -108,12 +108,12 @@ $left-gutter: 65px;
top: 27px; top: 27px;
} }
.mx_EventTile_continuation .mx_EventTile_readAvatars, &.mx_EventTile_continuation .mx_EventTile_readAvatars,
.mx_EventTile_emote .mx_EventTile_readAvatars { &.mx_EventTile_emote .mx_EventTile_readAvatars {
top: 5px; top: 5px;
} }
.mx_EventTile_info .mx_EventTile_readAvatars { &.mx_EventTile_info .mx_EventTile_readAvatars {
top: 4px; top: 4px;
} }

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

@ -43,6 +43,10 @@ $irc-line-height: $font-18px;
> .mx_EventTile_msgOption { > .mx_EventTile_msgOption {
order: 5; order: 5;
flex-shrink: 0; flex-shrink: 0;
.mx_EventTile_readAvatars {
top: 0.2rem; // ($irc-line-height - avatar height) / 2
}
} }
> .mx_SenderProfile { > .mx_SenderProfile {
@ -78,7 +82,7 @@ $irc-line-height: $font-18px;
align-items: center; align-items: center;
// Need to use important to override the js provided height and width values. // Need to use important to override the js provided height and width values.
> .mx_BaseAvatar, .mx_BaseAvatar > * { > .mx_BaseAvatar, > .mx_BaseAvatar > * {
height: $font-14px !important; height: $font-14px !important;
width: $font-14px !important; width: $font-14px !important;
font-size: $font-10px !important; font-size: $font-10px !important;
@ -93,13 +97,19 @@ $irc-line-height: $font-18px;
} }
> .mx_EventTile_e2eIcon { > .mx_EventTile_e2eIcon {
position: relative; position: absolute;
right: unset; right: unset;
left: unset; left: unset;
top: 0;
padding: 0; padding: 0;
order: 3;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
height: $font-18px;
background-position: center;
} }
.mx_EventTile_line { .mx_EventTile_line {
@ -111,11 +121,6 @@ $irc-line-height: $font-18px;
} }
} }
.mx_EvenTile_line .mx_MessageActionBar,
.mx_EvenTile_line .mx_ReplyThread_wrapper {
display: block;
}
.mx_EventTile_reply { .mx_EventTile_reply {
order: 4; order: 4;
} }
@ -176,9 +181,11 @@ $irc-line-height: $font-18px;
> span { > span {
display: flex; display: flex;
> .mx_SenderProfile_name { > .mx_SenderProfile_name,
> .mx_SenderProfile_aux {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
min-width: var(--name-width);
} }
} }
} }

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

@ -1,58 +0,0 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
@define-mixin mx_InviteOnlyIcon {
width: 12px;
height: 12px;
position: relative;
display: block !important;
}
@define-mixin mx_InviteOnlyIcon_padlock {
background-color: $roomtile-name-color;
mask-image: url("$(res)/img/feather-customised/lock-solid.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mx_InviteOnlyIcon_large {
@mixin mx_InviteOnlyIcon;
margin: 0 4px;
&::before {
@mixin mx_InviteOnlyIcon_padlock;
width: 12px;
height: 12px;
}
}
.mx_InviteOnlyIcon_small {
@mixin mx_InviteOnlyIcon;
left: -2px;
&::before {
@mixin mx_InviteOnlyIcon_padlock;
width: 10px;
height: 10px;
}
}

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

@ -41,6 +41,11 @@ limitations under the License.
// with text-align in parent // with text-align in parent
display: inline-block; display: inline-block;
padding: 0 4px; padding: 0 4px;
color: $accent-fg-color;
background-color: $muted-fg-color;
}
.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
color: $secondary-accent-color; color: $secondary-accent-color;
background-color: $warning-color; background-color: $warning-color;
} }
@ -51,7 +56,7 @@ limitations under the License.
border-radius: 19px; border-radius: 19px;
box-sizing: border-box; box-sizing: border-box;
background: $primary-bg-color; background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color; border: 1.3px solid $muted-fg-color;
cursor: pointer; cursor: pointer;
} }
@ -62,8 +67,8 @@ limitations under the License.
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 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-repeat: no-repeat;
mask-position: 9px 14px; mask-size: contain;
background: $roomtile-name-color; background: $muted-fg-color;
} }

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

@ -26,6 +26,10 @@ limitations under the License.
flex: 1 0 auto; flex: 1 0 auto;
} }
.mx_SearchBox {
margin-bottom: 5px;
}
h2 { h2 {
text-transform: uppercase; text-transform: uppercase;
color: $h3-color; color: $h3-color;
@ -59,32 +63,27 @@ limitations under the License.
.mx_GroupMemberList_query, .mx_GroupMemberList_query,
.mx_GroupRoomList_query { .mx_GroupRoomList_query {
flex: 1 1 0; flex: 1 1 0;
// stricter rule to override the one in _common.scss
&[type="text"] {
font-size: $font-12px;
}
} }
.mx_MemberList_wrapper { .mx_MemberList_wrapper {
padding: 10px; padding: 10px;
} }
.mx_MemberList_invite {
.mx_MemberList_invite,
.mx_RightPanel_invite {
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
background-color: $button-bg-color; background-color: $button-bg-color;
border-radius: 4px; border-radius: 4px;
padding: 8px; margin: 5px 9px 9px;
margin: 9px;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: $button-fg-color; color: $button-fg-color;
font-weight: 600; font-weight: 600;
.mx_RightPanel_icon {
padding-right: 5px;
padding-top: 2px;
}
} }
.mx_MemberList_invite.mx_AccessibleButton_disabled { .mx_MemberList_invite.mx_AccessibleButton_disabled {
@ -93,8 +92,17 @@ limitations under the License.
} }
.mx_MemberList_invite span { .mx_MemberList_invite span {
background-image: url('$(res)/img/feather-customised/user-add.svg'); background-image: url('$(res)/img/element-icons/room/invite.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center left; background-position: center left;
padding-left: 25px; background-size: 20px;
padding: 8px 0 8px 25px;
}
.mx_MemberList_inviteCommunity span {
background-image: url('$(res)/img/icon-invite-people.svg');
}
.mx_MemberList_addRoomToCommunity span {
background-image: url('$(res)/img/icons-room-add.svg');
} }

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

@ -20,7 +20,7 @@ limitations under the License.
margin: auto; margin: auto;
border-top: 1px solid $primary-hairline-color; border-top: 1px solid $primary-hairline-color;
position: relative; position: relative;
padding-left: 84px; padding-left: 82px;
} }
.mx_MessageComposer_replaced_wrapper { .mx_MessageComposer_replaced_wrapper {
@ -60,7 +60,7 @@ limitations under the License.
.mx_MessageComposer .mx_MessageComposer_avatar { .mx_MessageComposer .mx_MessageComposer_avatar {
position: absolute; position: absolute;
left: 27px; left: 26px;
} }
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
@ -76,8 +76,8 @@ limitations under the License.
left: 60px; left: 60px;
margin-right: 0; // Counteract the E2EIcon class margin-right: 0; // Counteract the E2EIcon class
margin-left: 3px; // Counteract the E2EIcon class margin-left: 3px; // Counteract the E2EIcon class
width: 15px; width: 12px;
height: 15px; height: 12px;
} }
.mx_MessageComposer_noperm_error { .mx_MessageComposer_noperm_error {
@ -196,30 +196,35 @@ limitations under the License.
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
} }
&.mx_MessageComposer_hangup::before {
background-color: $warning-color;
}
} }
.mx_MessageComposer_upload::before { .mx_MessageComposer_upload::before {
mask-image: url('$(res)/img/feather-customised/paperclip.svg'); mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
} }
.mx_MessageComposer_hangup::before { .mx_MessageComposer_hangup::before {
mask-image: url('$(res)/img/hangup.svg'); mask-image: url('$(res)/img/element-icons/call/hangup.svg');
} }
.mx_MessageComposer_voicecall::before { .mx_MessageComposer_voicecall::before {
mask-image: url('$(res)/img/feather-customised/phone.svg'); mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
} }
.mx_MessageComposer_videocall::before { .mx_MessageComposer_videocall::before {
mask-image: url('$(res)/img/feather-customised/video.svg'); mask-image: url('$(res)/img/element-icons/call/video-call.svg');
} }
.mx_MessageComposer_emoji::before { .mx_MessageComposer_emoji::before {
mask-image: url('$(res)/img/feather-customised/emoji3.custom.svg'); mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
} }
.mx_MessageComposer_stickers::before { .mx_MessageComposer_stickers::before {
mask-image: url('$(res)/img/feather-customised/sticker.custom.svg'); mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
} }
.mx_MessageComposer_formatting { .mx_MessageComposer_formatting {

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

@ -75,23 +75,23 @@ limitations under the License.
} }
.mx_MessageComposerFormatBar_buttonIconBold::after { .mx_MessageComposerFormatBar_buttonIconBold::after {
mask-image: url('$(res)/img/format/bold.svg'); mask-image: url('$(res)/img/element-icons/room/format-bar/bold.svg');
} }
.mx_MessageComposerFormatBar_buttonIconItalic::after { .mx_MessageComposerFormatBar_buttonIconItalic::after {
mask-image: url('$(res)/img/format/italics.svg'); mask-image: url('$(res)/img/element-icons/room/format-bar/italic.svg');
} }
.mx_MessageComposerFormatBar_buttonIconStrikethrough::after { .mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
mask-image: url('$(res)/img/format/strikethrough.svg'); mask-image: url('$(res)/img/element-icons/room/format-bar/strikethrough.svg');
} }
.mx_MessageComposerFormatBar_buttonIconQuote::after { .mx_MessageComposerFormatBar_buttonIconQuote::after {
mask-image: url('$(res)/img/format/quote.svg'); mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg');
} }
.mx_MessageComposerFormatBar_buttonIconCode::after { .mx_MessageComposerFormatBar_buttonIconCode::after {
mask-image: url('$(res)/img/format/code.svg'); mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
} }
} }

72
res/css/views/rooms/_NotificationBadge.scss Normal file
View file

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

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

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

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

@ -1,5 +1,5 @@
/* /*
Copyright 2019 New Vector Ltd Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -15,98 +15,42 @@ limitations under the License.
*/ */
.mx_RoomBreadcrumbs { .mx_RoomBreadcrumbs {
position: relative; width: 100%;
height: 42px;
padding: 8px; // Create a flexbox for the crumbs
padding-bottom: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start;
// repeating circles as empty placeholders
background:
radial-gradient(
circle at center,
$breadcrumb-placeholder-bg-color,
$breadcrumb-placeholder-bg-color 15px,
transparent 16px
);
background-size: 36px;
background-position: 6px -1px;
background-repeat: repeat-x;
// Autohide the scrollbar
overflow-x: hidden;
&:hover {
overflow-x: visible;
}
.mx_AutoHideScrollbar {
display: flex;
flex-direction: row;
height: 100%;
}
.mx_RoomBreadcrumbs_crumb { .mx_RoomBreadcrumbs_crumb {
margin-left: 4px; margin-right: 8px;
height: 32px;
display: inline-block;
transition: transform 0.3s, width 0.3s;
position: relative;
.mx_RoomTile_badge {
position: absolute;
top: -3px;
right: -4px;
}
.mx_RoomBreadcrumbs_dmIndicator {
position: absolute;
bottom: 0;
right: -4px;
}
}
.mx_RoomBreadcrumbs_animate {
margin-left: 0;
width: 32px; width: 32px;
transform: scale(1);
} }
.mx_RoomBreadcrumbs_preAnimate { // These classes come from the CSSTransition component. There's many more classes we
width: 0; // could care about, but this is all we worried about for now. The animation works by
transform: scale(0); // first triggering the enter state with the newest breadcrumb off screen (-40px) then
// sliding it into view.
&.mx_RoomBreadcrumbs-enter {
margin-left: -40px; // 32px for the avatar, 8px for the margin
}
&.mx_RoomBreadcrumbs-enter-active {
margin-left: 0;
// Timing function is as-requested by design.
// NOTE: The transition time MUST match the value passed to CSSTransition!
transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
} }
.mx_RoomBreadcrumbs_left { .mx_RoomBreadcrumbs_placeholder {
opacity: 0.5; font-weight: 600;
font-size: $font-14px;
line-height: 32px; // specifically to match the height this is not scaled
height: 32px;
}
} }
// Note: we have to manually control the gradient and stuff, but the IndicatorScrollbar .mx_RoomBreadcrumbs_Tooltip {
// will deal with left/right positioning for us. Normally we'd use position:sticky on margin-left: -42px;
// a few key elements, however that doesn't work in horizontal scrolling scenarios. margin-top: -42px;
.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;
}
} }

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

@ -1,55 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoomDropTarget_container {
background-color: $secondary-accent-color;
padding-left: 18px;
padding-right: 18px;
padding-top: 8px;
padding-bottom: 7px;
}
.collapsed .mx_RoomDropTarget_container {
padding-right: 10px;
padding-left: 10px;
}
.mx_RoomDropTarget {
font-size: $font-13px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px dashed $accent-color;
color: $primary-fg-color;
background-color: $droptarget-bg-color;
border-radius: 4px;
}
.mx_RoomDropTarget_label {
position: relative;
margin-top: 3px;
line-height: $font-21px;
z-index: 1;
text-align: center;
}
.collapsed .mx_RoomDropTarget_avatar {
float: none;
}
.collapsed .mx_RoomDropTarget_label {
display: none;
}

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

@ -15,26 +15,34 @@ limitations under the License.
*/ */
.mx_RoomHeader { .mx_RoomHeader {
flex: 0 0 52px; flex: 0 0 50px;
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
background-color: $roomheader-bg-color;
.mx_RoomHeader_e2eIcon {
height: 12px;
width: 12px;
.mx_E2EIcon { .mx_E2EIcon {
margin: 0; margin: 0;
position: absolute; position: absolute;
bottom: -2px; height: 12px;
right: -6px; width: 12px;
height: 15px; }
width: 15px;
} }
} }
.mx_RoomHeader_wrapper { .mx_RoomHeader_wrapper {
margin: auto; margin: auto;
height: 52px; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 0; min-width: 0;
padding: 0 10px 0 19px; padding: 0 10px 0 18px;
.mx_InviteOnlyIcon_large {
margin: 0;
}
} }
.mx_RoomHeader_spinner { .mx_RoomHeader_spinner {
@ -67,7 +75,6 @@ limitations under the License.
.mx_RoomHeader_buttons { .mx_RoomHeader_buttons {
display: flex; display: flex;
background-color: $primary-bg-color; background-color: $primary-bg-color;
padding-right: 5px;
} }
.mx_RoomHeader_info { .mx_RoomHeader_info {
@ -173,7 +180,7 @@ limitations under the License.
.mx_RoomHeader_avatar { .mx_RoomHeader_avatar {
flex: 0; flex: 0;
margin: 0 7px; margin: 0 6px 0 7px;
position: relative; position: relative;
} }
@ -201,41 +208,53 @@ limitations under the License.
.mx_RoomHeader_button { .mx_RoomHeader_button {
position: relative; position: relative;
margin-left: 10px; margin-left: 1px;
margin-right: 1px;
cursor: pointer; cursor: pointer;
height: 20px; height: 32px;
width: 20px; width: 32px;
border-radius: 100%;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
height: 20px; top: 4px; // center with parent of 32px
width: 20px; left: 4px; // center with parent of 32px
height: 24px;
width: 24px;
background-color: $roomheader-button-color; background-color: $roomheader-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
} }
&:hover {
background: rgba($accent-color, 0.1);
&::before {
background-color: $accent-color;
}
}
} }
.mx_RoomHeader_settingsButton::before { .mx_RoomHeader_settingsButton::before {
mask-image: url('$(res)/img/feather-customised/settings.svg'); mask-image: url('$(res)/img/element-icons/settings.svg');
} }
.mx_RoomHeader_forgetButton::before { .mx_RoomHeader_forgetButton::before {
mask-image: url('$(res)/img/leave.svg'); mask-image: url('$(res)/img/element-icons/leave.svg');
width: 26px; width: 26px;
} }
.mx_RoomHeader_searchButton::before { .mx_RoomHeader_searchButton::before {
mask-image: url('$(res)/img/feather-customised/search.svg'); mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
} }
.mx_RoomHeader_shareButton::before { .mx_RoomHeader_shareButton::before {
mask-image: url('$(res)/img/feather-customised/share.svg'); mask-image: url('$(res)/img/element-icons/room/share.svg');
} }
.mx_RoomHeader_manageIntegsButton::before { .mx_RoomHeader_manageIntegsButton::before {
mask-image: url('$(res)/img/feather-customised/grid.svg'); mask-image: url('$(res)/img/element-icons/room/integrations.svg');
} }
.mx_RoomHeader_showPanel { .mx_RoomHeader_showPanel {
@ -251,7 +270,7 @@ limitations under the License.
} }
.mx_RoomHeader_pinnedButton::before { .mx_RoomHeader_pinnedButton::before {
mask-image: url('$(res)/img/icons-pin.svg'); mask-image: url('$(res)/img/element-icons/room/pin.svg');
} }
.mx_RoomHeader_pinsIndicator { .mx_RoomHeader_pinsIndicator {
@ -267,3 +286,12 @@ limitations under the License.
.mx_RoomHeader_pinsIndicatorUnread { .mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color; background-color: $pinned-unread-color;
} }
@media only screen and (max-width: 480px) {
.mx_RoomHeader_wrapper {
padding: 0;
}
.mx_RoomHeader {
overflow: hidden;
}
}

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

@ -1,6 +1,5 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -15,56 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_RoomList.mx_RoomList2 {
overflow-y: auto;
}
.mx_RoomList { .mx_RoomList {
/* take up remaining space below TopLeftMenu */ padding-right: 7px; // width of the scrollbar, to line things up
flex: 1;
min-height: 0;
overflow-y: hidden;
}
.mx_RoomList .mx_ResizeHandle {
// needed so the z-index takes effect
position: relative;
}
/* hide resize handles next to collapsed / empty sublists */
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
display: none;
}
.mx_RoomList_expandButton {
margin-left: 8px;
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomList_emptySubListTip_container {
padding-left: 18px;
padding-right: 18px;
padding-top: 8px;
padding-bottom: 7px;
}
.mx_RoomList_emptySubListTip {
font-size: $font-13px;
padding: 5px;
border: 1px dashed $accent-color;
color: $primary-fg-color;
background-color: $droptarget-bg-color;
border-radius: 4px;
line-height: $font-16px;
}
.mx_RoomList_emptySubListTip .mx_RoleButton {
vertical-align: -2px;
}
.mx_RoomList_headerButtons {
position: absolute;
right: 60px;
} }

5
res/css/views/rooms/_RoomPreviewBar.scss
View file

@ -58,11 +58,6 @@ limitations under the License.
} }
} }
.mx_RoomPreviewBar_dark {
background-color: $tagpanel-bg-color;
color: $accent-fg-color;
}
.mx_RoomPreviewBar_actions { .mx_RoomPreviewBar_actions {
display: flex; display: flex;
} }

389
res/css/views/rooms/_RoomSublist.scss Normal file
View file

@ -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/feather-customised/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/riot-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;
}

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

@ -1,6 +1,5 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -15,214 +14,222 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// Note: the room tile expects to be in a flexbox column container
.mx_RoomTile { .mx_RoomTile {
margin-bottom: 4px;
padding: 4px;
// The tile is also a flexbox row itself
display: flex; display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
height: 34px;
margin: 0;
padding: 0 8px 0 10px;
position: relative;
.mx_RoomTile_menuButton { &.mx_RoomTile_selected,
display: none; &:hover,
flex: 0 0 16px; &:focus-within,
height: 16px; &.mx_RoomTile_hasMenuOpen {
background-image: url('$(res)/img/icon_context.svg'); background-color: $roomtile-selected-bg-color;
background-repeat: no-repeat; border-radius: 8px;
background-position: center;
} }
.mx_UserOnlineDot { .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
display: block; margin-right: 8px;
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 { .mx_RoomTile_nameContainer {
display: flex; flex-grow: 1;
align-items: center; min-width: 0; // allow flex to shrink it
flex: 1; margin-right: 8px; // spacing to buttons/badges
vertical-align: middle;
min-width: 0;
}
.mx_RoomTile_labelContainer { // Create a new column layout flexbox for the name parts
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; justify-content: center;
min-width: 0;
}
.mx_RoomTile_subtext { .mx_RoomTile_name,
display: inline-block; .mx_RoomTile_messagePreview {
font-size: $font-11px; margin: 0 2px;
padding: 0 0 0 7px; width: 100%;
margin: 0;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: clip;
position: relative;
bottom: 4px;
}
.mx_RoomTile_avatar_container {
position: relative;
display: flex;
}
.mx_RoomTile_avatar {
flex: 0;
padding: 4px;
width: 24px;
vertical-align: middle;
}
.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
padding-top: 0;
vertical-align: super;
}
.mx_RoomTile_dm {
display: block;
position: absolute;
bottom: 0;
right: -5px;
z-index: 2;
}
// 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_RoomTile_name { .mx_RoomTile_name {
font-size: $font-14px; font-size: $font-14px;
padding: 0 4px; line-height: $font-18px;
color: $roomtile-name-color;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
} }
.mx_RoomTile_badge { .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
flex: 0 1 content;
border-radius: 0.8em;
padding: 0 0.4em;
color: $roomtile-badge-fg-color;
font-weight: 600; font-weight: 600;
font-size: $font-12px;
} }
.collapsed { .mx_RoomTile_messagePreview {
.mx_RoomTile { font-size: $font-13px;
margin: 0 6px; line-height: $font-18px;
padding: 0 2px; color: $roomtile-preview-color;
}
.mx_RoomTile_nameWithPreview {
margin-top: -4px; // shift the name up a bit more
}
}
.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; position: relative;
justify-content: center; 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_name { // 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_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; display: none;
} }
.mx_RoomTile_badge { .mx_RoomTile_notificationsButton,
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 { .mx_RoomTile_menuButton {
display: block; display: block;
} }
.mx_UserOnlineDot {
display: none;
} }
} }
.mx_RoomTile_unreadNotify .mx_RoomTile_badge, &.mx_RoomTile_minimized {
.mx_RoomTile_badge.mx_RoomTile_badgeUnread { flex-direction: column;
background-color: $roomtile-name-color; align-items: center;
position: relative;
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 0;
}
}
} }
.mx_RoomTile_highlight .mx_RoomTile_badge, // We use these both in context menus and the room tiles
.mx_RoomTile_badge.mx_RoomTile_badgeRed { .mx_RoomTile_iconBell::before {
color: $accent-fg-color; mask-image: url('$(res)/img/element-icons/notifications.svg');
}
.mx_RoomTile_iconBellDot::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
}
.mx_RoomTile_iconBellCrossed::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
}
.mx_RoomTile_iconBellMentions::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
}
.mx_RoomTile_iconCheck::before {
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
}
.mx_RoomTile_contextMenu {
.mx_RoomTile_contextMenu_redRow {
.mx_AccessibleButton {
color: $warning-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $warning-color; background-color: $warning-color;
} }
}
.mx_RoomTile_unread, .mx_RoomTile_highlight { .mx_RoomTile_contextMenu_activeRow {
.mx_RoomTile_name { &.mx_AccessibleButton, .mx_AccessibleButton {
font-weight: 600; color: $accent-color !important; // !important to override styles from context menu
color: $roomtile-selected-color; }
.mx_IconizedContextMenu_icon::before {
background-color: $accent-color;
} }
} }
.mx_RoomTile_selected { .mx_IconizedContextMenu_icon {
border-radius: 4px; position: relative;
background-color: $roomtile-selected-bg-color; width: 16px;
} height: 16px;
.mx_DNDRoomTile { &::before {
transform: none; content: '';
transition: transform 0.2s; width: 16px;
} height: 16px;
.mx_DNDRoomTile_dragging {
transform: scale(1.05, 1.05);
}
.mx_RoomTile_arrow {
position: absolute; position: absolute;
right: 0px; mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
} }
.mx_RoomTile.mx_RoomTile_transparent { .mx_RoomTile_iconStar::before {
background-color: transparent; mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
} }
.mx_RoomTile.mx_RoomTile_transparent:focus { .mx_RoomTile_iconArrowDown::before {
background-color: $roomtile-transparent-focused-color; mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg');
} }
.mx_GroupInviteTile .mx_RoomTile_name { .mx_RoomTile_iconSettings::before {
flex: 1; mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_RoomTile_iconSignOut::before {
mask-image: url('$(res)/img/element-icons/leave.svg');
}
} }

69
res/css/views/rooms/_RoomTileIcon.scss Normal file
View file

@ -0,0 +1,69 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoomTileIcon {
width: 12px;
height: 12px;
border-radius: 12px;
background-color: $roomlist-bg-color; // to match the room list itself
}
.mx_RoomTileIcon_globe::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
mask-image: url('$(res)/img/globe.svg');
}
.mx_RoomTileIcon_offline::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
border-radius: 8px;
background-color: $presence-offline;
}
.mx_RoomTileIcon_online::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
border-radius: 8px;
background-color: $presence-online;
}
.mx_RoomTileIcon_away::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
border-radius: 8px;
background-color: $presence-away;
}

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

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

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

@ -28,7 +28,7 @@ limitations under the License.
content: ""; content: "";
position: absolute; position: absolute;
top: -8px; top: -8px;
left: 11px; left: 10.5px;
width: 4px; width: 4px;
height: 4px; height: 4px;
border-radius: 16px; border-radius: 16px;
@ -42,19 +42,20 @@ limitations under the License.
border-radius: 19px; border-radius: 19px;
box-sizing: border-box; box-sizing: border-box;
background: $primary-bg-color; background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color; border: 1.3px solid $muted-fg-color;
cursor: pointer; cursor: pointer;
} }
.mx_TopUnreadMessagesBar_scrollUp::before { .mx_TopUnreadMessagesBar_scrollUp::before {
content: ""; content: "";
position: absolute; position: absolute;
width: 38px; width: 36px;
height: 38px; height: 36px;
mask-image: url('$(res)/img/icon-jump-to-first-unread.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: 9px 13px; mask-size: contain;
background: $roomtile-name-color; background: $muted-fg-color;
transform: rotate(180deg);
} }
.mx_TopUnreadMessagesBar_markAsRead { .mx_TopUnreadMessagesBar_markAsRead {
@ -62,7 +63,7 @@ limitations under the License.
width: 18px; width: 18px;
height: 18px; height: 18px;
background: $primary-bg-color; background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color; border: 1.3px solid $muted-fg-color;
border-radius: 10px; border-radius: 10px;
margin: 5px auto; margin: 5px auto;
} }
@ -76,5 +77,5 @@ limitations under the License.
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 10px; mask-size: 10px;
mask-position: 4px 4px; mask-position: 4px 4px;
background: $roomtile-name-color; background: $muted-fg-color;
} }

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

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

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

@ -27,28 +27,6 @@ limitations under the License.
.mx_AccessibleButton.mx_AccessibleButton_kind_primary { .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
margin-top: 8px; margin-top: 8px;
div {
position: relative;
height: 12px;
width: 12px;
display: inline;
padding-right: 6px; // 0.5 * 12px
left: -6px; // 0.5 * 12px
top: 3px;
}
div::before {
content: '';
position: absolute;
height: 12px;
width: 12px;
background-color: $button-primary-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/feather-customised/upload.svg');
}
} }
.mx_AccessibleButton.mx_AccessibleButton_kind_link_sm { .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {

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

@ -15,31 +15,216 @@ limitations under the License.
*/ */
.mx_AppearanceUserSettingsTab_fontSlider, .mx_AppearanceUserSettingsTab_fontSlider,
.mx_AppearanceUserSettingsTab_themeSection .mx_Field, .mx_AppearanceUserSettingsTab_fontSlider_preview,
.mx_AppearanceUserSettingsTab_fontScaling .mx_Field { .mx_AppearanceUserSettingsTab_Layout {
@mixin mx_Settings_fullWidthField; @mixin mx_Settings_fullWidthField;
} }
.mx_AppearanceUserSettingsTab .mx_Field {
width: 256px;
}
.mx_AppearanceUserSettingsTab_fontScaling {
color: $primary-fg-color;
}
.mx_AppearanceUserSettingsTab_fontSlider { .mx_AppearanceUserSettingsTab_fontSlider {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 15px; padding: 15px;
background: $font-slider-bg-color; background: rgba($appearance-tab-border-color, 0.2);
border-radius: 10px; border-radius: 10px;
font-size: 10px; font-size: 10px;
margin-top: 24px; margin-top: 24px;
margin-bottom: 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 { .mx_AppearanceUserSettingsTab_fontSlider_smallText {
font-size: 15px; font-size: 15px;
padding-right: 20px; padding-right: 20px;
padding-left: 5px; padding-left: 5px;
font-weight: 500;
} }
.mx_AppearanceUserSettingsTab_fontSlider_largeText { .mx_AppearanceUserSettingsTab_fontSlider_largeText {
font-size: 18px; font-size: 18px;
padding-left: 20px; padding-left: 20px;
padding-right: 5px; 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);
}
} }

37
res/css/views/toasts/_NonUrgentEchoFailureToast.scss Normal file
View file

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

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

@ -0,0 +1,89 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallContainer {
position: absolute;
right: 20px;
bottom: 72px;
border-radius: 8px;
overflow: hidden;
z-index: 100;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
cursor: pointer;
.mx_CallPreview {
.mx_VideoView {
width: 350px;
}
.mx_VideoView_localVideoFeed {
border-radius: 8px;
overflow: hidden;
}
}
.mx_IncomingCallBox {
min-width: 250px;
background-color: $primary-bg-color;
padding: 8px;
.mx_IncomingCallBox_CallerInfo {
display: flex;
direction: row;
img {
margin: 8px;
}
> div {
display: flex;
flex-direction: column;
justify-content: center;
}
h1, p {
margin: 0px;
padding: 0px;
font-size: $font-14px;
line-height: $font-16px;
}
h1 {
font-weight: bold;
}
}
.mx_IncomingCallBox_buttons {
padding: 8px;
display: flex;
flex-direction: row;
> .mx_IncomingCallBox_spacer {
width: 8px;
}
> * {
flex-shrink: 0;
flex-grow: 1;
margin-right: 0;
font-size: $font-15px;
line-height: $font-24px;
}
}
}
}

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

@ -1,5 +1,6 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -18,8 +19,76 @@ limitations under the License.
background-color: $accent-color; background-color: $accent-color;
color: $accent-fg-color; color: $accent-fg-color;
cursor: pointer; cursor: pointer;
text-align: center;
padding: 6px; padding: 6px;
font-weight: bold; font-weight: bold;
font-size: $font-13px;
border-radius: 8px;
min-width: 200px;
display: flex;
align-items: center;
img {
margin: 4px;
margin-right: 10px;
}
> div {
display: flex;
flex-direction: column;
// Hacky vertical align
padding-top: 3px;
}
> div > p,
> div > h1 {
padding: 0;
margin: 0;
font-size: $font-13px;
line-height: $font-15px;
}
> div > p {
font-weight: bold;
}
> * {
flex-grow: 0;
flex-shrink: 0;
}
}
.mx_CallView_hangup {
position: absolute;
right: 8px;
bottom: 10px;
height: 35px;
width: 35px;
border-radius: 35px;
background-color: $notice-primary-color;
z-index: 101;
cursor: pointer;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
top: 6.5px;
left: 7.5px;
mask: url('$(res)/img/hangup.svg');
mask-size: contain;
background-size: contain;
background-color: $primary-fg-color;
}
} }

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

@ -1,69 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_IncomingCallBox {
text-align: center;
border: 1px solid #a4a4a4;
border-radius: 8px;
background-color: $primary-bg-color;
position: fixed;
z-index: 1000;
padding: 6px;
margin-top: -3px;
margin-left: -20px;
width: 200px;
}
.mx_IncomingCallBox_chevron {
padding: 12px;
position: absolute;
left: -21px;
top: 0px;
}
.mx_IncomingCallBox_title {
padding: 6px;
font-weight: bold;
}
.mx_IncomingCallBox_buttons {
display: flex;
}
.mx_IncomingCallBox_buttons_cell {
vertical-align: middle;
padding: 6px;
flex: 1;
}
.mx_IncomingCallBox_buttons_decline,
.mx_IncomingCallBox_buttons_accept {
vertical-align: middle;
width: 80px;
height: 36px;
line-height: $font-36px;
border-radius: 36px;
color: $accent-fg-color;
margin: auto;
}
.mx_IncomingCallBox_buttons_decline {
background-color: $voip-decline-color;
}
.mx_IncomingCallBox_buttons_accept {
background-color: $voip-accept-color;
}

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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