gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #1402 from vector-im/matthew/design_tweaks 

Matthew/design tweaks
This commit is contained in:
Matthew Hodgson 2016-04-15 18:48:30 +01:00
parent 57c7d81f43 c606912a8d
commit 48e082e124
31 changed files with 529 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/component-index.js
View File

@ -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');

13
src/components/structures/BottomLeftMenu.js
View File

@ -47,12 +47,19 @@ module.exports = React.createClass({
render: function() {
var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile');
var TintableSvg = sdk.getComponent('elements.TintableSvg');
return (
<div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options">
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Start chat" onClick={ this.onCreateRoomClick }/>
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.svg" label="Directory" onClick={ this.onRoomDirectoryClick }/>
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.svg" label="Settings" onClick={ this.onSettingsClick }/>
<div className="mx_BottomLeftMenu_createRoom" title="Start chat" onClick={ this.onCreateRoomClick }>
<TintableSvg src="img/icons-create-room.svg" width="24" height="24"/>
</div>
<div className="mx_BottomLeftMenu_directory" title="Room directory" onClick={ this.onRoomDirectoryClick }>
<TintableSvg src="img/icons-directory.svg" width="24" height="24"/>
</div>
<div className="mx_BottomLeftMenu_settings" title="Settings" onClick={ this.onSettingsClick }>
<TintableSvg src="img/icons-settings.svg" width="24" height="24"/>
</div>
</div>
</div>
);

8
src/components/structures/LeftPanel.js
View File

@ -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 (
<aside className={classes} style={{ opacity: this.props.opacity }}>
<SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />
{ collapseButton }
{ callPreview }
<RoomList
selectedRoom={this.props.selectedRoom}
collapsed={this.props.collapsed}
searchFilter={this.state.searchFilter}
ConferenceHandler={VectorConferenceHandler} />
<BottomLeftMenu collapsed={this.props.collapsed}/>
</aside>

5
src/components/structures/RightPanel.js
View File

@ -155,7 +155,10 @@ module.exports = React.createClass({
panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
}
}
}
if (!panel) {
panel = <div className="mx_RightPanel_blank"></div>;
}
var classes = "mx_RightPanel mx_fadable";
@ -169,6 +172,8 @@ module.exports = React.createClass({
{ buttonGroup }
</div>
{ panel }
<div className="mx_RightPanel_footer">
</div>
</aside>
);
}

16
src/components/structures/RoomDirectory.js
View File

@ -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

23
src/components/structures/RoomSubList.js
View File

@ -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 (
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">
{ this.props.collapsed ? '' : this.props.label }
<TintableSvg className="mx_RoomSubList_chevron"
<img className="mx_RoomSubList_chevron"
src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
width="10" height="10" />
</h2>

98
src/components/structures/SearchBox.js Normal file
View File

@ -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 =
<div className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
<TintableSvg src="img/maximise.svg" width="10" height="16" alt="&lt;"/>
</div>
}
else {
toggleCollapse =
<div className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
<TintableSvg src="img/minimise.svg" width="10" height="16" alt="&lt;"/>
</div>
}
var searchControls;
if (!this.props.collapsed) {
searchControls = [
<TintableSvg
key="button"
className="mx_SearchBox_searchButton"
src="img/right_search.svg" width="24" height="24"
/>,
<input
key="searchfield"
type="text"
ref="search"
className="mx_SearchBox_search"
onChange={ this.onChange }
placeholder="Search room names"
/>
];
}
var self = this;
return (
<div className="mx_SearchBox">
{ searchControls }
{ toggleCollapse }
</div>
);
}
});

25
src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
View File

@ -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 {

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

@ -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;
}

62
src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css Normal file
View File

@ -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;
}

23
src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
View File

@ -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;
}

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

@ -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;

1
src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
View File

@ -15,6 +15,7 @@ limitations under the License.
*/
.mx_MemberInfo {
margin-top: 20px;
height: 100%;
}

13
src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
View File

@ -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;

6
src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
View File

@ -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 {

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

@ -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;

2
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
View File

@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_RoomList {
padding-top: 24px;
padding-top: 8px;
padding-bottom: 12px;
min-height: 400px;
}

37
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
View File

@ -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;

3
src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
View File

@ -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;
}

2
src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css
View File

@ -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 {

48
src/skins/vector/css/vector-web/structures/LeftPanel.css
View File

@ -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;
}
.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;
}

