Merge branch 'develop' into dbkr/stateafter

This commit is contained in:
Michael Telatynski 2024-11-20 13:13:11 +00:00 committed by GitHub
commit 2dffadc92e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
337 changed files with 4399 additions and 3407 deletions

View file

@ -1,60 +0,0 @@
module.exports = {
plugins: ["matrix-org"],
extends: ["./.eslintrc.js"],
parserOptions: {
project: ["./tsconfig.module_system.json"],
},
overrides: [
{
files: ["module_system/**/*.{ts,tsx}"],
extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
// NOTE: These rules are frozen and new rules should not be added here.
// New changes belong in https://github.com/matrix-org/eslint-plugin-matrix-org/
rules: {
// Things we do that break the ideal style
"prefer-promise-reject-errors": "off",
"quotes": "off",
// We disable this while we're transitioning
"@typescript-eslint/no-explicit-any": "off",
// We're okay with assertion errors when we ask for them
"@typescript-eslint/no-non-null-assertion": "off",
// Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
"no-restricted-imports": [
"error",
{
paths: [
{
name: "matrix-js-sdk",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src/",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src/index",
message: "Please use matrix-js-sdk/src/matrix instead",
},
],
patterns: [
{
group: ["matrix-js-sdk/lib", "matrix-js-sdk/lib/", "matrix-js-sdk/lib/**"],
message: "Please use matrix-js-sdk/src/* instead",
},
],
},
],
},
},
],
};

View file

