nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/experimental' into dbkr/sas

Browse Source
This commit is contained in:
David Baker
2019-01-23 17:32:18 +00:00
parent 60a8d560d1 94b1d739fb
commit 6a90625d36
172 changed files with 1885 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
.eslintignore.errorfiles
View File

@@ -1,11 +1,9 @@
# autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
src/component-index.js
src/components/structures/auth/ForgotPassword.js
src/components/structures/BottomLeftMenu.js
src/components/structures/CompatibilityPage.js
src/components/structures/CreateRoom.js
src/components/structures/LoggedInView.js
src/components/structures/login/ForgotPassword.js
src/components/structures/MessagePanel.js
src/components/structures/NotificationPanel.js
src/components/structures/RoomDirectory.js
@@ -15,6 +13,11 @@ src/components/structures/ScrollPanel.js
src/components/structures/SearchBox.js
src/components/structures/TimelinePanel.js
src/components/structures/UploadBar.js
src/components/views/auth/CountryDropdown.js
src/components/views/auth/InteractiveAuthEntryComponents.js
src/components/views/auth/PasswordLogin.js
src/components/views/auth/RegistrationForm.js
src/components/views/auth/ServerConfig.js
src/components/views/avatars/BaseAvatar.js
src/components/views/avatars/MemberAvatar.js
src/components/views/create_room/RoomAlias.js
@@ -31,11 +34,6 @@ src/components/views/elements/UserSelector.js
src/components/views/globals/MatrixToolbar.js
src/components/views/globals/NewVersionBar.js
src/components/views/globals/UpdateCheckBar.js
src/components/views/login/CountryDropdown.js
src/components/views/login/InteractiveAuthEntryComponents.js
src/components/views/login/PasswordLogin.js
src/components/views/login/RegistrationForm.js
src/components/views/login/ServerConfig.js
src/components/views/messages/MFileBody.js
src/components/views/messages/RoomAvatarEvent.js
src/components/views/messages/TextualBody.js
@@ -98,12 +96,12 @@ src/VectorConferenceHandler.js
src/Velociraptor.js
src/WhoIsTyping.js
src/wrappers/withMatrixClient.js
test/components/structures/login/Registration-test.js
test/components/structures/auth/Registration-test.js
test/components/structures/MessagePanel-test.js
test/components/structures/ScrollPanel-test.js
test/components/structures/TimelinePanel-test.js
test/components/views/auth/RegistrationForm-test.js
test/components/views/dialogs/InteractiveAuthDialog-test.js
test/components/views/login/RegistrationForm-test.js
test/components/views/rooms/MessageComposerInput-test.js
test/components/views/rooms/RoomSettings-test.js
test/mock-clock.js

5
.eslintrc.js
View File

