sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Merge pull request #2491 from matrix-org/travis/usettings/tab/general

Browse Source 
Implement the "General" tab of new user settings
This commit is contained in:
Travis Ralston
2019-01-24 08:51:11 -07:00
committed by GitHub
parent 7b5500b9e8 736aa8297d
commit 2a9f6186d7
27 changed files with 1355 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/_components.scss
+4
View File
@@ -80,6 +80,7 @@
@import "./views/elements/_RoleButton.scss";
@import "./views/elements/_Spinner.scss";
@import "./views/elements/_SyntaxHighlight.scss";
@import "./views/elements/_ToggleSwitch.scss";
@import "./views/elements/_ToolTipButton.scss";
@import "./views/globals/_MatrixToolbar.scss";
@import "./views/groups/_GroupPublicityToggle.scss";
@@ -128,9 +129,12 @@
@import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_DevicesPanel.scss";
@import "./views/settings/_EmailAddresses.scss";
@import "./views/settings/_IntegrationsManager.scss";
@import "./views/settings/_KeyBackupPanel.scss";
@import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss";
@import "./views/settings/_ProfileSettings.scss";
@import "./views/settings/tabs/_GeneralSettingsTab.scss";
@import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/voip/_CallView.scss";
res/css/structures/_UserSettings.scss
+12
View File
@@ -255,3 +255,15 @@ input.mx_UserSettings_phoneNumberField {
.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;
}
res/css/views/elements/_AccessibleButton.scss
+32
View File
@@ -42,3 +42,35 @@ limitations under the License.
color: $button-primary-disabled-fg-color;
background-color: $button-primary-disabled-bg-color;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
padding: 5px 12px;
color: $button-primary-fg-color;
background-color: $button-primary-bg-color;
}
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
color: $button-primary-disabled-fg-color;
background-color: $button-primary-disabled-bg-color;
}
.mx_AccessibleButton_kind_danger {
color: $button-danger-fg-color;
background-color: $button-danger-bg-color;
}
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
padding: 5px 12px;
color: $button-danger-fg-color;
background-color: $button-danger-bg-color;
}
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
res/css/views/elements/_Field.scss
+1 -1
View File
@@ -64,7 +64,7 @@ limitations under the License.
.mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label,
.mx_Field select:focus + label {
.mx_Field select + label /* Always show a select's label on top to not collide with the value */ {
transition:
font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s,
res/css/views/elements/_ToggleSwitch.scss
+51
View File
@@ -0,0 +1,51 @@
/*
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: Fancy transitions
.mx_ToggleSwitch {
width: 48px;
height: 24px;
border-radius: 14px;
background-color: $togglesw-off-color;
position: relative;
}
.mx_ToggleSwitch_enabled {
cursor: pointer;
}
.mx_ToggleSwitch.mx_ToggleSwitch_on {
background-color: $togglesw-on-color;
}
.mx_ToggleSwitch_ball {
margin: 2px;
width: 20px;
height: 20px;
border-radius: 20px;
background-color: $togglesw-ball-color;
position: absolute;
top: 0;
}
.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
left: 2px;
}
.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
right: 2px;
}
res/css/views/groups/_GroupUserSettings.scss
-1
View File
@@ -18,6 +18,5 @@ limitations under the License.
height: 200px;
border: 1px solid $primary-hairline-color;
border-radius: 3px;
margin-right: 32px;
overflow: hidden;
}
res/css/views/settings/_EmailAddresses.scss
+43
View File
@@ -0,0 +1,43 @@
/*
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_ExistingEmailAddress {
margin-bottom: 5px;
}
.mx_ExistingEmailAddress_delete {
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
.mx_ExistingEmailAddress_email {
vertical-align: middle;
}
.mx_ExistingEmailAddress_promptText {
margin-right: 10px;
}
.mx_ExistingEmailAddress_confirmBtn {
margin-right: 5px;
}
.mx_EmailAddresses_new .mx_Field input {
// Use 100% of the space available for the input, but don't let the 10px
// padding on either side of the input to push it out of alignment.
width: calc(100% - 20px);
}
res/css/views/settings/_PhoneNumbers.scss
+56
View File
@@ -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_ExistingPhoneNumber {
margin-bottom: 5px;
}
.mx_ExistingPhoneNumber_delete {
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
.mx_ExistingPhoneNumber_address {
vertical-align: middle;
}
.mx_ExistingPhoneNumber_promptText {
margin-right: 10px;
}
.mx_ExistingPhoneNumber_confirmBtn {
margin-right: 5px;
}
.mx_PhoneNumbers_new .mx_Field input {
// Use 100% of the space available for the input, but don't let the 10px
// padding on either side of the input to push it out of alignment.
width: calc(100% - 20px);
}
.mx_PhoneNumbers_input {
display: flex;
align-items: center;
}
.mx_PhoneNumbers_input > .mx_Field {
flex-grow: 1;
}
.mx_PhoneNumbers_country {
width: 80px;
}
res/css/views/settings/_ProfileSettings.scss
+107
View File
@@ -0,0 +1,107 @@
/*
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_ProfileSettings_profile {
display: flex;
}
.mx_ProfileSettings_controls {
flex-grow: 1;
}
.mx_ProfileSettings_controls .mx_Field #profileDisplayName {
width: calc(100% - 20px); // subtract 10px padding on left and right
}
.mx_ProfileSettings_avatar {
width: 88px;
height: 88px;
margin-left: 13px;
position: relative;
cursor: pointer;
}
.mx_ProfileSettings_avatar > * {
display: block;
width: 88px;
height: 88px;
border-radius: 4px;
}
.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder {
background-color: $settings-profile-placeholder-bg-color;
}
.mx_ProfileSettings_avatarOverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
text-align: center;
vertical-align: middle;
font-size: 10px;
}
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay {
display: inline-block;
opacity: 0.5 !important;
color: $settings-profile-overlay-fg-color !important;
background-color: $settings-profile-overlay-bg-color !important;
}
.mx_ProfileSettings_avatarOverlay_show {
display: inline-block;
opacity: 1;
color: $settings-profile-overlay-placeholder-fg-color;
background-color: $settings-profile-overlay-placeholder-bg-color;
}
.mx_ProfileSettings_avatarOverlayText {
display: block;
margin-top: 17px;
margin-bottom: 8px;
}
.mx_ProfileSettings_avatarOverlayImgContainer {
position: relative;
width: 14px;
height: 14px;
margin: auto;
}
.mx_ProfileSettings_avatarOverlayImg:before {
background-color: $settings-profile-overlay-placeholder-fg-color;
mask: url("$(res)/img/feather-icons/upload.svg");
mask-repeat: no-repeat;
mask-size: 14px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before {
background-color: $settings-profile-overlay-fg-color !important;
}
.mx_ProfileSettings_avatarUpload {
display: none;
}
res/css/views/settings/tabs/_GeneralSettingsTab.scss
+35 -14
View File
@@ -1,25 +1,46 @@
.mx_GeneralSettingsTab_profile {
display: flex;
/*
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_GeneralSettingsTab_changePassword,
.mx_GeneralSettingsTab_themeSection {
display: block;
}
.mx_GeneralSettingsTab_profileControls {
flex-grow: 1;
.mx_GeneralSettingsTab_changePassword .mx_Field,
.mx_GeneralSettingsTab_themeSection .mx_Field {
display: block;
margin-right: 100px; // Align with the other fields on the page
}
.mx_GeneralSettingsTab_profileControls .mx_Field #profileDisplayName {
.mx_GeneralSettingsTab_changePassword .mx_Field input {
display: block;
width: calc(100% - 20px); // subtract 10px padding on left and right
}
.mx_GeneralSettingsTab_profileAvatar {
width: 88px;
height: 88px;
margin-left: 13px;
.mx_GeneralSettingsTab_changePassword .mx_Field:first-child {
margin-top: 0;
}
.mx_GeneralSettingsTab_profileAvatar div {
.mx_GeneralSettingsTab_themeSection .mx_Field select {
display: block;
width: 88px;
height: 88px;
border-radius: 4px;
background-color: #ccc;
width: 100%;
}
.mx_GeneralSettingsTab_accountSection > .mx_EmailAddresses,
.mx_GeneralSettingsTab_accountSection > .mx_PhoneNumbers,
.mx_GeneralSettingsTab_languageInput {
margin-right: 100px; // Align with the other fields on the page
}
res/css/views/settings/tabs/_SettingsTab.scss
+41 -3
View File
@@ -1,3 +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_SettingsTab_heading {
font-size: 20px;
font-weight: 600;
@@ -10,8 +26,30 @@
font-family: $font-family-semibold;
color: $primary-fg-color;
margin-bottom: 10px;
}
.mx_SettingsTab_section {
margin-top: 10px;
}
.mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color;
font-size: 12px;
padding-bottom: 12px;
margin: 0;
display: block;
}
.mx_SettingsTab_section .mx_SettingsFlag {
margin-right: 100px;
height: 25px;
margin-bottom: 10px;
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
vertical-align: bottom;
display: inline-block;
font-size: 12px;
color: $primary-fg-color;
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
float: right;
}