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

Merge branch 'travis/remove-skinning' into develop

Browse source
This commit is contained in:
Travis Ralston 2022-04-05 11:27:43 -06:00
commit ecf1c41f7c
29 changed files with 74 additions and 411 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintignore
View file

@ -1,2 +1,3 @@
src/vector/modernizr.js src/vector/modernizr.js
# Legacy skinning file that some people might still have
src/component-index.js src/component-index.js

1
.gitignore vendored
View file

@ -16,6 +16,7 @@ electron/pub
/config.json /config.json
/config.json.* /config.json.*
/config.local*.json /config.local*.json
# Legacy skinning file that some people might still have
/src/component-index.js /src/component-index.js
/.tmp /.tmp
/webpack-stats.json /webpack-stats.json

7
README.md
View file

@ -264,9 +264,6 @@ top of the underlying `matrix-react-sdk`. `matrix-react-sdk` provides both the
higher and lower level React components useful for building Matrix communication higher and lower level React components useful for building Matrix communication
apps using React. apps using React.
After creating a new component you must run `yarn reskindex` to regenerate
the `component-index.js` for the app (used in future for skinning).
Please note that Element is intended to run correctly without access to the public Please note that Element is intended to run correctly without access to the public
internet. So please don't depend on resources (JS libs, CSS, images, fonts) internet. So please don't depend on resources (JS libs, CSS, images, fonts)
hosted by external CDNs or servers but instead please package all dependencies hosted by external CDNs or servers but instead please package all dependencies
@ -321,7 +318,6 @@ Finally, build and start Element itself:
yarn link matrix-js-sdk yarn link matrix-js-sdk
yarn link matrix-react-sdk yarn link matrix-react-sdk
yarn install yarn install
yarn reskindex
yarn start yarn start
``` ```
@ -369,9 +365,6 @@ ___
When you make changes to `matrix-react-sdk` or `matrix-js-sdk` they should be When you make changes to `matrix-react-sdk` or `matrix-js-sdk` they should be
automatically picked up by webpack and built. automatically picked up by webpack and built.
If you add or remove any components from the Element skin, you will need to rebuild
the skin's index by running, `yarn reskindex`.
If any of these steps error with, `file table overflow`, you are probably on a mac If any of these steps error with, `file table overflow`, you are probably on a mac
which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again. which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again.
You'll need to do this in each new terminal you open before building Element. You'll need to do this in each new terminal you open before building Element.

1
babel.config.js
View file

