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

skin RoomSubList chevrons, horizontal rules and selected room

This commit is contained in:
Matthew Hodgson 2016-04-14 21:10:55 +01:00
parent 8557a3b70e
commit 96c4a24d3d
11 changed files with 58 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

6
src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
View File

@ -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;
} }

2
src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
View File

@ -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 {

2
src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
View File

@ -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;
} }

5
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
View File

@ -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;

20
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
View File

@ -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;

1
src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
View File

@ -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;
} }

2
src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css
View File

@ -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 {

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

@ -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;
} }

23
src/skins/vector/img/list-close.svg
View File

@ -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>
<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> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 748 B

After

Width:  |  Height:  |  Size: 716 B

23
src/skins/vector/img/list-open.svg
View File

@ -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>
<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> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 650 B

After

Width:  |  Height:  |  Size: 716 B