diff --git a/.eslintrc.js b/.eslintrc.js
index 62d24ea707..971809f851 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -47,6 +47,9 @@ module.exports = {
}],
"react/jsx-key": ["error"],
+ // Components in JSX should always be defined.
+ "react/jsx-no-undef": "error",
+
// Assert no spacing in JSX curly brackets
//
//
diff --git a/.travis-test-riot.sh b/.travis-test-riot.sh
index 88b3719b3a..d1c2804b2a 100755
--- a/.travis-test-riot.sh
+++ b/.travis-test-riot.sh
@@ -30,7 +30,7 @@ popd
if [ "$TRAVIS_BRANCH" = "develop" ]
then
# run end to end tests
- git clone https://github.com/matrix-org/matrix-react-end-to-end-tests.git --branch master
+ scripts/fetchdep.sh matrix-org matrix-react-end-to-end-tests master
pushd matrix-react-end-to-end-tests
ln -s $REACT_SDK_DIR/$RIOT_WEB_DIR riot/riot-web
# PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ./install.sh
diff --git a/CHANGELOG.md b/CHANGELOG.md
index eea47dcb8f..742b8b4529 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,57 @@
+Changes in [0.14.7](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.7) (2018-12-10)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.7-rc.2...v0.14.7)
+
+ * No changes since rc.2
+
+Changes in [0.14.7-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.7-rc.2) (2018-12-06)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.7-rc.1...v0.14.7-rc.2)
+
+ * Ship the babelrc file to npm
+ [\#2332](https://github.com/matrix-org/matrix-react-sdk/pull/2332)
+
+Changes in [0.14.7-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.7-rc.1) (2018-12-06)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.6...v0.14.7-rc.1)
+
+ * Suppress CORS errors in the 'failed to join room' dialog
+ [\#2306](https://github.com/matrix-org/matrix-react-sdk/pull/2306)
+ * Check if users exist before inviting them and communicate errors
+ [\#2317](https://github.com/matrix-org/matrix-react-sdk/pull/2317)
+ * Update from Weblate.
+ [\#2328](https://github.com/matrix-org/matrix-react-sdk/pull/2328)
+ * Allow group summary to load when /users fails
+ [\#2326](https://github.com/matrix-org/matrix-react-sdk/pull/2326)
+ * Show correct text if passphrase is skipped
+ [\#2324](https://github.com/matrix-org/matrix-react-sdk/pull/2324)
+ * Add password strength meter to backup creation UI
+ [\#2294](https://github.com/matrix-org/matrix-react-sdk/pull/2294)
+ * Check upload limits before trying to upload large files
+ [\#1876](https://github.com/matrix-org/matrix-react-sdk/pull/1876)
+ * Support .well-known discovery
+ [\#2227](https://github.com/matrix-org/matrix-react-sdk/pull/2227)
+ * Make create key backup dialog async
+ [\#2291](https://github.com/matrix-org/matrix-react-sdk/pull/2291)
+ * Forgot to enable continue button on download
+ [\#2288](https://github.com/matrix-org/matrix-react-sdk/pull/2288)
+ * Online incremental megolm backups (v2)
+ [\#2169](https://github.com/matrix-org/matrix-react-sdk/pull/2169)
+ * Add recovery key download button
+ [\#2284](https://github.com/matrix-org/matrix-react-sdk/pull/2284)
+ * Passphrase Support for e2e backups
+ [\#2283](https://github.com/matrix-org/matrix-react-sdk/pull/2283)
+ * Update async dialog interface to use promises
+ [\#2286](https://github.com/matrix-org/matrix-react-sdk/pull/2286)
+ * Support for m.login.sso
+ [\#2279](https://github.com/matrix-org/matrix-react-sdk/pull/2279)
+ * Added badge to non-autoplay GIFs
+ [\#2235](https://github.com/matrix-org/matrix-react-sdk/pull/2235)
+ * Improve terms auth flow
+ [\#2277](https://github.com/matrix-org/matrix-react-sdk/pull/2277)
+ * Handle crypto db version upgrade
+ [\#2282](https://github.com/matrix-org/matrix-react-sdk/pull/2282)
+
Changes in [0.14.6](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.6) (2018-11-22)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.5...v0.14.6)
diff --git a/CONTRIBUTING.rst b/CONTRIBUTING.rst
index 99025f0e0a..f7c8c8b1c5 100644
--- a/CONTRIBUTING.rst
+++ b/CONTRIBUTING.rst
@@ -1,4 +1,4 @@
Contributing code to The React SDK
==================================
-matrix-react-sdk follows the same pattern as https://github.com/matrix-org/synapse/blob/master/CONTRIBUTING.rst
+matrix-react-sdk follows the same pattern as https://github.com/matrix-org/matrix-js-sdk/blob/master/CONTRIBUTING.rst
diff --git a/README.md b/README.md
index ac45497dd4..c70f68902b 100644
--- a/README.md
+++ b/README.md
@@ -128,60 +128,35 @@ Github Issues
All issues should be filed under https://github.com/vector-im/riot-web/issues
for now.
-OUTDATED: To Create Your Own Skin
-=================================
+Development
+===========
-**This is ALL LIES currently, and needs to be updated**
+Ensure you have the latest stable Node JS runtime installed (v8.x is the best choice). Then check out
+the code and pull in dependencies:
-Skins are modules are exported from such a package in the `lib` directory.
-`lib/skins` contains one directory per-skin, named after the skin, and the
-`modules` directory contains modules as their javascript files.
+```bash
+git clone https://github.com/matrix-org/matrix-react-sdk.git
+cd matrix-react-sdk
+git checkout develop
+npm install
+```
-A basic skin is provided in the matrix-react-skin package. This also contains
-a minimal application that instantiates the basic skin making a working matrix
-client.
+`matrix-react-sdk` depends on `matrix-js-sdk`. To make use of changes in the
+latter and to ensure tests run against the develop branch of `matrix-js-sdk`,
+you should run the following which will sync changes from the JS sdk here.
-You can use matrix-react-sdk directly, but to do this you would have to provide
-'views' for each UI component. To get started quickly, use matrix-react-skin.
+```bash
+npm link ../matrix-js-sdk
+```
-To actually change the look of a skin, you can create a base skin (which
-does not use views from any other skin) or you can make a derived skin.
-Note that derived skins are currently experimental: for example, the CSS
-from the skins it is based on will not be automatically included.
+Command assumes a checked out and installed `matrix-js-sdk` folder in parent
+folder.
-To make a skin, create React classes for any custom components you wish to add
-in a skin within `src/skins/`. These can be based off the files in
-`views` in the `matrix-react-skin` package, modifying the require() statement
-appropriately.
+Running tests
+=============
-If you make a derived skin, you only need copy the files you wish to customise.
+Ensure you've followed the above development instructions and then:
-Once you've made all your view files, you need to make a `skinfo.json`. This
-contains all the metadata for a skin. This is a JSON file with, currently, a
-single key, 'baseSkin'. Set this to the empty string if your skin is a base skin,
-or for a derived skin, set it to the path of your base skin's skinfo.json file, as
-you would use in a require call.
-
-Now you have the basis of a skin, you need to generate a skindex.json file. The
-`reskindex.js` tool in matrix-react-sdk does this for you. It is suggested that
-you add an npm script to run this, as in matrix-react-skin.
-
-For more specific detail on any of these steps, look at matrix-react-skin.
-
-Alternative instructions:
-
- * Create a new NPM project. Be sure to directly depend on react, (otherwise
- you can end up with two copies of react).
- * Create an index.js file that sets up react. Add require statements for
- React and matrix-react-sdk. Load a skin using the 'loadSkin' method on the
- SDK and call Render. This can be a skin provided by a separate package or
- a skin in the same package.
- * Add a way to build your project: we suggest copying the scripts block
- from matrix-react-skin (which uses babel and webpack). You could use
- different tools but remember that at least the skins and modules of
- your project should end up in plain (ie. non ES6, non JSX) javascript in
- the lib directory at the end of the build process, as well as any
- packaging that you might do.
- * Create an index.html file pulling in your compiled javascript and the
- CSS bundle from the skin you use. For now, you'll also need to manually
- import CSS from any skins that your skin inherts from.
+```bash
+npm run test
+```
diff --git a/code_style.md b/code_style.md
index 2cac303e54..96f3879ebc 100644
--- a/code_style.md
+++ b/code_style.md
@@ -165,7 +165,6 @@ ECMAScript
React
-----
-- Use React.createClass rather than ES6 classes for components, as the boilerplate is way too heavy on ES6 currently. ES7 might improve it.
- Pull out functions in props to the class, generally as specific event handlers:
```jsx
@@ -174,11 +173,38 @@ React
// Better
// Best, if onFooClick would do anything other than directly calling doStuff
```
-
- Not doing so is acceptable in a single case; in function-refs:
-
+
+ Not doing so is acceptable in a single case: in function-refs:
+
```jsx
this.component = self}>
```
+
+- Prefer classes that extend `React.Component` (or `React.PureComponent`) instead of `React.createClass`
+ - You can avoid the need to bind handler functions by using [property initializers](https://reactjs.org/docs/react-component.html#constructor):
+
+ ```js
+ class Widget extends React.Component
+ onFooClick = () => {
+ ...
+ }
+ }
+ ```
+ - To define `propTypes`, use a static property:
+ ```js
+ class Widget extends React.Component
+ static propTypes = {
+ ...
+ }
+ }
+ ```
+ - If you need to specify initial component state, [assign it](https://reactjs.org/docs/react-component.html#constructor) to `this.state` in the constructor:
+ ```js
+ constructor(props) {
+ super(props);
+ // Don't call this.setState() here!
+ this.state = { counter: 0 };
+ }
+ ```
- Think about whether your component really needs state: are you duplicating
information in component state that could be derived from the model?
diff --git a/package.json b/package.json
index b5cdfdf401..6dc9a6bfcf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
- "version": "0.14.6",
+ "version": "0.14.7",
"description": "SDK for matrix.org using React",
"author": "matrix.org",
"repository": {
@@ -10,6 +10,7 @@
"license": "Apache-2.0",
"main": "lib/index.js",
"files": [
+ ".babelrc",
".eslintrc.js",
"CHANGELOG.md",
"CONTRIBUTING.rst",
@@ -72,11 +73,12 @@
"gfm.css": "^1.1.1",
"glob": "^5.0.14",
"highlight.js": "^9.13.0",
+ "is-ip": "^2.0.0",
"isomorphic-fetch": "^2.2.1",
"linkifyjs": "^2.1.6",
"lodash": "^4.13.1",
"lolex": "2.3.2",
- "matrix-js-sdk": "0.14.1",
+ "matrix-js-sdk": "0.14.2",
"optimist": "^0.6.1",
"pako": "^1.0.5",
"prop-types": "^15.5.8",
@@ -96,7 +98,8 @@
"text-encoding-utf-8": "^1.0.1",
"url": "^0.11.0",
"velocity-vector": "github:vector-im/velocity#059e3b2",
- "whatwg-fetch": "^1.1.1"
+ "whatwg-fetch": "^1.1.1",
+ "zxcvbn": "^4.4.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
@@ -121,8 +124,9 @@
"eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-react": "^7.7.0",
"estree-walker": "^0.5.0",
- "expect": "^1.16.0",
+ "expect": "^23.6.0",
"flow-parser": "^0.57.3",
+ "jest-mock": "^23.2.0",
"karma": "^3.0.0",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "^1.0.1",
diff --git a/res/css/_common.scss b/res/css/_common.scss
index 149ec75569..bec4c02c18 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -32,7 +32,7 @@ body {
margin: 0px;
}
-div.error, div.warning {
+.error, .warning {
color: $warning-color;
}
@@ -47,7 +47,7 @@ h2 {
a:hover,
a:link,
a:visited {
- color: $accent-color;
+ color: $accent-color-alt;
}
input[type=text], input[type=password], textarea {
@@ -301,7 +301,7 @@ textarea {
}
.mx_textButton {
- @mixin mx_DialogButton_small;
+ @mixin mx_DialogButton_small;
}
.mx_textButton:hover {
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 16bb4938c1..bdcf27ac16 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -26,8 +26,10 @@
@import "./structures/_ViewSource.scss";
@import "./structures/login/_Login.scss";
@import "./views/avatars/_BaseAvatar.scss";
+@import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_RoomTileContextMenu.scss";
+@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
@import "./views/context_menus/_TopLeftMenu.scss";
@import "./views/dialogs/_BugReportDialog.scss";
@@ -36,7 +38,6 @@
@import "./views/dialogs/_ChatInviteDialog.scss";
@import "./views/dialogs/_ConfirmUserActionDialog.scss";
@import "./views/dialogs/_CreateGroupDialog.scss";
-@import "./views/dialogs/_CreateKeyBackupDialog.scss";
@import "./views/dialogs/_CreateRoomDialog.scss";
@import "./views/dialogs/_DeactivateAccountDialog.scss";
@import "./views/dialogs/_DevtoolsDialog.scss";
@@ -50,6 +51,7 @@
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss";
@import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
+@import "./views/dialogs/keybackup/_NewRecoveryMethodDialog.scss";
@import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
@import "./views/directory/_NetworkDropdown.scss";
@import "./views/elements/_AccessibleButton.scss";
@@ -105,6 +107,7 @@
@import "./views/rooms/_RoomHeader.scss";
@import "./views/rooms/_RoomList.scss";
@import "./views/rooms/_RoomPreviewBar.scss";
+@import "./views/rooms/_RoomRecoveryReminder.scss";
@import "./views/rooms/_RoomSettings.scss";
@import "./views/rooms/_RoomTile.scss";
@import "./views/rooms/_RoomTooltip.scss";
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 1fe7a42678..47cb231b58 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -89,12 +89,6 @@ limitations under the License.
pointer-events: none;
}
-.mx_LeftPanel_container.collapsed .mx_RoleButton {
- margin-right: 0px ! important;
- padding-top: 3px ! important;
- padding-bottom: 3px ! important;
-}
-
.mx_BottomLeftMenu_options > div {
display: inline-block;
}
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 07fe404749..592eea067e 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -45,7 +45,8 @@ limitations under the License.
cursor: pointer;
flex: 0 0 auto;
vertical-align: top;
- padding-left: 4px;
+ margin-top: 4px;
+ padding-left: 5px;
padding-right: 5px;
text-align: center;
position: relative;
@@ -57,7 +58,7 @@ limitations under the License.
}
.mx_RightPanel_headerButton_highlight {
- border-color: $accent-color;
+ border-color: $button-bg-color;
}
.mx_RightPanel_headerButton_badge {
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index ce28c168b9..2d471ee198 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -19,14 +19,14 @@ limitations under the License.
each with a flex-shrink difference of 4 order of magnitude,
so they ideally wouldn't affect each other.
lowest category: .mx_RoomSubList
- flex:-shrink: 10000000
+ flex-shrink: 10000000
distribute size of items within the same categery by their size
middle category: .mx_RoomSubList.resized-sized
- flex:-shrink: 1000
+ flex-shrink: 1000
applied when using the resizer, will have a max-height set to it,
to limit the size
highest category: .mx_RoomSubList.resized-all
- flex:-shrink: 1
+ flex-shrink: 1
small flex-shrink value (1), is only added if you can drag the resizer so far
so in practice you can only assign this category if there is enough space.
*/
@@ -39,7 +39,7 @@ limitations under the License.
}
.mx_RoomSubList_nonEmpty {
- min-height: 76px;
+ min-height: 70px;
.mx_AutoHideScrollbar_offset {
padding-bottom: 4px;
@@ -94,7 +94,7 @@ limitations under the License.
font-weight: 600;
font-size: 12px;
padding: 0 5px;
- background-color: $accent-color;
+ background-color: $roomtile-name-color;
}
.mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
@@ -154,7 +154,7 @@ limitations under the License.
position: sticky;
left: 0;
right: 0;
- height: 40px;
+ height: 30px;
content: "";
display: block;
z-index: 100;
@@ -162,20 +162,20 @@ limitations under the License.
}
&.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
- margin-top: -40px;
+ margin-top: -30px;
}
&.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
- margin-bottom: -40px;
+ margin-bottom: -30px;
}
&.mx_IndicatorScrollbar_topOverflow::before {
top: 0;
- background: linear-gradient($secondary-accent-color, transparent);
+ background: linear-gradient(to top, rgba(242,245,248,0), rgba(242,245,248,1));
}
&.mx_IndicatorScrollbar_bottomOverflow::after {
bottom: 0;
- background: linear-gradient(transparent, $secondary-accent-color);
+ background: linear-gradient(to bottom, rgba(242,245,248,0), rgba(242,245,248,1));
}
}
diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 85e5c1742f..77eefc7e10 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -124,10 +124,23 @@ limitations under the License.
padding-right: 4px;
}
+.mx_TagPanel_groupsButton {
+ flex: 0;
+ margin: 17px 0 3px 0;
+}
+
+.mx_TagPanel_groupsButton > .mx_GroupsButton:before {
+ mask: url('../../img/feather-icons/users.svg');
+ mask-position: center 11px;
+}
+
+.mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
+ mask: url('../../img/feather-icons/life-buoy.svg');
+ mask-position: center 9px;
+}
+
.mx_TagPanel_groupsButton > .mx_AccessibleButton {
- flex: auto;
- margin-bottom: 17px;
- margin-top: 18px;
+ margin-bottom: 12px;
height: 40px;
width: 40px;
border-radius: 20px;
@@ -138,9 +151,7 @@ limitations under the License.
&:before {
background-color: $tagpanel-bg-color;
- mask: url('../../img/icons-groups-nobg.svg');
mask-repeat: no-repeat;
- mask-position: center 8px;
content: '';
position: absolute;
top: 0;
diff --git a/res/css/views/dialogs/_CreateKeyBackupDialog.scss b/res/css/views/avatars/_MemberStatusMessageAvatar.scss
similarity index 74%
rename from res/css/views/dialogs/_CreateKeyBackupDialog.scss
rename to res/css/views/avatars/_MemberStatusMessageAvatar.scss
index a422cf858c..29cae9df34 100644
--- a/res/css/views/dialogs/_CreateKeyBackupDialog.scss
+++ b/res/css/views/avatars/_MemberStatusMessageAvatar.scss
@@ -14,12 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_CreateKeyBackupDialog {
- padding-right: 40px;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKey {
- padding: 20px;
- color: $info-plinth-fg-color;
- background-color: $info-plinth-bg-color;
+.mx_MemberStatusMessageAvatar_hasStatus {
+ border: 2px solid $accent-color;
+ border-radius: 40px;
+ padding-right: 0 !important; /* Override AccessibleButton styling */
}
diff --git a/res/css/views/context_menus/_StatusMessageContextMenu.scss b/res/css/views/context_menus/_StatusMessageContextMenu.scss
new file mode 100644
index 0000000000..873ad99495
--- /dev/null
+++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss
@@ -0,0 +1,55 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_StatusMessageContextMenu_message {
+ display: inline-block;
+ border-radius: 3px 0 0 3px;
+ border: 1px solid $input-border-color;
+ font-size: 13px;
+ padding: 7px 7px 7px 9px;
+ width: 135px;
+ background-color: $primary-bg-color !important;
+}
+
+.mx_StatusMessageContextMenu_submit {
+ display: inline-block;
+}
+
+.mx_StatusMessageContextMenu_submitFaded {
+ opacity: 0.5;
+}
+
+.mx_StatusMessageContextMenu_submit img {
+ vertical-align: middle;
+ margin-left: 8px;
+}
+
+.mx_StatusMessageContextMenu hr {
+ border: 0.5px solid $menu-border-color;
+}
+
+.mx_StatusMessageContextMenu_clearIcon {
+ margin: 5px 15px 5px 5px;
+ vertical-align: middle;
+}
+
+.mx_StatusMessageContextMenu_clear {
+ padding: 2px;
+}
+
+.mx_StatusMessageContextMenu_hasStatus .mx_StatusMessageContextMenu_clear {
+ color: $warning-color;
+}
diff --git a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
index 507c89ace7..615b61f842 100644
--- a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
+++ b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
@@ -13,27 +13,79 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
-
+
+.mx_CreateKeyBackupDialog {
+ padding-right: 40px;
+}
+
+.mx_CreateKeyBackupDialog .mx_Dialog_title {
+ /* TODO: Consider setting this for all dialog titles. */
+ margin-bottom: 1em;
+}
+
.mx_CreateKeyBackupDialog_primaryContainer {
/*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/
padding: 20px
}
+.mx_CreateKeyBackupDialog_primaryContainer::after {
+ content: "";
+ clear: both;
+ display: block;
+}
+
+.mx_CreateKeyBackupDialog_passPhraseContainer {
+ display: flex;
+ align-items: start;
+}
+
+.mx_CreateKeyBackupDialog_passPhraseHelp {
+ flex: 1;
+ height: 85px;
+ margin-left: 20px;
+ font-size: 80%;
+}
+
+.mx_CreateKeyBackupDialog_passPhraseHelp progress {
+ width: 100%;
+}
+
.mx_CreateKeyBackupDialog_passPhraseInput {
- width: 300px;
+ flex: none;
+ width: 250px;
border: 1px solid $accent-color;
border-radius: 5px;
padding: 10px;
+ margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_passPhraseMatch {
- float: right;
+ margin-left: 20px;
}
-.mx_CreateKeyBackupDialog_recoveryKeyButtons {
- float: right;
+.mx_CreateKeyBackupDialog_recoveryKeyHeader {
+ margin-bottom: 1em;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKeyContainer {
+ display: flex;
}
.mx_CreateKeyBackupDialog_recoveryKey {
- width: 300px;
+ width: 262px;
+ padding: 20px;
+ color: $info-plinth-fg-color;
+ background-color: $info-plinth-bg-color;
+ margin-right: 12px;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKeyButtons {
+ flex: 1;
+ display: flex;
+ align-items: center;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
+ flex: 1;
+ white-space: nowrap;
}
diff --git a/res/css/views/dialogs/keybackup/_NewRecoveryMethodDialog.scss b/res/css/views/dialogs/keybackup/_NewRecoveryMethodDialog.scss
new file mode 100644
index 0000000000..370f82d9ab
--- /dev/null
+++ b/res/css/views/dialogs/keybackup/_NewRecoveryMethodDialog.scss
@@ -0,0 +1,41 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_NewRecoveryMethodDialog .mx_Dialog_title {
+ margin-bottom: 32px;
+}
+
+.mx_NewRecoveryMethodDialog_title {
+ position: relative;
+ padding-left: 45px;
+ padding-bottom: 10px;
+
+ &:before {
+ mask: url("../../../img/e2e/lock-warning.svg");
+ mask-repeat: no-repeat;
+ background-color: $primary-fg-color;
+ content: "";
+ position: absolute;
+ top: -6px;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+}
+
+.mx_NewRecoveryMethodDialog .mx_Dialog_buttons {
+ margin-top: 36px;
+}
diff --git a/res/css/views/elements/_ResizeHandle.scss b/res/css/views/elements/_ResizeHandle.scss
index 8f533a02bc..42ff6e3825 100644
--- a/res/css/views/elements/_ResizeHandle.scss
+++ b/res/css/views/elements/_ResizeHandle.scss
@@ -17,21 +17,30 @@ limitations under the License.
.mx_ResizeHandle {
cursor: row-resize;
flex: 0 0 auto;
- background: $panel-divider-color;
- background-clip: content-box;
z-index: 100;
}
.mx_ResizeHandle.mx_ResizeHandle_horizontal {
- width: 1px;
margin: 0 -5px;
padding: 0 5px;
cursor: col-resize;
}
.mx_ResizeHandle.mx_ResizeHandle_vertical {
- height: 1px;
margin: -5px 0;
padding: 5px 0;
cursor: row-resize;
}
+
+.mx_ResizeHandle > div {
+ background: $panel-divider-color;
+}
+
+.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
+ width: 1px;
+ height: 100%;
+}
+
+.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
+ height: 1px;
+}
diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index 4289b3f2cf..c4d4d944a6 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -107,3 +107,10 @@ limitations under the License.
}
*/
+.mx_EntityTile_subtext {
+ font-size: 11px;
+ opacity: 0.5;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: clip;
+}
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 52074563f6..6b22c4fe66 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -445,7 +445,8 @@ limitations under the License.
}
.mx_EventTile_content .markdown-body a {
- color: $accent-color;
+ color: $accent-color-alt;
+ text-decoration: underline;
}
.mx_EventTile_content .markdown-body .hljs {
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index a027c575dd..4af181a464 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -132,6 +132,13 @@ limitations under the License.
margin-left: 8px;
}
+.mx_MemberInfo_statusMessage {
+ font-size: 11px;
+ opacity: 0.5;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: clip;
+}
.mx_MemberInfo .mx_MemberInfo_scrollContainer {
flex: 1;
}
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index 8e59eb85d5..567727fb64 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -87,7 +87,7 @@ limitations under the License.
.mx_MemberList_invite span {
margin: 0 auto;
- background-image: url('../../img/icon-invite-people.svg');
+ background-image: url('../../img/feather-icons/user-add.svg');
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 7d2cbfe863..0697ccf40f 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -59,8 +59,8 @@ limitations under the License.
.mx_RoomHeader_buttons {
display: flex;
align-items: center;
- margin-top: 4px;
background-color: $primary-bg-color;
+ padding-right: 5px;
}
.mx_RoomHeader_info {
@@ -197,7 +197,7 @@ limitations under the License.
}
.mx_RoomHeader_button {
- margin-left: 12px;
+ margin-left: 10px;
cursor: pointer;
}
diff --git a/res/css/views/rooms/_RoomRecoveryReminder.scss b/res/css/views/rooms/_RoomRecoveryReminder.scss
new file mode 100644
index 0000000000..e4e2d19b42
--- /dev/null
+++ b/res/css/views/rooms/_RoomRecoveryReminder.scss
@@ -0,0 +1,44 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomRecoveryReminder {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ background-color: $room-warning-bg-color;
+ padding: 20px;
+ border: 1px solid $primary-hairline-color;
+ border-bottom: unset;
+}
+
+.mx_RoomRecoveryReminder_header {
+ font-weight: bold;
+ margin-bottom: 1em;
+}
+
+.mx_RoomRecoveryReminder_body {
+ margin-bottom: 1em;
+}
+
+.mx_RoomRecoveryReminder_button {
+ @mixin mx_DialogButton;
+ margin: 0 10px;
+}
+
+.mx_RoomRecoveryReminder_button.mx_RoomRecoveryReminder_secondary {
+ @mixin mx_DialogButton_secondary;
+ background-color: transparent;
+}
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index ff54da7196..70d505e4ea 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -19,7 +19,7 @@ limitations under the License.
flex-direction: row;
align-items: center;
cursor: pointer;
- height: 40px;
+ height: 34px;
margin: 0;
padding: 0 8px 0 10px;
position: relative;
@@ -39,10 +39,6 @@ limitations under the License.
.mx_RoomTile_menuButton {
display: block;
}
-
- .mx_RoomTile_badge {
- display: none;
- }
}
.mx_RoomTile_tooltip {
@@ -52,17 +48,48 @@ limitations under the License.
left: -12px;
}
-.mx_RoomTile_avatar {
- flex: 0;
- padding: 4px;
- width: 32px;
- height: 32px;
+
+.mx_RoomTile_nameContainer {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ vertical-align: middle;
+}
+
+.mx_RoomTile_labelContainer {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.mx_RoomTile_subtext {
+ display: inline-block;
+ font-size: 11px;
+ padding: 0 0 0 7px;
+ margin: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: clip;
+ position: relative;
+ bottom: 4px;
}
.mx_RoomTile_avatar_container {
position: relative;
}
+.mx_RoomTile_avatar {
+ flex: 0;
+ padding: 4px;
+ width: 24px;
+ vertical-align: middle;
+}
+
+.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
+ padding-top: 0;
+ vertical-align: super;
+}
+
.mx_RoomTile_dm {
display: block;
position: absolute;
@@ -75,7 +102,7 @@ limitations under the License.
flex: 1 5 auto;
font-size: 14px;
font-weight: 600;
- padding: 6px;
+ padding: 0 6px;
color: $roomtile-name-color;
white-space: nowrap;
overflow-x: hidden;
@@ -118,7 +145,7 @@ limitations under the License.
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
- background-color: $accent-color;
+ background-color: $roomtile-name-color;
}
.mx_RoomTile_highlight .mx_RoomTile_badge {
@@ -136,10 +163,6 @@ limitations under the License.
.mx_RoomTile_selected {
border-radius: 4px;
background-color: $roomtile-selected-bg-color;
-
- .mx_RoomTile_name {
- color: $roomtile-selected-color;
- }
}
.mx_DNDRoomTile {
@@ -168,4 +191,3 @@ limitations under the License.
.mx_RoomTile.mx_RoomTile_transparent:focus {
background-color: $roomtile-transparent-focused-color;
}
-
diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss
index c4ca035a2e..67579552c1 100644
--- a/res/css/views/rooms/_TopUnreadMessagesBar.scss
+++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+@charset "utf-8";
+
.mx_TopUnreadMessagesBar {
z-index: 1000;
position: absolute;
@@ -22,6 +24,22 @@ limitations under the License.
width: 38px;
}
+.mx_TopUnreadMessagesBar:after {
+ content: "ยท";
+ position: absolute;
+ top: -8px;
+ left: 11px;
+ width: 16px;
+ height: 16px;
+ border-radius: 16px;
+ font-weight: 600;
+ font-size: 30px;
+ line-height: 14px;
+ text-align: center;
+ color: $secondary-accent-color;
+ background-color: $accent-color;
+}
+
.mx_TopUnreadMessagesBar_scrollUp {
height: 38px;
border-radius: 19px;
diff --git a/res/img/e2e/lock-warning.svg b/res/img/e2e/lock-warning.svg
new file mode 100644
index 0000000000..a984ed85a0
--- /dev/null
+++ b/res/img/e2e/lock-warning.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/res/img/feather-icons/face.svg b/res/img/feather-icons/face.svg
new file mode 100644
index 0000000000..0a359b2dea
--- /dev/null
+++ b/res/img/feather-icons/face.svg
@@ -0,0 +1,14 @@
+
+
diff --git a/res/img/feather-icons/files.svg b/res/img/feather-icons/files.svg
new file mode 100644
index 0000000000..c66d9ad121
--- /dev/null
+++ b/res/img/feather-icons/files.svg
@@ -0,0 +1,11 @@
+
+
diff --git a/res/img/feather-icons/grid.svg b/res/img/feather-icons/grid.svg
new file mode 100644
index 0000000000..e6912b0cc7
--- /dev/null
+++ b/res/img/feather-icons/grid.svg
@@ -0,0 +1,13 @@
+
+
diff --git a/res/img/feather-icons/life-buoy.svg b/res/img/feather-icons/life-buoy.svg
new file mode 100644
index 0000000000..20bd0f0b5d
--- /dev/null
+++ b/res/img/feather-icons/life-buoy.svg
@@ -0,0 +1,18 @@
+
+
diff --git a/res/img/feather-icons/notifications.svg b/res/img/feather-icons/notifications.svg
new file mode 100644
index 0000000000..2fe85e810c
--- /dev/null
+++ b/res/img/feather-icons/notifications.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/res/img/feather-icons/paperclip.svg b/res/img/feather-icons/paperclip.svg
new file mode 100644
index 0000000000..ed2bb88681
--- /dev/null
+++ b/res/img/feather-icons/paperclip.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/res/img/feather-icons/phone.svg b/res/img/feather-icons/phone.svg
new file mode 100644
index 0000000000..58b257f113
--- /dev/null
+++ b/res/img/feather-icons/phone.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/res/img/feather-icons/search-input.svg b/res/img/feather-icons/search-input.svg
new file mode 100644
index 0000000000..3be5acb32e
--- /dev/null
+++ b/res/img/feather-icons/search-input.svg
@@ -0,0 +1,11 @@
+
+
diff --git a/res/img/feather-icons/search.svg b/res/img/feather-icons/search.svg
new file mode 100644
index 0000000000..8b14246f64
--- /dev/null
+++ b/res/img/feather-icons/search.svg
@@ -0,0 +1,11 @@
+
+
diff --git a/res/img/feather-icons/settings.svg b/res/img/feather-icons/settings.svg
new file mode 100644
index 0000000000..ea7ce5c55b
--- /dev/null
+++ b/res/img/feather-icons/settings.svg
@@ -0,0 +1,11 @@
+
+
diff --git a/res/img/feather-icons/share.svg b/res/img/feather-icons/share.svg
new file mode 100644
index 0000000000..a012e1b7a5
--- /dev/null
+++ b/res/img/feather-icons/share.svg
@@ -0,0 +1,14 @@
+
+
diff --git a/res/img/feather-icons/user-add.svg b/res/img/feather-icons/user-add.svg
new file mode 100644
index 0000000000..cbb25934c1
--- /dev/null
+++ b/res/img/feather-icons/user-add.svg
@@ -0,0 +1,13 @@
+
+
diff --git a/res/img/feather-icons/user.svg b/res/img/feather-icons/user.svg
new file mode 100644
index 0000000000..a789e580d5
--- /dev/null
+++ b/res/img/feather-icons/user.svg
@@ -0,0 +1,11 @@
+
+
diff --git a/res/img/feather-icons/users.svg b/res/img/feather-icons/users.svg
new file mode 100644
index 0000000000..b0deac0a9e
--- /dev/null
+++ b/res/img/feather-icons/users.svg
@@ -0,0 +1,15 @@
+
+
diff --git a/res/img/feather-icons/video.svg b/res/img/feather-icons/video.svg
new file mode 100644
index 0000000000..a4c456832f
--- /dev/null
+++ b/res/img/feather-icons/video.svg
@@ -0,0 +1,11 @@
+
+
diff --git a/res/img/icons-checkmark.svg b/res/img/icons-checkmark.svg
new file mode 100644
index 0000000000..3c5392003d
--- /dev/null
+++ b/res/img/icons-checkmark.svg
@@ -0,0 +1,17 @@
+
+
diff --git a/res/img/icons-close.svg b/res/img/icons-close.svg
index e516140dd2..b2dd44fc26 100644
--- a/res/img/icons-close.svg
+++ b/res/img/icons-close.svg
@@ -75,22 +75,22 @@
-
+
-
\ No newline at end of file
+
diff --git a/res/img/icons-room-add.svg b/res/img/icons-room-add.svg
index 6dd2e21295..f0b7584df9 100644
--- a/res/img/icons-room-add.svg
+++ b/res/img/icons-room-add.svg
@@ -1,71 +1,9 @@
-
-