28
src/skins/vector/css/vector-web/structures/RightPanel.css
View File

@ -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;
}

4
src/skins/vector/css/vector-web/structures/RoomSubList.css
View File

@ -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;
}

20
src/skins/vector/img/icons-create-room.svg Normal file
View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
<title>icons_create_room</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="03_4-Uploading" sketch:type="MSArtboardGroup" transform="translate(-20.000000, -726.000000)">
<g id="Room-list" sketch:type="MSLayerGroup">
<g id="Room-list/Footer" transform="translate(0.000000, 708.000000)" sketch:type="MSShapeGroup">
<g id="icons_create_room" transform="translate(20.000000, 18.000000)">
<circle id="Oval-1-Copy-7" fill="#76CFA6" cx="12" cy="12" r="12"></circle>
<path d="M7,12 L17,12" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
<path d="M12,7 L12,17" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

21
src/skins/vector/img/icons-directory.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
<title>icons_directory</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="03_4-Uploading" sketch:type="MSArtboardGroup" transform="translate(-54.000000, -726.000000)">
<g id="Room-list" sketch:type="MSLayerGroup">
<g id="Room-list/Footer" transform="translate(0.000000, 708.000000)" sketch:type="MSShapeGroup">
<g id="icons_directory" transform="translate(54.000000, 18.000000)">
<ellipse id="Oval-1-Copy-7" fill="#76CFA6" cx="12.48" cy="12" rx="11.52" ry="12"></ellipse>
<path d="M10.919715,8.29307518 C10.8407601,8.29307518 10.7883135,8.12984737 10.7170546,7.88143019 C10.616152,7.53041266 10.4645131,7 9.9312114,7 L7.38327791,7 C7.02270784,7 6.73168646,7.30842284 6.72057007,7.70887507 L6.72,17.2758903 C6.72,17.6754098 7.01786223,18 7.38327791,18 L17.5770071,18 C17.9424228,18 18.24,17.6754098 18.24,17.2758903 L18.24,9.01687394 C18.24,8.61766535 17.9424228,8.29307518 17.5770071,8.29307518 L10.919715,8.29307518 Z M17.28,16.7470688 C17.28,16.8865013 17.1755713,17 17.0471522,17 L6.95341227,17 C6.82499318,17 6.72,16.8865013 6.72,16.7470688 L6.72056448,10 L17.28,10 L17.28,16.7470688 L17.28,16.7470688 Z M17.28,9 L6.72,9 L6.72,7.20209147 C6.72395157,7.0886985 6.82641007,7 6.95286024,7 L9.47593617,7 C9.67210328,7 9.74040895,7.13682752 9.84964157,7.44903616 C9.93826959,7.70177649 10.0596392,8.04800302 10.4547959,8.04800302 L17.0471398,8.04800302 C17.1755657,8.04800302 17.28,8.14148923 17.28,8.25664609 L17.28,9 L17.28,9 Z" id="Fill-137"></path>
<path d="M18,17 C18,16.8865013 17.8912201,17 18,17 L7,17 C7.1093679,17 7,16.8865013 7,17 L7,10 L18,10 L18,17 L18,17 Z" id="Path-Copy-2" fill="#FFFFFF"></path>
<path d="M7,9 L7,7 C7.00411622,7.0886985 7.11084382,7 7,7 L10,7 C10.0751076,7 10.1462593,7.13682752 10,7 C10.3523642,7.70177649 10.4787908,8.04800302 11,8 L18,8 C17.8912143,8.04800302 18,8.14148923 18,8 L18,9 L7,9 Z" id="Path-Copy" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

