skin RoomSubList chevrons, horizontal rules and selected room
This commit is contained in:
parent
8557a3b70e
commit
96c4a24d3d
11 changed files with 58 additions and 36 deletions
|
@ -278,7 +278,7 @@ var RoomSubList = React.createClass({
|
||||||
return (
|
return (
|
||||||
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">
|
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">
|
||||||
{ this.props.collapsed ? '' : this.props.label }
|
{ this.props.collapsed ? '' : this.props.label }
|
||||||
<TintableSvg className="mx_RoomSubList_chevron"
|
<img className="mx_RoomSubList_chevron"
|
||||||
src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
|
src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
|
||||||
width="10" height="10" />
|
width="10" height="10" />
|
||||||
</h2>
|
</h2>
|
||||||
|
|
|
@ -89,7 +89,7 @@ limitations under the License.
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
@ -158,7 +158,7 @@ limitations under the License.
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
margin-left: 63px;
|
margin-left: 63px;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomView_invitePrompt {
|
.mx_RoomView_invitePrompt {
|
||||||
|
@ -212,7 +212,7 @@ hr.mx_RoomView_myReadMarker {
|
||||||
|
|
||||||
.mx_RoomView_statusAreaBox_line {
|
.mx_RoomView_statusAreaBox_line {
|
||||||
margin-left: 65px;
|
margin-left: 65px;
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #e5e5e5;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -84,7 +84,7 @@ limitations under the License.
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
margin-left: 63px;
|
margin-left: 63px;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_UserSettings h3 {
|
.mx_UserSettings h3 {
|
||||||
|
|
|
@ -84,7 +84,7 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MemberList_bottomRule {
|
.mx_MemberList_bottomRule {
|
||||||
border-top: 2px solid #e1dddd;
|
border-top: 1px solid #e5e5e5;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -24,7 +24,6 @@ limitations under the License.
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
height: 83px;
|
height: 83px;
|
||||||
border-bottom: 1px solid #eeeeee;
|
|
||||||
|
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -36,10 +35,6 @@ limitations under the License.
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomHeader_editing .mx_RoomHeader_wrapper {
|
|
||||||
border-bottom: 1px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_RoomHeader_leftRow {
|
.mx_RoomHeader_leftRow {
|
||||||
margin-left: -2px;
|
margin-left: -2px;
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,7 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_RoomTile_avatar {
|
.mx_RoomTile_avatar {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
padding-right: 8px;
|
padding-right: 11px;
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
|
@ -121,18 +121,34 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomTile_selected .mx_RoomTile_name {
|
.mx_RoomTile_selected .mx_RoomTile_name {
|
||||||
color: #76cfa6 ! important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomTile_highlight .mx_RoomTile_name {
|
.mx_RoomTile_highlight .mx_RoomTile_name {
|
||||||
color: #ff0064 ! important;
|
color: #ff0064 ! important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_avatar {
|
||||||
|
padding-right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name span {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
padding: 4px;
|
||||||
|
margin-top: -4px;
|
||||||
|
margin-bottom: -4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: rgba(118,207,166,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
|
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
|
||||||
background: url('img/selected.png');
|
background: url('img/selected.png');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: right center;
|
background-position: right center;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
.mx_RoomTile_arrow {
|
.mx_RoomTile_arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -21,6 +21,7 @@ limitations under the License.
|
||||||
.mx_TabCompleteBar_item {
|
.mx_TabCompleteBar_item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
|
margin-bottom: 2px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,7 @@ limitations under the License.
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_TopUnreadMessagesBar_scrollUp {
|
.mx_TopUnreadMessagesBar_scrollUp {
|
||||||
|
|
|
@ -32,10 +32,10 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomSubList_chevron {
|
.mx_RoomSubList_chevron {
|
||||||
padding-left: 5px;
|
padding-left: 4px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsed .mx_RoomSubList_chevron {
|
.collapsed .mx_RoomSubList_chevron {
|
||||||
padding-left: 13px;
|
padding-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,15 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
|
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
|
||||||
<title>Slice 1</title>
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-249 251 20 20"
|
||||||
<desc>Created with Sketch.</desc>
|
style="enable-background:new -249 251 20 20;" xml:space="preserve">
|
||||||
<defs></defs>
|
<style type="text/css">
|
||||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
.st0{opacity:0.2;}
|
||||||
<path d="M0,5 L20,5 L10,15 L0,5 Z" id="Triangle-1" fill="#76CFA6" sketch:type="MSShapeGroup" transform="translate(10.000000, 10.000000) rotate(-90.000000) translate(-10.000000, -10.000000) "></path>
|
.st1{fill:#444444;}
|
||||||
</g>
|
</style>
|
||||||
</svg>
|
<title>Slice 1</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<g id="Page-1" sketch:type="MSPage" class="st0">
|
||||||
|
<path id="Triangle-1" sketch:type="MSShapeGroup" class="st1" d="M-245,270v-18l12,9L-245,270z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 748 B After Width: | Height: | Size: 716 B |
|
@ -1,10 +1,15 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
|
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
|
||||||
<title>Slice 1</title>
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-249 251 20 20"
|
||||||
<desc>Created with Sketch.</desc>
|
style="enable-background:new -249 251 20 20;" xml:space="preserve">
|
||||||
<defs></defs>
|
<style type="text/css">
|
||||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
.st0{opacity:0.2;}
|
||||||
<path d="M0,5 L20,5 L10,15 L0,5 Z" id="Triangle-1" fill="#76CFA6" sketch:type="MSShapeGroup"></path>
|
.st1{fill:#444444;}
|
||||||
</g>
|
</style>
|
||||||
</svg>
|
<title>Slice 1</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<g id="Page-1" sketch:type="MSPage" class="st0">
|
||||||
|
<path id="Triangle-1" sketch:type="MSShapeGroup" class="st1" d="M-248,255h18l-9,12L-248,255z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 650 B After Width: | Height: | Size: 716 B |
Loading…
Reference in a new issue