@ -117,10 +117,6 @@ module.exports = {
"!matrix-js-sdk/src/extensible_events_v1/PollResponseEvent",
"!matrix-js-sdk/src/extensible_events_v1/PollEndEvent",
"!matrix-js-sdk/src/extensible_events_v1/InvalidEventError",
"!matrix-js-sdk/src/crypto",
"!matrix-js-sdk/src/crypto/keybackup",
"!matrix-js-sdk/src/crypto/deviceinfo",
"!matrix-js-sdk/src/crypto/dehydration",
"!matrix-js-sdk/src/oidc",
"!matrix-js-sdk/src/oidc/discovery",
"!matrix-js-sdk/src/oidc/authorize",
@ -270,6 +266,60 @@ module.exports = {
"react-hooks/rules-of-hooks": ["off"],
},
},
{
files: ["module_system/**/*.{ts,tsx}"],
parserOptions: {
project: ["./tsconfig.module_system.json"],
},
extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
// NOTE: These rules are frozen and new rules should not be added here.
// New changes belong in https://github.com/matrix-org/eslint-plugin-matrix-org/
rules: {
// Things we do that break the ideal style
"prefer-promise-reject-errors": "off",
"quotes": "off",
// We disable this while we're transitioning
"@typescript-eslint/no-explicit-any": "off",
// We're okay with assertion errors when we ask for them
"@typescript-eslint/no-non-null-assertion": "off",
// Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
"no-restricted-imports": [
"error",
{
paths: [
{
name: "matrix-js-sdk",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src/",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src/index",
message: "Please use matrix-js-sdk/src/matrix instead",
},
],
patterns: [
{
group: ["matrix-js-sdk/lib", "matrix-js-sdk/lib/", "matrix-js-sdk/lib/**"],
message: "Please use matrix-js-sdk/src/* instead",
},
],
},
],
},
},
],
settings: {
react: {

View file

@ -21,13 +21,13 @@ jobs:
fetch-depth: 0 # needed for docker-package to be able to calculate the version
- name: Install Cosign
uses: sigstore/cosign-installer@4959ce089c160fddf62f7b42464195ba1a56d382 # v3
uses: sigstore/cosign-installer@dc72c7d5c4d10cd6bcb8cf6e3fd625a9e5e537da # v3
- name: Set up QEMU
uses: docker/setup-qemu-action@49b3bc8e6bdd4a60e6116a5414239cba5943d3cf # v3
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@988b5a0280414f521da01fcc63a27aeeb4b104db # v3
uses: docker/setup-buildx-action@c47758b77c9736f4b2ef4073d4d51994fabfe349 # v3
with:
install: true

View file

@ -15,7 +15,7 @@ jobs:
report:
if: github.event.workflow_run.conclusion != 'cancelled'
name: Report results
runs-on: ubuntu-22.04
runs-on: ubuntu-24.04
environment: Netlify
permissions:
statuses: write

View file

@ -36,7 +36,7 @@ env:
jobs:
build:
name: "Build Element-Web"
runs-on: ubuntu-22.04
runs-on: ubuntu-24.04
if: inputs.skip != true
steps:
- name: Checkout code
@ -69,7 +69,6 @@ jobs:
VERSION: "${{ steps.layered_build.outputs.VERSION }}"
run: |
yarn build
echo $VERSION > webapp/version
- name: Upload Artifact
uses: actions/upload-artifact@v4
@ -144,7 +143,7 @@ jobs:
name: end-to-end-tests
needs: playwright
if: always()
runs-on: ubuntu-22.04
runs-on: ubuntu-24.04
steps:
- uses: actions/checkout@v4
if: inputs.skip != true

View file

@ -9,7 +9,7 @@ on:
jobs:
deploy:
if: github.event.workflow_run.conclusion != 'cancelled' && github.event.workflow_run.event == 'pull_request'
runs-on: ubuntu-22.04
runs-on: ubuntu-24.04
environment: Netlify
steps:
- name: 📝 Create Deployment

View file

@ -5,7 +5,7 @@ on:
- cron: "0 6 * * *" # Every day at 6am UTC
jobs:
update:
runs-on: ubuntu-22.04
runs-on: ubuntu-24.04
steps:
- uses: actions/checkout@v4

View file

@ -5,7 +5,7 @@ on:
jobs:
check_base_branch:
name: Check PR base branch
runs-on: ubuntu-22.04
runs-on: ubuntu-24.04
steps:
- uses: actions/github-script@v7
with:

View file

@ -50,7 +50,7 @@ jobs:
rethemendex_lint:
name: "Rethemendex Check"
runs-on: ubuntu-22.04
runs-on: ubuntu-24.04
steps:
- uses: actions/checkout@v4
@ -123,6 +123,12 @@ jobs:
cache: "yarn"
node-version: "lts/*"
- name: Install Deps
run: "yarn install --frozen-lockfile"
- name: Run linter
run: "yarn run lint:knip"
- name: Install Deps
run: "scripts/layered.sh"

View file

@ -29,7 +29,7 @@ env:
jobs:
jest:
name: Jest
runs-on: ubuntu-22.04
runs-on: ubuntu-24.04
strategy:
fail-fast: false
matrix:
@ -93,7 +93,7 @@ jobs:
name: jest-tests
needs: jest
if: always()
runs-on: ubuntu-22.04
runs-on: ubuntu-24.04
steps:
- if: needs.jest.result != 'skipped' && needs.jest.result != 'success'
run: exit 1

View file

@ -2,6 +2,6 @@
"*": "prettier --write",
"src/**/*.(ts|tsx)": ["eslint --fix"],
"scripts/**/*.(ts|tsx)": ["eslint --fix"],
"module_system/**/*.(ts|tsx)": ["eslint --fix --config .eslintrc-module_system.js module_system"],
"module_system/**/*.(ts|tsx)": ["eslint --fix"],
"*.pcss": ["stylelint --fix"]
}

View file

@ -1,7 +1,7 @@
module.exports = {
extends: ["stylelint-config-standard"],
customSyntax: require("postcss-scss"),
plugins: ["stylelint-scss"],
customSyntax: "postcss-scss",
plugins: ["stylelint-scss", "stylelint-value-no-unknown-custom-properties"],
rules: {
"comment-empty-line-before": null,
"declaration-empty-line-before": null,
@ -46,5 +46,33 @@ module.exports = {
"number-max-precision": null,
"no-invalid-double-slash-comments": true,
"media-feature-range-notation": null,
"csstools/value-no-unknown-custom-properties": [
true,
{
importFrom: [
{ from: "res/css/_common.pcss", type: "css" },
{ from: "res/themes/light/css/_light.pcss", type: "css" },
// Right now our styles share vars all over the place, this is not ideal but acceptable for now
{ from: "res/css/views/rooms/_EventTile.pcss", type: "css" },
{ from: "res/css/views/rooms/_IRCLayout.pcss", type: "css" },
{ from: "res/css/views/rooms/_EventBubbleTile.pcss", type: "css" },
{ from: "res/css/views/rooms/_ReadReceiptGroup.pcss", type: "css" },
{ from: "res/css/views/rooms/_EditMessageComposer.pcss", type: "css" },
{ from: "res/css/views/right_panel/_BaseCard.pcss", type: "css" },
{ from: "res/css/views/messages/_MessageTimestamp.pcss", type: "css" },
{ from: "res/css/views/messages/_EventTileBubble.pcss", type: "css" },
{ from: "res/css/views/messages/_MessageActionBar.pcss", type: "css" },
{ from: "res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss", type: "css" },
{ from: "res/css/views/elements/_ToggleSwitch.pcss", type: "css" },
{ from: "res/css/views/settings/tabs/_SettingsTab.pcss", type: "css" },
{ from: "res/css/structures/_RoomView.pcss", type: "css" },
// Compound vars
"node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-base.css",
"node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-semantic.css",
"node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-base-mq.css",
"node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-semantic-mq.css",
],
},
],
},
};

View file

@ -1,3 +1,31 @@
Changes in [1.11.86](https://github.com/element-hq/element-web/releases/tag/v1.11.86) (2024-11-19)
==================================================================================================
## ✨ Features
* Deduplicate icons using Compound Design Tokens ([#28419](https://github.com/element-hq/element-web/pull/28419)). Contributed by @t3chguy.
* Let widget driver send error details ([#28357](https://github.com/element-hq/element-web/pull/28357)). Contributed by @AndrewFerr.
* Deduplicate icons using Compound Design Tokens ([#28381](https://github.com/element-hq/element-web/pull/28381)). Contributed by @t3chguy.
* Auto approvoce `io.element.call.reaction` capability for element call widgets ([#28401](https://github.com/element-hq/element-web/pull/28401)). Contributed by @toger5.
* Show message type prefix in thread root \& reply previews ([#28361](https://github.com/element-hq/element-web/pull/28361)). Contributed by @t3chguy.
* Support sending encrypted to device messages from widgets ([#28315](https://github.com/element-hq/element-web/pull/28315)). Contributed by @hughns.
## 🐛 Bug Fixes
* Feed events to widgets as they are decrypted (even if out of order) ([#28376](https://github.com/element-hq/element-web/pull/28376)). Contributed by @robintown.
* Handle authenticated media when downloading from ImageView ([#28379](https://github.com/element-hq/element-web/pull/28379)). Contributed by @t3chguy.
* Ignore `m.3pid_changes` for Identity service 3PID changes ([#28375](https://github.com/element-hq/element-web/pull/28375)). Contributed by @t3chguy.
* Fix markdown escaping wrongly passing html through ([#28363](https://github.com/element-hq/element-web/pull/28363)). Contributed by @t3chguy.
* Remove "Upgrade your encryption" flow in `CreateSecretStorageDialog` ([#28290](https://github.com/element-hq/element-web/pull/28290)). Contributed by @florianduros.
Changes in [1.11.85](https://github.com/element-hq/element-web/releases/tag/v1.11.85) (2024-11-12)
==================================================================================================
# Security
- Fixes for [CVE-2024-51750](https://www.cve.org/CVERecord?id=CVE-2024-51750) / [GHSA-w36j-v56h-q9pc](https://github.com/element-hq/element-web/security/advisories/GHSA-w36j-v56h-q9pc)
- Fixes for [CVE-2024-51749](https://www.cve.org/CVERecord?id=CVE-2024-51749) / [GHSA-5486-384g-mcx2](https://github.com/element-hq/element-web/security/advisories/GHSA-5486-384g-mcx2)
- Update JS SDK with the fixes for [CVE-2024-50336](https://www.cve.org/CVERecord?id=CVE-2024-50336) / [GHSA-xvg8-m4x3-w6xr](https://github.com/matrix-org/matrix-js-sdk/security/advisories/GHSA-xvg8-m4x3-w6xr)
Changes in [1.11.84](https://github.com/element-hq/element-web/releases/tag/v1.11.84) (2024-11-05)
==================================================================================================
## ✨ Features

View file

@ -38,7 +38,7 @@ const config: Config = {
"recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
"^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
},
transformIgnorePatterns: ["/node_modules/(?!matrix-js-sdk).+$"],
transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk)).+$"],
collectCoverageFrom: [
"<rootDir>/src/**/*.{js,ts,tsx}",
// getSessionLock is piped into a different JS context via stringification, and the coverage functionality is

53
knip.ts Normal file
View file

@ -0,0 +1,53 @@
import { KnipConfig } from "knip";
export default {
entry: [
"src/vector/index.ts",
"src/serviceworker/index.ts",
"src/workers/*.worker.ts",
"src/utils/exportUtils/exportJS.js",
"scripts/**",
"playwright/**",
"test/**",
"res/decoder-ring/**",
],
project: ["**/*.{js,ts,jsx,tsx}"],
ignore: [
"docs/**",
"res/jitsi_external_api.min.js",
// Used by jest
"__mocks__/maplibre-gl.js",
// Keep for now
"src/hooks/useLocalStorageState.ts",
"src/components/views/elements/InfoTooltip.tsx",
"src/components/views/elements/StyledCheckbox.tsx",
],
ignoreDependencies: [
// Required for `action-validator`
"@action-validator/*",
// Used for git pre-commit hooks
"husky",
// Used by jest
"babel-jest",
// Used by babel
"@babel/runtime",
"@babel/plugin-transform-class-properties",
// Referenced in PCSS
"github-markdown-css",
// False positive
"sw.js",
// Used by webpack
"buffer",
"process",
"util",
// Used by workflows
"ts-prune",
// Required due to bug in bloom-filters https://github.com/Callidon/bloom-filters/issues/75
"@types/seedrandom",
],
ignoreBinaries: [
// Used in scripts & workflows
"jq",
],
ignoreExportsUsedInFile: true,
} satisfies KnipConfig;

View file

@ -1,6 +1,6 @@
{
"name": "element-web",
"version": "1.11.84",
"version": "1.11.86",
"description": "A feature-rich client for Matrix.org",
"author": "New Vector Ltd.",
"repository": {
@ -35,7 +35,7 @@
"i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
"i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && yarn i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
"make-component": "node scripts/make-react-component.js",
"rethemendex": "res/css/rethemendex.sh",
"rethemendex": "./res/css/rethemendex.sh",
"clean": "rimraf lib webapp",
"build": "yarn clean && yarn build:genfiles && yarn build:bundle",
"build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats",
@ -45,23 +45,20 @@
"build:bundle": "webpack --progress --mode production",
"build:bundle-stats": "webpack --progress --mode production --json > webpack-stats.json",
"build:module_system": "ts-node --project ./tsconfig.module_system.json module_system/scripts/install.ts",
"dist": "scripts/package.sh",
"dist": "./scripts/package.sh",
"start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n modules,res \"yarn build:module_system\" \"yarn build:res\" && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"",
"start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --server-type https\"",
"start:res": "ts-node scripts/copy-res.ts -w",
"start:js": "webpack serve --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
"lint": "yarn lint:types && yarn lint:js && yarn lint:style && yarn lint:workflows",
"lint:js": "yarn lint:js:src && yarn lint:js:module_system",
"lint:js:src": "eslint --max-warnings 0 src test playwright && prettier --check .",
"lint:js:module_system": "eslint --max-warnings 0 --config .eslintrc-module_system.js module_system",
"lint:js-fix": "yarn lint:js-fix:src && yarn lint:js-fix:module_system",
"lint:js-fix:src": "prettier --log-level=warn --write . && eslint --fix src test playwright",
"lint:js-fix:module_system": "eslint --fix --config .eslintrc-module_system.js module_system",
"lint:js": "eslint --max-warnings 0 src test playwright module_system && prettier --check .",
"lint:js-fix": "prettier --log-level=warn --write . && eslint --fix src test playwright module_system",
"lint:types": "yarn lint:types:src && yarn lint:types:module_system",
"lint:types:src": "tsc --noEmit --jsx react && tsc --noEmit --jsx react -p playwright",
"lint:types:module_system": "tsc --noEmit --project ./tsconfig.module_system.json",
"lint:style": "stylelint \"res/css/**/*.pcss\"",
"lint:workflows": "find .github/workflows -type f \\( -iname '*.yaml' -o -iname '*.yml' \\) | xargs -I {} sh -c 'echo \"Linting {}\"; action-validator \"{}\"'",
"lint:knip": "knip",
"test": "jest",
"test:playwright": "playwright test",
"test:playwright:open": "yarn test:playwright --ui",
@ -74,10 +71,9 @@
"update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
},
"resolutions": {
"@types/seedrandom": "3.0.8",
"oidc-client-ts": "3.1.0",
"jwt-decode": "4.0.0",
"caniuse-lite": "1.0.30001668",
"caniuse-lite": "1.0.30001679",
"wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
"wrap-ansi": "npm:wrap-ansi@^7.0.0"
},
@ -89,14 +85,14 @@
"@matrix-org/react-sdk-module-api": "^2.4.0",
"@matrix-org/spec": "^1.7.0",
"@sentry/browser": "^8.0.0",
"@vector-im/compound-design-tokens": "^1.8.0",
"@vector-im/compound-web": "^7.1.0",
"@vector-im/compound-design-tokens": "^2.0.1",
"@vector-im/compound-web": "^7.3.0",
"@vector-im/matrix-wysiwyg": "2.37.13",
"@zxcvbn-ts/core": "^3.0.4",
"@zxcvbn-ts/language-common": "^3.0.4",
"@zxcvbn-ts/language-en": "^3.0.2",
"await-lock": "^2.1.0",
"bloom-filters": "^3.0.1",
"bloom-filters": "^3.0.3",
"blurhash": "^2.0.3",
"browserslist": "^4.23.2",
"classnames": "^2.2.6",
@ -123,19 +119,20 @@
"linkify-string": "4.1.3",
"linkifyjs": "4.1.3",
"lodash": "^4.17.21",
"maplibre-gl": "^2.0.0",
"maplibre-gl": "^4.0.0",
"matrix-encrypt-attachment": "^1.0.3",
"matrix-events-sdk": "0.0.1",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
"matrix-widget-api": "^1.9.0",
"matrix-widget-api": "^1.10.0",
"memoize-one": "^6.0.0",
"mime": "^4.0.4",
"oidc-client-ts": "^3.0.1",
"opus-recorder": "^8.0.3",
"pako": "^2.0.3",
"png-chunks-extract": "^1.0.0",
"posthog-js": "1.157.2",
"qrcode": "1.5.4",
"re-resizable": "6.9.17",
"re-resizable": "6.10.1",
"react": "^18.3.1",
"react-beautiful-dnd": "^13.1.0",
"react-blurhash": "^0.3.0",
@ -155,11 +152,9 @@
"@action-validator/cli": "^0.6.0",
"@action-validator/core": "^0.6.0",
"@axe-core/playwright": "^4.8.1",
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/eslint-parser": "^7.12.10",
"@babel/eslint-plugin": "^7.12.10",
"@babel/parser": "^7.12.11",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-class-properties": "^7.12.1",
@ -172,7 +167,6 @@
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@babel/register": "^7.12.10",
"@babel/runtime": "^7.12.5",
"@casualbot/jest-sonar-reporter": "2.2.7",
"@peculiar/webcrypto": "^1.4.3",
@ -186,7 +180,6 @@
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
"@types/commonmark": "^0.27.4",
"@types/content-type": "^1.1.5",
"@types/counterpart": "^0.18.1",
"@types/css-tree": "^2.3.8",
"@types/diff-match-patch": "^1.0.32",
@ -211,15 +204,12 @@
"@types/react-dom": "18.3.1",
"@types/react-transition-group": "^4.4.0",
"@types/sanitize-html": "2.13.0",
"@types/sdp-transform": "^2.4.6",
"@types/seedrandom": "3.0.8",
"@types/semver": "^7.5.8",
"@types/tar-js": "^0.3.5",
"@types/ua-parser-js": "^0.7.36",
"@types/uuid": "^10.0.0",
"@typescript-eslint/eslint-plugin": "^8.0.0",
"@typescript-eslint/parser": "^8.0.0",
"axe-core": "4.10.2",
"babel-jest": "^29.0.0",
"babel-loader": "^9.0.0",
"babel-plugin-jsx-remove-data-test-id": "^3.0.0",
@ -259,14 +249,12 @@
"jest-mock": "^29.6.2",
"jest-raw-loader": "^1.0.1",
"jsqr": "^1.4.0",
"knip": "^5.36.2",
"lint-staged": "^15.0.2",
"mailhog": "^4.16.0",
"matrix-mock-request": "^2.5.0",
"matrix-web-i18n": "^3.2.1",
"mini-css-extract-plugin": "2.9.0",
"minimist": "^1.2.6",
"mkdirp": "^3.0.0",
"mocha-junit-reporter": "^2.2.0",
"modernizr": "^3.12.0",
"node-fetch": "^2.6.7",
"playwright-core": "^1.45.1",
@ -276,7 +264,7 @@
"postcss-import": "16.1.0",
"postcss-loader": "8.1.1",
"postcss-mixins": "^11.0.0",
"postcss-nested": "^6.0.0",
"postcss-nested": "^7.0.0",
"postcss-preset-env": "^10.0.0",
"postcss-scss": "^4.0.4",
"postcss-simple-vars": "^7.0.1",
@ -288,6 +276,7 @@
"stylelint": "^16.1.0",
"stylelint-config-standard": "^36.0.0",
"stylelint-scss": "^6.0.0",
"stylelint-value-no-unknown-custom-properties": "^6.0.1",
"terser-webpack-plugin": "^5.3.9",
"ts-node": "^10.9.1",
"ts-prune": "^0.10.3",
@ -298,6 +287,7 @@
"webpack-bundle-analyzer": "^4.8.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.0.0",
"webpack-version-file-plugin": "^0.5.0",
"yaml": "^2.3.3"
},
"@casualbot/jest-sonar-reporter": {

View file

@ -357,9 +357,9 @@ test.describe("Threads", () => {
await bot.joinRoom(roomId);
await page.goto("/#/room/" + roomId);
// Exclude timestamp, read marker, and mapboxgl-map from snapshots
// Exclude timestamp, read marker, and maplibregl-map from snapshots
const css =
".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .mapboxgl-map { visibility: hidden !important; }";
".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .maplibregl-map { visibility: hidden !important; }";
let locator = page.locator(".mx_RoomView_body");
// User sends message

View file

@ -6,16 +6,22 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import * as fs from "node:fs";
import type { Page } from "@playwright/test";
import { test, expect } from "../../element-web-test";
import { ElementAppPage } from "../../pages/ElementAppPage";
import { Credentials } from "../../plugins/homeserver";
const STICKER_PICKER_WIDGET_ID = "fake-sticker-picker";
const STICKER_PICKER_WIDGET_NAME = "Fake Stickers";
const STICKER_NAME = "Test Sticker";
const ROOM_NAME_1 = "Sticker Test";
const ROOM_NAME_2 = "Sticker Test Two";
const STICKER_MESSAGE = JSON.stringify({
const STICKER_IMAGE = fs.readFileSync("playwright/sample-files/riot.png");
function getStickerMessage(contentUri: string, mimetype: string): string {
return JSON.stringify({
action: "m.sticker",
api: "fromWidget",
data: {
@ -24,14 +30,24 @@ const STICKER_MESSAGE = JSON.stringify({
file: "test.png",
content: {
body: STICKER_NAME,
info: {
h: 480,
mimetype: mimetype,
size: 13818,
w: 480,
},
msgtype: "m.sticker",
url: "mxc://localhost/somewhere",
url: contentUri,
},
},
requestId: "1",
widgetId: STICKER_PICKER_WIDGET_ID,
});
const WIDGET_HTML = `
}
function getWidgetHtml(contentUri: string, mimetype: string) {
const stickerMessage = getStickerMessage(contentUri, mimetype);
return `
<html lang="en">
<head>
<title>Fake Sticker Picker</title>
@ -51,13 +67,13 @@ const WIDGET_HTML = `
<button name="Send" id="sendsticker">Press for sticker</button>
<script>
document.getElementById('sendsticker').onclick = () => {
window.parent.postMessage(${STICKER_MESSAGE}, '*')
window.parent.postMessage(${stickerMessage}, '*')
};
</script>
</body>
</html>
`;
}
async function openStickerPicker(app: ElementAppPage) {
const options = await app.openMessageComposerOptions();
await options.getByRole("menuitem", { name: "Sticker" }).click();
@ -71,7 +87,8 @@ async function sendStickerFromPicker(page: Page) {
await expect(page.locator(".mx_AppTileFullWidth#stickers")).not.toBeVisible();
}
async function expectTimelineSticker(page: Page, roomId: string) {
async function expectTimelineSticker(page: Page, roomId: string, contentUri: string) {
const contentId = contentUri.split("/").slice(-1)[0];
// Make sure it's in the right room
await expect(page.locator(".mx_EventTile_sticker > a")).toHaveAttribute("href", new RegExp(`/${roomId}/`));
@ -80,13 +97,43 @@ async function expectTimelineSticker(page: Page, roomId: string) {
// download URL.
await expect(page.locator(`img[alt="${STICKER_NAME}"]`)).toHaveAttribute(
"src",
new RegExp("/download/localhost/somewhere"),
new RegExp(`/localhost/${contentId}`),
);
}
async function expectFileTile(page: Page, roomId: string, contentUri: string) {
await expect(page.locator(".mx_MFileBody_info_filename")).toContainText(STICKER_NAME);
}
async function setWidgetAccountData(
app: ElementAppPage,
user: Credentials,
stickerPickerUrl: string,
provideCreatorUserId: boolean = true,
) {
await app.client.setAccountData("m.widgets", {
[STICKER_PICKER_WIDGET_ID]: {
content: {
type: "m.stickerpicker",
name: STICKER_PICKER_WIDGET_NAME,
url: stickerPickerUrl,
creatorUserId: provideCreatorUserId ? user.userId : undefined,
},
sender: user.userId,
state_key: STICKER_PICKER_WIDGET_ID,
type: "m.widget",
id: STICKER_PICKER_WIDGET_ID,
},
});
}
test.describe("Stickers", () => {
test.use({
displayName: "Sally",
room: async ({ app }, use) => {
const roomId = await app.client.createRoom({ name: ROOM_NAME_1 });
await use({ roomId });
},
});
// We spin up a web server for the sticker picker so that we're not testing to see if
@ -96,34 +143,19 @@ test.describe("Stickers", () => {
//
// See sendStickerFromPicker() for more detail on iframe comms.
let stickerPickerUrl: string;
test.beforeEach(async ({ webserver }) => {
stickerPickerUrl = webserver.start(WIDGET_HTML);
});
test("should send a sticker to multiple rooms", async ({ page, app, user }) => {
const roomId1 = await app.client.createRoom({ name: ROOM_NAME_1 });
test("should send a sticker to multiple rooms", async ({ webserver, page, app, user, room }) => {
const roomId2 = await app.client.createRoom({ name: ROOM_NAME_2 });
await app.client.setAccountData("m.widgets", {
[STICKER_PICKER_WIDGET_ID]: {
content: {
type: "m.stickerpicker",
name: STICKER_PICKER_WIDGET_NAME,
url: stickerPickerUrl,
creatorUserId: user.userId,
},
sender: user.userId,
state_key: STICKER_PICKER_WIDGET_ID,
type: "m.widget",
id: STICKER_PICKER_WIDGET_ID,
},
});
const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
const widgetHtml = getWidgetHtml(contentUri, "image/png");
stickerPickerUrl = webserver.start(widgetHtml);
setWidgetAccountData(app, user, stickerPickerUrl);
await app.viewRoomByName(ROOM_NAME_1);
await expect(page).toHaveURL(`/#/room/${roomId1}`);
await expect(page).toHaveURL(`/#/room/${room.roomId}`);
await openStickerPicker(app);
await sendStickerFromPicker(page);
await expectTimelineSticker(page, roomId1);
await expectTimelineSticker(page, room.roomId, contentUri);
// Ensure that when we switch to a different room that the sticker
// goes to the right place
@ -131,31 +163,40 @@ test.describe("Stickers", () => {
await expect(page).toHaveURL(`/#/room/${roomId2}`);
await openStickerPicker(app);
await sendStickerFromPicker(page);
await expectTimelineSticker(page, roomId2);
await expectTimelineSticker(page, roomId2, contentUri);
});
test("should handle a sticker picker widget missing creatorUserId", async ({ page, app, user }) => {
const roomId1 = await app.client.createRoom({ name: ROOM_NAME_1 });
await app.client.setAccountData("m.widgets", {
[STICKER_PICKER_WIDGET_ID]: {
content: {
type: "m.stickerpicker",
name: STICKER_PICKER_WIDGET_NAME,
url: stickerPickerUrl,
// No creatorUserId
},
sender: user.userId,
state_key: STICKER_PICKER_WIDGET_ID,
type: "m.widget",
id: STICKER_PICKER_WIDGET_ID,
},
});
test("should handle a sticker picker widget missing creatorUserId", async ({
webserver,
page,
app,
user,
room,
}) => {
const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
const widgetHtml = getWidgetHtml(contentUri, "image/png");
stickerPickerUrl = webserver.start(widgetHtml);
setWidgetAccountData(app, user, stickerPickerUrl, false);
await app.viewRoomByName(ROOM_NAME_1);
await expect(page).toHaveURL(`/#/room/${roomId1}`);
await expect(page).toHaveURL(`/#/room/${room.roomId}`);
await openStickerPicker(app);
await sendStickerFromPicker(page);
await expectTimelineSticker(page, roomId1);
await expectTimelineSticker(page, room.roomId, contentUri);
});
test("should render invalid mimetype as a file", async ({ webserver, page, app, user, room }) => {
const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, {
type: "application/octet-stream",
});
const widgetHtml = getWidgetHtml(contentUri, "application/octet-stream");
stickerPickerUrl = webserver.start(widgetHtml);
setWidgetAccountData(app, user, stickerPickerUrl);
await app.viewRoomByName(ROOM_NAME_1);
await expect(page).toHaveURL(`/#/room/${room.roomId}`);
await openStickerPicker(app);
await sendStickerFromPicker(page);
await expectFileTile(page, room.roomId, contentUri);
});
});

View file

@ -20,7 +20,7 @@ import { randB64Bytes } from "../../utils/rand";
// Docker tag to use for synapse docker image.
// We target a specific digest as every now and then a Synapse update will break our CI.
// This digest is updated by the playwright-image-updates.yaml workflow periodically.
const DOCKER_TAG = "develop@sha256:d1a89bd0fcdc2bf2900dac30696d53bb9e44da1231faacd5c2d3b9f539ce9586";
const DOCKER_TAG = "develop@sha256:f457c57b91bd677e7ebdbc314c8524b1a7b61f8d1d45cccc845b34db226deb01";
async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
const templateDir = path.join(__dirname, "templates", opts.template);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 563 KiB

After

Width:  |  Height:  |  Size: 503 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View file

@ -1,4 +0,0 @@
signing_id: releases@riot.im
subprojects:
matrix-js-sdk:
includeByDefault: false

View file

@ -186,7 +186,7 @@ input[type="search"].mx_textinput_icon {
/* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */
input[type="text"].mx_textinput_icon.mx_textinput_search,
input[type="search"].mx_textinput_icon.mx_textinput_search {
background-image: url("$(res)/img/feather-customised/search-input.svg");
background-image: url("@vector-im/compound-design-tokens/icons/search.svg");
}
/* dont search UI as not all browsers support it, */

View file

@ -11,7 +11,8 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-12px;
width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */
overflow-y: scroll;
.mx_AppPermission_bolder {
.mx_AppPermission_bolder,
.mx_AppPermission_content_bolder {
font-weight: var(--cpd-font-weight-semibold);
}
.mx_AppPermission_content {
@ -21,10 +22,6 @@ Please see LICENSE files in the repository root for full details.
margin-block: 12px;
}
.mx_AppPermission_content_bolder {
font-weight: var(--font-semi-bold);
}
.mx_TextWithTooltip_target--helpIcon {
display: inline-block;
height: $font-14px; /* align with characters on the same line */

View file

@ -53,8 +53,6 @@ Please see LICENSE files in the repository root for full details.
.mx_MapError_icon {
height: var(--mx-map-error-icon-size);
path {
fill: var(--mx-map-error-icon-color);
}
width: var(--mx-map-error-icon-size);
color: var(--mx-map-error-icon-color);
}

View file

@ -32,8 +32,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_DeviceExpandDetailsButton_icon {
height: 16px;
width: 16px;
height: 24px;
width: 24px;
transition: all 0.3s;
transform: var(--icon-transform);

View file

@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
width: 18px;
height: 18px;
background: currentColor;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-size: 100%;
mask-repeat: no-repeat;
float: right;

View file

@ -176,7 +176,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_LeftPanel_recentsButton::before {
mask-image: url("$(res)/img/element-icons/clock.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/time.svg");
}
}

View file

@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
/** Fixme - factor this out with the main header **/
.mx_RightPanel_threadsButton::before {
mask-image: url("$(res)/img/element-icons/room/thread.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/threads-solid.svg");
}
.mx_RightPanel_notifsButton::before {
@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RightPanel_roomSummaryButton::before {
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
}

View file

@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
&::before {
background-color: $info-plinth-fg-color;
mask: url("$(res)/img/feather-customised/search-input.svg");
mask: url("@vector-im/compound-design-tokens/icons/search.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 50px;
@ -207,62 +207,3 @@ Please see LICENSE files in the repository root for full details.
min-height: 42px;
}
}
@keyframes mx_Indicator_pulse {
0% {
transform: scale(0.95);
}
70% {
transform: scale(1);
}
100% {
transform: scale(0.95);
}
}
@keyframes mx_Indicator_pulse_shadow {
0% {
opacity: 0.7;
}
70% {
transform: scale(2.2);
opacity: 0;
}
100% {
opacity: 0;
}
}
.mx_Indicator {
position: absolute;
right: -3px;
top: -3px;
width: var(--RoomHeader-indicator-dot-size);
height: var(--RoomHeader-indicator-dot-size);
border-radius: 50%;
transform: scale(1);
background: var(--RoomHeader-indicator-pulseColor);
box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
animation: mx_Indicator_pulse 2s infinite;
animation-iteration-count: 1;
&::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transform: scale(1);
transform-origin: center center;
animation-name: mx_Indicator_pulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: inherit;
}
}

View file

@ -121,7 +121,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $tertiary-content;
mask-size: 16px;
transform: rotate(270deg);
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
}
&.mx_SpaceHierarchy_subspace_toggle_shown::before {

View file

@ -48,7 +48,7 @@ Please see LICENSE files in the repository root for full details.
mask-size: contain;
mask-repeat: no-repeat;
background-color: $background;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
transform: rotate(270deg);
}
@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details.
mask-size: 20px;
mask-repeat: no-repeat;
background-color: $tertiary-content;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
}
.mx_SpaceButton_icon {
@ -207,15 +207,15 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_SpaceButton_home .mx_SpaceButton_icon::before {
mask-image: url("$(res)/img/element-icons/home.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
}
&.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
}
&.mx_SpaceButton_people .mx_SpaceButton_icon::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
&.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
@ -414,7 +414,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpacePanel_iconHome::before {
mask-image: url("$(res)/img/element-icons/home.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
}
.mx_SpacePanel_iconInvite::before {
@ -422,15 +422,15 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpacePanel_iconSettings::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
.mx_SpacePanel_iconLeave::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
}
.mx_SpacePanel_iconMembers::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_SpacePanel_iconPlus::before {

View file

@ -27,18 +27,19 @@ Please see LICENSE files in the repository root for full details.
&::before {
position: absolute;
content: "";
width: 24px;
height: 24px;
top: 27px;
left: 20px;
width: 28px;
height: 28px;
top: 50%;
transform: translateY(-50%);
left: 22px;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 24px;
mask-size: 28px;
background-color: $tertiary-content;
}
&:hover {
border-color: var(--cpd-color-bg-interactive-primary-rest);
border-color: var(--cpd-color-bg-action-primary-rest);
&::before {
background-color: var(--cpd-color-icon-primary);
@ -221,7 +222,7 @@ Please see LICENSE files in the repository root for full details.
width: 24px;
background: $tertiary-content;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/settings.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
}
}
@ -247,7 +248,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpaceRoomView_privateScope_justMeButton::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {

View file

@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_UserMenu_iconHome::before {
mask-image: url("$(res)/img/element-icons/home.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
}
.mx_UserMenu_iconDnd::before {
@ -185,11 +185,11 @@ Please see LICENSE files in the repository root for full details.
}
.mx_UserMenu_iconLock::before {
mask-image: url("$(res)/img/element-icons/security.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
}
.mx_UserMenu_iconSettings::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
.mx_UserMenu_iconMessage::before {
@ -197,7 +197,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_UserMenu_iconSignOut::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
}
.mx_UserMenu_iconQr::before {

View file

@ -28,10 +28,11 @@ Please see LICENSE files in the repository root for full details.
/* Waveforms are present in live recording only */
.mx_Waveform {
/* default, overridden in JS */
--barHeight: 1;
.mx_Waveform_bar {
background-color: $quaternary-content;
height: 100%;
/* Variable set by a JS component */
transform: scaleY(max(0.05, var(--barHeight)));
&.mx_Waveform_bar_100pct {

View file

@ -12,6 +12,9 @@ Please see LICENSE files in the repository root for full details.
/* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
.mx_SeekBar {
/* default, overridden in JS */
--fillTo: 1;
/* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
/* need to support IE. */

View file

@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.
mask-size: contain;
mask-repeat: no-repeat;
background: $secondary-content;
mask-image: url("$(res)/img/globe.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
}
.mx_DecoratedRoomAvatar_icon_offline::before {

View file

@ -33,7 +33,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconLink::before {
mask-image: url("$(res)/img/element-icons/link.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_MessageContextMenu_iconPermalink::before {
@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconForward::before {
mask-image: url("$(res)/img/element-icons/message/fwd.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/forward.svg");
}
.mx_MessageContextMenu_iconRedact::before {
@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconReplyInThread::before {
mask-image: url("$(res)/img/element-icons/message/thread.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
}
.mx_MessageContextMenu_iconReact::before {

View file

@ -1,5 +1,5 @@
.mx_RoomGeneralContextMenu_iconStar::before {
mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
}
.mx_RoomGeneralContextMenu_iconArrowDown::before {
@ -31,11 +31,11 @@
}
.mx_RoomGeneralContextMenu_iconPeople::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_RoomGeneralContextMenu_iconFiles::before {
mask-image: url("$(res)/img/element-icons/room/files.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/files.svg");
}
.mx_RoomGeneralContextMenu_iconPins::before {
@ -43,15 +43,15 @@
}
.mx_RoomGeneralContextMenu_iconWidgets::before {
mask-image: url("$(res)/img/element-icons/room/apps.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
}
.mx_RoomGeneralContextMenu_iconSettings::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
.mx_RoomGeneralContextMenu_iconExport::before {
mask-image: url("$(res)/img/element-icons/export.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
}
.mx_RoomGeneralContextMenu_iconDeveloperTools::before {
@ -59,7 +59,7 @@
}
.mx_RoomGeneralContextMenu_iconCopyLink::before {
mask-image: url("$(res)/img/element-icons/link.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_RoomGeneralContextMenu_iconInvite::before {
@ -67,5 +67,5 @@
}
.mx_RoomGeneralContextMenu_iconSignOut::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
}

View file

@ -36,9 +36,24 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AnalyticsLearnMore_bullets li {
background: url("$(res)/img/tick-circle.svg") no-repeat;
list-style-type: none;
padding: 2px 0px 20px 32px;
padding: 2px 0 0 32px;
margin-bottom: 20px;
vertical-align: middle;
position: relative;
&::before {
content: "";
position: absolute;
width: 26px;
height: 26px;
left: 0;
top: 0;
background-color: #0dbd8b;
mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
}

View file

@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
}
}

View file

@ -41,14 +41,13 @@ Please see LICENSE files in the repository root for full details.
.mx_JoinRuleDropdown_invite::before {
box-sizing: border-box;
mask-image: url("$(res)/img/element-icons/lock.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
mask-size: contain;
padding: 1px;
}
.mx_JoinRuleDropdown_public::before {
mask-image: url("$(res)/img/globe.svg");
mask-size: 12px;
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
}
.mx_JoinRuleDropdown_restricted::before {

View file

@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
}
}

View file

@ -108,7 +108,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
}
}

View file

@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
/* ========================================================== */
.mx_RoomSettingsDialog_settingsIcon::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
.mx_RoomSettingsDialog_voiceIcon::before {
@ -17,7 +17,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomSettingsDialog_securityIcon::before {
mask-image: url("$(res)/img/element-icons/security.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
}
.mx_RoomSettingsDialog_rolesIcon::before {
@ -56,7 +56,7 @@ Please see LICENSE files in the repository root for full details.
/* show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings */
.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before {
mask: url("$(res)/img/feather-customised/image.svg");
mask: url("@vector-im/compound-design-tokens/icons/image.svg");
mask-repeat: no-repeat;
mask-size: 36px;
mask-position: center;

View file

@ -74,7 +74,7 @@ Please see LICENSE files in the repository root for full details.
.mx_TabbedView_tabLabel {
.mx_SpaceSettingsDialog_generalIcon::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
.mx_SpaceSettingsDialog_visibilityIcon::before {

View file

@ -93,7 +93,7 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_SpotlightDialog_filterPeople::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
&.mx_SpotlightDialog_filterPublicRooms::before {
@ -400,7 +400,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before {
mask-image: url("$(res)/img/element-icons/link.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
@ -432,7 +432,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_startChat::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_SpotlightDialog_joinRoomAlias::before {
@ -508,15 +508,15 @@ Please see LICENSE files in the repository root for full details.
mask-size: contain;
&.mx_SpotlightDialog_metaspaceResult_home-space {
mask-image: url("$(res)/img/element-icons/home.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
}
&.mx_SpotlightDialog_metaspaceResult_favourites-space {
mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
}
&.mx_SpotlightDialog_metaspaceResult_people-space {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
&.mx_SpotlightDialog_metaspaceResult_orphans-space {

View file

@ -39,11 +39,13 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Dropdown_arrow {
width: 10px;
height: 6px;
padding-right: 9px;
mask: url("$(res)/img/feather-customised/dropdown-arrow.svg");
width: 16px;
height: 16px;
margin-right: 4px;
mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 18px;
background: $primary-content;
}

View file

@ -51,12 +51,15 @@ Please see LICENSE files in the repository root for full details.
.mx_Field_select::before {
content: "";
position: absolute;
top: 15px;
right: 10px;
width: 10px;
height: 6px;
mask: url("$(res)/img/feather-customised/dropdown-arrow.svg");
top: 50%;
transform: translateY(-50%);
right: 4px;
width: 18px;
height: 18px;
mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: $primary-content;
z-index: 1;
pointer-events: none;

View file

@ -125,7 +125,7 @@ $button-gap: 24px;
}
.mx_ImageView_button_download::before {
mask-image: url("$(res)/img/image-view/download.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/download.svg");
}
.mx_ImageView_button_more::before {

View file

@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InfoTooltip_icon_info::before {
mask-image: url("$(res)/img/element-icons/info.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
}
.mx_InfoTooltip_icon_warning::before {

View file

@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $secondary-content;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/camera.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg");
mask-size: 16px;
z-index: 2;
}

View file

@ -16,16 +16,7 @@ progress.mx_ProgressBar {
@mixin ProgressBarBorderRadius 6px;
@mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
@mixin ProgressBarBgColour $progressbar-bg-color;
::-webkit-progress-value {
&::-webkit-progress-value {
transition: width 1s;
}
::-moz-progress-bar {
transition: padding-bottom 1s;
padding-bottom: var(--value);
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-15px);
padding-left: 15px;
height: 0;
}
}

View file

@ -48,7 +48,8 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_UseCaseSelectionButton_community::before {
mask-image: url("$(res)/img/globe.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
mask-size: 24px;
}
}

View file

@ -109,6 +109,10 @@ Please see LICENSE files in the repository root for full details.
border: none;
padding: 8px 12px;
border-radius: 4px 0;
&::placeholder {
color: var(--cpd-color-text-secondary);
}
}
button {

View file

@ -30,6 +30,6 @@ Please see LICENSE files in the repository root for full details.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
background-color: var(--cpd-color-icon-secondary);
}

View file

@ -108,12 +108,16 @@ Please see LICENSE files in the repository root for full details.
color: var(--cpd-color-icon-primary);
}
&.mx_MessageActionBar_threadButton {
--MessageActionBar-icon-size: 20px;
}
&.mx_MessageActionBar_retryButton {
--MessageActionBar-icon-size: 16px;
}
&.mx_MessageActionBar_downloadButton {
--MessageActionBar-icon-size: 14px;
--MessageActionBar-icon-size: 20px;
&.mx_MessageActionBar_downloadSpinnerButton {
svg {

View file

@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
width: 18px;
height: 18px;
background: currentColor;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-size: 100%;
mask-repeat: no-repeat;
float: right;
@ -165,7 +165,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_ThreadPanel_copyLinkToThread::before {
mask-image: url("$(res)/img/element-icons/link.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_ContextualMenu_wrapper {

View file

@ -26,9 +26,9 @@ Please see LICENSE files in the repository root for full details.
height: 16px;
width: 16px;
padding: 4px;
mask-image: url("$(res)/img/minimise.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-left.svg");
mask-repeat: no-repeat;
mask-position: 7px center;
mask-position: center;
background-color: $header-panel-text-primary-color;
}
}

View file

@ -7,6 +7,11 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_BasicMessageComposer {
/* These are set in Javascript */
--avatar-letter: "";
--avatar-background: unset;
--placeholder: "";
position: relative;
.mx_BasicMessageComposer_inputEmpty > :first-child::before {

View file

@ -334,7 +334,6 @@ Please see LICENSE files in the repository root for full details.
.mx_MImageBody {
width: 100%;
height: 100%;
.mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash {
position: unset;

View file

@ -1017,16 +1017,6 @@ $left-gutter: 64px;
visibility: visible;
}
/* Inverse of the above to *disable* the animation on any indicators. This approach */
/* is less pretty, but is easier to target because otherwise we need to define the */
/* animation for when it's shown which means duplicating the style definition in */
/* multiple places. */
.mx_EventTile:not(:hover):not(.mx_EventTile_actionBarFocused):not([data-whatinput="keyboard"] :focus-within) {
&:not(:focus-visible:focus-within) .mx_MessageActionBar .mx_Indicator {
animation: none;
}
}
.mx_EventTile[data-shape="ThreadsList"],
.mx_EventTile[data-shape="Notification"] {
--topOffset: $spacing-12;

View file

@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
}
}
&:hover .mx_LinkPreviewGroup_hide img,
&:hover .mx_LinkPreviewGroup_hide svg,
.mx_LinkPreviewGroup_hide:focus-visible:focus svg {
visibility: visible;
}

View file

@ -296,7 +296,7 @@ Please see LICENSE files in the repository root for full details.
top: 8px;
left: 9px;
mask-image: url("$(res)/img/element-icons/send-message.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/send-solid.svg");
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;

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