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/common.css b/src/skins/vector/css/common.css index 50ffe7bb..fbe92874 100644 --- a/src/skins/vector/css/common.css +++ b/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; 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 fae02852..64bd4ba6 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 a0e9052c..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 { @@ -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; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index 20b9dd47..6de9f570 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/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 */ 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 cf483e8e..c405a903 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 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; 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 2b241128..3e5f0a02 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,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; diff --git a/src/skins/vector/img/camera.svg b/src/skins/vector/img/camera.svg new file mode 100644 index 00000000..6519496f --- /dev/null +++ b/src/skins/vector/img/camera.svg @@ -0,0 +1,12 @@ + + + + icon_camera + Created with Sketch. + + + + + + + diff --git a/src/skins/vector/img/cancel-small.svg b/src/skins/vector/img/cancel-small.svg new file mode 100644 index 00000000..e4c8cafc --- /dev/null +++ b/src/skins/vector/img/cancel-small.svg @@ -0,0 +1,13 @@ + + + + Line + Line + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/plus.svg b/src/skins/vector/img/plus.svg new file mode 100644 index 00000000..e1d59ec6 --- /dev/null +++ b/src/skins/vector/img/plus.svg @@ -0,0 +1,13 @@ + + + + Line + Line + Created with Sketch. + + + + + + + + diff --git a/src/vector/index.js b/src/vector/index.js index 13fcd4c6..9585f686 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -117,6 +117,7 @@ var onNewScreen = function(screen) { var hash = '#/' + screen; lastLocationHashSet = hash; window.location.hash = hash; + if (ga) ga('send', 'pageview', window.location.pathname + window.location.search + window.location.hash); } } diff --git a/vector/index.html b/vector/index.html index f8197472..8fb47995 100644 --- a/vector/index.html +++ b/vector/index.html @@ -48,5 +48,19 @@ +