diff --git a/.eslintignore.errorfiles b/.eslintignore.errorfiles
index e7f6ee1f84..02629ea169 100644
--- a/.eslintignore.errorfiles
+++ b/.eslintignore.errorfiles
@@ -34,7 +34,7 @@ src/components/views/rooms/LinkPreviewWidget.js
src/components/views/rooms/MemberDeviceInfo.js
src/components/views/rooms/MemberInfo.js
src/components/views/rooms/MemberList.js
-src/components/views/rooms/MessageComposer.js
+src/components/views/rooms/SlateMessageComposer.js
src/components/views/rooms/PinnedEventTile.js
src/components/views/rooms/RoomList.js
src/components/views/rooms/RoomPreviewBar.js
@@ -50,7 +50,6 @@ src/components/views/settings/Notifications.js
src/GroupAddressPicker.js
src/HtmlUtils.js
src/ImageUtils.js
-src/languageHandler.js
src/linkify-matrix.js
src/Markdown.js
src/MatrixClientPeg.js
diff --git a/.stylelintrc.js b/.stylelintrc.js
index 97e1ec8023..f028c76cc0 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -15,6 +15,9 @@ module.exports = {
"number-leading-zero": null,
"selector-list-comma-newline-after": null,
"at-rule-no-unknown": null,
- "scss/at-rule-no-unknown": true,
+ "scss/at-rule-no-unknown": [true, {
+ // https://github.com/vector-im/riot-web/issues/10544
+ "ignoreAtRules": ["define-mixin"],
+ }],
}
}
diff --git a/docs/ciderEditor.md b/docs/ciderEditor.md
index 2448be852a..e67c74a95c 100644
--- a/docs/ciderEditor.md
+++ b/docs/ciderEditor.md
@@ -17,7 +17,7 @@ The parts are then reconciled with the DOM.
When typing in the `contenteditable` element, the `input` event fires and
the DOM of the editor is turned into a string. The way this is done has
some logic to it to deal with adding newlines for block elements, to make sure
-the caret offset is calculated in the same way as the content string, and the ignore
+the caret offset is calculated in the same way as the content string, and to ignore
caret nodes (more on that later).
For these reasons it doesn't use `innerText`, `textContent` or anything similar.
The model addresses any content in the editor within as an offset within this string.
@@ -25,13 +25,13 @@ The caret position is thus also converted from a position in the DOM tree
to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.js`.
Once the content string and caret offset is calculated, it is passed to the `update()`
-method of the model. The model first calculates the same content string its current parts,
+method of the model. The model first calculates the same content string of its current parts,
basically just concatenating their text. It then looks for differences between
the current and the new content string. The diffing algorithm is very basic,
and assumes there is only one change around the caret offset,
so this should be very inexpensive. See `diff.js` for details.
-The result of the diffing is the strings that was added and/or removed from
+The result of the diffing is the strings that were added and/or removed from
the current content. These differences are then applied to the parts,
where parts can apply validation logic to these changes.
@@ -48,7 +48,8 @@ to leave the parts it intersects alone.
The benefit of this is that we can use the `input` event, which is broadly supported,
to find changes in the editor. We don't have to rely on keyboard events,
-which relate poorly to text input or changes.
+which relate poorly to text input or changes, and don't need the `beforeinput` event,
+which isn't broadly supported yet.
Once the parts of the model are updated, the DOM of the editor is then reconciled
with the new model state, see `renderModel` in `render.js` for this.
diff --git a/karma.conf.js b/karma.conf.js
index e2728cdc09..d55be049bb 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -28,7 +28,7 @@ process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
function fileExists(name) {
try {
- fs.statSync(gsCss);
+ fs.statSync(name);
return true;
} catch (e) {
return false;
@@ -166,7 +166,7 @@ module.exports = function (config) {
]
},
{
- test: /\.(gif|png|svg|ttf)$/,
+ test: /\.(gif|png|svg|ttf|woff2)$/,
loader: 'file-loader',
},
],
diff --git a/package.json b/package.json
index 8e1a1fa668..70de250830 100644
--- a/package.json
+++ b/package.json
@@ -93,10 +93,10 @@
"qrcode-react": "^0.1.16",
"qs": "^6.6.0",
"querystring": "^0.2.0",
- "react": "^15.6.0",
- "react-addons-css-transition-group": "15.3.2",
+ "react": "^16.9.0",
+ "react-addons-css-transition-group": "15.6.2",
"react-beautiful-dnd": "^4.0.1",
- "react-dom": "^15.6.0",
+ "react-dom": "^16.9.0",
"react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#f644523",
"resize-observer-polyfill": "^1.5.0",
"sanitize-html": "^1.18.4",
@@ -148,9 +148,8 @@
"karma-summary-reporter": "^1.5.1",
"karma-webpack": "^4.0.0-beta.0",
"matrix-mock-request": "^1.2.3",
- "matrix-react-test-utils": "^0.1.1",
+ "matrix-react-test-utils": "^0.2.2",
"mocha": "^5.0.5",
- "react-addons-test-utils": "^15.4.0",
"require-json": "0.0.1",
"rimraf": "^2.4.3",
"sinon": "^5.0.7",
diff --git a/res/css/_common.scss b/res/css/_common.scss
index 517ced43fb..2b627cce9f 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -171,7 +171,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
color: $input-darker-fg-color;
- background-color: $input-darker-bg-color;
+ background-color: $primary-bg-color;
border: none;
}
}
@@ -330,7 +330,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_header {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 10px;
}
.mx_Dialog_title {
@@ -456,16 +456,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
background-color: $primary-bg-color;
}
-::-moz-selection {
- background-color: $accent-color;
- color: $selection-fg-color;
-}
-
-::selection {
- background-color: $accent-color;
- color: $selection-fg-color;
-}
-
.mx_textButton {
@mixin mx_DialogButton_small;
}
@@ -559,3 +549,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Username_color8 {
color: $username-variant8-color;
}
+
+@define-mixin mx_Settings_fullWidthField {
+ margin-right: 100px;
+}
+
+@define-mixin mx_Settings_tooltip {
+ // So it fits in the space provided by the page
+ max-width: 120px;
+}
diff --git a/res/css/_components.scss b/res/css/_components.scss
index dff174e943..213d0d714c 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -71,6 +71,7 @@
@import "./views/dialogs/_SettingsDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
+@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
@import "./views/dialogs/_TermsDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss";
@@ -92,7 +93,6 @@
@import "./views/elements/_InteractiveTooltip.scss";
@import "./views/elements/_ManageIntegsButton.scss";
@import "./views/elements/_MemberEventListSummary.scss";
-@import "./views/elements/_MessageEditor.scss";
@import "./views/elements/_PowerSelector.scss";
@import "./views/elements/_ProgressBar.scss";
@import "./views/elements/_ReplyThread.scss";
@@ -135,7 +135,9 @@
@import "./views/rooms/_AppsDrawer.scss";
@import "./views/rooms/_Autocomplete.scss";
@import "./views/rooms/_AuxPanel.scss";
+@import "./views/rooms/_BasicMessageComposer.scss";
@import "./views/rooms/_E2EIcon.scss";
+@import "./views/rooms/_EditMessageComposer.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@@ -144,6 +146,7 @@
@import "./views/rooms/_MemberInfo.scss";
@import "./views/rooms/_MemberList.scss";
@import "./views/rooms/_MessageComposer.scss";
+@import "./views/rooms/_MessageComposerFormatBar.scss";
@import "./views/rooms/_PinnedEventTile.scss";
@import "./views/rooms/_PinnedEventsPanel.scss";
@import "./views/rooms/_PresenceLabel.scss";
@@ -158,6 +161,7 @@
@import "./views/rooms/_RoomUpgradeWarningBar.scss";
@import "./views/rooms/_SearchBar.scss";
@import "./views/rooms/_SearchableEntityList.scss";
+@import "./views/rooms/_SendMessageComposer.scss";
@import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_WhoIsTypingTile.scss";
@@ -168,6 +172,8 @@
@import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss";
@import "./views/settings/_ProfileSettings.scss";
+@import "./views/settings/_SetIdServer.scss";
+@import "./views/settings/_SetIntegrationManager.scss";
@import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
@@ -178,6 +184,7 @@
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
+@import "./views/terms/_InlineTermsAgreement.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_IncomingCallbox.scss";
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 7d10fdb6d6..85fdfa092d 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -125,3 +125,53 @@ limitations under the License.
margin-top: 12px;
}
}
+
+.mx_LeftPanel_exploreAndFilterRow {
+ display: flex;
+
+ .mx_SearchBox {
+ flex: 1 1 0;
+ min-width: 0;
+ margin: 4px 9px 1px 9px;
+ }
+}
+
+.mx_LeftPanel_explore {
+ flex: 0 0 50%;
+ overflow: hidden;
+ transition: flex-basis 0.2s;
+ box-sizing: border-box;
+
+ &.mx_LeftPanel_explore_hidden {
+ flex-basis: 0;
+ }
+
+ .mx_AccessibleButton {
+ font-size: 14px;
+ margin: 4px 0 1px 9px;
+ padding: 9px;
+ padding-left: 42px;
+ font-weight: 600;
+ color: $notice-secondary-color;
+ position: relative;
+ border-radius: 4px;
+
+ &:hover {
+ background-color: $primary-bg-color;
+ }
+
+ &::before {
+ cursor: pointer;
+ mask: url('$(res)/img/explore.svg');
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ content: "";
+ left: 14px;
+ top: 10px;
+ width: 16px;
+ height: 16px;
+ background-color: $notice-secondary-color;
+ position: absolute;
+ }
+ }
+}
diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss
index 1df0a61a2b..6b7a4ff0c7 100644
--- a/res/css/structures/_RoomDirectory.scss
+++ b/res/css/structures/_RoomDirectory.scss
@@ -17,7 +17,6 @@ limitations under the License.
.mx_RoomDirectory_dialogWrapper > .mx_Dialog {
max-width: 960px;
height: 100%;
- padding: 20px;
}
.mx_RoomDirectory_dialog {
@@ -35,17 +34,6 @@ limitations under the License.
flex: 1;
}
-.mx_RoomDirectory_createRoom {
- background-color: $button-bg-color;
- border-radius: 4px;
- padding: 8px;
- color: $button-fg-color;
- font-weight: 600;
- position: absolute;
- top: 0;
- left: 0;
-}
-
.mx_RoomDirectory_list {
flex: 1;
display: flex;
@@ -84,9 +72,8 @@ limitations under the License.
}
.mx_RoomDirectory_roomAvatar {
- width: 24px;
- padding-left: 12px;
- padding-right: 24px;
+ width: 32px;
+ padding-right: 14px;
vertical-align: top;
}
@@ -94,6 +81,34 @@ limitations under the License.
padding-bottom: 16px;
}
+.mx_RoomDirectory_roomMemberCount {
+ color: $light-fg-color;
+ width: 60px;
+ padding: 0 10px;
+ text-align: center;
+
+ &::before {
+ background-color: $light-fg-color;
+ display: inline-block;
+ vertical-align: text-top;
+ margin-right: 2px;
+ content: "";
+ mask: url('$(res)/img/feather-customised/user.svg');
+ mask-repeat: no-repeat;
+ mask-position: center;
+ // scale it down and make the size slightly bigger (16 instead of 14px)
+ // to avoid rendering artifacts
+ mask-size: 80%;
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.mx_RoomDirectory_join, .mx_RoomDirectory_preview {
+ width: 80px;
+ text-align: center;
+}
+
.mx_RoomDirectory_name {
display: inline-block;
font-weight: 600;
@@ -103,22 +118,9 @@ limitations under the License.
display: inline-block;
}
-.mx_RoomDirectory_perm {
- display: inline;
- padding-left: 5px;
- padding-right: 5px;
- margin-right: 5px;
- height: 15px;
- border-radius: 11px;
- background-color: $plinth-bg-color;
- text-transform: uppercase;
- font-weight: 600;
- font-size: 11px;
- color: $accent-color;
-}
-
.mx_RoomDirectory_topic {
cursor: initial;
+ color: $light-fg-color;
}
.mx_RoomDirectory_alias {
@@ -126,13 +128,20 @@ limitations under the License.
color: $settings-grey-fg-color;
}
-.mx_RoomDirectory_roomMemberCount {
- text-align: right;
- width: 100px;
- padding-right: 10px;
-}
-
.mx_RoomDirectory_table tr {
padding-bottom: 10px;
cursor: pointer;
}
+
+.mx_RoomDirectory .mx_RoomView_MessageList {
+ padding: 0;
+}
+
+.mx_RoomDirectory p {
+ font-size: 14px;
+ margin-top: 0;
+
+ .mx_AccessibleButton {
+ padding: 0;
+ }
+}
diff --git a/res/css/structures/_SearchBox.scss b/res/css/structures/_SearchBox.scss
index 9434d93bd2..23ee06f7b3 100644
--- a/res/css/structures/_SearchBox.scss
+++ b/res/css/structures/_SearchBox.scss
@@ -14,12 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_SearchBox_closeButton {
- cursor: pointer;
- background-image: url('$(res)/img/icons-close.svg');
- background-repeat: no-repeat;
- width: 16px;
- height: 16px;
- background-position: center;
- padding: 9px;
+.mx_SearchBox {
+ flex: 1 1 0;
+ min-width: 0;
+
+ &.mx_SearchBox_blurred:not(:hover) {
+ background-color: transparent;
+ }
+
+ .mx_SearchBox_closeButton {
+ cursor: pointer;
+ background-image: url('$(res)/img/icons-close.svg');
+ background-repeat: no-repeat;
+ width: 16px;
+ height: 16px;
+ background-position: center;
+ padding: 9px;
+ }
}
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index 49a87d8077..b05629003e 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -39,8 +39,7 @@ limitations under the License.
a:link,
a:hover,
a:visited {
- color: $accent-color;
- text-decoration: none;
+ @mixin mx_Dialog_link;
}
input[type=text],
diff --git a/res/css/views/auth/_ServerConfig.scss b/res/css/views/auth/_ServerConfig.scss
index a31feb75d7..a7e0057ab3 100644
--- a/res/css/views/auth/_ServerConfig.scss
+++ b/res/css/views/auth/_ServerConfig.scss
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,23 +15,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_ServerConfig_fields {
- display: flex;
- margin: 1em 0;
-}
-
-.mx_ServerConfig_fields .mx_Field {
- margin: 0 5px;
-}
-
-.mx_ServerConfig_fields .mx_Field:first-child {
- margin-left: 0;
-}
-
-.mx_ServerConfig_fields .mx_Field:last-child {
- margin-right: 0;
-}
-
.mx_ServerConfig_help:link {
opacity: 0.8;
}
@@ -39,3 +23,13 @@ limitations under the License.
display: block;
color: $warning-color;
}
+
+.mx_ServerConfig_identityServer {
+ transform: scaleY(0);
+ transform-origin: top;
+ transition: transform 0.25s;
+
+ &.mx_ServerConfig_identityServer_shown {
+ transform: scaleY(1);
+ }
+}
diff --git a/res/css/views/dialogs/_AddressPickerDialog.scss b/res/css/views/dialogs/_AddressPickerDialog.scss
index 2771ac4052..39a9260ba3 100644
--- a/res/css/views/dialogs/_AddressPickerDialog.scss
+++ b/res/css/views/dialogs/_AddressPickerDialog.scss
@@ -1,6 +1,7 @@
/*
Copyright 2016 OpenMarket Ltd
Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,6 +16,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+.mx_AddressPickerDialog {
+ a:link,
+ a:hover,
+ a:visited {
+ @mixin mx_Dialog_link;
+ }
+}
+
/* Using a textarea for this element, to circumvent autofill */
.mx_AddressPickerDialog_input,
.mx_AddressPickerDialog_input:focus {
@@ -67,3 +76,6 @@ limitations under the License.
pointer-events: none;
}
+.mx_AddressPickerDialog_identityServer {
+ margin-top: 1em;
+}
diff --git a/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss b/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss
new file mode 100644
index 0000000000..0ab59c44a7
--- /dev/null
+++ b/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss
@@ -0,0 +1,62 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_TabbedIntegrationManagerDialog .mx_Dialog {
+ width: 60%;
+ height: 70%;
+ overflow: hidden;
+ padding: 0;
+ max-width: initial;
+ max-height: initial;
+ position: relative;
+}
+
+.mx_TabbedIntegrationManagerDialog_container {
+ // Full size of the dialog, whatever it is
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ .mx_TabbedIntegrationManagerDialog_currentManager {
+ width: 100%;
+ height: 100%;
+ border-top: 1px solid $accent-color;
+
+ iframe {
+ background-color: #fff;
+ border: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
+}
+
+.mx_TabbedIntegrationManagerDialog_tab {
+ display: inline-block;
+ border: 1px solid $accent-color;
+ border-bottom: 0;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ padding: 10px 8px;
+ margin-right: 5px;
+}
+
+.mx_TabbedIntegrationManagerDialog_currentTab {
+ background-color: $accent-color;
+ color: $accent-fg-color;
+}
diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index 8f6204c942..cc4eb409df 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -55,7 +55,7 @@ limitations under the License.
border-radius: 4px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
- z-index: 2000;
+ z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
padding: 10px;
pointer-events: none;
line-height: 14px;
diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss
new file mode 100644
index 0000000000..b32a44219a
--- /dev/null
+++ b/res/css/views/rooms/_BasicMessageComposer.scss
@@ -0,0 +1,76 @@
+/*
+Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BasicMessageComposer {
+ position: relative;
+
+ .mx_BasicMessageComposer_inputEmpty > :first-child::before {
+ content: var(--placeholder);
+ opacity: 0.333;
+ width: 0;
+ height: 0;
+ overflow: visible;
+ display: inline-block;
+ pointer-events: none;
+ white-space: nowrap;
+ }
+
+ @keyframes visualbell {
+ from { background-color: $visual-bell-bg-color; }
+ to { background-color: $primary-bg-color; }
+ }
+
+ &.mx_BasicMessageComposer_input_error {
+ animation: 0.2s visualbell;
+ }
+
+ .mx_BasicMessageComposer_input {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ outline: none;
+ overflow-x: auto;
+
+ span.mx_UserPill, span.mx_RoomPill {
+ padding-left: 21px;
+ position: relative;
+
+ // avatar psuedo element
+ &::before {
+ position: absolute;
+ left: 2px;
+ top: 2px;
+ content: var(--avatar-letter);
+ width: 16px;
+ height: 16px;
+ background: var(--avatar-background), $avatar-bg-color;
+ color: $avatar-initial-color;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ border-radius: 8px;
+ text-align: center;
+ font-weight: normal;
+ line-height: 16px;
+ font-size: 10.4px;
+ }
+ }
+ }
+
+ .mx_BasicMessageComposer_AutoCompleteWrapper {
+ position: relative;
+ height: 0;
+ }
+}
diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/rooms/_EditMessageComposer.scss
similarity index 58%
rename from res/css/views/elements/_MessageEditor.scss
rename to res/css/views/rooms/_EditMessageComposer.scss
index 7fd99bae17..214bfc4a1a 100644
--- a/res/css/views/elements/_MessageEditor.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,8 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_MessageEditor {
- border-radius: 4px;
+.mx_EditMessageComposer {
+
padding: 3px;
// this is to try not make the text move but still have some
// padding around and in the editor.
@@ -23,47 +24,20 @@ limitations under the License.
margin: -7px -10px -5px -10px;
overflow: visible !important; // override mx_EventTile_content
- .mx_MessageEditor_editor {
+
+ .mx_BasicMessageComposer_input {
border-radius: 4px;
border: solid 1px $primary-hairline-color;
background-color: $primary-bg-color;
- padding: 3px 6px;
- white-space: pre-wrap;
- word-wrap: break-word;
- outline: none;
max-height: 200px;
- overflow-x: auto;
+ padding: 3px 6px;
&:focus {
border-color: $accent-color-50pct;
}
-
- span.mx_UserPill, span.mx_RoomPill {
- padding-left: 21px;
- position: relative;
-
- // avatar psuedo element
- &::before {
- position: absolute;
- left: 2px;
- top: 2px;
- content: var(--avatar-letter);
- width: 16px;
- height: 16px;
- background: var(--avatar-background), $avatar-bg-color;
- color: $avatar-initial-color;
- background-repeat: no-repeat;
- background-size: 16px;
- border-radius: 8px;
- text-align: center;
- font-weight: normal;
- line-height: 16px;
- font-size: 10.4px;
- }
- }
}
- .mx_MessageEditor_buttons {
+ .mx_EditMessageComposer_buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
@@ -81,14 +55,9 @@ limitations under the License.
padding: 5px 40px;
}
}
-
- .mx_MessageEditor_AutoCompleteWrapper {
- position: relative;
- height: 0;
- }
}
-.mx_EventTile_last .mx_MessageEditor_buttons {
+.mx_EventTile_last .mx_EditMessageComposer_buttons {
position: static;
margin-right: -147px;
}
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 5e01c32147..fafd34f8ca 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -296,6 +296,25 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
overflow-y: hidden;
}
+/* Spoiler stuff */
+.mx_EventTile_spoiler {
+ cursor: pointer;
+}
+
+.mx_EventTile_spoiler_reason {
+ color: $event-timestamp-color;
+ font-size: 11px;
+}
+
+.mx_EventTile_spoiler_content {
+ filter: blur(5px) saturate(0.1) sepia(1);
+ transition-duration: 0.5s;
+}
+
+.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
+ filter: none;
+}
+
.mx_EventTile_e2eIcon {
display: block;
position: absolute;
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 6e17251cb0..5b4a9b764b 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -129,7 +129,7 @@ limitations under the License.
}
@keyframes visualbell {
- from { background-color: #faa; }
+ from { background-color: $visual-bell-bg-color; }
to { background-color: $primary-bg-color; }
}
diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss
new file mode 100644
index 0000000000..6e8fc58470
--- /dev/null
+++ b/res/css/views/rooms/_MessageComposerFormatBar.scss
@@ -0,0 +1,93 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MessageComposerFormatBar {
+ display: none;
+ width: calc(26px * 5);
+ height: 24px;
+ position: absolute;
+ cursor: pointer;
+ border-radius: 4px;
+ background-color: $message-action-bar-bg-color;
+ user-select: none;
+
+ &.mx_MessageComposerFormatBar_shown {
+ display: block;
+ }
+
+ > * {
+ white-space: nowrap;
+ display: inline-block;
+ position: relative;
+ border: 1px solid $message-action-bar-border-color;
+ margin-left: -1px;
+
+ &:hover {
+ border-color: $message-action-bar-hover-border-color;
+ }
+ }
+
+ .mx_MessageComposerFormatBar_button {
+ width: 27px;
+ height: 24px;
+ box-sizing: border-box;
+ }
+
+ .mx_MessageComposerFormatBar_button::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ background-color: $message-action-bar-fg-color;
+ }
+
+ .mx_MessageComposerFormatBar_buttonIconBold::after {
+ mask-image: url('$(res)/img/format/bold.svg');
+ }
+
+ .mx_MessageComposerFormatBar_buttonIconItalic::after {
+ mask-image: url('$(res)/img/format/italics.svg');
+ }
+
+ .mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
+ mask-image: url('$(res)/img/format/strikethrough.svg');
+ }
+
+ .mx_MessageComposerFormatBar_buttonIconQuote::after {
+ mask-image: url('$(res)/img/format/quote.svg');
+ }
+
+ .mx_MessageComposerFormatBar_buttonIconCode::after {
+ mask-image: url('$(res)/img/format/code.svg');
+ }
+}
+
+.mx_MessageComposerFormatBar_buttonTooltip {
+ white-space: nowrap;
+ font-size: 13px;
+ font-weight: 600;
+ min-width: 54px;
+ text-align: center;
+
+ .mx_MessageComposerFormatBar_tooltipShortcut {
+ font-size: 9px;
+ opacity: 0.7;
+ }
+}
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index b51d720e4d..5ed22f997d 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -27,10 +27,6 @@ limitations under the License.
position: relative;
}
-.mx_SearchBox {
- flex: none;
-}
-
/* hide resize handles next to collapsed / empty sublists */
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
display: none;
diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss
new file mode 100644
index 0000000000..d20f7107b3
--- /dev/null
+++ b/res/css/views/rooms/_SendMessageComposer.scss
@@ -0,0 +1,53 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SendMessageComposer {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ font-size: 14px;
+ justify-content: center;
+ margin-right: 6px;
+ // don't grow wider than available space
+ min-width: 0;
+
+ .mx_BasicMessageComposer {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ // min-height at this level so the mx_BasicMessageComposer_input
+ // still stays vertically centered when less than 50px
+ min-height: 50px;
+
+ .mx_BasicMessageComposer_input {
+ padding: 3px 0;
+ // this will center the contenteditable
+ // in it's parent vertically
+ // while keeping the autocomplete at the top
+ // of the composer. The parent needs to be a flex container for this to work.
+ margin: auto 0;
+ // max-height at this level so autocomplete doesn't get scrolled too
+ max-height: 140px;
+ overflow-y: auto;
+ }
+ }
+
+ .mx_SendMessageComposer_overlayWrapper {
+ position: relative;
+ height: 0;
+ }
+}
+
diff --git a/res/css/views/settings/_DevicesPanel.scss b/res/css/views/settings/_DevicesPanel.scss
index 4113fc4ebc..581ff47fc1 100644
--- a/res/css/views/settings/_DevicesPanel.scss
+++ b/res/css/views/settings/_DevicesPanel.scss
@@ -26,8 +26,13 @@ limitations under the License.
font-weight: bold;
}
+.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
+ height: 48px; // make this tall so the table doesn't move down when the delete button appears
+}
+
.mx_DevicesPanel_header > div {
display: table-cell;
+ vertical-align: bottom;
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
diff --git a/res/css/views/settings/_EmailAddresses.scss b/res/css/views/settings/_EmailAddresses.scss
index d7606ecea9..1c9ce724d1 100644
--- a/res/css/views/settings/_EmailAddresses.scss
+++ b/res/css/views/settings/_EmailAddresses.scss
@@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
diff --git a/res/css/views/settings/_PhoneNumbers.scss b/res/css/views/settings/_PhoneNumbers.scss
index 7aaef2a56b..507b07334e 100644
--- a/res/css/views/settings/_PhoneNumbers.scss
+++ b/res/css/views/settings/_PhoneNumbers.scss
@@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -36,6 +37,15 @@ limitations under the License.
margin-left: 5px;
}
+.mx_ExistingPhoneNumber_verification {
+ display: inline-flex;
+ align-items: center;
+
+ .mx_Field {
+ margin: 0 0 0 1em;
+ }
+}
+
.mx_PhoneNumbers_input {
display: flex;
align-items: center;
diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss
index 3e97a0ff6d..432b713c1b 100644
--- a/res/css/views/settings/_ProfileSettings.scss
+++ b/res/css/views/settings/_ProfileSettings.scss
@@ -43,7 +43,6 @@ limitations under the License.
height: 88px;
margin-left: 13px;
position: relative;
- cursor: pointer;
}
.mx_ProfileSettings_avatar > * {
@@ -71,6 +70,7 @@ limitations under the License.
text-align: center;
vertical-align: middle;
font-size: 10px;
+ cursor: pointer;
}
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) {
diff --git a/res/css/views/settings/_SetIdServer.scss b/res/css/views/settings/_SetIdServer.scss
new file mode 100644
index 0000000000..98c64b7218
--- /dev/null
+++ b/res/css/views/settings/_SetIdServer.scss
@@ -0,0 +1,23 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SetIdServer .mx_Field_input {
+ @mixin mx_Settings_fullWidthField;
+}
+
+.mx_SetIdServer_tooltip {
+ @mixin mx_Settings_tooltip;
+}
diff --git a/res/css/views/settings/_SetIntegrationManager.scss b/res/css/views/settings/_SetIntegrationManager.scss
new file mode 100644
index 0000000000..99537f9eb4
--- /dev/null
+++ b/res/css/views/settings/_SetIntegrationManager.scss
@@ -0,0 +1,37 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SetIntegrationManager .mx_Field_input {
+ @mixin mx_Settings_fullWidthField;
+}
+
+.mx_SetIntegrationManager {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+.mx_SetIntegrationManager > .mx_SettingsTab_heading {
+ margin-bottom: 10px;
+}
+
+.mx_SetIntegrationManager > .mx_SettingsTab_heading > .mx_SettingsTab_subheading {
+ display: inline-block;
+ padding-left: 5px;
+}
+
+.mx_SetIntegrationManager_tooltip {
+ @mixin mx_Settings_tooltip;
+}
diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss
index 7755ee6053..794c8106be 100644
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -24,6 +24,10 @@ limitations under the License.
color: $primary-fg-color;
}
+.mx_SettingsTab_heading:nth-child(n + 2) {
+ margin-top: 30px;
+}
+
.mx_SettingsTab_subheading {
font-size: 16px;
display: block;
@@ -37,9 +41,8 @@ limitations under the License.
.mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color;
font-size: 14px;
- padding-bottom: 12px;
display: block;
- margin: 0 100px 0 0; // Align with the rest of the view
+ margin: 10px 100px 10px 0; // Align with the rest of the view
}
.mx_SettingsTab_section .mx_SettingsFlag {
@@ -67,12 +70,6 @@ limitations under the License.
word-break: break-all;
}
-.mx_SettingsTab .mx_SettingsTab_subheading:nth-child(n + 2) {
- // These views have a lot of the same repetitive information on it, so
- // give them more visual distinction between the sections.
- margin-top: 30px;
-}
-
.mx_SettingsTab a {
color: $accent-color-alt;
}
diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
index 091c98ffb8..62d230e752 100644
--- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
@@ -16,15 +16,21 @@ limitations under the License.
.mx_GeneralUserSettingsTab_changePassword .mx_Field,
.mx_GeneralUserSettingsTab_themeSection .mx_Field {
- margin-right: 100px; // Align with the other fields on the page
+ @mixin mx_Settings_fullWidthField;
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
margin-top: 0;
}
-.mx_GeneralUserSettingsTab_accountSection > .mx_EmailAddresses,
-.mx_GeneralUserSettingsTab_accountSection > .mx_PhoneNumbers,
+.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
+.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
+.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,
+.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,
.mx_GeneralUserSettingsTab_languageInput {
- margin-right: 100px; // Align with the other fields on the page
+ @mixin mx_Settings_fullWidthField;
+}
+
+.mx_GeneralUserSettingsTab_warningIcon {
+ vertical-align: middle;
}
diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
index b3430f47af..d003e175d9 100644
--- a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
@@ -15,5 +15,5 @@ limitations under the License.
*/
.mx_PreferencesUserSettingsTab .mx_Field {
- margin-right: 100px; // Align with the rest of the controls
+ @mixin mx_Settings_fullWidthField;
}
diff --git a/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss
index 36c8cfd896..69d57bdba1 100644
--- a/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss
@@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_VoiceUserSettingsTab .mx_Field {
- margin-right: 100px; // align with the rest of the fields
+ @mixin mx_Settings_fullWidthField;
}
.mx_VoiceUserSettingsTab_missingMediaPermissions {
diff --git a/res/css/views/terms/_InlineTermsAgreement.scss b/res/css/views/terms/_InlineTermsAgreement.scss
new file mode 100644
index 0000000000..e00dcf31d1
--- /dev/null
+++ b/res/css/views/terms/_InlineTermsAgreement.scss
@@ -0,0 +1,45 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_InlineTermsAgreement_cbContainer {
+ margin-bottom: 10px;
+ font-size: 14px;
+
+ a {
+ color: $accent-color;
+ text-decoration: none;
+ }
+
+ .mx_InlineTermsAgreement_checkbox {
+ margin-top: 10px;
+
+ input {
+ vertical-align: text-bottom;
+ }
+ }
+}
+
+.mx_InlineTermsAgreement_link {
+ display: inline-block;
+ mask-image: url('$(res)/img/external-link.svg');
+ background-color: $accent-color;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ width: 12px;
+ height: 12px;
+ margin-left: 3px;
+ vertical-align: middle;
+}
diff --git a/res/img/explore.svg b/res/img/explore.svg
new file mode 100644
index 0000000000..3956e912ac
--- /dev/null
+++ b/res/img/explore.svg
@@ -0,0 +1,97 @@
+
+
diff --git a/res/img/format/bold.svg b/res/img/format/bold.svg
new file mode 100644
index 0000000000..634d735031
--- /dev/null
+++ b/res/img/format/bold.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/format/code.svg b/res/img/format/code.svg
new file mode 100644
index 0000000000..0a29bcd7bd
--- /dev/null
+++ b/res/img/format/code.svg
@@ -0,0 +1,7 @@
+
diff --git a/res/img/format/italics.svg b/res/img/format/italics.svg
new file mode 100644
index 0000000000..841afadffd
--- /dev/null
+++ b/res/img/format/italics.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/format/quote.svg b/res/img/format/quote.svg
new file mode 100644
index 0000000000..82d3403314
--- /dev/null
+++ b/res/img/format/quote.svg
@@ -0,0 +1,5 @@
+
diff --git a/res/img/format/strikethrough.svg b/res/img/format/strikethrough.svg
new file mode 100644
index 0000000000..fc02b0aae2
--- /dev/null
+++ b/res/img/format/strikethrough.svg
@@ -0,0 +1,6 @@
+
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 90cd8e8558..ef0b91b41a 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -146,6 +146,8 @@ $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
$button-link-fg-color: $accent-color;
$button-link-bg-color: transparent;
+$visual-bell-bg-color: #800;
+
$room-warning-bg-color: $header-panel-bg-color;
$dark-panel-bg-color: $header-panel-bg-color;
@@ -200,6 +202,11 @@ $interactive-tooltip-fg-color: #ffffff;
background-color: $button-secondary-bg-color;
}
+@define-mixin mx_Dialog_link {
+ color: $accent-color;
+ text-decoration: none;
+}
+
// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
// better match the theme. Typically applied to dark grey 'off' buttons or
// light grey 'on' buttons.
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index d8d4b0a11b..bfaac09761 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -247,6 +247,8 @@ $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
$button-link-fg-color: $accent-color;
$button-link-bg-color: transparent;
+$visual-bell-bg-color: #faa;
+
// Toggle switch
$togglesw-off-color: #c1c9d6;
$togglesw-on-color: $accent-color;
@@ -326,3 +328,8 @@ $interactive-tooltip-fg-color: #ffffff;
color: $accent-color;
background-color: $button-secondary-bg-color;
}
+
+@define-mixin mx_Dialog_link {
+ color: $accent-color;
+ text-decoration: none;
+}
diff --git a/src/CallHandler.js b/src/CallHandler.js
index 5b58400ae6..f6b3e18538 100644
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -1,6 +1,7 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017, 2018 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -63,7 +64,8 @@ import SdkConfig from './SdkConfig';
import { showUnknownDeviceDialogForCalls } from './cryptodevices';
import WidgetUtils from './utils/WidgetUtils';
import WidgetEchoStore from './stores/WidgetEchoStore';
-import ScalarAuthClient from './ScalarAuthClient';
+import {IntegrationManagers} from "./integrations/IntegrationManagers";
+import SettingsStore, { SettingLevel } from './settings/SettingsStore';
global.mxCalls = {
//room_id: MatrixCall
@@ -117,8 +119,7 @@ function _reAttemptCall(call) {
function _setCallListeners(call) {
call.on("error", function(err) {
- console.error("Call error: %s", err);
- console.error(err.stack);
+ console.error("Call error:", err);
if (err.code === 'unknown_devices') {
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
@@ -146,8 +147,15 @@ function _setCallListeners(call) {
},
});
} else {
- const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ if (
+ MatrixClientPeg.get().getTurnServers().length === 0 &&
+ SettingsStore.getValue("fallbackICEServerAllowed") === null
+ ) {
+ _showICEFallbackPrompt();
+ return;
+ }
+ const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createTrackedDialog('Call Failed', '', ErrorDialog, {
title: _t('Call Failed'),
description: err.message,
@@ -217,6 +225,36 @@ function _setCallState(call, roomId, status) {
});
}
+function _showICEFallbackPrompt() {
+ const cli = MatrixClientPeg.get();
+ const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+ const code = sub => {sub}
;
+ Modal.createTrackedDialog('No TURN servers', '', QuestionDialog, {
+ title: _t("Call failed due to misconfigured server"),
+ description:
{_t(
+ "Please ask the administrator of your homeserver " +
+ "(%(homeserverDomain)s
) to configure a TURN server in " +
+ "order for calls to work reliably.",
+ { homeserverDomain: cli.getDomain() }, { code },
+ )}
{_t(
+ "Alternatively, you can try to use the public server at " +
+ "turn.matrix.org
, but this will not be as reliable, and " +
+ "it will share your IP address with that server. You can also manage " +
+ "this in Settings.",
+ null, { code },
+ )}
{_t( + "Use an identity server to invite by email. " + + "Click continue to use the default identity server " + + "(%(defaultIdentityServerName)s) or manage in Settings.", + { + defaultIdentityServerName: abbreviateUrl(defaultIdentityServerUrl), + }, + )}
, + button: _t("Continue"), + }, + )); + } else { + return reject(_t("Use an identity server to invite by email. Manage in Settings.")); + } + } const inviter = new MultiInviter(roomId); - return success(inviter.invite([userId]).then(() => { - if (inviter.getCompletionState(userId) !== "invited") { - throw new Error(inviter.getErrorText(userId)); + return success(finished.then(([useDefault] = []) => { + if (useDefault) { + useDefaultIdentityServer(); + } else if (useDefault === false) { + throw new Error(_t("Use an identity server to invite by email. Manage in Settings.")); + } + return inviter.invite([address]); + }).then(() => { + if (inviter.getCompletionState(address) !== "invited") { + throw new Error(inviter.getErrorText(address)); } })); } diff --git a/src/ComposerHistoryManager.js b/src/SlateComposerHistoryManager.js similarity index 98% rename from src/ComposerHistoryManager.js rename to src/SlateComposerHistoryManager.js index 1b3fb588eb..948dcf64ff 100644 --- a/src/ComposerHistoryManager.js +++ b/src/SlateComposerHistoryManager.js @@ -47,7 +47,7 @@ class HistoryItem { } } -export default class ComposerHistoryManager { +export default class SlateComposerHistoryManager { history: Array