Merge pull request #2516 from matrix-org/travis/rsettings/tab/general

Implement the "general" tab of new room settings

res/css/_components.scss

@@ -139,7 +139,8 @@
 @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/_GeneralRoomSettingsTab.scss";
+@import "./views/settings/tabs/_GeneralUserSettingsTab.scss";
 @import "./views/settings/tabs/_HelpSettingsTab.scss";
 @import "./views/settings/tabs/_PreferencesSettingsTab.scss";
 @import "./views/settings/tabs/_SecuritySettingsTab.scss";

res/css/views/elements/_Field.scss

@@ -22,7 +22,8 @@ limitations under the License.
 }
 
 .mx_Field input,
-.mx_Field select {
+.mx_Field select,
+.mx_Field textarea {
     font-weight: normal;
     font-family: $font-family;
     border-radius: 4px;
@@ -32,17 +33,20 @@ limitations under the License.
 }
 
 .mx_Field input:focus,
-.mx_Field select:focus {
+.mx_Field select:focus,
+.mx_Field textarea:focus {
     outline: 0;
     border-color: $input-focused-border-color;
 }
 
-.mx_Field input::placeholder {
+.mx_Field input::placeholder,
+.mx_Field textarea::placeholder {
     transition: color 0.25s ease-in 0s;
     color: transparent;
 }
 
-.mx_Field input:placeholder-shown:focus::placeholder {
+.mx_Field input:placeholder-shown:focus::placeholder,
+.mx_Field textarea:placeholder-shown:focus::placeholder {
     transition: color 0.25s ease-in 0.1s;
     color: $greyed-fg-color;
 }
@@ -65,6 +69,8 @@ limitations under the License.
 
 .mx_Field input:focus + label,
 .mx_Field input:not(:placeholder-shown) + label,
+.mx_Field textarea:focus + label,
+.mx_Field textarea:not(:placeholder-shown) + 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,
@@ -77,7 +83,8 @@ limitations under the License.
 }
 
 .mx_Field input:focus + label,
-.mx_Field select:focus + label {
+.mx_Field select:focus + label,
+.mx_Field textarea:focus + label {
     color: $input-focused-border-color;
 }
 

res/css/views/settings/_ProfileSettings.scss

@@ -22,10 +22,19 @@ limitations under the License.
   flex-grow: 1;
 }
 
-.mx_ProfileSettings_controls .mx_Field #profileDisplayName {
+.mx_ProfileSettings_controls .mx_Field #profileDisplayName,
+.mx_ProfileSettings_controls .mx_Field #profileTopic {
   width: calc(100% - 20px); // subtract 10px padding on left and right
 }
 
+.mx_ProfileSettings_controls .mx_Field #profileTopic {
+  height: 4em;
+}
+
+.mx_ProfileSettings_controls .mx_Field:first-child {
+  margin-top: 0;
+}
+
 .mx_ProfileSettings_avatar {
   width: 88px;
   height: 88px;
@@ -41,6 +50,10 @@ limitations under the License.
   border-radius: 4px;
 }
 
+.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarOverlay_disabled {
+  cursor: default;
+}
+
 .mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder {
   background-color: $settings-profile-placeholder-bg-color;
 }
@@ -57,7 +70,7 @@ limitations under the License.
   font-size: 10px;
 }
 
-.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay {
+.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) {
   display: inline-block;
   opacity: 0.5 !important;
   color: $settings-profile-overlay-fg-color !important;
@@ -77,6 +90,11 @@ limitations under the License.
   margin-bottom: 8px;
 }
 
+.mx_ProfileSettings_noAvatarText {
+  display: block;
+  margin: 34px auto auto;
+}
+
 .mx_ProfileSettings_avatarOverlayImgContainer {
   position: relative;
   width: 14px;

res/css/views/settings/tabs/_GeneralRoomSettingsTab.scss

@@ -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_GeneralRoomSettingsTab_profileSection {
+  margin-top: 10px;
+}
+
+.mx_GeneralRoomSettingsTab .mx_AliasSettings .mx_Field select {
+  width: 100%;
+}

res/css/views/settings/tabs/_GeneralUserSettingsTab.scss

@@ -14,33 +14,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GeneralSettingsTab_changePassword,
-.mx_GeneralSettingsTab_themeSection {
+.mx_GeneralUserSettingsTab_changePassword,
+.mx_GeneralUserSettingsTab_themeSection {
   display: block;
 }
 
-.mx_GeneralSettingsTab_changePassword .mx_Field,
-.mx_GeneralSettingsTab_themeSection .mx_Field {
+.mx_GeneralUserSettingsTab_changePassword .mx_Field,
+.mx_GeneralUserSettingsTab_themeSection .mx_Field {
   display: block;
   margin-right: 100px; // Align with the other fields on the page
 }
 
-.mx_GeneralSettingsTab_changePassword .mx_Field input {
+.mx_GeneralUserSettingsTab_changePassword .mx_Field input {
   display: block;
   width: calc(100% - 20px); // subtract 10px padding on left and right
 }
 
-.mx_GeneralSettingsTab_changePassword .mx_Field:first-child {
+.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
   margin-top: 0;
 }
 
-.mx_GeneralSettingsTab_themeSection .mx_Field select {
+.mx_GeneralUserSettingsTab_themeSection .mx_Field select {
   display: block;
   width: 100%;
 }
 
-.mx_GeneralSettingsTab_accountSection > .mx_EmailAddresses,
-.mx_GeneralSettingsTab_accountSection > .mx_PhoneNumbers,
-.mx_GeneralSettingsTab_languageInput {
+.mx_GeneralUserSettingsTab_accountSection > .mx_EmailAddresses,
+.mx_GeneralUserSettingsTab_accountSection > .mx_PhoneNumbers,
+.mx_GeneralUserSettingsTab_languageInput {
   margin-right: 100px; // Align with the other fields on the page
 }