Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 21:24:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Initial restyle of the sub lists and room lists

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

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

@ -20,7 +20,6 @@ limitations under the License.
margin-right: 16px; margin-right: 16px;
padding-top: 24px; padding-top: 24px;
padding-bottom: 22px; padding-bottom: 22px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex; display: flex;
display: -webkit-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 { .mx_RoomList {
padding-top: 8px;
padding-bottom: 12px; padding-bottom: 12px;
min-height: 400px; 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 { .collapsed .mx_RoomTile_badge {
top: -2px; top: 0px;
min-width: 12px; min-width: 12px;
height: 16px;
border-radius: 16px; border-radius: 16px;
padding: 0px 4px 0px 4px; padding: 0px 4px 0px 4px;
z-index: 200; z-index: 200;
@ -129,22 +128,22 @@ limitations under the License.
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
margin-left: 6px; margin-left: 5px;
border-top: 8px solid #ff0064; border-top: 5px solid #ff0064;
border-right: 10px solid transparent; border-right: 7px solid transparent;
} }
.mx_RoomTile_badge { .mx_RoomTile_badge {
display: inline-block; display: inline-block;
min-width: 19px; min-width: 15px;
height: 17px; height: 15px;
position: absolute; position: absolute;
right: 8px; /*gutter */ right: 8px; /*gutter */
top: 9px; top: 9px;
border-radius: 14px; border-radius: 8px;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
font-size: 11px; font-size: 10px;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
padding-left: 4px; padding-left: 4px;
@ -175,7 +174,7 @@ limitations under the License.
} }
.mx_RoomTile_selected { .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 { .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
@ -187,5 +186,3 @@ limitations under the License.
right: 0px; 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 { .mx_RoomSubList_label {
position: relative;
text-transform: uppercase; text-transform: uppercase;
color: #3d3b39; color: #3d3b39;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 12px;
padding-left: 16px; /* gutter */ padding-left: 16px; /* gutter */
padding-right: 16px; /* gutter */ padding-right: 16px; /* gutter */
margin-top: 8px; padding-top: 6px;
margin-bottom: 4px; padding-bottom: 6px;
cursor: pointer; cursor: pointer;
background-color: rgba(118, 207, 166, 0.2);
}
.collapsed .mx_RoomSubList_label {
height: 16px;
} }
.mx_RoomSubList_chevron { .mx_RoomSubList_chevron {
padding-left: 4px;
pointer-events: none; pointer-events: none;
position: absolute;
right: 41px;
top: 11px;
} }
.collapsed .mx_RoomSubList_chevron { .mx_RoomSubList_chevronDown {
padding-left: 12px; 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;
} }