diff --git a/src/component-index.js b/src/component-index.js index b25b5ef9..b3baf22a 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -19,6 +19,9 @@ limitations under the License. * You can edit it you like, but your changes will be overwritten, * so you'd just be trying to swim upstream like a salmon. * You are not a salmon. + * + * To update it, run: + * ./reskindex.js -h header */ module.exports.components = require('matrix-react-sdk/lib/component-index').components; @@ -29,6 +32,7 @@ module.exports.components['structures.LeftPanel'] = require('./components/struct module.exports.components['structures.RightPanel'] = require('./components/structures/RightPanel'); module.exports.components['structures.RoomDirectory'] = require('./components/structures/RoomDirectory'); module.exports.components['structures.RoomSubList'] = require('./components/structures/RoomSubList'); +module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox'); module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource'); module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView'); module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner'); diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index a4d89fcf..ae49a347 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -47,12 +47,19 @@ module.exports = React.createClass({ render: function() { var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile'); + var TintableSvg = sdk.getComponent('elements.TintableSvg'); return (
- - - +
+ +
+
+ +
+
+ +
); diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index 5c27abc5..58347a06 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -31,6 +31,7 @@ var LeftPanel = React.createClass({ getInitialState: function() { return { showCallElement: null, + searchFilter: '', }; }, @@ -84,9 +85,14 @@ var LeftPanel = React.createClass({ } }, + onSearch: function(term) { + this.setState({ searchFilter: term }); + }, + render: function() { var RoomList = sdk.getComponent('rooms.RoomList'); var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu'); + var SearchBox = sdk.getComponent('structures.SearchBox'); var collapseButton; var classes = "mx_LeftPanel mx_fadable"; @@ -110,11 +116,13 @@ var LeftPanel = React.createClass({ return ( diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index eab75fe3..431bdba5 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -155,7 +155,10 @@ module.exports = React.createClass({ panel = } } + } + if (!panel) { + panel =
; } var classes = "mx_RightPanel mx_fadable"; @@ -169,6 +172,8 @@ module.exports = React.createClass({ { buttonGroup } { panel } +
+
); } diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index f3614092..a4a5670d 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -43,6 +43,14 @@ module.exports = React.createClass({ } }, + componentWillMount: function() { + // dis.dispatch({ + // action: 'ui_opacity', + // sideOpacity: 0.3, + // middleOpacity: 0.3, + // }); + }, + componentDidMount: function() { var self = this; MatrixClientPeg.get().publicRooms(function (err, data) { @@ -65,6 +73,14 @@ module.exports = React.createClass({ }); }, + componentWillUnmount: function() { + // dis.dispatch({ + // action: 'ui_opacity', + // sideOpacity: 1.0, + // middleOpacity: 1.0, + // }); + }, + showRoom: function(roomId) { // extract the metadata from the publicRooms structure to pass // as out-of-band data to view_room, because we get information diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 0b96ed18..497acdec 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -65,16 +65,12 @@ var RoomSubList = React.createClass({ selectedRoom: React.PropTypes.string.isRequired, startAsHidden: React.PropTypes.bool, showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded - - // TODO: Fix the name of this. This is too easily confused with the - // "hidden" state which is the expanded (or not) view of the list of rooms. - // What this prop *really* does is control whether the room name is displayed - // so it should be named as such. - collapsed: React.PropTypes.bool.isRequired, + collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed? onHeaderClick: React.PropTypes.func, alwaysShowHeader: React.PropTypes.bool, incomingCall: React.PropTypes.object, - onShowMoreRooms: React.PropTypes.func + onShowMoreRooms: React.PropTypes.func, + searchFilter: React.PropTypes.string, }, getInitialState: function() { @@ -93,13 +89,20 @@ var RoomSubList = React.createClass({ }, componentWillMount: function() { - this.sortList(this.props.list, this.props.order); + this.sortList(this.applySearchFilter(this.props.list, this.props.searchFilter), this.props.order); }, componentWillReceiveProps: function(newProps) { // order the room list appropriately before we re-render //if (debug) console.log("received new props, list = " + newProps.list); - this.sortList(newProps.list, newProps.order); + this.sortList(this.applySearchFilter(newProps.list, newProps.searchFilter), newProps.order); + }, + + applySearchFilter: function(list, filter) { + if (filter === "") return list; + return list.filter((room) => { + return room.name && room.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0 + }); }, onClick: function(ev) { @@ -278,7 +281,7 @@ var RoomSubList = React.createClass({ return (

{ this.props.collapsed ? '' : this.props.label } -

diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js new file mode 100644 index 00000000..8c98859e --- /dev/null +++ b/src/components/structures/SearchBox.js @@ -0,0 +1,98 @@ +/* +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. +*/ + +'use strict'; + +var React = require('react'); +var sdk = require('matrix-react-sdk') +var dis = require('matrix-react-sdk/lib/dispatcher'); +var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc'); + +module.exports = React.createClass({ + displayName: 'SearchBox', + + propTypes: { + collapsed: React.PropTypes.bool, + onSearch: React.PropTypes.func, + }, + + onChange: new rate_limited_func( + function() { + if (this.refs.search) { + this.props.onSearch(this.refs.search.value); + } + }, + 100 + ), + + onToggleCollapse: function(show) { + if (show) { + dis.dispatch({ + action: 'show_left_panel', + }); + } + else { + dis.dispatch({ + action: 'hide_left_panel', + }); + } + }, + + render: function() { + var TintableSvg = sdk.getComponent('elements.TintableSvg'); + + var toggleCollapse; + if (this.props.collapsed) { + toggleCollapse = +
+ +
+ } + else { + toggleCollapse = +
+ +
+ } + + var searchControls; + if (!this.props.collapsed) { + searchControls = [ + , + + ]; + } + + var self = this; + return ( +
+ { searchControls } + { toggleCollapse } +
+ ); + } +}); diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css index 0f6955ce..4d91755c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css @@ -1,7 +1,23 @@ +/* +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_RoomStatusBar { - margin-top: 5px; + margin-top: 15px; margin-left: 65px; - min-height: 24px; + min-height: 34px; } /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */ @@ -17,8 +33,9 @@ .mx_RoomStatusBar_placeholderIndicator span { color: #4a4a4a; opacity: 0.5; -/* position: relative; + top: -4px; +/* animation-duration: 1s; animation-name: bounce; animation-direction: alternate; @@ -99,7 +116,7 @@ .mx_RoomStatusBar_tabCompleteWrapper { display: flex; display: -webkit-flex; - height: 24px; + height: 26px; } .mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar { 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 4c014461..c8772b49 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -36,8 +36,8 @@ limitations under the License. -webkit-order: 1; order: 1; - -webkit-flex: 0 0 83px; - flex: 0 0 83px; + -webkit-flex: 0 0 70px; + flex: 0 0 70px; } .mx_RoomView_fileDropTarget { @@ -64,7 +64,7 @@ limitations under the License. border: 2px #e1dddd solid; border-bottom: none; position: absolute; - top: 83px; + top: 70px; bottom: 0px; z-index: 3000; } @@ -89,7 +89,7 @@ limitations under the License. margin: auto; overflow: auto; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #e5e5e5; -webkit-flex: 0 0 auto; flex: 0 0 auto; @@ -158,7 +158,7 @@ limitations under the License. margin-bottom: 8px; margin-left: 63px; padding-bottom: 6px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; } .mx_RoomView_invitePrompt { @@ -207,11 +207,12 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusAreaBox { max-width: 960px; margin: auto; - min-height: 36px; + min-height: 60px; } .mx_RoomView_statusAreaBox_line { - border-top: 1px solid #eee; + margin-left: 65px; + border-top: 1px solid #e5e5e5; height: 1px; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css new file mode 100644 index 00000000..ecd8c429 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -0,0 +1,62 @@ +/* +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_SearchBox { + height: 24px; + margin-left: 16px; + margin-right: 20px; + padding-top: 26px; + padding-bottom: 24px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + + display: flex; + display: -webkit-flex; +} + +.mx_SearchBox_searchButton { + margin-right: 10px; +} + +.mx_SearchBox_search { + flex: 1; + -webkit-flex: 1; + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-size: 12px; + margin-top: -2px; + height: 24px; + border: 0px ! important; + /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */ + background-color: transparent; + border: 0px; +} + +.mx_SearchBox_minimise, +.mx_SearchBox_maximise { + margin-top: 3px; + cursor: pointer; +} + +.mx_SearchBox_minimise { + margin-left: 10px; +} + +.mx_SearchBox_maximise { + margin-left: 9px; +} + +.mx_SearchBox object { + pointer-events: none; +} \ No newline at end of file diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css b/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css index 5a22e91c..b489e132 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css @@ -1,16 +1,33 @@ +/* +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_UploadBar { position: relative; } .mx_UploadBar_uploadProgressOuter { - height: 4px; + height: 5px; margin-left: 63px; margin-top: -1px; + padding-bottom: 5px; } .mx_UploadBar_uploadProgressInner { background-color: #76cfa6; - height: 4px; + height: 5px; } .mx_UploadBar_uploadFilename { @@ -22,7 +39,7 @@ .mx_UploadBar_uploadIcon { float: left; - margin-top: 1px; + margin-top: 5px; margin-left: 14px; } 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 71a9b299..6ef69f1d 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -36,8 +36,8 @@ limitations under the License. -webkit-order: 1; order: 1; - -webkit-flex: 0 0 83px; - flex: 0 0 83px; + -webkit-flex: 0 0 70px; + flex: 0 0 70px; } .mx_UserSettings_body { @@ -50,9 +50,25 @@ limitations under the License. -webkit-flex: 1 1 0; flex: 1 1 0; + margin-top: -20px; overflow-y: auto; } +.mx_UserSettings h3 { + clear: both; + margin-left: 63px; + text-transform: uppercase; + color: #3d3b39; + font-weight: 600; + font-size: 13px; + margin-top: 26px; + margin-bottom: 10px; +} + +.mx_UserSettings_section h3 { + margin-left: 0px; +} + .mx_UserSettings_spinner { display: inline-block; vertical-align: middle; @@ -78,22 +94,6 @@ limitations under the License. cursor: pointer; } -.mx_UserSettings h2 { - clear: both; - margin-top: 32px; - margin-bottom: 8px; - margin-left: 63px; - padding-bottom: 6px; - border-bottom: 1px solid #eee; -} - -.mx_UserSettings h3 { - font-weight: bold; - font-size: 15px; - margin-top: 4px; - margin-bottom: 4px; -} - .mx_UserSettings_section { margin-left: 63px; margin-top: 28px; 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 e6a340df..30de9324 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 @@ -15,6 +15,7 @@ limitations under the License. */ .mx_MemberInfo { + margin-top: 20px; height: 100%; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css index 283addcb..88f7fafe 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css @@ -17,6 +17,8 @@ limitations under the License. .mx_MemberList { height: 100%; + margin-top: 12px; + -webkit-flex: 1; flex: 1; @@ -77,17 +79,6 @@ limitations under the License. } */ -.mx_MemberList_bottom { - order: 4; - flex: 0 0 72px; - -webkit-flex: 0 0 72px; -} - -.mx_MemberList_bottomRule { - border-top: 2px solid #e1dddd; - margin-right: 15px; -} - .mx_MemberList_invited h2 { text-transform: uppercase; color: #3d3b39; 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 9ed5f1cb..daf15001 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 @@ -18,7 +18,7 @@ limitations under the License. max-width: 960px; vertical-align: middle; margin: auto; - border-top: 2px solid #e1dddd; + border-top: 1px solid #e5e5e5; } .mx_MessageComposer_row { @@ -45,7 +45,7 @@ limitations under the License. display: table-cell; width: 100%; vertical-align: middle; - height: 70px; + height: 60px; text-align: center; font-style: italic; color: #888; @@ -55,7 +55,7 @@ limitations under the License. display: table-cell; width: 100%; vertical-align: middle; - height: 70px; + height: 60px; } .mx_MessageComposer_input textarea { 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 eeb45b4d..0229500c 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 @@ -23,8 +23,7 @@ limitations under the License. .mx_RoomHeader_wrapper { max-width: 960px; margin: auto; - height: 83px; - border-bottom: 1px solid #eeeeee; + height: 70px; -webkit-align-items: center; align-items: center; @@ -36,10 +35,6 @@ limitations under the License. display: flex; } -.mx_RoomHeader_editing .mx_RoomHeader_wrapper { - border-bottom: 1px solid transparent; -} - .mx_RoomHeader_leftRow { margin-left: -2px; @@ -123,7 +118,7 @@ limitations under the License. } .mx_RoomHeader_simpleHeader { - line-height: 83px; + line-height: 70px; color: #454545; font-size: 22px; font-weight: bold; @@ -215,8 +210,9 @@ limitations under the License. vertical-align: bottom; float: left; max-height: 42px; - color: #454545; + color: #A2A2A2; font-weight: 300; + font-size: 13px; margin-left: 19px; margin-right: 16px; overflow: hidden; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css index 1a4ec869..a2241853 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css @@ -15,7 +15,7 @@ limitations under the License. */ .mx_RoomList { - padding-top: 24px; + padding-top: 8px; padding-bottom: 12px; min-height: 400px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index d62c5d17..e0faa87c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -23,10 +23,10 @@ limitations under the License. .mx_RoomTile_avatar { display: table-cell; - padding-right: 8px; + padding-right: 11px; padding-top: 6px; padding-bottom: 6px; - padding-left: 18px; + padding-left: 20px; width: 24px; height: 24px; position: relative; @@ -38,8 +38,8 @@ limitations under the License. width: 100%; vertical-align: middle; overflow: hidden; - text-overflow: ellipsis; - padding-right: 16px; + word-break: break-word; + padding-right: 19px; color: rgba(69, 69, 69, 0.8); } @@ -98,11 +98,13 @@ limitations under the License. .mx_RoomTile_badge { background-color: #ff0064; - width: 4px; + width: 8px; + height: 8px; position: absolute; - left: 0px; - top: 5px; - bottom: 5px; + left: 7px; + top: 50%; + margin-top: -4px; + border-radius: 4px; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { @@ -119,18 +121,35 @@ limitations under the License. } .mx_RoomTile_selected .mx_RoomTile_name { - color: #76cfa6 ! important; } .mx_RoomTile_highlight .mx_RoomTile_name { color: #ff0064 ! important; } +.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_avatar { + padding-right: 7px; +} + +.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name span { + display: inline-block; + position: relative; + width: 100%; + padding: 4px; + padding-right: 0px; + margin-top: -4px; + margin-bottom: -4px; + border-radius: 2px; + background-color: rgba(118,207,166,0.2); +} + +/* .mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name { background: url('img/selected.png'); background-repeat: no-repeat; background-position: right center; } +*/ .mx_RoomTile_arrow { position: absolute; 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 e0d0965e..f7f4a0bd 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 @@ -21,6 +21,7 @@ limitations under the License. .mx_TabCompleteBar_item { display: inline-block; margin-right: 15px; + margin-bottom: 2px; cursor: pointer; } @@ -37,6 +38,7 @@ limitations under the License. .mx_TabCompleteBar_command .mx_TabCompleteBar_text { opacity: 1.0; + vertical-align: initial; color: #fff; } @@ -47,5 +49,6 @@ limitations under the License. .mx_TabCompleteBar_text { color: #4a4a4a; + vertical-align: middle; opacity: 0.5; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css index ef639e2e..77184d42 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css @@ -19,7 +19,7 @@ limitations under the License. max-width: 960px; padding-top: 5px; padding-bottom: 5px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; } .mx_TopUnreadMessagesBar_scrollUp { diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 4ee44426..610f1526 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -58,23 +58,41 @@ limitations under the License. -webkit-order: 3; order: 3; - -webkit-flex: 0 0 140px; - flex: 0 0 140px; - - background-color: rgba(118,207,166,0.2); + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-left: 20px; + margin-right: 20px; + -webkit-flex: 0 0 60px; + flex: 0 0 60px; } -.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile { - color: #454545; -} - -.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options { - margin-top: 15px; +.mx_LeftPanel .mx_BottomLeftMenu_options { + margin-top: 18px; width: 100%; } -.mx_LeftPanel .mx_BottomLeftMenu img { - border-radius: 0px; - background-color: transparent; - vertical-align: middle; -} \ No newline at end of file +.mx_BottomLeftMenu_options object { + pointer-events: none; +} + +.mx_LeftPanel .mx_BottomLeftMenu_createRoom, +.mx_LeftPanel .mx_BottomLeftMenu_directory, +.mx_LeftPanel .mx_BottomLeftMenu_settings { + display: inline-block; + cursor: pointer; +} + +.collapsed .mx_BottomLeftMenu_createRoom, +.collapsed .mx_BottomLeftMenu_directory, +.collapsed .mx_BottomLeftMenu_settings { + margin-left: 0px ! important; + padding-top: 3px ! important; + padding-bottom: 3px ! important; +} + +.mx_LeftPanel .mx_BottomLeftMenu_directory { + margin-left: 10px; +} + +.mx_LeftPanel .mx_BottomLeftMenu_settings { + float: right; +} diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 7cad2649..7257d8b4 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -33,14 +33,17 @@ limitations under the License. -webkit-order: 1; order: 1; - -webkit-flex: 0 0 83px; - flex: 0 0 83px; + border-bottom: 1px solid #e5e5e5; + margin-right: 20px; + + -webkit-flex: 0 0 70px; + flex: 0 0 70px; } /** Fixme - factor this out with the main header **/ .mx_RightPanel_headerButtonGroup { - margin-top: 32px; + margin-top: 25px; float: left; background-color: #fff; margin-left: -4px; @@ -83,10 +86,27 @@ limitations under the License. } .mx_RightPanel .mx_MemberList, -.mx_RightPanel .mx_MemberInfo { +.mx_RightPanel .mx_MemberInfo, +.mx_RightPanel_blank { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; + flex: 1; + -webkit-flex: 1; +} + +.mx_RightPanel_footer { + -webkit-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -ms-flex-order: 3; + -webkit-order: 3; + order: 3; + + border-top: 1px solid #e5e5e5; + margin-right: 20px; + + -webkit-flex: 0 0 60px; + flex: 0 0 60px; } diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index d385397b..95248db0 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -32,10 +32,10 @@ limitations under the License. } .mx_RoomSubList_chevron { - padding-left: 5px; + padding-left: 4px; pointer-events: none; } .collapsed .mx_RoomSubList_chevron { - padding-left: 13px; + padding-left: 12px; } diff --git a/src/skins/vector/img/icons-create-room.svg b/src/skins/vector/img/icons-create-room.svg new file mode 100644 index 00000000..6ed94b4b --- /dev/null +++ b/src/skins/vector/img/icons-create-room.svg @@ -0,0 +1,20 @@ + + + + icons_create_room + Created with sketchtool. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/icons-directory.svg b/src/skins/vector/img/icons-directory.svg new file mode 100644 index 00000000..00869b9b --- /dev/null +++ b/src/skins/vector/img/icons-directory.svg @@ -0,0 +1,21 @@ + + + + icons_directory + Created with sketchtool. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/icons-settings.svg b/src/skins/vector/img/icons-settings.svg new file mode 100644 index 00000000..60969530 --- /dev/null +++ b/src/skins/vector/img/icons-settings.svg @@ -0,0 +1,17 @@ + + + + icons_settings + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/list-close.svg b/src/skins/vector/img/list-close.svg index eb60864e..cd88b2a8 100644 --- a/src/skins/vector/img/list-close.svg +++ b/src/skins/vector/img/list-close.svg @@ -1,10 +1,15 @@ - - - - Slice 1 - Created with Sketch. - - - - - \ No newline at end of file + + + + +Slice 1 +Created with Sketch. + + + + diff --git a/src/skins/vector/img/list-open.svg b/src/skins/vector/img/list-open.svg index a682ec90..e180be88 100644 --- a/src/skins/vector/img/list-open.svg +++ b/src/skins/vector/img/list-open.svg @@ -1,10 +1,15 @@ - - - - Slice 1 - Created with Sketch. - - - - - \ No newline at end of file + + + + +Slice 1 +Created with Sketch. + + + + diff --git a/src/skins/vector/img/maximise.svg b/src/skins/vector/img/maximise.svg new file mode 100644 index 00000000..79c6c0ab --- /dev/null +++ b/src/skins/vector/img/maximise.svg @@ -0,0 +1,19 @@ + + + +minimise +Created with sketchtool. + + + + + + + + + + + + diff --git a/src/skins/vector/img/minimise.svg b/src/skins/vector/img/minimise.svg new file mode 100644 index 00000000..491756b1 --- /dev/null +++ b/src/skins/vector/img/minimise.svg @@ -0,0 +1,18 @@ + + + + minimise + Created with sketchtool. + + + + + + + + + + + + + diff --git a/src/skins/vector/img/right_search.svg b/src/skins/vector/img/right_search.svg new file mode 100644 index 00000000..b1681734 --- /dev/null +++ b/src/skins/vector/img/right_search.svg @@ -0,0 +1,19 @@ + + + + right_search + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file