diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 911d1013ce..a4d89fcfed 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 d10fe80471..142b69ca68 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 db68f4418f..64bd4ba682 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; @@ -164,9 +164,19 @@ limitations under the License. margin-bottom: 12px; } +li.mx_RoomView_myReadMarker_container { + height: 0px; + margin: 0px; + padding: 0px; + border: 0px; +} + hr.mx_RoomView_myReadMarker { border-top: solid 1px #76cfa6; - border-bottom: none; + border-bottom: solid 1px #76cfa6; + margin-top: 0px; + position: relative; + top: 5px; } .mx_RoomView_statusArea { 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 fac8bf91d5..aa253c1ade 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; @@ -103,6 +133,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; @@ -113,37 +144,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/structures/login/Login.css b/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css index 80e5171bd3..5ee580046f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css @@ -105,6 +105,15 @@ limitations under the License. color: #4a4a4a; } +.mx_Login_forgot { + font-size: 13px; + opacity: 0.8; +} + +.mx_Login_forgot:link { + color: #4a4a4a; +} + .mx_Login_loader { position: absolute; left: 50%; diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/MemberAvatar.css b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css similarity index 91% rename from src/skins/vector/css/matrix-react-sdk/views/avatars/MemberAvatar.css rename to src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css index ab0e2a878d..487461b5ce 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/avatars/MemberAvatar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css @@ -14,11 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MemberAvatar { +.mx_BaseAvatar { position: relative; } -.mx_MemberAvatar_initial { +.mx_BaseAvatar_initial { position: absolute; z-index: 1; color: #fff; @@ -27,7 +27,7 @@ limitations under the License. pointer-events: none; } -.mx_MemberAvatar_image { +.mx_BaseAvatar_image { border-radius: 20px; vertical-align: top; } 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 440fd4ad5e..6de9f57054 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 @@ -58,11 +58,6 @@ limitations under the License. position: relative; } -.mx_EventTile_content { - padding-right: 100px; - display: block; -} - .mx_EventTile_content { display: block; margin-right: 100px; @@ -94,7 +89,7 @@ limitations under the License. } .mx_EventTile_content .markdown-body .hljs { - display: inherit ! important; + display: inline ! important; } /* end of overrides */ @@ -135,8 +130,8 @@ limitations under the License. z-index: 1; position: relative; width: 90px; + height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */ margin-right: 10px; - margin-top: -6px; } .mx_EventTile .mx_MessageTimestamp { @@ -178,7 +173,7 @@ limitations under the License. height: 14px; } -.mx_EventTile_readAvatars .mx_MemberAvatar { +.mx_EventTile_readAvatars .mx_BaseAvatar { position: absolute; display: inline-block; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css index 8b15a7197f..d750a9fdc5 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css @@ -36,6 +36,19 @@ limitations under the License. border-radius: 48px; } +.mx_MemberInfo_profile { + margin-bottom: 16px; +} + +.mx_MemberInfo h3 { + text-transform: uppercase; + color: #3d3b39; + font-weight: 600; + font-size: 13px; + margin-top: 16px; + margin-bottom: 14px; +} + .mx_MemberInfo_profileField { font-color: #999999; font-size: 13px; @@ -44,21 +57,13 @@ limitations under the License. } .mx_MemberInfo_buttons { - margin-top: 18px; + margin-bottom: 16px; } .mx_MemberInfo_field { cursor: pointer; - width: 100px; - text-align: center; - font-size: 11px; - background-color: #888; - color: #fff; - font-weight: bold; - border-radius: 20px; - padding-left: 6px; - padding-right: 6px; - padding-top: 4px; - padding-bottom: 2px; - margin-bottom: 4px; + font-size: 13px; + color: #76cfa6; + margin-left: 8px; + line-height: 23px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberTile.css index 851e460cb6..f17438abcc 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberTile.css @@ -35,10 +35,10 @@ limitations under the License. .mx_MemberTile_power { position: absolute; - width: 44px; - height: 44px; - left: 10px; - top: -1px; + width: 16px; + height: 17px; + top: 0px; + right: 6px; } .mx_MemberTile_name { @@ -60,11 +60,6 @@ limitations under the License. text-overflow: ellipsis; } -.mx_MemberTile_presence { - font-size: 11px; - opacity: 0.5; -} - .mx_MemberTile_chevron { margin-top: 8px; margin-right: -4px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index d0b8e2bce1..6eca5415ba 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -33,7 +33,7 @@ limitations under the License. vertical-align: middle; } -.mx_MessageComposer .mx_MessageComposer_avatar .mx_MemberAvatar { +.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { display: block; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css new file mode 100644 index 0000000000..682c849cee --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css @@ -0,0 +1,20 @@ +/* +Copyright 2016 OpenMarket 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_PresenceLabel { + font-size: 11px; + opacity: 0.5; +} \ No newline at end of file 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 cf483e8e88..c405a903fd 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/RoomPreviewBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css new file mode 100644 index 0000000000..f68d70853a --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css @@ -0,0 +1,32 @@ +/* +Copyright 2015, 2016 OpenMarket 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_RoomPreviewBar { + text-align: center; +} + +.mx_RoomPreviewBar_preview_text { + color: #a4a4a4; +} + +.mx_RoomPreviewBar_join_text { + color: #ff0064; +} + +.mx_RoomPreviewBar_join_text a { + text-decoration: underline; + cursor: pointer; +} 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 2b2411287f..3e5f0a0293 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/css/matrix-react-sdk/views/rooms/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css index d86021c9aa..e93eccb96b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css @@ -24,6 +24,22 @@ limitations under the License. cursor: pointer; } +.mx_TabCompleteBar_command { + margin-right: 8px; + background-color: #76CFA6; + padding-left: 8px; + padding-right: 8px; + padding-top: 2px; + padding-bottom: 2px; + margin-bottom: 6px; + border-radius: 30px; +} + +.mx_TabCompleteBar_command .mx_TabCompleteBar_text { + opacity: 1.0; + color: #fff; +} + .mx_TabCompleteBar_item img { border-radius: 24px; margin-right: 8px; diff --git a/src/skins/vector/img/admin.svg b/src/skins/vector/img/admin.svg new file mode 100644 index 0000000000..7ea7459304 --- /dev/null +++ b/src/skins/vector/img/admin.svg @@ -0,0 +1,17 @@ + + + + icons_owner + Created with sketchtool. + + + + + + + + + + + + diff --git a/src/skins/vector/img/camera.svg b/src/skins/vector/img/camera.svg new file mode 100644 index 0000000000..6519496f78 --- /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 0000000000..e4c8cafc10 --- /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/mod.svg b/src/skins/vector/img/mod.svg new file mode 100644 index 0000000000..847baf98f9 --- /dev/null +++ b/src/skins/vector/img/mod.svg @@ -0,0 +1,16 @@ + + + + icons_admin + Created with sketchtool. + + + + + + + + + + + diff --git a/src/skins/vector/img/plus.svg b/src/skins/vector/img/plus.svg new file mode 100644 index 0000000000..e1d59ec6f4 --- /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 13fcd4c6b2..9585f686da 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 f81974729a..8fb479951e 100644 --- a/vector/index.html +++ b/vector/index.html @@ -48,5 +48,19 @@ +