@@ -42,9 +42,8 @@ module.exports = {
// bind or arrow function in props causes performance issues
// (but we currently use them in some places)
"react/jsx-no-bind": ["warn", {
"ignoreRefs": true,
}],
// It's disabled here, but we should using it sparingly.
"react/jsx-no-bind": "off",
"react/jsx-key": ["error"],
// Components in JSX should always be defined.

4
karma.conf.js
View File

@@ -168,6 +168,10 @@ module.exports = function (config) {
path.resolve('./test'),
]
},
{
test: /\.(gif|png|svg|ttf)$/,
loader: 'file-loader',
},
],
noParse: [
// for cross platform compatibility use [\\\/] as the path separator

4
package.json
View File

@@ -37,6 +37,7 @@
"scripts": {
"reskindex": "node scripts/reskindex.js -h header",
"reskindex:watch": "node scripts/reskindex.js -h header -w",
"rethemendex": "res/css/rethemendex.sh",
"i18n": "matrix-gen-i18n",
"prunei18n": "matrix-prune-i18n",
"build": "npm run reskindex && npm run start:init",
@@ -47,7 +48,7 @@
"start:init": "babel src -d lib --source-maps --copy-files",
"lint": "eslint src/",
"lintall": "eslint src/ test/",
"lintwithexclusions": "eslint --max-warnings 18 --ignore-path .eslintignore.errorfiles src test",
"lintwithexclusions": "eslint --max-warnings 13 --ignore-path .eslintignore.errorfiles src test",
"clean": "rimraf lib",
"prepublish": "npm run clean && npm run build && git rev-parse HEAD > git-revision.txt",
"test": "karma start --single-run=true --browsers ChromeHeadless",
@@ -125,6 +126,7 @@
"eslint-plugin-react": "^7.7.0",
"estree-walker": "^0.5.0",
"expect": "^23.6.0",
"file-loader": "^3.0.1",
"flow-parser": "^0.57.3",
"jest-mock": "^23.2.0",
"karma": "^3.0.0",

4
res/css/_common.scss
View File

@@ -160,7 +160,7 @@ textarea {
padding: 0 58px 36px;
width: 60%;
max-width: 704px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
max-height: 80%;
overflow-y: auto;
}
@@ -171,7 +171,7 @@ textarea {
left: 0;
width: 100%;
height: 100%;
background-color: $dialog-background-bg-color;
background-color: $dialog-backdrop-color;
opacity: 0.8;
}

19
res/css/_components.scss
View File

@@ -8,7 +8,6 @@
@import "./structures/_GroupView.scss";
@import "./structures/_HomePage.scss";
@import "./structures/_LeftPanel.scss";
@import "./structures/_LoginBox.scss";
@import "./structures/_MatrixChat.scss";
@import "./structures/_MyGroups.scss";
@import "./structures/_NotificationPanel.scss";
@@ -18,12 +17,21 @@
@import "./structures/_RoomSubList.scss";
@import "./structures/_RoomView.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss";
@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_UserSettings.scss";
@import "./structures/_ViewSource.scss";
@import "./structures/login/_Login.scss";
@import "./structures/auth/_Login.scss";
@import "./views/auth/_AuthBody.scss";
@import "./views/auth/_AuthButtons.scss";
@import "./views/auth/_AuthFooter.scss";
@import "./views/auth/_AuthHeader.scss";
@import "./views/auth/_AuthHeaderLogo.scss";
@import "./views/auth/_AuthPage.scss";
@import "./views/auth/_InteractiveAuthEntryComponents.scss";
@import "./views/auth/_ServerConfig.scss";
@import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
@@ -49,6 +57,7 @@
@import "./views/dialogs/_SetPasswordDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
@import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
@import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
@import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
@@ -59,6 +68,7 @@
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_Field.scss";
@import "./views/elements/_HexVerify.scss";
@import "./views/elements/_ImageView.scss";
@import "./views/elements/_InlineSpinner.scss";
@@ -75,8 +85,6 @@
@import "./views/groups/_GroupPublicityToggle.scss";
@import "./views/groups/_GroupRoomList.scss";
@import "./views/groups/_GroupUserSettings.scss";
@import "./views/login/_InteractiveAuthEntryComponents.scss";
@import "./views/login/_ServerConfig.scss";
@import "./views/messages/_CreateEvent.scss";
@import "./views/messages/_DateSeparator.scss";
@import "./views/messages/_MEmoteBody.scss";
@@ -95,6 +103,7 @@
@import "./views/rooms/_AuxPanel.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewWidget.scss";
@import "./views/rooms/_MemberDeviceInfo.scss";
@import "./views/rooms/_MemberInfo.scss";
@@ -122,6 +131,8 @@
@import "./views/settings/_IntegrationsManager.scss";
@import "./views/settings/_KeyBackupPanel.scss";
@import "./views/settings/_Notifications.scss";
@import "./views/settings/tabs/_GeneralSettingsTab.scss";
@import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_IncomingCallbox.scss";
@import "./views/voip/_VideoView.scss";

2
res/css/structures/_MyGroups.scss
View File

@@ -54,7 +54,7 @@ limitations under the License.
&:before {
background-color: $accent-fg-color;
mask: url('../../img/icons-create-room.svg');
mask: url('$(res)/img/icons-create-room.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80%;

10
res/css/structures/_RoomSubList.scss
View File

@@ -105,7 +105,7 @@ limitations under the License.
.mx_RoomSubList_addRoom {
background-color: $roomheader-addroom-color;
color: $roomsublist-background;
background-image: url('../../img/icons-room-add.svg');
background-image: url('$(res)/img/icons-room-add.svg');
background-repeat: no-repeat;
background-position: center;
border-radius: 10px; // 16/2 + 2 padding
@@ -120,7 +120,7 @@ limitations under the License.
.mx_RoomSubList_chevron {
pointer-events: none;
background-image: url('../../img/topleft-chevron.svg');
background-image: url('$(res)/img/topleft-chevron.svg');
background-repeat: no-repeat;
transition: transform 0.2s ease-in;
width: 10px;
@@ -155,7 +155,7 @@ limitations under the License.
position: sticky;
left: 0;
right: 0;
height: 30px;
height: 35px;
content: "";
display: block;
z-index: 100;
@@ -163,10 +163,10 @@ limitations under the License.
}
&.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
margin-top: -30px;
margin-top: -35px;
}
&.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
margin-bottom: -30px;
margin-bottom: -35px;
}
&.mx_IndicatorScrollbar_topOverflow::before {

8
res/css/structures/_RoomView.scss
View File

@@ -116,7 +116,7 @@ limitations under the License.
.mx_RoomView_messagePanelSearchSpinner {
flex: 1;
background-image: url('../../img/typing-indicator-2x.gif');
background-image: url('$(res)/img/typing-indicator-2x.gif');
background-position: center 367px;
background-size: 25px;
background-repeat: no-repeat;
@@ -125,7 +125,7 @@ limitations under the License.
.mx_RoomView_messagePanelSearchSpinner:before {
background-color: $greyed-fg-color;
mask: url('../../img/feather-icons/search-input.svg');
mask: url('$(res)/img/feather-icons/search-input.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 50px;
@@ -171,6 +171,10 @@ limitations under the License.
.mx_RoomView_MessageList {
list-style-type: none;
padding: 18px;
margin: 0;
/* needed as min-height is set to clientHeight in ScrollPanel
to prevent shrinking when WhoIsTypingTile is hidden */
box-sizing: border-box;
}
.mx_RoomView_MessageList li {

2
res/css/structures/_SearchBox.scss
View File

@@ -16,7 +16,7 @@ limitations under the License.
.mx_SearchBox_closeButton {
cursor: pointer;
background-image: url('../../img/icons-close.svg');
background-image: url('$(res)/img/icons-close.svg');
background-repeat: no-repeat;
width: 16px;
height: 16px;

92
res/css/structures/_TabbedView.scss Normal file
View File

@@ -0,0 +1,92 @@
/*
Copyright 2017 Travis Ralston
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.
*/
.mx_TabbedView {
margin: 0;
padding: 0;
display: flex;
width: 100%;
height: 100%;
}
.mx_TabbedView_tabLabels {
width: 136px;
height: 100%;
color: $tab-label-fg-color;
}
.mx_TabbedView_tabLabel {
vertical-align: text-top;
cursor: pointer;
display: block;
border-radius: 3px;
font-size: 12px;
font-weight: 600;
height: 20px;
margin-bottom: 6px;
position: relative;
}
.mx_TabbedView_tabLabel_active {
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
}
// TODO: Remove temporary hack alongside "visit old settings" tab
.mx_TabbedView_tabLabel_TEMP_HACK {
background-color: orange;
}
.mx_TabbedView_maskedIcon {;
margin-left: 6px;
margin-right: 9px;
width: 14px;
height: 14px;
display: inline-block;
}
.mx_TabbedView_maskedIcon:before {
display: inline-block;
background-color: $tab-label-icon-bg-color;
mask-repeat: no-repeat;
mask-size: 14px;
width: 14px;
height: 14px;
mask-position: center;
content: '';
vertical-align: middle;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
background-color: $tab-label-active-icon-bg-color;
}
.mx_TabbedView_tabLabel_text {
vertical-align: middle;
}
.mx_TabbedView_tabPanel {
width: calc(100% - 320px);
display: inline-block;
margin-left: 70px;
flex-grow: 1;
}
.mx_TabbedView_tabPanelContent {
flex-grow: 1;
min-width: 560px;
}

4
res/css/structures/_TagPanel.scss
View File

@@ -130,12 +130,12 @@ limitations under the License.
}
.mx_TagPanel_groupsButton > .mx_GroupsButton:before {
mask: url('../../img/feather-icons/users.svg');
mask: url('$(res)/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: url('$(res)/img/feather-icons/life-buoy.svg');
mask-position: center 9px;
}

2
res/css/structures/_UserSettings.scss
View File

@@ -173,7 +173,7 @@ limitations under the License.
padding: 0px;
width: 240px;
color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-family: $font-family;
font-size: 16px;
}

49
res/css/structures/login/_Login.scss → res/css/structures/auth/_Login.scss
View File

@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket 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.
@@ -14,41 +15,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_Login {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
.mx_Login h2 {
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
}
.mx_Login_box {
width: 300px;
min-height: 450px;
padding-top: 50px;
padding-bottom: 50px;
margin: auto;
}
.mx_Login_logo {
text-align: center;
height: 150px;
margin-bottom: 45px;
}
.mx_Login_logo img {
max-height: 100%
}
.mx_Login_support {
text-align: center;
font-size: 13px;
@@ -115,19 +81,6 @@ limitations under the License.
color: $primary-fg-color;
}
.mx_Login_links {
display: block;
text-align: center;
margin-top: 15px;
width: 100%;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_links a:link {
color: $primary-fg-color;
}
.mx_Login_prompt {
padding-top: 15px;
padding-bottom: 15px;

23
res/css/views/auth/_AuthBody.scss Normal file
View File

@@ -0,0 +1,23 @@
/*
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.
*/
.mx_AuthBody {
width: 500px;
background-color: $authpage-body-bg-color;
border-radius: 0 4px 4px 0;
padding: 25px 60px;
box-sizing: border-box;
}

9
res/css/structures/_LoginBox.scss → res/css/views/auth/_AuthButtons.scss
View File

@@ -1,5 +1,6 @@
/*
Copyright 2017 OpenMarket 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.
@@ -14,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_LoginBox {
.mx_AuthButtons {
min-height: 24px;
height: unset !important;
padding-top: 13px !important;
@@ -22,13 +23,13 @@ limitations under the License.
order: 4;
}
.mx_LoginBox_loginButton_wrapper {
.mx_AuthButtons_loginButton_wrapper {
text-align: center;
width: 100%;
}
.mx_LoginBox_loginButton,
.mx_LoginBox_registerButton {
.mx_AuthButtons_loginButton,
.mx_AuthButtons_registerButton {
margin-top: 3px;
height: 40px;
border: 0px;

30
res/css/views/auth/_AuthFooter.scss Normal file
View File

@@ -0,0 +1,30 @@
/*
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.
*/
.mx_AuthFooter {
text-align: center;
width: 100%;
font-size: 14px;
opacity: 0.72;
margin: 20px 0;
}
.mx_AuthFooter a:link,
.mx_AuthFooter a:hover,
.mx_AuthFooter a:visited {
color: $accent-fg-color;
margin: 0 22px;
}

21
res/css/views/auth/_AuthHeader.scss Normal file
View File

@@ -0,0 +1,21 @@
/*
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.
*/
.mx_AuthHeader {
width: 206px;
padding: 25px 50px;
box-sizing: border-box;
}

23
res/css/views/auth/_AuthHeaderLogo.scss Normal file
View File

@@ -0,0 +1,23 @@
/*
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.
*/
.mx_AuthHeaderLogo {
margin-top: 15px;
}
.mx_AuthHeaderLogo img {
width: 100%;
}

40
res/css/views/auth/_AuthPage.scss Normal file
View File

@@ -0,0 +1,40 @@
/*
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.
*/
.mx_AuthPage {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
background-color: $authpage-bg-color;
}
.mx_AuthPage h2 {
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
}
.mx_AuthPage_modal {
display: flex;
margin: 100px auto auto;
border-radius: 4px;
// Not currently supported in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1178765
backdrop-filter: blur(10px);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: $authpage-modal-bg-color;
}

0
res/css/views/login/_InteractiveAuthEntryComponents.scss → res/css/views/auth/_InteractiveAuthEntryComponents.scss
View File

0
res/css/views/login/_ServerConfig.scss → res/css/views/auth/_ServerConfig.scss
View File

2
res/css/views/dialogs/_DevtoolsDialog.scss
View File

@@ -61,7 +61,7 @@ limitations under the License.
padding: 0;
width: 240px;
color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-family: $font-family;
font-size: 16px;
}

63
res/css/views/dialogs/_UserSettingsDialog.scss Normal file
View File

@@ -0,0 +1,63 @@
.mx_UserSettingsDialog_header {
font-size: 24px;
display: block;
text-align: center;
color: $dialog-title-fg-color;
margin-top: 16px;
margin-bottom: 24px;
padding: 0;
}
.mx_UserSettingsDialog_close {
position: absolute;
top: 16px;
right: 25px;
}
.mx_UserSettingsDialog_closeIcon {
width: 16px;
height: 16px;
display: inline-block;
}
.mx_UserSettingsDialog_closeIcon:before {
mask: url('$(res)/img/feather-icons/cancel.svg');
background-color: $dialog-close-fg-color;
mask-repeat: no-repeat;
mask-size: 16px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
// ICONS
// ==========================================================
.mx_UserSettingsDialog_settingsIcon:before {
mask-image: url('$(res)/img/feather-icons/settings.svg');
}
.mx_UserSettingsDialog_voiceIcon:before {
mask-image: url('$(res)/img/feather-icons/phone.svg');
}
.mx_UserSettingsDialog_bellIcon:before {
mask-image: url('$(res)/img/feather-icons/notifications.svg');
}
.mx_UserSettingsDialog_preferencesIcon:before {
mask-image: url('$(res)/img/feather-icons/sliders.svg');
}
.mx_UserSettingsDialog_securityIcon:before {
mask-image: url('$(res)/img/feather-icons/lock.svg');
}
.mx_UserSettingsDialog_helpIcon:before {
mask-image: url('$(res)/img/feather-icons/help-circle.svg');
}

2
res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss
View File

@@ -24,7 +24,7 @@ limitations under the License.
padding-bottom: 10px;
&:before {
mask: url("../../img/e2e/lock-warning.svg");
mask: url("$(res)/img/e2e/lock-warning.svg");
mask-repeat: no-repeat;
background-color: $primary-fg-color;
content: "";

21
res/css/views/elements/_AccessibleButton.scss
View File

@@ -21,3 +21,24 @@ limitations under the License.
.mx_AccessibleButton {
cursor: pointer;
}
.mx_AccessibleButton_disabled {
cursor: default;
}
.mx_AccessibleButton_hasKind {
padding: 10px 25px;
text-align: center;
border-radius: 4px;
display: inline-block;
}
.mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color;
background-color: $button-primary-bg-color;
}
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
color: $button-primary-disabled-fg-color;
background-color: $button-primary-disabled-bg-color;
}

4
res/css/views/elements/_DirectorySearchBox.scss
View File

@@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
padding-right: 10px;
background-color: $plinth-bg-color;
border-radius: 3px;
background-image: url('../../img/icon-return.svg');
background-image: url('$(res)/img/icon-return.svg');
background-position: 8px 70%;
background-repeat: no-repeat;
text-indent: 18px;
@@ -61,7 +61,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
.mx_DirectorySearchBox_clear {
display: inline-block;
vertical-align: middle;
background: url('../../img/icon_context_delete.svg');
background: url('$(res)/img/icon_context_delete.svg');
background-position: 0 50%;
background-repeat: no-repeat;
width: 15px;

81
res/css/views/elements/_Field.scss Normal file
View File

@@ -0,0 +1,81 @@
/*
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.
*/
/* TODO: Consider unifying with general input styles in _dharma.scss */
.mx_Field {
position: relative;
margin: 1em 0;
}
.mx_Field input,
.mx_Field select {
font-weight: normal;
border-radius: 4px;
transition: border-color 0.25s;
border: 1px solid $input-border-color;
padding: 8px 9px;
}
.mx_Field input:focus,
.mx_Field select:focus {
outline: 0;
border-color: $input-focused-border-color;
}
.mx_Field input::placeholder {
transition: color 0.25s ease-in 0s;
color: transparent;
}
.mx_Field input:placeholder-shown:focus::placeholder {
transition: color 0.25s ease-in 0.1s;
color: $greyed-fg-color;
}
.mx_Field label {
transition:
font-size 0.25s ease-out 0.1s,
color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s;
color: $primary-fg-color;
background-color: transparent;
font-size: 14px;
position: absolute;
left: 0px;
top: 0px;
margin: 7px 8px;
padding: 2px;
}
.mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label,
.mx_Field select:focus + label {
transition:
font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s,
top 0.25s ease-out 0s,
background-color 0.25s ease-out 0s;
font-size: 10px;
top: -14px;
background-color: $field-focused-label-bg-color;
}
.mx_Field input:focus + label,
.mx_Field select:focus + label {
color: $input-focused-border-color;
}

2
res/css/views/elements/_ImageView.scss
View File

@@ -50,7 +50,7 @@ limitations under the License.
max-height: 100%;
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
object-fit: contain;
/* background-image: url('../../img/trans.png'); */
/* background-image: url('$(res)/img/trans.png'); */
pointer-events: all;
}

2
res/css/views/rooms/_EntityTile.scss
View File

@@ -22,7 +22,7 @@ limitations under the License.
}
.mx_EntityTile:hover {
background-image: url('../../img/member_chevron.png');
background-image: url('$(res)/img/member_chevron.png');
background-position: center right 10px;
background-repeat: no-repeat;
padding-right: 30px;

4
res/css/views/rooms/_EventTile.scss
View File

@@ -291,8 +291,8 @@ limitations under the License.
}
/* always override hidden attribute for blocked and warning */
.mx_EventTile_e2eIcon_hidden[src="img/e2e-blocked.svg"],
.mx_EventTile_e2eIcon_hidden[src="img/e2e-warning.svg"] {
.mx_EventTile_e2eIcon_hidden[src*="img/e2e-blocked.svg"],
.mx_EventTile_e2eIcon_hidden[src*="img/e2e-warning.svg"] {
display: block;
}

69
res/css/views/rooms/_JumpToBottomButton.scss Normal file
View File

@@ -0,0 +1,69 @@
/*
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.
*/
@charset "utf-8";
.mx_JumpToBottomButton {
z-index: 1000;
position: absolute;
// 12 because height is 50 but button is only 38 = 12+(50-38) = 24
bottom: 12px;
right: 24px;
width: 38px;
// give it a fixed height so the badge doesn't make
// it taller and pop upwards when visible
height: 50px;
text-align: center;
}
.mx_JumpToBottomButton_badge {
position: relative;
top: -12px;
border-radius: 16px;
font-weight: bold;
font-size: 12px;
line-height: 14px;
text-align: center;
// to be able to get it centered
// with text-align in parent
display: inline-block;
padding: 0 4px;
color: $secondary-accent-color;
background-color: $warning-color;
}
.mx_JumpToBottomButton_scrollDown {
position: relative;
height: 38px;
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
cursor: pointer;
}
.mx_JumpToBottomButton_scrollDown:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
mask: url('$(res)/img/icon-jump-to-bottom.svg');
mask-repeat: no-repeat;
mask-position: 9px 14px;
background: $roomtile-name-color;
}

2
res/css/views/rooms/_MemberList.scss
View File

@@ -83,7 +83,7 @@ limitations under the License.
.mx_MemberList_invite span {
margin: 0 auto;
background-image: url('../../img/feather-icons/user-add.svg');
background-image: url('$(res)/img/feather-icons/user-add.svg');
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;

7
res/css/views/rooms/_RoomSettings.scss
View File

@@ -66,15 +66,16 @@ limitations under the License.
.mx_RoomSettings_integrationsButton_errorPopup {
position: absolute;
top: 110%;
left: -125%;
width: 348%;
padding: 2%;
left: -275%;
width: 550%;
padding: 30%;
font-size: 10pt;
line-height: 1.5em;
border-radius: 5px;
background-color: $accent-color;
color: $accent-fg-color;
text-align: center;
z-index: 1000;
}
.mx_RoomSettings_unbanButton {
display: inline;

2
res/css/views/rooms/_RoomTile.scss
View File

@@ -29,7 +29,7 @@ limitations under the License.
display: none;
flex: 0 0 16px;
height: 16px;
background-image: url('../../img/icon_context.svg');
background-image: url('$(res)/img/icon_context.svg');
background-repeat: no-repeat;
background-position: center;
}

4
res/css/views/rooms/_SearchBar.scss
View File

@@ -32,7 +32,7 @@ limitations under the License.
width: 37px;
height: 37px;
background-color: $accent-color;
mask: url('../../img/feather-icons/search-input.svg');
mask: url('$(res)/img/feather-icons/search-input.svg');
mask-repeat: no-repeat;
mask-position: center;
}
@@ -55,7 +55,7 @@ limitations under the License.
.mx_SearchBar_cancel {
background-color: $warning-color;
mask: url('../../img/cancel.svg');
mask: url('$(res)/img/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;

2
res/css/views/rooms/_TopUnreadMessagesBar.scss
View File

@@ -54,7 +54,7 @@ limitations under the License.
position: absolute;
width: 38px;
height: 38px;
mask: url('../../img/icon-jump-to-first-unread.svg');
mask: url('$(res)/img/icon-jump-to-first-unread.svg');
mask-repeat: no-repeat;
mask-position: 9px 13px;
background: $roomtile-name-color;

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

@@ -61,7 +61,7 @@ limitations under the License.
}
.mx_WhoIsTypingTile_label > span {
background-image: url('../../img/typing-indicator-2x.gif');
background-image: url('$(res)/img/typing-indicator-2x.gif');
background-size: 25px;
background-position: left bottom;
background-repeat: no-repeat;

25
res/css/views/settings/tabs/_GeneralSettingsTab.scss Normal file
View File

@@ -0,0 +1,25 @@
.mx_GeneralSettingsTab_profile {
display: flex;
}
.mx_GeneralSettingsTab_profileControls {
flex-grow: 1;
}
.mx_GeneralSettingsTab_profileControls .mx_Field #profileDisplayName {
width: calc(100% - 20px); // subtract 10px padding on left and right
}
.mx_GeneralSettingsTab_profileAvatar {
width: 88px;
height: 88px;
margin-left: 13px;
}
.mx_GeneralSettingsTab_profileAvatar div {
display: block;
width: 88px;
height: 88px;
border-radius: 4px;
background-color: #ccc;
}

17
res/css/views/settings/tabs/_SettingsTab.scss Normal file
View File

@@ -0,0 +1,17 @@
.mx_SettingsTab_heading {
font-size: 20px;
font-weight: 600;
color: $primary-fg-color;
}
.mx_SettingsTab_subheading {
font-size: 14px;
display: block;
font-family: $font-family-semibold;
color: $primary-fg-color;
margin-bottom: 10px;
}
.mx_SettingsTab_section {
margin-top: 10px;
}

10
res/img/feather-icons/cancel.svg Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="#" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#9fa9ba" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

6
res/img/feather-icons/help-circle.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
<circle cx="6" cy="6" r="6"/>
<path d="M4.254 4.2a1.8 1.8 0 0 1 3.498.6c0 1.2-1.8 1.8-1.8 1.8M6 8.991"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

6
res/img/feather-icons/lock.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
<rect width="11" height="6.6" y="5.4" rx="1.2"/>
<path d="M2.444 5.4V3c0-1.657 1.368-3 3.056-3s3.056 1.343 3.056 3v2.4"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 369 B

5
res/img/feather-icons/sliders.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round">
<path d="M2.636 11V7.111M2.636 4.889V1M7 11V6M7 3.778V1M11.364 11V8.222M11.364 6V1M1 7.111h3.273M5.364 3.778h3.272M9.727 8.222H13"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 345 B

32
res/img/icon-jump-to-bottom.svg Normal file
View File

@@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg4"
width="18.666187"
height="8.7375822"
viewBox="0 0 18.666187 8.7375818"
version="1.1"
style="fill:none">
<metadata
id="metadata8">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<path
id="path2-8-3"
style="fill:none;stroke:#000000;stroke-width:1.29999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 17.909095,0.75599092 9.3330939,7.987602 0.75709259,0.75599092" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1016 B

4
res/themes/dark/css/_dark.scss
View File

@@ -149,8 +149,8 @@ $event-redacted-border-color: #000000;
// event timestamp
$event-timestamp-color: #acacac;
$edit-button-url: "../../img/icon_context_message_dark.svg";
$copy-button-url: "../../img/icon_copy_message_dark.svg";
$edit-button-url: "$(res)/img/icon_context_message_dark.svg";
$copy-button-url: "$(res)/img/icon_copy_message_dark.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

3
res/themes/dark/css/dark.scss
View File

@@ -1,4 +1,5 @@
@import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss";
@import "../../light/css/_base.scss";
@import "_dark.scss";
@import "../../../../res/css/_components.scss";

55
res/themes/dharma/css/_dharma.scss
View File

@@ -1,5 +1,3 @@
@import "_fonts.scss";
// XXX: check this?
/* Nunito lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics however do not combine
@@ -7,6 +5,7 @@
horizontal mess. Arial empirically gets it right, hence prioritising
Arial here. */
$font-family: 'Nunito', Arial, Helvetica, Sans-Serif;
$font-family-semibold: 'Nunito SemiBold', Arial, Helvetica, Sans-Serif;
// typical text (dark-on-white in light skin)
$primary-fg-color: #454545;
@@ -73,6 +72,10 @@ $input-darker-bg-color: rgba(193, 201, 214, 0.29);
$input-darker-fg-color: #9fa9ba;
$input-lighter-bg-color: #f2f5f8;
$input-lighter-fg-color: $input-darker-fg-color;
$input-focused-border-color: #238cf5;
$input-valid-border-color: #7ac9a1;
$field-focused-label-bg-color: #ffffff;
$button-bg-color: #7ac9a1;
$button-fg-color: white;
@@ -94,6 +97,11 @@ $avatar-bg-color: #ffffff;
$h3-color: #3d3b39;
$dialog-title-fg-color: #454545;
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000;
@@ -171,8 +179,8 @@ $event-redacted-border-color: #cccccc;
// event timestamp
$event-timestamp-color: #acacac;
$edit-button-url: "../../img/icon_context_message.svg";
$copy-button-url: "../../img/icon_copy_message.svg";
$edit-button-url: "$(res)/img/icon_context_message.svg";
$copy-button-url: "$(res)/img/icon_copy_message.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
@@ -184,6 +192,20 @@ $lightbox-bg-color: #454545;
$lightbox-fg-color: #ffffff;
$lightbox-border-color: #ffffff;
// Tabbed views
$tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent;
$tab-label-active-bg-color: #7ac9a1;
$tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: #ffffff;
// Buttons
$button-primary-fg-color: #ffffff;
$button-primary-bg-color: #7ac9a1;
$button-primary-disabled-fg-color: #ffffff;
$button-primary-disabled-bg-color: #bce4d0;
// unused?
$progressbar-color: #000;
@@ -191,6 +213,10 @@ $room-warning-bg-color: #fff8e3;
$memberstatus-placeholder-color: $roomtile-name-color;
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
$authpage-body-bg-color: #ffffff;
/*** form elements ***/
// .mx_textinput is a container for a text input
@@ -200,8 +226,8 @@ $memberstatus-placeholder-color: $roomtile-name-color;
.mx_MatrixChat {
:not(.mx_textinput) > input[type=text],
:not(.mx_textinput) > input[type=search],
:not(.mx_textinput):not(.mx_Field) > input[type=text],
:not(.mx_textinput):not(.mx_Field) > input[type=search],
.mx_textinput {
display: block;
margin: 9px;
@@ -245,8 +271,8 @@ input[type=password] {
}
.dark-panel {
:not(.mx_textinput) > input[type=text],
:not(.mx_textinput) > input[type=search],
:not(.mx_textinput):not(.mx_Field) > input[type=text],
:not(.mx_textinput):not(.mx_Field) > input[type=search],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $input-darker-bg-color;
@@ -255,8 +281,8 @@ input[type=password] {
}
.light-panel {
:not(.mx_textinput) > input[type=text],
:not(.mx_textinput) > input[type=search],
:not(.mx_textinput):not(.mx_Field) > input[type=text],
:not(.mx_textinput):not(.mx_Field) > input[type=search],
.mx_textinput {
color: $input-lighter-fg-color;
background-color: $input-lighter-bg-color;
@@ -275,7 +301,7 @@ input[type=search].mx_textinput_icon {
// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
input[type=text].mx_textinput_icon.mx_textinput_search,
input[type=search].mx_textinput_icon.mx_textinput_search {
background-image: url('../../img/feather-icons/search-input.svg');
background-image: url('$(res)/img/feather-icons/search-input.svg');
}
// dont search UI as not all browsers support it,
@@ -293,6 +319,13 @@ input[type=search]::-webkit-search-results-decoration {
.input[type=search]::-moz-placeholder {
color: #a5aab2;
}
// Override Firefox's UA style so we get a consistent look across browsers
input::placeholder,
textarea::placeholder {
opacity: initial;
}
// ***** Mixins! *****
@define-mixin mx_DialogButton {

16
res/themes/dharma/css/_fonts.scss
View File

@@ -11,37 +11,37 @@
font-family: 'Nunito';
font-style: italic;
font-weight: 400;
src: url('../../fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: italic;
font-weight: 600;
src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: italic;
font-weight: 700;
src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url('../../fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 600;
src: url('../../fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
src: url('../../fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
}
/*
@@ -51,14 +51,14 @@
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}

3
res/themes/dharma/css/dharma.scss
View File

@@ -1,3 +1,4 @@
@import "../../light/css/_paths.scss";
@import "_fonts.scss";
@import "_dharma.scss";
@import "../../../../res/css/_components.scss";

35
res/themes/light/css/_base.scss
View File

@@ -1,11 +1,10 @@
@import "_fonts.scss";
/* Open Sans lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics however do not combine
nicely with Open Sans (on OSX, at least) and result in a huge
horizontal mess. Arial empirically gets it right, hence prioritising
Arial here. */
$font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
$font-family-semibold: 'Open Sans', Arial, Helvetica, Sans-Serif;
// typical text (dark-on-white in light skin)
$primary-fg-color: #454545;
@@ -68,6 +67,7 @@ $primary-hairline-color: #e5e5e5;
// used for the border of input text fields
$input-border-color: #f0f0f0;
$input-border-dark-color: #b8b8b8;
$input-darker-bg-color: #c1c9d6;
$input-darker-fg-color: #9fa9ba;
@@ -75,6 +75,10 @@ $button-bg-color: #7ac9a1;
$button-fg-color: white;
// apart from login forms, which have stronger border
$strong-input-border-color: #c7c7c7;
$input-focused-border-color: #238cf5;
$input-valid-border-color: #7ac9a1;
$field-focused-label-bg-color: #ffffff;
// used for UserSettings EditableText
$input-underline-color: rgba(151, 151, 151, 0.5);
@@ -90,6 +94,11 @@ $avatar-bg-color: #ffffff;
$h3-color: #3d3b39;
$dialog-title-fg-color: #454545;
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000;
@@ -162,8 +171,8 @@ $event-redacted-border-color: #cccccc;
// event timestamp
$event-timestamp-color: #acacac;
$edit-button-url: "../../img/icon_context_message.svg";
$copy-button-url: "../../img/icon_copy_message.svg";
$edit-button-url: "$(res)/img/icon_context_message.svg";
$copy-button-url: "$(res)/img/icon_copy_message.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
@@ -179,6 +188,20 @@ $imagebody-giflabel: rgba(0, 0, 0, 0.7);
$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
$imagebody-giflabel-color: rgba(255, 255, 255, 1);
// Tabbed views
$tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent;
$tab-label-active-bg-color: #7ac9a1;
$tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: #ffffff;
// Buttons
$button-primary-fg-color: #ffffff;
$button-primary-bg-color: #7ac9a1;
$button-primary-disabled-fg-color: #ffffff;
$button-primary-disabled-bg-color: #bce4d0;
// unused?
$progressbar-color: #000;
@@ -186,6 +209,10 @@ $room-warning-bg-color: #fff8e3;
$memberstatus-placeholder-color: $roomtile-name-color;
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
$authpage-body-bg-color: #ffffff;
// ***** Mixins! *****
@define-mixin mx_DialogButton {

16
res/themes/light/css/_fonts.scss
View File

@@ -7,42 +7,42 @@
*/
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@@ -54,14 +54,14 @@
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}

3
res/themes/light/css/_paths.scss Normal file
View File

@@ -0,0 +1,3 @@
// Path from root SCSS file (such as `light.scss`) to `res` dir in the source tree
// This value is overridden by external themes in `riot-web`.
$res: ../../..;

3
res/themes/light/css/light.scss
View File

@@ -1,3 +1,4 @@
@import "_paths.scss";
@import "_fonts.scss";
@import "_base.scss";
@import "../../../../res/css/_components.scss";

2
src/Avatar.js
View File

@@ -56,6 +56,6 @@ module.exports = {
for (let i = 0; i < s.length; ++i) {
total += s.charCodeAt(i);
}
return 'img/' + images[total % images.length] + '.png';
return require('../res/img/' + images[total % images.length] + '.png');
},
};

8
src/Rooms.js
View File

@@ -159,6 +159,10 @@ export function setDMRoom(roomId, userId) {
/**
* Given a room, estimate which of its members is likely to
* be the target if the room were a DM room and return that user.
*
* @param {Object} room Target room
* @param {string} myUserId User ID of the current user
* @returns {string} User ID of the user that the room is probably a DM with
*/
function guessDMRoomTargetId(room, myUserId) {
let oldestTs;
@@ -173,7 +177,7 @@ function guessDMRoomTargetId(room, myUserId) {
oldestTs = user.events.member.getTs();
}
}
if (oldestUser) return oldestUser;
if (oldestUser) return oldestUser.userId;
// if there are no joined members other than us, use the oldest member
for (const user of room.currentState.getMembers()) {
@@ -186,5 +190,5 @@ function guessDMRoomTargetId(room, myUserId) {
}
if (oldestUser === undefined) return myUserId;
return oldestUser;
return oldestUser.userId;
}

4
src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
View File

@@ -252,9 +252,7 @@ export default React.createClass({
for (let i = 0; i < this.state.zxcvbnResult.feedback.suggestions.length; ++i) {
suggestions.push(<div key={i}>{this.state.zxcvbnResult.feedback.suggestions[i]}</div>);
}
const suggestionBlock = suggestions.length > 0 ? <div>
{suggestions}
</div> : null;
const suggestionBlock = <div>{suggestions.length > 0 ? suggestions : _t("Keep going...")}</div>;
helpText = <div>
{this.state.zxcvbnResult.feedback.warning}

16
src/components/structures/CompatibilityPage.js
View File

@@ -41,10 +41,15 @@ module.exports = React.createClass({
<div className="mx_CompatibilityPage_box">
<p>{ _t("Sorry, your browser is <b>not</b> able to run Riot.", {}, { 'b': (sub) => <b>{sub}</b> }) } </p>
<p>
{ _t("Riot uses many advanced browser features, some of which are not available or experimental in your current browser.") }
{ _t(
"Riot uses many advanced browser features, some of which are not available " +
"or experimental in your current browser.",
) }
</p>
<p>
{ _t('Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.',
{ _t(
'Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> ' +
'for the best experience.',
{},
{
'chromeLink': (sub) => <a href="https://www.google.com/chrome">{sub}</a>,
@@ -60,7 +65,12 @@ module.exports = React.createClass({
)}
</p>
<p>
{ _t("With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!") }
{ _t(
"With your current browser, the look and feel of the application may be " +
"completely incorrect, and some or all features may not function. " +
"If you want to try it anyway you can continue, but you are on your own in terms " +
"of any issues you may encounter!",
) }
</p>
<button onClick={this.onAccept}>
{ _t("I understand the risks and wish to continue") }

18
src/components/structures/GroupView.js
View File

@@ -125,7 +125,7 @@ const CategoryRoomList = React.createClass({
(<AccessibleButton className="mx_GroupView_featuredThings_addButton"
onClick={this.onAddRoomsToSummaryClicked}
>
<TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
<TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
<div className="mx_GroupView_featuredThings_addButton_label">
{ _t('Add a Room') }
</div>
@@ -226,7 +226,7 @@ const FeaturedRoom = React.createClass({
const deleteButton = this.props.editing ?
<img
className="mx_GroupView_featuredThing_deleteButton"
src="img/cancel-small.svg"
src={require("../../../res/img/cancel-small.svg")}
width="14"
height="14"
alt="Delete"
@@ -300,7 +300,7 @@ const RoleUserList = React.createClass({
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const addButton = this.props.editing ?
(<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
<TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
<TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
<div className="mx_GroupView_featuredThings_addButton_label">
{ _t('Add a User') }
</div>
@@ -379,7 +379,7 @@ const FeaturedUser = React.createClass({
const deleteButton = this.props.editing ?
<img
className="mx_GroupView_featuredThing_deleteButton"
src="img/cancel-small.svg"
src={require("../../../res/img/cancel-small.svg")}
width="14"
height="14"
alt="Delete"
@@ -855,7 +855,7 @@ export default React.createClass({
onClick={this._onAddRoomsClick}
>
<div className="mx_GroupView_rooms_header_addRow_button">
<TintableSvg src="img/icons-room-add.svg" width="24" height="24" />
<TintableSvg src={require("../../../res/img/icons-room-add.svg")} width="24" height="24" />
</div>
<div className="mx_GroupView_rooms_header_addRow_label">
{ _t('Add rooms to this community') }
@@ -1189,7 +1189,7 @@ export default React.createClass({
</label>
<div className="mx_GroupView_avatarPicker_edit">
<label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
<img src="img/camera.svg"
<img src={require("../../../res/img/camera.svg")}
alt={_t("Upload avatar")} title={_t("Upload avatar")}
width="17" height="15" />
</label>
@@ -1255,7 +1255,7 @@ export default React.createClass({
);
rightButtons.push(
<AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this._onCancelClick} key="_cancelButton">
<img src="img/cancel.svg" className="mx_filterFlipColor"
<img src={require("../../../res/img/cancel.svg")} className="mx_filterFlipColor"
width="18" height="18" alt={_t("Cancel")} />
</AccessibleButton>,
);
@@ -1265,13 +1265,13 @@ export default React.createClass({
<AccessibleButton className="mx_GroupHeader_button"
onClick={this._onEditClick} title={_t("Community Settings")} key="_editButton"
>
<TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
<TintableSvg src={require("../../../res/img/icons-settings-room.svg")} width="16" height="16" />
</AccessibleButton>,
);
}
rightButtons.push(
<AccessibleButton className="mx_GroupHeader_button" onClick={this._onShareClick} title={_t('Share Community')} key="_shareButton">
<TintableSvg src="img/icons-share.svg" width="16" height="16" />
<TintableSvg src={require("../../../res/img/icons-share.svg")} width="16" height="16" />
</AccessibleButton>,
);
}

2
src/components/structures/HomePage.js
View File

@@ -108,7 +108,7 @@ class HomePage extends React.Component {
if (this.context.matrixClient.isGuest()) {
guestWarning = (
<div className="mx_HomePage_guest_warning">
<img src="img/warning.svg" width="24" height="23" />
<img src={require("../../../res/img/warning.svg")} width="24" height="23" />
<div>
<div>
{ _t("You are currently using Riot anonymously as a guest.") }

6
src/components/structures/IndicatorScrollbar.js
View File

@@ -66,7 +66,11 @@ export default class IndicatorScrollbar extends React.Component {
}
render() {
return (<AutoHideScrollbar ref={this._collectScrollerComponent} wrappedRef={this._collectScroller} {... this.props}>
return (<AutoHideScrollbar
ref={this._collectScrollerComponent}
wrappedRef={this._collectScroller}
{... this.props}
>
{ this.props.children }
</AutoHideScrollbar>);
}

2
src/components/structures/InteractiveAuth.js
View File

@@ -20,7 +20,7 @@ const InteractiveAuth = Matrix.InteractiveAuth;
import React from 'react';
import PropTypes from 'prop-types';
import {getEntryComponentForLoginType} from '../views/login/InteractiveAuthEntryComponents';
import {getEntryComponentForLoginType} from '../views/auth/InteractiveAuthEntryComponents';
export default React.createClass({
displayName: 'InteractiveAuth',

47
src/components/structures/LoggedInView.js
View File

@@ -35,7 +35,7 @@ import RoomListStore from "../../stores/RoomListStore";
import TagOrderActions from '../../actions/TagOrderActions';
import RoomListActions from '../../actions/RoomListActions';
import ResizeHandle from '../views/elements/ResizeHandle';
import {Resizer, CollapseDistributor} from '../../resizer'
import {Resizer, CollapseDistributor} from '../../resizer';
// We need to fetch each pinned message individually (if we don't already have it)
// so each pinned message may trigger a request. Limit the number per room for sanity.
// NB. this is just for server notices rather than pinned messages in general.
@@ -160,7 +160,7 @@ const LoggedInView = React.createClass({
const classNames = {
handle: "mx_ResizeHandle",
vertical: "mx_ResizeHandle_vertical",
reverse: "mx_ResizeHandle_reverse"
reverse: "mx_ResizeHandle_reverse",
};
const collapseConfig = {
toggleSize: 260 - 50,
@@ -183,10 +183,13 @@ const LoggedInView = React.createClass({
},
_loadResizerPreferences() {
const lhsSize = window.localStorage.getItem("mx_lhs_size");
let lhsSize = window.localStorage.getItem("mx_lhs_size");
if (lhsSize !== null) {
this.resizer.forHandleAt(0).resize(parseInt(lhsSize, 10));
lhsSize = parseInt(lhsSize, 10);
} else {
lhsSize = 350;
}
this.resizer.forHandleAt(0).resize(lhsSize);
},
onAccountData: function(event) {
@@ -201,7 +204,11 @@ const LoggedInView = React.createClass({
},
onSync: function(syncState, oldSyncState, data) {
const oldErrCode = this.state.syncErrorData && this.state.syncErrorData.error && this.state.syncErrorData.error.errcode;
const oldErrCode = (
this.state.syncErrorData &&
this.state.syncErrorData.error &&
this.state.syncErrorData.error.errcode
);
const newErrCode = data && data.error && data.error.errcode;
if (syncState === oldSyncState && oldErrCode === newErrCode) return;
@@ -310,7 +317,10 @@ const LoggedInView = React.createClass({
}
},
/** dispatch a page-up/page-down/etc to the appropriate component */
/**
* dispatch a page-up/page-down/etc to the appropriate component
* @param {Object} ev The key event
*/
_onScrollKeyPressed: function(ev) {
if (this.refs.roomView) {
this.refs.roomView.handleScrollKey(ev);
@@ -424,11 +434,11 @@ const LoggedInView = React.createClass({
const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
const ServerLimitBar = sdk.getComponent('globals.ServerLimitBar');
let page_element;
let pageElement;
switch (this.props.page_type) {
case PageTypes.RoomView:
page_element = <RoomView
pageElement = <RoomView
ref='roomView'
autoJoin={this.props.autoJoin}
onRegistered={this.props.onRegistered}
@@ -444,7 +454,7 @@ const LoggedInView = React.createClass({
break;
case PageTypes.UserSettings:
page_element = <UserSettings
pageElement = <UserSettings
onClose={this.props.onCloseAllSettings}
brand={this.props.config.brand}
referralBaseUrl={this.props.config.referralBaseUrl}
@@ -453,11 +463,11 @@ const LoggedInView = React.createClass({
break;
case PageTypes.MyGroups:
page_element = <MyGroups />;
pageElement = <MyGroups />;
break;
case PageTypes.RoomDirectory:
page_element = <RoomDirectory
pageElement = <RoomDirectory
ref="roomDirectory"
config={this.props.config.roomDirectory}
/>;
@@ -471,7 +481,7 @@ const LoggedInView = React.createClass({
const teamServerUrl = this.props.config.teamServerConfig ?
this.props.config.teamServerConfig.teamServerURL : null;
page_element = <HomePage
pageElement = <HomePage
teamServerUrl={teamServerUrl}
teamToken={this.props.teamToken}
homePageUrl={this.props.config.welcomePageUrl}
@@ -480,12 +490,12 @@ const LoggedInView = React.createClass({
break;
case PageTypes.UserView:
page_element = null; // deliberately null for now
pageElement = null; // deliberately null for now
// TODO: fix/remove UserView
// right_panel = <RightPanel disabled={this.props.rightDisabled} />;
break;
case PageTypes.GroupView:
page_element = <GroupView
pageElement = <GroupView
groupId={this.props.currentGroupId}
isNew={this.props.currentGroupIsNew}
collapsedRhs={this.props.collapsedRhs}
@@ -525,7 +535,10 @@ const LoggedInView = React.createClass({
topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
} else if (this.state.userHasGeneratedPassword) {
topBar = <PasswordNagBar />;
} else if (!isGuest && Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
} else if (
!isGuest && Notifier.supportsDesktopNotifications() &&
!Notifier.isEnabled() && !Notifier.isToolbarHidden()
) {
topBar = <MatrixToolbar />;
}
@@ -546,8 +559,8 @@ const LoggedInView = React.createClass({
collapsed={this.props.collapseLhs || this.state.collapseLhs || false}
disabled={this.props.leftDisabled}
/>
<ResizeHandle/>
{ page_element }
<ResizeHandle />
{ pageElement }
</div>
</DragDropContext>
</div>

33
src/components/structures/MatrixChat.js
View File

@@ -183,7 +183,7 @@ export default React.createClass({
register_is_url: null,
register_id_sid: null,
// Parameters used for setting up the login/registration views
// Parameters used for setting up the authentication views
defaultServerName: this.props.config.default_server_name,
defaultHsUrl: this.props.config.default_hs_url,
defaultIsUrl: this.props.config.default_is_url,
@@ -302,7 +302,10 @@ export default React.createClass({
// will check their settings.
this.setState({
defaultServerName: null, // To un-hide any secrets people might be keeping
defaultServerDiscoveryError: _t("Invalid configuration: Cannot supply a default homeserver URL and a default server name"),
defaultServerDiscoveryError: _t(
"Invalid configuration: Cannot supply a default homeserver URL and " +
"a default server name",
),
});
}
@@ -607,7 +610,17 @@ export default React.createClass({
case 'view_indexed_room':
this._viewIndexedRoom(payload.roomIndex);
break;
case 'view_user_settings':
case 'view_user_settings': {
if (SettingsStore.isFeatureEnabled("feature_tabbed_settings")) {
const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {});
} else {
this._setPage(PageTypes.UserSettings);
this.notifyNewScreen('settings');
}
break;
}
case 'view_old_user_settings':
this._setPage(PageTypes.UserSettings);
this.notifyNewScreen('settings');
break;
@@ -1840,7 +1853,11 @@ export default React.createClass({
render: function() {
// console.log(`Rendering MatrixChat with view ${this.state.view}`);
if (this.state.view === VIEWS.LOADING || this.state.view === VIEWS.LOGGING_IN || this.state.loadingDefaultHomeserver) {
if (
this.state.view === VIEWS.LOADING ||
this.state.view === VIEWS.LOGGING_IN ||
this.state.loadingDefaultHomeserver
) {
const Spinner = sdk.getComponent('elements.Spinner');
return (
<div className="mx_MatrixChat_splash">
@@ -1851,7 +1868,7 @@ export default React.createClass({
// needs to be before normal PageTypes as you are logged in technically
if (this.state.view === VIEWS.POST_REGISTRATION) {
const PostRegistration = sdk.getComponent('structures.login.PostRegistration');
const PostRegistration = sdk.getComponent('structures.auth.PostRegistration');
return (
<PostRegistration
onComplete={this.onFinishPostRegistration} />
@@ -1906,7 +1923,7 @@ export default React.createClass({
}
if (this.state.view === VIEWS.REGISTER) {
const Registration = sdk.getComponent('structures.login.Registration');
const Registration = sdk.getComponent('structures.auth.Registration');
return (
<Registration
clientSecret={this.state.register_client_secret}
@@ -1935,7 +1952,7 @@ export default React.createClass({
if (this.state.view === VIEWS.FORGOT_PASSWORD) {
const ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
const ForgotPassword = sdk.getComponent('structures.auth.ForgotPassword');
return (
<ForgotPassword
defaultServerName={this.getDefaultServerName()}
@@ -1951,7 +1968,7 @@ export default React.createClass({
}
if (this.state.view === VIEWS.LOGIN) {
const Login = sdk.getComponent('structures.login.Login');
const Login = sdk.getComponent('structures.auth.Login');
return (
<Login
onLoggedIn={Lifecycle.setLoggedIn}

22
src/components/structures/MessagePanel.js
View File

@@ -631,13 +631,29 @@ module.exports = React.createClass({
}
},
_scrollDownIfAtBottom: function() {
_onTypingVisible: function() {
const scrollPanel = this.refs.scrollPanel;
if (scrollPanel) {
if (scrollPanel && scrollPanel.getScrollState().stuckAtBottom) {
scrollPanel.blockShrinking();
// scroll down if at bottom
scrollPanel.checkScroll();
}
},
updateTimelineMinHeight: function() {
const scrollPanel = this.refs.scrollPanel;
const whoIsTyping = this.refs.whoIsTyping;
const isTypingVisible = whoIsTyping && whoIsTyping.isVisible();
if (scrollPanel) {
if (isTypingVisible) {
scrollPanel.blockShrinking();
} else {
scrollPanel.clearBlockShrinking();
}
}
},
onResize: function() {
dis.dispatch({ action: 'timeline_resize' }, true);
},
@@ -666,7 +682,7 @@ module.exports = React.createClass({
let whoIsTyping;
if (this.props.room) {
whoIsTyping = (<WhoIsTypingTile room={this.props.room} onVisible={this._scrollDownIfAtBottom} />);
whoIsTyping = (<WhoIsTypingTile room={this.props.room} onVisible={this._onTypingVisible} ref="whoIsTyping" />);
}
return (

4
src/components/structures/MyGroups.js
View File

@@ -107,7 +107,7 @@ export default withMatrixClient(React.createClass({
}
return <div className="mx_MyGroups">
<SimpleRoomHeader title={_t("Communities")} icon="img/icons-groups.svg" />
<SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/img/icons-groups.svg")} />
<div className='mx_MyGroups_header'>
<div className="mx_MyGroups_headerCard">
<AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick}>
@@ -124,7 +124,7 @@ export default withMatrixClient(React.createClass({
</div>
{/*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
<AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
<TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
<TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
</AccessibleButton>
<div className="mx_MyGroups_headerCard_content">
<div className="mx_MyGroups_headerCard_header">

2
src/components/structures/RoomDirectory.js
View File

@@ -571,7 +571,7 @@ module.exports = React.createClass({
const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
return (
<div className="mx_RoomDirectory">
<SimpleRoomHeader title={ _t('Directory') } icon="img/icons-directory.svg" />
<SimpleRoomHeader title={ _t('Directory') } icon={require("../../../res/img/icons-directory.svg")} />
<div className="mx_RoomDirectory_list">
<div className="mx_RoomDirectory_listheader">
<DirectorySearchBox

59
src/components/structures/RoomStatusBar.js
View File

@@ -45,14 +45,6 @@ module.exports = React.createClass({
propTypes: {
// the room this statusbar is representing.
room: PropTypes.object.isRequired,
// the number of messages which have arrived since we've been scrolled up
numUnreadMessages: PropTypes.number,
// this is true if we are fully scrolled-down, and are looking at
// the end of the live timeline.
atEndOfLiveTimeline: PropTypes.bool,
// This is true when the user is alone in the room, but has also sent a message.
// Used to suggest to the user to invite someone
sentMessageAndIsAlone: PropTypes.bool,
@@ -82,9 +74,6 @@ module.exports = React.createClass({
// 'you are alone' bar
onStopWarningClick: PropTypes.func,
// callback for when the user clicks on the 'scroll to bottom' button
onScrollToBottomClick: PropTypes.func,
// callback for when we do something that changes the size of the
// status bar. This is used to trigger a re-layout in the parent
// component.
@@ -180,8 +169,6 @@ module.exports = React.createClass({
// indicate other sizes.
_getSize: function() {
if (this._shouldShowConnectionError() ||
this.props.numUnreadMessages ||
!this.props.atEndOfLiveTimeline ||
this.props.hasActiveCall ||
this.props.sentMessageAndIsAlone
) {
@@ -194,32 +181,10 @@ module.exports = React.createClass({
// return suitable content for the image on the left of the status bar.
_getIndicator: function() {
if (this.props.numUnreadMessages) {
return (
<div className="mx_RoomStatusBar_scrollDownIndicator"
onClick={this.props.onScrollToBottomClick}>
<img src="img/newmessages.svg" width="24" height="24"
alt="" />
</div>
);
}
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
if (!this.props.atEndOfLiveTimeline) {
return (
<AccessibleButton className="mx_RoomStatusBar_scrollDownIndicator"
onClick={this.props.onScrollToBottomClick}>
<img src="img/scrolldown.svg" width="24" height="24"
alt={_t("Scroll to bottom of page")}
title={_t("Scroll to bottom of page")} />
</AccessibleButton>
);
}
if (this.props.hasActiveCall) {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
return (
<TintableSvg src="img/sound-indicator.svg" width="23" height="20" />
<TintableSvg src={require("../../../res/img/sound-indicator.svg")} width="23" height="20" />
);
}
@@ -231,9 +196,7 @@ module.exports = React.createClass({
},
_shouldShowConnectionError: function() {
// no conn bar trumps unread count since you can't get unread messages
// without a connection! (technically may already have some but meh)
// It also trumps the "some not sent" msg since you can't resend without
// no conn bar trumps the "some not sent" msg since you can't resend without
// a connection!
// There's one situation in which we don't show this 'no connection' bar, and that's
// if it's a resource limit exceeded error: those are shown in the top bar.
@@ -327,7 +290,7 @@ module.exports = React.createClass({
}
return <div className="mx_RoomStatusBar_connectionLostBar">
<img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt="" />
<img src={require("../../../res/img/warning.svg")} width="24" height="23" title={_t("Warning")} alt="" />
<div>
<div className="mx_RoomStatusBar_connectionLostBar_title">
{ title }
@@ -346,7 +309,7 @@ module.exports = React.createClass({
if (this._shouldShowConnectionError()) {
return (
<div className="mx_RoomStatusBar_connectionLostBar">
<img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ " />
<img src={require("../../../res/img/warning.svg")} width="24" height="23" title="/!\ " alt="/!\ " />
<div>
<div className="mx_RoomStatusBar_connectionLostBar_title">
{ _t('Connectivity to the server has been lost.') }
@@ -363,20 +326,6 @@ module.exports = React.createClass({
return this._getUnsentMessageContent();
}
// unread count trumps who is typing since the unread count is only
// set when you've scrolled up
if (this.props.numUnreadMessages) {
// MUST use var name "count" for pluralization to kick in
const unreadMsgs = _t("%(count)s new messages", {count: this.props.numUnreadMessages});
return (
<div className="mx_RoomStatusBar_unreadMessagesBar"
onClick={this.props.onScrollToBottomClick}>
{ unreadMsgs }
</div>
);
}
if (this.props.hasActiveCall) {
return (
<div className="mx_RoomStatusBar_callBar">

29
src/components/structures/RoomView.js
View File

@@ -1473,11 +1473,10 @@ module.exports = React.createClass({
onStatusBarHidden: function() {
// This is currently not desired as it is annoying if it keeps expanding and collapsing
// TODO: Find a less annoying way of hiding the status bar
/*if (this.unmounted) return;
if (this.unmounted) return;
this.setState({
statusBarVisible: false,
});*/
});
},
/**
@@ -1651,14 +1650,11 @@ module.exports = React.createClass({
isStatusAreaExpanded = this.state.statusBarVisible;
statusBar = <RoomStatusBar
room={this.state.room}
numUnreadMessages={this.state.numUnreadMessages}
atEndOfLiveTimeline={this.state.atEndOfLiveTimeline}
sentMessageAndIsAlone={this.state.isAlone}
hasActiveCall={inCall}
isPeeking={myMembership !== "join"}
onInviteClick={this.onInviteButtonClick}
onStopWarningClick={this.onStopAloneWarningClick}
onScrollToBottomClick={this.jumpToLiveTimeline}
onResize={this.onChildResize}
onVisible={this.onStatusBarVisible}
onHidden={this.onStatusBarHidden}
@@ -1757,8 +1753,8 @@ module.exports = React.createClass({
}
if (MatrixClientPeg.get().isGuest()) {
const LoginBox = sdk.getComponent('structures.LoginBox');
messageComposer = <LoginBox />;
const AuthButtons = sdk.getComponent('views.auth.AuthButtons');
messageComposer = <AuthButtons />;
}
// TODO: Why aren't we storing the term/scope/count in this format
@@ -1777,20 +1773,20 @@ module.exports = React.createClass({
if (call.type === "video") {
zoomButton = (
<div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title={_t("Fill screen")}>
<TintableSvg src="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
<TintableSvg src={require("../../../res/img/fullscreen.svg")} width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
</div>
);
videoMuteButton =
<div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
<TintableSvg src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"}
<TintableSvg src={call.isLocalVideoMuted() ? require("../../../res/img/video-unmute.svg") : require("../../../res/img/video-mute.svg")}
alt={call.isLocalVideoMuted() ? _t("Click to unmute video") : _t("Click to mute video")}
width="31" height="27" />
</div>;
}
voiceMuteButton =
<div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
<TintableSvg src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"}
<TintableSvg src={call.isMicrophoneMuted() ? require("../../../res/img/voice-unmute.svg") : require("../../../res/img/voice-mute.svg")}
alt={call.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")}
width="21" height="26" />
</div>;
@@ -1802,7 +1798,7 @@ module.exports = React.createClass({
{ videoMuteButton }
{ zoomButton }
{ statusBar }
<TintableSvg className="mx_RoomView_voipChevron" src="img/voip-chevron.svg" width="22" height="17" />
<TintableSvg className="mx_RoomView_voipChevron" src={require("../../../res/img/voip-chevron.svg")} width="22" height="17" />
</div>;
}
@@ -1864,6 +1860,14 @@ module.exports = React.createClass({
onCloseClick={this.forgetReadMarker}
/>);
}
let jumpToBottom;
if (!this.state.atEndOfLiveTimeline) {
const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton');
jumpToBottom = (<JumpToBottomButton
numUnreadMessages={this.state.numUnreadMessages}
onScrollToBottomClick={this.jumpToLiveTimeline}
/>);
}
const statusBarAreaClass = classNames(
"mx_RoomView_statusArea",
{
@@ -1901,6 +1905,7 @@ module.exports = React.createClass({
{ auxPanel }
<div className="mx_RoomView_timeline">
{ topUnreadMessagesBar }
{ jumpToBottom }
{ messagePanel }
{ searchResultsPanel }
</div>

27
src/components/structures/ScrollPanel.js
View File

@@ -223,6 +223,8 @@ module.exports = React.createClass({
onResize: function() {
this.props.onResize();
// clear min-height as the height might have changed
this.clearBlockShrinking();
this.checkScroll();
if (this._gemScroll) this._gemScroll.forceUpdate();
},
@@ -372,6 +374,8 @@ module.exports = React.createClass({
}
this._unfillDebouncer = setTimeout(() => {
this._unfillDebouncer = null;
// if timeline shrinks, min-height should be cleared
this.clearBlockShrinking();
this.props.onUnfillRequest(backwards, markerScrollToken);
}, UNFILL_REQUEST_DEBOUNCE_MS);
}
@@ -678,6 +682,29 @@ module.exports = React.createClass({
this._gemScroll = gemScroll;
},
/**
* Set the current height as the min height for the message list
* so the timeline cannot shrink. This is used to avoid
* jumping when the typing indicator gets replaced by a smaller message.
*/
blockShrinking: function() {
const messageList = this.refs.itemlist;
if (messageList) {
const currentHeight = messageList.clientHeight;
messageList.style.minHeight = `${currentHeight}px`;
}
},
/**
* Clear the previously set min height
*/
clearBlockShrinking: function() {
const messageList = this.refs.itemlist;
if (messageList) {
messageList.style.minHeight = null;
}
},
render: function() {
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
// TODO: the classnames on the div and ol could do with being updated to

118
src/components/structures/TabbedView.js Normal file
View File

@@ -0,0 +1,118 @@
/*
Copyright 2017 Travis Ralston
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 * as React from "react";
import {_t} from '../../languageHandler';
import PropTypes from "prop-types";
/**
* Represents a tab for the TabbedView.
*/
export class Tab {
/**
* Creates a new tab.
* @param {string} tabLabel The untranslated tab label.
* @param {string} tabIconClass The class for the tab icon. This should be a simple mask.
* @param {string} tabJsx The JSX for the tab container.
*/
constructor(tabLabel, tabIconClass, tabJsx) {
this.label = tabLabel;
this.icon = tabIconClass;
this.body = tabJsx;
}
}
export class TabbedView extends React.Component {
static propTypes = {
// The tabs to show
tabs: PropTypes.arrayOf(PropTypes.instanceOf(Tab)).isRequired,
};
constructor() {
super();
this.state = {
activeTabIndex: 0,
};
}
_getActiveTabIndex() {
if (!this.state || !this.state.activeTabIndex) return 0;
return this.state.activeTabIndex;
}
/**
* Shows the given tab
* @param {Tab} tab the tab to show
* @private
*/
_setActiveTab(tab) {
const idx = this.props.tabs.indexOf(tab);
if (idx !== -1) {
this.setState({activeTabIndex: idx});
} else {
console.error("Could not find tab " + tab.label + " in tabs");
}
}
_renderTabLabel(tab) {
let classes = "mx_TabbedView_tabLabel ";
const idx = this.props.tabs.indexOf(tab);
if (idx === this._getActiveTabIndex()) classes += "mx_TabbedView_tabLabel_active";
if (tab.label === "Visit old settings") classes += "mx_TabbedView_tabLabel_TEMP_HACK";
let tabIcon = null;
if (tab.icon) {
tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
}
const onClickHandler = () => this._setActiveTab(tab);
return (
<span className={classes} key={"tab_label_" + tab.label}
onClick={onClickHandler}>
{tabIcon}
<span className="mx_TabbedView_tabLabel_text">
{_t(tab.label)}
</span>
</span>
);
}
_renderTabPanel(tab) {
return (
<div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}>
{tab.body}
</div>
);
}
render() {
const labels = this.props.tabs.map(tab => this._renderTabLabel(tab));
const panel = this._renderTabPanel(this.props.tabs[this._getActiveTabIndex()]);
return (
<div className="mx_TabbedView">
<div className="mx_TabbedView_tabLabels">
{labels}
</div>
{panel}
</div>
);
}
}

2
src/components/structures/TagPanel.js
View File

@@ -136,7 +136,7 @@ const TagPanel = React.createClass({
let clearButton;
if (itemsSelected) {
clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
<TintableSvg src="img/icons-close.svg" width="24" height="24"
<TintableSvg src={require("../../../res/img/icons-close.svg")} width="24" height="24"
alt={_t("Clear filter")}
title={_t("Clear filter")}
/>

11
src/components/structures/TimelinePanel.js
View File

@@ -455,7 +455,7 @@ var TimelinePanel = React.createClass({
//
const myUserId = MatrixClientPeg.get().credentials.userId;
const sender = ev.sender ? ev.sender.userId : null;
var callback = null;
var callRMUpdated = false;
if (sender != myUserId && !UserActivity.userCurrentlyActive()) {
updatedState.readMarkerVisible = true;
} else if (lastEv && this.getReadMarkerPosition() === 0) {
@@ -465,11 +465,16 @@ var TimelinePanel = React.createClass({
this._setReadMarker(lastEv.getId(), lastEv.getTs(), true);
updatedState.readMarkerVisible = false;
updatedState.readMarkerEventId = lastEv.getId();
callback = this.props.onReadMarkerUpdated;
callRMUpdated = true;
}
}
this.setState(updatedState, callback);
this.setState(updatedState, () => {
this.refs.messagePanel.updateTimelineMinHeight();
if (callRMUpdated) {
this.props.onReadMarkerUpdated();
}
});
});
},

2
src/components/structures/TopLeftMenuButton.js
View File

@@ -89,7 +89,7 @@ export default class TopLeftMenuButton extends React.Component {
resizeMethod="crop"
/>
{ nameElement }
<img className="mx_TopLeftMenuButton_chevron" src="img/topleft-chevron.svg" width="11" height="6" />
<img className="mx_TopLeftMenuButton_chevron" src={require("../../../res/img/topleft-chevron.svg")} width="11" height="6" />
</AccessibleButton>
);
}

4
src/components/structures/UploadBar.js
View File

@@ -91,8 +91,8 @@ module.exports = React.createClass({displayName: 'UploadBar',
<div className="mx_UploadBar_uploadProgressOuter">
<div className="mx_UploadBar_uploadProgressInner" style={innerProgressStyle}></div>
</div>
<img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src="img/fileicon.png" width="17" height="22" />
<img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src="img/cancel.svg" width="18" height="18"
<img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src={require("../../../res/img/fileicon.png")} width="17" height="22" />
<img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src={require("../../../res/img/cancel.svg")} width="18" height="18"
onClick={function() { ContentMessages.cancelUpload(upload.promise); }}
/>
<div className="mx_UploadBar_uploadBytes">

8
src/components/structures/UserSettings.js
View File

@@ -1227,7 +1227,7 @@ module.exports = React.createClass({
/>
</div>
<div className="mx_UserSettings_threepidButton mx_filterFlipColor">
<AccessibleButton element="img" src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
<AccessibleButton element="img" src={require("../../../res/img/cancel-small.svg")} width="14" height="14" alt={_t("Remove")}
onClick={onRemoveClick} />
</div>
</div>
@@ -1252,7 +1252,7 @@ module.exports = React.createClass({
onValueChanged={this._onAddEmailEditFinished} />
</div>
<div className="mx_UserSettings_threepidButton mx_filterFlipColor">
<AccessibleButton element="img" src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
<AccessibleButton element="img" src={require("../../../res/img/plus.svg")} width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
</div>
</div>
);
@@ -1322,7 +1322,7 @@ module.exports = React.createClass({
<div className="mx_UserSettings_avatarPicker">
<AccessibleButton className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
<img src="img/cancel.svg"
<img src={require("../../../res/img/cancel.svg")}
width="15" height="15"
className="mx_filterFlipColor"
alt={_t("Remove avatar")}
@@ -1334,7 +1334,7 @@ module.exports = React.createClass({
</div>
<div className="mx_UserSettings_avatarPicker_edit">
<label htmlFor="avatarInput" ref="file_label">
<img src="img/camera.svg" className="mx_filterFlipColor"
<img src={require("../../../res/img/camera.svg")} className="mx_filterFlipColor"
alt={_t("Upload avatar")} title={_t("Upload avatar")}
width="17" height="15" />
</label>

23
src/components/structures/login/ForgotPassword.js → src/components/structures/auth/ForgotPassword.js
View File

@@ -183,10 +183,10 @@ module.exports = React.createClass({
},
render: function() {
const LoginPage = sdk.getComponent("login.LoginPage");
const LoginHeader = sdk.getComponent("login.LoginHeader");
const LoginFooter = sdk.getComponent("login.LoginFooter");
const ServerConfig = sdk.getComponent("login.ServerConfig");
const AuthPage = sdk.getComponent("auth.AuthPage");
const AuthHeader = sdk.getComponent("auth.AuthHeader");
const AuthBody = sdk.getComponent("auth.AuthBody");
const ServerConfig = sdk.getComponent("auth.ServerConfig");
const Spinner = sdk.getComponent("elements.Spinner");
let resetPasswordJsx;
@@ -234,7 +234,7 @@ module.exports = React.createClass({
errorText = <div className="mx_Login_error">{ err }</div>;
}
const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
resetPasswordJsx = (
<div>
@@ -272,7 +272,6 @@ module.exports = React.createClass({
{ _t('Create an account') }
</a>
<LanguageSelector />
<LoginFooter />
</div>
</div>
);
@@ -280,12 +279,12 @@ module.exports = React.createClass({
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
{ resetPasswordJsx }
</div>
</LoginPage>
<AuthPage>
<AuthHeader />
<AuthBody>
{resetPasswordJsx}
</AuthBody>
</AuthPage>
);
},
});

0
src/components/structures/login/LanguageSelector.js → src/components/structures/auth/LanguageSelector.js
View File

57
src/components/structures/login/Login.js → src/components/structures/auth/Login.js
View File

@@ -1,7 +1,7 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2018 New Vector Ltd
Copyright 2018, 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.
@@ -24,7 +24,6 @@ import { _t, _td } from '../../../languageHandler';
import sdk from '../../../index';
import Login from '../../../Login';
import SdkConfig from '../../../SdkConfig';
import SettingsStore from "../../../settings/SettingsStore";
import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
import { AutoDiscovery } from "matrix-js-sdk";
@@ -487,7 +486,7 @@ module.exports = React.createClass({
},
_renderPasswordStep: function() {
const PasswordLogin = sdk.getComponent('login.PasswordLogin');
const PasswordLogin = sdk.getComponent('auth.PasswordLogin');
return (
<PasswordLogin
onSubmit={this.onPasswordLogin}
@@ -516,10 +515,10 @@ module.exports = React.createClass({
render: function() {
const Loader = sdk.getComponent("elements.Spinner");
const LoginPage = sdk.getComponent("login.LoginPage");
const LoginHeader = sdk.getComponent("login.LoginHeader");
const LoginFooter = sdk.getComponent("login.LoginFooter");
const ServerConfig = sdk.getComponent("login.ServerConfig");
const AuthPage = sdk.getComponent("auth.AuthPage");
const AuthHeader = sdk.getComponent("auth.AuthHeader");
const AuthBody = sdk.getComponent("auth.AuthBody");
const ServerConfig = sdk.getComponent("auth.ServerConfig");
const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
const errorText = this.props.defaultServerDiscoveryError || this.state.discoveryError || this.state.errorText;
@@ -533,7 +532,6 @@ module.exports = React.createClass({
}
let serverConfig;
let header;
if (!SdkConfig.get()['disable_custom_urls']) {
serverConfig = <ServerConfig ref="serverConfig"
@@ -546,15 +544,7 @@ module.exports = React.createClass({
delayTimeMs={1000} />;
}
// FIXME: remove status.im theme tweaks
const theme = SettingsStore.getValue("theme");
if (theme !== "status") {
header = <h2>{ _t('Sign in') } { loader }</h2>;
} else {
if (!errorText) {
header = <h2>{ _t('Sign in to get started') } { loader }</h2>;
}
}
const header = <h2>{ _t('Sign in') } { loader }</h2>;
let errorTextSection;
if (errorText) {
@@ -565,26 +555,23 @@ module.exports = React.createClass({
);
}
const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
<div>
{ header }
{ errorTextSection }
{ this.componentForStep(this.state.currentFlow) }
{ serverConfig }
<a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
{ _t('Create an account') }
</a>
{ loginAsGuestJsx }
<LanguageSelector />
<LoginFooter />
</div>
</div>
</LoginPage>
<AuthPage>
<AuthHeader />
<AuthBody>
{ header }
{ errorTextSection }
{ this.componentForStep(this.state.currentFlow) }
{ serverConfig }
<a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
{ _t('Create an account') }
</a>
{ loginAsGuestJsx }
<LanguageSelector />
</AuthBody>
</AuthPage>
);
},
});

15
src/components/structures/login/PostRegistration.js → src/components/structures/auth/PostRegistration.js
View File

@@ -60,12 +60,13 @@ module.exports = React.createClass({
render: function() {
const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
const LoginPage = sdk.getComponent('login.LoginPage');
const LoginHeader = sdk.getComponent('login.LoginHeader');
const AuthPage = sdk.getComponent('auth.AuthPage');
const AuthHeader = sdk.getComponent('auth.AuthHeader');
const AuthBody = sdk.getComponent("auth.AuthBody");
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
<AuthPage>
<AuthHeader />
<AuthBody>
<div className="mx_Login_profile">
{ _t('Set a display name:') }
<ChangeDisplayName />
@@ -75,8 +76,8 @@ module.exports = React.createClass({
<button onClick={this.props.onComplete}>{ _t('Continue') }</button>
{ this.state.errorString }
</div>
</div>
</LoginPage>
</AuthBody>
</AuthPage>
);
},
});

52
src/components/structures/login/Registration.js → src/components/structures/auth/Registration.js
View File

@@ -1,7 +1,7 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2018 New Vector Ltd
Copyright 2018, 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.
@@ -24,11 +24,10 @@ import PropTypes from 'prop-types';
import sdk from '../../../index';
import MatrixClientPeg from '../../../MatrixClientPeg';
import RegistrationForm from '../../views/login/RegistrationForm';
import RegistrationForm from '../../views/auth/RegistrationForm';
import RtsClient from '../../../RtsClient';
import { _t, _td } from '../../../languageHandler';
import SdkConfig from '../../../SdkConfig';
import SettingsStore from "../../../settings/SettingsStore";
import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
const MIN_PASSWORD_LENGTH = 6;
@@ -397,14 +396,12 @@ module.exports = React.createClass({
},
render: function() {
const LoginHeader = sdk.getComponent('login.LoginHeader');
const LoginFooter = sdk.getComponent('login.LoginFooter');
const LoginPage = sdk.getComponent('login.LoginPage');
const AuthHeader = sdk.getComponent('auth.AuthHeader');
const AuthBody = sdk.getComponent("auth.AuthBody");
const AuthPage = sdk.getComponent('auth.AuthPage');
const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
const Spinner = sdk.getComponent("elements.Spinner");
const ServerConfig = sdk.getComponent('views.login.ServerConfig');
const theme = SettingsStore.getValue("theme");
const ServerConfig = sdk.getComponent('views.auth.ServerConfig');
let registerBody;
if (this.state.doingUIAuth) {
@@ -458,47 +455,40 @@ module.exports = React.createClass({
);
}
let header;
let errorText;
// FIXME: remove hardcoded Status team tweaks at some point
const err = this.state.errorText || this.props.defaultServerDiscoveryError;
if (theme === 'status' && err) {
header = <div className="mx_Login_error">{ err }</div>;
} else {
header = <h2>{ _t('Create an account') }</h2>;
if (err) {
errorText = <div className="mx_Login_error">{ err }</div>;
}
const header = <h2>{ _t('Create an account') }</h2>;
if (err) {
errorText = <div className="mx_Login_error">{ err }</div>;
}
let signIn;
if (!this.state.doingUIAuth) {
signIn = (
<a className="mx_Login_create" onClick={this.onLoginClick} href="#">
{ theme === 'status' ? _t('Sign in') : _t('I already have an account') }
{ _t('I already have an account') }
</a>
);
}
const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader
icon={this.state.teamSelected ?
this.props.teamServerConfig.teamServerURL + "/static/common/" +
this.state.teamSelected.domain + "/icon.png" :
null}
/>
<AuthPage>
<AuthHeader
icon={this.state.teamSelected ?
this.props.teamServerConfig.teamServerURL + "/static/common/" +
this.state.teamSelected.domain + "/icon.png" :
null}
/>
<AuthBody>
{ header }
{ registerBody }
{ signIn }
{ errorText }
<LanguageSelector />
<LoginFooter />
</div>
</LoginPage>
</AuthBody>
</AuthPage>
);
},
});

27
src/components/views/auth/AuthBody.js Normal file
View File

@@ -0,0 +1,27 @@
/*
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.
*/
'use strict';
import React from 'react';
export default class AuthBody extends React.PureComponent {
render() {
return <div className="mx_AuthBody">
{ this.props.children }
</div>;
}
}

18
src/components/structures/LoginBox.js → src/components/views/auth/AuthButtons.js
View File

@@ -1,6 +1,6 @@
/*
Copyright 2017 Vector Creations Ltd
Copyright 2018 New Vector Ltd
Copyright 2018, 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.
@@ -18,12 +18,12 @@ limitations under the License.
'use strict';
const React = require('react');
import { _t } from '../../languageHandler';
const dis = require('../../dispatcher');
const AccessibleButton = require('../../components/views/elements/AccessibleButton');
import { _t } from '../../../languageHandler';
const dis = require('../../../dispatcher');
const AccessibleButton = require('../elements/AccessibleButton');
module.exports = React.createClass({
displayName: 'LoginBox',
displayName: 'AuthButtons',
propTypes: {
},
@@ -38,18 +38,18 @@ module.exports = React.createClass({
render: function() {
const loginButton = (
<div className="mx_LoginBox_loginButton_wrapper">
<AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
<div className="mx_AuthButtons_loginButton_wrapper">
<AccessibleButton className="mx_AuthButtons_loginButton" element="button" onClick={this.onLoginClick}>
{ _t("Login") }
</AccessibleButton>
<AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}>
<AccessibleButton className="mx_AuthButtons_registerButton" element="button" onClick={this.onRegisterClick}>
{ _t("Register") }
</AccessibleButton>
</div>
);
return (
<div className="mx_LoginBox">
<div className="mx_AuthButtons">
{ loginButton }
</div>
);

5
src/components/views/login/LoginFooter.js → src/components/views/auth/AuthFooter.js
View File

@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket 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.
@@ -20,11 +21,11 @@ import { _t } from '../../../languageHandler';
import React from 'react';
module.exports = React.createClass({
displayName: 'LoginFooter',
displayName: 'AuthFooter',
render: function() {
return (
<div className="mx_Login_links">
<div className="mx_AuthFooter">
<a href="https://matrix.org">{ _t("powered by Matrix") }</a>
</div>
);

10
src/components/views/login/LoginHeader.js → src/components/views/auth/AuthHeader.js
View File

@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket 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.
@@ -17,14 +18,17 @@ limitations under the License.
'use strict';
const React = require('react');
import sdk from '../../../index';
module.exports = React.createClass({
displayName: 'LoginHeader',
displayName: 'AuthHeader',
render: function() {
const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
return (
<div className="mx_Login_logo">
Matrix
<div className="mx_AuthHeader">
<AuthHeaderLogo />
</div>
);
},

27
src/components/views/auth/AuthHeaderLogo.js Normal file
View File

@@ -0,0 +1,27 @@
/*
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.
*/
'use strict';
import React from 'react';
export default class AuthHeaderLogo extends React.PureComponent {
render() {
return <div className="mx_AuthHeaderLogo">
Matrix
</div>;
}
}

38
src/components/views/auth/AuthPage.js Normal file
View File

@@ -0,0 +1,38 @@
/*
Copyright 2015, 2016 OpenMarket 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.
*/
'use strict';
const React = require('react');
import sdk from '../../../index';
module.exports = React.createClass({
displayName: 'AuthPage',
render: function() {
const AuthFooter = sdk.getComponent('auth.AuthFooter');
return (
<div className="mx_AuthPage">
<div className="mx_AuthPage_modal">
{ this.props.children }
</div>
<AuthFooter />
</div>
);
},
});

0
src/components/views/login/CaptchaForm.js → src/components/views/auth/CaptchaForm.js
View File

2
src/components/views/login/CountryDropdown.js → src/components/views/auth/CountryDropdown.js
View File

@@ -70,7 +70,7 @@ export default class CountryDropdown extends React.Component {
}
_flagImgForIso2(iso2) {
return <img src={`img/flags/${iso2}.png`} />;
return <img src={require(`../../../../res/img/flags/${iso2}.png`)} />;
}
_getShortOption(iso2) {

0
src/components/views/login/CustomServerDialog.js → src/components/views/auth/CustomServerDialog.js
View File

2
src/components/views/login/InteractiveAuthEntryComponents.js → src/components/views/auth/InteractiveAuthEntryComponents.js
View File

@@ -187,7 +187,7 @@ export const RecaptchaAuthEntry = React.createClass({
return <Loader />;
}
const CaptchaForm = sdk.getComponent("views.login.CaptchaForm");
const CaptchaForm = sdk.getComponent("views.auth.CaptchaForm");
const sitePublicKey = this.props.stageParams.public_key;
let errorSection;

2
src/components/views/login/PasswordLogin.js → src/components/views/auth/PasswordLogin.js
View File

@@ -201,7 +201,7 @@ class PasswordLogin extends React.Component {
disabled={disabled}
/>;
case PasswordLogin.LOGIN_FIELD_PHONE: {
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
classes.mx_Login_phoneNumberField = true;
classes.mx_Login_field_has_prefix = true;
classes.error = this.props.loginIncorrect && !this.state.phoneNumber;

2
src/components/views/login/RegistrationForm.js → src/components/views/auth/RegistrationForm.js
View File

@@ -323,7 +323,7 @@ module.exports = React.createClass({
}
}
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
let phoneSection;
if (!SdkConfig.get().disable_3pid_login) {
const phonePlaceholder = this._authStepIsRequired('m.login.msisdn') ? _t("Mobile phone number") : _t("Mobile phone number (optional)");

2
src/components/views/login/ServerConfig.js → src/components/views/auth/ServerConfig.js
View File

@@ -138,7 +138,7 @@ module.exports = React.createClass({
},
showHelpPopup: function() {
const CustomServerDialog = sdk.getComponent('login.CustomServerDialog');
const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog');
Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
},

2
src/components/views/context_menus/GroupInviteTileContextMenu.js
View File

@@ -79,7 +79,7 @@ export default class GroupInviteTileContextMenu extends React.Component {
render() {
return <div>
<div className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject} >
<img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
{ _t('Reject') }
</div>
</div>;

32
src/components/views/context_menus/RoomTileContextMenu.js
View File

@@ -245,26 +245,26 @@ module.exports = React.createClass({
return (
<div className="mx_RoomTileContextMenu">
<div className="mx_RoomTileContextMenu_notif_picker" >
<img src="img/notif-slider.svg" width="20" height="107" />
<img src={require("../../../../res/img/notif-slider.svg")} width="20" height="107" />
</div>
<div className={alertMeClasses} onClick={this._onClickAlertMe} >
<img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
<img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off-copy.svg")} width="16" height="12" />
{ _t('All messages (noisy)') }
</div>
<div className={allNotifsClasses} onClick={this._onClickAllNotifs} >
<img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off.svg" width="16" height="12" />
<img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off.svg")} width="16" height="12" />
{ _t('All messages') }
</div>
<div className={mentionsClasses} onClick={this._onClickMentions} >
<img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
<img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-mentions.svg")} width="16" height="12" />
{ _t('Mentions only') }
</div>
<div className={muteNotifsClasses} onClick={this._onClickMute} >
<img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute.svg" width="16" height="12" />
<img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute.svg")} width="16" height="12" />
{ _t('Mute') }
</div>
</div>
@@ -298,7 +298,7 @@ module.exports = React.createClass({
return (
<div>
<div className="mx_RoomTileContextMenu_leave" onClick={leaveClickHandler} >
<img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
{ leaveText }
</div>
</div>
@@ -327,18 +327,18 @@ module.exports = React.createClass({
return (
<div>
<div className={favouriteClasses} onClick={this._onClickFavourite} >
<img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_fave.svg" width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_fave.svg")} width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_fave_on.svg")} width="15" height="15" />
{ _t('Favourite') }
</div>
<div className={lowPriorityClasses} onClick={this._onClickLowPriority} >
<img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_low.svg" width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_low.svg")} width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_low_on.svg")} width="15" height="15" />
{ _t('Low Priority') }
</div>
<div className={dmClasses} onClick={this._onClickDM} >
<img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_person.svg" width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_person.svg")} width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_person_on.svg")} width="15" height="15" />
{ _t('Direct Chat') }
</div>
</div>

4
src/components/views/context_menus/TagTileContextMenu.js
View File

@@ -59,7 +59,7 @@ export default class TagTileContextMenu extends React.Component {
<div className="mx_TagTileContextMenu_item" onClick={this._onViewCommunityClick} >
<TintableSvg
className="mx_TagTileContextMenu_item_icon"
src="img/icons-groups.svg"
src={require("../../../../res/img/icons-groups.svg")}
width="15"
height="15"
/>
@@ -67,7 +67,7 @@ export default class TagTileContextMenu extends React.Component {
</div>
<hr className="mx_TagTileContextMenu_separator" />
<div className="mx_TagTileContextMenu_item" onClick={this._onRemoveClick} >
<img className="mx_TagTileContextMenu_item_icon" src="img/icon_context_delete.svg" width="15" height="15" />
<img className="mx_TagTileContextMenu_item_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
{ _t('Remove') }
</div>
</div>;

2
src/components/views/dialogs/BaseDialog.js
View File

@@ -111,7 +111,7 @@ export default React.createClass({
let cancelButton;
if (this.props.hasCancel) {
cancelButton = <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton">
<TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
<TintableSvg src={require("../../../../res/img/icons-close-button.svg")} width="35" height="35" />
</AccessibleButton>;
}

2
src/components/views/dialogs/ChatCreateOrReuseDialog.js
View File

@@ -127,7 +127,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
onClick={this.props.onNewDMClick}
>
<div className="mx_RoomTile_avatar">
<img src="img/create-big.svg" width="26" height="26" />
<img src={require("../../../../res/img/create-big.svg")} width="26" height="26" />
</div>
<div className={labelClasses}><i>{ _t("Start new chat") }</i></div>
</AccessibleButton>;

12
src/components/views/dialogs/ShareDialog.js
View File

@@ -26,11 +26,11 @@ import * as ContextualMenu from "../../structures/ContextualMenu";
const socials = [
{
name: 'Facebook',
img: 'img/social/facebook.png',
img: require("../../../../res/img/social/facebook.png"),
url: (url) => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
}, {
name: 'Twitter',
img: 'img/social/twitter-2.png',
img: require("../../../../res/img/social/twitter-2.png"),
url: (url) => `https://twitter.com/home?status=${url}`,
}, /* // icon missing
name: 'Google Plus',
@@ -38,15 +38,15 @@ const socials = [
url: (url) => `https://plus.google.com/share?url=${url}`,
},*/ {
name: 'LinkedIn',
img: 'img/social/linkedin.png',
img: require("../../../../res/img/social/linkedin.png"),
url: (url) => `https://www.linkedin.com/shareArticle?mini=true&url=${url}`,
}, {
name: 'Reddit',
img: 'img/social/reddit.png',
img: require("../../../../res/img/social/reddit.png"),
url: (url) => `http://www.reddit.com/submit?url=${url}`,
}, {
name: 'email',
img: 'img/social/email-1.png',
img: require("../../../../res/img/social/email-1.png"),
url: (url) => `mailto:?body=${url}`,
},
];
@@ -202,7 +202,7 @@ export default class ShareDialog extends React.Component {
<div className="mx_ShareDialog_split">
<div className="mx_ShareDialog_qrcode_container">
<QRCode value={matrixToUrl} size={256} logoWidth={48} logo="img/matrix-m.svg" />
<QRCode value={matrixToUrl} size={256} logoWidth={48} logo={require("../../../../res/img/matrix-m.svg")} />
</div>
<div className="mx_ShareDialog_social_container">
{

99
src/components/views/dialogs/UserSettingsDialog.js Normal file
View File

@@ -0,0 +1,99 @@
/*
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 React from 'react';
import PropTypes from 'prop-types';
import {Tab, TabbedView} from "../../structures/TabbedView";
import {_t, _td} from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
import GeneralSettingsTab from "../settings/tabs/GeneralSettingsTab";
import dis from '../../../dispatcher';
// TODO: Ditch this whole component
export class TempTab extends React.Component {
static propTypes = {
onClose: PropTypes.func.isRequired,
};
componentDidMount(): void {
dis.dispatch({action: "view_old_user_settings"});
this.props.onClose();
}
render() {
return <div>Hello World</div>;
}
}
export default class UserSettingsDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
};
_getTabs() {
return [
new Tab(
_td("General"),
"mx_UserSettingsDialog_settingsIcon",
<GeneralSettingsTab />,
),
new Tab(
_td("Notifications"),
"mx_UserSettingsDialog_bellIcon",
<div>Notifications Test</div>,
),
new Tab(
_td("Preferences"),
"mx_UserSettingsDialog_preferencesIcon",
<div>Preferences Test</div>,
),
new Tab(
_td("Voice & Video"),
"mx_UserSettingsDialog_voiceIcon",
<div>Voice Test</div>,
),
new Tab(
_td("Security & Privacy"),
"mx_UserSettingsDialog_securityIcon",
<div>Security Test</div>,
),
new Tab(
_td("Help & About"),
"mx_UserSettingsDialog_helpIcon",
<div>Help Test</div>,
),
new Tab(
_td("Visit old settings"),
"mx_UserSettingsDialog_helpIcon",
<TempTab onClose={this.props.onFinished} />,
),
];
}
render() {
return (
<div className="mx_UserSettingsDialog">
<div className="mx_UserSettingsDialog_header">
{_t("Settings")}
<span className="mx_UserSettingsDialog_close">
<AccessibleButton className="mx_UserSettingsDialog_closeIcon" onClick={this.props.onFinished} />
</span>
</div>
<TabbedView tabs={this._getTabs()} />
</div>
);
}
}

10
src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
View File

@@ -1,5 +1,5 @@
/*
Copyright 2018 New Vector Ltd
Copyright 2018, 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.
@@ -184,6 +184,14 @@ export default React.createClass({
} else if (this.state.backupInfo === null) {
title = _t("Error");
content = _t("No backup found!");
} else if (this.state.recoverInfo && this.state.recoverInfo.imported === 0) {
title = _t("Error Restoring Backup");
content = <div>
<p>{_t(
"Backup could not be decrypted with this key: " +
"please verify that you entered the correct recovery key.",
)}</p>
</div>;
} else if (this.state.recoverInfo) {
title = _t("Backup Restored");
let failedToDecrypt;

4
src/components/views/directory/NetworkDropdown.js
View File

@@ -18,7 +18,7 @@ import React from 'react';
import MatrixClientPeg from '../../../MatrixClientPeg';
import {instanceForInstanceId} from '../../../utils/DirectoryUtils';
const DEFAULT_ICON_URL = "img/network-matrix.svg";
const DEFAULT_ICON_URL = require("../../../../res/img/network-matrix.svg");
export default class NetworkDropdown extends React.Component {
constructor(props) {
@@ -191,7 +191,7 @@ export default class NetworkDropdown extends React.Component {
} else if (!instance) {
key = server + '_all';
name = 'Matrix';
icon = <img src="img/network-matrix.svg" />;
icon = <img src={require("../../../../res/img/network-matrix.svg")} />;
span_class = 'mx_NetworkDropdown_menu_network';
} else {
key = server + '_inst_' + instance.instance_id;

83
src/components/views/elements/AccessibleButton.js
View File

@@ -28,41 +28,56 @@ import { KeyCode } from '../../../Keyboard';
* @returns {Object} rendered react
*/
export default function AccessibleButton(props) {
const {element, onClick, children, ...restProps} = props;
restProps.onClick = onClick;
// We need to consume enter onKeyDown and space onKeyUp
// otherwise we are risking also activating other keyboard focusable elements
// that might receive focus as a result of the AccessibleButtonClick action
// It's because we are using html buttons at a few places e.g. inside dialogs
// And divs which we report as role button to assistive technologies.
// Browsers handle space and enter keypresses differently and we are only adjusting to the
// inconsistencies here
restProps.onKeyDown = function(e) {
if (e.keyCode === KeyCode.ENTER) {
e.stopPropagation();
e.preventDefault();
return onClick(e);
}
if (e.keyCode === KeyCode.SPACE) {
e.stopPropagation();
e.preventDefault();
}
};
restProps.onKeyUp = function(e) {
if (e.keyCode === KeyCode.SPACE) {
e.stopPropagation();
e.preventDefault();
return onClick(e);
}
if (e.keyCode === KeyCode.ENTER) {
e.stopPropagation();
e.preventDefault();
}
};
const {element, onClick, children, kind, disabled, ...restProps} = props;
if (!disabled) {
restProps.onClick = onClick;
// We need to consume enter onKeyDown and space onKeyUp
// otherwise we are risking also activating other keyboard focusable elements
// that might receive focus as a result of the AccessibleButtonClick action
// It's because we are using html buttons at a few places e.g. inside dialogs
// And divs which we report as role button to assistive technologies.
// Browsers handle space and enter keypresses differently and we are only adjusting to the
// inconsistencies here
restProps.onKeyDown = function(e) {
if (e.keyCode === KeyCode.ENTER) {
e.stopPropagation();
e.preventDefault();
return onClick(e);
}
if (e.keyCode === KeyCode.SPACE) {
e.stopPropagation();
e.preventDefault();
}
};
restProps.onKeyUp = function(e) {
if (e.keyCode === KeyCode.SPACE) {
e.stopPropagation();
e.preventDefault();
return onClick(e);
}
if (e.keyCode === KeyCode.ENTER) {
e.stopPropagation();
e.preventDefault();
}
};
}
restProps.tabIndex = restProps.tabIndex || "0";
restProps.role = "button";
restProps.className = (restProps.className ? restProps.className + " " : "") +
"mx_AccessibleButton";
if (kind) {
// We apply a hasKind class to maintain backwards compatibility with
// buttons which might not know about kind and break
restProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
}
if (disabled) {
restProps.className += " mx_AccessibleButton_disabled";
}
return React.createElement(element, restProps, children);
}
@@ -76,6 +91,12 @@ AccessibleButton.propTypes = {
children: PropTypes.node,
element: PropTypes.string,
onClick: PropTypes.func.isRequired,
// The kind of button, similar to how Bootstrap works.
// See available classes for AccessibleButton for options.
kind: PropTypes.string,
disabled: PropTypes.bool,
};
AccessibleButton.defaultProps = {

2
src/components/views/elements/AddressSelector.js
View File

@@ -150,7 +150,7 @@ export default React.createClass({
showAddress={this.props.showAddress}
justified={true}
networkName="vector"
networkUrl="img/search-icon-vector.svg"
networkUrl={require("../../../../res/img/search-icon-vector.svg")}
/>
</div>,
);

4
src/components/views/elements/AddressTile.js
View File

@@ -54,7 +54,7 @@ export default React.createClass({
address.avatarMxc, 25, 25, 'crop',
));
} else if (address.addressType === 'email') {
imgUrls.push('img/icon-email-user.svg');
imgUrls.push(require("../../../../res/img/icon-email-user.svg"));
}
// Removing networks for now as they're not really supported
@@ -141,7 +141,7 @@ export default React.createClass({
if (this.props.canDismiss) {
dismiss = (
<div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed} >
<TintableSvg src="img/icon-address-delete.svg" width="9" height="9" />
<TintableSvg src={require("../../../../res/img/icon-address-delete.svg")} width="9" height="9" />
</div>
);
}

2
src/components/views/elements/AppPermission.js
View File

@@ -47,7 +47,7 @@ export default class AppPermission extends React.Component {
return (
<div className='mx_AppPermissionWarning'>
<div className='mx_AppPermissionWarningImage'>
<img src='img/warning.svg' alt={_t('Warning!')} />
<img src={require("../../../../res/img/warning.svg")} alt={_t('Warning!')} />
</div>
<div className='mx_AppPermissionWarningText'>
<span className='mx_AppPermissionWarningTextLabel'>{ _t('Do you want to load widget from URL:') }</span> <span className='mx_AppPermissionWarningTextURL'>{ this.state.curlBase }</span>

16
src/components/views/elements/AppTile.js
View File

@@ -582,19 +582,21 @@ export default class AppTile extends React.Component {
// editing is done in scalar
const showEditButton = Boolean(this._scalarClient && this._canUserModify());
const deleteWidgetLabel = this._deleteWidgetLabel();
let deleteIcon = 'img/cancel_green.svg';
let deleteIcon = require("../../../../res/img/cancel_green.svg");
let deleteClasses = 'mx_AppTileMenuBarWidget';
if (this._canUserModify()) {
deleteIcon = 'img/icon-delete-pink.svg';
deleteIcon = require("../../../../res/img/icon-delete-pink.svg");
deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
}
// Picture snapshot - only show button when apps are maximised.
const showPictureSnapshotButton = this._hasCapability('m.capability.screenshot') && this.props.show;
const showPictureSnapshotIcon = 'img/camera_green.svg';
const popoutWidgetIcon = 'img/button-new-window.svg';
const reloadWidgetIcon = 'img/button-refresh.svg';
const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
const showPictureSnapshotIcon = require("../../../../res/img/camera_green.svg");
const popoutWidgetIcon = require("../../../../res/img/button-new-window.svg");
const reloadWidgetIcon = require("../../../../res/img/button-refresh.svg");
const minimizeIcon = require("../../../../res/img/minimize.svg");
const maximizeIcon = require("../../../../res/img/maximize.svg");
const windowStateIcon = (this.props.show ? minimizeIcon : maximizeIcon);
let appTileClass;
if (this.props.miniMode) {
@@ -653,7 +655,7 @@ export default class AppTile extends React.Component {
{ /* Edit widget */ }
{ showEditButton && <TintableSvgButton
src="img/edit_green.svg"
src={require("../../../../res/img/edit_green.svg")}
className={"mx_AppTileMenuBarWidget " +
(this.props.showDelete ? "mx_AppTileMenuBarWidgetPadding" : "")}
title={_t('Edit')}

2
src/components/views/elements/AppWarning.js
View File

@@ -5,7 +5,7 @@ const AppWarning = (props) => {
return (
<div className='mx_AppPermissionWarning'>
<div className='mx_AppPermissionWarningImage'>
<img src='img/warning.svg' alt='' />
<img src={require("../../../../res/img/warning.svg")} alt='' />
</div>
<div className='mx_AppPermissionWarningText'>
<span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg }</span>

2
src/components/views/elements/CreateRoomButton.js
View File

@@ -25,7 +25,7 @@ const CreateRoomButton = function(props) {
<ActionButton action="view_create_room"
mouseOverAction={props.callout ? "callout_create_room" : null}
label={_t("Create new room")}
iconPath="img/icons-create-room.svg"
iconPath={require("../../../../res/img/icons-create-room.svg")}
size={props.size}
tooltip={props.tooltip}
/>

4
src/components/views/elements/EditableItemList.js
View File

@@ -62,13 +62,13 @@ const EditableItem = React.createClass({
{ this.props.onAdd ?
<div className="mx_EditableItem_addButton">
<img className="mx_filterFlipColor"
src="img/plus.svg" width="14" height="14"
src={require("../../../../res/img/plus.svg")} width="14" height="14"
alt={_t("Add")} onClick={this.onAdd} />
</div>
:
<div className="mx_EditableItem_removeButton">
<img className="mx_filterFlipColor"
src="img/cancel-small.svg" width="14" height="14"
src={require("../../../../res/img/cancel-small.svg")} width="14" height="14"
alt={_t("Delete")} onClick={this.onRemove} />
</div>
}

54
src/components/views/elements/Field.js Normal file
View File

@@ -0,0 +1,54 @@
/*
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 React from 'react';
import PropTypes from 'prop-types';
export default class Field extends React.PureComponent {
static propTypes = {
// The field's ID, which binds the input and label together.
id: PropTypes.string.isRequired,
// The field's <input> type. Defaults to "text".
type: PropTypes.string,
// The field's label string.
label: PropTypes.string,
// The field's placeholder string.
placeholder: PropTypes.string,
// The type of field to create. Defaults to "input". Should be "input" or "select".
// To define options for a select, use <Field><option ... /></Field>
element: PropTypes.string,
// All other props pass through to the <input>.
}
render() {
const extraProps = Object.assign({}, this.props);
// Remove explicit properties that shouldn't be copied
delete extraProps.element;
delete extraProps.children;
// Set some defaults for the element
extraProps.type = extraProps.type || "text";
const element = this.props.element || "input";
const fieldInput = React.createElement(element, extraProps, this.props.children);
return <div className="mx_Field">
{fieldInput}
<label htmlFor={this.props.id}>{this.props.label}</label>
</div>;
}
}

2
src/components/views/elements/HomeButton.js
View File

@@ -24,7 +24,7 @@ const HomeButton = function(props) {
return (
<ActionButton action="view_home_page"
label={_t("Home")}
iconPath="img/icons-home.svg"
iconPath={require("../../../../res/img/icons-home.svg")}
size={props.size}
tooltip={props.tooltip}
/>

2
src/components/views/elements/ImageView.js
View File

@@ -176,7 +176,7 @@ module.exports = React.createClass({
<img src={this.props.src} style={style} />
<div className="mx_ImageView_labelWrapper">
<div className="mx_ImageView_label">
<AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }><img src="img/cancel-white.svg" width="18" height="18" alt={ _t('Close') } /></AccessibleButton>
<AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }><img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } /></AccessibleButton>
<div className="mx_ImageView_shim">
</div>
<div className="mx_ImageView_name">

2
src/components/views/elements/InlineSpinner.js
View File

@@ -26,7 +26,7 @@ module.exports = React.createClass({
return (
<div className="mx_InlineSpinner">
<img src="img/spinner.gif" width={w} height={h} className={imgClass} />
<img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
</div>
);
},

8
src/components/views/elements/ManageIntegsButton.js
View File

@@ -80,7 +80,11 @@ export default class ManageIntegsButton extends React.Component {
});
if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
integrationsWarningTriangle = <img src="img/warning.svg" title={_t('Integrations Error')} width="17" />;
integrationsWarningTriangle = <img
src={require("../../../../res/img/warning.svg")}
title={_t('Integrations Error')}
width="17"
/>;
// Popup shown when hovering over integrationsButton_error (via CSS)
integrationsErrorPopup = (
<span className="mx_RoomSettings_integrationsButton_errorPopup">
@@ -91,7 +95,7 @@ export default class ManageIntegsButton extends React.Component {
integrationsButton = (
<AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={_t('Manage Integrations')}>
<TintableSvg src="img/feather-icons/grid.svg" width="20" height="20" />
<TintableSvg src={require("../../../../res/img/feather-icons/grid.svg")} width="20" height="20" />
{ integrationsWarningTriangle }
{ integrationsErrorPopup }
</AccessibleButton>

2
src/components/views/elements/MessageSpinner.js
View File

@@ -27,7 +27,7 @@ module.exports = React.createClass({
return (
<div className="mx_Spinner">
<div className="mx_Spinner_Msg">{ msg }</div>&nbsp;
<img src="img/spinner.gif" width={w} height={h} className={imgClass} />
<img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
</div>
);
},

2
src/components/views/elements/RoomDirectoryButton.js
View File

@@ -25,7 +25,7 @@ const RoomDirectoryButton = function(props) {
<ActionButton action="view_room_directory"
mouseOverAction={props.callout ? "callout_room_directory" : null}
label={_t("Room directory")}
iconPath="img/icons-directory.svg"
iconPath={require("../../../../res/img/icons-directory.svg")}
size={props.size}
tooltip={props.tooltip}
/>

2
src/components/views/elements/SettingsButton.js
View File

@@ -24,7 +24,7 @@ const SettingsButton = function(props) {
return (
<ActionButton action="view_user_settings"
label={_t("Settings")}
iconPath="img/icons-settings.svg"
iconPath={require("../../../../res/img/icons-settings.svg")}
size={props.size}
tooltip={props.tooltip}
/>

2
src/components/views/elements/Spinner.js
View File

@@ -27,7 +27,7 @@ module.exports = React.createClass({
const imgClass = this.props.imgClassName || "";
return (
<div className="mx_Spinner">
<img src="img/spinner.gif" width={w} height={h} className={imgClass} />
<img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
</div>
);
},

2
src/components/views/elements/StartChatButton.js
View File

@@ -25,7 +25,7 @@ const StartChatButton = function(props) {
<ActionButton action="view_create_chat"
mouseOverAction={props.callout ? "callout_start_chat" : null}
label={_t("Start chat")}
iconPath="img/icons-people.svg"
iconPath={require("../../../../res/img/icons-people.svg")}
size={props.size}
tooltip={props.tooltip}
/>

4
src/components/views/globals/CookieBar.js
View File

@@ -51,7 +51,7 @@ export default class CookieBar extends React.Component {
const toolbarClasses = "mx_MatrixToolbar";
return (
<div className={toolbarClasses}>
<img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="" />
<img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />
<div className="mx_MatrixToolbar_content">
{ this.props.policyUrl ? _t(
"Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
@@ -95,7 +95,7 @@ export default class CookieBar extends React.Component {
{ _t("Yes, I want to help!") }
</AccessibleButton>
<AccessibleButton className="mx_MatrixToolbar_close" onClick={this.onReject}>
<img src="img/cancel.svg" width="18" height="18" alt={_t('Close')} />
<img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
</AccessibleButton>
</div>
);

4
src/components/views/globals/MatrixToolbar.js
View File

@@ -35,11 +35,11 @@ module.exports = React.createClass({
render: function() {
return (
<div className="mx_MatrixToolbar">
<img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" />
<img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" />
<div className="mx_MatrixToolbar_content">
{ _t('You are not receiving desktop notifications') } <a className="mx_MatrixToolbar_link" onClick={ this.onClick }> { _t('Enable them now') }</a>
</div>
<AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src="img/cancel.svg" width="18" height="18" alt={_t('Close')} /></AccessibleButton>
<AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} /></AccessibleButton>
</div>
);
},

2
src/components/views/globals/NewVersionBar.js
View File

@@ -96,7 +96,7 @@ export default React.createClass({
}
return (
<div className="mx_MatrixToolbar">
<img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" />
<img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" />
<div className="mx_MatrixToolbar_content">
{_t("A new version of Riot is available.")}
</div>

2
src/components/views/globals/PasswordNagBar.js
View File

@@ -31,7 +31,7 @@ export default React.createClass({
return (
<div className={toolbarClasses} onClick={this.onUpdateClicked}>
<img className="mx_MatrixToolbar_warning"
src="img/warning.svg"
src={require("../../../../res/img/warning.svg")}
width="24"
height="23"
alt=""

6
src/components/views/globals/UpdateCheckBar.js
View File

@@ -71,9 +71,9 @@ export default React.createClass({
let image;
if (doneStatuses.includes(this.props.status)) {
image = <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="" />;
image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />;
} else {
image = <img className="mx_MatrixToolbar_warning" src="img/spinner.gif" width="24" height="23" alt="" />;
image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/spinner.gif")} width="24" height="23" alt="" />;
}
return (
@@ -83,7 +83,7 @@ export default React.createClass({
{message}
</div>
<AccessibleButton className="mx_MatrixToolbar_close" onClick={this.hideToolbar}>
<img src="img/cancel.svg" width="18" height="18" alt={_t('Close')} />
<img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
</AccessibleButton>
</div>
);

2
src/components/views/groups/GroupMemberInfo.js
View File

@@ -188,7 +188,7 @@ module.exports = React.createClass({
<div className="mx_MemberInfo">
<GeminiScrollbarWrapper autoshow={true}>
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
<img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
<img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
</AccessibleButton>
<div className="mx_MemberInfo_avatar">
{ avatar }

4
src/components/views/groups/GroupMemberList.js
View File

@@ -87,7 +87,7 @@ export default React.createClass({
const text = _t("and %(count)s others...", { count: overflowCount });
return (
<EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
<BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
<BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
} name={text} presenceState="online" suppressOnHover={true}
onClick={this._showFullMemberList} />
);
@@ -214,7 +214,7 @@ export default React.createClass({
onClick={this.onInviteToGroupButtonClick}
>
<div className="mx_RightPanel_icon" >
<TintableSvg src="img/icon-invite-people.svg" width="18" height="14" />
<TintableSvg src={require("../../../../res/img/icon-invite-people.svg")} width="18" height="14" />
</div>
<div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
</AccessibleButton>);

2
src/components/views/groups/GroupRoomInfo.js
View File

@@ -215,7 +215,7 @@ module.exports = React.createClass({
<div className="mx_MemberInfo">
<GeminiScrollbarWrapper autoshow={true}>
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
<img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
<img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
</AccessibleButton>
<div className="mx_MemberInfo_avatar">
{ avatar }

4
src/components/views/groups/GroupRoomList.js
View File

@@ -77,7 +77,7 @@ export default React.createClass({
const text = _t("and %(count)s others...", { count: overflowCount });
return (
<EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
<BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
<BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
} name={text} presenceState="online" suppressOnHover={true}
onClick={this._showFullRoomList} />
);
@@ -137,7 +137,7 @@ export default React.createClass({
onClick={this.onAddRoomToGroupButtonClick}
>
<div className="mx_RightPanel_icon" >
<TintableSvg src="img/icons-room-add.svg" width="18" height="14" />
<TintableSvg src={require("../../../../res/img/icons-room-add.svg")} width="18" height="14" />
</div>
<div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
</AccessibleButton>

59
src/components/views/login/LoginPage.js
View File

@@ -1,59 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
'use strict';
import SettingsStore from "../../../settings/SettingsStore";
const React = require('react');
module.exports = React.createClass({
displayName: 'LoginPage',
render: function() {
// FIXME: this should be turned into a proper skin with a StatusLoginPage component
if (SettingsStore.getValue("theme") === 'status') {
return (
<div className="mx_StatusLogin">
<div className="mx_StatusLogin_brand">
<img src="themes/status/img/logo.svg" alt="Status" width="221" height="53" />
</div>
<div className="mx_StatusLogin_content">
<div className="mx_StatusLogin_header">
<h1>Status Community Chat</h1>
<div className="mx_StatusLogin_subtitle">
A safer, decentralised communication
platform <a href="https://riot.im">powered by Riot</a>
</div>
</div>
{ this.props.children }
<div className="mx_StatusLogin_footer">
<p>This channel is for our development community.</p>
<p>Interested in SNT and discussions on the cryptocurrency market?</p>
<p><a href="https://t.me/StatusNetworkChat" target="_blank" className="mx_StatusLogin_footer_cta">Join Telegram Chat</a></p>
</div>
</div>
</div>
);
} else {
return (
<div className="mx_Login">
{ this.props.children }
</div>
);
}
},
});

4
src/components/views/messages/MAudioBody.js
View File

@@ -81,7 +81,7 @@ export default class MAudioBody extends React.Component {
if (this.state.error !== null) {
return (
<span className="mx_MAudioBody" ref="body">
<img src="img/warning.svg" width="16" height="16" />
<img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
{ _t("Error decrypting audio") }
</span>
);
@@ -94,7 +94,7 @@ export default class MAudioBody extends React.Component {
// Not sure how tall the audio player is so not sure how tall it should actually be.
return (
<span className="mx_MAudioBody">
<img src="img/spinner.gif" alt={content.body} width="16" height="16" />
<img src={require("../../../../res/img/spinner.gif")} alt={content.body} width="16" height="16" />
</span>
);
}

10
src/components/views/messages/MFileBody.js
View File

@@ -29,15 +29,15 @@ import request from 'browser-request';
import Modal from '../../../Modal';
// A cached tinted copy of "img/download.svg"
// A cached tinted copy of require("../../../../res/img/download.svg")
let tintedDownloadImageURL;
// Track a list of mounted MFileBody instances so that we can update
// the "img/download.svg" when the tint changes.
// the require("../../../../res/img/download.svg") when the tint changes.
let nextMountId = 0;
const mounts = {};
/**
* Updates the tinted copy of "img/download.svg" when the tint changes.
* Updates the tinted copy of require("../../../../res/img/download.svg") when the tint changes.
*/
function updateTintedDownloadImage() {
// Download the svg as an XML document.
@@ -46,7 +46,7 @@ function updateTintedDownloadImage() {
// Also note that we can't use fetch here because fetch doesn't support
// file URLs, which the download image will be if we're running from
// the filesystem (like in an Electron wrapper).
request({uri: "img/download.svg"}, (err, response, body) => {
request({uri: require("../../../../res/img/download.svg")}, (err, response, body) => {
if (err) return;
const svg = new DOMParser().parseFromString(body, "image/svg+xml");
@@ -254,7 +254,7 @@ module.exports = React.createClass({
},
tint: function() {
// Update our tinted copy of "img/download.svg"
// Update our tinted copy of require("../../../../res/img/download.svg")
if (this.refs.downloadImage) {
this.refs.downloadImage.src = tintedDownloadImageURL;
}

9
src/components/views/messages/MImageBody.js
View File

@@ -282,7 +282,12 @@ export default class MImageBody extends React.Component {
// e2e image hasn't been decrypted yet
if (content.file !== undefined && this.state.decryptedUrl === null) {
placeholder = <img src="img/spinner.gif" alt={content.body} width="32" height="32" />;
placeholder = <img
src={require("../../../../res/img/spinner.gif")}
alt={content.body}
width="32"
height="32"
/>;
} else if (!this.state.imgLoaded) {
// Deliberately, getSpinner is left unimplemented here, MStickerBody overides
placeholder = this.getPlaceholder();
@@ -363,7 +368,7 @@ export default class MImageBody extends React.Component {
if (this.state.error !== null) {
return (
<span className="mx_MImageBody" ref="body">
<img src="img/warning.svg" width="16" height="16" />
<img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
{ _t("Error decrypting image") }
</span>
);

2
src/components/views/messages/MStickerBody.js
View File

@@ -35,7 +35,7 @@ export default class MStickerBody extends MImageBody {
// img onLoad hasn't fired yet.
getPlaceholder() {
const TintableSVG = sdk.getComponent('elements.TintableSvg');
return <TintableSVG src="img/icons-show-stickers.svg" width="75" height="75" />;
return <TintableSVG src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
}
// Tooltip to show on mouse over

4
src/components/views/messages/MVideoBody.js
View File

@@ -135,7 +135,7 @@ module.exports = React.createClass({
if (this.state.error !== null) {
return (
<span className="mx_MVideoBody" ref="body">
<img src="img/warning.svg" width="16" height="16" />
<img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
{ _t("Error decrypting video") }
</span>
);
@@ -148,7 +148,7 @@ module.exports = React.createClass({
return (
<span className="mx_MVideoBody" ref="body">
<div className="mx_MImageBody_thumbnail mx_MImageBody_thumbnail_spinner" ref="image">
<img src="img/spinner.gif" alt={content.body} width="16" height="16" />
<img src={require("../../../../res/img/spinner.gif")} alt={content.body} width="16" height="16" />
</div>
</span>
);

2
src/components/views/messages/RoomCreate.js
View File

@@ -48,7 +48,7 @@ module.exports = React.createClass({
return <div />; // We should never have been instaniated in this case
}
return <div className="mx_CreateEvent">
<img className="mx_CreateEvent_image" src="img/room-continuation.svg" />
<img className="mx_CreateEvent_image" src={require("../../../../res/img/room-continuation.svg")} />
<div className="mx_CreateEvent_header">
{_t("This room is a continuation of another conversation.")}
</div>

4
src/components/views/right_panel/GroupHeaderButtons.js
View File

@@ -65,12 +65,12 @@ export default class GroupHeaderButtons extends HeaderButtons {
];
return [
<HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
<HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc={require("../../../../res/img/icons-people.svg")}
isHighlighted={this.isPhase(groupPhases)}
clickPhase={RightPanel.Phase.GroupMemberList}
analytics={['Right Panel', 'Group Member List Button', 'click']}
/>,
<HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc="img/icons-room-nobg.svg"
<HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc={require("../../../../res/img/icons-room-nobg.svg")}
isHighlighted={this.isPhase(roomPhases)}
clickPhase={RightPanel.Phase.GroupRoomList}
analytics={['Right Panel', 'Group Room List Button', 'click']}

6
src/components/views/right_panel/RoomHeaderButtons.js
View File

@@ -52,17 +52,17 @@ export default class RoomHeaderButtons extends HeaderButtons {
];
return [
<HeaderButton key="_membersButton" title={_t('Members')} iconSrc="img/feather-icons/user.svg"
<HeaderButton key="_membersButton" title={_t('Members')} iconSrc={require("../../../../res/img/feather-icons/user.svg")}
isHighlighted={this.isPhase(membersPhases)}
clickPhase={RightPanel.Phase.RoomMemberList}
analytics={['Right Panel', 'Member List Button', 'click']}
/>,
<HeaderButton key="_filesButton" title={_t('Files')} iconSrc="img/feather-icons/files.svg"
<HeaderButton key="_filesButton" title={_t('Files')} iconSrc={require("../../../../res/img/feather-icons/files.svg")}
isHighlighted={this.isPhase(RightPanel.Phase.FilePanel)}
clickPhase={RightPanel.Phase.FilePanel}
analytics={['Right Panel', 'File List Button', 'click']}
/>,
<HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc="img/feather-icons/notifications.svg"
<HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc={require("../../../../res/img/feather-icons/notifications.svg")}
isHighlighted={this.isPhase(RightPanel.Phase.NotificationPanel)}
clickPhase={RightPanel.Phase.NotificationPanel}
analytics={['Right Panel', 'Notification List Button', 'click']}

2
src/components/views/room_settings/ColorSettings.js
View File

@@ -131,7 +131,7 @@ module.exports = React.createClass({
if (i === this.state.index) {
selected = (
<div className="mx_RoomSettings_roomColor_selected">
<img src="img/tick.svg" width="17" height="14" alt="./" />
<img src={require("../../../../res/img/tick.svg")} width="17" height="14" alt="./" />
</div>
);
}

2
src/components/views/rooms/AuxPanel.js
View File

@@ -147,7 +147,7 @@ module.exports = React.createClass({
<div className="mx_RoomView_fileDropTarget">
<div className="mx_RoomView_fileDropTargetLabel"
title={_t("Drop File Here")}>
<TintableSvg src="img/upload-big.svg" width="45" height="59" />
<TintableSvg src={require("../../../../res/img/upload-big.svg")} width="45" height="59" />
<br />
{ _t("Drop file here to upload") }
</div>

6
src/components/views/rooms/EntityTile.js
View File

@@ -160,7 +160,7 @@ const EntityTile = React.createClass({
if (this.props.showInviteButton) {
inviteButton = (
<div className="mx_EntityTile_invite">
<img src="img/plus.svg" width="16" height="16" />
<img src={require("../../../../res/img/plus.svg")} width="16" height="16" />
</div>
);
}
@@ -169,8 +169,8 @@ const EntityTile = React.createClass({
const powerStatus = this.props.powerStatus;
if (powerStatus) {
const src = {
[EntityTile.POWER_STATUS_MODERATOR]: "img/mod.svg",
[EntityTile.POWER_STATUS_ADMIN]: "img/admin.svg",
[EntityTile.POWER_STATUS_MODERATOR]: require("../../../../res/img/mod.svg"),
[EntityTile.POWER_STATUS_ADMIN]: require("../../../../res/img/admin.svg"),
}[powerStatus];
const alt = {
[EntityTile.POWER_STATUS_MODERATOR]: _t("Moderator"),

20
src/components/views/rooms/EventTile.js
View File

@@ -768,23 +768,31 @@ module.exports.haveTileForEvent = function(e) {
function E2ePadlockUndecryptable(props) {
return (
<E2ePadlock alt={_t("Undecryptable")}
src="img/e2e-blocked.svg" width="12" height="12"
src={require("../../../../res/img/e2e-blocked.svg")} width="12" height="12"
style={{ marginLeft: "-1px" }} {...props} />
);
}
function E2ePadlockEncrypting(props) {
return <E2ePadlock alt={_t("Encrypting")} src="img/e2e-encrypting.svg" width="10" height="12" {...props} />;
return (
<E2ePadlock alt={_t("Encrypting")}
src={require("../../../../res/img/e2e-encrypting.svg")} width="10" height="12"
{...props} />
);
}
function E2ePadlockNotSent(props) {
return <E2ePadlock alt={_t("Encrypted, not sent")} src="img/e2e-not_sent.svg" width="10" height="12" {...props} />;
return (
<E2ePadlock alt={_t("Encrypted, not sent")}
src={require("../../../../res/img/e2e-not_sent.svg")} width="10" height="12"
{...props} />
);
}
function E2ePadlockVerified(props) {
return (
<E2ePadlock alt={_t("Encrypted by a verified device")}
src="img/e2e-verified.svg" width="10" height="12"
src={require("../../../../res/img/e2e-verified.svg")} width="10" height="12"
{...props} />
);
}
@@ -792,7 +800,7 @@ function E2ePadlockVerified(props) {
function E2ePadlockUnverified(props) {
return (
<E2ePadlock alt={_t("Encrypted by an unverified device")}
src="img/e2e-warning.svg" width="15" height="12"
src={require("../../../../res/img/e2e-warning.svg")} width="15" height="12"
style={{ marginLeft: "-2px" }} {...props} />
);
}
@@ -800,7 +808,7 @@ function E2ePadlockUnverified(props) {
function E2ePadlockUnencrypted(props) {
return (
<E2ePadlock alt={_t("Unencrypted message")}
src="img/e2e-unencrypted.svg" width="12" height="12"
src={require("../../../../res/img/e2e-unencrypted.svg")} width="12" height="12"
{...props} />
);
}

32
src/components/views/rooms/JumpToBottomButton.js Normal file
View File

@@ -0,0 +1,32 @@
/*
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 { _t } from '../../../languageHandler';
import AccessibleButton from '../elements/AccessibleButton';
export default (props) => {
let badge;
if (props.numUnreadMessages) {
badge = (<div className="mx_JumpToBottomButton_badge">{props.numUnreadMessages}</div>);
}
return (<div className="mx_JumpToBottomButton">
<AccessibleButton className="mx_JumpToBottomButton_scrollDown"
title={_t("Scroll to bottom of page")}
onClick={props.onScrollToBottomClick}>
</AccessibleButton>
{ badge }
</div>);
};

2
src/components/views/rooms/LinkPreviewWidget.js
View File

@@ -135,7 +135,7 @@ module.exports = React.createClass({
</div>
</div>
<img className="mx_LinkPreviewWidget_cancel mx_filterFlipColor"
src="img/cancel.svg" width="18" height="18"
src={require("../../../../res/img/cancel.svg")} width="18" height="18"
onClick={this.props.onCancelClick} />
</div>
);

6
src/components/views/rooms/MemberDeviceInfo.js
View File

@@ -27,19 +27,19 @@ export default class MemberDeviceInfo extends React.Component {
if (this.props.device.isBlocked()) {
indicator = (
<div className="mx_MemberDeviceInfo_blacklisted">
<img src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} alt={_t("Blacklisted")} />
<img src={require("../../../../res/img/e2e-blocked.svg")} width="12" height="12" style={{ marginLeft: "-1px" }} alt={_t("Blacklisted")} />
</div>
);
} else if (this.props.device.isVerified()) {
indicator = (
<div className="mx_MemberDeviceInfo_verified">
<img src="img/e2e-verified.svg" width="10" height="12" alt={_t("Verified")} />
<img src={require("../../../../res/img/e2e-verified.svg")} width="10" height="12" alt={_t("Verified")} />
</div>
);
} else {
indicator = (
<div className="mx_MemberDeviceInfo_unverified">
<img src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }} alt={_t("Unverified")} />
<img src={require("../../../../res/img/e2e-warning.svg")} width="15" height="12" style={{ marginLeft: "-2px" }} alt={_t("Unverified")} />
</div>
);
}

4
src/components/views/rooms/MemberInfo.js
View File

@@ -815,7 +815,7 @@ module.exports = withMatrixClient(React.createClass({
onClick={this.onNewDMClick}
>
<div className="mx_RoomTile_avatar">
<img src="img/create-big.svg" width="26" height="26" />
<img src={require("../../../../res/img/create-big.svg")} width="26" height="26" />
</div>
<div className={labelClasses}><i>{ _t("Start a chat") }</i></div>
</AccessibleButton>;
@@ -963,7 +963,7 @@ module.exports = withMatrixClient(React.createClass({
<div className="mx_MemberInfo">
<div className="mx_MemberInfo_name">
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
<img src="img/minimise.svg" width="10" height="16" className="mx_filterFlipColor" alt={_t('Close')} />
<img src={require("../../../../res/img/minimise.svg")} width="10" height="16" className="mx_filterFlipColor" alt={_t('Close')} />
</AccessibleButton>
<EmojiText element="h2">{ memberName }</EmojiText>
</div>

2
src/components/views/rooms/MemberList.js
View File

@@ -253,7 +253,7 @@ module.exports = React.createClass({
const text = _t("and %(count)s others...", { count: overflowCount });
return (
<EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
<BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
<BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
} name={text} presenceState="online" suppressOnHover={true}
onClick={onClick} />
);

26
src/components/views/rooms/MessageComposer.js
View File

@@ -155,12 +155,12 @@ export default class MessageComposer extends React.Component {
const fileAcceptedOrError = this.props.uploadAllowed(files[i]);
if (fileAcceptedOrError === true) {
acceptedFiles.push(<li key={i}>
<TintableSvg key={i} src="img/files.svg" width="16" height="16" /> { files[i].name || _t('Attachment') }
<TintableSvg key={i} src={require("../../../../res/img/files.svg")} width="16" height="16" /> { files[i].name || _t('Attachment') }
</li>);
fileList.push(files[i]);
} else {
failedFiles.push(<li key={i}>
<TintableSvg key={i} src="img/files.svg" width="16" height="16" /> { files[i].name || _t('Attachment') } <p>{ _t('Reason') + ": " + fileAcceptedOrError}</p>
<TintableSvg key={i} src={require("../../../../res/img/files.svg")} width="16" height="16" /> { files[i].name || _t('Attachment') } <p>{ _t('Reason') + ": " + fileAcceptedOrError}</p>
</li>);
}
}
@@ -320,11 +320,11 @@ export default class MessageComposer extends React.Component {
const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
if (roomIsEncrypted) {
// FIXME: show a /!\ if there are untrusted devices in the room...
e2eImg = 'img/e2e-verified.svg';
e2eImg = require("../../../../res/img/e2e-verified.svg");
e2eTitle = _t('Encrypted room');
e2eClass = 'mx_MessageComposer_e2eIcon';
} else {
e2eImg = 'img/e2e-unencrypted.svg';
e2eImg = require("../../../../res/img/e2e-unencrypted.svg");
e2eTitle = _t('Unencrypted room');
e2eClass = 'mx_MessageComposer_e2eIcon mx_filterFlipColor';
}
@@ -344,16 +344,16 @@ export default class MessageComposer extends React.Component {
if (this.props.callState && this.props.callState !== 'ended') {
hangupButton =
<AccessibleButton key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
<img src="img/hangup.svg" alt={_t('Hangup')} title={_t('Hangup')} width="25" height="25" />
<img src={require("../../../../res/img/hangup.svg")} alt={_t('Hangup')} title={_t('Hangup')} width="25" height="25" />
</AccessibleButton>;
} else {
callButton =
<AccessibleButton key="controls_call" className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title={_t('Voice call')}>
<TintableSvg src="img/feather-icons/phone.svg" width="20" height="20" />
<TintableSvg src={require("../../../../res/img/feather-icons/phone.svg")} width="20" height="20" />
</AccessibleButton>;
videoCallButton =
<AccessibleButton key="controls_videocall" className="mx_MessageComposer_videocall" onClick={this.onCallClick} title={_t('Video call')}>
<TintableSvg src="img/feather-icons/video.svg" width="20" height="20" />
<TintableSvg src={require("../../../../res/img/feather-icons/video.svg")} width="20" height="20" />
</AccessibleButton>;
}
@@ -395,7 +395,7 @@ export default class MessageComposer extends React.Component {
const uploadButton = (
<AccessibleButton key="controls_upload" className="mx_MessageComposer_upload"
onClick={this.onUploadClick} title={_t('Upload file')}>
<TintableSvg src="img/feather-icons/paperclip.svg" width="20" height="20" />
<TintableSvg src={require("../../../../res/img/feather-icons/paperclip.svg")} width="20" height="20" />
<input ref="uploadInput" type="file"
style={uploadInputStyle}
multiple
@@ -407,7 +407,7 @@ export default class MessageComposer extends React.Component {
<AccessibleButton element="img" className="mx_MessageComposer_formatting"
alt={_t("Show Text Formatting Toolbar")}
title={_t("Show Text Formatting Toolbar")}
src="img/button-text-formatting.svg"
src={require("../../../../res/img/button-text-formatting.svg")}
onClick={this.onToggleFormattingClicked}
style={{visibility: this.state.showFormatting ? 'hidden' : 'visible'}}
key="controls_formatting" />
@@ -451,7 +451,7 @@ export default class MessageComposer extends React.Component {
controls.push(<div className="mx_MessageComposer_replaced_wrapper">
<div className="mx_MessageComposer_replaced_valign">
<img className="mx_MessageComposer_roomReplaced_icon" src="img/room_replaced.svg" />
<img className="mx_MessageComposer_roomReplaced_icon" src={require("../../../../res/img/room_replaced.svg")} />
<span className="mx_MessageComposer_roomReplaced_header">
{_t("This room has been replaced and is no longer active.")}
</span><br />
@@ -487,7 +487,7 @@ export default class MessageComposer extends React.Component {
title={_t(name)}
onMouseDown={onFormatButtonClicked}
key={name}
src={`img/button-text-${name}${suffix}.svg`}
src={require(`../../../../res/img/button-text-${name}${suffix}.svg`)}
height="17" />;
},
);
@@ -500,11 +500,11 @@ export default class MessageComposer extends React.Component {
<img title={this.state.inputState.isRichTextEnabled ? _t("Turn Markdown on") : _t("Turn Markdown off")}
onMouseDown={this.onToggleMarkdownClicked}
className="mx_MessageComposer_formatbar_markdown mx_filterFlipColor"
src={`img/button-md-${!this.state.inputState.isRichTextEnabled}.png`} />
src={require(`../../../../res/img/button-md-${!this.state.inputState.isRichTextEnabled}.png`)} />
<AccessibleButton element="img" title={_t("Hide Text Formatting Toolbar")}
onClick={this.onToggleFormattingClicked}
className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
src="img/icon-text-cancel.svg" />
src={require("../../../../res/img/icon-text-cancel.svg")} />
</div>
</div>;
}

2
src/components/views/rooms/MessageComposerInput.js
View File

@@ -1599,7 +1599,7 @@ export default class MessageComposerInput extends React.Component {
<img className="mx_MessageComposer_input_markdownIndicator mx_filterFlipColor"
onMouseDown={this.onMarkdownToggleClicked}
title={this.state.isRichTextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
src={`img/button-md-${!this.state.isRichTextEnabled}.png`} />
src={require(`../../../../res/img/button-md-${!this.state.isRichTextEnabled}.png`)} />
<Editor ref={this._collectEditor}
dir="auto"
className="mx_MessageComposer_editor"

2
src/components/views/rooms/PinnedEventTile.js
View File

@@ -67,7 +67,7 @@ module.exports = React.createClass({
if (this._canUnpin()) {
unpinButton = (
<AccessibleButton onClick={this.onUnpinClicked} className="mx_PinnedEventTile_unpinButton">
<img src="img/cancel-red.svg" width="8" height="8" alt={_t('Unpin Message')} title={_t('Unpin Message')} />
<img src={require("../../../../res/img/cancel-red.svg")} width="8" height="8" alt={_t('Unpin Message')} title={_t('Unpin Message')} />
</AccessibleButton>
);
}

2
src/components/views/rooms/PinnedEventsPanel.js
View File

@@ -130,7 +130,7 @@ module.exports = React.createClass({
<div className="mx_PinnedEventsPanel">
<div className="mx_PinnedEventsPanel_body">
<AccessibleButton className="mx_PinnedEventsPanel_cancel" onClick={this.props.onCancelClick}>
<img className="mx_filterFlipColor" src="img/cancel.svg" width="18" height="18" />
<img className="mx_filterFlipColor" src={require("../../../../res/img/cancel.svg")} width="18" height="18" />
</AccessibleButton>
<h3 className="mx_PinnedEventsPanel_header">{ _t("Pinned Messages") }</h3>
{ tiles }

2
src/components/views/rooms/ReplyPreview.js
View File

@@ -68,7 +68,7 @@ export default class ReplyPreview extends React.Component {
{ '💬 ' + _t('Replying') }
</EmojiText>
<div className="mx_ReplyPreview_header mx_ReplyPreview_cancel">
<img className="mx_filterFlipColor" src="img/cancel.svg" width="18" height="18"
<img className="mx_filterFlipColor" src={require("../../../../res/img/cancel.svg")} width="18" height="18"
onClick={cancelQuoting} />
</div>
<div className="mx_ReplyPreview_clear" />

16
src/components/views/rooms/RoomHeader.js
View File

@@ -312,14 +312,14 @@ module.exports = React.createClass({
</div>
<div className="mx_RoomHeader_avatarPicker_edit">
<label htmlFor="avatarInput" ref="file_label">
<img src="img/camera.svg"
<img src={require("../../../../res/img/camera.svg")}
alt={_t("Upload avatar")} title={_t("Upload avatar")}
width="17" height="15" />
</label>
<input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
</div>
<div className="mx_RoomHeader_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
<img src="img/cancel.svg"
<img src={require("../../../../res/img/cancel.svg")}
className="mx_filterFlipColor"
width="10"
alt={_t("Remove avatar")}
@@ -337,7 +337,7 @@ module.exports = React.createClass({
if (this.props.onSettingsClick) {
settingsButton =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title={_t("Settings")}>
<TintableSvg src="img/feather-icons/settings.svg" width="20" height="20" />
<TintableSvg src={require("../../../../res/img/feather-icons/settings.svg")} width="20" height="20" />
</AccessibleButton>;
}
@@ -353,7 +353,7 @@ module.exports = React.createClass({
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_pinnedButton"
onClick={this.props.onPinnedClick} title={_t("Pinned Messages")}>
{ pinsIndicator }
<TintableSvg src="img/icons-pin.svg" width="16" height="16" />
<TintableSvg src={require("../../../../res/img/icons-pin.svg")} width="16" height="16" />
</AccessibleButton>;
}
@@ -361,7 +361,7 @@ module.exports = React.createClass({
// if (this.props.onLeaveClick) {
// leave_button =
// <div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
// <TintableSvg src="img/leave.svg" width="26" height="20"/>
// <TintableSvg src={require("../../../../res/img/leave.svg")} width="26" height="20"/>
// </div>;
// }
@@ -369,7 +369,7 @@ module.exports = React.createClass({
if (this.props.onForgetClick) {
forgetButton =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title={_t("Forget room")}>
<TintableSvg src="img/leave.svg" width="26" height="20" />
<TintableSvg src={require("../../../../res/img/leave.svg")} width="26" height="20" />
</AccessibleButton>;
}
@@ -377,7 +377,7 @@ module.exports = React.createClass({
if (this.props.onSearchClick && this.props.inRoom) {
searchButton =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title={_t("Search")}>
<TintableSvg src="img/feather-icons/search.svg" width="20" height="20" />
<TintableSvg src={require("../../../../res/img/feather-icons/search.svg")} width="20" height="20" />
</AccessibleButton>;
}
@@ -385,7 +385,7 @@ module.exports = React.createClass({
if (this.props.inRoom) {
shareRoomButton =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.onShareRoomClick} title={_t('Share room')}>
<TintableSvg src="img/feather-icons/share.svg" width="20" height="20" />
<TintableSvg src={require("../../../../res/img/feather-icons/share.svg")} width="20" height="20" />
</AccessibleButton>;
}

2
src/components/views/rooms/RoomList.js
View File

@@ -593,7 +593,7 @@ module.exports = React.createClass({
subListsProps = subListsProps.filter((props => {
const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
return len !== 0 || (props.onAddRoom && !this.props.searchFilter);
return len !== 0 || props.onAddRoom;
}));
return subListsProps.reduce((components, props, i) => {

2
src/components/views/rooms/RoomPreviewBar.js
View File

@@ -124,7 +124,7 @@ module.exports = React.createClass({
emailMatchBlock =
<div className="mx_RoomPreviewBar_warning">
<div className="mx_RoomPreviewBar_warningIcon">
<img src="img/warning.svg" width="24" height="23" title= "/!\\" alt="/!\\" />
<img src={require("../../../../res/img/warning.svg")} width="24" height="23" title= "/!\\" alt="/!\\" />
</div>
<div className="mx_RoomPreviewBar_warningText">
{ _t("This invitation was sent to an email address which is not associated with this account:") }

6
src/components/views/rooms/RoomSettings.js
View File

@@ -616,7 +616,7 @@ module.exports = React.createClass({
<div>
<label>
<input type="checkbox" ref="encrypt" onClick={this.onEnableEncryptionClick} />
<img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src="img/e2e-unencrypted.svg" width="12" height="12" />
<img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src={require("../../../../res/img/e2e-unencrypted.svg")} width="12" height="12" />
{ _t('Enable encryption') } { _t('(warning: cannot be disabled again!)') }
</label>
{ settings }
@@ -627,8 +627,8 @@ module.exports = React.createClass({
<div>
<label>
{ isEncrypted
? <img className="mx_RoomSettings_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" />
: <img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src="img/e2e-unencrypted.svg" width="12" height="12" />
? <img className="mx_RoomSettings_e2eIcon" src={require("../../../../res/img/e2e-verified.svg")} width="10" height="12" />
: <img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src={require("../../../../res/img/e2e-unencrypted.svg")} width="12" height="12" />
}
{ isEncrypted ? _t("Encryption is enabled in this room") : _t("Encryption is not enabled in this room") }.
</label>

8
src/components/views/rooms/RoomTile.js
View File

@@ -392,7 +392,13 @@ module.exports = React.createClass({
let dmIndicator;
if (this._isDirectMessageRoom(this.props.room.roomId)) {
dmIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />;
dmIndicator = <img
src={require("../../../../res/img/icon_person.svg")}
className="mx_RoomTile_dm"
width="11"
height="13"
alt="dm"
/>;
}
return <AccessibleButton tabIndex="0"

2
src/components/views/rooms/SearchableEntityList.js
View File

@@ -120,7 +120,7 @@ const SearchableEntityList = React.createClass({
const text = _t("and %(count)s others...", { count: overflowCount });
return (
<EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
<BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
<BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
} name={text} presenceState="online" suppressOnHover={true}
onClick={this._showAll} />
);

2
src/components/views/rooms/SimpleRoomHeader.js
View File

@@ -26,7 +26,7 @@ export function CancelButton(props) {
return (
<AccessibleButton className='mx_RoomHeader_cancelButton' onClick={onClick}>
<img src="img/cancel.svg" className='mx_filterFlipColor'
<img src={require("../../../../res/img/cancel.svg")} className='mx_filterFlipColor'
width="18" height="18" alt={_t("Cancel")} />
</AccessibleButton>
);

6
src/components/views/rooms/Stickerpicker.js
View File

@@ -152,7 +152,7 @@ export default class Stickerpicker extends React.Component {
className='mx_Stickers_contentPlaceholder'>
<p>{ _t("You don't currently have any stickerpacks enabled") }</p>
<p className='mx_Stickers_addLink'>{ _t("Add some now") }</p>
<img src='img/stickerpack-placeholder.png' alt="" />
<img src={require("../../../../res/img/stickerpack-placeholder.png")} alt="" />
</AccessibleButton>
);
}
@@ -351,7 +351,7 @@ export default class Stickerpicker extends React.Component {
onClick={this._onHideStickersClick}
ref='target'
title={_t("Hide Stickers")}>
<TintableSvg src="img/feather-icons/face.svg" width="20" height="20" />
<TintableSvg src={require("../../../../res/img/feather-icons/face.svg")} width="20" height="20" />
</AccessibleButton>;
} else {
// Show show-stickers button
@@ -362,7 +362,7 @@ export default class Stickerpicker extends React.Component {
className="mx_MessageComposer_stickers"
onClick={this._onShowStickersClick}
title={_t("Show Stickers")}>
<TintableSvg src="img/feather-icons/face.svg" width="20" height="20" />
<TintableSvg src={require("../../../../res/img/feather-icons/face.svg")} width="20" height="20" />
</AccessibleButton>;
}
return <div>

1
src/components/views/rooms/TopUnreadMessagesBar.js
View File

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

101
src/components/views/rooms/WhoIsTypingTile.js
View File

@@ -19,6 +19,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import sdk from '../../../index';
import WhoIsTyping from '../../../WhoIsTyping';
import Timer from '../../../utils/Timer';
import MatrixClientPeg from '../../../MatrixClientPeg';
import MemberAvatar from '../avatars/MemberAvatar';
@@ -43,11 +44,18 @@ module.exports = React.createClass({
getInitialState: function() {
return {
usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
// a map with userid => Timer to delay
// hiding the "x is typing" message for a
// user so hiding it can coincide
// with the sent message by the other side
// resulting in less timeline jumpiness
delayedStopTypingTimers: {},
};
},
componentWillMount: function() {
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
},
componentDidUpdate: function(_, prevState) {
@@ -64,18 +72,90 @@ module.exports = React.createClass({
const client = MatrixClientPeg.get();
if (client) {
client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
client.removeListener("Room.timeline", this.onRoomTimeline);
}
Object.values(this.state.delayedStopTypingTimers).forEach((t) => t.abort());
},
isVisible: function() {
return this.state.usersTyping.length !== 0 || Object.keys(this.state.delayedStopTypingTimers).length !== 0;
},
onRoomTimeline: function(event, room) {
if (room && room.roomId === this.props.room.roomId) {
const userId = event.getSender();
// remove user from usersTyping
const usersTyping = this.state.usersTyping.filter((m) => m.userId !== userId);
this.setState({usersTyping});
// abort timer if any
this._abortUserTimer(userId);
}
},
onRoomMemberTyping: function(ev, member) {
const usersTyping = WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room);
this.setState({
usersTyping: WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room),
delayedStopTypingTimers: this._updateDelayedStopTypingTimers(usersTyping),
usersTyping,
});
},
_renderTypingIndicatorAvatars: function(limit) {
let users = this.state.usersTyping;
_updateDelayedStopTypingTimers(usersTyping) {
const usersThatStoppedTyping = this.state.usersTyping.filter((a) => {
return !usersTyping.some((b) => a.userId === b.userId);
});
const usersThatStartedTyping = usersTyping.filter((a) => {
return !this.state.usersTyping.some((b) => a.userId === b.userId);
});
// abort all the timers for the users that started typing again
usersThatStartedTyping.forEach((m) => {
const timer = this.state.delayedStopTypingTimers[m.userId];
if (timer) {
timer.abort();
}
});
// prepare new delayedStopTypingTimers object to update state with
let delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
// remove members that started typing again
delayedStopTypingTimers = usersThatStartedTyping.reduce((delayedStopTypingTimers, m) => {
delete delayedStopTypingTimers[m.userId];
return delayedStopTypingTimers;
}, delayedStopTypingTimers);
// start timer for members that stopped typing
delayedStopTypingTimers = usersThatStoppedTyping.reduce((delayedStopTypingTimers, m) => {
if (!delayedStopTypingTimers[m.userId]) {
const timer = new Timer(5000);
delayedStopTypingTimers[m.userId] = timer;
timer.start();
timer.finished().then(
() => this._removeUserTimer(m.userId), // on elapsed
() => {/* aborted */},
);
}
return delayedStopTypingTimers;
}, delayedStopTypingTimers);
return delayedStopTypingTimers;
},
_abortUserTimer: function(userId) {
const timer = this.state.delayedStopTypingTimers[userId];
if (timer) {
timer.abort();
this._removeUserTimer(userId);
}
},
_removeUserTimer: function(userId) {
const timer = this.state.delayedStopTypingTimers[userId];
if (timer) {
const delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
delete delayedStopTypingTimers[userId];
this.setState({delayedStopTypingTimers});
}
},
_renderTypingIndicatorAvatars: function(users, limit) {
let othersCount = 0;
if (users.length > limit) {
othersCount = users.length - limit + 1;
@@ -106,8 +186,19 @@ module.exports = React.createClass({
},
render: function() {
let usersTyping = this.state.usersTyping;
const stoppedUsersOnTimer = Object.keys(this.state.delayedStopTypingTimers)
.map((userId) => this.props.room.getMember(userId));
// append the users that have been reported not typing anymore
// but have a timeout timer running so they can disappear
// when a message comes in
usersTyping = usersTyping.concat(stoppedUsersOnTimer);
// sort them so the typing members don't change order when
// moved to delayedStopTypingTimers
usersTyping.sort((a, b) => a.name.localeCompare(b.name));
const typingString = WhoIsTyping.whoIsTypingString(
this.state.usersTyping,
usersTyping,
this.props.whoIsTypingLimit,
);
if (!typingString) {
@@ -119,7 +210,7 @@ module.exports = React.createClass({
return (
<li className="mx_WhoIsTypingTile">
<div className="mx_WhoIsTypingTile_avatars">
{ this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
{ this._renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
</div>
<div className="mx_WhoIsTypingTile_label">
<EmojiText>{ typingString }</EmojiText>

4
src/components/views/settings/AddPhoneNumber.js
View File

@@ -141,7 +141,7 @@ export default withMatrixClient(React.createClass({
return <div />;
}
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
// XXX: This CSS relies on the CSS surrounding it in UserSettings as its in
// a tabular format to align the submit buttons
return (
@@ -166,7 +166,7 @@ export default withMatrixClient(React.createClass({
</div>
</div>
<div className="mx_UserSettings_threepidButton mx_filterFlipColor">
<input type="image" value={_t("Add")} src="img/plus.svg" width="14" height="14" />
<input type="image" value={_t("Add")} src={require("../../../../res/img/plus.svg")} width="14" height="14" />
</div>
</form>
);

2
src/components/views/settings/KeyBackupPanel.js
View File

@@ -234,7 +234,7 @@ export default class KeyBackupPanel extends React.PureComponent {
}
let verifyButton;
if (!sig.device || !sig.device.isVerified()) {
if (sig.device && !sig.device.isVerified()) {
verifyButton = <div><br /><AccessibleButton className="mx_UserSettings_button"
onClick={this._verifyDevice} data-sigindex={i}>
{ _t("Verify...") }

95
src/components/views/settings/tabs/GeneralSettingsTab.js Normal file
View File

@@ -0,0 +1,95 @@
/*
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 React from 'react';
import {_t} from "../../../../languageHandler";
import MatrixClientPeg from "../../../../MatrixClientPeg";
import Field from "../../elements/Field";
import AccessibleButton from "../../elements/AccessibleButton";
export default class GeneralSettingsTab extends React.Component {
constructor() {
super();
const client = MatrixClientPeg.get();
this.state = {
userId: client.getUserId(),
displayName: client.getUser(client.getUserId()).displayName,
enableProfileSave: false,
};
}
_saveProfile = async (e) => {
e.stopPropagation();
e.preventDefault();
if (!this.state.enableProfileSave) return;
this.setState({enableProfileSave: false});
// TODO: What do we do about errors?
await MatrixClientPeg.get().setDisplayName(this.state.displayName);
// TODO: Support avatars
this.setState({enableProfileSave: true});
};
_onDisplayNameChanged = (e) => {
this.setState({
displayName: e.target.value,
enableProfileSave: true,
});
};
_renderProfileSection() {
// TODO: Ditch avatar placeholder and use the real thing
const form = (
<form onSubmit={this._saveProfile} autoComplete={false} noValidate={true}>
<div className="mx_GeneralSettingsTab_profile">
<div className="mx_GeneralSettingsTab_profileControls">
<p className="mx_GeneralSettingsTab_profileUsername">{this.state.userId}</p>
<Field id="profileDisplayName" label={_t("Display Name")}
type="text" value={this.state.displayName} autocomplete="off"
onChange={this._onDisplayNameChanged} />
</div>
<div className="mx_GeneralSettingsTab_profileAvatar">
<div />
</div>
</div>
<AccessibleButton onClick={this._saveProfile} kind="primary"
disabled={!this.state.enableProfileSave}>
{_t("Save")}
</AccessibleButton>
</form>
);
return (
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
{form}
</div>
);
}
render() {
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("General")}</div>
{this._renderProfileSection()}
</div>
);
}
}

2
src/components/views/voip/IncomingCallBox.js
View File

@@ -66,7 +66,7 @@ module.exports = React.createClass({
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return (
<div className="mx_IncomingCallBox" id="incomingCallBox">
<img className="mx_IncomingCallBox_chevron" src="img/chevron-left.png" width="9" height="16" />
<img className="mx_IncomingCallBox_chevron" src={require("../../../../res/img/chevron-left.png")} width="9" height="16" />
<div className="mx_IncomingCallBox_title">
{ incomingCallText }
</div>

98
src/i18n/strings/en_EN.json
View File

@@ -114,8 +114,6 @@
"Failed to invite": "Failed to invite",
"Failed to invite users to the room:": "Failed to invite users to the room:",
"Failed to invite the following users to the %(roomName)s room:": "Failed to invite the following users to the %(roomName)s room:",
"Waiting for %(userId)s to accept...": "Waiting for %(userId)s to accept...",
"Waiting for %(userId)s to confirm...": "Waiting for %(userId)s to confirm...",
"You need to be logged in.": "You need to be logged in.",
"You need to be able to invite users to do that.": "You need to be able to invite users to do that.",
"Unable to create widget.": "Unable to create widget.",
@@ -264,6 +262,7 @@
"Please contact your homeserver administrator.": "Please contact your homeserver administrator.",
"Failed to join room": "Failed to join room",
"Message Pinning": "Message Pinning",
"Tabbed settings": "Tabbed settings",
"Custom user status messages": "Custom user status messages",
"Increase performance by only loading room members on first view": "Increase performance by only loading room members on first view",
"Backup of encryption keys to server": "Backup of encryption keys to server",
@@ -413,6 +412,10 @@
"Off": "Off",
"On": "On",
"Noisy": "Noisy",
"Display Name": "Display Name",
"Save": "Save",
"Profile": "Profile",
"General": "General",
"Cannot add any more widgets": "Cannot add any more widgets",
"The maximum permitted number of widgets have already been added to this room.": "The maximum permitted number of widgets have already been added to this room.",
"Add a widget": "Add a widget",
@@ -545,7 +548,6 @@
"World readable": "World readable",
"Guests can join": "Guests can join",
"Failed to set avatar.": "Failed to set avatar.",
"Save": "Save",
"(~%(count)s results)|other": "(~%(count)s results)",
"(~%(count)s results)|one": "(~%(count)s result)",
"Join Room": "Join Room",
@@ -721,46 +723,6 @@
"Removed or unknown message type": "Removed or unknown message type",
"Message removed by %(userId)s": "Message removed by %(userId)s",
"Message removed": "Message removed",
"Robot check is currently unavailable on desktop - please use a <a>web browser</a>": "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
"This Home Server would like to make sure you are not a robot": "This Home Server would like to make sure you are not a robot",
"Custom Server Options": "Custom Server Options",
"You can use the custom server options to sign into other Matrix servers by specifying a different Home server URL.": "You can use the custom server options to sign into other Matrix servers by specifying a different Home server URL.",
"This allows you to use this app with an existing Matrix account on a different home server.": "This allows you to use this app with an existing Matrix account on a different home server.",
"You can also set a custom identity server but this will typically prevent interaction with users based on email address.": "You can also set a custom identity server but this will typically prevent interaction with users based on email address.",
"To continue, please enter your password.": "To continue, please enter your password.",
"Password:": "Password:",
"Please review and accept all of the homeserver's policies": "Please review and accept all of the homeserver's policies",
"Please review and accept the policies of this homeserver:": "Please review and accept the policies of this homeserver:",
"An email has been sent to %(emailAddress)s": "An email has been sent to %(emailAddress)s",
"Please check your email to continue registration.": "Please check your email to continue registration.",
"Token incorrect": "Token incorrect",
"A text message has been sent to %(msisdn)s": "A text message has been sent to %(msisdn)s",
"Please enter the code it contains:": "Please enter the code it contains:",
"Code": "Code",
"Start authentication": "Start authentication",
"powered by Matrix": "powered by Matrix",
"The email field must not be blank.": "The email field must not be blank.",
"The user name field must not be blank.": "The user name field must not be blank.",
"The phone number field must not be blank.": "The phone number field must not be blank.",
"The password field must not be blank.": "The password field must not be blank.",
"Username on %(hs)s": "Username on %(hs)s",
"User name": "User name",
"Mobile phone number": "Mobile phone number",
"Forgot your password?": "Forgot your password?",
"Matrix ID": "Matrix ID",
"%(serverName)s Matrix ID": "%(serverName)s Matrix ID",
"Sign in with": "Sign in with",
"Email address": "Email address",
"Sign in": "Sign in",
"If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?",
"Email address (optional)": "Email address (optional)",
"You are registering with %(SelectedTeamName)s": "You are registering with %(SelectedTeamName)s",
"Mobile phone number (optional)": "Mobile phone number (optional)",
"Default server": "Default server",
"Custom server": "Custom server",
"Home server URL": "Home server URL",
"Identity server URL": "Identity server URL",
"What does this mean?": "What does this mean?",
"Remove from community": "Remove from community",
"Disinvite this user from community?": "Disinvite this user from community?",
"Remove this user from community?": "Remove this user from community?",
@@ -897,6 +859,7 @@
"And %(count)s more...|other": "And %(count)s more...",
"ex. @bob:example.com": "ex. @bob:example.com",
"Add User": "Add User",
"Matrix ID": "Matrix ID",
"Matrix Room ID": "Matrix Room ID",
"email address": "email address",
"That doesn't look like a valid email address": "That doesn't look like a valid email address",
@@ -1032,6 +995,7 @@
"Please check your email and click on the link it contains. Once this is done, click continue.": "Please check your email and click on the link it contains. Once this is done, click continue.",
"Unable to add email address": "Unable to add email address",
"Unable to verify email address.": "Unable to verify email address.",
"Email address": "Email address",
"This will allow you to reset your password and receive notifications.": "This will allow you to reset your password and receive notifications.",
"Skip": "Skip",
"Only use lower case letters, numbers and '=_-./'": "Only use lower case letters, numbers and '=_-./'",
@@ -1063,9 +1027,16 @@
"Room contains unknown devices": "Room contains unknown devices",
"\"%(RoomName)s\" contains devices that you haven't seen before.": "\"%(RoomName)s\" contains devices that you haven't seen before.",
"Unknown devices": "Unknown devices",
"Preferences": "Preferences",
"Voice & Video": "Voice & Video",
"Security & Privacy": "Security & Privacy",
"Help & About": "Help & About",
"Visit old settings": "Visit old settings",
"Unable to load backup status": "Unable to load backup status",
"Unable to restore backup": "Unable to restore backup",
"No backup found!": "No backup found!",
"Error Restoring Backup": "Error Restoring Backup",
"Backup could not be decrypted with this key: please verify that you entered the correct recovery key.": "Backup could not be decrypted with this key: please verify that you entered the correct recovery key.",
"Backup Restored": "Backup Restored",
"Failed to decrypt %(failedCount)s sessions!": "Failed to decrypt %(failedCount)s sessions!",
"Restored %(sessionCount)s session keys": "Restored %(sessionCount)s session keys",
@@ -1112,6 +1083,44 @@
"Set status": "Set status",
"Set a new status...": "Set a new status...",
"View Community": "View Community",
"Robot check is currently unavailable on desktop - please use a <a>web browser</a>": "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
"This Home Server would like to make sure you are not a robot": "This Home Server would like to make sure you are not a robot",
"Custom Server Options": "Custom Server Options",
"You can use the custom server options to sign into other Matrix servers by specifying a different Home server URL.": "You can use the custom server options to sign into other Matrix servers by specifying a different Home server URL.",
"This allows you to use this app with an existing Matrix account on a different home server.": "This allows you to use this app with an existing Matrix account on a different home server.",
"You can also set a custom identity server but this will typically prevent interaction with users based on email address.": "You can also set a custom identity server but this will typically prevent interaction with users based on email address.",
"To continue, please enter your password.": "To continue, please enter your password.",
"Password:": "Password:",
"Please review and accept all of the homeserver's policies": "Please review and accept all of the homeserver's policies",
"Please review and accept the policies of this homeserver:": "Please review and accept the policies of this homeserver:",
"An email has been sent to %(emailAddress)s": "An email has been sent to %(emailAddress)s",
"Please check your email to continue registration.": "Please check your email to continue registration.",
"Token incorrect": "Token incorrect",
"A text message has been sent to %(msisdn)s": "A text message has been sent to %(msisdn)s",
"Please enter the code it contains:": "Please enter the code it contains:",
"Code": "Code",
"Start authentication": "Start authentication",
"powered by Matrix": "powered by Matrix",
"The email field must not be blank.": "The email field must not be blank.",
"The user name field must not be blank.": "The user name field must not be blank.",
"The phone number field must not be blank.": "The phone number field must not be blank.",
"The password field must not be blank.": "The password field must not be blank.",
"Username on %(hs)s": "Username on %(hs)s",
"User name": "User name",
"Mobile phone number": "Mobile phone number",
"Forgot your password?": "Forgot your password?",
"%(serverName)s Matrix ID": "%(serverName)s Matrix ID",
"Sign in with": "Sign in with",
"Sign in": "Sign in",
"If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?",
"Email address (optional)": "Email address (optional)",
"You are registering with %(SelectedTeamName)s": "You are registering with %(SelectedTeamName)s",
"Mobile phone number (optional)": "Mobile phone number (optional)",
"Default server": "Default server",
"Custom server": "Custom server",
"Home server URL": "Home server URL",
"Identity server URL": "Identity server URL",
"What does this mean?": "What does this mean?",
"Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
"Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",
"Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.": "Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.",
@@ -1302,7 +1311,6 @@
"VoIP": "VoIP",
"Email": "Email",
"Add email address": "Add email address",
"Profile": "Profile",
"Display name": "Display name",
"Account": "Account",
"To return to your account in future you need to set a password": "To return to your account in future you need to set a password",
@@ -1346,7 +1354,6 @@
"Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.": "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
"Sign in with single sign-on": "Sign in with single sign-on",
"Try the app first": "Try the app first",
"Sign in to get started": "Sign in to get started",
"Failed to fetch avatar URL": "Failed to fetch avatar URL",
"Set a display name:": "Set a display name:",
"Upload an avatar:": "Upload an avatar:",
@@ -1399,6 +1406,7 @@
"File to import": "File to import",
"Import": "Import",
"Great! This passphrase looks strong enough.": "Great! This passphrase looks strong enough.",
"Keep going...": "Keep going...",
"Secure your encrypted message history with a Recovery Passphrase.": "Secure your encrypted message history with a Recovery Passphrase.",
"You'll need it if you log out or lose access to this device.": "You'll need it if you log out or lose access to this device.",
"Enter a passphrase...": "Enter a passphrase...",

6
src/settings/Settings.js
View File

@@ -84,6 +84,12 @@ export const SETTINGS = {
supportedLevels: LEVELS_FEATURE,
default: false,
},
"feature_tabbed_settings": {
isFeature: true,
displayName: _td("Tabbed settings"),
supportedLevels: LEVELS_FEATURE,
default: false,
},
"feature_custom_status": {
isFeature: true,
displayName: _td("Custom user status messages"),

4
src/stores/LifecycleStore.js
View File

@@ -22,8 +22,8 @@ const INITIAL_STATE = {
};
/**
* A class for storing application state to do with login/registration. This is a simple
* flux store that listens for actions and updates its state accordingly, informing any
* A class for storing application state to do with authentication. This is a simple flux
* store that listens for actions and updates its state accordingly, informing any
* listeners (views) of state changes.
*/
class LifecycleStore extends Store {

2
test/components/structures/login/Registration-test.js → test/components/structures/auth/Registration-test.js
View File

@@ -23,7 +23,7 @@ const expect = require('expect');
const testUtils = require('test-utils');
const sdk = require('matrix-react-sdk');
const Registration = sdk.getComponent('structures.login.Registration');
const Registration = sdk.getComponent('structures.auth.Registration');
let rtsClient;
let client;

2
test/components/views/login/RegistrationForm-test.js → test/components/views/auth/RegistrationForm-test.js
View File

@@ -23,7 +23,7 @@ const expect = require('expect');
const testUtils = require('test-utils');
const sdk = require('matrix-react-sdk');
const RegistrationForm = sdk.getComponent('views.login.RegistrationForm');
const RegistrationForm = sdk.getComponent('views.auth.RegistrationForm');
const TEAM_CONFIG = {
supportEmail: "support@some.domain",