imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove old user and room settings

Browse source 
This takes out the old user and room settings, replacing the paths with the new dialog editions. The labs setting has been removed in order to support this change.

In addition to removing the old components outright, some older components which were only used by the settings pages have been removed. The exception is the ColorSettings component as it has a high chance of sticking around in the future.

Styles that were shared by the settings components have been broken out to dedicated sections, making it easier to remove the old styles entirely.

Some stability testing of the app has been performed to ensure the app still works, however given the scope of this change there is a possibility of some broken functionality.
This commit is contained in:
Travis Ralston 2019-02-04 13:25:26 -07:00
parent 24db3e4804
commit eac50aa800
36 changed files with 297 additions and 3635 deletions
Download patch file Download diff file Expand all files Collapse all files

13
res/css/_common.scss
View file

@ -270,6 +270,19 @@ 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.
.mx_GeneralButton {
@mixin mx_DialogButton;
display: inline;
margin: auto;
}
.mx_GeneralButton:hover {
@mixin mx_DialogButton_hover;
}
.mx_linkButton {
cursor: pointer;
color: $accent-color;

7
res/css/_components.scss
View file

@ -21,7 +21,6 @@
@import "./structures/_TagPanel.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";
@ -42,6 +41,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 +50,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";
@ -77,6 +78,7 @@
@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,6 +106,8 @@
@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";
@ -125,7 +129,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";

5
res/css/structures/_TabbedView.scss
View file

@ -51,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;

269
res/css/structures/_UserSettings.scss
View file

@ -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;
}

19
res/css/views/dialogs/_Analytics.scss Normal file
View file

@ -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;
}

29
res/css/views/dialogs/_DeviceVerifyDialog.scss Normal file
View file

@ -0,0 +1,29 @@
/*
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_DeviceVerifyDialog_cryptoSection ul {
display: table;
}
.mx_DeviceVerifyDialog_cryptoSection li {
display: table-row;
}
.mx_DeviceVerifyDialog_cryptoSection label,
.mx_DeviceVerifyDialog_cryptoSection span {
display: table-cell;
padding-right: 1em;
}

53
res/css/views/elements/_ManageIntegsButton.scss Normal file
View file

@ -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;
}

28
res/css/views/room_settings/_AliasSettings.scss Normal file
View file

@ -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;
}

39
res/css/views/room_settings/_ColorSettings.scss Normal file
View file

@ -0,0 +1,39 @@
/*
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_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%;
}

260
res/css/views/rooms/_RoomSettings.scss
View file

@ -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;
}

11
res/css/views/settings/_Notifications.scss
View file

@ -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;
}