mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-04 02:02:14 +01:00
Code Issues Projects Releases Wiki Activity

Initial pass at sticky headers for the LHS panel section labels

Browse Source
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

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

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

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

@ -20,18 +20,33 @@ limitations under the License.
width: 100%;
}
.mx_RoomSubList_stickyContainer {
height: 29px;
position: relative;
}
.mx_RoomSubList_label {
position: relative;
text-transform: uppercase;
color: #3d3b39;
font-weight: 600;
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-right: 16px; /* gutter */
padding-top: 6px;
padding-bottom: 6px;
cursor: pointer;
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 {