diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 911d1013..a4d89fcf 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -50,7 +50,7 @@ module.exports = React.createClass({ return (
- +
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index b4cd2c0c..b1581d47 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/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; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css index 11d266b4..949ebf09 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/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 { @@ -96,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; @@ -105,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; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index 1b84abac..4e53903c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/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 12px to the height of the header when editing */ +.mx_RoomHeader_editing { + -webit-flex: 0 0 95px ! important; + flex: 0 0 95px ! 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; @@ -98,7 +105,7 @@ limitations under the License. .mx_RoomHeader_info { display: table-cell; - /* height: 48px; */ + width: 100%; vertical-align: middle; } @@ -122,6 +129,7 @@ limitations under the License. .mx_RoomHeader_name { vertical-align: middle; + width: 100%; height: 31px; overflow: hidden; color: #454545; @@ -131,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 { @@ -155,15 +164,16 @@ limitations under the License. pointer-events: none; } -.mx_RoomHeader_leftRow:hover { +.mx_RoomHeader_name, +.mx_RoomHeader_avatar { cursor: pointer; } -.mx_RoomHeader_leftRow:hover .mx_RoomHeader_name div:not(.mx_RoomHeader_editable) { +.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; } @@ -181,38 +191,17 @@ limitations under the License. } .mx_RoomHeader_editable { - border-bottom: 1px solid #c7c7c7; + border-bottom: 1px solid #c7c7c7 ! important; min-width: 70px; cursor: text; } .mx_RoomHeader_editable:focus { - border-bottom: 1px solid #76CFA6; + border-bottom: 1px solid #76CFA6 ! important; outline: none; box-shadow: none; } -/* -.mx_RoomHeader_nameEditing { - padding-left: 8px; - padding-right: 16px; - margin-top: -5px; -} - -.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_nameInput { - margin-top: 6px; -} -*/ - .mx_RoomHeader_topic { vertical-align: bottom; float: left; @@ -223,6 +212,7 @@ limitations under the License. margin-right: 16px; overflow: hidden; text-overflow: ellipsis; + border-bottom: 1px solid transparent; } .mx_RoomHeader_avatar { @@ -232,10 +222,20 @@ 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 > input { + display: none; +} + .mx_RoomHeader_button { display: table-cell; vertical-align: top; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css index 48845e28..f352e57f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css @@ -15,7 +15,6 @@ limitations under the License. */ .mx_RoomSettings { - padding-top: 12px; } .mx_RoomSettings_settings {