Merge pull request #653 from vector-im/matthew/roomsettings2

Finish off RoomSettings (part 2)

src/skins/vector/css/common.css

@@ -52,7 +52,7 @@ a:visited {
     color: #76cfa6;
 }
 
-input[type=text]:focus, textarea:focus, .mx_RoomSettings textarea:focus {
+input[type=text]:focus, textarea:focus {
     border: 1px solid #76CFA6;
     outline: none;
     box-shadow: none;

src/skins/vector/css/matrix-react-sdk/structures/RoomView.css

@@ -44,7 +44,7 @@ limitations under the License.
     min-width: 0px;
     max-width: 960px;
     width: 100%;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
 
     pointer-events: none;

src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css

@@ -18,7 +18,38 @@ limitations under the License.
     width: 960px;
     margin-left: auto;
     margin-right: auto;
-    overflow-y: auto;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: column;
+    -webkit-flex-direction: column;    
+}
+
+.mx_UserSettings .mx_RoomHeader {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+
+    -webkit-flex: 0 0 83px;
+    flex: 0 0 83px;
+}
+
+.mx_UserSettings_body {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 1 1 0;
+    flex: 1 1 0;
+
+    overflow-y: auto;    
 }
 
 .mx_UserSettings_spinner {
@@ -33,7 +64,6 @@ limitations under the License.
     display: inline;
     vertical-align: middle;
     border: 0px;
-    height: 36px;
     border-radius: 36px;
     font-weight: 400;
     font-size: 16px;
@@ -97,6 +127,7 @@ limitations under the License.
 .mx_UserSettings_profileInputCell input,
 .mx_UserSettings_profileInputCell .mx_EditableText
 {
+    display: inline-block;
     border: 0px;
     border-bottom: 1px solid rgba(151, 151, 151, 0.5);
     padding: 0px;
@@ -106,6 +137,10 @@ limitations under the License.
     font-size: 16px;
 }
 
+.mx_UserSettings_profileInputCell .mx_EditableText_placeholder {
+    color: rgba(74, 74, 74, 0.5);    
+}
+
 .mx_UserSettings_notifInputCell {
     display: table-cell;
     padding-bottom: 21px;
@@ -121,37 +156,27 @@ limitations under the License.
 }
 
 .mx_UserSettings_logout {
-    margin-right: 24px;
-    margin-bottom: 24px;
-    margin-left: 63px;
+    float: right;
+    margin-right: 32px;
+    margin-left: 32px;
 }
 
 .mx_UserSettings_avatarPicker {
-    width: 320px;
+    margin-left: 32px;
+    margin-right: 32px;
     float: right;
-}
-
-.mx_UserSettings_avatarPicker_edit {
-    position: relative;
-    left: 50%;
-    display: inline-block;
-    margin-top: 10px;
-}
-
-.mx_UserSettings_avatarPicker_edit > input{
-    display: none;
-}
-
-.mx_UserSettings_avatarPicker_edit > label {
     cursor: pointer;
 }
 
-.mx_UserSettings_avatarPicker_img {
-    margin: 0 auto;
-    width: 75%;
+.mx_UserSettings_avatarPicker .mx_RoomAvatar {
+    border-radius: 40px;
 }
 
-.mx_UserSettings_avatarPicker_img > img {
-    display: block;
-    margin: 0 auto;
+.mx_UserSettings_avatarPicker_edit {
+    text-align: center;
+    margin-top: 10px;
+}
+
+.mx_UserSettings_avatarPicker_edit > input {
+    display: none;
 }

src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css

@@ -89,7 +89,7 @@ limitations under the License.
 }
 
 .mx_EventTile_content .markdown-body .hljs {
-    display: inherit ! important;
+    display: inline ! important;
 }
 
 /* end of overrides */

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css

@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomHeader {
+/* add 20px to the height of the header when editing */
+.mx_RoomHeader_editing {
+    -webit-flex: 0 0 103px ! important;
+    flex: 0 0 103px ! important;
 }
 
 .mx_RoomHeader_wrapper {
@@ -33,6 +36,10 @@ limitations under the License.
     display: flex;
 }
 
+.mx_RoomHeader_editing .mx_RoomHeader_wrapper {
+    border-bottom: 1px solid transparent;
+}
+
 .mx_RoomHeader_leftRow {
     margin-left: -2px;
 
@@ -47,12 +54,13 @@ limitations under the License.
 }
 
 .mx_RoomHeader_textButton {
-    height: 48px;
+    height: 36px;
     background-color: #76cfa6;
-    border-radius: 48px;
+    border-radius: 36px;
     margin-right: 8px;
     color: #fff;
-    line-height: 48px;
+    line-height: 34px;
+    margin-top: -2px;
     text-align: center;
 
     -webkit-box-ordinal-group: 2;
@@ -69,7 +77,20 @@ limitations under the License.
 */
     padding-left: 12px;
     padding-right: 12px;
-    }
+}
+
+.mx_RoomHeader_cancelButton {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    cursor: pointer;
+
+    padding-left: 12px;
+    padding-right: 12px;
+}
 
 .mx_RoomHeader_rightRow {
     margin-top: 4px;
@@ -84,7 +105,7 @@ limitations under the License.
 
 .mx_RoomHeader_info {
     display: table-cell;
-    /* height: 48px; */
+    width: 100%;
     vertical-align: middle;
 }
 
@@ -107,9 +128,9 @@ limitations under the License.
 }
 
 .mx_RoomHeader_name {
-    cursor: pointer;
     vertical-align: middle;
-    height: 30px;
+    width: 100%;
+    height: 31px;
     overflow: hidden;
     color: #454545;
     font-weight: bold;
@@ -118,6 +139,7 @@ limitations under the License.
     padding-right: 16px;
     /* why isn't text-overflow working? */
     text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;
 }
 
 .mx_RoomHeader_nametext {
@@ -142,11 +164,18 @@ limitations under the License.
     pointer-events: none;
 }
 
-.mx_RoomHeader_leftRow:hover .mx_RoomHeader_name {
+.mx_RoomHeader_name,
+.mx_RoomHeader_avatar,
+.mx_RoomHeader_avatarPicker,
+.mx_RoomHeader_avatarPicker_edit {
+    cursor: pointer;
+}
+
+.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
     color: #76cfa6;
 }
 
-.mx_RoomHeader_leftRow:hover .mx_RoomHeader_settingsButton {
+.mx_RoomHeader_name:hover .mx_RoomHeader_settingsButton {
     visibility: visible;
 }
 
@@ -159,24 +188,20 @@ limitations under the License.
     visibility: visible;
 }
 
-
-.mx_RoomHeader_nameEditing {
-    padding-left: 8px;
-    padding-right: 16px;
-    margin-top: -5px;
+.mx_RoomHeader_placeholder {
+    color: #a2a2a2 ! important;
 }
 
-.mx_RoomHeader_name input, .mx_RoomHeader_nameInput {
-    border-radius: 3px;
-    width: 260px;
-    border: 1px solid #c7c7c7;
-    font-weight: 300;
-    font-size: 13px;
-    padding: 9px;
+.mx_RoomHeader_editable {
+    border-bottom: 1px solid #c7c7c7 ! important;
+    min-width: 70px;
+    cursor: text;
 }
 
-.mx_RoomHeader_nameInput {
-    margin-top: 6px;
+.mx_RoomHeader_editable:focus {
+    border-bottom: 1px solid #76CFA6 ! important;
+    outline: none;
+    box-shadow: none;
 }
 
 .mx_RoomHeader_topic {
@@ -185,10 +210,11 @@ limitations under the License.
     max-height: 42px;
     color: #454545;
     font-weight: 300;  
-    padding-left: 19px;
-    padding-right: 16px;
+    margin-left: 19px;
+    margin-right: 16px;
     overflow: hidden;
     text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;    
 }
 
 .mx_RoomHeader_avatar {
@@ -198,10 +224,24 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_RoomHeader_avatar img {
+.mx_RoomHeader_avatar .mx_RoomAvatar {
 	border-radius: 24px;
 }
 
+.mx_RoomHeader_avatarPicker_edit {
+    position: absolute;
+    margin-left: 16px;
+    margin-top: 4px;
+}
+
+.mx_RoomHeader_avatarPicker_edit > label {
+    cursor: pointer;
+}
+
+.mx_RoomHeader_avatarPicker_edit > input {
+    display: none;
+}
+
 .mx_RoomHeader_button {
     display: table-cell;
     vertical-align: top;

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css

@@ -15,23 +15,27 @@ limitations under the License.
 */
 
 .mx_RoomSettings {
-    max-height: 250px;
-    padding-top: 12px;
+    margin-left: 65px;
+    margin-bottom: 20px;
 }
 
-.mx_RoomSettings_settings {
+.mx_RoomSettings_powerLevels {
     display: table;
-    margin: 5px 0;
 }
 
-.mx_RoomSettings_settings > div {
+.mx_RoomSettings_powerLevel {
     display: table-row;
 }
 
-.mx_RoomSettings_settings > div > * {
+.mx_RoomSettings_powerLevelKey,
+.mx_RoomSettings_powerLevel .mx_PowerSelector {
     display: table-cell;
+    padding-bottom: 5px;
+}
 
-    margin: 0 10px;
+.mx_RoomSettings_powerLevelKey {
+    text-align: right;
+    padding-right: 0.3em;
 }
 
 .mx_RoomSettings h3 {
@@ -43,6 +47,7 @@ limitations under the License.
     margin-bottom: 10px;
 }
 
+/*
 .mx_RoomSettings input,
 .mx_RoomSettings textarea  {
     border-radius: 3px;
@@ -52,6 +57,11 @@ limitations under the License.
     padding: 9px;
     margin-top: 6px;
 }
+*/
+
+.mx_RoomSettings .mx_RoomSettings_tags input[type="checkbox"] {
+    margin-left: 1em;
+}
 
 .mx_RoomSettings .mx_RoomSettings_roomColor {
     display: inline-block;
@@ -75,18 +85,61 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_RoomSettings .mx_RoomSettings_aliasesTable {
+    margin-top: 12px;
+    margin-bottom: 12px;
+    margin-left: 56px;
+    display: table;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasesRow {
+    display: table-row;
+}
+
+.mx_RoomSettings .mx_RoomSettings_alias {
+    display: table-cell;
+    margin-bottom: 20px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_addAlias,
+.mx_RoomSettings .mx_RoomSettings_deleteAlias {
+    display: table-cell;
+    padding-left: 0.5em;
+    cursor: pointer;
+}
+
+.mx_RoomSettings_editable {
+    border: 0px;
+    border-bottom: 1px solid #c7c7c7;
+    padding: 0px;
+    min-width: 240px;
+}
+
+.mx_RoomSettings_editable:focus {
+    border-bottom: 1px solid #76CFA6;
+    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: #a2a2a2;
+}
+
 .mx_RoomSettings .mx_RoomAvatar {
     border-radius: 120px;
 }
 
-.mx_RoomSettings input[type="file"] {
-    border: none;
-}
-
-.mx_RoomSettings_description {
-    width: 330px;
-}
-
 .mx_RoomSettings_buttons {
     text-align: right;
     margin-bottom: 16px;