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

Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into SuppressSpeechWhenSending

Browse source
This commit is contained in:
Michael Telatynski 2020-07-24 00:03:55 +01:00
commit c1d2e27f9c
239 changed files with 4980 additions and 10446 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
.eslintrc.js
View file

@ -11,111 +11,36 @@ const path = require('path');
const matrixJsSdkPath = path.join(path.dirname(require.resolve('matrix-js-sdk')), '..');
module.exports = {
extends: ["matrix-org", "matrix-org/react-legacy"],
parser: "babel-eslint",
extends: [matrixJsSdkPath + "/.eslintrc.js"],
plugins: [
"react",
"react-hooks",
"flowtype",
"babel"
],
env: {
browser: true,
node: true,
},
globals: {
LANGUAGES_FILE: "readonly",
},
env: {
es6: true,
},
parserOptions: {
ecmaFeatures: {
jsx: true,
legacyDecorators: true,
}
},
rules: {
// eslint's built in no-invalid-this rule breaks with class properties
"no-invalid-this": "off",
// so we replace it with a version that is class property aware
"babel/no-invalid-this": "error",
// Things we do that break the ideal style
"no-constant-condition": "off",
"prefer-promise-reject-errors": "off",
"no-async-promise-executor": "off",
"quotes": "off",
"indent": "off",
},
// We appear to follow this most of the time, so let's enforce it instead
// of occasionally following it (or catching it in review)
"keyword-spacing": "error",
overrides: [{
files: ["src/**/*.{ts, tsx}"],
"extends": ["matrix-org/ts"],
"rules": {
// We disable this while we're transitioning
"@typescript-eslint/no-explicit-any": "off",
// We'd rather not do this but we do
"@typescript-eslint/ban-ts-comment": "off",
/** react **/
// This just uses the react plugin to help eslint known when
// variables have been used in JSX
"react/jsx-uses-vars": "error",
// Don't mark React as unused if we're using JSX
"react/jsx-uses-react": "error",
// bind or arrow function in props causes performance issues
// (but we currently use them in some places)
// It's disabled here, but we should using it sparingly.
"react/jsx-no-bind": "off",
"react/jsx-key": ["error"],
// Components in JSX should always be defined.
"react/jsx-no-undef": "error",
// Assert no spacing in JSX curly brackets
// <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,
"quotes": "off",
"no-extra-boolean-cast": "off",
}
],
"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
},
},
};

37
CHANGELOG.md
View file

@ -1,3 +1,40 @@
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)

149
package.json
View file

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

4
res/css/_common.scss
View file

@ -174,7 +174,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
.mx_textinput input::placeholder {
color: $roomsublist-label-fg-color;
color: rgba($input-darker-fg-color, .75);
}
}
@ -226,7 +226,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
#mx_theme_tertiaryAccentColor {
color: $roomsublist-label-bg-color;
color: $tertiary-accent-color;
}
/* Expected z-indexes for dialogs:

15
res/css/_components.scss
View file

@ -12,7 +12,6 @@
@import "./structures/_HeaderButtons.scss";
@import "./structures/_HomePage.scss";
@import "./structures/_LeftPanel.scss";
@import "./structures/_LeftPanel2.scss";
@import "./structures/_MainSplit.scss";
@import "./structures/_MatrixChat.scss";
@import "./structures/_MyGroups.scss";
@ -21,14 +20,12 @@
@import "./structures/_RoomDirectory.scss";
@import "./structures/_RoomSearch.scss";
@import "./structures/_RoomStatusBar.scss";
@import "./structures/_RoomSubList.scss";
@import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss";
@import "./structures/_ToastContainer.scss";
@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_UserMenu.scss";
@import "./structures/_ViewSource.scss";
@ -108,7 +105,6 @@
@import "./views/elements/_IconButton.scss";
@import "./views/elements/_ImageView.scss";
@import "./views/elements/_InlineSpinner.scss";
@import "./views/elements/_InteractiveTooltip.scss";
@import "./views/elements/_ManageIntegsButton.scss";
@import "./views/elements/_PowerSelector.scss";
@import "./views/elements/_ProgressBar.scss";
@ -146,7 +142,6 @@
@import "./views/messages/_MjolnirBody.scss";
@import "./views/messages/_ReactionsRow.scss";
@import "./views/messages/_ReactionsRowButton.scss";
@import "./views/messages/_ReactionsRowButtonTooltip.scss";
@import "./views/messages/_RedactedBody.scss";
@import "./views/messages/_RoomAvatarEvent.scss";
@import "./views/messages/_SenderProfile.scss";
@ -169,7 +164,6 @@
@import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_GroupLayout.scss";
@import "./views/rooms/_IRCLayout.scss";
@import "./views/rooms/_InviteOnlyIcon.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewWidget.scss";
@import "./views/rooms/_MemberInfo.scss";
@ -182,23 +176,18 @@
@import "./views/rooms/_PresenceLabel.scss";
@import "./views/rooms/_ReplyPreview.scss";
@import "./views/rooms/_RoomBreadcrumbs.scss";
@import "./views/rooms/_RoomBreadcrumbs2.scss";
@import "./views/rooms/_RoomDropTarget.scss";
@import "./views/rooms/_RoomHeader.scss";
@import "./views/rooms/_RoomList.scss";
@import "./views/rooms/_RoomList2.scss";
@import "./views/rooms/_RoomPreviewBar.scss";
@import "./views/rooms/_RoomRecoveryReminder.scss";
@import "./views/rooms/_RoomSublist2.scss";
@import "./views/rooms/_RoomSublist.scss";
@import "./views/rooms/_RoomTile.scss";
@import "./views/rooms/_RoomTile2.scss";
@import "./views/rooms/_RoomTileIcon.scss";
@import "./views/rooms/_RoomUpgradeWarningBar.scss";
@import "./views/rooms/_SearchBar.scss";
@import "./views/rooms/_SendMessageComposer.scss";
@import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_UserOnlineDot.scss";
@import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_AvatarSetting.scss";
@import "./views/settings/_CrossSigningPanel.scss";
@ -229,6 +218,4 @@
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_CallView2.scss";
@import "./views/voip/_IncomingCallbox.scss";
@import "./views/voip/_VideoView.scss";

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

@ -68,5 +68,6 @@ $font-49px: 4.9rem;
$font-50px: 5.0rem;
$font-51px: 5.1rem;
$font-52px: 5.2rem;
$font-78px: 7.8rem;
$font-88px: 8.8rem;
$font-400px: 40rem;

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.
*/
// TODO: Update design for custom tags to match new designs
.mx_LeftPanel_tagPanelContainer {
display: flex;
flex-direction: column;
@ -50,7 +52,7 @@ limitations under the License.
background-color: $accent-color-alt;
width: 5px;
position: absolute;
left: -15px;
left: -9px;
border-radius: 0 3px 3px 0;
top: 2px; // 10 [padding-top] - (56 - 40)/2
top: 12px; // just feels right (see comment above about designs needing to be updated)
}

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

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

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

@ -1,6 +1,5 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,164 +14,171 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_LeftPanel_container {
display: flex;
/* LeftPanel 260px */
min-width: 260px;
max-width: 50%;
flex: 0 0 auto;
}
.mx_LeftPanel_container.collapsed {
min-width: unset;
/* Collapsed LeftPanel 50px */
flex: 0 0 50px;
}
.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 70px + Collapsed LeftPanel 50px */
flex: 0 0 120px;
}
.mx_LeftPanel_tagPanelContainer {
flex: 0 0 70px;
height: 100%;
}
.mx_LeftPanel_hideButton {
position: absolute;
top: 10px;
right: 0px;
padding: 8px;
cursor: pointer;
}
$tagPanelWidth: 56px; // only applies in this file, used for calculations
.mx_LeftPanel {
flex: 1;
overflow-x: hidden;
background-color: $roomlist-bg-color;
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;
flex-direction: column;
min-height: 0;
}
.mx_LeftPanel .mx_AppTile_mini {
height: 132px;
}
.mx_LeftPanel_userHeader {
/* 12px top, 12px sides, 20px bottom (using 13px bottom to account
* for internal whitespace in the breadcrumbs)
*/
padding: 12px;
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
.mx_LeftPanel .mx_RoomList_scrollbar {
order: 1;
flex: 1 1 0;
overflow-y: auto;
z-index: 6;
}
.mx_LeftPanel .mx_BottomLeftMenu {
order: 3;
border-top: 1px solid $panel-divider-color;
margin-left: 16px; /* gutter */
margin-right: 16px; /* gutter */
flex: 0 0 60px;
z-index: 1;
}
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px;
margin-bottom: 9px;
}
.mx_LeftPanel .mx_BottomLeftMenu_options {
margin-top: 18px;
}
.mx_BottomLeftMenu_options object {
pointer-events: none;
}
.mx_BottomLeftMenu_options > div {
display: inline-block;
}
.mx_BottomLeftMenu_options .mx_RoleButton {
margin-left: 0px;
margin-right: 10px;
height: 30px;
}
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
float: right;
}
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
margin-right: 0px;
}
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
float: none;
}
.mx_MatrixChat_useCompactLayout {
.mx_LeftPanel .mx_BottomLeftMenu {
flex: 0 0 50px;
}
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px;
}
.mx_LeftPanel .mx_BottomLeftMenu_options {
margin-top: 12px;
}
}
.mx_LeftPanel_exploreAndFilterRow {
// Create another flexbox column for the rows to stack within
display: flex;
flex-direction: column;
}
.mx_SearchBox {
flex: 1 1 0;
min-width: 0;
margin: 4px 9px 1px 9px;
.mx_LeftPanel_breadcrumbsContainer {
overflow-y: hidden;
overflow-x: scroll;
margin: 12px 12px 0 12px;
flex: 0 0 auto;
// Create yet another flexbox, this time within the row, to ensure items stay
// aligned correctly. This is also a row-based flexbox.
display: flex;
align-items: center;
&.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 5%);
}
&.mx_IndicatorScrollbar_rightOverflow {
mask-image: linear-gradient(90deg, black, black 95%, transparent);
}
&.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
}
.mx_LeftPanel_explore {
flex: 0 0 50%;
overflow: hidden;
transition: flex-basis 0.2s;
box-sizing: border-box;
.mx_LeftPanel_filterContainer {
margin-left: 12px;
margin-right: 12px;
&.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;
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 {
font-size: $font-14px;
margin: 4px 0 1px 9px;
padding: 9px;
padding-left: 42px;
font-weight: 600;
color: $notice-secondary-color;
.mx_LeftPanel_exploreButton {
width: 28px;
height: 28px;
border-radius: 20px;
background-color: $roomlist-button-bg-color;
position: relative;
border-radius: 4px;
&:hover {
background-color: $primary-bg-color;
}
margin-left: 8px;
&::before {
cursor: pointer;
mask: url('$(res)/img/explore.svg');
mask-repeat: no-repeat;
mask-position: center center;
content: "";
left: 14px;
top: 10px;
content: '';
position: absolute;
top: 6px;
left: 6px;
width: 16px;
height: 16px;
background-color: $notice-secondary-color;
position: absolute;
mask-image: url('$(res)/img/feather-customised/compass.svg');
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;
}
}
}
}
}

197
res/css/structures/_LeftPanel2.scss
View file

@ -1,197 +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.
*/
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
$tagPanelWidth: 56px; // only applies in this file, used for calculations
.mx_LeftPanel2 {
background-color: $roomlist2-bg-color;
min-width: 260px;
max-width: 50%;
// Create a row-based flexbox for the TagPanel and the room list
display: flex;
.mx_LeftPanel2_tagPanelContainer {
flex-grow: 0;
flex-shrink: 0;
flex-basis: $tagPanelWidth;
height: 100%;
// Create another flexbox so the TagPanel fills the container
display: flex;
// TagPanel handles its own CSS
}
&:not(.mx_LeftPanel2_hasTagPanel) {
.mx_LeftPanel2_roomListContainer {
width: 100%;
}
}
// Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc
.mx_LeftPanel2_roomListContainer {
width: calc(100% - $tagPanelWidth);
background-color: $roomlist2-bg-color;
// Create another flexbox (this time a column) for the room list components
display: flex;
flex-direction: column;
.mx_LeftPanel2_userHeader {
/* 12px top, 12px sides, 20px bottom (using 13px bottom to account
* for internal whitespace in the breadcrumbs)
*/
padding: 12px;
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
// Create another flexbox column for the rows to stack within
display: flex;
flex-direction: column;
}
.mx_LeftPanel2_breadcrumbsContainer {
overflow-y: hidden;
overflow-x: scroll;
margin: 12px 12px 0 12px;
flex: 0 0 auto;
// Create yet another flexbox, this time within the row, to ensure items stay
// aligned correctly. This is also a row-based flexbox.
display: flex;
align-items: center;
&.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 5%);
}
&.mx_IndicatorScrollbar_rightOverflow {
mask-image: linear-gradient(90deg, black, black 95%, transparent);
}
&.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
}
.mx_LeftPanel2_filterContainer {
margin-left: 12px;
margin-right: 12px;
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
// Create a flexbox to organize the inputs
display: flex;
align-items: center;
.mx_RoomSearch_expanded + .mx_LeftPanel2_exploreButton {
// Cheaty way to return the occupied space to the filter input
flex-basis: 0;
margin: 0;
width: 0;
// Don't forget to hide the masked ::before icon,
// using display:none or visibility:hidden would break accessibility
&::before {
content: none;
}
}
.mx_LeftPanel2_exploreButton {
width: 28px;
height: 28px;
border-radius: 20px;
background-color: $roomlist2-button-bg-color;
position: relative;
margin-left: 8px;
&::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
width: 16px;
height: 16px;
mask-image: url('$(res)/img/feather-customised/compass.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
}
.mx_LeftPanel2_roomListWrapper {
// Create a flexbox to ensure the containing items cause appropriate overflow.
display: flex;
flex-grow: 1;
overflow: hidden;
min-height: 0;
margin-top: 10px; // so we're not up against the search/filter
&.mx_LeftPanel2_roomListWrapper_stickyBottom {
padding-bottom: 32px;
}
&.mx_LeftPanel2_roomListWrapper_stickyTop {
padding-top: 32px;
}
}
.mx_LeftPanel2_actualRoomListContainer {
flex-grow: 1; // fill the available space
overflow-y: auto;
width: 100%;
max-width: 100%;
position: relative; // for sticky headers
// Create a flexbox to trick the layout engine
display: flex;
}
}
// These styles override the defaults for the minimized (66px) layout
&.mx_LeftPanel2_minimized {
min-width: unset;
// We have to forcefully set the width to override the resizer's style attribute.
&.mx_LeftPanel2_hasTagPanel {
width: calc(68px + $tagPanelWidth) !important;
}
&:not(.mx_LeftPanel2_hasTagPanel) {
width: 68px !important;
}
.mx_LeftPanel2_roomListContainer {
width: 68px;
.mx_LeftPanel2_filterContainer {
// Organize the flexbox into a centered column layout
flex-direction: column;
justify-content: center;
.mx_LeftPanel2_exploreButton {
margin-left: 0;
margin-top: 8px;
background-color: transparent;
}
}
}
}
}

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

@ -26,23 +26,3 @@ limitations under the License.
margin: 0 -10px 0 0;
padding: 0 10px 0 0;
}
.mx_MainSplit > .mx_ResizeHandle_horizontal:hover {
position: relative;
&::before {
position: absolute;
left: 4px;
top: 50%;
transform: translate(0, -50%);
height: 30%;
width: 4px;
border-radius: 4px;
content: ' ';
background-color: $primary-fg-color;
opacity: 0.8;
}
}

22
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/... */
.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_LeftPanel2):not(.mx_ResizeHandle) {
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) {
background-color: $primary-bg-color;
flex: 1 1 0;
@ -78,23 +78,3 @@ limitations under the License.
*/
height: 100%;
}
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
position: relative;
&::before {
position: absolute;
left: -2px;
top: 50%;
transform: translate(0, -50%);
height: 30%;
width: 4px;
border-radius: 4px;
content: ' ';
background-color: $primary-fg-color;
opacity: 0.8;
}
}

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

