OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Initial pass at sticky headers for the LHS panel section labels

pull/2028/head
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, 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,12 +407,14 @@ var RoomSubList = React.createClass({
} }
return ( return (
<div className="mx_RoomSubList_stickyContainer">
<div 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 }
<div className="mx_RoomSubList_roomCount">{roomCount}</div> <div className="mx_RoomSubList_roomCount">{roomCount}</div>
<div className={chevronClasses}></div> <div className={chevronClasses}></div>
{badge} {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 {