diff --git a/.eslintignore.errorfiles b/.eslintignore.errorfiles index 2ccf83489c..4830f8235a 100644 --- a/.eslintignore.errorfiles +++ b/.eslintignore.errorfiles @@ -44,13 +44,11 @@ src/components/views/rooms/MessageComposer.js src/components/views/rooms/PinnedEventTile.js src/components/views/rooms/RoomList.js src/components/views/rooms/RoomPreviewBar.js -src/components/views/rooms/RoomSettings.js src/components/views/rooms/SearchableEntityList.js src/components/views/rooms/SearchBar.js src/components/views/rooms/SearchResultTile.js src/components/views/rooms/TopUnreadMessagesBar.js src/components/views/rooms/UserTile.js -src/components/views/settings/AddPhoneNumber.js src/components/views/settings/ChangeAvatar.js src/components/views/settings/ChangePassword.js src/components/views/settings/DevicesPanel.js diff --git a/.eslintrc.js b/.eslintrc.js index ec48f6b2ff..8474cd86d7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -91,13 +91,13 @@ module.exports = { // to JSX. ignorePattern: '^\\s*<', ignoreComments: true, + ignoreRegExpLiterals: true, code: 120, }], "valid-jsdoc": ["warn"], "new-cap": ["warn"], "key-spacing": ["warn"], "prefer-const": ["warn"], - "arrow-parens": "off", // crashes currently: https://github.com/eslint/eslint/issues/6274 "generator-star-spacing": "off", diff --git a/CHANGELOG.md b/CHANGELOG.md index 09ff79ae0e..7293b00d1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4081,7 +4081,7 @@ Changes in [0.6.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v [\#297](https://github.com/matrix-org/matrix-react-sdk/pull/297) * multiple URL preview support [\#290](https://github.com/matrix-org/matrix-react-sdk/pull/290) - * Add a fallback home server to log into + * Add a fallback homeserver to log into [\#293](https://github.com/matrix-org/matrix-react-sdk/pull/293) * Hopefully fix memory leak with velocity [\#291](https://github.com/matrix-org/matrix-react-sdk/pull/291) diff --git a/res/css/_common.scss b/res/css/_common.scss index 56af1ab519..aaefb859e4 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -270,6 +270,20 @@ textarea { opacity: 0.7; } +// TODO: Review mx_GeneralButton usage to see if it can use a different class +// These classes were brought in from the old UserSettings and are included here to avoid +// breaking the app. +// Ref: https://github.com/vector-im/riot-web/issues/8420 +.mx_GeneralButton { + @mixin mx_DialogButton; + display: inline; + margin: auto; +} + +.mx_GeneralButton:hover { + @mixin mx_DialogButton_hover; +} + .mx_linkButton { cursor: pointer; color: $accent-color; diff --git a/res/css/_components.scss b/res/css/_components.scss index e017d4b95a..57a34023c0 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -4,6 +4,7 @@ @import "./structures/_CompatibilityPage.scss"; @import "./structures/_ContextualMenu.scss"; @import "./structures/_CreateRoom.scss"; +@import "./structures/_CustomRoomTagPanel.scss"; @import "./structures/_FilePanel.scss"; @import "./structures/_GroupView.scss"; @import "./structures/_HomePage.scss"; @@ -19,9 +20,9 @@ @import "./structures/_SearchBox.scss"; @import "./structures/_TabbedView.scss"; @import "./structures/_TagPanel.scss"; +@import "./structures/_TagPanelButtons.scss"; @import "./structures/_TopLeftMenuButton.scss"; @import "./structures/_UploadBar.scss"; -@import "./structures/_UserSettings.scss"; @import "./structures/_ViewSource.scss"; @import "./structures/auth/_Login.scss"; @import "./views/auth/_AuthBody.scss"; @@ -35,6 +36,7 @@ @import "./views/auth/_LanguageSelector.scss"; @import "./views/auth/_ServerConfig.scss"; @import "./views/auth/_ServerTypeSelector.scss"; +@import "./views/auth/_Welcome.scss"; @import "./views/avatars/_BaseAvatar.scss"; @import "./views/avatars/_MemberStatusMessageAvatar.scss"; @import "./views/context_menus/_MessageContextMenu.scss"; @@ -42,6 +44,7 @@ @import "./views/context_menus/_StatusMessageContextMenu.scss"; @import "./views/context_menus/_TagTileContextMenu.scss"; @import "./views/context_menus/_TopLeftMenu.scss"; +@import "./views/dialogs/_Analytics.scss"; @import "./views/dialogs/_BugReportDialog.scss"; @import "./views/dialogs/_ChangelogDialog.scss"; @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss"; @@ -50,6 +53,7 @@ @import "./views/dialogs/_CreateGroupDialog.scss"; @import "./views/dialogs/_CreateRoomDialog.scss"; @import "./views/dialogs/_DeactivateAccountDialog.scss"; +@import "./views/dialogs/_DeviceVerifyDialog.scss"; @import "./views/dialogs/_DevtoolsDialog.scss"; @import "./views/dialogs/_EncryptedEventDialog.scss"; @import "./views/dialogs/_GroupAddressPicker.scss"; @@ -74,9 +78,9 @@ @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"; +@import "./views/elements/_ManageIntegsButton.scss"; @import "./views/elements/_MemberEventListSummary.scss"; @import "./views/elements/_ProgressBar.scss"; @import "./views/elements/_ReplyThread.scss"; @@ -104,9 +108,12 @@ @import "./views/messages/_SenderProfile.scss"; @import "./views/messages/_TextualEvent.scss"; @import "./views/messages/_UnknownBody.scss"; +@import "./views/room_settings/_AliasSettings.scss"; +@import "./views/room_settings/_ColorSettings.scss"; @import "./views/rooms/_AppsDrawer.scss"; @import "./views/rooms/_Autocomplete.scss"; @import "./views/rooms/_AuxPanel.scss"; +@import "./views/rooms/_E2EIcon.scss"; @import "./views/rooms/_EntityTile.scss"; @import "./views/rooms/_EventTile.scss"; @import "./views/rooms/_JumpToBottomButton.scss"; @@ -124,7 +131,6 @@ @import "./views/rooms/_RoomList.scss"; @import "./views/rooms/_RoomPreviewBar.scss"; @import "./views/rooms/_RoomRecoveryReminder.scss"; -@import "./views/rooms/_RoomSettings.scss"; @import "./views/rooms/_RoomTile.scss"; @import "./views/rooms/_RoomTooltip.scss"; @import "./views/rooms/_RoomUpgradeWarningBar.scss"; @@ -150,6 +156,7 @@ @import "./views/settings/tabs/_SecuritySettingsTab.scss"; @import "./views/settings/tabs/_SettingsTab.scss"; @import "./views/settings/tabs/_VoiceSettingsTab.scss"; +@import "./views/verification/_VerificationShowSas.scss"; @import "./views/voip/_CallView.scss"; @import "./views/voip/_IncomingCallbox.scss"; @import "./views/voip/_VideoView.scss"; diff --git a/res/css/structures/_CustomRoomTagPanel.scss b/res/css/structures/_CustomRoomTagPanel.scss new file mode 100644 index 0000000000..45961d7be1 --- /dev/null +++ b/res/css/structures/_CustomRoomTagPanel.scss @@ -0,0 +1,45 @@ +/* +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_LeftPanel_tagPanelContainer { + display: flex; + flex-direction: column; +} + +.mx_CustomRoomTagPanel { + background-color: $tagpanel-bg-color; + max-height: 40vh; +} + +.mx_CustomRoomTagPanel_scroller { + max-height: inherit; +} + +.mx_CustomRoomTagPanel .mx_AccessibleButton { + margin: 9px auto; + width: 40px; +} + +.mx_CustomRoomTagPanel .mx_BaseAvatar_image { + box-sizing: border-box; + width: 40px; + height: 40px; +} + +.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected .mx_BaseAvatar_image { + border: 3px solid $warning-color; + border-radius: 40px; +} diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss index dc3158b39d..3aa80f6f59 100644 --- a/res/css/structures/_HomePage.scss +++ b/res/css/structures/_HomePage.scss @@ -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. @@ -22,27 +23,3 @@ limitations under the License. margin-left: auto; margin-right: auto; } - -.mx_HomePage iframe { - display: block; - width: 100%; - height: 100%; - border: 0px; -} - -.mx_HomePage_body { -// margin-left: 63px; -} - -.mx_HomePage_guest_warning { - display: flex; - background-color: $secondary-accent-color; - border: 1px solid $accent-color; - margin: 20px; - padding: 20px 40px; - border-radius: 5px; -} - -.mx_HomePage_guest_warning img { - padding-right: 10px; -} diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 941417eccc..9dbfe696a5 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -33,6 +33,11 @@ limitations under the License. flex: 0 0 140px; } +.mx_LeftPanel_tagPanelContainer { + flex: 0 0 70px; + height: 100%; +} + .mx_LeftPanel_hideButton { position: absolute; top: 10px; diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss index 2a9cc9f6c7..1054654670 100644 --- a/res/css/structures/_RoomStatusBar.scss +++ b/res/css/structures/_RoomStatusBar.scss @@ -121,7 +121,7 @@ limitations under the License. .mx_RoomStatusBar_connectionLostBar img { padding-left: 10px; - padding-right: 22px; + padding-right: 10px; vertical-align: middle; float: left; } diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index eb056a5eff..9791be902f 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -75,6 +75,7 @@ limitations under the License. font-size: 12px; padding: 0 5px; background-color: $roomtile-name-color; + cursor: pointer; } .mx_RoomSubList_addRoom, .mx_RoomSubList_badge { diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index ed9fa368e3..fb4df53d52 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -17,17 +17,21 @@ limitations under the License. .mx_TabbedView { margin: 0; - padding: 0; + padding: 0 0 0 58px; display: flex; - width: 100%; - height: 100%; + flex-direction: column; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; } .mx_TabbedView_tabLabels { width: 150px; max-width: 150px; - height: 100%; color: $tab-label-fg-color; + position: fixed; } .mx_TabbedView_tabLabel { @@ -47,11 +51,6 @@ limitations under the License. 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; @@ -82,13 +81,15 @@ limitations under the License. } .mx_TabbedView_tabPanel { - width: calc(100% - 320px); - display: inline-block; - margin-left: 70px; + margin-left: 220px; // 150px sidebar + 70px padding flex-grow: 1; + display: flex; + flex-direction: column; + min-height: 0; // firefox } .mx_TabbedView_tabPanelContent { flex-grow: 1; - min-width: 560px; + overflow: auto; + min-height: 0; // firefox } \ No newline at end of file diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index bf1746bd0e..084dcbfb47 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_TagPanel { - flex: 0 0 70px; + flex: 1; background-color: $tagpanel-bg-color; cursor: pointer; @@ -68,10 +68,13 @@ limitations under the License. height: 100%; } +.mx_TagPanel .mx_TagPanel_tagTileContainer > div { + height: 40px; + padding: 5px 0 4px 0; +} .mx_TagPanel .mx_TagTile { - padding-top: 9px; - padding-bottom: 9px; + margin: 9px 0; // opacity: 0.5; position: relative; } @@ -81,13 +84,7 @@ limitations under the License. // opacity: 1; } -.mx_TagPanel .mx_TagTile.mx_TagTile_selected { - /* To offset border of mx_TagTile_avatar */ - padding: 3px 0px; -} - .mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar { - border: 3px solid $accent-color; background-color: $accent-color; border-radius: 40px; @@ -97,6 +94,13 @@ limitations under the License. width: 40px; } +.mx_TagPanel .mx_TagTile_selected .mx_BaseAvatar_image { + border: 3px solid $accent-color; + height: 40px; + width: 40px; + box-sizing: border-box; +} + .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus { filter: none; } @@ -112,7 +116,7 @@ limitations under the License. height: 15px; position: absolute; right: -5px; - top: 1px; + top: -8px; border-radius: 8px; background-color: $neutral-badge-color; color: #ffffff; @@ -124,39 +128,22 @@ limitations under the License. padding-right: 4px; } -.mx_TagPanel_groupsButton { - flex: 0; - margin: 17px 0 3px 0; -} - -.mx_TagPanel_groupsButton > .mx_GroupsButton:before { - mask: url('$(res)/img/feather-icons/users.svg'); - mask-position: center 11px; -} - -.mx_TagPanel_groupsButton > .mx_TagPanel_report:before { - mask: url('$(res)/img/feather-icons/life-buoy.svg'); - mask-position: center 9px; -} - -.mx_TagPanel_groupsButton > .mx_AccessibleButton { - margin-bottom: 12px; - height: 40px; - width: 40px; - border-radius: 20px; - background-color: $roomheader-addroom-color; +.mx_TagTile_avatar { position: relative; - /* overwrite mx_RoleButton inline-block */ - display: block !important; - - &:before { - background-color: $tagpanel-bg-color; - mask-repeat: no-repeat; - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } +} + +.mx_TagTile_badge { + position: absolute; + right: -4px; + top: -2px; + border-radius: 8px; + color: $accent-fg-color; + font-weight: 600; + font-size: 14px; + padding: 0 5px; + background-color: $roomtile-name-color; +} + +.mx_TagTile_badgeHighlight { + background-color: $warning-color; } diff --git a/res/css/structures/_TagPanelButtons.scss b/res/css/structures/_TagPanelButtons.scss new file mode 100644 index 0000000000..f7cb189e25 --- /dev/null +++ b/res/css/structures/_TagPanelButtons.scss @@ -0,0 +1,56 @@ +/* +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_TagPanelButtons { + background-color: $tagpanel-bg-color; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + padding: 17px 0 3px 0; +} + +.mx_TagPanelButtons > .mx_GroupsButton:before { + mask: url('$(res)/img/feather-icons/users.svg'); + mask-position: center 11px; +} + +.mx_TagPanelButtons > .mx_TagPanelButtons_report:before { + mask: url('$(res)/img/feather-icons/life-buoy.svg'); + mask-position: center 9px; +} + +.mx_TagPanelButtons > .mx_AccessibleButton { + margin-bottom: 12px; + height: 40px; + width: 40px; + border-radius: 20px; + background-color: $roomheader-addroom-color; + position: relative; + /* overwrite mx_RoleButton inline-block */ + display: block !important; + + &:before { + background-color: $tagpanel-bg-color; + mask-repeat: no-repeat; + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } +} diff --git a/res/css/structures/_UserSettings.scss b/res/css/structures/_UserSettings.scss deleted file mode 100644 index b078a4e242..0000000000 --- a/res/css/structures/_UserSettings.scss +++ /dev/null @@ -1,269 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2017 Vector Creations 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_UserSettings { - max-width: 960px; - width: 100%; - margin-left: auto; - margin-right: auto; - - display: flex; - flex-direction: column; -} - -.mx_UserSettings .mx_RoomHeader { - order: 1; - - flex: 0 0 70px; -} - -.mx_UserSettings_body { - order: 2; - - flex: 1 1 0; - - margin-top: -20px; - overflow-y: auto; -} - -.mx_UserSettings h3 { - clear: both; - margin-left: 63px; - text-transform: uppercase; - color: $h3-color; - font-weight: 600; - font-size: 13px; - margin-top: 26px; - margin-bottom: 10px; -} - -.mx_UserSettings_section h3 { - margin-left: 0px; -} - -.mx_UserSettings_spinner { - display: inline-block; - vertical-align: middle; - margin-right: 12px; - width: 32px; - height: 32px; -} - -.mx_UserSettings_button { - @mixin mx_DialogButton; - display: inline; - margin: auto; -} - -.mx_UserSettings_button:hover { - @mixin mx_DialogButton_hover; -} - -.mx_UserSettings_button.danger { - background-color: $warning-color; -} - -.mx_UserSettings_section { - margin-left: 63px; - margin-top: 28px; - margin-bottom: 28px; -} - -.mx_UserSettings_cryptoSection ul { - display: table; -} -.mx_UserSettings_cryptoSection li { - display: table-row; -} -.mx_UserSettings_cryptoSection label, -.mx_UserSettings_cryptoSection span { - display: table-cell; - padding-right: 1em; -} - -.mx_UserSettings_passwordWarning { - /* To move the "Sign out" button out of the way */ - clear: both; - color: $warning-color; - margin-bottom: 5px; -} - -.mx_UserSettings_importExportButtons { - padding-top: 10px; - padding-left: 40px; -} - -.mx_UserSettings_importExportButtons .mx_UserSettings_button { - margin-right: 1em; -} - -.mx_UserSettings_toggle input { - width: 16px; - margin-right: 8px; - margin-bottom: 8px; -} - -.mx_UserSettings_toggle label { - padding-bottom: 21px; -} - -.mx_UserSettings_accountTable -.mx_UserSettings_notifTable -{ - display: table; -} - -.mx_UserSettings_notifTable .mx_Spinner { - position: absolute; -} - -.mx_UserSettings_language { - width: 200px; -} - -.mx_UserSettings_webRtcDevices_dropdown { - width: 50%; -} - -.mx_UserSettings_profileTable -{ - display: table; - float: left; -} - -.mx_UserSettings_profileTableRow -{ - display: table-row; -} - -.mx_UserSettings_profileLabelCell -{ - padding-bottom: 21px; - display: table-cell; - font-weight: bold; - padding-right: 24px; -} - -.mx_UserSettings_profileInputCell { - display: table-cell; - padding-bottom: 21px; - width: 240px; -} - -.mx_UserSettings_profileInputCell input, -.mx_UserSettings_profileInputCell .mx_EditableText -{ - display: inline-block; - border: 0px; - border-bottom: 1px solid $input-underline-color; - padding: 0px; - width: 240px; - color: $input-fg-color; - font-family: $font-family; - font-size: 16px; -} - -.mx_UserSettings_threepidButton { - display: table-cell; - padding-left: 0.5em; - position: relative; - cursor: pointer; -} - -.mx_UserSettings_phoneSection { - display:table; -} - -.mx_UserSettings_phoneCountry { - width: 70px; - display: table-cell; -} - -input.mx_UserSettings_phoneNumberField { - margin-left: 3px; - width: 172px; - border: 1px solid transparent; -} - -.mx_UserSettings_changePasswordButton { - float: right; - margin-right: 32px; - margin-left: 32px; -} - -.mx_UserSettings_logout { - float: right; - margin-right: 32px; - margin-left: 32px; -} - -.mx_UserSettings_avatarPicker { - margin-left: 32px; - margin-right: 32px; - float: right; - cursor: pointer; -} - -.mx_UserSettings_avatarPicker_img .mx_BaseAvatar_image { - object-fit: cover; -} - -.mx_UserSettings_avatarPicker_edit { - text-align: center; - margin-top: 10px; -} - -.mx_UserSettings_avatarPicker_edit img { - cursor: pointer; -} - -.mx_UserSettings_avatarPicker_edit > input { - display: none; -} - -.mx_UserSettings_avatarPicker_imgContainer { - display: inline-block; -} - -.mx_UserSettings_avatarPicker_remove { - display: inline-block; - float: right; - margin-right: -15px; -} - -.mx_UserSettings_advanced_spoiler, -.mx_UserSettings_link { - cursor: pointer; - color: $accent-color; - word-break: break-all; -} - -.mx_UserSettings_analyticsModal table { - margin: 10px 0px; -} - - -// Temp styles to keep the layout moderately usable. Not perfect, but better -// than 30 options being impossible to understand. -.mx_UserSettings .mx_SettingsFlag { - height: 30px; -} - -.mx_UserSettings .mx_SettingsFlag .mx_ToggleSwitch { - float: left; - margin-right: 5px; -} \ No newline at end of file diff --git a/res/css/views/auth/_AuthFooter.scss b/res/css/views/auth/_AuthFooter.scss index 741be49a69..ab169a6898 100644 --- a/res/css/views/auth/_AuthFooter.scss +++ b/res/css/views/auth/_AuthFooter.scss @@ -19,7 +19,8 @@ limitations under the License. width: 100%; font-size: 14px; opacity: 0.72; - margin: 20px 0; + padding: 20px 0; + background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); } .mx_AuthFooter a:link, diff --git a/res/css/views/auth/_AuthHeader.scss b/res/css/views/auth/_AuthHeader.scss index e1e8802437..b3d07b1925 100644 --- a/res/css/views/auth/_AuthHeader.scss +++ b/res/css/views/auth/_AuthHeader.scss @@ -18,6 +18,6 @@ limitations under the License. display: flex; flex-direction: column; width: 206px; - padding: 25px 50px; + padding: 25px 40px; box-sizing: border-box; } diff --git a/res/css/views/auth/_AuthHeaderLogo.scss b/res/css/views/auth/_AuthHeaderLogo.scss index b6f107d9c4..091fb0197b 100644 --- a/res/css/views/auth/_AuthHeaderLogo.scss +++ b/res/css/views/auth/_AuthHeaderLogo.scss @@ -17,6 +17,7 @@ limitations under the License. .mx_AuthHeaderLogo { margin-top: 15px; flex: 1; + padding: 0 10px; } .mx_AuthHeaderLogo img { diff --git a/res/css/views/auth/_AuthPage.scss b/res/css/views/auth/_AuthPage.scss index 64b69c750f..8ef48b6265 100644 --- a/res/css/views/auth/_AuthPage.scss +++ b/res/css/views/auth/_AuthPage.scss @@ -26,8 +26,6 @@ limitations under the License. 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; } diff --git a/res/css/views/auth/_Welcome.scss b/res/css/views/auth/_Welcome.scss new file mode 100644 index 0000000000..9043289184 --- /dev/null +++ b/res/css/views/auth/_Welcome.scss @@ -0,0 +1,26 @@ +/* +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_Welcome { + display: flex; + flex-direction: column; + align-items: center; +} + +.mx_Welcome .mx_AuthBody_language { + width: 120px; + margin-bottom: 10px; +} diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss index 18463da824..f305f0fae3 100644 --- a/res/css/views/context_menus/_TopLeftMenu.scss +++ b/res/css/views/context_menus/_TopLeftMenu.scss @@ -27,6 +27,10 @@ limitations under the License. margin: 5px 0; padding: 0; + li.mx_TopLeftMenu_icon_home::after { + mask-image: url('$(res)/img/feather-icons/home.svg'); + } + li.mx_TopLeftMenu_icon_settings::after { mask-image: url('$(res)/img/feather-icons/settings.svg'); } diff --git a/res/css/views/dialogs/_Analytics.scss b/res/css/views/dialogs/_Analytics.scss new file mode 100644 index 0000000000..e403d3b207 --- /dev/null +++ b/res/css/views/dialogs/_Analytics.scss @@ -0,0 +1,19 @@ +/* +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_AnalyticsModal table { + margin: 10px 0px; +} diff --git a/res/css/views/elements/_HexVerify.scss b/res/css/views/dialogs/_DeviceVerifyDialog.scss similarity index 67% rename from res/css/views/elements/_HexVerify.scss rename to res/css/views/dialogs/_DeviceVerifyDialog.scss index 3f3ee4b7ea..1997e0c21d 100644 --- a/res/css/views/elements/_HexVerify.scss +++ b/res/css/views/dialogs/_DeviceVerifyDialog.scss @@ -14,21 +14,16 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_HexVerify { - text-align: center; +.mx_DeviceVerifyDialog_cryptoSection ul { + display: table; } -.mx_HexVerify_pair { - display: inline-block; - font-weight: bold; - padding-left: 3px; - padding-right: 3px; +.mx_DeviceVerifyDialog_cryptoSection li { + display: table-row; } -.mx_HexVerify_pair_verified { - color: $accent-color; -} - -.mx_HexVerify_pair:hover{ - color: $accent-color; +.mx_DeviceVerifyDialog_cryptoSection label, +.mx_DeviceVerifyDialog_cryptoSection span { + display: table-cell; + padding-right: 1em; } diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss index 2cc7c08039..4a9708f6d1 100644 --- a/res/css/views/dialogs/_SettingsDialog.scss +++ b/res/css/views/dialogs/_SettingsDialog.scss @@ -15,56 +15,33 @@ limitations under the License. */ .mx_SettingsDialog { - .mx_Dialog { - max-width: 784px; // 900px - 58px (left padding) - 58px (right padding) - width: 80%; - height: 80%; - border-radius: 4px; + .mx_Dialog { + max-width: 900px; + width: 80%; + height: 80%; + border-radius: 4px; + padding-top: 0; + padding-right: 0; + padding-left: 0; - .mx_TabbedView_tabLabels { - // Force the sidebar to be always visible, letting the rest of the content scroll - position: fixed; - } + .mx_TabbedView { + top: 65px; + } - .mx_TabbedView_tabPanel { - max-width: 485px; - margin-left: 206px; // 70px margin + 136px for the sidebar - } + .mx_TabbedView .mx_SettingsTab { + box-sizing: border-box; + min-width: 550px; + padding-right: 130px; - .mx_SettingsDialog_header { - font-size: 24px; - display: block; - text-align: center; - color: $dialog-title-fg-color; - margin-top: 16px; - margin-bottom: 24px; - padding: 0; - } + // Put some padding on the bottom to avoid the settings tab from + // colliding harshly with the dialog when scrolled down. + padding-bottom: 100px; + } - .mx_SettingsDialog_close { - position: absolute; - top: 16px; - right: 25px; + .mx_Dialog_title { + text-align: center; + margin-top: 16px; + margin-bottom: 24px; + } } - - .mx_SettingsDialog_closeIcon { - width: 16px; - height: 16px; - display: inline-block; - } - - .mx_SettingsDialog_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; - } - } } diff --git a/res/css/views/dialogs/_UnknownDeviceDialog.scss b/res/css/views/dialogs/_UnknownDeviceDialog.scss index e3801e3550..a924704769 100644 --- a/res/css/views/dialogs/_UnknownDeviceDialog.scss +++ b/res/css/views/dialogs/_UnknownDeviceDialog.scss @@ -28,6 +28,10 @@ limitations under the License. flex-direction: column; } +.mx_UnknownDeviceDialog .mx_DeviceVerifyButtons { + float: right; +} + .mx_UnknownDeviceDialog .mx_Dialog_content { margin-bottom: 24px; } diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss index f83a754810..27b9975570 100644 --- a/res/css/views/elements/_Dropdown.scss +++ b/res/css/views/elements/_Dropdown.scss @@ -44,7 +44,7 @@ limitations under the License. .mx_Dropdown_arrow { width: 10px; height: 6px; - padding-right: 8px; + padding-right: 9px; mask: url('$(res)/img/feather-icons/dropdown-arrow.svg'); mask-repeat: no-repeat; background: $primary-fg-color; @@ -54,6 +54,7 @@ limitations under the License. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + flex: 1; } .mx_Dropdown_option { diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 06002939f5..6ce6b33a05 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -100,7 +100,8 @@ limitations under the License. top 0.25s ease-out 0s, background-color 0.25s ease-out 0s; font-size: 10px; - top: -14px; + top: -13px; + padding: 0 2px; background-color: $field-focused-label-bg-color; } @@ -111,7 +112,11 @@ limitations under the License. } .mx_Field select:disabled, -.mx_Field input:disabled { +.mx_Field select:disabled + label, +.mx_Field input:disabled, +.mx_Field input:disabled + label, +.mx_Field textarea:disabled, +.mx_Field textarea:disabled + label { background-color: $field-focused-label-bg-color; color: $greyed-fg-color; } diff --git a/res/css/views/elements/_ManageIntegsButton.scss b/res/css/views/elements/_ManageIntegsButton.scss new file mode 100644 index 0000000000..7c91b9dbde --- /dev/null +++ b/res/css/views/elements/_ManageIntegsButton.scss @@ -0,0 +1,53 @@ +/* +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_ManageIntegsButton_error { + position: relative; + cursor: not-allowed; +} + +.mx_ManageIntegsButton_error img { + position: absolute; + right: -5px; + top: -5px; +} + +.mx_ManageIntegsButton_error { + float: right; +} + +.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup { + display: none; +} + +.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup { + display: inline; +} + +.mx_ManageIntegsButton_errorPopup { + position: absolute; + top: 110%; + 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; +} diff --git a/res/css/views/room_settings/_AliasSettings.scss b/res/css/views/room_settings/_AliasSettings.scss new file mode 100644 index 0000000000..d4ae58e5b0 --- /dev/null +++ b/res/css/views/room_settings/_AliasSettings.scss @@ -0,0 +1,28 @@ +/* +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_AliasSettings_editable { + border: 0px; + border-bottom: 1px solid $strong-input-border-color; + padding: 0px; + min-width: 240px; +} + +.mx_AliasSettings_editable:focus { + border-bottom: 1px solid $accent-color; + outline: none; + box-shadow: none; +} diff --git a/src/settings/controllers/LazyLoadingController.js b/res/css/views/room_settings/_ColorSettings.scss similarity index 52% rename from src/settings/controllers/LazyLoadingController.js rename to res/css/views/room_settings/_ColorSettings.scss index 90f095c9ca..39b087653d 100644 --- a/src/settings/controllers/LazyLoadingController.js +++ b/res/css/views/room_settings/_ColorSettings.scss @@ -1,5 +1,5 @@ /* -Copyright 2018 New Vector +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,16 +14,26 @@ See the License for the specific language governing permissions and limitations under the License. */ -import SettingController from "./SettingController"; -import MatrixClientPeg from "../../MatrixClientPeg"; -import PlatformPeg from "../../PlatformPeg"; - -export default class LazyLoadingController extends SettingController { - async onChange(level, roomId, newValue) { - if (!PlatformPeg.get()) return; - - MatrixClientPeg.get().stopClient(); - await MatrixClientPeg.get().store.deleteAllData(); - PlatformPeg.get().reload(); - } +.mx_ColorSettings_roomColor { + display: inline-block; + position: relative; + width: 37px; + height: 37px; + border: 1px solid #979797; + margin-right: 13px; + cursor: pointer; +} + +.mx_ColorSettings_roomColor_selected { + position: absolute; + left: 10px; + top: 4px; + cursor: default ! important; +} + +.mx_ColorSettings_roomColorPrimary { + height: 10px; + position: absolute; + bottom: 0px; + width: 100%; } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 4a46063376..8094062628 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -56,9 +56,8 @@ limitations under the License. max-width: 960px; width: 50%; margin-right: 5px; - border: 1px solid $primary-hairline-color; - border-radius: 2px; - background-color: $dialog-background-bg-color; + border: 5px solid $widget-menu-bar-bg-color; + border-radius: 4px; } .mx_AppTile:last-child { @@ -71,8 +70,8 @@ limitations under the License. height: 100%; margin: 0; padding: 0; - border: 1px solid $primary-hairline-color; - border-radius: 2px; + border: 5px solid $widget-menu-bar-bg-color; + border-radius: 4px; } .mx_AppTile_mini { @@ -93,9 +92,7 @@ limitations under the License. .mx_AppTileMenuBar { margin: 0; - padding: 2px 10px; - border-bottom: 1px solid $primary-hairline-color; - font-size: 10px; + font-size: 12px; background-color: $widget-menu-bar-bg-color; display: flex; flex-direction: row; @@ -104,6 +101,10 @@ limitations under the License. cursor: pointer; } +.mx_AppTileMenuBar_expanded { + padding-bottom: 5px; +} + .mx_AppTileMenuBarTitle { display: flex; flex-direction: row; @@ -111,6 +112,10 @@ limitations under the License. pointer-events: none; } +.mx_AppTileMenuBarTitle > :last-child { + margin-left: 9px; +} + .mx_AppTileMenuBarWidgets { float: right; display: flex; @@ -118,6 +123,53 @@ limitations under the License. align-items: center; } +.mx_AppTileMenuBar_iconButton { + width: 12px; + height: 12px; + mask-repeat: no-repeat; + mask-position: 0 center; + mask-size: auto 12px; + background-color: $topleftmenu-color; + margin: 0 3px; +} + +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_minimise { + mask-image: url('$(res)/img/feather-icons/widget/minimise.svg'); + background-color: $accent-color; +} + +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maximise { + mask-image: url('$(res)/img/feather-icons/widget/maximise.svg'); + background-color: $accent-color; +} + +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_reload { + mask-image: url('$(res)/img/feather-icons/widget/refresh.svg'); + mask-size: 100%; +} + +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout { + mask-image: url('$(res)/img/feather-icons/widget/external-link.svg'); +} + +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_snapshot { + mask-image: url('$(res)/img/feather-icons/widget/camera.svg'); +} + +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_edit { + mask-image: url('$(res)/img/feather-icons/widget/edit.svg'); +} + +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_delete { + mask-image: url('$(res)/img/feather-icons/widget/bin.svg'); + background-color: $warning-color; +} + +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_cancel { + mask-image: url('$(res)/img/feather-icons/widget/x-circle.svg'); +} + +/* delete ? */ .mx_AppTileMenuBarWidget { cursor: pointer; width: 10px; @@ -265,14 +317,11 @@ form.mx_Custom_Widget_Form div { } .mx_AppPermissionButton { - padding: 5px; + border: none; + padding: 5px 20px; border-radius: 5px; - color: $warning-color; - background-color: $primary-bg-color; -} - -.mx_AppPermissionButton:hover { - background-color: $primary-fg-color; + background-color: $button-bg-color; + color: $button-fg-color; cursor: pointer; } diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss new file mode 100644 index 0000000000..cd577df87b --- /dev/null +++ b/res/css/views/rooms/_E2EIcon.scss @@ -0,0 +1,33 @@ +/* +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_E2EIcon { + width: 25px; + height: 25px; + mask-repeat: no-repeat; + mask-position: center 0; + margin: 0 9px; +} + +.mx_E2EIcon_verified { + mask-image: url('$(res)/img/feather-icons/e2e/lock-verified.svg'); + background-color: $accent-color; +} + +.mx_E2EIcon_warning { + mask-image: url('$(res)/img/feather-icons/e2e/lock-warning.svg'); + background-color: $warning-color; +} diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index c920d6e390..7c9a6babea 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -281,9 +281,24 @@ limitations under the License. .mx_EventTile_e2eIcon { display: block; position: absolute; - top: 9px; + top: 8px; left: 46px; + width: 15px; + height: 15px; cursor: pointer; + mask-size: 14px; + mask-repeat: no-repeat; + mask-position: 0; +} + +.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { + mask-image: url('$(res)/img/feather-icons/e2e/warning.svg'); + background-color: $warning-color; +} + +.mx_EventTile_e2eIcon_unencrypted { + mask-image: url('$(res)/img/feather-icons/e2e/warning.svg'); + background-color: $composer-e2e-icon-color; } .mx_EventTile_e2eIcon_hidden { diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss index 6ccc4c7ae3..f780c50410 100644 --- a/res/css/views/rooms/_MemberDeviceInfo.scss +++ b/res/css/views/rooms/_MemberDeviceInfo.scss @@ -20,6 +20,25 @@ limitations under the License. align-items: start; } +.mx_MemberDeviceInfo_icon { + margin-top: 4px; + width: 12px; + height: 12px; + mask-repeat: no-repeat; +} +.mx_MemberDeviceInfo_icon_blacklisted { + mask-image: url('$(res)/img/feather-icons/e2e/blacklisted.svg'); + background-color: $warning-color; +} +.mx_MemberDeviceInfo_icon_verified { + mask-image: url('$(res)/img/feather-icons/e2e/verified.svg'); + background-color: $accent-color; +} +.mx_MemberDeviceInfo_icon_unverified { + mask-image: url('$(res)/img/feather-icons/e2e/warning.svg'); + background-color: $warning-color; +} + .mx_MemberDeviceInfo > .mx_DeviceVerifyButtons { display: flex; flex-direction: column; diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss index 99771fece0..707c186518 100644 --- a/res/css/views/rooms/_MemberInfo.scss +++ b/res/css/views/rooms/_MemberInfo.scss @@ -26,6 +26,10 @@ limitations under the License. display: flex; } +.mx_MemberInfo_name > .mx_E2EIcon { + margin-left: 0; +} + .mx_MemberInfo_cancel { height: 16px; padding: 10px 15px; diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index dc4aec691b..7ee7efcaff 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -23,6 +23,10 @@ limitations under the License. padding-left: 84px; } +.mx_MessageComposer_wrapper.mx_MessageComposer_hasE2EIcon { + padding-left: 109px; +} + .mx_MessageComposer_replaced_wrapper { margin-left: auto; margin-right: auto; @@ -71,9 +75,10 @@ limitations under the License. width: 100%; } -.mx_MessageComposer_e2eIcon { +.mx_MessageComposer_e2eIcon.mx_E2EIcon { position: absolute; left: 60px; + background-color: $composer-e2e-icon-color; } .mx_MessageComposer_noperm_error { diff --git a/res/css/views/rooms/_RoomRecoveryReminder.scss b/res/css/views/rooms/_RoomRecoveryReminder.scss index e4e2d19b42..68e2bf861e 100644 --- a/res/css/views/rooms/_RoomRecoveryReminder.scss +++ b/res/css/views/rooms/_RoomRecoveryReminder.scss @@ -38,7 +38,6 @@ limitations under the License. margin: 0 10px; } -.mx_RoomRecoveryReminder_button.mx_RoomRecoveryReminder_secondary { - @mixin mx_DialogButton_secondary; - background-color: transparent; +.mx_RoomRecoveryReminder_secondary { + font-size: 90%; } diff --git a/res/css/views/rooms/_RoomSettings.scss b/res/css/views/rooms/_RoomSettings.scss deleted file mode 100644 index 5ed9168aab..0000000000 --- a/res/css/views/rooms/_RoomSettings.scss +++ /dev/null @@ -1,260 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2017 Vector Creations 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_RoomSettings { - margin: 40px; -} - -.mx_RoomSettings_upgradeButton, -.mx_RoomSettings_leaveButton, -.mx_RoomSettings_unbanButton { - @mixin mx_DialogButton; - position: relative; - margin-right: 8px; -} - -.mx_RoomSettings_devtoolsButton { - @mixin mx_DialogButton; - position: relative; - padding: 4px 1.5em; - margin-top: 8px; -} - -.mx_RoomSettings_upgradeButton, -.mx_RoomSettings_leaveButton:hover, -.mx_RoomSettings_unbanButton:hover { - @mixin mx_DialogButton_hover; -} - -.mx_RoomSettings_upgradeButton.danger { - @mixin mx_DialogButton_danger; -} - -.mx_RoomSettings_integrationsButton_error { - position: relative; - cursor: not-allowed; -} -.mx_RoomSettings_integrationsButton_error img { - position: absolute; - right: -5px; - top: -5px; -} -.mx_RoomSettings_leaveButton, -.mx_RoomSettings_integrationsButton_error { - float: right; -} -.mx_RoomSettings_integrationsButton_error .mx_RoomSettings_integrationsButton_errorPopup { - display: none; -} -.mx_RoomSettings_integrationsButton_error:hover .mx_RoomSettings_integrationsButton_errorPopup { - display: inline; -} -.mx_RoomSettings_integrationsButton_errorPopup { - position: absolute; - top: 110%; - 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; -} - -.mx_RoomSettings_e2eIcon { - padding-left: 4px; - padding-right: 7px; -} - -.mx_RoomSettings_leaveButton { - margin-right: 32px; -} - -.mx_RoomSettings_powerLevels { - display: table; -} - -.mx_RoomSettings_powerLevel { - display: table-row; -} - -.mx_RoomSettings_powerLevelKey, -.mx_RoomSettings_powerLevel .mx_PowerSelector { - display: table-cell; - padding-bottom: 5px; -} - -.mx_RoomSettings_powerLevelKey { - text-align: right; - padding-right: 0.3em; -} - -.mx_RoomSettings h3 { - text-transform: uppercase; - color: $h3-color; - font-weight: 600; - font-size: 13px; - margin-top: 36px; - margin-bottom: 10px; -} - -.mx_RoomSettings .mx_RoomSettings_toggles label { - margin-bottom: 8px; - display: block; -} - -.mx_RoomSettings .mx_RoomSettings_toggles input[type="checkbox"], -.mx_RoomSettings .mx_RoomSettings_toggles input[type="radio"] { - margin-right: 7px; -} - -.mx_RoomSettings .mx_RoomSettings_tags input[type="checkbox"] { - margin-left: 1em; - margin-right: 7px; -} - -.mx_RoomSettings .mx_RoomSettings_tags { - margin-bottom: 8px; -} - -.mx_RoomSettings .mx_RoomSettings_roomColor { - display: inline-block; - position: relative; - width: 37px; - height: 37px; - border: 1px solid #979797; - margin-right: 13px; - cursor: pointer; -} - -.mx_RoomSettings .mx_RoomSettings_roomColor_selected { - position: absolute; - left: 10px; - top: 4px; - cursor: default ! important; -} - -.mx_RoomSettings .mx_RoomSettings_roomColorPrimary { - height: 10px; - position: absolute; - bottom: 0px; - width: 100%; -} - -.mx_RoomSettings .mx_RoomSettings_aliasLabel { - margin-bottom: 8px; -} - -.mx_RoomSettings .mx_RoomSettings_aliasesTable { - margin-top: 12px; - margin-bottom: 0px; - margin-left: 56px; - display: table; -} - -.mx_RoomSettings .mx_RoomSettings_aliasesTableRow { - display: table-row; - margin-bottom: 16px; -} - -.mx_RoomSettings .mx_RoomSettings_alias { - max-width: 400px; - margin-bottom: 16px; - /* - commented out so margin applies - display: table-cell; */ -} - -.mx_RoomSettings .mx_RoomSettings_addAlias, -.mx_RoomSettings .mx_RoomSettings_deleteAlias { - display: table-cell; - padding-left: 0.5em; - position: relative; - cursor: pointer; -} - -.mx_RoomSettings .mx_RoomSettings_addAlias img, -.mx_RoomSettings .mx_RoomSettings_deleteAlias img { - visibility: hidden; -} - -.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_addAlias img, -.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_deleteAlias img { - visibility: visible; -} - -.mx_RoomSettings_warning { - color: $warning-color; - font-weight: bold; - margin-top: 8px; - margin-bottom: 8px; -} - -.mx_RoomSettings_editable { - border: 0px; - border-bottom: 1px solid $strong-input-border-color; - padding: 0px; - min-width: 240px; -} - -.mx_RoomSettings_editable:focus { - border-bottom: 1px solid $accent-color; - outline: none; - box-shadow: none; -} - -.mx_RoomSettings_deleteAlias, -.mx_RoomSettings_addAlias { - display: table-cell; - visibility: visible; -} - -.mx_RoomSettings_deleteAlias:hover, -.mx_RoomSettings_addAlias:hover { - visibility: visible; -} - -.mx_RoomSettings_aliasPlaceholder { - color: $settings-grey-fg-color; -} - -.mx_RoomSettings_buttons { - text-align: right; - margin-bottom: 16px; -} - -.mx_RoomSettings_button { - display: inline; - border: 0px; - height: 36px; - border-radius: 36px; - font-weight: 400; - font-size: 15px; - color: $accent-fg-color; - background-color: $accent-color; - width: auto; - margin: auto; - padding: 6px; - padding-left: 1em; - padding-right: 1em; -} diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss index 171b4c2e05..d6c0b5dbeb 100644 --- a/res/css/views/settings/_Notifications.scss +++ b/res/css/views/settings/_Notifications.scss @@ -59,10 +59,15 @@ limitations under the License. color: $accent-color; } -.mx_UserSettings_devicesTable td { +.mx_UserNotifSettings_devicesTable td { padding-left: 20px; padding-right: 20px; } -.mx_UserSettings_devicesTable_nodevices { - font-style: italic; + +.mx_UserNotifSettings_notifTable { + display: table; +} + +.mx_UserNotifSettings_notifTable .mx_Spinner { + position: absolute; } diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss new file mode 100644 index 0000000000..a0da7e2539 --- /dev/null +++ b/res/css/views/verification/_VerificationShowSas.scss @@ -0,0 +1,48 @@ +/* +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_VerificationShowSas_decimalSas { + text-align: center; + font-weight: bold; + padding-left: 3px; + padding-right: 3px; +} + +.mx_VerificationShowSas_decimalSas span { + margin-left: 5px; + margin-right: 5px; +} + +.mx_VerificationShowSas_emojiSas { + text-align: center; +} + +.mx_VerificationShowSas_emojiSas_block { + display: inline-block; + margin-left: 15px; + margin-right: 15px; + text-align: center; + margin-bottom: 20px; +} + +.mx_VerificationShowSas_emojiSas_emoji { + font-size: 48px; +} + +.mx_VerificationShowSas_emojiSas_label { + text-align: center; + font-weight: bold; +} diff --git a/res/img/03b381.png b/res/img/03b381.png new file mode 100644 index 0000000000..cf28fc7e59 Binary files /dev/null and b/res/img/03b381.png differ diff --git a/res/img/368bd6.png b/res/img/368bd6.png new file mode 100644 index 0000000000..a2700bd0ae Binary files /dev/null and b/res/img/368bd6.png differ diff --git a/res/img/50e2c2.png b/res/img/50e2c2.png deleted file mode 100644 index ee0f855895..0000000000 Binary files a/res/img/50e2c2.png and /dev/null differ diff --git a/res/img/76cfa6.png b/res/img/76cfa6.png deleted file mode 100644 index de1ea60d54..0000000000 Binary files a/res/img/76cfa6.png and /dev/null differ diff --git a/res/img/80cef4.png b/res/img/80cef4.png deleted file mode 100644 index 637d03f63c..0000000000 Binary files a/res/img/80cef4.png and /dev/null differ diff --git a/res/img/ac3ba8.png b/res/img/ac3ba8.png new file mode 100644 index 0000000000..031471d85a Binary files /dev/null and b/res/img/ac3ba8.png differ diff --git a/res/img/f4c371.png b/res/img/f4c371.png deleted file mode 100644 index ad3b8f1616..0000000000 Binary files a/res/img/f4c371.png and /dev/null differ diff --git a/res/img/feather-icons/e2e/blacklisted.svg b/res/img/feather-icons/e2e/blacklisted.svg new file mode 100644 index 0000000000..63897c2227 --- /dev/null +++ b/res/img/feather-icons/e2e/blacklisted.svg @@ -0,0 +1,6 @@ + diff --git a/res/img/feather-icons/e2e/lock-verified.svg b/res/img/feather-icons/e2e/lock-verified.svg new file mode 100644 index 0000000000..4cd4684ea2 --- /dev/null +++ b/res/img/feather-icons/e2e/lock-verified.svg @@ -0,0 +1,6 @@ + diff --git a/res/img/feather-icons/e2e/lock-warning.svg b/res/img/feather-icons/e2e/lock-warning.svg new file mode 100644 index 0000000000..507c532f9d --- /dev/null +++ b/res/img/feather-icons/e2e/lock-warning.svg @@ -0,0 +1,9 @@ + diff --git a/res/img/feather-icons/e2e/verified.svg b/res/img/feather-icons/e2e/verified.svg new file mode 100644 index 0000000000..f143f854e6 --- /dev/null +++ b/res/img/feather-icons/e2e/verified.svg @@ -0,0 +1,3 @@ + diff --git a/res/img/feather-icons/e2e/warning.svg b/res/img/feather-icons/e2e/warning.svg new file mode 100644 index 0000000000..e6c246dba9 --- /dev/null +++ b/res/img/feather-icons/e2e/warning.svg @@ -0,0 +1,6 @@ + diff --git a/res/img/feather-icons/home.svg b/res/img/feather-icons/home.svg new file mode 100644 index 0000000000..7bb31b23dc --- /dev/null +++ b/res/img/feather-icons/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/res/img/feather-icons/widget/bin.svg b/res/img/feather-icons/widget/bin.svg new file mode 100644 index 0000000000..7616d8931b --- /dev/null +++ b/res/img/feather-icons/widget/bin.svg @@ -0,0 +1,65 @@ + + diff --git a/res/img/feather-icons/widget/camera.svg b/res/img/feather-icons/widget/camera.svg new file mode 100644 index 0000000000..5502493068 --- /dev/null +++ b/res/img/feather-icons/widget/camera.svg @@ -0,0 +1,6 @@ + diff --git a/res/img/feather-icons/widget/edit.svg b/res/img/feather-icons/widget/edit.svg new file mode 100644 index 0000000000..749e83f982 --- /dev/null +++ b/res/img/feather-icons/widget/edit.svg @@ -0,0 +1,6 @@ + diff --git a/res/img/feather-icons/widget/external-link.svg b/res/img/feather-icons/widget/external-link.svg new file mode 100644 index 0000000000..6732f298f4 --- /dev/null +++ b/res/img/feather-icons/widget/external-link.svg @@ -0,0 +1,5 @@ + diff --git a/res/img/feather-icons/widget/maximise.svg b/res/img/feather-icons/widget/maximise.svg new file mode 100644 index 0000000000..96185da135 --- /dev/null +++ b/res/img/feather-icons/widget/maximise.svg @@ -0,0 +1,63 @@ + + diff --git a/res/img/feather-icons/widget/minimise.svg b/res/img/feather-icons/widget/minimise.svg new file mode 100644 index 0000000000..f05e939960 --- /dev/null +++ b/res/img/feather-icons/widget/minimise.svg @@ -0,0 +1,65 @@ + + diff --git a/res/img/feather-icons/widget/refresh.svg b/res/img/feather-icons/widget/refresh.svg new file mode 100644 index 0000000000..0994bbdd52 --- /dev/null +++ b/res/img/feather-icons/widget/refresh.svg @@ -0,0 +1,6 @@ + diff --git a/res/img/feather-icons/widget/x-circle.svg b/res/img/feather-icons/widget/x-circle.svg new file mode 100644 index 0000000000..951407b39c --- /dev/null +++ b/res/img/feather-icons/widget/x-circle.svg @@ -0,0 +1,6 @@ + diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index f976180144..e389cc944c 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -142,6 +142,8 @@ $roomheader-addroom-color: #91A1C0; $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; +$composer-e2e-icon-color: #c9ced6; + // ******************** $roomtile-name-color: #61708b; @@ -170,7 +172,7 @@ $panel-divider-color: #dee1f3; // ******************** -$widget-menu-bar-bg-color: $tertiary-accent-color; +$widget-menu-bar-bg-color: $secondary-accent-color; // ******************** diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index 998325e1b7..8185ba0ace 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -134,6 +134,9 @@ $roomheader-color: $primary-fg-color; $roomheader-addroom-color: $primary-bg-color; $roomtopic-color: $settings-grey-fg-color; $eventtile-meta-color: $roomtopic-color; + +$composer-e2e-icon-color: #c9ced6; + // ******************** $roomtile-name-color: rgba(69, 69, 69, 0.8); diff --git a/src/AddThreepid.js b/src/AddThreepid.js index 8de7e9e21c..adeaf84a69 100644 --- a/src/AddThreepid.js +++ b/src/AddThreepid.js @@ -19,7 +19,7 @@ import MatrixClientPeg from './MatrixClientPeg'; import { _t } from './languageHandler'; /** - * Allows a user to add a third party identifier to their Home Server and, + * Allows a user to add a third party identifier to their homeserver and, * optionally, the identity servers. * * This involves getting an email token from the identity server to "prove" that diff --git a/src/Analytics.js b/src/Analytics.js index 3a8c5d6e10..44b85e4842 100644 --- a/src/Analytics.js +++ b/src/Analytics.js @@ -267,7 +267,7 @@ class Analytics { const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog'); Modal.createTrackedDialog('Analytics Details', '', ErrorDialog, { title: _t('Analytics'), - description:
{ _t('You are now ignoring %(userId)s', {userId}) }
{ _t('You are no longer ignoring %(userId)s', {userId}) }
@@ -558,7 +569,6 @@ export const CommandMap = { }