Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wmwragg/mention state indicator round 2 #1835

Merged
merged 2 commits into from
Jul 20, 2016
Merged

Wmwragg/mention state indicator round 2 #1835

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
882d09b
Initial reworking of the RoomTile CSS
wmwragg Jul 20, 2016
f3586a7
Final CSS tweaks for the hover and collapsed states
wmwragg Jul 20, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 31 additions & 37 deletions src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,27 +19,26 @@ limitations under the License.
/* This fixes wrapping of long room names, but breaks drag & drop previews */
/* display: table-row; */
font-size: 13px;
position: relative;
display: block;
}

.mx_RoomTile_avatar {
display: table-cell;
padding-right: 11px;
display: inline-block;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 18px;
width: 24px;
height: 24px;
position: relative;
vertical-align: middle;
}

.mx_RoomTile_name {
display: table-cell;
width: 100%;
display: inline-block;
width: 100px;
vertical-align: middle;
overflow: hidden;
word-break: break-word;
padding-left: 11px;
padding-right: 15px;
color: rgba(69, 69, 69, 0.8);
}
Expand All @@ -58,23 +57,28 @@ limitations under the License.
display: none;
}

.collapsed .mx_RoomTile {
height: 36px;
}

.collapsed .mx_RoomTile_badge {
margin-top: -15px;
right: 7px;
top: -40px;
left: 30px;
min-width: 12px;
height: 16px;
border-radius: 16px;
padding: 0px 4px 0px 4px;
z-index: 200;
}

/* This is the bottom of the speech bubble */
.mx_RoomTile_highlight .mx_RoomTile_badge:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 7px;
margin-left: 4px;
border-top: 8px solid #ff0064;
border-right: 10px solid transparent;
}
Expand All @@ -86,18 +90,25 @@ style are the same, this style needs to be AFTER it to take effect when matched
}

.mx_RoomTile_badge {
min-width: 15px;
display: inline-block;
min-width: 14px;
height: 18px;
position: absolute;
right: 16px;
top: 50%;
margin-top: -8px;
position: relative;
left: 8px;
top: 2px;
border-radius: 18px;
color: #fff;
font-weight: bold;
font-size: 11px;
text-align: center;
padding: 2px 6px 0px 5px;
padding-top: 2px;
padding-left: 4px;
padding-right: 4px;
}

.mx_RoomTile_badge:hover {
letter-spacing: 0.1em;
opacity: 1;
}

.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
Expand All @@ -108,24 +119,13 @@ style are the same, this style needs to be AFTER it to take effect when matched
background-color: #ff0064;
}

.mx_RoomTile_unread,
.mx_RoomTile_highlight {
font-weight: bold;
}

/* the inner highlight span has 4px of padding on it, so we shrink the _avatar by 4px and grow the _name by 4px to fit it in */
.mx_RoomTile_selected .mx_RoomTile_name {
padding-right: 19px;
}
.mx_RoomTile_selected .mx_RoomTile_avatar {
padding-right: 7px;
.mx_RoomTile_badge_no_unread {
background-color: rgb(214, 214, 214);
opacity: 0;
}

/* leave room for the badge, if present.
N.B. this has to come after the above _selected width tweaks */
.mx_RoomTile_unreadNotify .mx_RoomTile_name,
.mx_RoomTile_highlight .mx_RoomTile_name {
padding-right: 40px;
.mx_RoomTile_unread, .mx_RoomTile_highlight {
font-weight: bold;
}

.mx_RoomTile_selected .mx_RoomTile_name span {
Expand All @@ -139,12 +139,6 @@ style are the same, this style needs to be AFTER it to take effect when matched
background-color: rgba(118,207,166,0.2);
}

/* stop the span from overlapping with the badge */
.mx_RoomTile_unreadNotify.mx_RoomTile_selected .mx_RoomTile_name span,
.mx_RoomTile_highlight.mx_RoomTile_selected .mx_RoomTile_name span {
padding-right: 22px;
}

.mx_RoomTile_arrow {
position: absolute;
right: 0px;
Expand Down