@ -13,7 +13,6 @@ module.exports = {
"@babel/preset-react", "@babel/preset-react",
], ],
"plugins": [ "plugins": [
["@babel/plugin-proposal-decorators", {legacy: true}],
"@babel/plugin-proposal-export-default-from", "@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-numeric-separator", "@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-class-properties",

5
components.json Normal file
View file

@ -0,0 +1,5 @@
{
"src/components/views/auth/AuthFooter.tsx": "src/components/views/auth/VectorAuthFooter.tsx",
"src/components/views/auth/AuthHeaderLogo.tsx": "src/components/views/auth/VectorAuthHeaderLogo.tsx",
"src/components/views/auth/AuthPage.tsx": "src/components/views/auth/VectorAuthPage.tsx"
}

3
docs/app-load.md
View file

@ -1,5 +1,8 @@
# App load order # App load order
**Dev note**: As of March 2022, the skin is no longer part of the app load order at all. The document's graphs have
been kept untouched for posterity.
Old slow flow: Old slow flow:
![image](https://user-images.githubusercontent.com/2403652/73848963-00a2a080-4821-11ea-97d4-1200fc2638f3.png) ![image](https://user-images.githubusercontent.com/2403652/73848963-00a2a080-4821-11ea-97d4-1200fc2638f3.png)

6
docs/customisations.md
View file

@ -34,9 +34,9 @@ default, Element Web does *not* ship with this file to prevent conflicts.
### Custom components ### Custom components
Instead of implementing skinning from the react-sdk, maintainers can use the above system to override components Maintainers can use the above system to override components if they wish. Maintenance and API surface compatibility are
if they wish. Maintenance and API surface compatibility are left as a responsibility for the project - the layering left as a responsibility for the project - the layering in Element Web (including the react-sdk) do not make guarantees
in Element Web (including the react-sdk) do not make guarantees that properties/state machines won't change. that properties/state machines won't change.
### Component visibility customisation ### Component visibility customisation

68
docs/skinning thoughts.md
View file

@ -1,68 +0,0 @@
== Skinning refactor ==
matrix-react-sdk
- base images
- base CSS
- all the components needed to build a workable app (including the top layer)
element-web: the Element skin
- Element-specific classes (e.g. login header/footer)
- Element-specific themes
- light
- dark
i.e. the only things which should go into element-web are bits which apply vector-specific skinning
specifically "Stuff that any other brand would not want to use. (e.g. Element logos, links, T&Cs)"
- Questions:
- Electron app? (should probably be a separate repo in its own right? but might as well go here for now)
- index.html & index.js? (should be in matrix-react-sdk, given the SDK is useless without them?)
ideally matrix-react-sdk itself should ship with a default skin which actually works built in.
status skin (can go in the same app for now)
- has status theme
- which inherits from Element light theme
- how do we share graphics between skins?
- shove them into react-sdk, or...
- guess we do ../../vector/img
- this means keeping the skin name in the images (unless /img is a shortcut to the right skin's images)
out of scope:
- making the components more independent, so they can be used in isolation.
- that said, the bits which should probably be used by being embeded into a different app:
- login/reg
- RoomView + RoomSettings
- MessageComposer
- RoomList
- MemberList
- MemberInfo
- Voip UI
- UserSettings
- sharing different js-sdks between the different isolated modules
other changes:
- how do we handle i18n?
- each skin should really be its own i18n project. As long as all the commonality stuff is in matrix-react-sdk this shouldn't be too bad.
- ability to associate components with a given skin
- skins/vector/src <-- components
- skins/vector/css
- skins/vector/img
- skins/vector/fonts
- gather together themes (per skin) into a single place too
- skins/vector/themes/foo/css
- skins/vector/themes/foo/img
- skins/vector/themes/foo/fonts
- ideally element-web would contain almost nothing but skins/vector directory.
- ability to entirely replace CSS rather than override it for a given theme
- e.g. if we replace `Login.js` with `StatusLogin.js`, then we should similarly be able to replace `_Login.scss` with `_StatusLogin.scss`.
random thoughts;
- should we be able to change the entire skin at runtime (more like wordpress) - to the extent of replacing entire components?
- might pose security issues if a theme can be swapped out to replace MatrixChat or other fundamental functionality at runtime
- if so, perhaps skins & themes should converge...
-----------------
Immediate plan for Status:
* Implement it as a theme for the Element skin
* Ideally move skins to a sensible level (possibly even including src?)

2
docs/theming.md
View file

@ -6,7 +6,7 @@ Element app via CSS & custom imagery.
They are *NOT* co be confused with 'skins', which describe apps which sit on top They are *NOT* co be confused with 'skins', which describe apps which sit on top
of matrix-react-sdk - e.g. in theory Element itself is a react-sdk skin. of matrix-react-sdk - e.g. in theory Element itself is a react-sdk skin.
As of Jan 2017, skins are not fully supported; Element is the only available skin. As of March 2022, skins are not fully supported; Element is the only available skin.
To define a theme for Element: To define a theme for Element:

10
package.json
View file

@ -30,21 +30,18 @@
"i18n": "matrix-gen-i18n", "i18n": "matrix-gen-i18n",
"prunei18n": "matrix-prune-i18n", "prunei18n": "matrix-prune-i18n",
"diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && matrix-gen-i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json", "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && matrix-gen-i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
"reskindex": "reskindex -h src/header",
"reskindex:watch": "reskindex -h src/header -w",
"reskindex:watch-react": "node scripts/yarn-sub.js matrix-react-sdk reskindex:watch",
"clean": "rimraf lib webapp", "clean": "rimraf lib webapp",
"build": "yarn clean && yarn build:genfiles && yarn build:bundle", "build": "yarn clean && yarn build:genfiles && yarn build:bundle",
"build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats", "build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats",
"build:jitsi": "node scripts/build-jitsi.js", "build:jitsi": "node scripts/build-jitsi.js",
"build:res": "node scripts/copy-res.js", "build:res": "node scripts/copy-res.js",
"build:genfiles": "yarn reskindex && yarn build:res && yarn build:jitsi", "build:genfiles": "yarn build:res && yarn build:jitsi",
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
"build:bundle": "webpack --progress --bail --mode production", "build:bundle": "webpack --progress --bail --mode production",
"build:bundle-stats": "webpack --progress --bail --mode production --json > webpack-stats.json", "build:bundle-stats": "webpack --progress --bail --mode production --json > webpack-stats.json",
"dist": "scripts/package.sh", "dist": "scripts/package.sh",
"start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n reskindex,reskindex-react,res,element-js \"yarn reskindex:watch\" \"yarn reskindex:watch-react\" \"yarn start:res\" \"yarn start:js\"", "start": "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 reskindex,reskindex-react,res,element-js \"yarn reskindex:watch\" \"yarn reskindex:watch-react\" \"yarn start:res\" \"yarn start:js --https\"", "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --https\"",
"start:res": "yarn build:jitsi && node scripts/copy-res.js -w", "start:res": "yarn build:jitsi && node scripts/copy-res.js -w",
"start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --mode development --disable-host-check --hot", "start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --mode development --disable-host-check --hot",
"lint": "yarn lint:types && yarn lint:js && yarn lint:style", "lint": "yarn lint:types && yarn lint:js && yarn lint:style",
@ -74,7 +71,6 @@
"@babel/eslint-parser": "^7.12.10", "@babel/eslint-parser": "^7.12.10",
"@babel/eslint-plugin": "^7.12.10", "@babel/eslint-plugin": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-decorators": "^7.12.12",
"@babel/plugin-proposal-export-default-from": "^7.12.1", "@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-proposal-numeric-separator": "^7.12.7", "@babel/plugin-proposal-numeric-separator": "^7.12.7",

3
res/welcome.html
View file

@ -173,7 +173,8 @@ we don't have an account and should hide them. No account == no guest account ei
<img src="welcome/images/logo.svg" alt="" class="mx_Logo"/> <img src="welcome/images/logo.svg" alt="" class="mx_Logo"/>
</a> </a>
<h1 class="mx_Header_title">_t("Welcome to Element")</h1> <h1 class="mx_Header_title">_t("Welcome to Element")</h1>
<h4 class="mx_Header_subtitle">_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h4> <!-- XXX: Our translations system isn't smart enough to recognize variables in the HTML, so we manually do it -->
<h4 class="mx_Header_subtitle">_t("Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo")</h4>
<div class="mx_ButtonGroup"> <div class="mx_ButtonGroup">
<div class="mx_ButtonRow"> <div class="mx_ButtonRow">
<a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn"> <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">

153
res/welcome/images/matrix.svg
View file

@ -1,153 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14576) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="793.322px" height="340.809px" viewBox="0 0 793.322 340.809" enable-background="new 0 0 793.322 340.809"
xml:space="preserve">
<path opacity="0.5" fill="#FFFFFF" d="M34.004,340.809H2c-1.104,0-2-0.896-2-2V2c0-1.104,0.896-2,2-2h32.004c1.104,0,2,0.896,2,2
v7.71c0,1.104-0.896,2-2,2h-21.13v317.386h21.13c1.104,0,2,0.896,2,2.001v7.712C36.004,339.913,35.108,340.809,34.004,340.809
L34.004,340.809z"/>
<path opacity="0.5" fill="#FFFFFF" d="M10.875,9.711v321.386h23.13v7.711H1.999V2.001h32.006v7.71H10.875z"/>
<path opacity="0.5" fill="#FFFFFF" d="M252.402,233.711h-32.993c-1.104,0-2-0.896-2-2v-68.073c0-3.949-0.154-7.722-0.457-11.213
c-0.289-3.282-1.074-6.153-2.332-8.53c-1.204-2.276-3.017-4.119-5.384-5.476c-2.393-1.362-5.775-2.056-10.042-2.056
c-4.238,0-7.674,0.798-10.213,2.371c-2.565,1.596-4.604,3.701-6.053,6.258c-1.498,2.643-2.51,5.694-3.013,9.067
c-0.526,3.513-0.793,7.125-0.793,10.741v66.91c0,1.104-0.896,2-2,2h-32.991c-1.104,0-2-0.896-2-2v-67.373
c0-3.435-0.078-6.964-0.228-10.485c-0.148-3.251-0.767-6.278-1.841-8.995c-1.018-2.571-2.667-4.584-5.047-6.153
c-2.372-1.552-6.029-2.341-10.865-2.341c-1.372,0-3.265,0.328-5.629,0.976c-2.28,0.624-4.536,1.826-6.705,3.577
c-2.152,1.732-4.036,4.306-5.605,7.655c-1.569,3.356-2.367,7.877-2.367,13.438v69.701c0,1.104-0.895,2-2,2H68.857
c-1.104,0-2-0.896-2-2V111.594c0-1.104,0.896-1.999,2-1.999h31.13c1.104,0,2,0.896,2,1.999v11.007
c3.834-4.499,8.248-8.152,13.173-10.896c6.396-3.559,13.799-5.362,22.002-5.362c7.846,0,15.127,1.548,21.642,4.604
c5.794,2.722,10.424,7.26,13.791,13.52c3.449-4.362,7.833-8.306,13.071-11.752c6.422-4.228,14.102-6.371,22.824-6.371
c6.499,0,12.625,0.807,18.209,2.399c5.686,1.628,10.635,4.271,14.712,7.857c4.088,3.605,7.318,8.357,9.601,14.123
c2.25,5.719,3.391,12.649,3.391,20.604v80.384C254.402,232.815,253.507,233.711,252.402,233.711L252.402,233.711z"/>
<path opacity="0.5" fill="#FFFFFF" d="M99.988,111.595v16.264h0.463c4.338-6.191,9.563-10.998,15.684-14.406
c6.117-3.402,13.129-5.11,21.027-5.11c7.588,0,14.521,1.475,20.793,4.415c6.274,2.945,11.038,8.131,14.291,15.567
c3.56-5.265,8.4-9.913,14.521-13.94c6.117-4.025,13.358-6.042,21.724-6.042c6.351,0,12.234,0.776,17.66,2.325
c5.418,1.549,10.065,4.027,13.938,7.434c3.869,3.41,6.889,7.863,9.062,13.357c2.167,5.504,3.253,12.122,3.253,19.869v80.385H219.41
v-68.074c0-4.025-0.154-7.82-0.465-11.385c-0.313-3.56-1.161-6.656-2.555-9.293c-1.395-2.631-3.45-4.724-6.157-6.274
c-2.711-1.543-6.391-2.322-11.037-2.322s-8.403,0.896-11.269,2.671c-2.868,1.784-5.112,4.109-6.737,6.971
c-1.626,2.869-2.711,6.12-3.252,9.762c-0.545,3.638-0.814,7.318-0.814,11.035v66.91h-32.991v-67.375c0-3.562-0.081-7.087-0.23-10.57
c-0.158-3.487-0.814-6.7-1.978-9.645c-1.162-2.94-3.099-5.304-5.809-7.088c-2.711-1.775-6.699-2.671-11.965-2.671
c-1.551,0-3.603,0.349-6.156,1.048c-2.556,0.697-5.036,2.016-7.435,3.949c-2.404,1.938-4.454,4.726-6.158,8.363
c-1.705,3.642-2.556,8.402-2.556,14.287v69.701h-32.99V111.595H99.988z"/>
<path opacity="0.5" fill="#FFFFFF" d="M304.909,236.733c-5.883,0-11.46-0.729-16.574-2.163c-5.192-1.464-9.806-3.774-13.713-6.871
c-3.944-3.117-7.068-7.111-9.282-11.871c-2.205-4.733-3.324-10.412-3.324-16.876c0-7.13,1.293-13.117,3.846-17.797
c2.542-4.674,5.877-8.464,9.912-11.263c3.97-2.752,8.556-4.842,13.63-6.209c4.901-1.322,9.937-2.394,14.961-3.184
c4.986-0.775,9.949-1.404,14.754-1.872c4.679-0.452,8.88-1.139,12.489-2.039c3.412-0.854,6.118-2.09,8.042-3.672
c1.666-1.37,2.416-3.384,2.292-6.151c-0.002-3.289-0.502-5.816-1.492-7.595c-0.998-1.798-2.283-3.15-3.927-4.138
c-1.703-1.02-3.725-1.713-6.012-2.062c-2.47-0.37-5.146-0.557-7.947-0.557c-6.034,0-10.789,1.271-14.135,3.783
c-3.233,2.424-5.155,6.64-5.714,12.527c-0.098,1.026-0.961,1.812-1.992,1.812h-32.992c-0.552,0-1.079-0.229-1.457-0.629
c-0.376-0.402-0.572-0.941-0.54-1.491c0.485-8.073,2.55-14.894,6.142-20.272c3.548-5.331,8.147-9.682,13.661-12.931
c5.424-3.191,11.612-5.498,18.392-6.857c6.684-1.335,13.5-2.013,20.26-2.013c6.096,0,12.365,0.437,18.626,1.296
c6.377,0.88,12.285,2.622,17.562,5.177c5.376,2.604,9.845,6.29,13.282,10.951c3.498,4.744,5.271,11.048,5.271,18.731v62.494
c0,5.307,0.306,10.462,0.915,15.319c0.576,4.64,1.572,8.116,2.963,10.338c0.385,0.616,0.407,1.395,0.055,2.031
c-0.353,0.635-1.022,1.03-1.75,1.03h-33.457c-0.861,0-1.624-0.55-1.898-1.367c-0.646-1.941-1.176-3.939-1.572-5.936
c-0.141-0.696-0.267-1.402-0.38-2.12c-4.825,4.184-10.349,7.24-16.474,9.105C320.033,235.609,312.489,236.733,304.909,236.733
L304.909,236.733z M341.941,176.661c-0.809,0.409-1.676,0.768-2.596,1.074c-2.161,0.72-4.511,1.326-6.988,1.807
c-2.442,0.475-5.033,0.872-7.699,1.186c-2.631,0.311-5.251,0.697-7.784,1.146c-2.329,0.433-4.705,1.035-7.051,1.792
c-2.194,0.711-4.114,1.667-5.699,2.842c-1.531,1.128-2.785,2.587-3.731,4.335c-0.917,1.709-1.385,3.97-1.385,6.719
c0,2.598,0.465,4.778,1.385,6.481c0.928,1.722,2.142,3.035,3.716,4.018c1.644,1.026,3.601,1.757,5.816,2.17
c2.344,0.439,4.799,0.663,7.297,0.663c6.105,0,10.836-0.996,14.063-2.961c3.244-1.973,5.666-4.349,7.199-7.062
c1.568-2.78,2.542-5.62,2.892-8.436c0.376-3.019,0.565-5.436,0.565-7.187V176.661L341.941,176.661z"/>
<path opacity="0.5" fill="#FFFFFF" d="M273.544,129.255c3.405-5.113,7.744-9.215,13.012-12.316
c5.264-3.097,11.186-5.303,17.771-6.621c6.582-1.315,13.205-1.976,19.865-1.976c6.042,0,12.158,0.428,18.354,1.277
c6.195,0.855,11.85,2.522,16.962,4.997c5.111,2.477,9.292,5.926,12.546,10.338c3.253,4.414,4.879,10.262,4.879,17.543v62.494
c0,5.428,0.31,10.611,0.931,15.567c0.615,4.959,1.701,8.676,3.251,11.153H347.66c-0.621-1.86-1.126-3.755-1.511-5.693
c-0.39-1.933-0.661-3.908-0.813-5.923c-5.267,5.422-11.465,9.217-18.585,11.386c-7.127,2.163-14.407,3.251-21.842,3.251
c-5.733,0-11.077-0.698-16.033-2.09c-4.958-1.395-9.293-3.562-13.01-6.51c-3.718-2.938-6.622-6.656-8.713-11.147
s-3.138-9.84-3.138-16.033c0-6.813,1.199-12.43,3.604-16.84c2.399-4.417,5.495-7.939,9.295-10.575
c3.793-2.632,8.129-4.607,13.01-5.923c4.878-1.315,9.795-2.358,14.752-3.137c4.957-0.772,9.835-1.393,14.638-1.857
c4.801-0.466,9.062-1.164,12.779-2.093c3.718-0.929,6.658-2.282,8.829-4.065c2.165-1.781,3.172-4.375,3.02-7.785
c0-3.56-0.58-6.389-1.742-8.479c-1.161-2.09-2.711-3.719-4.646-4.88c-1.937-1.161-4.183-1.936-6.737-2.325
c-2.557-0.382-5.309-0.58-8.248-0.58c-6.506,0-11.617,1.395-15.335,4.183c-3.716,2.788-5.889,7.437-6.506,13.94h-32.991
C268.199,140.794,270.132,134.363,273.544,129.255z M338.713,175.838c-2.09,0.696-4.337,1.275-6.736,1.741
c-2.402,0.465-4.918,0.853-7.551,1.161c-2.635,0.313-5.268,0.698-7.899,1.163c-2.48,0.461-4.919,1.086-7.317,1.857
c-2.404,0.779-4.495,1.822-6.274,3.138c-1.784,1.317-3.216,2.985-4.3,4.994c-1.085,2.014-1.626,4.571-1.626,7.668
c0,2.94,0.541,5.422,1.626,7.431c1.084,2.017,2.558,3.604,4.416,4.765s4.025,1.976,6.507,2.438c2.475,0.466,5.031,0.698,7.665,0.698
c6.505,0,11.537-1.082,15.103-3.253c3.561-2.166,6.192-4.762,7.899-7.785c1.702-3.019,2.749-6.072,3.137-9.174
c0.384-3.097,0.58-5.576,0.58-7.434v-12.316C342.547,174.173,340.805,175.14,338.713,175.838z"/>
<path opacity="0.5" fill="#FFFFFF" d="M444.542,234.874c-5.187,0-10.173-0.361-14.823-1.069c-4.802-0.732-9.104-2.183-12.779-4.313
c-3.789-2.185-6.821-5.341-9.006-9.375c-2.163-3.986-3.26-9.232-3.26-15.59v-68.859h-17.981c-1.104,0-2-0.896-2-1.999v-22.073
c0-1.104,0.896-1.999,2-1.999h17.981V75.582c0-1.104,0.896-2,2-2h32.992c1.104,0,2,0.896,2,2v34.014h22.162c1.104,0,2,0.896,2,1.999
v22.073c0,1.104-0.896,1.999-2,1.999h-22.162v57.479c0,6.229,1.198,8.731,2.202,9.733c1.004,1.007,3.506,2.205,9.738,2.205
c1.804,0,3.542-0.076,5.161-0.225c1.604-0.144,3.174-0.367,4.669-0.665c0.13-0.026,0.261-0.039,0.391-0.039
c0.458,0,0.907,0.159,1.27,0.454c0.463,0.379,0.73,0.946,0.73,1.546v25.555c0,0.979-0.707,1.813-1.672,1.974
c-2.834,0.472-6.041,0.794-9.527,0.957C451.015,234.798,447.718,234.874,444.542,234.874L444.542,234.874z"/>
<path opacity="0.5" fill="#FFFFFF" d="M463.825,111.595v22.072h-24.161v59.479c0,5.573,0.928,9.292,2.788,11.149
c1.856,1.859,5.576,2.788,11.152,2.788c1.859,0,3.638-0.076,5.343-0.232c1.703-0.152,3.33-0.388,4.878-0.696v25.557
c-2.788,0.465-5.887,0.773-9.293,0.931c-3.407,0.149-6.737,0.23-9.99,0.23c-5.111,0-9.953-0.35-14.521-1.048
c-4.571-0.695-8.597-2.047-12.081-4.063c-3.486-2.011-6.236-4.88-8.248-8.597c-2.016-3.714-3.021-8.595-3.021-14.639v-70.859h-19.98
v-22.072h19.98V75.583h32.992v36.012H463.825z"/>
<path opacity="0.5" fill="#FFFFFF" d="M512.613,233.711h-32.991c-1.104,0-2-0.896-2-2V111.594c0-1.104,0.896-1.999,2-1.999h31.366
c1.104,0,2,0.896,2,1.999v15.069c0.967-1.516,2.034-2.978,3.199-4.382c2.754-3.312,5.949-6.182,9.496-8.522
c3.545-2.332,7.385-4.169,11.415-5.462c4.056-1.298,8.327-1.954,12.691-1.954c2.341,0,4.953,0.418,7.766,1.243
c0.852,0.25,1.437,1.032,1.437,1.92v30.67c0,0.6-0.269,1.167-0.732,1.547c-0.361,0.296-0.808,0.452-1.265,0.452
c-0.133,0-0.265-0.013-0.398-0.039c-1.484-0.3-3.299-0.565-5.392-0.787c-2.098-0.224-4.136-0.339-6.062-0.339
c-5.706,0-10.572,0.95-14.467,2.823c-3.862,1.86-7.012,4.428-9.361,7.629c-2.389,3.263-4.115,7.12-5.127,11.47
c-1.043,4.479-1.574,9.409-1.574,14.647v54.132C514.613,232.815,513.717,233.711,512.613,233.711L512.613,233.711z"/>
<path opacity="0.5" fill="#FFFFFF" d="M510.988,111.595V133.9h0.465c1.546-3.72,3.636-7.163,6.272-10.341
c2.634-3.172,5.652-5.885,9.06-8.131c3.405-2.242,7.047-3.985,10.923-5.228c3.868-1.237,7.898-1.859,12.081-1.859
c2.168,0,4.566,0.39,7.202,1.163v30.67c-1.551-0.312-3.41-0.584-5.576-0.814c-2.17-0.233-4.26-0.35-6.274-0.35
c-6.041,0-11.152,1.01-15.332,3.021c-4.182,2.014-7.55,4.761-10.107,8.247c-2.555,3.487-4.379,7.55-5.462,12.198
c-1.083,4.645-1.625,9.682-1.625,15.102v54.133h-32.991V111.595H510.988z"/>
<path opacity="0.5" fill="#FFFFFF" d="M603.923,233.711H570.93c-1.104,0-2-0.896-2-2V111.594c0-1.104,0.896-1.999,2-1.999h32.994
c1.104,0,2,0.896,2,1.999v120.117C605.923,232.815,605.027,233.711,603.923,233.711L603.923,233.711z M603.923,95.006H570.93
c-1.104,0-2-0.896-2-1.999V65.825c0-1.104,0.896-2,2-2h32.994c1.104,0,2,0.896,2,2v27.182
C605.923,94.11,605.027,95.006,603.923,95.006L603.923,95.006z"/>
<path opacity="0.5" fill="#FFFFFF" d="M570.93,93.007V65.824h32.994v27.183H570.93z M603.924,111.595v120.117H570.93V111.595
H603.924z"/>
<path opacity="0.5" fill="#FFFFFF" d="M742.163,233.711h-37.64c-0.671,0-1.297-0.335-1.667-0.896l-23.426-35.352l-23.426,35.352
c-0.369,0.561-0.995,0.896-1.667,0.896h-36.938c-0.741,0-1.424-0.411-1.77-1.067c-0.345-0.654-0.3-1.449,0.118-2.061l42.435-62.055
l-38.71-55.793c-0.424-0.613-0.474-1.408-0.128-2.069c0.343-0.658,1.028-1.071,1.771-1.071h37.636c0.665,0,1.287,0.33,1.658,0.882
l19.477,28.893l19.255-28.884c0.372-0.556,0.996-0.891,1.665-0.891h36.475c0.746,0,1.43,0.415,1.776,1.078
c0.343,0.66,0.289,1.46-0.139,2.071l-38.69,55.082l43.578,62.744c0.424,0.61,0.474,1.408,0.128,2.066
C743.591,233.298,742.908,233.711,742.163,233.711L742.163,233.711z"/>
<path opacity="0.5" fill="#FFFFFF" d="M621.115,111.595h37.637l21.144,31.365l20.911-31.365h36.476l-39.496,56.226l44.377,63.892
h-37.64l-25.093-37.87l-25.094,37.87h-36.938l43.213-63.193L621.115,111.595z"/>
<path opacity="0.5" fill="#FFFFFF" d="M791.322,340.809h-32.008c-1.105,0-2-0.896-2-2v-7.712c0-1.105,0.896-2.001,2-2.001h21.13
V11.71h-21.13c-1.105,0-2-0.896-2-2V2c0-1.104,0.896-2,2-2h32.008c1.104,0,2,0.896,2,2v336.809
C793.322,339.913,792.426,340.809,791.322,340.809L791.322,340.809z"/>
<path opacity="0.5" fill="#FFFFFF" d="M782.443,331.097V9.711h-23.13v-7.71h32.008v336.807h-32.008v-7.711H782.443z"/>
<path d="M10.875,9.711v321.386h23.13v7.711H1.999V2.001h32.006v7.71H10.875z"/>
<path d="M99.988,111.595v16.264h0.463c4.338-6.191,9.563-10.998,15.684-14.406c6.117-3.402,13.129-5.11,21.027-5.11
c7.588,0,14.521,1.475,20.793,4.415c6.274,2.945,11.038,8.131,14.291,15.567c3.56-5.265,8.4-9.913,14.521-13.94
c6.117-4.025,13.358-6.042,21.724-6.042c6.351,0,12.234,0.776,17.66,2.325c5.418,1.549,10.065,4.027,13.938,7.434
c3.869,3.41,6.889,7.863,9.062,13.357c2.167,5.504,3.253,12.122,3.253,19.869v80.385H219.41v-68.074
c0-4.025-0.154-7.82-0.465-11.385c-0.313-3.56-1.161-6.656-2.555-9.293c-1.395-2.631-3.45-4.724-6.157-6.274
c-2.711-1.543-6.391-2.322-11.037-2.322s-8.403,0.896-11.269,2.671c-2.868,1.784-5.112,4.109-6.737,6.971
c-1.626,2.869-2.711,6.12-3.252,9.762c-0.545,3.638-0.814,7.318-0.814,11.035v66.91h-32.991v-67.375c0-3.562-0.081-7.087-0.23-10.57
c-0.158-3.487-0.814-6.7-1.978-9.645c-1.162-2.94-3.099-5.304-5.809-7.088c-2.711-1.775-6.699-2.671-11.965-2.671
c-1.551,0-3.603,0.349-6.156,1.048c-2.556,0.697-5.036,2.016-7.435,3.949c-2.404,1.938-4.454,4.726-6.158,8.363
c-1.705,3.642-2.556,8.402-2.556,14.287v69.701h-32.99V111.595H99.988z"/>
<path d="M273.544,129.255c3.405-5.113,7.744-9.215,13.012-12.316c5.264-3.097,11.186-5.303,17.771-6.621
c6.582-1.315,13.205-1.976,19.865-1.976c6.042,0,12.158,0.428,18.354,1.277c6.195,0.855,11.85,2.522,16.962,4.997
c5.111,2.477,9.292,5.926,12.546,10.338c3.253,4.414,4.879,10.262,4.879,17.543v62.494c0,5.428,0.31,10.611,0.931,15.567
c0.615,4.959,1.701,8.676,3.251,11.153H347.66c-0.621-1.86-1.126-3.755-1.511-5.693c-0.39-1.933-0.661-3.908-0.813-5.923
c-5.267,5.422-11.465,9.217-18.585,11.386c-7.127,2.163-14.407,3.251-21.842,3.251c-5.733,0-11.077-0.698-16.033-2.09
c-4.958-1.395-9.293-3.562-13.01-6.51c-3.718-2.938-6.622-6.656-8.713-11.147s-3.138-9.84-3.138-16.033
c0-6.813,1.199-12.43,3.604-16.84c2.399-4.417,5.495-7.939,9.295-10.575c3.793-2.632,8.129-4.607,13.01-5.923
c4.878-1.315,9.795-2.358,14.752-3.137c4.957-0.772,9.835-1.393,14.638-1.857c4.801-0.466,9.062-1.164,12.779-2.093
c3.718-0.929,6.658-2.282,8.829-4.065c2.165-1.781,3.172-4.375,3.02-7.785c0-3.56-0.58-6.389-1.742-8.479
c-1.161-2.09-2.711-3.719-4.646-4.88c-1.937-1.161-4.183-1.936-6.737-2.325c-2.557-0.382-5.309-0.58-8.248-0.58
c-6.506,0-11.617,1.395-15.335,4.183c-3.716,2.788-5.889,7.437-6.506,13.94h-32.991
C268.199,140.794,270.132,134.363,273.544,129.255z M338.713,175.838c-2.09,0.696-4.337,1.275-6.736,1.741
c-2.402,0.465-4.918,0.853-7.551,1.161c-2.635,0.313-5.268,0.698-7.899,1.163c-2.48,0.461-4.919,1.086-7.317,1.857
c-2.404,0.779-4.495,1.822-6.274,3.138c-1.784,1.317-3.216,2.985-4.3,4.994c-1.085,2.014-1.626,4.571-1.626,7.668
c0,2.94,0.541,5.422,1.626,7.431c1.084,2.017,2.558,3.604,4.416,4.765s4.025,1.976,6.507,2.438c2.475,0.466,5.031,0.698,7.665,0.698
c6.505,0,11.537-1.082,15.103-3.253c3.561-2.166,6.192-4.762,7.899-7.785c1.702-3.019,2.749-6.072,3.137-9.174
c0.384-3.097,0.58-5.576,0.58-7.434v-12.316C342.547,174.173,340.805,175.14,338.713,175.838z"/>
<path d="M463.825,111.595v22.072h-24.161v59.479c0,5.573,0.928,9.292,2.788,11.149c1.856,1.859,5.576,2.788,11.152,2.788
c1.859,0,3.638-0.076,5.343-0.232c1.703-0.152,3.33-0.388,4.878-0.696v25.557c-2.788,0.465-5.887,0.773-9.293,0.931
c-3.407,0.149-6.737,0.23-9.99,0.23c-5.111,0-9.953-0.35-14.521-1.048c-4.571-0.695-8.597-2.047-12.081-4.063
c-3.486-2.011-6.236-4.88-8.248-8.597c-2.016-3.714-3.021-8.595-3.021-14.639v-70.859h-19.98v-22.072h19.98V75.583h32.992v36.012
H463.825z"/>
<path d="M510.988,111.595V133.9h0.465c1.546-3.72,3.636-7.163,6.272-10.341c2.634-3.172,5.652-5.885,9.06-8.131
c3.405-2.242,7.047-3.985,10.923-5.228c3.868-1.237,7.898-1.859,12.081-1.859c2.168,0,4.566,0.39,7.202,1.163v30.67
c-1.551-0.312-3.41-0.584-5.576-0.814c-2.17-0.233-4.26-0.35-6.274-0.35c-6.041,0-11.152,1.01-15.332,3.021
c-4.182,2.014-7.55,4.761-10.107,8.247c-2.555,3.487-4.379,7.55-5.462,12.198c-1.083,4.645-1.625,9.682-1.625,15.102v54.133h-32.991
V111.595H510.988z"/>
<path d="M570.93,93.007V65.824h32.994v27.183H570.93z M603.924,111.595v120.117H570.93V111.595H603.924z"/>
<path d="M621.115,111.595h37.637l21.144,31.365l20.911-31.365h36.476l-39.496,56.226l44.377,63.892h-37.64l-25.093-37.87
l-25.094,37.87h-36.938l43.213-63.193L621.115,111.595z"/>
<path d="M782.443,331.097V9.711h-23.13v-7.71h32.008v336.807h-32.008v-7.711H782.443z"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

1
scripts/docker-link-repos.sh
View file

@ -32,7 +32,6 @@ cd react-sdk
yarn link yarn link
yarn link matrix-js-sdk yarn link matrix-js-sdk
yarn --network-timeout=100000 install yarn --network-timeout=100000 install
yarn reskindex
cd ../ cd ../
echo "Setting up element-web with react-sdk and js-sdk packages" echo "Setting up element-web with react-sdk and js-sdk packages"

8
scripts/fetch-develop.deps.sh
View file

@ -92,16 +92,8 @@ pushd matrix-react-sdk
yarn link yarn link
yarn link matrix-js-sdk yarn link matrix-js-sdk
yarn install --pure-lockfile yarn install --pure-lockfile
yarn reskindex
popd popd
yarn link matrix-react-sdk yarn link matrix-react-sdk
############################## ##############################
# Link the reskindex binary in place: if we used `yarn link`,
# Yarn would do this for us, but we don't because we'd have
# to define the Yarn binary prefix somewhere so it could put the
# intermediate symlinks there. Instead, we do it ourselves.
mkdir -p node_modules/.bin
ln -sfv ../matrix-react-sdk/scripts/reskindex.js node_modules/.bin/reskindex

34
src/components/structures/VectorEmbeddedPage.tsx
View file

@ -1,34 +0,0 @@
/*
Copyright 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import EmbeddedPage from 'matrix-react-sdk/src/components/structures/EmbeddedPage';
import sanitizeHtml from 'sanitize-html';
import { _t } from 'matrix-react-sdk/src/languageHandler';
export default class VectorEmbeddedPage extends EmbeddedPage {
static replaces = 'EmbeddedPage';
// we're overriding the base component here, for Element-specific tweaks
translate(s: string) {
s = sanitizeHtml(_t(s));
// ugly fix for https://github.com/vector-im/element-web/issues/4243
// eslint-disable-next-line max-len
s = s.replace(/\[matrix\]/, '<a href="https://matrix.org" target="_blank" rel="noreferrer noopener"><img width="79" height="34" alt="Matrix" style="padding-left: 1px;vertical-align: middle" src="welcome/images/matrix.svg"/></a>');
return s;
}
}

2
src/components/views/auth/VectorAuthFooter.tsx
View file

@ -44,6 +44,4 @@ const VectorAuthFooter = () => {
); );
}; };
VectorAuthFooter.replaces = 'AuthFooter';
export default VectorAuthFooter; export default VectorAuthFooter;

4
src/components/views/auth/VectorAuthHeaderLogo.tsx
View file

@ -19,9 +19,7 @@ import React from 'react';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig'; import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
export default class VectorAuthHeaderLogo extends React.PureComponent { export default class VectorAuthHeaderLogo extends React.PureComponent {
static replaces = 'AuthHeaderLogo'; public render() {
render() {
const brandingConfig = SdkConfig.getObject("branding"); const brandingConfig = SdkConfig.getObject("branding");
const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg"; const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";

15
src/components/views/auth/VectorAuthPage.tsx
View file

@ -15,16 +15,15 @@ limitations under the License.
*/ */
import React, { CSSProperties } from 'react'; import React, { CSSProperties } from 'react';
import * as sdk from 'matrix-react-sdk/src/index';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig'; import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
export default class VectorAuthPage extends React.PureComponent { import VectorAuthFooter from "./VectorAuthFooter";
static replaces = 'AuthPage';
static welcomeBackgroundUrl; export default class VectorAuthPage extends React.PureComponent {
private static welcomeBackgroundUrl;
// cache the url as a static to prevent it changing without refreshing // cache the url as a static to prevent it changing without refreshing
static getWelcomeBackgroundUrl() { private static getWelcomeBackgroundUrl() {
if (VectorAuthPage.welcomeBackgroundUrl) return VectorAuthPage.welcomeBackgroundUrl; if (VectorAuthPage.welcomeBackgroundUrl) return VectorAuthPage.welcomeBackgroundUrl;
const brandingConfig = SdkConfig.getObject("branding"); const brandingConfig = SdkConfig.getObject("branding");
@ -43,9 +42,7 @@ export default class VectorAuthPage extends React.PureComponent {
return VectorAuthPage.welcomeBackgroundUrl; return VectorAuthPage.welcomeBackgroundUrl;
} }
render() { public render() {
const AuthFooter = sdk.getComponent('auth.AuthFooter');
const pageStyle = { const pageStyle = {
background: `center/cover fixed url(${VectorAuthPage.getWelcomeBackgroundUrl()})`, background: `center/cover fixed url(${VectorAuthPage.getWelcomeBackgroundUrl()})`,
}; };
@ -80,7 +77,7 @@ export default class VectorAuthPage extends React.PureComponent {
{ this.props.children } { this.props.children }
</div> </div>
</div> </div>
<AuthFooter /> <VectorAuthFooter />
</div> </div>
); );
} }

15
src/header
View file

@ -1,15 +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.
*/

2
src/i18n/strings/en_EN.json
View file

@ -26,7 +26,7 @@
"Go to element.io": "Go to element.io", "Go to element.io": "Go to element.io",
"Failed to start": "Failed to start", "Failed to start": "Failed to start",
"Welcome to Element": "Welcome to Element", "Welcome to Element": "Welcome to Element",
"Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Decentralised, encrypted chat &amp; collaboration powered by [matrix]", "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo",
"Sign In": "Sign In", "Sign In": "Sign In",
"Create Account": "Create Account", "Create Account": "Create Account",
"Explore rooms": "Explore rooms" "Explore rooms": "Explore rooms"

8
src/vector/app.tsx
View file

@ -18,8 +18,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// To ensure we load the browser-request version
import "matrix-js-sdk"; // eslint-disable-line no-restricted-imports
import React from 'react'; import React from 'react';
import * as sdk from 'matrix-react-sdk/src/index';
import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg'; import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
import { _td, newTranslatableError } from 'matrix-react-sdk/src/languageHandler'; import { _td, newTranslatableError } from 'matrix-react-sdk/src/languageHandler';
import AutoDiscoveryUtils from 'matrix-react-sdk/src/utils/AutoDiscoveryUtils'; import AutoDiscoveryUtils from 'matrix-react-sdk/src/utils/AutoDiscoveryUtils';
@ -30,6 +32,7 @@ import { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import { createClient } from "matrix-js-sdk/src/matrix"; import { createClient } from "matrix-js-sdk/src/matrix";
import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject"; import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject";
import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
import { parseQs } from './url_utils'; import { parseQs } from './url_utils';
import VectorBasePlatform from "./platform/VectorBasePlatform"; import VectorBasePlatform from "./platform/VectorBasePlatform";
@ -133,7 +136,6 @@ export async function loadApp(fragParams: {}) {
const defaultDeviceName = snakedConfig.get("default_device_display_name") const defaultDeviceName = snakedConfig.get("default_device_display_name")
?? platform.getDefaultDeviceDisplayName(); ?? platform.getDefaultDeviceDisplayName();
const MatrixChat = sdk.getComponent('structures.MatrixChat');
return <MatrixChat return <MatrixChat
onNewScreen={onNewScreen} onNewScreen={onNewScreen}
makeRegistrationUrl={makeRegistrationUrl} makeRegistrationUrl={makeRegistrationUrl}
@ -147,7 +149,7 @@ export async function loadApp(fragParams: {}) {
/>; />;
} }
async function verifyServerConfig() { async function verifyServerConfig(): Promise<IConfigOptions> {
let validatedConfig; let validatedConfig;
try { try {
logger.log("Verifying homeserver configuration"); logger.log("Verifying homeserver configuration");

5
src/vector/index.ts
View file

@ -110,7 +110,6 @@ async function start() {
preparePlatform, preparePlatform,
loadOlm, loadOlm,
loadConfig, loadConfig,
loadSkin,
loadLanguage, loadLanguage,
loadTheme, loadTheme,
loadApp, loadApp,
@ -160,10 +159,9 @@ async function start() {
const loadLanguagePromise = loadLanguage(); const loadLanguagePromise = loadLanguage();
// as quickly as we possibly can, set a default theme... // as quickly as we possibly can, set a default theme...
const loadThemePromise = loadTheme(); const loadThemePromise = loadTheme();
const loadSkinPromise = loadSkin();
// await things settling so that any errors we have to render have features like i18n running // await things settling so that any errors we have to render have features like i18n running
await settled(loadSkinPromise, loadThemePromise, loadLanguagePromise); await settled(loadThemePromise, loadLanguagePromise);
let acceptBrowser = supportedBrowser; let acceptBrowser = supportedBrowser;
if (!acceptBrowser && window.localStorage) { if (!acceptBrowser && window.localStorage) {
@ -211,7 +209,6 @@ async function start() {
// assert things started successfully // assert things started successfully
// ################################## // ##################################
await loadOlmPromise; await loadOlmPromise;
await loadSkinPromise;
await loadThemePromise; await loadThemePromise;
await loadLanguagePromise; await loadLanguagePromise;

21
src/vector/init.tsx
View file

@ -127,27 +127,6 @@ export async function loadLanguage() {
} }
} }
export async function loadSkin() {
// Ensure the skin is the very first thing to load for the react-sdk. We don't even want to reference
// the SDK until we have to in imports.
logger.log("Loading skin...");
// load these async so that its code is not executed immediately and we can catch any exceptions
const [sdk, skin] = await Promise.all([
import(
/* webpackChunkName: "matrix-react-sdk" */
/* webpackPreload: true */
"matrix-react-sdk"),
import(
/* webpackChunkName: "element-web-component-index" */
/* webpackPreload: true */
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - this module is generated so may fail lint
"../component-index"),
]);
sdk.loadSkin(skin);
logger.log("Skin loaded!");
}
export async function loadTheme() { export async function loadTheme() {
setTheme(); setTheme();
} }

11
test/app-tests/joining-test.tsx
View file

@ -18,9 +18,7 @@ limitations under the License.
import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg'; import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
import WebPlatform from '../../src/vector/platform/WebPlatform'; import WebPlatform from '../../src/vector/platform/WebPlatform';
import * as sdk from "matrix-react-sdk/src/index";
import * as jssdk from "matrix-js-sdk/src/matrix"; import * as jssdk from "matrix-js-sdk/src/matrix";
import "../skin-sdk";
import "../jest-mocks"; import "../jest-mocks";
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
@ -28,15 +26,12 @@ import ReactTestUtils from "react-dom/test-utils";
import {makeType} from "matrix-react-sdk/src/utils/TypeUtils"; import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils"; import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
import {sleep} from "../test-utils"; import {sleep} from "../test-utils";
import * as test_utils from "../test-utils";
import MockHttpBackend from "matrix-mock-request"; import MockHttpBackend from "matrix-mock-request";
import "fake-indexeddb/auto"; import "fake-indexeddb/auto";
import { RoomView as RoomViewClass } from 'matrix-react-sdk/src/components/structures/RoomView'; import { RoomView as RoomViewClass } from 'matrix-react-sdk/src/components/structures/RoomView';
import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
import RoomDirectory from "matrix-react-sdk/src/components/structures/RoomDirectory";
const MatrixChat = sdk.getComponent('structures.MatrixChat'); import RoomPreviewBar from "matrix-react-sdk/src/components/views/rooms/RoomPreviewBar";
const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
const RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar');
const HS_URL='http://localhost'; const HS_URL='http://localhost';
const IS_URL='http://localhost'; const IS_URL='http://localhost';

35
test/app-tests/loading-test.tsx
View file

@ -19,16 +19,14 @@ limitations under the License.
import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg'; import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
import WebPlatform from '../../src/vector/platform/WebPlatform'; import WebPlatform from '../../src/vector/platform/WebPlatform';
import '../skin-sdk';
import "../jest-mocks"; import "../jest-mocks";
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import ReactTestUtils from 'react-dom/test-utils'; import ReactTestUtils from 'react-dom/test-utils';
import MatrixReactTestUtils from 'matrix-react-test-utils'; import MatrixReactTestUtils from 'matrix-react-test-utils';
import * as jssdk from 'matrix-js-sdk/src/matrix'; import * as jssdk from 'matrix-js-sdk/src/matrix';
import * as sdk from 'matrix-react-sdk/src/index';
import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg'; import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg';
import {Views} from 'matrix-react-sdk/src/components/structures/MatrixChat'; import MatrixChat, {Views} from 'matrix-react-sdk/src/components/structures/MatrixChat';
import dis from 'matrix-react-sdk/src/dispatcher/dispatcher'; import dis from 'matrix-react-sdk/src/dispatcher/dispatcher';
import * as test_utils from '../test-utils'; import * as test_utils from '../test-utils';
import MockHttpBackend from 'matrix-mock-request'; import MockHttpBackend from 'matrix-mock-request';
@ -41,6 +39,8 @@ import {cleanLocalstorage} from "../test-utils";
import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store"; import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
import { RoomView as RoomViewClass } from 'matrix-react-sdk/src/components/structures/RoomView'; import { RoomView as RoomViewClass } from 'matrix-react-sdk/src/components/structures/RoomView';
import LoginComponent from 'matrix-react-sdk/src/components/structures/auth/Login'; import LoginComponent from 'matrix-react-sdk/src/components/structures/auth/Login';
import WelcomeComponent from "matrix-react-sdk/src/components/views/auth/Welcome";
import EmbeddedPage from "matrix-react-sdk/src/components/structures/EmbeddedPage";
const DEFAULT_HS_URL='http://my_server'; const DEFAULT_HS_URL='http://my_server';
const DEFAULT_IS_URL='http://my_is'; const DEFAULT_IS_URL='http://my_is';
@ -124,7 +124,6 @@ describe('loading:', function() {
}; };
} }
const MatrixChat = sdk.getComponent('structures.MatrixChat');
const fragParts = parseQsFromFragment(windowLocation); const fragParts = parseQsFromFragment(windowLocation);
const config = Object.assign({ const config = Object.assign({
@ -269,7 +268,7 @@ describe('loading:', function() {
return awaitLoginComponent(matrixChat).then(() => { return awaitLoginComponent(matrixChat).then(() => {
// we expect a single <Login> component // we expect a single <Login> component
ReactTestUtils.findRenderedComponentWithType( ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('structures.auth.Login')); matrixChat, LoginComponent);
// the only outstanding request should be a GET /login // the only outstanding request should be a GET /login
// (in particular there should be no /register request for // (in particular there should be no /register request for
@ -290,7 +289,7 @@ describe('loading:', function() {
}).then(() => { }).then(() => {
// once the sync completes, we should have a room view // once the sync completes, we should have a room view
ReactTestUtils.findRenderedComponentWithType( ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('structures.EmbeddedPage')); matrixChat, EmbeddedPage);
expect(windowLocation.hash).toEqual("#/home"); expect(windowLocation.hash).toEqual("#/home");
}); });
}); });
@ -343,7 +342,7 @@ describe('loading:', function() {
// once the sync completes, we should have a home page // once the sync completes, we should have a home page
httpBackend.verifyNoOutstandingExpectation(); httpBackend.verifyNoOutstandingExpectation();
ReactTestUtils.findRenderedComponentWithType( ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('structures.EmbeddedPage')); matrixChat, EmbeddedPage);
expect(windowLocation.hash).toEqual("#/home"); expect(windowLocation.hash).toEqual("#/home");
}); });
}); });
@ -384,7 +383,7 @@ describe('loading:', function() {
// we expect a single <Login> component // we expect a single <Login> component
ReactTestUtils.findRenderedComponentWithType( ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('structures.auth.Login'), matrixChat, LoginComponent,
); );
// the only outstanding request should be a GET /login // the only outstanding request should be a GET /login
@ -413,7 +412,7 @@ describe('loading:', function() {
// we should see a home page, even though we previously had // we should see a home page, even though we previously had
// a stored mx_last_room_id // a stored mx_last_room_id
ReactTestUtils.findRenderedComponentWithType( ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('structures.EmbeddedPage')); matrixChat, EmbeddedPage);
expect(windowLocation.hash).toEqual("#/home"); expect(windowLocation.hash).toEqual("#/home");
}); });
}); });
@ -447,7 +446,7 @@ describe('loading:', function() {
// once the sync completes, we should have a welcome page // once the sync completes, we should have a welcome page
httpBackend.verifyNoOutstandingExpectation(); httpBackend.verifyNoOutstandingExpectation();
ReactTestUtils.findRenderedComponentWithType( ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('auth.Welcome')); matrixChat, WelcomeComponent);
expect(windowLocation.hash).toEqual("#/welcome"); expect(windowLocation.hash).toEqual("#/welcome");
}); });
}); });
@ -480,7 +479,7 @@ describe('loading:', function() {
// once the sync completes, we should have a welcome page // once the sync completes, we should have a welcome page
httpBackend.verifyNoOutstandingExpectation(); httpBackend.verifyNoOutstandingExpectation();
ReactTestUtils.findRenderedComponentWithType( ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('auth.Welcome')); matrixChat, WelcomeComponent);
expect(windowLocation.hash).toEqual("#/welcome"); expect(windowLocation.hash).toEqual("#/welcome");
expect(MatrixClientPeg.get().baseUrl).toEqual(DEFAULT_HS_URL); expect(MatrixClientPeg.get().baseUrl).toEqual(DEFAULT_HS_URL);
expect(MatrixClientPeg.get().idBaseUrl).toEqual(DEFAULT_IS_URL); expect(MatrixClientPeg.get().idBaseUrl).toEqual(DEFAULT_IS_URL);
@ -539,7 +538,7 @@ describe('loading:', function() {
}).then(() => { }).then(() => {
// once the sync completes, we should have a home page // once the sync completes, we should have a home page
ReactTestUtils.findRenderedComponentWithType( ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('structures.EmbeddedPage')); matrixChat, EmbeddedPage);
// we simulate a click on the 'login' button by firing off // we simulate a click on the 'login' button by firing off
// the relevant dispatch. // the relevant dispatch.
@ -561,7 +560,7 @@ describe('loading:', function() {
// we expect a single <Login> component // we expect a single <Login> component
ReactTestUtils.findRenderedComponentWithType( ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('structures.auth.Login'), matrixChat, LoginComponent,
); );
}); });
@ -569,7 +568,7 @@ describe('loading:', function() {
// ILAG renders this obsolete. I think. // ILAG renders this obsolete. I think.
it('should allow us to return to the app', function() { it('should allow us to return to the app', function() {
const login = ReactTestUtils.findRenderedComponentWithType( const login = ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('structures.auth.Login') matrixChat, LoginComponent
); );
const linkText = 'Return to app'; const linkText = 'Return to app';
@ -586,7 +585,7 @@ describe('loading:', function() {
return sleep(1).then(() => { return sleep(1).then(() => {
// we should be straight back into the home page // we should be straight back into the home page
ReactTestUtils.findRenderedComponentWithType( ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('structures.EmbeddedPage')); matrixChat, EmbeddedPage);
}); });
}); });
*/ */
@ -733,19 +732,19 @@ function awaitRoomView(matrixChat, retryLimit?, retryCount?) {
function awaitLoginComponent(matrixChat, attempts?) { function awaitLoginComponent(matrixChat, attempts?) {
return MatrixReactTestUtils.waitForRenderedComponentWithType( return MatrixReactTestUtils.waitForRenderedComponentWithType(
matrixChat, sdk.getComponent('structures.auth.Login'), attempts, matrixChat, LoginComponent, attempts,
); );
} }
function awaitWelcomeComponent(matrixChat, attempts?) { function awaitWelcomeComponent(matrixChat, attempts?) {
return MatrixReactTestUtils.waitForRenderedComponentWithType( return MatrixReactTestUtils.waitForRenderedComponentWithType(
matrixChat, sdk.getComponent('auth.Welcome'), attempts, matrixChat, WelcomeComponent, attempts,
); );
} }
function moveFromWelcomeToLogin(matrixChat) { function moveFromWelcomeToLogin(matrixChat) {
ReactTestUtils.findRenderedComponentWithType( ReactTestUtils.findRenderedComponentWithType(
matrixChat, sdk.getComponent('auth.Welcome')); matrixChat, WelcomeComponent);
dis.dispatch({ action: 'start_login' }); dis.dispatch({ action: 'start_login' });
return awaitLoginComponent(matrixChat); return awaitLoginComponent(matrixChat);
} }

9
test/skin-sdk.js
View file

@ -1,9 +0,0 @@
/*
* skin-sdk.js
*
* Skins the react-sdk with the vector components
*/
import * as sdk from "matrix-react-sdk";
import * as skin from "../src/component-index";
sdk.loadSkin(skin);

4
tsconfig.json
View file

@ -1,7 +1,7 @@
{ {
"compilerOptions": { "compilerOptions": {
"experimentalDecorators": true, "experimentalDecorators": false,
"emitDecoratorMetadata": true, "emitDecoratorMetadata": false,
"resolveJsonModule": true, "resolveJsonModule": true,
"esModuleInterop": true, "esModuleInterop": true,
"module": "commonjs", "module": "commonjs",

26
webpack.config.js
View file

@ -49,14 +49,24 @@ try {
} catch (e) { } catch (e) {
// ignore - not important // ignore - not important
} }
const moduleReplacementPlugins = Object.entries(fileOverrides).map(([oldPath, newPath]) => {
return new webpack.NormalModuleReplacementPlugin( function parseOverridesToReplacements(overrides) {
// because the input is effectively defined by the person running the build, we don't return Object.entries(overrides).map(([oldPath, newPath]) => {
// need to do anything special to protect against regex overrunning, etc. return new webpack.NormalModuleReplacementPlugin(
new RegExp(oldPath.replace(/\//g, '[\\/\\\\]').replace(/\./g, '\\.')), // because the input is effectively defined by the person running the build, we don't
path.resolve(__dirname, newPath), // need to do anything special to protect against regex overrunning, etc.
); new RegExp(oldPath.replace(/\//g, '[\\/\\\\]').replace(/\./g, '\\.')),
}); path.resolve(__dirname, newPath),
);
});
}
const moduleReplacementPlugins = [
...parseOverridesToReplacements(require('./components.json')),
// Allow customisations to override the default components too
...parseOverridesToReplacements(fileOverrides),
];
module.exports = (env, argv) => { module.exports = (env, argv) => {
// Establish settings based on the environment and args. // Establish settings based on the environment and args.

25
yarn.lock
View file

@ -116,7 +116,7 @@
browserslist "^4.17.5" browserslist "^4.17.5"
semver "^6.3.0" semver "^6.3.0"
"@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.1": "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7":
version "7.17.1" version "7.17.1"
resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.1.tgz#9699f14a88833a7e055ce57dcd3ffdcd25186b21" resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.1.tgz#9699f14a88833a7e055ce57dcd3ffdcd25186b21"
integrity sha512-JBdSr/LtyYIno/pNnJ75lBcqc3Z1XXujzPanHqjvvrhOA+DTceTFuJi8XjmWTZh4r3fsdfqaCMN0iZemdkxZHQ== integrity sha512-JBdSr/LtyYIno/pNnJ75lBcqc3Z1XXujzPanHqjvvrhOA+DTceTFuJi8XjmWTZh4r3fsdfqaCMN0iZemdkxZHQ==
@ -354,17 +354,6 @@
"@babel/helper-plugin-utils" "^7.16.7" "@babel/helper-plugin-utils" "^7.16.7"
"@babel/plugin-syntax-class-static-block" "^7.14.5" "@babel/plugin-syntax-class-static-block" "^7.14.5"
"@babel/plugin-proposal-decorators@^7.12.12":
version "7.17.2"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.17.2.tgz#c36372ddfe0360cac1ee331a238310bddca11493"
integrity sha512-WH8Z95CwTq/W8rFbMqb9p3hicpt4RX4f0K659ax2VHxgOyT6qQmUaEVEjIh4WR9Eh9NymkVn5vwsrE68fAQNUw==
dependencies:
"@babel/helper-create-class-features-plugin" "^7.17.1"
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/helper-replace-supers" "^7.16.7"
"@babel/plugin-syntax-decorators" "^7.17.0"
charcodes "^0.2.0"
"@babel/plugin-proposal-dynamic-import@^7.16.7": "@babel/plugin-proposal-dynamic-import@^7.16.7":
version "7.16.7" version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2"
@ -503,13 +492,6 @@
dependencies: dependencies:
"@babel/helper-plugin-utils" "^7.14.5" "@babel/helper-plugin-utils" "^7.14.5"
"@babel/plugin-syntax-decorators@^7.17.0":
version "7.17.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.17.0.tgz#a2be3b2c9fe7d78bd4994e790896bc411e2f166d"
integrity sha512-qWe85yCXsvDEluNP0OyeQjH63DlhAR3W7K9BxxU1MvbDb48tgBG+Ao6IJJ6smPDrrVzSQZrbF6donpkFBMcs3A==
dependencies:
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/plugin-syntax-dynamic-import@^7.8.3": "@babel/plugin-syntax-dynamic-import@^7.8.3":
version "7.8.3" version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
@ -3397,11 +3379,6 @@ character-reference-invalid@^1.0.0:
resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560" resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg== integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
charcodes@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4"
integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
cheerio-select@^1.5.0: cheerio-select@^1.5.0:
version "1.5.0" version "1.5.0"
resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823" resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823"