mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

Merge pull request #1900 from vector-im/wmwragg/mention-state-menu

Browse source 
Wmwragg/mention state menu
This commit is contained in:
Matthew Hodgson 2016-08-03 15:22:49 +01:00 • committed by GitHub
commit 70754db27a
20 changed files with 543 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
View file

@ -15,18 +15,29 @@ limitations under the License.
*/
.mx_RoomTile {
position: relative;
cursor: pointer;
/* This fixes wrapping of long room names, but breaks drag & drop previews */
/* display: table-row; */
font-size: 13px;
display: block;
height: 34px;
}
.mx_RoomTile .mx_RoomTile_mute {
opacity: 0.4;
}
.mx_RoomTile_nameContainer {
display: inline-block;
width: 180px;
height: 24px;
}
.mx_RoomTile_avatar {
display: inline-block;
padding-top: 6px;
padding-bottom: 6px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 18px;
padding-right: 6px;
width: 24px;
height: 24px;
vertical-align: middle;
@ -34,13 +45,17 @@ limitations under the License.
.mx_RoomTile_name {
display: inline-block;
width: 100px;
position: relative;
width: 165px;
vertical-align: middle;
overflow: hidden;
word-break: break-word;
padding-left: 11px;
padding-right: 15px;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 3px;
color: rgba(69, 69, 69, 0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_RoomTile_ellipsis .mx_RoomTile_name {
@ -53,17 +68,16 @@ limitations under the License.
*/
}
.collapsed .mx_RoomTile_nameContainer {
height: 0;
}
.collapsed .mx_RoomTile_name {
display: none;
}
.collapsed .mx_RoomTile {
height: 36px;
}
.collapsed .mx_RoomTile_badge {
top: -40px;
left: 30px;
top: -2px;
min-width: 12px;
height: 16px;
border-radius: 16px;
@ -71,46 +85,81 @@ limitations under the License.
z-index: 200;
}
/* This is the bottom of the speech bubble */
.mx_RoomTile_highlight .mx_RoomTile_badge:after {
/* Position mute icon when room muted and collapsed - invisible at the moment */
.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
background-color: rgba(0,0,0,0);
opacity: 0;
top: -2px;
}
/* Position menu icon when room muted and collapsed */
.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute,
.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
display: inline-block;
background-color: rgb(214, 214, 214);
letter-spacing: 0.1em;
opacity: 1;
top: -2px;
}
/* Hide the bottom of speech bubble */
.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after {
display: none;
}
/* This is the bottom of the speech bubble - not drawn when room muted */
.mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 4px;
margin-left: 6px;
border-top: 8px solid #ff0064;
border-right: 10px solid transparent;
}
/* Because the specificity of this and the above ".mx_RoomTile_highlight .mx_RoomTile_badge:after"
style are the same, this style needs to be AFTER it to take effect when matched */
.collapsed .mx_RoomTile_badge:after {
display: none;
}
.mx_RoomTile_badge {
display: inline-block;
min-width: 14px;
height: 18px;
position: relative;
left: 8px;
top: 2px;
border-radius: 18px;
min-width: 19px;
height: 17px;
position: absolute;
right: 8px; /*gutter */
top: 9px;
border-radius: 14px;
color: #fff;
font-weight: bold;
font-weight: 600;
font-size: 11px;
text-align: center;
padding-top: 2px;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
}
.mx_RoomTile_badge:hover {
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge {
letter-spacing: 0.1em;
opacity: 1;
}
/* Position menu icon when room muted */
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute,
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
background-color: rgb(214, 214, 214);
letter-spacing: 0.1em;
opacity: 1;
top: 9px;
right: 8px; /* gutter */
}
/* Position mute icon when room muted */
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
background-color: rgba(0,0,0,0);
opacity: 1;
top: 11px;
right: 6px;
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: #76cfa6;
}
@ -119,26 +168,23 @@ style are the same, this style needs to be AFTER it to take effect when matched
background-color: #ff0064;
}
.mx_RoomTile_badge_no_unread {
.mx_RoomTile_read .mx_RoomTile_badge {
background-color: rgb(214, 214, 214);
opacity: 0;
}
.mx_RoomTile_unread, .mx_RoomTile_highlight {
font-weight: bold;
font-weight: 600;
}
.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;
.mx_RoomTile_selected {
background-color: rgba(118,207,166,0.2);
}
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
width: 144px;
}
.mx_RoomTile_arrow {
position: absolute;
right: 0px;