@ -61,10 +61,10 @@ limitations under the License.
&::before {
content: '';
position: absolute;
top: 6px; // center with parent of 32px
left: 6px; // center with parent of 32px
height: 20px;
width: 20px;
top: 4px; // center with parent of 32px
left: 4px; // center with parent of 32px
height: 24px;
width: 24px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;

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

@ -18,7 +18,7 @@ limitations under the License.
.mx_RoomSearch {
flex: 1;
border-radius: 20px;
background-color: $roomlist2-button-bg-color;
background-color: $roomlist-button-bg-color;
height: 28px;
padding: 2px;

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/_TagPanel.scss
View file

@ -157,7 +157,7 @@ limitations under the License.
font-weight: 600;
font-size: $font-14px;
padding: 0 5px;
background-color: $roomtile-name-color;
background-color: $muted-fg-color;
}
.mx_TagTile_badgeHighlight {

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

2
res/css/views/avatars/_DecoratedRoomAvatar.scss
View file

@ -24,7 +24,7 @@ limitations under the License.
right: 0;
}
.mx_NotificationBadge, .mx_RoomTile2_badgeContainer {
.mx_NotificationBadge, .mx_RoomTile_badgeContainer {
position: absolute;
top: 0;
right: 0;

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

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

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

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

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

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

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

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

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

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

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

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

@ -98,6 +98,7 @@ $AppsDrawerBodyHeight: 273px;
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
height: 114px;
min-width: 300px;
}
.mx_AppTileMenuBar {

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

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

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

@ -42,7 +42,7 @@ limitations under the License.
// white infill for the transparency
.mx_E2EIcon::before {
background-color: #ffffff;
mask: url('$(res)/img/e2e/normal.svg');
mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;

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

@ -355,7 +355,7 @@ $left-gutter: 64px;
&::before {
background-color: #ffffff;
mask: url('$(res)/img/e2e/normal.svg');
mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;

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

@ -97,7 +97,7 @@ $irc-line-height: $font-18px;
}
> .mx_EventTile_e2eIcon {
position: relative;
position: absolute;
right: unset;
left: unset;
top: 0;
@ -181,9 +181,11 @@ $irc-line-height: $font-18px;
> span {
display: flex;
> .mx_SenderProfile_name {
> .mx_SenderProfile_name,
> .mx_SenderProfile_aux {
overflow: hidden;
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;
}
}

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

@ -41,8 +41,8 @@ limitations under the License.
// with text-align in parent
display: inline-block;
padding: 0 4px;
color: $roomtile-badge-fg-color;
background-color: $roomtile-name-color;
color: $accent-fg-color;
background-color: $muted-fg-color;
}
.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
@ -56,7 +56,7 @@ limitations under the License.
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
border: 1.3px solid $muted-fg-color;
cursor: pointer;
}
@ -70,5 +70,5 @@ limitations under the License.
mask: url('$(res)/img/icon-jump-to-bottom.svg');
mask-repeat: no-repeat;
mask-position: 9px 14px;
background: $roomtile-name-color;
background: $muted-fg-color;
}

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

@ -63,17 +63,18 @@ limitations under the License.
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
flex: 1 1 0;
// stricter rule to override the one in _common.scss
&[type="text"] {
font-size: $font-12px;
}
}
.mx_MemberList_wrapper {
padding: 10px;
}
.mx_MemberList_invite,
.mx_RightPanel_invite {
.mx_MemberList_invite {
flex: 0 0 auto;
position: relative;
background-color: $button-bg-color;
@ -83,11 +84,6 @@ limitations under the License.
justify-content: center;
color: $button-fg-color;
font-weight: 600;
.mx_RightPanel_icon {
padding-right: 5px;
padding-top: 2px;
}
}
.mx_MemberList_invite.mx_AccessibleButton_disabled {
@ -102,3 +98,11 @@ limitations under the License.
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');
}

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

@ -20,7 +20,7 @@ limitations under the License.
margin: auto;
border-top: 1px solid $primary-hairline-color;
position: relative;
padding-left: 83px;
padding-left: 82px;
}
.mx_MessageComposer_replaced_wrapper {

4
res/css/views/rooms/_NotificationBadge.scss
View file

@ -27,7 +27,7 @@ limitations under the License.
// ^- The count is an element floating within that.
&.mx_NotificationBadge_visible {
background-color: $roomtile2-default-badge-bg-color;
background-color: $roomtile-default-badge-bg-color;
// Create a flexbox to order the count a bit easier
display: flex;
@ -42,6 +42,8 @@ limitations under the License.
// These are the 3 background types
&.mx_NotificationBadge_dot {
background-color: $primary-fg-color; // increased visibility
width: 6px;
height: 6px;
border-radius: 6px;

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

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

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

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

@ -1,68 +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.
*/
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
.mx_RoomBreadcrumbs2 {
width: 100%;
// Create a flexbox for the crumbs
display: flex;
flex-direction: row;
align-items: flex-start;
.mx_RoomBreadcrumbs2_crumb {
margin-right: 8px;
width: 32px;
}
// These classes come from the CSSTransition component. There's many more classes we
// could care about, but this is all we worried about for now. The animation works by
// first triggering the enter state with the newest breadcrumb off screen (-40px) then
// sliding it into view.
&.mx_RoomBreadcrumbs2-enter {
margin-left: -40px; // 32px for the avatar, 8px for the margin
}
&.mx_RoomBreadcrumbs2-enter-active {
margin-left: 0;
// Timing function is as-requested by design.
// NOTE: The transition time MUST match the value passed to CSSTransition!
transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
}
.mx_RoomBreadcrumbs2_placeholder {
font-weight: 600;
font-size: $font-14px;
line-height: 32px; // specifically to match the height this is not scaled
height: 32px;
}
}
.mx_RoomBreadcrumbs2_Tooltip {
margin-left: -42px;
margin-top: -42px;
&.mx_Tooltip {
background-color: $inverted-bg-color;
color: $accent-fg-color;
border: 0;
.mx_Tooltip_chevron {
display: none;
}
}
}

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

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

@ -75,7 +75,6 @@ limitations under the License.
.mx_RoomHeader_buttons {
display: flex;
background-color: $primary-bg-color;
padding-right: 5px;
}
.mx_RoomHeader_info {
@ -209,20 +208,32 @@ limitations under the License.
.mx_RoomHeader_button {
position: relative;
margin-left: 10px;
margin-left: 1px;
margin-right: 1px;
cursor: pointer;
height: 20px;
width: 20px;
height: 32px;
width: 32px;
border-radius: 100%;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
top: 4px; // center with parent of 32px
left: 4px; // center with parent of 32px
height: 24px;
width: 24px;
background-color: $roomheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
&:hover {
background: rgba($accent-color, 0.1);
&::before {
background-color: $accent-color;
}
}
}
.mx_RoomHeader_settingsButton::before {

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

@ -1,6 +1,5 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,56 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoomList.mx_RoomList2 {
overflow-y: auto;
}
.mx_RoomList {
/* take up remaining space below TopLeftMenu */
flex: 1;
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;
padding-right: 7px; // width of the scrollbar, to line things up
}

27
res/css/views/rooms/_RoomList2.scss
View file

@ -1,27 +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.
*/
// TODO: Rename to mx_RoomList during replacement of old component
.mx_RoomList2 {
width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists)
// Create a column-based flexbox for the sublists. That's pretty much all we have to
// worry about in this stylesheet.
display: flex;
flex-direction: column;
flex-wrap: nowrap; // let the column overflow
}

123
res/css/views/rooms/_RoomSublist2.scss → res/css/views/rooms/_RoomSublist.scss
View file

@ -14,20 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
.mx_RoomSublist2 {
// The sublist is a column of rows, essentially
display: flex;
flex-direction: column;
.mx_RoomSublist {
margin-left: 8px;
margin-bottom: 4px;
width: 100%;
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
.mx_RoomSublist2_headerContainer {
.mx_RoomSublist_headerContainer {
// Create a flexbox to make alignment easy
display: flex;
align-items: center;
@ -43,13 +34,13 @@ limitations under the License.
// all works by ensuring the header text has a fixed height when sticky so the
// fixed height of the container can maintain the scroll position.
// The combined height must be set in the LeftPanel2 component for sticky headers
// The combined height must be set in the LeftPanel component for sticky headers
// to work correctly.
padding-bottom: 8px;
height: 24px;
color: $roomlist2-header-color;
color: $roomlist-header-color;
.mx_RoomSublist2_stickable {
.mx_RoomSublist_stickable {
flex: 1;
max-width: 100%;
@ -61,26 +52,26 @@ limitations under the License.
// to identify when a header is sticky. If we didn't have a consistent sticky class,
// we'd have to do the "is sticky" checks again on click, as clicking the header
// when sticky scrolls instead of collapses the list.
&.mx_RoomSublist2_headerContainer_sticky {
&.mx_RoomSublist_headerContainer_sticky {
position: fixed;
height: 32px; // to match the header container
// width set by JS
width: calc(100% - 22px);
}
&.mx_RoomSublist2_headerContainer_stickyBottom {
&.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_RoomSublist2_headerContainer_stickyTop, is applied though.
// The class, mx_RoomSublist_headerContainer_stickyTop, is applied though.
}
// Sticky Headers End
// ***************************
.mx_RoomSublist2_badgeContainer {
.mx_RoomSublist_badgeContainer {
// Create another flexbox row because it's super easy to position the badge this way.
display: flex;
align-items: center;
@ -93,14 +84,14 @@ limitations under the License.
}
}
&:not(.mx_RoomSublist2_headerContainer_withAux) {
&:not(.mx_RoomSublist_headerContainer_withAux) {
.mx_NotificationBadge {
margin-right: 4px; // just to push it over a bit, aligning it with the other elements
}
}
.mx_RoomSublist2_auxButton,
.mx_RoomSublist2_menuButton {
.mx_RoomSublist_auxButton,
.mx_RoomSublist_menuButton {
margin-left: 8px; // should be the same as the notification badge
position: relative;
width: 24px;
@ -122,21 +113,21 @@ limitations under the License.
}
// Hide the menu button by default
.mx_RoomSublist2_menuButton {
.mx_RoomSublist_menuButton {
visibility: hidden;
width: 0;
margin: 0;
}
.mx_RoomSublist2_auxButton::before {
.mx_RoomSublist_auxButton::before {
mask-image: url('$(res)/img/feather-customised/plus.svg');
}
.mx_RoomSublist2_menuButton::before {
.mx_RoomSublist_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
.mx_RoomSublist2_headerText {
.mx_RoomSublist_headerText {
flex: 1;
max-width: calc(100% - 16px); // 16px is the badge width
line-height: $font-16px;
@ -148,7 +139,7 @@ limitations under the License.
overflow: hidden;
white-space: nowrap;
.mx_RoomSublist2_collapseBtn {
.mx_RoomSublist_collapseBtn {
display: inline-block;
position: relative;
width: 12px;
@ -169,7 +160,7 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
&.mx_RoomSublist2_collapseBtn_collapsed::before {
&.mx_RoomSublist_collapseBtn_collapsed::before {
mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
}
}
@ -181,12 +172,12 @@ limitations under the License.
// 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_RoomSublist2_headerContainer {
&:first-child .mx_RoomSublist_headerContainer {
height: 0;
padding-bottom: 4px;
}
.mx_RoomSublist2_resizeBox {
.mx_RoomSublist_resizeBox {
position: relative;
// Create another flexbox column for the tiles
@ -194,7 +185,7 @@ limitations under the License.
flex-direction: column;
overflow: hidden;
.mx_RoomSublist2_tiles {
.mx_RoomSublist_tiles {
flex: 1 0 0;
overflow: hidden;
// need this to be flex otherwise the overflow hidden from above
@ -206,18 +197,18 @@ limitations under the License.
mask-image: linear-gradient(0deg, transparent, black 4px);
}
.mx_RoomSublist2_resizerHandles_showNButton {
.mx_RoomSublist_resizerHandles_showNButton {
flex: 0 0 32px;
}
.mx_RoomSublist2_resizerHandles {
.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_RoomSublist2_resizerHandle {
.mx_RoomSublist_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
@ -235,21 +226,21 @@ limitations under the License.
right: calc(50% - 32px) !important;
}
&:hover, &.mx_RoomSublist2_hasMenuOpen {
.mx_RoomSublist2_resizerHandle {
&:hover, &.mx_RoomSublist_hasMenuOpen {
.mx_RoomSublist_resizerHandle {
opacity: 0.8;
background-color: $primary-fg-color;
}
}
}
.mx_RoomSublist2_showNButton {
.mx_RoomSublist_showNButton {
cursor: pointer;
font-size: $font-13px;
line-height: $font-18px;
color: $roomtile2-preview-color;
color: $roomtile-preview-color;
// Update the render() function for RoomSublist2 if these change
// Update the render() function for RoomSublist if these change
// Update the ListLayout class for minVisibleTiles if these change.
height: 24px;
padding-bottom: 4px;
@ -258,7 +249,7 @@ limitations under the License.
display: flex;
align-items: center;
.mx_RoomSublist2_showNButtonChevron {
.mx_RoomSublist_showNButtonChevron {
position: relative;
width: 16px;
height: 16px;
@ -267,52 +258,52 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $roomtile2-preview-color;
background: $roomtile-preview-color;
}
.mx_RoomSublist2_showMoreButtonChevron {
.mx_RoomSublist_showMoreButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_RoomSublist2_showLessButtonChevron {
.mx_RoomSublist_showLessButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
}
}
&.mx_RoomSublist2_hasMenuOpen,
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:focus-within,
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
.mx_RoomSublist2_menuButton {
&.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_RoomSublist2_minimized {
.mx_RoomSublist2_headerContainer {
&.mx_RoomSublist_minimized {
.mx_RoomSublist_headerContainer {
height: auto;
flex-direction: column;
position: relative;
.mx_RoomSublist2_badgeContainer {
.mx_RoomSublist_badgeContainer {
order: 0;
align-self: flex-end;
margin-right: 0;
}
.mx_RoomSublist2_stickable {
.mx_RoomSublist_stickable {
order: 1;
max-width: 100%;
}
.mx_RoomSublist2_auxButton {
.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: $roomlist2-button-bg-color;
background-color: $roomlist-button-bg-color;
margin-top: 8px;
&::before {
@ -322,25 +313,25 @@ limitations under the License.
}
}
.mx_RoomSublist2_resizeBox {
.mx_RoomSublist_resizeBox {
align-items: center;
}
.mx_RoomSublist2_showNButton {
.mx_RoomSublist_showNButton {
flex-direction: column;
.mx_RoomSublist2_showNButtonChevron {
.mx_RoomSublist_showNButtonChevron {
margin-right: 12px; // to center
}
}
.mx_RoomSublist2_menuButton {
.mx_RoomSublist_menuButton {
height: 16px;
}
&.mx_RoomSublist2_hasMenuOpen,
& > .mx_RoomSublist2_headerContainer:hover {
.mx_RoomSublist2_menuButton {
&.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
@ -352,7 +343,7 @@ limitations under the License.
// This is the same color as the left panel background because it needs
// to occlude the sublist title
background-color: $roomlist2-bg-color;
background-color: $roomlist-bg-color;
&::before {
top: 0;
@ -360,8 +351,8 @@ limitations under the License.
}
}
&.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) {
.mx_RoomSublist2_menuButton {
&.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.
}
}
@ -369,7 +360,7 @@ limitations under the License.
}
}
.mx_RoomSublist2_contextMenu {
.mx_RoomSublist_contextMenu {
padding: 20px 16px;
width: 250px;
@ -377,11 +368,11 @@ limitations under the License.
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; // additional 16px
border: 1px solid $roomsublist2-divider-color;
border: 1px solid $roomsublist-divider-color;
opacity: 0.1;
}
.mx_RoomSublist2_contextMenu_title {
.mx_RoomSublist_contextMenu_title {
font-size: $font-15px;
line-height: $font-20px;
font-weight: 600;
@ -393,6 +384,6 @@ limitations under the License.
}
}
.mx_RoomSublist2_addRoomTooltip {
.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 2019 The Matrix.org Foundation C.I.C.
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,214 +14,222 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// Note: the room tile expects to be in a flexbox column container
.mx_RoomTile {
margin-bottom: 4px;
padding: 4px;
// The tile is also a flexbox row itself
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
height: 34px;
margin: 0;
padding: 0 8px 0 10px;
position: relative;
.mx_RoomTile_menuButton {
display: none;
flex: 0 0 16px;
height: 16px;
background-image: url('$(res)/img/icon_context.svg');
background-repeat: no-repeat;
background-position: center;
&.mx_RoomTile_selected,
&:hover,
&:focus-within,
&.mx_RoomTile_hasMenuOpen {
background-color: $roomtile-selected-bg-color;
border-radius: 8px;
}
.mx_UserOnlineDot {
display: block;
margin-right: 5px;
}
}
.mx_RoomTile:focus {
filter: none !important;
background-color: $roomtile-focused-bg-color;
}
.mx_RoomTile_tooltip {
display: inline-block;
position: relative;
top: -54px;
left: -12px;
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 8px;
}
.mx_RoomTile_nameContainer {
display: flex;
align-items: center;
flex: 1;
vertical-align: middle;
min-width: 0;
}
flex-grow: 1;
min-width: 0; // allow flex to shrink it
margin-right: 8px; // spacing to buttons/badges
.mx_RoomTile_labelContainer {
// Create a new column layout flexbox for the name parts
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
justify-content: center;
.mx_RoomTile_subtext {
display: inline-block;
font-size: $font-11px;
padding: 0 0 0 7px;
margin: 0;
.mx_RoomTile_name,
.mx_RoomTile_messagePreview {
margin: 0 2px;
width: 100%;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
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 {
font-size: $font-14px;
padding: 0 4px;
color: $roomtile-name-color;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
line-height: $font-18px;
}
.mx_RoomTile_badge {
flex: 0 1 content;
border-radius: 0.8em;
padding: 0 0.4em;
color: $roomtile-badge-fg-color;
.mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
font-weight: 600;
font-size: $font-12px;
}
.collapsed {
.mx_RoomTile {
margin: 0 6px;
padding: 0 2px;
.mx_RoomTile_messagePreview {
font-size: $font-13px;
line-height: $font-18px;
color: $roomtile-preview-color;
}
.mx_RoomTile_nameWithPreview {
margin-top: -4px; // shift the name up a bit more
}
}
.mx_RoomTile_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;
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;
}
.mx_RoomTile_badge {
position: absolute;
right: 6px;
top: 0px;
border-radius: 16px;
z-index: 3;
border: 0.18em solid $secondary-accent-color;
}
.mx_RoomTile_menuButton {
display: none; // no design for this for now
}
.mx_UserOnlineDot {
display: none; // no design for this for now
}
}
// toggle menuButton and badge on menu displayed
.mx_RoomTile_menuDisplayed,
// or on keyboard focus of room tile
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:focus-within,
// or on pointer hover
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover {
.mx_RoomTile_notificationsButton,
.mx_RoomTile_menuButton {
display: block;
}
.mx_UserOnlineDot {
display: none;
}
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge,
.mx_RoomTile_badge.mx_RoomTile_badgeUnread {
background-color: $roomtile-name-color;
&.mx_RoomTile_minimized {
flex-direction: column;
align-items: center;
position: relative;
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 0;
}
}
}
.mx_RoomTile_highlight .mx_RoomTile_badge,
.mx_RoomTile_badge.mx_RoomTile_badgeRed {
color: $accent-fg-color;
// We use these both in context menus and the room tiles
.mx_RoomTile_iconBell::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
.mx_RoomTile_iconBellDot::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
}
.mx_RoomTile_iconBellCrossed::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
}
.mx_RoomTile_iconBellMentions::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
}
.mx_RoomTile_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;
}
}
.mx_RoomTile_unread, .mx_RoomTile_highlight {
.mx_RoomTile_name {
font-weight: 600;
color: $roomtile-selected-color;
.mx_RoomTile_contextMenu_activeRow {
&.mx_AccessibleButton, .mx_AccessibleButton {
color: $accent-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $accent-color;
}
}
.mx_RoomTile_selected {
border-radius: 4px;
background-color: $roomtile-selected-bg-color;
}
.mx_IconizedContextMenu_icon {
position: relative;
width: 16px;
height: 16px;
.mx_DNDRoomTile {
transform: none;
transition: transform 0.2s;
}
.mx_DNDRoomTile_dragging {
transform: scale(1.05, 1.05);
}
.mx_RoomTile_arrow {
&::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
right: 0px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
.mx_RoomTile.mx_RoomTile_transparent {
background-color: transparent;
.mx_RoomTile_iconStar::before {
mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
}
.mx_RoomTile.mx_RoomTile_transparent:focus {
background-color: $roomtile-transparent-focused-color;
.mx_RoomTile_iconArrowDown::before {
mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg');
}
.mx_GroupInviteTile .mx_RoomTile_name {
flex: 1;
.mx_RoomTile_iconSettings::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_RoomTile_iconSignOut::before {
mask-image: url('$(res)/img/element-icons/leave.svg');
}
}

241
res/css/views/rooms/_RoomTile2.scss
View file

@ -1,241 +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.
*/
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
// Note: the room tile expects to be in a flexbox column container
.mx_RoomTile2 {
margin-bottom: 4px;
padding: 4px;
// The tile is also a flexbox row itself
display: flex;
&.mx_RoomTile2_selected,
&:hover,
&:focus-within,
&.mx_RoomTile2_hasMenuOpen {
background-color: $roomtile2-selected-bg-color;
border-radius: 8px;
}
.mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
margin-right: 8px;
}
.mx_RoomTile2_nameContainer {
flex-grow: 1;
min-width: 0; // allow flex to shrink it
margin-right: 8px; // spacing to buttons/badges
// Create a new column layout flexbox for the name parts
display: flex;
flex-direction: column;
justify-content: center;
.mx_RoomTile2_name,
.mx_RoomTile2_messagePreview {
margin: 0 2px;
width: 100%;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_RoomTile2_name {
font-size: $font-14px;
line-height: $font-18px;
}
.mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents {
font-weight: 600;
}
.mx_RoomTile2_messagePreview {
font-size: $font-13px;
line-height: $font-18px;
color: $roomtile2-preview-color;
}
.mx_RoomTile2_nameWithPreview {
margin-top: -4px; // shift the name up a bit more
}
}
.mx_RoomTile2_notificationsButton {
margin-left: 4px; // spacing between buttons
}
.mx_RoomTile2_badgeContainer {
height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
.mx_NotificationBadge {
margin-right: 2px; // centering
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
}
}
// The context menu buttons are hidden by default
.mx_RoomTile2_menuButton,
.mx_RoomTile2_notificationsButton {
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
// If the room has an overriden notification setting then we always show the notifications menu button
.mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
display: block;
}
.mx_RoomTile2_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
&:not(.mx_RoomTile2_minimized) {
&:hover,
&:focus-within,
&.mx_RoomTile2_hasMenuOpen {
// Hide the badge container on hover because it'll be a menu button
.mx_RoomTile2_badgeContainer {
width: 0;
height: 0;
display: none;
}
.mx_RoomTile2_notificationsButton,
.mx_RoomTile2_menuButton {
display: block;
}
}
}
&.mx_RoomTile2_minimized {
flex-direction: column;
align-items: center;
position: relative;
.mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
margin-right: 0;
}
}
}
// We use these both in context menus and the room tiles
.mx_RoomTile2_iconBell::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
.mx_RoomTile2_iconBellDot::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
}
.mx_RoomTile2_iconBellCrossed::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
}
.mx_RoomTile2_iconBellMentions::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
}
.mx_RoomTile2_iconCheck::before {
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
}
.mx_RoomTile2_contextMenu {
.mx_RoomTile2_contextMenu_redRow {
.mx_AccessibleButton {
color: $warning-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $warning-color;
}
}
.mx_RoomTile2_contextMenu_activeRow {
&.mx_AccessibleButton, .mx_AccessibleButton {
color: $accent-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $accent-color;
}
}
.mx_IconizedContextMenu_icon {
position: relative;
width: 16px;
height: 16px;
&::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
.mx_RoomTile2_iconStar::before {
mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
}
.mx_RoomTile2_iconFavorite::before {
mask-image: url('$(res)/img/feather-customised/favourites.svg');
}
.mx_RoomTile2_iconArrowDown::before {
mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg');
}
.mx_RoomTile2_iconSettings::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_RoomTile2_iconSignOut::before {
mask-image: url('$(res)/img/element-icons/leave.svg');
}
}

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

@ -18,7 +18,7 @@ limitations under the License.
width: 12px;
height: 12px;
border-radius: 12px;
background-color: $roomlist2-bg-color; // to match the room list itself
background-color: $roomlist-bg-color; // to match the room list itself
}
.mx_RoomTileIcon_globe::before {

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

@ -42,7 +42,7 @@ limitations under the License.
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
border: 1.3px solid $muted-fg-color;
cursor: pointer;
}
@ -54,7 +54,7 @@ limitations under the License.
mask-image: url('$(res)/img/icon-jump-to-first-unread.svg');
mask-repeat: no-repeat;
mask-position: 9px 13px;
background: $roomtile-name-color;
background: $muted-fg-color;
}
.mx_TopUnreadMessagesBar_markAsRead {
@ -62,7 +62,7 @@ limitations under the License.
width: 18px;
height: 18px;
background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
border: 1.3px solid $muted-fg-color;
border-radius: 10px;
margin: 5px auto;
}
@ -76,5 +76,5 @@ limitations under the License.
mask-repeat: no-repeat;
mask-size: 10px;
mask-position: 4px 4px;
background: $roomtile-name-color;
background: $muted-fg-color;
}

23
res/css/views/rooms/_UserOnlineDot.scss
View file

@ -1,23 +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_UserOnlineDot {
border-radius: 50%;
background-color: $accent-color;
height: 6px;
width: 6px;
display: inline-block;
}

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

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

8
res/css/views/voip/_CallContainer.scss
View file

@ -36,12 +36,12 @@ limitations under the License.
}
}
.mx_IncomingCallBox2 {
.mx_IncomingCallBox {
min-width: 250px;
background-color: $primary-bg-color;
padding: 8px;
.mx_IncomingCallBox2_CallerInfo {
.mx_IncomingCallBox_CallerInfo {
display: flex;
direction: row;
@ -68,12 +68,12 @@ limitations under the License.
}
}
.mx_IncomingCallBox2_buttons {
.mx_IncomingCallBox_buttons {
padding: 8px;
display: flex;
flex-direction: row;
> .mx_IncomingCallBox2_spacer {
> .mx_IncomingCallBox_spacer {
width: 8px;
}

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

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

96
res/css/views/voip/_CallView2.scss
View file

@ -1,96 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
.mx_CallView2_voice {
background-color: $accent-color;
color: $accent-fg-color;
cursor: pointer;
padding: 6px;
font-weight: bold;
border-radius: 8px;
min-width: 200px;
display: flex;
align-items: center;
img {
margin: 4px;
margin-right: 10px;
}
> div {
display: flex;
flex-direction: column;
// Hacky vertical align
padding-top: 3px;
}
> div > p,
> div > h1 {
padding: 0;
margin: 0;
font-size: $font-13px;
line-height: $font-15px;
}
> div > p {
font-weight: bold;
}
> * {
flex-grow: 0;
flex-shrink: 0;
}
}
.mx_CallView2_hangup {
position: absolute;
right: 8px;
bottom: 10px;
height: 35px;
width: 35px;
border-radius: 35px;
background-color: $notice-primary-color;
z-index: 101;
cursor: pointer;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
top: 6.5px;
left: 7.5px;
mask: url('$(res)/img/hangup.svg');
mask-size: contain;
background-size: contain;
background-color: $primary-fg-color;
}
}

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

10
res/img/element-icons/community-members.svg
View file

@ -1,8 +1,8 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM14.3804 11.412C15.59 11.412 16.5705 10.3498 16.5705 9.03936C16.5705 7.72896 15.59 6.66667 14.3804 6.66667C13.1708 6.66667 12.1902 7.72896 12.1902 9.03936C12.1902 10.3498 13.1708 11.412 14.3804 11.412ZM10.8333 15.7461C10.8333 13.7941 9.46231 12.1623 7.63071 11.7611C7.31877 11.6991 6.99645 11.6667 6.66667 11.6667C4.66814 11.6667 2.94347 12.8594 2.14307 14.5833L5.83334 18.4483H10.8333L10.8333 15.7461ZM12.8333 18.4483H14.3804L18.0844 14.5833C17.3081 13.3356 15.9394 12.5071 14.3804 12.5071C13.5955 12.5071 12.8588 12.7171 12.2216 13.0849C12.6134 13.8884 12.8333 14.7913 12.8333 15.7461L12.8333 18.4483ZM9.16669 7.70833C9.16669 9.2041 8.0474 10.4167 6.66669 10.4167C5.28597 10.4167 4.16669 9.2041 4.16669 7.70833C4.16669 6.21256 5.28597 5 6.66669 5C8.0474 5 9.16669 6.21256 9.16669 7.70833Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.3804 13.412C17.59 13.412 18.5705 12.3498 18.5705 11.0394C18.5705 9.72896 17.59 8.66667 16.3804 8.66667C15.1708 8.66667 14.1902 9.72896 14.1902 11.0394C14.1902 12.3498 15.1708 13.412 16.3804 13.412ZM12.8333 17.7461C12.8333 15.7941 11.4623 14.1623 9.63071 13.7611C9.31877 13.6991 8.99645 13.6667 8.66667 13.6667C6.66814 13.6667 4.94347 14.8594 4.14307 16.5833L7.83334 20.4483H12.8333L12.8333 17.7461ZM14.8333 20.4483H16.3804L20.0844 16.5833C19.3081 15.3356 17.9394 14.5071 16.3804 14.5071C15.5955 14.5071 14.8588 14.7171 14.2216 15.0849C14.6134 15.8884 14.8333 16.7913 14.8333 17.7461L14.8333 20.4483ZM11.1667 9.70833C11.1667 11.2041 10.0474 12.4167 8.66669 12.4167C7.28597 12.4167 6.16669 11.2041 6.16669 9.70833C6.16669 8.21256 7.28597 7 8.66669 7C10.0474 7 11.1667 8.21256 11.1667 9.70833Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM14.3804 11.412C15.59 11.412 16.5705 10.3498 16.5705 9.03936C16.5705 7.72896 15.59 6.66667 14.3804 6.66667C13.1708 6.66667 12.1902 7.72896 12.1902 9.03936C12.1902 10.3498 13.1708 11.412 14.3804 11.412ZM10.8333 15.7461C10.8333 13.7941 9.46231 12.1623 7.63071 11.7611C7.31877 11.6991 6.99645 11.6667 6.66667 11.6667C4.66814 11.6667 2.94347 12.8594 2.14307 14.5833L5.83334 18.4483H10.8333L10.8333 15.7461ZM12.8333 18.4483H14.3804L18.0844 14.5833C17.3081 13.3356 15.9394 12.5071 14.3804 12.5071C13.5955 12.5071 12.8588 12.7171 12.2216 13.0849C12.6134 13.8884 12.8333 14.7913 12.8333 15.7461L12.8333 18.4483ZM9.16669 7.70833C9.16669 9.2041 8.0474 10.4167 6.66669 10.4167C5.28597 10.4167 4.16669 9.2041 4.16669 7.70833C4.16669 6.21256 5.28597 5 6.66669 5C8.0474 5 9.16669 6.21256 9.16669 7.70833Z" fill="black"/>
<path d="M7.63071 11.7611L7.9873 10.1331L7.97144 10.1296L7.95552 10.1264L7.63071 11.7611ZM10.8333 15.7461H9.16665V15.7461L10.8333 15.7461ZM2.14307 14.5833L0.631393 13.8815L0.152784 14.9123L0.937622 15.7343L2.14307 14.5833ZM5.83334 18.4483L4.62789 19.5993L5.1203 20.115H5.83334V18.4483ZM10.8333 18.4483V20.115H12.5L12.5 18.4483L10.8333 18.4483ZM14.3804 18.4483V20.115H15.0916L15.5837 19.6015L14.3804 18.4483ZM12.8333 18.4483L11.1667 18.4483L11.1667 20.115H12.8333V18.4483ZM18.0844 14.5833L19.2877 15.7365L20.1834 14.802L19.4996 13.7029L18.0844 14.5833ZM12.2216 13.0849L11.3884 11.6415L10.0423 12.4185L10.7236 13.8155L12.2216 13.0849ZM12.8333 15.7461H11.1667V15.7461L12.8333 15.7461ZM10 21.6667C16.4433 21.6667 21.6667 16.4433 21.6667 10H18.3333C18.3333 14.6024 14.6024 18.3333 10 18.3333V21.6667ZM-1.66667 10C-1.66667 16.4433 3.55668 21.6667 10 21.6667V18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10H-1.66667ZM10 -1.66667C3.55668 -1.66667 -1.66667 3.55668 -1.66667 10H1.66667C1.66667 5.39763 5.39763 1.66667 10 1.66667V-1.66667ZM21.6667 10C21.6667 3.55668 16.4433 -1.66667 10 -1.66667V1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10H21.6667ZM14.9039 9.03936C14.9039 9.5574 14.5464 9.74538 14.3804 9.74538V13.0787C16.6335 13.0787 18.2372 11.1421 18.2372 9.03936H14.9039ZM14.3804 8.33334C14.5464 8.33334 14.9039 8.52132 14.9039 9.03936H18.2372C18.2372 6.9366 16.6335 5.00001 14.3804 5.00001V8.33334ZM13.8569 9.03936C13.8569 8.52132 14.2143 8.33334 14.3804 8.33334V5.00001C12.1272 5.00001 10.5235 6.9366 10.5235 9.03936H13.8569ZM14.3804 9.74538C14.2143 9.74538 13.8569 9.5574 13.8569 9.03936H10.5235C10.5235 11.1421 12.1272 13.0787 14.3804 13.0787V9.74538ZM7.27412 13.3892C8.35701 13.6264 9.16665 14.5936 9.16665 15.7461H12.5C12.5 12.9945 10.5676 10.6982 7.9873 10.1331L7.27412 13.3892ZM6.66667 13.3333C6.88675 13.3333 7.10029 13.355 7.3059 13.3958L7.95552 10.1264C7.53724 10.0433 7.10614 10 6.66667 10V13.3333ZM3.65474 15.2852C4.19734 14.1166 5.3526 13.3333 6.66667 13.3333V10C3.98369 10 1.68961 11.6023 0.631393 13.8815L3.65474 15.2852ZM7.03878 17.2974L3.34851 13.4324L0.937622 15.7343L4.62789 19.5993L7.03878 17.2974ZM10.8333 16.7817H5.83334V20.115H10.8333V16.7817ZM9.16665 15.7461L9.16666 18.4483L12.5 18.4483L12.5 15.7461L9.16665 15.7461ZM14.3804 16.7817H12.8333V20.115H14.3804V16.7817ZM16.8811 13.4301L13.1771 17.2951L15.5837 19.6015L19.2877 15.7365L16.8811 13.4301ZM14.3804 14.1738C15.3311 14.1738 16.1797 14.6768 16.6693 15.4638L19.4996 13.7029C18.4366 11.9944 16.5477 10.8405 14.3804 10.8405V14.1738ZM13.0549 14.5284C13.4465 14.3023 13.8969 14.1738 14.3804 14.1738V10.8405C13.2941 10.8405 12.2711 11.132 11.3884 11.6415L13.0549 14.5284ZM14.5 15.7461C14.5 14.5328 14.2201 13.3806 13.7196 12.3544L10.7236 13.8155C11.0068 14.3963 11.1667 15.0498 11.1667 15.7461H14.5ZM14.5 18.4483L14.5 15.7461L11.1667 15.7461L11.1667 18.4483L14.5 18.4483ZM6.66669 12.0833C9.09097 12.0833 10.8334 9.99646 10.8334 7.70833H7.50002C7.50002 8.41175 7.00383 8.75 6.66669 8.75V12.0833ZM2.50002 7.70833C2.50002 9.99646 4.2424 12.0833 6.66669 12.0833V8.75C6.32955 8.75 5.83335 8.41175 5.83335 7.70833H2.50002ZM6.66669 3.33333C4.2424 3.33333 2.50002 5.42021 2.50002 7.70833H5.83335C5.83335 7.00492 6.32955 6.66667 6.66669 6.66667V3.33333ZM10.8334 7.70833C10.8334 5.42021 9.09097 3.33333 6.66669 3.33333V6.66667C7.00383 6.66667 7.50002 7.00492 7.50002 7.70833H10.8334Z" fill="black" mask="url(#path-1-inside-1)"/>
<path d="M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z" stroke="black" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.3804 13.412C17.59 13.412 18.5705 12.3498 18.5705 11.0394C18.5705 9.72896 17.59 8.66667 16.3804 8.66667C15.1708 8.66667 14.1902 9.72896 14.1902 11.0394C14.1902 12.3498 15.1708 13.412 16.3804 13.412ZM12.8333 17.7461C12.8333 15.7941 11.4623 14.1623 9.63071 13.7611C9.31877 13.6991 8.99645 13.6667 8.66667 13.6667C6.66814 13.6667 4.94347 14.8594 4.14307 16.5833L7.83334 20.4483H12.8333L12.8333 17.7461ZM14.8333 20.4483H16.3804L20.0844 16.5833C19.3081 15.3356 17.9394 14.5071 16.3804 14.5071C15.5955 14.5071 14.8588 14.7171 14.2216 15.0849C14.6134 15.8884 14.8333 16.7913 14.8333 17.7461L14.8333 20.4483ZM11.1667 9.70833C11.1667 11.2041 10.0474 12.4167 8.66669 12.4167C7.28597 12.4167 6.16669 11.2041 6.16669 9.70833C6.16669 8.21256 7.28597 7 8.66669 7C10.0474 7 11.1667 8.21256 11.1667 9.70833Z" fill="black"/>
<path d="M9.63071 13.7611L9.9873 12.1331L9.97144 12.1296L9.95552 12.1264L9.63071 13.7611ZM12.8333 17.7461H11.1667V17.7461L12.8333 17.7461ZM4.14307 16.5833L2.63139 15.8815L2.15278 16.9123L2.93762 17.7343L4.14307 16.5833ZM7.83334 20.4483L6.62789 21.5993L7.1203 22.115H7.83334V20.4483ZM12.8333 20.4483V22.115H14.5L14.5 20.4483L12.8333 20.4483ZM16.3804 20.4483V22.115H17.0916L17.5837 21.6015L16.3804 20.4483ZM14.8333 20.4483L13.1667 20.4483L13.1667 22.115H14.8333V20.4483ZM20.0844 16.5833L21.2877 17.7365L22.1834 16.802L21.4996 15.7029L20.0844 16.5833ZM14.2216 15.0849L13.3884 13.6415L12.0423 14.4185L12.7236 15.8155L14.2216 15.0849ZM14.8333 17.7461H13.1667V17.7461L14.8333 17.7461ZM12 23.6667C18.4433 23.6667 23.6667 18.4433 23.6667 12H20.3333C20.3333 16.6024 16.6024 20.3333 12 20.3333V23.6667ZM0.333333 12C0.333333 18.4433 5.55668 23.6667 12 23.6667V20.3333C7.39763 20.3333 3.66667 16.6024 3.66667 12H0.333333ZM12 0.333333C5.55668 0.333333 0.333333 5.55668 0.333333 12H3.66667C3.66667 7.39763 7.39763 3.66667 12 3.66667V0.333333ZM23.6667 12C23.6667 5.55668 18.4433 0.333333 12 0.333333V3.66667C16.6024 3.66667 20.3333 7.39763 20.3333 12H23.6667ZM16.9039 11.0394C16.9039 11.5574 16.5464 11.7454 16.3804 11.7454V15.0787C18.6335 15.0787 20.2372 13.1421 20.2372 11.0394H16.9039ZM16.3804 10.3333C16.5464 10.3333 16.9039 10.5213 16.9039 11.0394H20.2372C20.2372 8.9366 18.6335 7.00001 16.3804 7.00001V10.3333ZM15.8569 11.0394C15.8569 10.5213 16.2143 10.3333 16.3804 10.3333V7.00001C14.1272 7.00001 12.5235 8.9366 12.5235 11.0394H15.8569ZM16.3804 11.7454C16.2143 11.7454 15.8569 11.5574 15.8569 11.0394H12.5235C12.5235 13.1421 14.1272 15.0787 16.3804 15.0787V11.7454ZM9.27412 15.3892C10.357 15.6264 11.1667 16.5936 11.1667 17.7461H14.5C14.5 14.9945 12.5676 12.6982 9.9873 12.1331L9.27412 15.3892ZM8.66667 15.3333C8.88675 15.3333 9.10029 15.355 9.3059 15.3958L9.95552 12.1264C9.53724 12.0433 9.10614 12 8.66667 12V15.3333ZM5.65474 17.2852C6.19734 16.1166 7.3526 15.3333 8.66667 15.3333V12C5.98369 12 3.68961 13.6023 2.63139 15.8815L5.65474 17.2852ZM9.03878 19.2974L5.34851 15.4324L2.93762 17.7343L6.62789 21.5993L9.03878 19.2974ZM12.8333 18.7817H7.83334V22.115H12.8333V18.7817ZM11.1667 17.7461L11.1667 20.4483L14.5 20.4483L14.5 17.7461L11.1667 17.7461ZM16.3804 18.7817H14.8333V22.115H16.3804V18.7817ZM18.8811 15.4301L15.1771 19.2951L17.5837 21.6015L21.2877 17.7365L18.8811 15.4301ZM16.3804 16.1738C17.3311 16.1738 18.1797 16.6768 18.6693 17.4638L21.4996 15.7029C20.4366 13.9944 18.5477 12.8405 16.3804 12.8405V16.1738ZM15.0549 16.5284C15.4465 16.3023 15.8969 16.1738 16.3804 16.1738V12.8405C15.2941 12.8405 14.2711 13.132 13.3884 13.6415L15.0549 16.5284ZM16.5 17.7461C16.5 16.5328 16.2201 15.3806 15.7196 14.3544L12.7236 15.8155C13.0068 16.3963 13.1667 17.0498 13.1667 17.7461H16.5ZM16.5 20.4483L16.5 17.7461L13.1667 17.7461L13.1667 20.4483L16.5 20.4483ZM8.66669 14.0833C11.091 14.0833 12.8334 11.9965 12.8334 9.70833H9.50002C9.50002 10.4117 9.00383 10.75 8.66669 10.75V14.0833ZM4.50002 9.70833C4.50002 11.9965 6.2424 14.0833 8.66669 14.0833V10.75C8.32955 10.75 7.83335 10.4117 7.83335 9.70833H4.50002ZM8.66669 5.33333C6.2424 5.33333 4.50002 7.42021 4.50002 9.70833H7.83335C7.83335 9.00492 8.32955 8.66667 8.66669 8.66667V5.33333ZM12.8334 9.70833C12.8334 7.42021 11.091 5.33333 8.66669 5.33333V8.66667C9.00383 8.66667 9.50002 9.00492 9.50002 9.70833H12.8334Z" fill="black" mask="url(#path-1-inside-1)"/>
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="black" stroke-width="2"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

4
res/img/element-icons/community-rooms.svg
View file

@ -1,3 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM8.52525 4.00581C9.07433 4.06524 9.47127 4.55853 9.41184 5.10761L9.22345 6.84821H11.3843L11.596 4.89239C11.6554 4.34332 12.1487 3.94638 12.6978 4.00581C13.2469 4.06524 13.6438 4.55853 13.5844 5.10761L13.396 6.84821H14.3C14.8523 6.84821 15.3 7.29592 15.3 7.84821C15.3 8.40049 14.8523 8.84821 14.3 8.84821H13.1795L12.9319 11.1362H14.3C14.8523 11.1362 15.3 11.5839 15.3 12.1362C15.3 12.6884 14.8523 13.1362 14.3 13.1362H12.7154L12.502 15.1076C12.4426 15.6567 11.9493 16.0536 11.4002 15.9942C10.8512 15.9348 10.4542 15.4415 10.5136 14.8924L10.7037 13.1362H8.54287L8.32949 15.1076C8.27006 15.6567 7.77677 16.0536 7.22769 15.9942C6.67861 15.9348 6.28167 15.4415 6.3411 14.8924L6.53119 13.1362H5.5C4.94772 13.1362 4.5 12.6884 4.5 12.1362C4.5 11.5839 4.94772 11.1362 5.5 11.1362H6.74766L6.9953 8.84821H5.93922C5.38693 8.84821 4.93922 8.40049 4.93922 7.84821C4.93922 7.29592 5.38693 6.84821 5.93922 6.84821H7.21177L7.42345 4.89239C7.48288 4.34332 7.97618 3.94638 8.52525 4.00581ZM8.75934 11.1362H10.9202L11.1678 8.84821H9.00698L8.75934 11.1362Z" fill="black"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM10.5253 6.00581C11.0743 6.06524 11.4713 6.55853 11.4118 7.10761L11.2234 8.84821H13.3843L13.596 6.89239C13.6554 6.34332 14.1487 5.94638 14.6978 6.00581C15.2469 6.06524 15.6438 6.55853 15.5844 7.10761L15.396 8.84821H16.3C16.8523 8.84821 17.3 9.29592 17.3 9.84821C17.3 10.4005 16.8523 10.8482 16.3 10.8482H15.1795L14.9319 13.1362H16.3C16.8523 13.1362 17.3 13.5839 17.3 14.1362C17.3 14.6884 16.8523 15.1362 16.3 15.1362H14.7154L14.502 17.1076C14.4426 17.6567 13.9493 18.0536 13.4002 17.9942C12.8512 17.9348 12.4542 17.4415 12.5136 16.8924L12.7037 15.1362H10.5429L10.3295 17.1076C10.2701 17.6567 9.77677 18.0536 9.22769 17.9942C8.67861 17.9348 8.28167 17.4415 8.3411 16.8924L8.53119 15.1362H7.5C6.94772 15.1362 6.5 14.6884 6.5 14.1362C6.5 13.5839 6.94772 13.1362 7.5 13.1362H8.74766L8.9953 10.8482H7.93922C7.38693 10.8482 6.93922 10.4005 6.93922 9.84821C6.93922 9.29592 7.38693 8.84821 7.93922 8.84821H9.21177L9.42345 6.89239C9.48288 6.34332 9.97618 5.94638 10.5253 6.00581ZM10.7593 13.1362H12.9202L13.1678 10.8482H11.007L10.7593 13.1362Z" fill="black"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

8
res/img/element-icons/leave.svg
View file

@ -1,7 +1,7 @@
<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 2L14.2139 0.446536C15.1211 0.219718 16 0.90592 16 1.84112V18.1589C16 19.0941 15.1211 19.7803 14.2139 19.5535L8 18V2Z" fill="black"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 4L18.2139 2.44654C19.1211 2.21972 20 2.90592 20 3.84112V20.1589C20 21.0941 19.1211 21.7803 18.2139 21.5535L12 20V4Z" fill="black"/>
<mask id="path-2-inside-1" fill="white">
<rect y="2" width="10" height="16" rx="1.4375"/>
<rect x="4" y="4" width="10" height="16" rx="1.4375"/>
</mask>
<rect y="2" width="10" height="16" rx="1.4375" stroke="black" stroke-width="4" mask="url(#path-2-inside-1)"/>
<rect x="4" y="4" width="10" height="16" rx="1.4375" stroke="black" stroke-width="4" mask="url(#path-2-inside-1)"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 456 B

After

Width:  |  Height:  |  Size: 468 B

8
res/img/element-icons/notifications.svg
View file

@ -1,5 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.2375 17.5C8.1625 17.7 8.125 17.9 8.125 18.125C8.125 19.1625 8.9625 20 10 20C11.0375 20 11.875 19.1625 11.875 18.125C11.875 17.9 11.825 17.7 11.7625 17.5H8.2375Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6125 14.0625C16.8625 13.625 16.25 12.8875 16.25 11.75V7.5C16.25 4.05 13.3 1.25 10 1.25C6.7 1.25 3.75 4.05 3.75 7.5V11.75C3.75 12.875 3.125 13.625 2.3875 14.0625C1.8875 14.3625 1.25 14.775 1.25 15.275C1.25 15.85 1.6125 16.2375 2.3625 16.2375H10H17.6375C18.3875 16.2375 18.75 15.8375 18.75 15.275C18.75 14.775 18.125 14.3625 17.6125 14.0625Z" fill="black"/>
<path d="M10 2.5C10.6904 2.5 11.25 1.94036 11.25 1.25C11.25 0.559644 10.6904 0 10 0C9.30964 0 8.75 0.559644 8.75 1.25C8.75 1.94036 9.30964 2.5 10 2.5Z" fill="black"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2375 19.5C10.1625 19.7 10.125 19.9 10.125 20.125C10.125 21.1625 10.9625 22 12 22C13.0375 22 13.875 21.1625 13.875 20.125C13.875 19.9 13.825 19.7 13.7625 19.5H10.2375Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6125 16.0625C18.8625 15.625 18.25 14.8875 18.25 13.75V9.5C18.25 6.05 15.3 3.25 12 3.25C8.7 3.25 5.75 6.05 5.75 9.5V13.75C5.75 14.875 5.125 15.625 4.3875 16.0625C3.8875 16.3625 3.25 16.775 3.25 17.275C3.25 17.85 3.6125 18.2375 4.3625 18.2375H12H19.6375C20.3875 18.2375 20.75 17.8375 20.75 17.275C20.75 16.775 20.125 16.3625 19.6125 16.0625Z" fill="black"/>
<path d="M12 4.5C12.6904 4.5 13.25 3.94036 13.25 3.25C13.25 2.55964 12.6904 2 12 2C11.3096 2 10.75 2.55964 10.75 3.25C10.75 3.94036 11.3096 4.5 12 4.5Z" fill="black"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 908 B

After

Width:  |  Height:  |  Size: 916 B

4
res/img/element-icons/room/files.svg
View file

@ -1,3 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 3C2 1.34315 3.34315 0 5 0H15C16.6569 0 18 1.34315 18 3V17C18 18.6569 16.6569 20 15 20H5C3.34315 20 2 18.6569 2 17V3ZM5 12.25C5 11.8358 5.33579 11.5 5.75 11.5H14.25C14.6642 11.5 15 11.8358 15 12.25C15 12.6642 14.6642 13 14.25 13H5.75C5.33579 13 5 12.6642 5 12.25ZM5.75 15C5.33579 15 5 15.3358 5 15.75C5 16.1642 5.33579 16.5 5.75 16.5H10.25C10.6642 16.5 11 16.1642 11 15.75C11 15.3358 10.6642 15 10.25 15H5.75Z" fill="black"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 5C4 3.34315 5.34315 2 7 2H17C18.6569 2 20 3.34315 20 5V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V5ZM7 14.25C7 13.8358 7.33579 13.5 7.75 13.5H16.25C16.6642 13.5 17 13.8358 17 14.25C17 14.6642 16.6642 15 16.25 15H7.75C7.33579 15 7 14.6642 7 14.25ZM7.75 17C7.33579 17 7 17.3358 7 17.75C7 18.1642 7.33579 18.5 7.75 18.5H12.25C12.6642 18.5 13 18.1642 13 17.75C13 17.3358 12.6642 17 12.25 17H7.75Z" fill="black"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 580 B

After

Width:  |  Height:  |  Size: 580 B

4
res/img/element-icons/room/integrations.svg
View file

@ -1,3 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V4ZM9 6C9 7.65685 7.65685 9 6 9C4.34315 9 3 7.65685 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6ZM6 17C7.65685 17 9 15.6569 9 14C9 12.3431 7.65685 11 6 11C4.34315 11 3 12.3431 3 14C3 15.6569 4.34315 17 6 17ZM17 14C17 15.6569 15.6569 17 14 17C12.3431 17 11 15.6569 11 14C11 12.3431 12.3431 11 14 11C15.6569 11 17 12.3431 17 14ZM14 9C15.6569 9 17 7.65685 17 6C17 4.34315 15.6569 3 14 3C12.3431 3 11 4.34315 11 6C11 7.65685 12.3431 9 14 9Z" fill="black"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6ZM11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8ZM8 19C9.65685 19 11 17.6569 11 16C11 14.3431 9.65685 13 8 13C6.34315 13 5 14.3431 5 16C5 17.6569 6.34315 19 8 19ZM19 16C19 17.6569 17.6569 19 16 19C14.3431 19 13 17.6569 13 16C13 14.3431 14.3431 13 16 13C17.6569 13 19 14.3431 19 16ZM16 11C17.6569 11 19 9.65685 19 8C19 6.34315 17.6569 5 16 5C14.3431 5 13 6.34315 13 8C13 9.65685 14.3431 11 16 11Z" fill="black"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 728 B

After

Width:  |  Height:  |  Size: 742 B

8
res/img/element-icons/room/members.svg
View file

@ -1,7 +1,7 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5911 18.2922C13.9951 19.3704 12.0711 20 10 20C7.74879 20 5.67132 19.2561 4 18.0007C1.5711 16.1763 0 13.2716 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 13.4518 18.2511 16.4951 15.5911 18.2922ZM10 10.5C11.6569 10.5 13 9.04493 13 7.25C13 5.45507 11.6569 4 10 4C8.34315 4 7 5.45507 7 7.25C7 9.04493 8.34315 10.5 10 10.5ZM10 18C12.162 18 14.1236 17.1424 15.5634 15.7488C14.673 13.5506 12.5176 12 10 12C7.48242 12 5.32699 13.5506 4.43662 15.7488C5.87635 17.1424 7.83802 18 10 18Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5911 20.2922C15.9951 21.3704 14.0711 22 12 22C9.74879 22 7.67132 21.2561 6 20.0007C3.5711 18.1763 2 15.2716 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 15.4518 20.2511 18.4951 17.5911 20.2922ZM12 12.5C13.6569 12.5 15 11.0449 15 9.25C15 7.45507 13.6569 6 12 6C10.3431 6 9 7.45507 9 9.25C9 11.0449 10.3431 12.5 12 12.5ZM12 20C14.162 20 16.1236 19.1424 17.5634 17.7488C16.673 15.5506 14.5176 14 12 14C9.48242 14 7.32699 15.5506 6.43662 17.7488C7.87635 19.1424 9.83802 20 12 20Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5911 18.2922C13.9951 19.3704 12.0711 20 10 20C7.74879 20 5.67132 19.2561 4 18.0007C1.5711 16.1763 0 13.2716 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 13.4518 18.2511 16.4951 15.5911 18.2922ZM10 10.5C11.6569 10.5 13 9.04493 13 7.25C13 5.45507 11.6569 4 10 4C8.34315 4 7 5.45507 7 7.25C7 9.04493 8.34315 10.5 10 10.5ZM10 18C12.162 18 14.1236 17.1424 15.5634 15.7488C14.673 13.5506 12.5176 12 10 12C7.48242 12 5.32699 13.5506 4.43662 15.7488C5.87635 17.1424 7.83802 18 10 18Z" fill="black"/>
<path d="M15.5911 18.2922L14.4715 16.6349L15.5911 18.2922ZM4 18.0007L2.79885 19.5999L2.79885 19.5999L4 18.0007ZM15.5634 15.7488L16.9544 17.1859L17.9234 16.2479L17.4171 14.998L15.5634 15.7488ZM4.43662 15.7488L2.5829 14.998L2.07662 16.2479L3.04563 17.1859L4.43662 15.7488ZM10 22C12.4825 22 14.7945 21.244 16.7107 19.9494L14.4715 16.6349C13.1957 17.4968 11.6596 18 10 18V22ZM2.79885 19.5999C4.80462 21.1065 7.30085 22 10 22V18C8.19673 18 6.53802 17.4058 5.20115 16.4016L2.79885 19.5999ZM-2 10C-2 13.9273 -0.111319 17.414 2.79885 19.5999L5.20115 16.4016C3.25353 14.9387 2 12.616 2 10H-2ZM10 -2C3.37258 -2 -2 3.37258 -2 10H2C2 5.58172 5.58172 2 10 2V-2ZM22 10C22 3.37258 16.6274 -2 10 -2V2C14.4183 2 18 5.58172 18 10H22ZM16.7107 19.9494C19.8977 17.7963 22 14.144 22 10H18C18 12.7596 16.6045 15.1939 14.4715 16.6349L16.7107 19.9494ZM11 7.25C11 8.0941 10.4046 8.5 10 8.5V12.5C12.9091 12.5 15 9.99575 15 7.25H11ZM10 6C10.4046 6 11 6.4059 11 7.25H15C15 4.50425 12.9091 2 10 2V6ZM9 7.25C9 6.4059 9.59543 6 10 6V2C7.09086 2 5 4.50425 5 7.25H9ZM10 8.5C9.59543 8.5 9 8.0941 9 7.25H5C5 9.99575 7.09086 12.5 10 12.5V8.5ZM14.1724 14.3118C13.0906 15.3588 11.6223 16 10 16V20C12.7017 20 15.1567 18.926 16.9544 17.1859L14.1724 14.3118ZM10 14C11.6752 14 13.1146 15.0305 13.7097 16.4996L17.4171 14.998C16.2314 12.0707 13.3599 10 10 10V14ZM6.29033 16.4996C6.88541 15.0305 8.32476 14 10 14V10C6.64008 10 3.76858 12.0707 2.5829 14.998L6.29033 16.4996ZM10 16C8.37775 16 6.90936 15.3588 5.82761 14.3118L3.04563 17.1859C4.84334 18.926 7.2983 20 10 20V16Z" fill="black" mask="url(#path-1-inside-1)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5911 20.2922C15.9951 21.3704 14.0711 22 12 22C9.74879 22 7.67132 21.2561 6 20.0007C3.5711 18.1763 2 15.2716 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 15.4518 20.2511 18.4951 17.5911 20.2922ZM12 12.5C13.6569 12.5 15 11.0449 15 9.25C15 7.45507 13.6569 6 12 6C10.3431 6 9 7.45507 9 9.25C9 11.0449 10.3431 12.5 12 12.5ZM12 20C14.162 20 16.1236 19.1424 17.5634 17.7488C16.673 15.5506 14.5176 14 12 14C9.48242 14 7.32699 15.5506 6.43662 17.7488C7.87635 19.1424 9.83802 20 12 20Z" fill="black"/>
<path d="M17.5911 20.2922L16.4715 18.6349L17.5911 20.2922ZM6 20.0007L4.79885 21.5999L4.79885 21.5999L6 20.0007ZM17.5634 17.7488L18.9544 19.1859L19.9234 18.2479L19.4171 16.998L17.5634 17.7488ZM6.43662 17.7488L4.5829 16.998L4.07662 18.2479L5.04563 19.1859L6.43662 17.7488ZM12 24C14.4825 24 16.7945 23.244 18.7107 21.9494L16.4715 18.6349C15.1957 19.4968 13.6596 20 12 20V24ZM4.79885 21.5999C6.80462 23.1065 9.30085 24 12 24V20C10.1967 20 8.53802 19.4058 7.20115 18.4016L4.79885 21.5999ZM0 12C0 15.9273 1.88868 19.414 4.79885 21.5999L7.20115 18.4016C5.25353 16.9387 4 14.616 4 12H0ZM12 0C5.37258 0 0 5.37258 0 12H4C4 7.58172 7.58172 4 12 4V0ZM24 12C24 5.37258 18.6274 0 12 0V4C16.4183 4 20 7.58172 20 12H24ZM18.7107 21.9494C21.8977 19.7963 24 16.144 24 12H20C20 14.7596 18.6045 17.1939 16.4715 18.6349L18.7107 21.9494ZM13 9.25C13 10.0941 12.4046 10.5 12 10.5V14.5C14.9091 14.5 17 11.9958 17 9.25H13ZM12 8C12.4046 8 13 8.4059 13 9.25H17C17 6.50425 14.9091 4 12 4V8ZM11 9.25C11 8.4059 11.5954 8 12 8V4C9.09086 4 7 6.50425 7 9.25H11ZM12 10.5C11.5954 10.5 11 10.0941 11 9.25H7C7 11.9958 9.09086 14.5 12 14.5V10.5ZM16.1724 16.3118C15.0906 17.3588 13.6223 18 12 18V22C14.7017 22 17.1567 20.926 18.9544 19.1859L16.1724 16.3118ZM12 16C13.6752 16 15.1146 17.0305 15.7097 18.4996L19.4171 16.998C18.2314 14.0707 15.3599 12 12 12V16ZM8.29033 18.4996C8.88541 17.0305 10.3248 16 12 16V12C8.64008 12 5.76858 14.0707 4.5829 16.998L8.29033 18.4996ZM12 18C10.3777 18 8.90936 17.3588 7.82761 16.3118L5.04563 19.1859C6.84334 20.926 9.2983 22 12 22V18Z" fill="black" mask="url(#path-1-inside-1)"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

12
res/img/element-icons/room/pin.svg
View file

@ -1,7 +1,7 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5151 18.0831L13.6941 15.2621L15.2621 13.6941L18.0831 16.5151C19.5741 18.0061 20.1529 19.7793 19.9661 19.9661C19.7793 20.1529 18.0061 19.5741 16.5151 18.0831Z" fill="black"/>
<path d="M5.46196 9.38205C5.07677 9.50592 3.49073 10.0989 1.63366 10.0744C-0.223419 10.0499 -0.322049 8.89409 0.468114 8.10392L4.28598 4.28602L7.42196 7.42203L5.46196 9.38205Z" fill="black"/>
<path d="M9.38206 5.46202C9.50592 5.07682 10.0989 3.49077 10.0744 1.63368C10.0499 -0.223421 8.89411 -0.322052 8.10394 0.468119L4.28598 4.28602L7.42196 7.42203L9.38206 5.46202Z" fill="black"/>
<path d="M5.40596 9.43804L9.43793 5.40602L12.9099 8.20604L8.20594 12.9101L5.40596 9.43804Z" fill="black"/>
<path d="M9.774 9.77404C7.31114 12.2369 6.61779 15.7115 7.83827 18.3213C8.31038 19.3308 9.62883 19.3273 10.4169 18.5392L18.5391 10.4169C19.3271 9.62887 19.3307 8.3104 18.3212 7.83829C15.7114 6.61779 12.2369 7.31115 9.774 9.77404Z" fill="black"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5151 20.0831L15.6941 17.2621L17.2621 15.6941L20.0831 18.5151C21.5741 20.0061 22.1529 21.7793 21.9661 21.9661C21.7793 22.1529 20.0061 21.5741 18.5151 20.0831Z" fill="black"/>
<path d="M7.46196 11.3821C7.07677 11.5059 5.49073 12.0989 3.63366 12.0744C1.77658 12.0499 1.67795 10.8941 2.46811 10.1039L6.28598 6.28602L9.42196 9.42203L7.46196 11.3821Z" fill="black"/>
<path d="M11.3821 7.46202C11.5059 7.07682 12.0989 5.49077 12.0744 3.63368C12.0499 1.77658 10.8941 1.67795 10.1039 2.46812L6.28598 6.28602L9.42196 9.42203L11.3821 7.46202Z" fill="black"/>
<path d="M7.40596 11.438L11.4379 7.40602L14.9099 10.206L10.2059 14.9101L7.40596 11.438Z" fill="black"/>
<path d="M11.774 11.774C9.31114 14.2369 8.61779 17.7115 9.83827 20.3213C10.3104 21.3308 11.6288 21.3273 12.4169 20.5392L20.5391 12.4169C21.3271 11.6289 21.3307 10.3104 20.3212 9.83829C17.7114 8.61779 14.2369 9.31115 11.774 11.774Z" fill="black"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 1,015 B

4
res/img/element-icons/room/search-inset.svg
View file

@ -1,3 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9 12C10.6569 12 12 10.6569 12 9C12 7.34315 10.6569 6 9 6C7.34315 6 6 7.34315 6 9C6 10.6569 7.34315 12 9 12ZM14 9C14 10.0191 13.6951 10.967 13.1716 11.7574L15.2071 13.7929C15.5976 14.1834 15.5976 14.8166 15.2071 15.2071C14.8166 15.5976 14.1834 15.5976 13.7929 15.2071L11.7574 13.1716C10.967 13.6951 10.0191 14 9 14C6.23858 14 4 11.7614 4 9C4 6.23858 6.23858 4 9 4C11.7614 4 14 6.23858 14 9Z" fill="black"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM11 14C12.6569 14 14 12.6569 14 11C14 9.34315 12.6569 8 11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14ZM16 11C16 12.0191 15.6951 12.967 15.1716 13.7574L17.2071 15.7929C17.5976 16.1834 17.5976 16.8166 17.2071 17.2071C16.8166 17.5976 16.1834 17.5976 15.7929 17.2071L13.7574 15.1716C12.967 15.6951 12.0191 16 11 16C8.23858 16 6 13.7614 6 11C6 8.23858 8.23858 6 11 6C13.7614 6 16 8.23858 16 11Z" fill="black"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 672 B

After

Width:  |  Height:  |  Size: 682 B

4
res/img/element-icons/room/share.svg
View file

@ -1,3 +1,3 @@
<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.76875 0.292893C8.37823 -0.0976311 7.74506 -0.0976311 7.35454 0.292893L2.82365 4.82378C2.43313 5.2143 2.43313 5.84747 2.82365 6.23799C3.21418 6.62851 3.84734 6.62851 4.23787 6.23799L7.06165 3.41421V8H2C0.895431 8 0 8.89543 0 10V18C0 19.1046 0.895431 20 2 20H14C15.1046 20 16 19.1046 16 18V10C16 8.89543 15.1046 8 14 8H9.06177V13C9.06177 13.5523 8.61405 14 8.06177 14C7.50948 14 7.06177 13.5523 7.06177 13V8H9.06165V3.41421L11.8854 6.23799C12.2759 6.62851 12.9091 6.62851 13.2996 6.23799C13.6902 5.84747 13.6902 5.2143 13.2996 4.82378L8.76875 0.292893Z" fill="black"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7688 2.29289C12.3782 1.90237 11.7451 1.90237 11.3545 2.29289L6.82365 6.82378C6.43313 7.2143 6.43313 7.84747 6.82365 8.23799C7.21418 8.62851 7.84734 8.62851 8.23787 8.23799L11.0616 5.41421V10H6C4.89543 10 4 10.8954 4 12V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V12C20 10.8954 19.1046 10 18 10H13.0618V15C13.0618 15.5523 12.6141 16 12.0618 16C11.5095 16 11.0618 15.5523 11.0618 15V10H13.0616V5.41421L15.8854 8.23799C16.2759 8.62851 16.9091 8.62851 17.2996 8.23799C17.6902 7.84747 17.6902 7.2143 17.2996 6.82378L12.7688 2.29289Z" fill="black"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 722 B

After

Width:  |  Height:  |  Size: 716 B

4
res/img/element-icons/settings.svg
View file

@ -1,3 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3625 7.2875C17.5625 7.8125 18.075 8.1625 18.6375 8.1625C19.3875 8.1625 20 8.775 20 9.525V10.475C20 11.225 19.3875 11.8375 18.6375 11.8375C18.075 11.8375 17.5625 12.1875 17.3625 12.7125C17.346 12.7538 17.3294 12.7958 17.3128 12.838C17.2538 12.9876 17.1932 13.1413 17.125 13.2875C16.8875 13.8 17 14.4 17.4 14.8C17.9375 15.325 17.9375 16.1875 17.4 16.725L16.725 17.4C16.2 17.9375 15.3375 17.9375 14.8 17.4C14.4125 17 13.8 16.8875 13.2875 17.125C13.1 17.2125 12.9125 17.2875 12.7125 17.3625C12.1875 17.5625 11.8375 18.075 11.8375 18.6375C11.8375 19.3875 11.225 20 10.475 20H9.525C8.775 20 8.1625 19.3875 8.1625 18.6375C8.1625 18.075 7.8125 17.5625 7.2875 17.3625C7.24617 17.346 7.20423 17.3294 7.16195 17.3128C7.01243 17.2538 6.85867 17.1932 6.7125 17.125C6.2 16.8875 5.6 17 5.2 17.4C4.675 17.9375 3.8125 17.9375 3.275 17.4L2.6 16.725C2.0625 16.2 2.0625 15.3375 2.6 14.8C3 14.4125 3.1125 13.8 2.875 13.2875C2.7875 13.1 2.7125 12.9125 2.6375 12.7125C2.4375 12.1875 1.925 11.8375 1.3625 11.8375C0.6125 11.8375 0 11.225 0 10.475V9.525C0 8.775 0.6125 8.1625 1.3625 8.1625C1.925 8.1625 2.4375 7.8125 2.6375 7.2875C2.67694 7.16129 2.72634 7.04005 2.77627 6.91751C2.80546 6.84587 2.83483 6.77379 2.8625 6.7C3.1 6.1875 2.9875 5.5875 2.5875 5.1875C2.05 4.6625 2.05 3.8 2.5875 3.2625L3.275 2.6C3.8 2.0625 4.6625 2.0625 5.2 2.6C5.5875 3 6.2 3.1125 6.7125 2.875C6.9 2.7875 7.0875 2.7 7.2875 2.6375C7.8125 2.4375 8.1625 1.925 8.1625 1.3625C8.1625 0.6125 8.775 0 9.525 0H10.475C11.225 0 11.8375 0.6125 11.8375 1.3625C11.8375 1.9375 12.1875 2.4375 12.7125 2.6375C12.7538 2.65403 12.7958 2.67056 12.838 2.68723C12.9876 2.74617 13.1413 2.80679 13.2875 2.875C13.8 3.1125 14.4 3 14.8 2.6C15.325 2.0625 16.1875 2.0625 16.725 2.6L17.4 3.275C17.9375 3.8 17.9375 4.6625 17.4 5.2C17 5.5875 16.8875 6.2 17.125 6.7125C17.2125 6.9 17.2875 7.0875 17.3625 7.2875ZM10 15C7.2375 15 5 12.7625 5 10C5 7.2375 7.2375 5 10 5C12.7625 5 15 7.2375 15 10C15 12.7625 12.7625 15 10 15Z" fill="black"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3625 9.2875C19.5625 9.8125 20.075 10.1625 20.6375 10.1625C21.3875 10.1625 22 10.775 22 11.525V12.475C22 13.225 21.3875 13.8375 20.6375 13.8375C20.075 13.8375 19.5625 14.1875 19.3625 14.7125C19.346 14.7538 19.3294 14.7958 19.3128 14.838C19.2538 14.9876 19.1932 15.1413 19.125 15.2875C18.8875 15.8 19 16.4 19.4 16.8C19.9375 17.325 19.9375 18.1875 19.4 18.725L18.725 19.4C18.2 19.9375 17.3375 19.9375 16.8 19.4C16.4125 19 15.8 18.8875 15.2875 19.125C15.1 19.2125 14.9125 19.2875 14.7125 19.3625C14.1875 19.5625 13.8375 20.075 13.8375 20.6375C13.8375 21.3875 13.225 22 12.475 22H11.525C10.775 22 10.1625 21.3875 10.1625 20.6375C10.1625 20.075 9.8125 19.5625 9.2875 19.3625C9.24617 19.346 9.20423 19.3294 9.16195 19.3128C9.01243 19.2538 8.85867 19.1932 8.7125 19.125C8.2 18.8875 7.6 19 7.2 19.4C6.675 19.9375 5.8125 19.9375 5.275 19.4L4.6 18.725C4.0625 18.2 4.0625 17.3375 4.6 16.8C5 16.4125 5.1125 15.8 4.875 15.2875C4.7875 15.1 4.7125 14.9125 4.6375 14.7125C4.4375 14.1875 3.925 13.8375 3.3625 13.8375C2.6125 13.8375 2 13.225 2 12.475V11.525C2 10.775 2.6125 10.1625 3.3625 10.1625C3.925 10.1625 4.4375 9.8125 4.6375 9.2875C4.67694 9.16129 4.72634 9.04005 4.77627 8.91751C4.80546 8.84587 4.83483 8.77379 4.8625 8.7C5.1 8.1875 4.9875 7.5875 4.5875 7.1875C4.05 6.6625 4.05 5.8 4.5875 5.2625L5.275 4.6C5.8 4.0625 6.6625 4.0625 7.2 4.6C7.5875 5 8.2 5.1125 8.7125 4.875C8.9 4.7875 9.0875 4.7 9.2875 4.6375C9.8125 4.4375 10.1625 3.925 10.1625 3.3625C10.1625 2.6125 10.775 2 11.525 2H12.475C13.225 2 13.8375 2.6125 13.8375 3.3625C13.8375 3.9375 14.1875 4.4375 14.7125 4.6375C14.7538 4.65403 14.7958 4.67056 14.838 4.68723C14.9876 4.74617 15.1413 4.80679 15.2875 4.875C15.8 5.1125 16.4 5 16.8 4.6C17.325 4.0625 18.1875 4.0625 18.725 4.6L19.4 5.275C19.9375 5.8 19.9375 6.6625 19.4 7.2C19 7.5875 18.8875 8.2 19.125 8.7125C19.2125 8.9 19.2875 9.0875 19.3625 9.2875ZM12 17C9.2375 17 7 14.7625 7 12C7 9.2375 9.2375 7 12 7C14.7625 7 17 9.2375 17 12C17 14.7625 14.7625 17 12 17Z" fill="black"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

30
res/themes/dark/css/_dark.scss
View file

@ -108,32 +108,20 @@ $composer-e2e-icon-color: $header-panel-text-primary-color;
// ********************
// V2 Room List
// TODO: Remove the 2 from all of these when the new list takes over
$theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: rgba(33, 38, 44, 0.90);
$roomlist-header-color: #8E99A4;
$roomsublist-divider-color: $primary-fg-color;
$roomlist2-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist2-bg-color: rgba(33, 38, 44, 0.90);
$roomlist2-header-color: #8E99A4;
$roomsublist2-divider-color: $primary-fg-color;
$roomtile2-preview-color: #A9B2BC;
$roomtile2-default-badge-bg-color: #61708b;
$roomtile2-selected-bg-color: rgba(141, 151, 165, 0.2);
$roomtile-preview-color: #A9B2BC;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: rgba(141, 151, 165, 0.2);
// ********************
$notice-secondary-color: $roomlist2-header-color;
$roomtile-name-color: $header-panel-text-primary-color;
$roomtile-selected-color: $text-primary-color;
$roomtile-notified-color: $text-primary-color;
$roomtile-selected-bg-color: $room-highlight-color;
$roomtile-focused-bg-color: $room-highlight-color;
$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1);
$notice-secondary-color: $roomlist-header-color;
$panel-divider-color: transparent;
@ -211,6 +199,8 @@ $appearance-tab-border-color: $room-highlight-color;
$roomlist-background-blur-amount: 60px;
$tagpanel-background-blur-amount: 30px;
$composer-shadow-color: rgba(0, 0, 0, 0.28);
// ***** Mixins! *****
@define-mixin mx_DialogButton {

25
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -107,30 +107,19 @@ $composer-e2e-icon-color: $header-panel-text-primary-color;
// ********************
// V2 Room List
// TODO: Remove the 2 from all of these when the new list takes over
$theme-button-bg-color: #e3e8f0;
$roomlist2-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
$roomlist2-bg-color: $header-panel-bg-color;
$roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: $header-panel-bg-color;
$roomsublist2-divider-color: $primary-fg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomtile2-preview-color: #9e9e9e;
$roomtile2-default-badge-bg-color: #61708b;
$roomtile2-selected-bg-color: #1A1D23;
$roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #1A1D23;
// ********************
$roomtile-name-color: $header-panel-text-primary-color;
$roomtile-selected-color: $text-primary-color;
$roomtile-notified-color: $text-primary-color;
$roomtile-selected-bg-color: $room-highlight-color;
$roomtile-focused-bg-color: $room-highlight-color;
$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1);
$panel-divider-color: $header-panel-border-color;
$widget-menu-bar-bg-color: $header-panel-bg-color;
@ -203,6 +192,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
// Appearance tab colors
$appearance-tab-border-color: $room-highlight-color;
$composer-shadow-color: tranparent;
// ***** Mixins! *****
@define-mixin mx_DialogButton {

35
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -174,19 +174,16 @@ $header-divider-color: #91a1c0;
// ********************
// V2 Room List
// TODO: Remove the 2 from all of these when the new list takes over
$theme-button-bg-color: #e3e8f0;
$roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist2-bg-color: $header-panel-bg-color;
$roomlist2-header-color: $primary-fg-color;
$roomsublist2-divider-color: $primary-fg-color;
$roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: $header-panel-bg-color;
$roomlist-header-color: $primary-fg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomtile2-preview-color: #9e9e9e;
$roomtile2-default-badge-bg-color: #61708b;
$roomtile2-selected-bg-color: #fff;
$roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #fff;
$presence-online: $accent-color;
$presence-away: #d9b072;
@ -194,13 +191,6 @@ $presence-offline: #e3e8f0;
// ********************
$roomtile-name-color: #61708b;
$roomtile-badge-fg-color: $accent-fg-color;
$roomtile-selected-color: #212121;
$roomtile-notified-color: #212121;
$roomtile-selected-bg-color: #fff;
$roomtile-focused-bg-color: #fff;
$username-variant1-color: #368bd6;
$username-variant2-color: #ac3ba8;
$username-variant3-color: #03b381;
@ -210,13 +200,6 @@ $username-variant6-color: #2dc2c5;
$username-variant7-color: #5c56f5;
$username-variant8-color: #74d12c;
$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1);
$roomsublist-background: $secondary-accent-color;
$roomsublist-label-fg-color: $roomtile-name-color;
$roomsublist-label-bg-color: $tertiary-accent-color;
$roomsublist-chevron-color: $accent-color;
$panel-divider-color: #dee1f3;
// ********************
@ -292,7 +275,7 @@ $progressbar-color: #000;
$room-warning-bg-color: $yellow-background;
$memberstatus-placeholder-color: $roomtile-name-color;
$memberstatus-placeholder-color: $muted-fg-color;
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
@ -331,6 +314,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
// FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color;
$composer-shadow-color: tranparent;
// ***** Mixins! *****
@define-mixin mx_DialogButton {

23
res/themes/light-custom/css/_custom.scss
View file

@ -25,7 +25,6 @@ $button-link-fg-color: var(--accent-color);
$button-primary-bg-color: var(--accent-color);
$input-valid-border-color: var(--accent-color);
$reaction-row-button-selected-border-color: var(--accent-color);
$roomsublist-chevron-color: var(--accent-color);
$tab-label-active-bg-color: var(--accent-color);
$togglesw-on-color: var(--accent-color);
$username-variant3-color: var(--accent-color);
@ -40,7 +39,6 @@ $menu-bg-color: var(--timeline-background-color);
$avatar-bg-color: var(--timeline-background-color);
$message-action-bar-bg-color: var(--timeline-background-color);
$primary-bg-color: var(--timeline-background-color);
$roomtile-focused-bg-color: var(--timeline-background-color);
$togglesw-ball-color: var(--timeline-background-color);
$droptarget-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .5
$authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .59
@ -48,14 +46,13 @@ $roomheader-bg-color: var(--timeline-background-color);
//
// --roomlist-highlights-color
$roomtile-selected-bg-color: var(--roomlist-highlights-color);
$roomtile2-selected-bg-color: var(--roomlist-highlights-color);
//
// --sidebar-color
$interactive-tooltip-bg-color: var(--sidebar-color);
$tagpanel-bg-color: var(--sidebar-color);
$tooltip-timeline-bg-color: var(--sidebar-color);
$dialog-backdrop-color: var(--sidebar-color-50pct);
$roomlist2-button-bg-color: var(--sidebar-color-15pct);
$roomlist-button-bg-color: var(--sidebar-color-15pct);
//
// --roomlist-background-color
$header-panel-bg-color: var(--roomlist-background-color);
@ -65,12 +62,10 @@ $panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-backgroun
$dark-panel-bg-color: var(--roomlist-background-color);
$input-lighter-bg-color: var(--roomlist-background-color);
$plinth-bg-color: var(--roomlist-background-color);
$roomsublist-background: var(--roomlist-background-color);
$secondary-accent-color: var(--roomlist-background-color);
$selected-color: var(--roomlist-background-color);
$widget-menu-bar-bg-color: var(--roomlist-background-color);
$roomtile-badge-fg-color: var(--roomlist-background-color);
$roomlist2-bg-color: var(--roomlist-background-color);
$roomlist-bg-color: var(--roomlist-background-color);
//
// --timeline-text-color
$message-action-bar-fg-color: var(--timeline-text-color);
@ -87,23 +82,17 @@ $tab-label-fg-color: var(--timeline-text-color);
// was #4e5054
$authpage-lang-color: var(--timeline-text-color);
$roomheader-color: var(--timeline-text-color);
//
// --roomlist-text-color
$roomtile-notified-color: var(--roomlist-text-color);
$roomtile-selected-color: var(--roomlist-text-color);
// --roomlist-text-secondary-color
$roomsublist-label-fg-color: var(--roomlist-text-secondary-color);
$roomtile-name-color: var(--roomlist-text-secondary-color);
$roomtile2-preview-color: var(--roomlist-text-secondary-color);
$roomlist2-header-color: var(--roomlist-text-secondary-color);
$roomtile2-default-badge-bg-color: var(--roomlist-text-secondary-color);
$roomtile-preview-color: var(--roomlist-text-secondary-color);
$roomlist-header-color: var(--roomlist-text-secondary-color);
$roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
//
// --roomlist-separator-color
$input-darker-bg-color: var(--roomlist-separator-color);
$panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough
$primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough
$roomsublist2-divider-color: var(--roomlist-separator-color);
$roomsublist-divider-color: var(--roomlist-separator-color);
//
// --timeline-text-secondary-color
$authpage-secondary-color: var(--timeline-text-secondary-color);

44
res/themes/light/css/_fonts.scss
View file

@ -1,25 +1,20 @@
/*
* Nunito.
* Includes extended Latin and Vietnamese character sets
* Current URLs are taken from
* https://github.com/alexeiva/NunitoFont/releases/tag/v3.500
* ...in order to include cyrillic.
*
* Previously, they were
* https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&subset=latin-ext,vietnamese
*
* We explicitly do not include Nunito's italic variants, as they are not italic enough
* and it's better to rely on the browser's built-in obliquing behaviour.
*/
/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
*/
/* Inter unexpectedly contains various codepoints which collide with emoji, even
when variation-16 is applied to request the emoji variant. From eyeballing
the emoji picker, these are: 20e3, 23cf, 24c2, 25a0-25c1, 2665, 2764, 2b06, 2b1c.
Therefore we define a unicode-range to load which excludes the glyphs
(to avoid having to maintain a fork of Inter). */
$inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10FFFF;
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: $inter-unicode-range;
src: url("$(res)/fonts/Inter/Inter-Regular.woff2?v=3.13") format("woff2"),
url("$(res)/fonts/Inter/Inter-Regular.woff?v=3.13") format("woff");
}
@ -28,6 +23,7 @@
font-style: italic;
font-weight: 400;
font-display: swap;
unicode-range: $inter-unicode-range;
src: url("$(res)/fonts/Inter/Inter-Italic.woff2?v=3.13") format("woff2"),
url("$(res)/fonts/Inter/Inter-Italic.woff?v=3.13") format("woff");
}
@ -37,6 +33,7 @@
font-style: normal;
font-weight: 500;
font-display: swap;
unicode-range: $inter-unicode-range;
src: url("$(res)/fonts/Inter/Inter-Medium.woff2?v=3.13") format("woff2"),
url("$(res)/fonts/Inter/Inter-Medium.woff?v=3.13") format("woff");
}
@ -45,6 +42,7 @@
font-style: italic;
font-weight: 500;
font-display: swap;
unicode-range: $inter-unicode-range;
src: url("$(res)/fonts/Inter/Inter-MediumItalic.woff2?v=3.13") format("woff2"),
url("$(res)/fonts/Inter/Inter-MediumItalic.woff?v=3.13") format("woff");
}
@ -54,6 +52,7 @@
font-style: normal;
font-weight: 600;
font-display: swap;
unicode-range: $inter-unicode-range;
src: url("$(res)/fonts/Inter/Inter-SemiBold.woff2?v=3.13") format("woff2"),
url("$(res)/fonts/Inter/Inter-SemiBold.woff?v=3.13") format("woff");
}
@ -62,6 +61,7 @@
font-style: italic;
font-weight: 600;
font-display: swap;
unicode-range: $inter-unicode-range;
src: url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff2?v=3.13") format("woff2"),
url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff?v=3.13") format("woff");
}
@ -71,6 +71,7 @@
font-style: normal;
font-weight: 700;
font-display: swap;
unicode-range: $inter-unicode-range;
src: url("$(res)/fonts/Inter/Inter-Bold.woff2?v=3.13") format("woff2"),
url("$(res)/fonts/Inter/Inter-Bold.woff?v=3.13") format("woff");
}
@ -79,6 +80,7 @@
font-style: italic;
font-weight: 700;
font-display: swap;
unicode-range: $inter-unicode-range;
src: url("$(res)/fonts/Inter/Inter-BoldItalic.woff2?v=3.13") format("woff2"),
url("$(res)/fonts/Inter/Inter-BoldItalic.woff?v=3.13") format("woff");
}
@ -118,17 +120,3 @@
src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url('$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* a COLR/CPAL version of Twemoji used for consistent cross-browser emoji
* taken from https://github.com/mozilla/twemoji-colr
* using the fix from https://github.com/mozilla/twemoji-colr/issues/50 to
* work on macOS
*/
/*
// except we now load it dynamically via FontManager to handle browsers
// which can't render COLR/CPAL still
@font-face {
font-family: "Twemoji Mozilla";
src: url('$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla.woff2') format('woff2');
}
*/

38
res/themes/light/css/_light.scss
View file

@ -19,8 +19,8 @@ $accent-bg-color: rgba(3, 179, 129, 0.16);
$notice-primary-color: #ff4b55;
$notice-primary-bg-color: rgba(255, 75, 85, 0.16);
$primary-fg-color: #2e2f32;
$roomlist2-header-color: $primary-fg-color;
$notice-secondary-color: $roomlist2-header-color;
$roomlist-header-color: $primary-fg-color;
$notice-secondary-color: $roomlist-header-color;
$header-panel-bg-color: #f3f8fd;
// typical text (dark-on-white in light skin)
@ -174,32 +174,22 @@ $header-divider-color: #91A1C0;
// ********************
// V2 Room List
// TODO: Remove the 2 from all of these when the new list takes over
$theme-button-bg-color: #e3e8f0;
$roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist2-bg-color: rgba(245, 245, 245, 0.90);
$roomsublist2-divider-color: $primary-fg-color;
$roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: rgba(245, 245, 245, 0.90);
$roomsublist-divider-color: $primary-fg-color;
$roomtile2-preview-color: #737D8C;
$roomtile2-default-badge-bg-color: #61708b;
$roomtile2-selected-bg-color: #FFF;
$roomtile-preview-color: #737D8C;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #FFF;
$presence-online: $accent-color;
$presence-away: orange; // TODO: Get color
$presence-away: #d9b072;
$presence-offline: #E3E8F0;
// ********************
$roomtile-name-color: #61708b;
$roomtile-badge-fg-color: $accent-fg-color;
$roomtile-selected-color: #212121;
$roomtile-notified-color: #212121;
$roomtile-selected-bg-color: #fff;
$roomtile-focused-bg-color: #fff;
$username-variant1-color: #368bd6;
$username-variant2-color: #ac3ba8;
$username-variant3-color: #0DBD8B;
@ -209,13 +199,6 @@ $username-variant6-color: #2dc2c5;
$username-variant7-color: #5c56f5;
$username-variant8-color: #74d12c;
$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1);
$roomsublist-background: $secondary-accent-color;
$roomsublist-label-fg-color: $roomtile-name-color;
$roomsublist-label-bg-color: $tertiary-accent-color;
$roomsublist-chevron-color: $accent-color;
$panel-divider-color: transparent;
// ********************
@ -291,7 +274,7 @@ $progressbar-color: #000;
$room-warning-bg-color: $yellow-background;
$memberstatus-placeholder-color: $roomtile-name-color;
$memberstatus-placeholder-color: $muted-fg-color;
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(245, 245, 245, 0.90);
@ -335,6 +318,7 @@ $appearance-tab-border-color: $input-darker-bg-color;
$roomlist-background-blur-amount: 40px;
$tagpanel-background-blur-amount: 20px;
$composer-shadow-color: rgba(0, 0, 0, 0.04);
// ***** Mixins! *****

6
res/themes/light/css/_mods.scss
View file

@ -5,7 +5,7 @@
// it can be blurred by the tag panel and room list
@supports (backdrop-filter: none) {
.mx_LeftPanel2 {
.mx_LeftPanel {
background-image: var(--avatar-url);
background-repeat: no-repeat;
background-size: cover;
@ -16,12 +16,12 @@
backdrop-filter: blur($tagpanel-background-blur-amount);
}
.mx_LeftPanel2 .mx_LeftPanel2_roomListContainer {
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
backdrop-filter: blur($roomlist-background-blur-amount);
}
}
.mx_RoomSublist2_showNButton {
.mx_RoomSublist_showNButton {
background-color: transparent !important;
}

23
src/@types/global.d.ts vendored
View file

@ -20,9 +20,11 @@ import { IMatrixClientPeg } from "../MatrixClientPeg";
import ToastStore from "../stores/ToastStore";
import DeviceListener from "../DeviceListener";
import RebrandListener from "../RebrandListener";
import { RoomListStore2 } from "../stores/room-list/RoomListStore2";
import { RoomListStoreClass } from "../stores/room-list/RoomListStore";
import { PlatformPeg } from "../PlatformPeg";
import RoomListLayoutStore from "../stores/room-list/RoomListLayoutStore";
import {IntegrationManagers} from "../integrations/IntegrationManagers";
import {ModalManager} from "../Modal";
declare global {
interface Window {
@ -32,21 +34,20 @@ declare global {
init: () => Promise<void>;
};
mx_ContentMessages: ContentMessages;
mx_ToastStore: ToastStore;
mx_DeviceListener: DeviceListener;
mx_RebrandListener: RebrandListener;
mx_RoomListStore2: RoomListStore2;
mx_RoomListLayoutStore: RoomListLayoutStore;
mxContentMessages: ContentMessages;
mxToastStore: ToastStore;
mxDeviceListener: DeviceListener;
mxRebrandListener: RebrandListener;
mxRoomListStore: RoomListStoreClass;
mxRoomListLayoutStore: RoomListLayoutStore;
mxPlatformPeg: PlatformPeg;
// TODO: Remove flag before launch: https://github.com/vector-im/riot-web/issues/14231
mx_LoudRoomListLogging: boolean;
mxIntegrationManagers: typeof IntegrationManagers;
singletonModalManager: ModalManager;
}
// workaround for https://github.com/microsoft/TypeScript/issues/30933
interface ObjectConstructor {
fromEntries?(xs: [string|number|symbol, any][]): object
fromEntries?(xs: [string|number|symbol, any][]): object;
}
interface Document {

18
src/ContentMessages.tsx
View file

@ -386,7 +386,7 @@ export default class ContentMessages {
const isQuoting = Boolean(RoomViewStore.getQuotingEvent());
if (isQuoting) {
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
const {finished} = Modal.createTrackedDialog('Upload Reply Warning', '', QuestionDialog, {
const {finished} = Modal.createTrackedDialog<[boolean]>('Upload Reply Warning', '', QuestionDialog, {
title: _t('Replying With Files'),
description: (
<div>{_t(
@ -397,7 +397,7 @@ export default class ContentMessages {
hasCancelButton: true,
button: _t("Continue"),
});
const [shouldUpload]: [boolean] = await finished;
const [shouldUpload] = await finished;
if (!shouldUpload) return;
}
@ -420,12 +420,12 @@ export default class ContentMessages {
if (tooBigFiles.length > 0) {
const UploadFailureDialog = sdk.getComponent("dialogs.UploadFailureDialog");
const {finished} = Modal.createTrackedDialog('Upload Failure', '', UploadFailureDialog, {
const {finished} = Modal.createTrackedDialog<[boolean]>('Upload Failure', '', UploadFailureDialog, {
badFiles: tooBigFiles,
totalFiles: files.length,
contentMessages: this,
});
const [shouldContinue]: [boolean] = await finished;
const [shouldContinue] = await finished;
if (!shouldContinue) return;
}
@ -437,12 +437,12 @@ export default class ContentMessages {
for (let i = 0; i < okFiles.length; ++i) {
const file = okFiles[i];
if (!uploadAll) {
const {finished} = Modal.createTrackedDialog('Upload Files confirmation', '', UploadConfirmDialog, {
const {finished} = Modal.createTrackedDialog<[boolean, boolean]>('Upload Files confirmation', '', UploadConfirmDialog, {
file,
currentIndex: i,
totalFiles: okFiles.length,
});
const [shouldContinue, shouldUploadAll]: [boolean, boolean] = await finished;
const [shouldContinue, shouldUploadAll] = await finished;
if (!shouldContinue) break;
if (shouldUploadAll) {
uploadAll = true;
@ -621,9 +621,9 @@ export default class ContentMessages {
}
static sharedInstance() {
if (window.mx_ContentMessages === undefined) {
window.mx_ContentMessages = new ContentMessages();
if (window.mxContentMessages === undefined) {
window.mxContentMessages = new ContentMessages();
}
return window.mx_ContentMessages;
return window.mxContentMessages;
}
}

23
src/CrossSigningManager.js
View file

@ -40,25 +40,16 @@ export class AccessCancelledError extends Error {
}
}
async function confirmToDismiss(name) {
let description;
if (name === "m.cross_signing.user_signing") {
description = _t("If you cancel now, you won't complete verifying the other user.");
} else if (name === "m.cross_signing.self_signing") {
description = _t("If you cancel now, you won't complete verifying your other session.");
} else {
description = _t("If you cancel now, you won't complete your operation.");
}
async function confirmToDismiss() {
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
const [sure] = await Modal.createDialog(QuestionDialog, {
title: _t("Cancel entering passphrase?"),
description,
danger: true,
cancelButton: _t("Enter passphrase"),
button: _t("Cancel"),
description: _t("Are you sure you want to cancel entering passphrase?"),
danger: false,
button: _t("Go Back"),
cancelButton: _t("Cancel"),
}).finished;
return sure;
return !sure;
}
async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
@ -102,7 +93,7 @@ async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
/* options= */ {
onBeforeClose: async (reason) => {
if (reason === "backgroundClick") {
return confirmToDismiss(ssssItemName);
return confirmToDismiss();
}
return true;
},

10
src/DeviceListener.ts
View file

@ -17,16 +17,16 @@ limitations under the License.
import {MatrixClientPeg} from './MatrixClientPeg';
import {
hideToast as hideBulkUnverifiedSessionsToast,
showToast as showBulkUnverifiedSessionsToast
showToast as showBulkUnverifiedSessionsToast,
} from "./toasts/BulkUnverifiedSessionsToast";
import {
hideToast as hideSetupEncryptionToast,
Kind as SetupKind,
showToast as showSetupEncryptionToast
showToast as showSetupEncryptionToast,
} from "./toasts/SetupEncryptionToast";
import {
hideToast as hideUnverifiedSessionsToast,
showToast as showUnverifiedSessionsToast
showToast as showUnverifiedSessionsToast,
} from "./toasts/UnverifiedSessionToast";
import {privateShouldBeEncrypted} from "./createRoom";
@ -48,8 +48,8 @@ export default class DeviceListener {
private displayingToastsForDeviceIds = new Set<string>();
static sharedInstance() {
if (!window.mx_DeviceListener) window.mx_DeviceListener = new DeviceListener();
return window.mx_DeviceListener;
if (!window.mxDeviceListener) window.mxDeviceListener = new DeviceListener();
return window.mxDeviceListener;
}
start() {

2
src/HtmlUtils.tsx
View file

@ -184,7 +184,7 @@ const transformTags: sanitizeHtml.IOptions["transformTags"] = { // custom to mat
if (typeof attribs.class !== 'undefined') {
// Filter out all classes other than ones starting with language- for syntax highlighting.
const classes = attribs.class.split(/\s/).filter(function(cl) {
return cl.startsWith('language-');
return cl.startsWith('language-') && !cl.startsWith('language-_');
});
attribs.class = classes.join(' ');
}

253
src/Modal.js → src/Modal.tsx
View file

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -17,6 +18,8 @@ limitations under the License.
import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import Analytics from './Analytics';
import dis from './dispatcher/dispatcher';
import {defer} from './utils/promise';
@ -25,36 +28,48 @@ import AsyncWrapper from './AsyncWrapper';
const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer";
class ModalManager {
constructor() {
this._counter = 0;
interface IModal<T extends any[]> {
elem: React.ReactNode;
className?: string;
beforeClosePromise?: Promise<boolean>;
closeReason?: string;
onBeforeClose?(reason?: string): Promise<boolean>;
onFinished(...args: T): void;
close(...args: T): void;
}
interface IHandle<T extends any[]> {
finished: Promise<T>;
close(...args: T): void;
}
interface IProps<T extends any[]> {
onFinished?(...args: T): void;
// TODO improve typing here once all Modals are TS and we can exhaustively check the props
[key: string]: any;
}
interface IOptions<T extends any[]> {
onBeforeClose?: IModal<T>["onBeforeClose"];
}
type ParametersWithoutFirst<T extends (...args: any) => any> = T extends (a: any, ...args: infer P) => any ? P : never;
export class ModalManager {
private counter = 0;
// The modal to prioritise over all others. If this is set, only show
// this modal. Remove all other modals from the stack when this modal
// is closed.
this._priorityModal = null;
private priorityModal: IModal<any> = null;
// The modal to keep open underneath other modals if possible. Useful
// for cases like Settings where the modal should remain open while the
// user is prompted for more information/errors.
this._staticModal = null;
private staticModal: IModal<any> = null;
// A list of the modals we have stacked up, with the most recent at [0]
// Neither the static nor priority modal will be in this list.
this._modals = [
/* {
elem: React component for this dialog
onFinished: caller-supplied onFinished callback
className: CSS class for the dialog wrapper div
} */
];
private modals: IModal<any>[] = [];
this.onBackgroundClick = this.onBackgroundClick.bind(this);
}
hasDialogs() {
return this._priorityModal || this._staticModal || this._modals.length > 0;
}
getOrCreateContainer() {
private static getOrCreateContainer() {
let container = document.getElementById(DIALOG_CONTAINER_ID);
if (!container) {
@ -66,7 +81,7 @@ class ModalManager {
return container;
}
getOrCreateStaticContainer() {
private static getOrCreateStaticContainer() {
let container = document.getElementById(STATIC_DIALOG_CONTAINER_ID);
if (!container) {
@ -78,63 +93,99 @@ class ModalManager {
return container;
}
createTrackedDialog(analyticsAction, analyticsInfo, ...rest) {
public hasDialogs() {
return this.priorityModal || this.staticModal || this.modals.length > 0;
}
public createTrackedDialog<T extends any[]>(
analyticsAction: string,
analyticsInfo: string,
...rest: Parameters<ModalManager["createDialog"]>
) {
Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
return this.createDialog(...rest);
return this.createDialog<T>(...rest);
}
appendTrackedDialog(analyticsAction, analyticsInfo, ...rest) {
public appendTrackedDialog<T extends any[]>(
analyticsAction: string,
analyticsInfo: string,
...rest: Parameters<ModalManager["appendDialog"]>
) {
Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
return this.appendDialog(...rest);
return this.appendDialog<T>(...rest);
}
createDialog(Element, ...rest) {
return this.createDialogAsync(Promise.resolve(Element), ...rest);
public createDialog<T extends any[]>(
Element: React.ComponentType,
...rest: ParametersWithoutFirst<ModalManager["createDialogAsync"]>
) {
return this.createDialogAsync<T>(Promise.resolve(Element), ...rest);
}
appendDialog(Element, ...rest) {
return this.appendDialogAsync(Promise.resolve(Element), ...rest);
public appendDialog<T extends any[]>(
Element: React.ComponentType,
...rest: ParametersWithoutFirst<ModalManager["appendDialogAsync"]>
) {
return this.appendDialogAsync<T>(Promise.resolve(Element), ...rest);
}
createTrackedDialogAsync(analyticsAction, analyticsInfo, ...rest) {
public createTrackedDialogAsync<T extends any[]>(
analyticsAction: string,
analyticsInfo: string,
...rest: Parameters<ModalManager["appendDialogAsync"]>
) {
Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
return this.createDialogAsync(...rest);
return this.createDialogAsync<T>(...rest);
}
appendTrackedDialogAsync(analyticsAction, analyticsInfo, ...rest) {
public appendTrackedDialogAsync<T extends any[]>(
analyticsAction: string,
analyticsInfo: string,
...rest: Parameters<ModalManager["appendDialogAsync"]>
) {
Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
return this.appendDialogAsync(...rest);
return this.appendDialogAsync<T>(...rest);
}
_buildModal(prom, props, className, options) {
const modal = {};
private buildModal<T extends any[]>(
prom: Promise<React.ComponentType>,
props?: IProps<T>,
className?: string,
options?: IOptions<T>
) {
const modal: IModal<T> = {
onFinished: props ? props.onFinished : null,
onBeforeClose: options.onBeforeClose,
beforeClosePromise: null,
closeReason: null,
className,
// these will be set below but we need an object reference to pass to getCloseFn before we can do that
elem: null,
close: null,
};
// never call this from onFinished() otherwise it will loop
const [closeDialog, onFinishedProm] = this._getCloseFn(modal, props);
const [closeDialog, onFinishedProm] = this.getCloseFn<T>(modal, props);
// don't attempt to reuse the same AsyncWrapper for different dialogs,
// otherwise we'll get confused.
const modalCount = this._counter++;
const modalCount = this.counter++;
// FIXME: If a dialog uses getDefaultProps it clobbers the onFinished
// property set here so you can't close the dialog from a button click!
modal.elem = (
<AsyncWrapper key={modalCount} prom={prom} {...props}
onFinished={closeDialog} />
);
modal.onFinished = props ? props.onFinished : null;
modal.className = className;
modal.onBeforeClose = options.onBeforeClose;
modal.beforeClosePromise = null;
modal.elem = <AsyncWrapper key={modalCount} prom={prom} {...props} onFinished={closeDialog} />;
modal.close = closeDialog;
modal.closeReason = null;
return {modal, closeDialog, onFinishedProm};
}
_getCloseFn(modal, props) {
const deferred = defer();
return [async (...args) => {
private getCloseFn<T extends any[]>(
modal: IModal<T>,
props: IProps<T>
): [IHandle<T>["close"], IHandle<T>["finished"]] {
const deferred = defer<T>();
return [async (...args: T) => {
if (modal.beforeClosePromise) {
await modal.beforeClosePromise;
} else if (modal.onBeforeClose) {
@ -147,26 +198,26 @@ class ModalManager {
}
deferred.resolve(args);
if (props && props.onFinished) props.onFinished.apply(null, args);
const i = this._modals.indexOf(modal);
const i = this.modals.indexOf(modal);
if (i >= 0) {
this._modals.splice(i, 1);
this.modals.splice(i, 1);
}
if (this._priorityModal === modal) {
this._priorityModal = null;
if (this.priorityModal === modal) {
this.priorityModal = null;
// XXX: This is destructive
this._modals = [];
this.modals = [];
}
if (this._staticModal === modal) {
this._staticModal = null;
if (this.staticModal === modal) {
this.staticModal = null;
// XXX: This is destructive
this._modals = [];
this.modals = [];
}
this._reRender();
this.reRender();
}, deferred.promise];
}
@ -207,38 +258,49 @@ class ModalManager {
* @param {onBeforeClose} options.onBeforeClose a callback to decide whether to close the dialog
* @returns {object} Object with 'close' parameter being a function that will close the dialog
*/
createDialogAsync(prom, props, className, isPriorityModal, isStaticModal, options = {}) {
const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className, options);
private createDialogAsync<T extends any[]>(
prom: Promise<React.ComponentType>,
props?: IProps<T>,
className?: string,
isPriorityModal = false,
isStaticModal = false,
options: IOptions<T> = {}
): IHandle<T> {
const {modal, closeDialog, onFinishedProm} = this.buildModal<T>(prom, props, className, options);
if (isPriorityModal) {
// XXX: This is destructive
this._priorityModal = modal;
this.priorityModal = modal;
} else if (isStaticModal) {
// This is intentionally destructive
this._staticModal = modal;
this.staticModal = modal;
} else {
this._modals.unshift(modal);
this.modals.unshift(modal);
}
this._reRender();
this.reRender();
return {
close: closeDialog,
finished: onFinishedProm,
};
}
appendDialogAsync(prom, props, className) {
const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className, {});
private appendDialogAsync<T extends any[]>(
prom: Promise<React.ComponentType>,
props?: IProps<T>,
className?: string
): IHandle<T> {
const {modal, closeDialog, onFinishedProm} = this.buildModal<T>(prom, props, className, {});
this._modals.push(modal);
this._reRender();
this.modals.push(modal);
this.reRender();
return {
close: closeDialog,
finished: onFinishedProm,
};
}
onBackgroundClick() {
const modal = this._getCurrentModal();
private onBackgroundClick = () => {
const modal = this.getCurrentModal();
if (!modal) {
return;
}
@ -249,21 +311,21 @@ class ModalManager {
modal.closeReason = "backgroundClick";
modal.close();
modal.closeReason = null;
};
private getCurrentModal(): IModal<any> {
return this.priorityModal ? this.priorityModal : (this.modals[0] || this.staticModal);
}
_getCurrentModal() {
return this._priorityModal ? this._priorityModal : (this._modals[0] || this._staticModal);
}
_reRender() {
if (this._modals.length === 0 && !this._priorityModal && !this._staticModal) {
private reRender() {
if (this.modals.length === 0 && !this.priorityModal && !this.staticModal) {
// If there is no modal to render, make all of Riot available
// to screen reader users again
dis.dispatch({
action: 'aria_unhide_main_app',
});
ReactDOM.unmountComponentAtNode(this.getOrCreateContainer());
ReactDOM.unmountComponentAtNode(this.getOrCreateStaticContainer());
ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateContainer());
ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateStaticContainer());
return;
}
@ -274,49 +336,48 @@ class ModalManager {
action: 'aria_hide_main_app',
});
if (this._staticModal) {
const classes = "mx_Dialog_wrapper mx_Dialog_staticWrapper "
+ (this._staticModal.className ? this._staticModal.className : '');
if (this.staticModal) {
const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
const staticDialog = (
<div className={classes}>
<div className="mx_Dialog">
{ this._staticModal.elem }
{ this.staticModal.elem }
</div>
<div className="mx_Dialog_background mx_Dialog_staticBackground" onClick={this.onBackgroundClick}></div>
<div className="mx_Dialog_background mx_Dialog_staticBackground" onClick={this.onBackgroundClick} />
</div>
);
ReactDOM.render(staticDialog, this.getOrCreateStaticContainer());
ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
} else {
// This is safe to call repeatedly if we happen to do that
ReactDOM.unmountComponentAtNode(this.getOrCreateStaticContainer());
ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateStaticContainer());
}
const modal = this._getCurrentModal();
if (modal !== this._staticModal) {
const classes = "mx_Dialog_wrapper "
+ (this._staticModal ? "mx_Dialog_wrapperWithStaticUnder " : '')
+ (modal.className ? modal.className : '');
const modal = this.getCurrentModal();
if (modal !== this.staticModal) {
const classes = classNames("mx_Dialog_wrapper", modal.className, {
mx_Dialog_wrapperWithStaticUnder: this.staticModal,
});
const dialog = (
<div className={classes}>
<div className="mx_Dialog">
{modal.elem}
</div>
<div className="mx_Dialog_background" onClick={this.onBackgroundClick}></div>
<div className="mx_Dialog_background" onClick={this.onBackgroundClick} />
</div>
);
ReactDOM.render(dialog, this.getOrCreateContainer());
ReactDOM.render(dialog, ModalManager.getOrCreateContainer());
} else {
// This is safe to call repeatedly if we happen to do that
ReactDOM.unmountComponentAtNode(this.getOrCreateContainer());
ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateContainer());
}
}
}
if (!global.singletonModalManager) {
global.singletonModalManager = new ModalManager();
if (!window.singletonModalManager) {
window.singletonModalManager = new ModalManager();
}
export default global.singletonModalManager;
export default window.singletonModalManager;

15
src/RebrandListener.tsx
View file

@ -67,8 +67,8 @@ export default class RebrandListener {
private nagAgainAt?: number = null;
static sharedInstance() {
if (!window.mx_RebrandListener) window.mx_RebrandListener = new RebrandListener();
return window.mx_RebrandListener;
if (!window.mxRebrandListener) window.mxRebrandListener = new RebrandListener();
return window.mxRebrandListener;
}
constructor() {
@ -114,6 +114,11 @@ export default class RebrandListener {
}
};
onOneTimeToastDismiss = async () => {
localStorage.setItem('mx_rename_dialog_dismissed', 'true');
this.recheck();
};
onNagTimerFired = () => {
this._reshowTimer = null;
this.nagAgainAt = null;
@ -143,10 +148,14 @@ export default class RebrandListener {
if (nagToast || oneTimeToast) {
let description;
let rejectLabel = null;
let onReject = null;
if (nagToast) {
description = _t("Use your account to sign in to the latest version");
} else {
description = _t("We’re excited to announce Riot is now Element");
rejectLabel = _t("Dismiss");
onReject = this.onOneTimeToastDismiss;
}
ToastStore.sharedInstance().addOrReplaceToast({
@ -157,6 +166,8 @@ export default class RebrandListener {
description,
acceptLabel: _t("Learn More"),
onAccept: nagToast ? this.onNagToastLearnMore : this.onOneTimeToastLearnMore,
rejectLabel,
onReject,
},
component: GenericToast,
priority: 20,

21
src/RoomNotifs.js
View file

@ -34,27 +34,6 @@ export function shouldShowMentionBadge(roomNotifState) {
return MENTION_BADGE_STATES.includes(roomNotifState);
}
export function countRoomsWithNotif(rooms) {
return rooms.reduce((result, room, index) => {
const roomNotifState = getRoomNotifsState(room.roomId);
const highlight = room.getUnreadNotificationCount('highlight') > 0;
const notificationCount = room.getUnreadNotificationCount();
const notifBadges = notificationCount > 0 && shouldShowNotifBadge(roomNotifState);
const mentionBadges = highlight && shouldShowMentionBadge(roomNotifState);
const isInvite = room.hasMembershipState(MatrixClientPeg.get().credentials.userId, 'invite');
const badges = notifBadges || mentionBadges || isInvite;
if (badges) {
result.count++;
if (highlight) {
result.highlight = true;
}
}
return result;
}, {count: 0, highlight: false});
}
export function aggregateNotificationCount(rooms) {
return rooms.reduce((result, room) => {
const roomNotifState = getRoomNotifsState(room.roomId);

21
src/SlashCommands.tsx
View file

@ -43,6 +43,7 @@ import SdkConfig from "./SdkConfig";
import { ensureDMExists } from "./createRoom";
import { ViewUserPayload } from "./dispatcher/payloads/ViewUserPayload";
import { Action } from "./dispatcher/actions";
import { EffectiveMembership, getEffectiveMembership } from "./utils/membership";
// XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816
interface HTMLInputEvent extends Event {
@ -400,14 +401,16 @@ export const Commands = [
// If we need an identity server but don't have one, things
// get a bit more complex here, but we try to show something
// meaningful.
let finished = Promise.resolve();
let prom = Promise.resolve();
if (
getAddressType(address) === 'email' &&
!MatrixClientPeg.get().getIdentityServerUrl()
) {
const defaultIdentityServerUrl = getDefaultIdentityServerUrl();
if (defaultIdentityServerUrl) {
({ finished } = Modal.createTrackedDialog('Slash Commands', 'Identity server',
const { finished } = Modal.createTrackedDialog<[boolean]>(
'Slash Commands',
'Identity server',
QuestionDialog, {
title: _t("Use an identity server"),
description: <p>{_t(
@ -420,9 +423,9 @@ export const Commands = [
)}</p>,
button: _t("Continue"),
},
));
);
finished = finished.then(([useDefault]: any) => {
prom = finished.then(([useDefault]) => {
if (useDefault) {
useDefaultIdentityServer();
return;
@ -434,7 +437,7 @@ export const Commands = [
}
}
const inviter = new MultiInviter(roomId);
return success(finished.then(() => {
return success(prom.then(() => {
return inviter.invite([address]);
}).then(() => {
if (inviter.getCompletionState(address) !== "invited") {
@ -730,9 +733,11 @@ export const Commands = [
const cli = MatrixClientPeg.get();
const room = cli.getRoom(roomId);
if (!room) return reject(_t("Command failed"));
const member = room.getMember(args);
if (!member || getEffectiveMembership(member.membership) === EffectiveMembership.Leave) {
return reject(_t("Could not find user in room"));
}
const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
if (!powerLevelEvent.getContent().users[args]) return reject(_t("Could not find user in room"));
return success(cli.setPowerLevel(roomId, userId, powerLevel, powerLevelEvent));
}
}
@ -1046,7 +1051,7 @@ export function parseCommandString(input) {
// trim any trailing whitespace, as it can confuse the parser for
// IRC-style commands
input = input.replace(/\s+$/, '');
if (input[0] !== '/') return null; // not a command
if (input[0] !== '/') return {}; // not a command
const bits = input.match(/^(\S+?)(?: +((.|\n)*))?$/);
let cmd;

42
src/accessibility/RovingTabIndex.tsx
View file

@ -23,12 +23,11 @@ import React, {
useRef,
useReducer,
Reducer,
RefObject,
Dispatch,
} from "react";
import {Key} from "../Keyboard";
import AccessibleButton from "../components/views/elements/AccessibleButton";
import {FocusHandler, Ref} from "./roving/types";
/**
* Module to simplify implementing the Roving TabIndex accessibility technique
@ -45,9 +44,7 @@ import AccessibleButton from "../components/views/elements/AccessibleButton";
const DOCUMENT_POSITION_PRECEDING = 2;
type Ref = RefObject<HTMLElement>;
interface IState {
export interface IState {
activeRef: Ref;
refs: Ref[];
}
@ -156,7 +153,7 @@ interface IProps {
children(renderProps: {
onKeyDownHandler(ev: React.KeyboardEvent);
});
onKeyDown?(ev: React.KeyboardEvent);
onKeyDown?(ev: React.KeyboardEvent, state: IState);
}
export const RovingTabIndexProvider: React.FC<IProps> = ({children, handleHomeEnd, onKeyDown}) => {
@ -193,7 +190,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({children, handleHomeEn
ev.preventDefault();
ev.stopPropagation();
} else if (onKeyDown) {
return onKeyDown(ev);
return onKeyDown(ev, state);
}
}, [context.state, onKeyDown, handleHomeEnd]);
@ -202,8 +199,6 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({children, handleHomeEn
</RovingTabIndexContext.Provider>;
};
type FocusHandler = () => void;
// Hook to register a roving tab index
// inputRef parameter specifies the ref to use
// onFocus should be called when the index gained focus in any manner
@ -244,28 +239,7 @@ export const useRovingTabIndex = (inputRef: Ref): [FocusHandler, boolean, Ref] =
return [onFocus, isActive, ref];
};
interface IRovingTabIndexWrapperProps {
inputRef?: Ref;
children(renderProps: {
onFocus: FocusHandler;
isActive: boolean;
ref: Ref;
});
}
// Wrapper to allow use of useRovingTabIndex outside of React Functional Components.
export const RovingTabIndexWrapper: React.FC<IRovingTabIndexWrapperProps> = ({children, inputRef}) => {
const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
return children({onFocus, isActive, ref});
};
interface IRovingAccessibleButtonProps extends React.ComponentProps<typeof AccessibleButton> {
inputRef?: Ref;
}
// Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
export const RovingAccessibleButton: React.FC<IRovingAccessibleButtonProps> = ({inputRef, ...props}) => {
const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
return <AccessibleButton {...props} onFocus={onFocus} inputRef={ref} tabIndex={isActive ? 0 : -1} />;
};
// re-export the semantic helper components for simplicity
export {RovingTabIndexWrapper} from "./roving/RovingTabIndexWrapper";
export {RovingAccessibleButton} from "./roving/RovingAccessibleButton";
export {RovingAccessibleTooltipButton} from "./roving/RovingAccessibleTooltipButton";

69
src/accessibility/Toolbar.tsx 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.
*/
import React from "react";
import {IState, RovingTabIndexProvider} from "./RovingTabIndex";
import {Key} from "../Keyboard";
interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {
}
// This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines.
// https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar
// All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref`
const Toolbar: React.FC<IProps> = ({children, ...props}) => {
const onKeyDown = (ev: React.KeyboardEvent, state: IState) => {
const target = ev.target as HTMLElement;
let handled = true;
switch (ev.key) {
case Key.ARROW_UP:
case Key.ARROW_DOWN:
if (target.hasAttribute('aria-haspopup')) {
target.click();
}
break;
case Key.ARROW_LEFT:
case Key.ARROW_RIGHT:
if (state.refs.length > 0) {
const i = state.refs.findIndex(r => r === state.activeRef);
const delta = ev.key === Key.ARROW_RIGHT ? 1 : -1;
state.refs.slice((i + delta) % state.refs.length)[0].current.focus();
}
break;
// HOME and END are handled by RovingTabIndexProvider
default:
handled = false;
}
if (handled) {
ev.preventDefault();
ev.stopPropagation();
}
};
return <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
{({onKeyDownHandler}) => <div {...props} onKeyDown={onKeyDownHandler} role="toolbar">
{ children }
</div>}
</RovingTabIndexProvider>;
};
export default Toolbar;

4
src/accessibility/context_menu/ContextMenuButton.tsx
View file

@ -18,9 +18,9 @@ limitations under the License.
import React from "react";
import AccessibleButton, {IProps as IAccessibleButtonProps} from "../../components/views/elements/AccessibleButton";
import AccessibleButton from "../../components/views/elements/AccessibleButton";
interface IProps extends IAccessibleButtonProps {
interface IProps extends React.ComponentProps<typeof AccessibleButton> {
label?: string;
// whether or not the context menu is currently open
isExpanded: boolean;

47
src/accessibility/context_menu/ContextMenuTooltipButton.tsx Normal file
View file

@ -0,0 +1,47 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
interface IProps extends React.ComponentProps<typeof AccessibleTooltipButton> {
// whether or not the context menu is currently open
isExpanded: boolean;
}
// Semantic component for representing the AccessibleButton which launches a <ContextMenu />
export const ContextMenuTooltipButton: React.FC<IProps> = ({
isExpanded,
children,
onClick,
onContextMenu,
...props
}) => {
return (
<AccessibleTooltipButton
{...props}
onClick={onClick}
onContextMenu={onContextMenu || onClick}
aria-haspopup={true}
aria-expanded={isExpanded}
>
{ children }
</AccessibleTooltipButton>
);
};

32
src/accessibility/roving/RovingAccessibleButton.tsx Normal file
View file

@ -0,0 +1,32 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import AccessibleButton from "../../components/views/elements/AccessibleButton";
import {useRovingTabIndex} from "../RovingTabIndex";
import {Ref} from "./types";
interface IProps extends Omit<React.ComponentProps<typeof AccessibleButton>, "onFocus" | "inputRef" | "tabIndex"> {
inputRef?: Ref;
}
// Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
export const RovingAccessibleButton: React.FC<IProps> = ({inputRef, ...props}) => {
const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
return <AccessibleButton {...props} onFocus={onFocus} inputRef={ref} tabIndex={isActive ? 0 : -1} />;
};

32
src/accessibility/roving/RovingAccessibleTooltipButton.tsx Normal file
View file

@ -0,0 +1,32 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
import {useRovingTabIndex} from "../RovingTabIndex";
import {Ref} from "./types";
interface IProps extends Omit<React.ComponentProps<typeof AccessibleTooltipButton>, "onFocus" | "inputRef" | "tabIndex"> {
inputRef?: Ref;
}
// Wrapper to allow use of useRovingTabIndex for simple AccessibleTooltipButtons outside of React Functional Components.
export const RovingAccessibleTooltipButton: React.FC<IProps> = ({inputRef, ...props}) => {
const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
return <AccessibleTooltipButton {...props} onFocus={onFocus} inputRef={ref} tabIndex={isActive ? 0 : -1} />;
};

36
src/accessibility/roving/RovingTabIndexWrapper.tsx Normal file
View file

@ -0,0 +1,36 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import AccessibleButton from "../../components/views/elements/AccessibleButton";
import {useRovingTabIndex} from "../RovingTabIndex";
import {FocusHandler, Ref} from "./types";
interface IProps {
inputRef?: Ref;
children(renderProps: {
onFocus: FocusHandler;
isActive: boolean;
ref: Ref;
});
}
// Wrapper to allow use of useRovingTabIndex outside of React Functional Components.
export const RovingTabIndexWrapper: React.FC<IProps> = ({children, inputRef}) => {
const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
return children({onFocus, isActive, ref});
};

10
res/css/views/messages/_ReactionsRowButtonTooltip.scss → src/accessibility/roving/types.ts
View file

@ -1,5 +1,5 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ReactionsRowButtonTooltip_reactedWith {
opacity: 0.7;
}
import {RefObject} from "react";
export type Ref = RefObject<HTMLElement>;
export type FocusHandler = () => void;

21
src/actions/RoomListActions.ts
View file

@ -16,7 +16,6 @@ limitations under the License.
*/
import { asyncAction } from './actionCreators';
import { TAG_DM } from '../stores/RoomListStore';
import Modal from '../Modal';
import * as Rooms from '../Rooms';
import { _t } from '../languageHandler';
@ -24,7 +23,9 @@ import * as sdk from '../index';
import { MatrixClient } from "matrix-js-sdk/src/client";
import { Room } from "matrix-js-sdk/src/models/room";
import { AsyncActionPayload } from "../dispatcher/payloads";
import { RoomListStoreTempProxy } from "../stores/room-list/RoomListStoreTempProxy";
import RoomListStore from "../stores/room-list/RoomListStore";
import { SortAlgorithm } from "../stores/room-list/algorithms/models";
import { DefaultTagID } from "../stores/room-list/models";
export default class RoomListActions {
/**
@ -51,9 +52,9 @@ export default class RoomListActions {
let metaData = null;
// Is the tag ordered manually?
if (newTag && !newTag.match(/^(m\.lowpriority|im\.vector\.fake\.(invite|recent|direct|archived))$/)) {
const lists = RoomListStoreTempProxy.getRoomLists();
const newList = [...lists[newTag]];
const store = RoomListStore.instance;
if (newTag && store.getTagSorting(newTag) === SortAlgorithm.Manual) {
const newList = [...store.orderedLists[newTag]];
newList.sort((a, b) => a.tags[newTag].order - b.tags[newTag].order);
@ -81,11 +82,11 @@ export default class RoomListActions {
const roomId = room.roomId;
// Evil hack to get DMs behaving
if ((oldTag === undefined && newTag === TAG_DM) ||
(oldTag === TAG_DM && newTag === undefined)
if ((oldTag === undefined && newTag === DefaultTagID.DM) ||
(oldTag === DefaultTagID.DM && newTag === undefined)
) {
return Rooms.guessAndSetDMRoom(
room, newTag === TAG_DM,
room, newTag === DefaultTagID.DM,
).catch((err) => {
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
console.error("Failed to set direct chat tag " + err);
@ -102,7 +103,7 @@ export default class RoomListActions {
// but we avoid ever doing a request with TAG_DM.
//
// if we moved lists, remove the old tag
if (oldTag && oldTag !== TAG_DM &&
if (oldTag && oldTag !== DefaultTagID.DM &&
hasChangedSubLists
) {
const promiseToDelete = matrixClient.deleteRoomTag(
@ -120,7 +121,7 @@ export default class RoomListActions {
}
// if we moved lists or the ordering changed, add the new tag
if (newTag && newTag !== TAG_DM &&
if (newTag && newTag !== DefaultTagID.DM &&
(hasChangedSubLists || metaData)
) {
// metaData is the body of the PUT to set the tag, so it must

1
src/actions/TagOrderActions.ts
View file

@ -22,7 +22,6 @@ import { AsyncActionPayload } from "../dispatcher/payloads";
import { MatrixClient } from "matrix-js-sdk/src/client";
export default class TagOrderActions {
/**
* Creates an action thunk that will do an asynchronous request to
* move a tag in TagOrderStore to destinationIx.

30
src/autocomplete/QueryMatcher.ts
View file

@ -18,16 +18,15 @@ limitations under the License.
import _at from 'lodash/at';
import _uniq from 'lodash/uniq';
function stripDiacritics(str: string): string {
return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}
import {removeHiddenChars} from "matrix-js-sdk/src/utils";
interface IOptions<T extends {}> {
keys: Array<string | keyof T>;
funcs?: Array<(T) => string>;
shouldMatchWordsOnly?: boolean;
shouldMatchPrefix?: boolean;
// whether to apply unhomoglyph and strip diacritics to fuzz up the search. Defaults to true
fuzzy?: boolean;
}
/**
@ -46,14 +45,10 @@ interface IOptions<T extends {}> {
*/
export default class QueryMatcher<T extends Object> {
private _options: IOptions<T>;
private _keys: IOptions<T>["keys"];
private _funcs: Required<IOptions<T>["funcs"]>;
private _items: Map<string, {object: T, keyWeight: number}[]>;
constructor(objects: T[], options: IOptions<T> = { keys: [] }) {
this._options = options;
this._keys = options.keys;
this._funcs = options.funcs || [];
this.setObjects(objects);
@ -78,15 +73,17 @@ export default class QueryMatcher<T extends Object> {
// type for their values. We assume that those values who's keys have
// been specified will be string. Also, we cannot infer all the
// types of the keys of the objects at compile.
const keyValues = _at<string>(<any>object, this._keys);
const keyValues = _at<string>(<any>object, this._options.keys);
for (const f of this._funcs) {
if (this._options.funcs) {
for (const f of this._options.funcs) {
keyValues.push(f(object));
}
}
for (const [index, keyValue] of Object.entries(keyValues)) {
if (!keyValue) continue; // skip falsy keyValues
const key = stripDiacritics(keyValue).toLowerCase();
const key = this.processQuery(keyValue);
if (!this._items.has(key)) {
this._items.set(key, []);
}
@ -99,7 +96,7 @@ export default class QueryMatcher<T extends Object> {
}
match(query: string): T[] {
query = stripDiacritics(query).toLowerCase();
query = this.processQuery(query);
if (this._options.shouldMatchWordsOnly) {
query = query.replace(/[^\w]/g, '');
}
@ -118,7 +115,7 @@ export default class QueryMatcher<T extends Object> {
const index = resultKey.indexOf(query);
if (index !== -1 && (!this._options.shouldMatchPrefix || index === 0)) {
matches.push(
...candidates.map((candidate) => ({index, ...candidate}))
...candidates.map((candidate) => ({index, ...candidate})),
);
}
}
@ -142,4 +139,11 @@ export default class QueryMatcher<T extends Object> {
// Now map the keys to the result objects. Also remove any duplicates.
return _uniq(matches.map((match) => match.object));
}
private processQuery(query: string): string {
if (this._options.fuzzy !== false) {
return removeHiddenChars(query).toLowerCase();
}
return query.toLowerCase();
}
}

1
src/components/structures/AutoHideScrollbar.js
View file

@ -43,6 +43,7 @@ export default class AutoHideScrollbar extends React.Component {
className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
onScroll={this.props.onScroll}
onWheel={this.props.onWheel}
tabIndex={this.props.tabIndex}
>
{ this.props.children }
</div>);

4
src/components/structures/ContextMenu.tsx
View file

@ -233,6 +233,9 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
switch (ev.key) {
case Key.TAB:
case Key.ESCAPE:
// close on left and right arrows too for when it is a context menu on a <Toolbar />
case Key.ARROW_LEFT:
case Key.ARROW_RIGHT:
this.props.onFinished();
break;
case Key.ARROW_UP:
@ -458,6 +461,7 @@ export function createMenu(ElementClass, props) {
// re-export the semantic helper components for simplicity
export {ContextMenuButton} from "../../accessibility/context_menu/ContextMenuButton";
export {ContextMenuTooltipButton} from "../../accessibility/context_menu/ContextMenuTooltipButton";
export {MenuGroup} from "../../accessibility/context_menu/MenuGroup";
export {MenuItem} from "../../accessibility/context_menu/MenuItem";
export {MenuItemCheckbox} from "../../accessibility/context_menu/MenuItemCheckbox";

10
src/components/structures/CustomRoomTagPanel.js
View file

@ -72,17 +72,17 @@ class CustomRoomTagTile extends React.Component {
const tag = this.props.tag;
const avatarHeight = 40;
const className = classNames({
CustomRoomTagPanel_tileSelected: tag.selected,
"CustomRoomTagPanel_tileSelected": tag.selected,
});
const name = tag.name;
const badge = tag.badge;
const badgeNotifState = tag.badgeNotifState;
let badgeElement;
if (badge) {
if (badgeNotifState) {
const badgeClasses = classNames({
"mx_TagTile_badge": true,
"mx_TagTile_badgeHighlight": badge.highlight,
"mx_TagTile_badgeHighlight": badgeNotifState.hasMentions,
});
badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badgeNotifState.count)}</div>);
}
return (

305
src/components/structures/LeftPanel.js
View file

@ -1,305 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Key } from '../../Keyboard';
import * as sdk from '../../index';
import dis from '../../dispatcher/dispatcher';
import * as VectorConferenceHandler from '../../VectorConferenceHandler';
import SettingsStore from '../../settings/SettingsStore';
import {_t} from "../../languageHandler";
import Analytics from "../../Analytics";
import {Action} from "../../dispatcher/actions";
const LeftPanel = createReactClass({
displayName: 'LeftPanel',
// NB. If you add props, don't forget to update
// shouldComponentUpdate!
propTypes: {
collapsed: PropTypes.bool.isRequired,
},
getInitialState: function() {
return {
searchFilter: '',
breadcrumbs: false,
};
},
// TODO: [REACT-WARNING] Move this to constructor
UNSAFE_componentWillMount: function() {
this.focusedElement = null;
this._breadcrumbsWatcherRef = SettingsStore.watchSetting(
"breadcrumbs", null, this._onBreadcrumbsChanged);
this._tagPanelWatcherRef = SettingsStore.watchSetting(
"TagPanel.enableTagPanel", null, () => this.forceUpdate());
const useBreadcrumbs = !!SettingsStore.getValue("breadcrumbs");
Analytics.setBreadcrumbs(useBreadcrumbs);
this.setState({breadcrumbs: useBreadcrumbs});
},
componentWillUnmount: function() {
SettingsStore.unwatchSetting(this._breadcrumbsWatcherRef);
SettingsStore.unwatchSetting(this._tagPanelWatcherRef);
},
shouldComponentUpdate: function(nextProps, nextState) {
// MatrixChat will update whenever the user switches
// rooms, but propagating this change all the way down
// the react tree is quite slow, so we cut this off
// here. The RoomTiles listen for the room change
// events themselves to know when to update.
// We just need to update if any of these things change.
if (
this.props.collapsed !== nextProps.collapsed ||
this.props.disabled !== nextProps.disabled
) {
return true;
}
if (this.state.searchFilter !== nextState.searchFilter) {
return true;
}
if (this.state.searchExpanded !== nextState.searchExpanded) {
return true;
}
return false;
},
componentDidUpdate(prevProps, prevState) {
if (prevState.breadcrumbs !== this.state.breadcrumbs) {
Analytics.setBreadcrumbs(this.state.breadcrumbs);
}
},
_onBreadcrumbsChanged: function(settingName, roomId, level, valueAtLevel, value) {
// Features are only possible at a single level, so we can get away with using valueAtLevel.
// The SettingsStore runs on the same tick as the update, so `value` will be wrong.
this.setState({breadcrumbs: valueAtLevel});
// For some reason the setState doesn't trigger a render of the component, so force one.
// Probably has to do with the change happening outside of a change detector cycle.
this.forceUpdate();
},
_onFocus: function(ev) {
this.focusedElement = ev.target;
},
_onBlur: function(ev) {
this.focusedElement = null;
},
_onFilterKeyDown: function(ev) {
if (!this.focusedElement) return;
switch (ev.key) {
// On enter of rooms filter select and activate first room if such one exists
case Key.ENTER: {
const firstRoom = ev.target.closest(".mx_LeftPanel").querySelector(".mx_RoomTile");
if (firstRoom) {
firstRoom.click();
}
break;
}
}
},
_onKeyDown: function(ev) {
if (!this.focusedElement) return;
switch (ev.key) {
case Key.ARROW_UP:
this._onMoveFocus(ev, true, true);
break;
case Key.ARROW_DOWN:
this._onMoveFocus(ev, false, true);
break;
}
},
_onMoveFocus: function(ev, up, trap) {
let element = this.focusedElement;
// unclear why this isn't needed
// var descending = (up == this.focusDirection) ? this.focusDescending : !this.focusDescending;
// this.focusDirection = up;
let descending = false; // are we currently descending or ascending through the DOM tree?
let classes;
do {
const child = up ? element.lastElementChild : element.firstElementChild;
const sibling = up ? element.previousElementSibling : element.nextElementSibling;
if (descending) {
if (child) {
element = child;
} else if (sibling) {
element = sibling;
} else {
descending = false;
element = element.parentElement;
}
} else {
if (sibling) {
element = sibling;
descending = true;
} else {
element = element.parentElement;
}
}
if (element) {
classes = element.classList;
}
} while (element && !(
classes.contains("mx_RoomTile") ||
classes.contains("mx_RoomSubList_label") ||
classes.contains("mx_LeftPanel_filterRooms")));
if (element) {
ev.stopPropagation();
ev.preventDefault();
element.focus();
this.focusedElement = element;
} else if (trap) {
// if navigation is via up/down arrow-keys, trap in the widget so it doesn't send to composer
ev.stopPropagation();
ev.preventDefault();
}
},
onSearch: function(term) {
this.setState({ searchFilter: term });
},
onSearchCleared: function(source) {
if (source === "keyboard") {
dis.fire(Action.FocusComposer);
}
this.setState({searchExpanded: false});
},
collectRoomList: function(ref) {
this._roomList = ref;
},
_onSearchFocus: function() {
this.setState({searchExpanded: true});
},
_onSearchBlur: function(event) {
if (event.target.value.length === 0) {
this.setState({searchExpanded: false});
}
},
render: function() {
const RoomList = sdk.getComponent('rooms.RoomList');
const RoomBreadcrumbs = sdk.getComponent('rooms.RoomBreadcrumbs');
const TagPanel = sdk.getComponent('structures.TagPanel');
const CustomRoomTagPanel = sdk.getComponent('structures.CustomRoomTagPanel');
const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton');
const SearchBox = sdk.getComponent('structures.SearchBox');
const CallPreview = sdk.getComponent('voip.CallPreview');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const tagPanelEnabled = SettingsStore.getValue("TagPanel.enableTagPanel");
let tagPanelContainer;
const isCustomTagsEnabled = SettingsStore.isFeatureEnabled("feature_custom_tags");
if (tagPanelEnabled) {
tagPanelContainer = (<div className="mx_LeftPanel_tagPanelContainer">
<TagPanel />
{ isCustomTagsEnabled ? <CustomRoomTagPanel /> : undefined }
</div>);
}
const containerClasses = classNames(
"mx_LeftPanel_container", "mx_fadable",
{
"collapsed": this.props.collapsed,
"mx_LeftPanel_container_hasTagPanel": tagPanelEnabled,
"mx_fadable_faded": this.props.disabled,
},
);
let exploreButton;
if (!this.props.collapsed) {
exploreButton = (
<div className={classNames("mx_LeftPanel_explore", {"mx_LeftPanel_explore_hidden": this.state.searchExpanded})}>
<AccessibleButton onClick={() => dis.fire(Action.ViewRoomDirectory)}>{_t("Explore")}</AccessibleButton>
</div>
);
}
const searchBox = (<SearchBox
className="mx_LeftPanel_filterRooms"
enableRoomSearchFocus={true}
blurredPlaceholder={ _t('Filter') }
placeholder={ _t('Filter rooms…') }
onKeyDown={this._onFilterKeyDown}
onSearch={ this.onSearch }
onCleared={ this.onSearchCleared }
onFocus={this._onSearchFocus}
onBlur={this._onSearchBlur}
collapsed={this.props.collapsed} />);
let breadcrumbs;
if (this.state.breadcrumbs) {
breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
}
const roomList = <RoomList
onKeyDown={this._onKeyDown}
onFocus={this._onFocus}
onBlur={this._onBlur}
ref={this.collectRoomList}
resizeNotifier={this.props.resizeNotifier}
collapsed={this.props.collapsed}
searchFilter={this.state.searchFilter}
ConferenceHandler={VectorConferenceHandler} />;
return (
<div className={containerClasses}>
{ tagPanelContainer }
<aside className="mx_LeftPanel dark-panel">
<TopLeftMenuButton collapsed={this.props.collapsed} />
{ breadcrumbs }
<CallPreview ConferenceHandler={VectorConferenceHandler} />
<div className="mx_LeftPanel_exploreAndFilterRow" onKeyDown={this._onKeyDown} onFocus={this._onFocus} onBlur={this._onBlur}>
{ exploreButton }
{ searchBox }
</div>
{roomList}
</aside>
</div>
);
},
});
export default LeftPanel;

117
src/components/structures/LeftPanel2.tsx → src/components/structures/LeftPanel.tsx
View file

@ -17,25 +17,26 @@ limitations under the License.
import * as React from "react";
import { createRef } from "react";
import TagPanel from "./TagPanel";
import CustomRoomTagPanel from "./CustomRoomTagPanel";
import classNames from "classnames";
import dis from "../../dispatcher/dispatcher";
import { _t } from "../../languageHandler";
import RoomList2 from "../views/rooms/RoomList2";
import { HEADER_HEIGHT } from "../views/rooms/RoomSublist2";
import RoomList from "../views/rooms/RoomList";
import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
import { Action } from "../../dispatcher/actions";
import UserMenu from "./UserMenu";
import RoomSearch from "./RoomSearch";
import AccessibleButton from "../views/elements/AccessibleButton";
import RoomBreadcrumbs2 from "../views/rooms/RoomBreadcrumbs2";
import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
import { UPDATE_EVENT } from "../../stores/AsyncStore";
import ResizeNotifier from "../../utils/ResizeNotifier";
import SettingsStore from "../../settings/SettingsStore";
import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore2";
import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
import {Key} from "../../Keyboard";
import IndicatorScrollbar from "../structures/IndicatorScrollbar";
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import { OwnProfileStore } from "../../stores/OwnProfileStore";
import { MatrixClientPeg } from "../../MatrixClientPeg";
interface IProps {
isMinimized: boolean;
@ -52,14 +53,15 @@ interface IState {
const cssClasses = [
"mx_RoomSearch_input",
"mx_RoomSearch_icon", // minimized <RoomSearch />
"mx_RoomSublist2_headerText",
"mx_RoomTile2",
"mx_RoomSublist2_showNButton",
"mx_RoomSublist_headerText",
"mx_RoomTile",
"mx_RoomSublist_showNButton",
];
export default class LeftPanel2 extends React.Component<IProps, IState> {
export default class LeftPanel extends React.Component<IProps, IState> {
private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
private tagPanelWatcherRef: string;
private bgImageWatcherRef: string;
private focusedElement = null;
private isDoingStickyHeaders = false;
@ -74,6 +76,9 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate);
this.bgImageWatcherRef = SettingsStore.watchSetting(
"RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
this.tagPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
this.setState({showTagPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
});
@ -85,8 +90,10 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
public componentWillUnmount() {
SettingsStore.unwatchSetting(this.tagPanelWatcherRef);
SettingsStore.unwatchSetting(this.bgImageWatcherRef);
BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate);
this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
}
@ -109,6 +116,20 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
}
};
private onBackgroundImageUpdate = () => {
// Note: we do this in the LeftPanel as it uses this variable most prominently.
const avatarSize = 32; // arbitrary
let avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
const settingBgMxc = SettingsStore.getValue("RoomList.backgroundImage");
if (settingBgMxc) {
avatarUrl = MatrixClientPeg.get().mxcUrlToHttp(settingBgMxc, avatarSize, avatarSize);
}
const avatarUrlProp = `url(${avatarUrl})`;
if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
document.body.style.setProperty("--avatar-url", avatarUrlProp);
}
};
private handleStickyHeaders(list: HTMLDivElement) {
if (this.isDoingStickyHeaders) return;
this.isDoingStickyHeaders = true;
@ -121,7 +142,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
private doStickyHeaders(list: HTMLDivElement) {
const topEdge = list.scrollTop;
const bottomEdge = list.offsetHeight + list.scrollTop;
const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist2");
const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist");
const headerRightMargin = 16; // calculated from margins and widths to align with non-sticky tiles
const headerStickyWidth = list.clientWidth - headerRightMargin;
@ -137,7 +158,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
let lastTopHeader;
let firstBottomHeader;
for (const sublist of sublists) {
const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist2_stickable");
const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist_stickable");
header.style.removeProperty("display"); // always clear display:none first
// When an element is <=40% off screen, make it take over
@ -173,8 +194,8 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
}
if (style.stickyTop) {
if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
header.classList.add("mx_RoomSublist2_headerContainer_stickyTop");
if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) {
header.classList.add("mx_RoomSublist_headerContainer_stickyTop");
}
const newTop = `${list.parentElement.offsetTop}px`;
@ -182,8 +203,8 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
header.style.top = newTop;
}
} else {
if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop");
if (header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) {
header.classList.remove("mx_RoomSublist_headerContainer_stickyTop");
}
if (header.style.top) {
header.style.removeProperty('top');
@ -191,18 +212,18 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
}
if (style.stickyBottom) {
if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom");
if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
header.classList.add("mx_RoomSublist_headerContainer_stickyBottom");
}
} else {
if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom");
if (header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
header.classList.remove("mx_RoomSublist_headerContainer_stickyBottom");
}
}
if (style.stickyTop || style.stickyBottom) {
if (!header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
header.classList.add("mx_RoomSublist2_headerContainer_sticky");
if (!header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
header.classList.add("mx_RoomSublist_headerContainer_sticky");
}
const newWidth = `${headerStickyWidth}px`;
@ -210,8 +231,8 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
header.style.width = newWidth;
}
} else if (!style.stickyTop && !style.stickyBottom) {
if (header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
header.classList.remove("mx_RoomSublist2_headerContainer_sticky");
if (header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
header.classList.remove("mx_RoomSublist_headerContainer_sticky");
}
if (header.style.width) {
header.style.removeProperty('width');
@ -221,16 +242,16 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
// add appropriate sticky classes to wrapper so it has
// the necessary top/bottom padding to put the sticky header in
const listWrapper = list.parentElement; // .mx_LeftPanel2_roomListWrapper
const listWrapper = list.parentElement; // .mx_LeftPanel_roomListWrapper
if (lastTopHeader) {
listWrapper.classList.add("mx_LeftPanel2_roomListWrapper_stickyTop");
listWrapper.classList.add("mx_LeftPanel_roomListWrapper_stickyTop");
} else {
listWrapper.classList.remove("mx_LeftPanel2_roomListWrapper_stickyTop");
listWrapper.classList.remove("mx_LeftPanel_roomListWrapper_stickyTop");
}
if (firstBottomHeader) {
listWrapper.classList.add("mx_LeftPanel2_roomListWrapper_stickyBottom");
listWrapper.classList.add("mx_LeftPanel_roomListWrapper_stickyBottom");
} else {
listWrapper.classList.remove("mx_LeftPanel2_roomListWrapper_stickyBottom");
listWrapper.classList.remove("mx_LeftPanel_roomListWrapper_stickyBottom");
}
}
@ -266,10 +287,10 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
};
private onEnter = () => {
const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile2");
const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile");
if (firstRoom) {
firstRoom.click();
this.onSearch(""); // clear the search field
return true; // to get the field to clear
}
};
@ -314,7 +335,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
private renderHeader(): React.ReactNode {
return (
<div className="mx_LeftPanel2_userHeader">
<div className="mx_LeftPanel_userHeader">
<UserMenu isMinimized={this.props.isMinimized} />
</div>
);
@ -324,10 +345,13 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
if (this.state.showBreadcrumbs && !this.props.isMinimized) {
return (
<IndicatorScrollbar
className="mx_LeftPanel2_breadcrumbsContainer mx_AutoHideScrollbar"
className="mx_LeftPanel_breadcrumbsContainer mx_AutoHideScrollbar"
verticalScrollsHorizontally={true}
// Firefox sometimes makes this element focusable due to
// overflow:scroll;, so force it out of tab order.
tabIndex={-1}
>
<RoomBreadcrumbs2 />
<RoomBreadcrumbs />
</IndicatorScrollbar>
);
}
@ -336,7 +360,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
private renderSearchExplore(): React.ReactNode {
return (
<div
className="mx_LeftPanel2_filterContainer"
className="mx_LeftPanel_filterContainer"
onFocus={this.onFocus}
onBlur={this.onBlur}
onKeyDown={this.onKeyDown}
@ -347,8 +371,8 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
onVerticalArrow={this.onKeyDown}
onEnter={this.onEnter}
/>
<AccessibleButton
className="mx_LeftPanel2_exploreButton"
<AccessibleTooltipButton
className="mx_LeftPanel_exploreButton"
onClick={this.onExplore}
title={_t("Explore rooms")}
/>
@ -358,12 +382,13 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
public render(): React.ReactNode {
const tagPanel = !this.state.showTagPanel ? null : (
<div className="mx_LeftPanel2_tagPanelContainer">
<div className="mx_LeftPanel_tagPanelContainer">
<TagPanel/>
{SettingsStore.isFeatureEnabled("feature_custom_tags") ? <CustomRoomTagPanel /> : null}
</div>
);
const roomList = <RoomList2
const roomList = <RoomList
onKeyDown={this.onKeyDown}
resizeNotifier={null}
collapsed={false}
@ -375,24 +400,24 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
/>;
const containerClasses = classNames({
"mx_LeftPanel2": true,
"mx_LeftPanel2_hasTagPanel": !!tagPanel,
"mx_LeftPanel2_minimized": this.props.isMinimized,
"mx_LeftPanel": true,
"mx_LeftPanel_hasTagPanel": !!tagPanel,
"mx_LeftPanel_minimized": this.props.isMinimized,
});
const roomListClasses = classNames(
"mx_LeftPanel2_actualRoomListContainer",
"mx_LeftPanel_actualRoomListContainer",
"mx_AutoHideScrollbar",
);
return (
<div className={containerClasses}>
{tagPanel}
<aside className="mx_LeftPanel2_roomListContainer">
<aside className="mx_LeftPanel_roomListContainer">
{this.renderHeader()}
{this.renderSearchExplore()}
{this.renderBreadcrumbs()}
<div className="mx_LeftPanel2_roomListWrapper">
<div className="mx_LeftPanel_roomListWrapper">
<div
className={roomListClasses}
onScroll={this.onScroll}

26
src/components/structures/LoggedInView.tsx
View file

@ -40,7 +40,6 @@ import * as KeyboardShortcuts from "../../accessibility/KeyboardShortcuts";
import HomePage from "./HomePage";
import ResizeNotifier from "../../utils/ResizeNotifier";
import PlatformPeg from "../../PlatformPeg";
import { RoomListStoreTempProxy } from "../../stores/room-list/RoomListStoreTempProxy";
import { DefaultTagID } from "../../stores/room-list/models";
import {
showToast as showSetPasswordToast,
@ -51,9 +50,10 @@ import {
hideToast as hideServerLimitToast
} from "../../toasts/ServerLimitToast";
import { Action } from "../../dispatcher/actions";
import LeftPanel2 from "./LeftPanel2";
import LeftPanel from "./LeftPanel";
import CallContainer from '../views/voip/CallContainer';
import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload";
import RoomListStore from "../../stores/room-list/RoomListStore";
// We need to fetch each pinned message individually (if we don't already have it)
// so each pinned message may trigger a request. Limit the number per room for sanity.
@ -308,8 +308,8 @@ class LoggedInView extends React.Component<IProps, IState> {
};
onRoomStateEvents = (ev, state) => {
const roomLists = RoomListStoreTempProxy.getRoomLists();
if (roomLists[DefaultTagID.ServerNotice] && roomLists[DefaultTagID.ServerNotice].some(r => r.roomId === ev.getRoomId())) {
const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
if (serverNoticeList && serverNoticeList.some(r => r.roomId === ev.getRoomId())) {
this._updateServerNoticeEvents();
}
};
@ -328,11 +328,11 @@ class LoggedInView extends React.Component<IProps, IState> {
}
_updateServerNoticeEvents = async () => {
const roomLists = RoomListStoreTempProxy.getRoomLists();
if (!roomLists[DefaultTagID.ServerNotice]) return [];
const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
if (!serverNoticeList) return [];
const events = [];
for (const room of roomLists[DefaultTagID.ServerNotice]) {
for (const room of serverNoticeList) {
const pinStateEvent = room.currentState.getStateEvents("m.room.pinned_events", "");
if (!pinStateEvent || !pinStateEvent.getContent().pinned) continue;
@ -607,7 +607,6 @@ class LoggedInView extends React.Component<IProps, IState> {
};
render() {
const LeftPanel = sdk.getComponent('structures.LeftPanel');
const RoomView = sdk.getComponent('structures.RoomView');
const UserView = sdk.getComponent('structures.UserView');
const GroupView = sdk.getComponent('structures.GroupView');
@ -661,21 +660,12 @@ class LoggedInView extends React.Component<IProps, IState> {
bodyClasses += ' mx_MatrixChat_useCompactLayout';
}
let leftPanel = (
const leftPanel = (
<LeftPanel
resizeNotifier={this.props.resizeNotifier}
collapsed={this.props.collapseLhs || false}
disabled={this.props.leftDisabled}
/>
);
if (SettingsStore.getValue("feature_new_room_list")) {
leftPanel = (
<LeftPanel2
isMinimized={this.props.collapseLhs || false}
resizeNotifier={this.props.resizeNotifier}
/>
);
}
return (
<MatrixClientContext.Provider value={this._matrixClient}>

17
src/components/structures/MatrixChat.tsx
View file

@ -58,7 +58,6 @@ import { messageForSyncError } from '../../utils/ErrorUtils';
import ResizeNotifier from "../../utils/ResizeNotifier";
import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../utils/AutoDiscoveryUtils";
import DMRoomMap from '../../utils/DMRoomMap';
import { countRoomsWithNotif } from '../../RoomNotifs';
import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
import { FontWatcher } from '../../settings/watchers/FontWatcher';
import { storeRoomAliasInCache } from '../../RoomAliasCache';
@ -75,6 +74,7 @@ import {
import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast";
import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
import ErrorDialog from "../views/dialogs/ErrorDialog";
import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
/** constants for MatrixChat.state.view */
export enum Views {
@ -675,12 +675,16 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
case 'hide_left_panel':
this.setState({
collapseLhs: true,
}, () => {
this.state.resizeNotifier.notifyLeftHandleResized();
});
break;
case 'focus_room_filter': // for CtrlOrCmd+K to work by expanding the left panel first
case 'show_left_panel':
this.setState({
collapseLhs: false,
}, () => {
this.state.resizeNotifier.notifyLeftHandleResized();
});
break;
case 'panel_disable': {
@ -1840,21 +1844,20 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
}
updateStatusIndicator(state: string, prevState: string) {
// only count visible rooms to not torment the user with notification counts in rooms they can't see
// it will include highlights from the previous version of the room internally
const notifCount = countRoomsWithNotif(MatrixClientPeg.get().getVisibleRooms()).count;
const notificationState = RoomNotificationStateStore.instance.globalState;
const numUnreadRooms = notificationState.numUnreadStates; // we know that states === rooms here
if (PlatformPeg.get()) {
PlatformPeg.get().setErrorStatus(state === 'ERROR');
PlatformPeg.get().setNotificationCount(notifCount);
PlatformPeg.get().setNotificationCount(numUnreadRooms);
}
this.subTitleStatus = '';
if (state === "ERROR") {
this.subTitleStatus += `[${_t("Offline")}] `;
}
if (notifCount > 0) {
this.subTitleStatus += `[${notifCount}]`;
if (numUnreadRooms > 0) {
this.subTitleStatus += `[${numUnreadRooms}]`;
}
this.setPageSubtitle();

12
src/components/structures/RoomSearch.tsx
View file

@ -28,8 +28,8 @@ import { Action } from "../../dispatcher/actions";
interface IProps {
onQueryUpdate: (newQuery: string) => void;
isMinimized: boolean;
onVerticalArrow(ev: React.KeyboardEvent);
onEnter(ev: React.KeyboardEvent);
onVerticalArrow(ev: React.KeyboardEvent): void;
onEnter(ev: React.KeyboardEvent): boolean;
}
interface IState {
@ -107,7 +107,13 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
} else if (ev.key === Key.ARROW_UP || ev.key === Key.ARROW_DOWN) {
this.props.onVerticalArrow(ev);
} else if (ev.key === Key.ENTER) {
this.props.onEnter(ev);
const shouldClear = this.props.onEnter(ev);
if (shouldClear) {
// wrap in set immediate to delay it so that we don't clear the filter & then change room
setImmediate(() => {
this.clearInput();
});
}
}
};

496
src/components/structures/RoomSubList.js
View file

@ -1,496 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2018, 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, {createRef} from 'react';
import classNames from 'classnames';
import * as sdk from '../../index';
import dis from '../../dispatcher/dispatcher';
import * as Unread from '../../Unread';
import * as RoomNotifs from '../../RoomNotifs';
import * as FormattingUtils from '../../utils/FormattingUtils';
import IndicatorScrollbar from './IndicatorScrollbar';
import {Key} from '../../Keyboard';
import { Group } from 'matrix-js-sdk';
import PropTypes from 'prop-types';
import RoomTile from "../views/rooms/RoomTile";
import LazyRenderList from "../views/elements/LazyRenderList";
import {_t} from "../../languageHandler";
import {RovingTabIndexWrapper} from "../../accessibility/RovingTabIndex";
import {toPx} from "../../utils/units";
// turn this on for drop & drag console debugging galore
const debug = false;
class RoomTileErrorBoundary extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
error: null,
};
}
static getDerivedStateFromError(error) {
// Side effects are not permitted here, so we only update the state so
// that the next render shows an error message.
return { error };
}
componentDidCatch(error, { componentStack }) {
// Browser consoles are better at formatting output when native errors are passed
// in their own `console.error` invocation.
console.error(error);
console.error(
"The above error occured while React was rendering the following components:",
componentStack,
);
}
render() {
if (this.state.error) {
return (<div className="mx_RoomTile mx_RoomTileError">
{this.props.roomId}
</div>);
} else {
return this.props.children;
}
}
}
export default class RoomSubList extends React.PureComponent {
static displayName = 'RoomSubList';
static debug = debug;
static propTypes = {
list: PropTypes.arrayOf(PropTypes.object).isRequired,
label: PropTypes.string.isRequired,
tagName: PropTypes.string,
addRoomLabel: PropTypes.string,
// passed through to RoomTile and used to highlight room with `!` regardless of notifications count
isInvite: PropTypes.bool,
startAsHidden: PropTypes.bool,
showSpinner: PropTypes.bool, // true to show a spinner if 0 elements when expanded
collapsed: PropTypes.bool.isRequired, // is LeftPanel collapsed?
onHeaderClick: PropTypes.func,
incomingCall: PropTypes.object,
extraTiles: PropTypes.arrayOf(PropTypes.node), // extra elements added beneath tiles
forceExpand: PropTypes.bool,
};
static defaultProps = {
onHeaderClick: function() {
}, // NOP
extraTiles: [],
isInvite: false,
};
static getDerivedStateFromProps(props, state) {
return {
listLength: props.list.length,
scrollTop: props.list.length === state.listLength ? state.scrollTop : 0,
};
}
constructor(props) {
super(props);
this.state = {
hidden: this.props.startAsHidden || false,
// some values to get LazyRenderList starting
scrollerHeight: 800,
scrollTop: 0,
// React 16's getDerivedStateFromProps(props, state) doesn't give the previous props so
// we have to store the length of the list here so we can see if it's changed or not...
listLength: null,
};
this._header = createRef();
this._subList = createRef();
this._scroller = createRef();
this._headerButton = createRef();
}
componentDidMount() {
this.dispatcherRef = dis.register(this.onAction);
}
componentWillUnmount() {
dis.unregister(this.dispatcherRef);
}
// The header is collapsible if it is hidden or not stuck
// The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
isCollapsibleOnClick() {
const stuck = this._header.current.dataset.stuck;
if (!this.props.forceExpand && (this.state.hidden || stuck === undefined || stuck === "none")) {
return true;
} else {
return false;
}
}
onAction = (payload) => {
switch (payload.action) {
case 'on_room_read':
// XXX: Previously RoomList would forceUpdate whenever on_room_read is dispatched,
// but this is no longer true, so we must do it here (and can apply the small
// optimisation of checking that we care about the room being read).
//
// Ultimately we need to transition to a state pushing flow where something
// explicitly notifies the components concerned that the notif count for a room
// has change (e.g. a Flux store).
if (this.props.list.some((r) => r.roomId === payload.roomId)) {
this.forceUpdate();
}
break;
case 'view_room':
if (this.state.hidden && !this.props.forceExpand && payload.show_room_tile &&
this.props.list.some((r) => r.roomId === payload.room_id)
) {
this.toggle();
}
}
};
toggle = () => {
if (this.isCollapsibleOnClick()) {
// The header isCollapsible, so the click is to be interpreted as collapse and truncation logic
const isHidden = !this.state.hidden;
this.setState({hidden: isHidden}, () => {
this.props.onHeaderClick(isHidden);
});
} else {
// The header is stuck, so the click is to be interpreted as a scroll to the header
this.props.onHeaderClick(this.state.hidden, this._header.current.dataset.originalPosition);
}
};
onClick = (ev) => {
this.toggle();
};
onHeaderKeyDown = (ev) => {
switch (ev.key) {
case Key.ARROW_LEFT:
// On ARROW_LEFT collapse the room sublist
if (!this.state.hidden && !this.props.forceExpand) {
this.onClick();
}
ev.stopPropagation();
break;
case Key.ARROW_RIGHT: {
ev.stopPropagation();
if (this.state.hidden && !this.props.forceExpand) {
// sublist is collapsed, expand it
this.onClick();
} else if (!this.props.forceExpand) {
// sublist is expanded, go to first room
const element = this._subList.current && this._subList.current.querySelector(".mx_RoomTile");
if (element) {
element.focus();
}
}
break;
}
}
};
onKeyDown = (ev) => {
switch (ev.key) {
// On ARROW_LEFT go to the sublist header
case Key.ARROW_LEFT:
ev.stopPropagation();
this._headerButton.current.focus();
break;
// Consume ARROW_RIGHT so it doesn't cause focus to get sent to composer
case Key.ARROW_RIGHT:
ev.stopPropagation();
}
};
onRoomTileClick = (roomId, ev) => {
dis.dispatch({
action: 'view_room',
show_room_tile: true, // to make sure the room gets scrolled into view
room_id: roomId,
clear_search: (ev && (ev.key === Key.ENTER || ev.key === Key.SPACE)),
});
};
_updateSubListCount = () => {
// Force an update by setting the state to the current state
// Doing it this way rather than using forceUpdate(), so that the shouldComponentUpdate()
// method is honoured
this.setState(this.state);
};
makeRoomTile = (room) => {
return <RoomTileErrorBoundary roomId={room.roomId}><RoomTile
room={room}
roomSubList={this}
tagName={this.props.tagName}
key={room.roomId}
collapsed={this.props.collapsed || false}
unread={Unread.doesRoomHaveUnreadMessages(room)}
highlight={this.props.isInvite || RoomNotifs.getUnreadNotificationCount(room, 'highlight') > 0}
notificationCount={RoomNotifs.getUnreadNotificationCount(room)}
isInvite={this.props.isInvite}
refreshSubList={this._updateSubListCount}
incomingCall={null}
onClick={this.onRoomTileClick}
/></RoomTileErrorBoundary>;
};
_onNotifBadgeClick = (e) => {
// prevent the roomsublist collapsing
e.preventDefault();
e.stopPropagation();
const room = this.props.list.find(room => RoomNotifs.getRoomHasBadge(room));
if (room) {
dis.dispatch({
action: 'view_room',
room_id: room.roomId,
});
}
};
_onInviteBadgeClick = (e) => {
// prevent the roomsublist collapsing
e.preventDefault();
e.stopPropagation();
// switch to first room in sortedList as that'll be the top of the list for the user
if (this.props.list && this.props.list.length > 0) {
dis.dispatch({
action: 'view_room',
room_id: this.props.list[0].roomId,
});
} else if (this.props.extraTiles && this.props.extraTiles.length > 0) {
// Group Invites are different in that they are all extra tiles and not rooms
// XXX: this is a horrible special case because Group Invite sublist is a hack
if (this.props.extraTiles[0].props && this.props.extraTiles[0].props.group instanceof Group) {
dis.dispatch({
action: 'view_group',
group_id: this.props.extraTiles[0].props.group.groupId,
});
}
}
};
onAddRoom = (e) => {
e.stopPropagation();
if (this.props.onAddRoom) this.props.onAddRoom();
};
_getHeaderJsx(isCollapsed) {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const AccessibleTooltipButton = sdk.getComponent('elements.AccessibleTooltipButton');
const subListNotifications = !this.props.isInvite ?
RoomNotifs.aggregateNotificationCount(this.props.list) :
{count: 0, highlight: true};
const subListNotifCount = subListNotifications.count;
const subListNotifHighlight = subListNotifications.highlight;
// When collapsed, allow a long hover on the header to show user
// the full tag name and room count
let title;
if (this.props.collapsed) {
title = this.props.label;
}
let incomingCall;
if (this.props.incomingCall) {
// We can assume that if we have an incoming call then it is for this list
const IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
incomingCall =
<IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={this.props.incomingCall} />;
}
const len = this.props.list.length + this.props.extraTiles.length;
let chevron;
if (len) {
const chevronClasses = classNames({
'mx_RoomSubList_chevron': true,
'mx_RoomSubList_chevronRight': isCollapsed,
'mx_RoomSubList_chevronDown': !isCollapsed,
});
chevron = (<div className={chevronClasses} />);
}
return <RovingTabIndexWrapper inputRef={this._headerButton}>
{({onFocus, isActive, ref}) => {
const tabIndex = isActive ? 0 : -1;
let badge;
if (!this.props.collapsed) {
const badgeClasses = classNames({
'mx_RoomSubList_badge': true,
'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
});
// Wrap the contents in a div and apply styles to the child div so that the browser default outline works
if (subListNotifCount > 0) {
badge = (
<AccessibleButton
tabIndex={tabIndex}
className={badgeClasses}
onClick={this._onNotifBadgeClick}
aria-label={_t("Jump to first unread room.")}
>
<div>
{ FormattingUtils.formatCount(subListNotifCount) }
</div>
</AccessibleButton>
);
} else if (this.props.isInvite && this.props.list.length) {
// no notifications but highlight anyway because this is an invite badge
badge = (
<AccessibleButton
tabIndex={tabIndex}
className={badgeClasses}
onClick={this._onInviteBadgeClick}
aria-label={_t("Jump to first invite.")}
>
<div>
{ this.props.list.length }
</div>
</AccessibleButton>
);
}
}
let addRoomButton;
if (this.props.onAddRoom) {
addRoomButton = (
<AccessibleTooltipButton
tabIndex={tabIndex}
onClick={this.onAddRoom}
className="mx_RoomSubList_addRoom"
title={this.props.addRoomLabel || _t("Add room")}
/>
);
}
return (
<div className="mx_RoomSubList_labelContainer" title={title} ref={this._header} onKeyDown={this.onHeaderKeyDown}>
<AccessibleButton
onFocus={onFocus}
tabIndex={tabIndex}
inputRef={ref}
onClick={this.onClick}
className="mx_RoomSubList_label"
aria-expanded={!isCollapsed}
role="treeitem"
aria-level="1"
>
{ chevron }
<span>{this.props.label}</span>
{ incomingCall }
</AccessibleButton>
{ badge }
{ addRoomButton }
</div>
);
} }
</RovingTabIndexWrapper>;
}
checkOverflow = () => {
if (this._scroller.current) {
this._scroller.current.checkOverflow();
}
};
setHeight = (height) => {
if (this._subList.current) {
this._subList.current.style.height = toPx(height);
}
this._updateLazyRenderHeight(height);
};
_updateLazyRenderHeight(height) {
this.setState({scrollerHeight: height});
}
_onScroll = () => {
this.setState({scrollTop: this._scroller.current.getScrollTop()});
};
_canUseLazyListRendering() {
// for now disable lazy rendering as they are already rendered tiles
// not rooms like props.list we pass to LazyRenderList
return !this.props.extraTiles || !this.props.extraTiles.length;
}
render() {
const len = this.props.list.length + this.props.extraTiles.length;
const isCollapsed = this.state.hidden && !this.props.forceExpand;
const subListClasses = classNames({
"mx_RoomSubList": true,
"mx_RoomSubList_hidden": len && isCollapsed,
"mx_RoomSubList_nonEmpty": len && !isCollapsed,
});
let content;
if (len) {
if (isCollapsed) {
// no body
} else if (this._canUseLazyListRendering()) {
content = (
<IndicatorScrollbar ref={this._scroller} className="mx_RoomSubList_scroll" onScroll={this._onScroll}>
<LazyRenderList
scrollTop={this.state.scrollTop }
height={ this.state.scrollerHeight }
renderItem={ this.makeRoomTile }
itemHeight={34}
items={ this.props.list } />
</IndicatorScrollbar>
);
} else {
const roomTiles = this.props.list.map(r => this.makeRoomTile(r));
const tiles = roomTiles.concat(this.props.extraTiles);
content = (
<IndicatorScrollbar ref={this._scroller} className="mx_RoomSubList_scroll" onScroll={this._onScroll}>
{ tiles }
</IndicatorScrollbar>
);
}
} else {
if (this.props.showSpinner && !isCollapsed) {
const Loader = sdk.getComponent("elements.Spinner");
content = <Loader />;
}
}
return (
<div
ref={this._subList}
className={subListClasses}
role="group"
aria-label={this.props.label}
onKeyDown={this.onKeyDown}
>
{ this._getHeaderJsx(isCollapsed) }
{ content }
</div>
);
}
}

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