17
src/skins/vector/img/icons-settings.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
<title>icons_settings</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="09-Invitations-and-joining" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="09_1-Invite-members" sketch:type="MSArtboardGroup" transform="translate(-886.000000, -25.000000)">
<g id="Room-header" sketch:type="MSLayerGroup" transform="translate(210.000000, 0.000000)">
<g id="icons_settings" transform="translate(676.000000, 25.000000)" sketch:type="MSShapeGroup">
<circle id="Oval-1-Copy-7" fill="#76CFA6" cx="12" cy="12" r="12"></circle>
<path d="M15,12 C15,11.1718709 14.7070342,10.4648467 14.1210938,9.87890625 C13.5351533,9.29296582 12.8281291,9 12,9 C11.1718709,9 10.4648467,9.29296582 9.87890625,9.87890625 C9.29296582,10.4648467 9,11.1718709 9,12 C9,12.8281291 9.29296582,13.5351533 9.87890625,14.1210938 C10.4648467,14.7070342 11.1718709,15 12,15 C12.8281291,15 13.5351533,14.7070342 14.1210938,14.1210938 C14.7070342,13.5351533 15,12.8281291 15,12 L15,12 Z M19,11.0065104 L19,13.0299479 C19,13.1028649 18.9756947,13.1727427 18.9270833,13.2395833 C18.878472,13.3064239 18.8177087,13.3459201 18.7447917,13.3580729 L17.0585938,13.6132812 C16.9431418,13.9414079 16.8246534,14.2178808 16.703125,14.4427083 C16.9157997,14.7465293 17.2408832,15.1657959 17.6783854,15.7005208 C17.7391496,15.7734379 17.7695312,15.849392 17.7695312,15.9283854 C17.7695312,16.0073789 17.7421878,16.0772566 17.6875,16.1380208 C17.5234367,16.3628483 17.2226584,16.6909701 16.7851562,17.1223958 C16.3476541,17.5538216 16.0620666,17.7695312 15.9283854,17.7695312 C15.8554684,17.7695312 15.7764761,17.7421878 15.6914062,17.6875 L14.4335938,16.703125 C14.1662313,16.8428826 13.8897584,16.9583329 13.6041667,17.0494792 C13.506944,17.8758722 13.4188372,18.4409707 13.3398438,18.7447917 C13.2973088,18.9149314 13.1879349,19 13.0117188,19 L10.9882812,19 C10.9032114,19 10.8287764,18.9741756 10.764974,18.922526 C10.7011716,18.8708765 10.6662327,18.805556 10.6601562,18.7265625 L10.4049479,17.0494792 C10.1072034,16.9522565 9.83376861,16.8398444 9.58463542,16.7122396 L8.29947917,17.6875 C8.23871497,17.7421878 8.16276087,17.7695312 8.07161458,17.7695312 C7.98654471,17.7695312 7.91059061,17.7361114 7.84375,17.6692708 C7.07812117,16.976559 6.5768241,16.4661475 6.33984375,16.1380208 C6.29730882,16.0772566 6.27604167,16.0073789 6.27604167,15.9283854 C6.27604167,15.8554684 6.30034698,15.7855906 6.34895833,15.71875 C6.44010462,15.5911452 6.59505099,15.3891073 6.81380208,15.1126302 C7.03255318,14.8361531 7.19661404,14.6219626 7.30598958,14.4700521 C7.14192626,14.1662311 7.01736154,13.8654529 6.93229167,13.5677083 L5.26432292,13.3216146 C5.18532947,13.3094617 5.12152802,13.2714847 5.07291667,13.2076823 C5.02430531,13.1438799 5,13.072483 5,12.9934896 L5,10.9700521 C5,10.8971351 5.02430531,10.8272573 5.07291667,10.7604167 C5.12152802,10.6935761 5.17925314,10.6540799 5.24609375,10.6419271 L6.94140625,10.3867188 C7.02647612,10.1072035 7.14496452,9.82769237 7.296875,9.54817708 C7.05381823,9.20182118 6.72873467,8.78255454 6.32161458,8.29036458 C6.26085039,8.21744755 6.23046875,8.14453161 6.23046875,8.07161458 C6.23046875,8.01085039 6.25781223,7.94097262 6.3125,7.86197917 C6.4704869,7.64322807 6.76974606,7.31662544 7.21028646,6.88216146 C7.65082686,6.44769748 7.93793336,6.23046875 8.07161458,6.23046875 C8.15060803,6.23046875 8.2296003,6.26085039 8.30859375,6.32161458 L9.56640625,7.296875 C9.8337687,7.15711736 10.1102416,7.04166712 10.3958333,6.95052083 C10.493056,6.12412781 10.5811628,5.5590293 10.6601562,5.25520833 C10.7026912,5.08506859 10.8120651,5 10.9882812,5 L13.0117188,5 C13.0967886,5 13.1712236,5.02582439 13.235026,5.07747396 C13.2988284,5.12912352 13.3337673,5.19444405 13.3398438,5.2734375 L13.5950521,6.95052083 C13.8927966,7.04774354 14.1662314,7.16015561 14.4153646,7.28776042 L15.7096354,6.3125 C15.7643232,6.25781223 15.8372391,6.23046875 15.9283854,6.23046875 C16.0073789,6.23046875 16.083333,6.26085039 16.15625,6.32161458 C16.9401081,7.04470848 17.4414052,7.56119637 17.6601562,7.87109375 C17.7026912,7.9197051 17.7239583,7.98654471 17.7239583,8.07161458 C17.7239583,8.14453161 17.699653,8.21440939 17.6510417,8.28125 C17.5598954,8.4088548 17.404949,8.61089271 17.1861979,8.88736979 C16.9674468,9.16384687 16.803386,9.37803743 16.6940104,9.52994792 C16.8519973,9.83376888 16.976562,10.131509 17.0677083,10.4231771 L18.7356771,10.6783854 C18.8146705,10.6905383 18.878472,10.7285153 18.9270833,10.7923177 C18.9756947,10.8561201 19,10.927517 19,11.0065104 L19,11.0065104 Z" id="icons_settings-copy" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

