switch from dots to per-room badges

This commit is contained in:
Matthew Hodgson 2016-05-17 11:14:30 +01:00
parent e640f65640
commit 9483e42508
2 changed files with 22 additions and 49 deletions

View File

@ -19,6 +19,7 @@ limitations under the License.
/* This fixes wrapping of long room names, but breaks drag & drop previews */ /* This fixes wrapping of long room names, but breaks drag & drop previews */
/* display: table-row; */ /* display: table-row; */
font-size: 13px; font-size: 13px;
position: relative;
} }
.mx_RoomTile_avatar { .mx_RoomTile_avatar {
@ -26,7 +27,7 @@ limitations under the License.
padding-right: 11px; padding-right: 11px;
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
padding-left: 20px; padding-left: 18px;
width: 24px; width: 24px;
height: 24px; height: 24px;
position: relative; position: relative;
@ -57,58 +58,23 @@ limitations under the License.
display: none; display: none;
} }
/*
.mx_RoomTile_nameBadge {
display: table;
width: 100%;
height: 50px;
}
.mx_RoomTile_badgeCell {
display: table-cell;
vertical-align: middle;
width: 26px;
}
.mx_RoomTile_badge { .mx_RoomTile_badge {
background-color: #76cfa6; min-width: 12px;
color: #fff; height: 16px;
border-radius: 26px;
font-weight: 400;
font-size: 14px;
line-height: 28px;
width: 26px;
height: 26px;
text-align: center;
}
*/
/*
.mx_RoomTile_badge {
background-color: #ff0064;
border: 3px solid #fff;
border-radius: 16px;
width: 9px;
height: 9px;
position: absolute; position: absolute;
right: 9px; right: 16px;
bottom: 3px;
}
*/
.mx_RoomTile_badge {
background-color: #ff0064;
width: 8px;
height: 8px;
position: absolute;
left: 7px;
top: 50%; top: 50%;
margin-top: -4px; margin-top: -8px;
border-radius: 4px; border-radius: 3px;
color: #fff;
font-weight: bold;
font-size: 11px;
text-align: center;
padding: 0px 2px 0px 2px;
} }
.mx_RoomTile_unreadNotify .mx_RoomTile_badge { .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: #454545; background-color: #76cfa6;
} }
.mx_RoomTile_highlight .mx_RoomTile_badge { .mx_RoomTile_highlight .mx_RoomTile_badge {
@ -120,13 +86,20 @@ limitations under the License.
font-weight: bold; font-weight: bold;
} }
.mx_RoomTile_unreadNotify .mx_RoomTile_name,
.mx_RoomTile_highlight .mx_RoomTile_name {
padding-right: 36px;
}
.mx_RoomTile_selected .mx_RoomTile_name { .mx_RoomTile_selected .mx_RoomTile_name {
padding-right: 23px; padding-right: 23px;
} }
/*
.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 { .mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_avatar {
padding-right: 7px; padding-right: 7px;

View File

@ -59,8 +59,8 @@ limitations under the License.
order: 3; order: 3;
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-left: 20px; margin-left: 18px;
margin-right: 20px; margin-right: 18px;
-webkit-flex: 0 0 60px; -webkit-flex: 0 0 60px;
flex: 0 0 60px; flex: 0 0 60px;
} }