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

Initial pass at sticky headers for the LHS panel section labels

This commit is contained in:
wmwragg 2016-08-25 19:46:15 +01:00
parent d2e8201d79
commit 4cb1f8a226
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,6 +79,7 @@ var RoomSubList = React.createClass({
incomingCall: React.PropTypes.object, incomingCall: React.PropTypes.object,
onShowMoreRooms: React.PropTypes.func, onShowMoreRooms: React.PropTypes.func,
searchFilter: React.PropTypes.string, searchFilter: React.PropTypes.string,
headerStack: React.PropTypes.func,
}, },
getInitialState: function() { getInitialState: function() {
@ -406,11 +407,13 @@ var RoomSubList = React.createClass({
} }
return ( return (
<div onClick={ this.onClick } className="mx_RoomSubList_label"> <div className="mx_RoomSubList_stickyContainer">
{ this.props.collapsed ? '' : this.props.label } <div onClick={ this.onClick } className="mx_RoomSubList_label">
<div className="mx_RoomSubList_roomCount">{roomCount}</div> { this.props.collapsed ? '' : this.props.label }
<div className={chevronClasses}></div> <div className="mx_RoomSubList_roomCount">{roomCount}</div>
{badge} <div className={chevronClasses}></div>
{badge}
</div>
</div> </div>
); );
}, },

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

@ -20,18 +20,33 @@ limitations under the License.
width: 100%; width: 100%;
} }
.mx_RoomSubList_stickyContainer {
height: 29px;
position: relative;
}
.mx_RoomSubList_label { .mx_RoomSubList_label {
position: relative; position: relative;
text-transform: uppercase; text-transform: uppercase;
color: #3d3b39; color: #3d3b39;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
width: 203px; /* padding + width = LHS Panel width */
height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */
padding-left: 16px; /* gutter */ padding-left: 16px; /* gutter */
padding-right: 16px; /* gutter */ padding-right: 16px; /* gutter */
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
cursor: pointer; cursor: pointer;
background-color: rgba(118, 207, 166, 0.2); background-color: rgba(118, 207, 166, 0.2);
z-index: 3;
}
.mx_RoomSubList_label.mx_RoomSubList_fixed {
position: fixed;
top: 0;
z-index: 2;
pointer-events: none;
} }
.collapsed .mx_RoomSubList_label { .collapsed .mx_RoomSubList_label {