25
src/skins/vector/img/list-close.svg
View File

@ -1,10 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M0,5 L20,5 L10,15 L0,5 Z" id="Triangle-1" fill="#76CFA6" sketch:type="MSShapeGroup" transform="translate(10.000000, 10.000000) rotate(-90.000000) translate(-10.000000, -10.000000) "></path>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-249 251 20 20"
style="enable-background:new -249 251 20 20;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.2;}
.st1{fill:#444444;}
</style>
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" sketch:type="MSPage" class="st0">
<path id="Triangle-1" sketch:type="MSShapeGroup" class="st1" d="M-245,270v-18l12,9L-245,270z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 748 B

After

Width:  |  Height:  |  Size: 716 B

25
src/skins/vector/img/list-open.svg
View File

@ -1,10 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M0,5 L20,5 L10,15 L0,5 Z" id="Triangle-1" fill="#76CFA6" sketch:type="MSShapeGroup"></path>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-249 251 20 20"
style="enable-background:new -249 251 20 20;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.2;}
.st1{fill:#444444;}
</style>
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" sketch:type="MSPage" class="st0">
<path id="Triangle-1" sketch:type="MSShapeGroup" class="st1" d="M-248,255h18l-9,12L-248,255z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 650 B

After

Width:  |  Height:  |  Size: 716 B

19
src/skins/vector/img/maximise.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-254 253 10 16"
style="enable-background:new -254 253 10 16;" xml:space="preserve">
<title>minimise</title>
<desc>Created with sketchtool.</desc>
<g id="_x30_2-Chat" sketch:type="MSPage">
<g id="_x30_2_x5F_1-Chat-collapsed-w-topic" transform="translate(-176.000000, -27.000000)" sketch:type="MSArtboardGroup">
<g id="Room-list" sketch:type="MSLayerGroup">
<g id="Room-list_x2F_Header" sketch:type="MSShapeGroup">
<g id="minimise" transform="translate(172.000000, 25.000000)">
<path id="Path-53-Copy" fill="none" stroke-width="2" stroke="#76CFA6" d="M-248.7,256.3l5.7,5.7l-5.7,5.7"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 987 B

18
src/skins/vector/img/minimise.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="16px" viewBox="-1 -1 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
<title>minimise</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="02_1-Chat-collapsed-w-topic" sketch:type="MSArtboardGroup" transform="translate(-176.000000, -27.000000)" stroke-width="2" stroke="#76CFA6">
<g id="Room-list" sketch:type="MSLayerGroup">
<g id="Room-list/Header" sketch:type="MSShapeGroup">
<g id="minimise" transform="translate(172.000000, 25.000000)">
<path d="M7,5 L15,5 L15,13" id="Path-53-Copy" transform="translate(11.000000, 9.000000) scale(-1, -1) rotate(-315.000000) translate(-11.000000, -9.000000) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

19
src/skins/vector/img/right_search.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7 (28169) - http://www.bohemiancoding.com/sketch -->
<title>right_search</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Room-header/Vector-Design" transform="translate(-710.000000, -25.000000)">
<g id="right_search" transform="translate(710.000000, 25.000000)">
<g id="Oval-1-Copy-7-+-Group-Copy-5-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy" fill="#76CFA6">
<circle id="Oval-1-Copy-7" cx="12" cy="12" r="12"></circle>
</g>
<text id="" font-family="FontAwesome" font-size="14" font-weight="normal" fill="#FFFFFF">
<tspan x="5" y="16"></tspan>
</text>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB