Merge branch 'experimental' into bwindels/roomdirectory-makeover

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/structures/_ContextualMenu.scss

@@ -43,10 +43,6 @@ limitations under the License.
     right: 8px;
 }
 
-.mx_ContextualMenu_noChevron {
-    border-radius: unset !important;
-}
-
 .mx_ContextualMenu_chevron_right {
     position: absolute;
     right: -8px;

res/css/views/auth/_AuthPage.scss

@@ -16,10 +16,9 @@ limitations under the License.
 
 .mx_AuthPage {
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     display: flex;
     flex-direction: column;
-    overflow: auto;
     background-color: $authpage-bg-color;
 }
 

res/css/views/context_menus/_TopLeftMenu.scss

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_TopLeftMenu {
     min-width: 180px;
+    border-radius: 4px;
 
     .mx_TopLeftMenu_section:not(:last-child) {
         border-bottom: 1px solid $menu-border-color;
@@ -26,10 +27,32 @@ limitations under the License.
         margin: 5px 0;
         padding: 0;
 
+        li.mx_TopLeftMenu_icon_settings::after {
+            mask-image: url('$(res)/img/feather-icons/settings.svg');
+        }
+
+        li.mx_TopLeftMenu_icon_signout::after {
+            mask-image: url('$(res)/img/feather-icons/sign-out.svg');
+        }
+
+        li::after {
+            mask-repeat: no-repeat;
+            mask-position: 0 center;
+            mask-size: 16px;
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            content: "";
+            top: 5px;
+            left: 14px;
+            background-color: $primary-fg-color;
+        }
+
         li {
+            position: relative;
             cursor: pointer;
             white-space: nowrap;
-            padding: 5px 20px;
+            padding: 5px 20px 5px 43px;
         }
 
         li:hover {

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/elements/_ResizeHandle.scss

@@ -32,6 +32,11 @@ limitations under the License.
     cursor: row-resize;
 }
 
+.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
+    margin: 0 -10px 0 0;
+    padding: 0 10px 0 0;
+}
+
 .mx_ResizeHandle > div {
     background: $panel-divider-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
 }