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

Initial restyle of the sub lists and room lists

This commit is contained in:
wmwragg 2016-08-22 14:10:06 +01:00
parent df5b243e75
commit 97daca4b31
5 changed files with 52 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,7 @@ limitations under the License.
'use strict';
var React = require('react');
var classNames = require('classnames');
var DropTarget = require('react-dnd').DropTarget;
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
@ -300,13 +301,16 @@ var RoomSubList = React.createClass({
_getHeaderJsx: function() {
var TintableSvg = sdk.getComponent("elements.TintableSvg");
var classes = classNames({
'mx_RoomSubList_chevron': true,
'mx_RoomSubList_chevronUp': this.state.hidden,
'mx_RoomSubList_chevronDown': !this.state.hidden,
});
return (
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">
<div onClick={ this.onClick } className="mx_RoomSubList_label">
{ this.props.collapsed ? '' : this.props.label }
<img className="mx_RoomSubList_chevron"
src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
width="10" height="10" />
</h2>
<div className={classes}></div>
</div>
);
},

1
src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
View File

@ -20,7 +20,6 @@ limitations under the License.
margin-right: 16px;
padding-top: 24px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
display: -webkit-flex;

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

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

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

@ -109,9 +109,8 @@ limitations under the License.
}
.collapsed .mx_RoomTile_badge {
top: -2px;
top: 0px;
min-width: 12px;
height: 16px;
border-radius: 16px;
padding: 0px 4px 0px 4px;
z-index: 200;
@ -129,22 +128,22 @@ limitations under the License.
display: block;
width: 0;
height: 0;
margin-left: 6px;
border-top: 8px solid #ff0064;
border-right: 10px solid transparent;
margin-left: 5px;
border-top: 5px solid #ff0064;
border-right: 7px solid transparent;
}
.mx_RoomTile_badge {
display: inline-block;
min-width: 19px;
height: 17px;
min-width: 15px;
height: 15px;
position: absolute;
right: 8px; /*gutter */
top: 9px;
border-radius: 14px;
border-radius: 8px;
color: #fff;
font-weight: 600;
font-size: 11px;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
@ -175,7 +174,7 @@ limitations under the License.
}
.mx_RoomTile_selected {
background-color: rgba(118,207,166,0.2);
background-color: rgba(255, 255, 255, 0.8);
}
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
@ -187,5 +186,3 @@ limitations under the License.
right: 0px;
}
.mx_RoomTile:hover {
}

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

@ -21,22 +21,50 @@ limitations under the License.
}
.mx_RoomSubList_label {
position: relative;
text-transform: uppercase;
color: #3d3b39;
font-weight: 600;
font-size: 13px;
font-size: 12px;
padding-left: 16px; /* gutter */
padding-right: 16px; /* gutter */
margin-top: 8px;
margin-bottom: 4px;
padding-top: 6px;
padding-bottom: 6px;
cursor: pointer;
background-color: rgba(118, 207, 166, 0.2);
}
.collapsed .mx_RoomSubList_label {
height: 16px;
}
.mx_RoomSubList_chevron {
padding-left: 4px;
pointer-events: none;
position: absolute;
right: 41px;
top: 11px;
}
.collapsed .mx_RoomSubList_chevron {
padding-left: 12px;
.mx_RoomSubList_chevronDown {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #76cfa6;
}
.mx_RoomSubList_chevronUp {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid #76cfa6;
}
.mx_RoomSubList_chevronRight {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 6px solid #76cfa6;
border-bottom: 5px solid transparent;
}