OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Implement nitpicks 

- usernames are elipsed
- icon alignment fixed
- replies are more dense
- reply messages respond to name widths
- fixed between message padding problem (flex ftw)
pull/21833/head
Jorik Schellekens 2020-05-08 22:21:26 +01:00
parent 9b7c63a711
commit 82396661cf
1 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
res/css/views/rooms/_IRCLayout.scss
View File

@ -18,12 +18,19 @@ $name-width: 70px;
$icon-width: 14px; $icon-width: 14px;
$timestamp-width: 45px; $timestamp-width: 45px;
$right-padding: 5px; $right-padding: 5px;
$irc-line-height: $font-18px;
.mx_IRCLayout { .mx_IRCLayout {
line-height: $font-18px !important; line-height: $irc-line-height !important;
.mx_EventTile { .mx_EventTile {
// timestamps are links which shouldn't be underlined
> a {
text-decoration: none;
}
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
@ -49,7 +56,10 @@ $right-padding: 5px;
overflow: visible; overflow: visible;
} }
> .mx_EventTile_line { .mx_EventTile_line, .mx_EventTile_reply {
padding: 0;
display: flex;
flex-direction: column;
order: 3; order: 3;
flex-grow: 1; flex-grow: 1;
} }
@ -60,7 +70,7 @@ $right-padding: 5px;
top: 0; top: 0;
left: 0; left: 0;
flex-shrink: 0; flex-shrink: 0;
height: 22px; height: $irc-line-height;
display: flex; display: flex;
align-items: center; align-items: center;
@ -79,10 +89,6 @@ $right-padding: 5px;
text-align: right; text-align: right;
} }
.mx_EventTile_line, .mx_EventTile_reply {
padding: 0;
}
.mx_EventTile_e2eIcon { .mx_EventTile_e2eIcon {
position: relative; position: relative;
right: unset; right: unset;
@ -98,6 +104,8 @@ $right-padding: 5px;
.mx_ReplyThread_wrapper_empty { .mx_ReplyThread_wrapper_empty {
display: inline-block; display: inline-block;
} }
} }
.mx_EvenTile_line .mx_MessageActionBar, .mx_EvenTile_line .mx_MessageActionBar,
@ -114,10 +122,25 @@ $right-padding: 5px;
} }
} }
.mx_EventTile_emote {
> .mx_EventTile_avatar {
margin-left: calc($name-width + $icon-width + $right-padding);
}
}
blockquote {
margin: 0;
}
.mx_EventListSummary { .mx_EventListSummary {
> .mx_EventTile_line { > .mx_EventTile_line {
padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
} }
.mx_EventListSummary_avatars {
padding: 0;
margin: 0;
}
} }
.mx_EventTile.mx_EventTile_info { .mx_EventTile.mx_EventTile_info {
@ -131,16 +154,16 @@ $right-padding: 5px;
} }
.mx_TextualEvent { .mx_TextualEvent {
line-height: $font-22px; line-height: $irc-line-height;
} }
} }
.mx_EventTile_continuation:not(.mx_EventTile_info) { .mx_EventTile_continuation:not(.mx_EventTile_info) {
.mx_EventTile_avatar { > .mx_EventTile_avatar {
visibility: hidden; visibility: hidden;
} }
.mx_SenderProfile { > .mx_SenderProfile {
visibility: hidden; visibility: hidden;
} }
} }
@ -156,8 +179,15 @@ $right-padding: 5px;
.mx_SenderProfile_hover { .mx_SenderProfile_hover {
background-color: $primary-bg-color; background-color: $primary-bg-color;
overflow: hidden; overflow: hidden;
width: $name-width;
transition: width 2s; > span {
display: flex;
> .mx_SenderProfile_name {
overflow: hidden;
text-overflow: ellipsis;
}
}
} }
.mx_SenderProfile_hover:hover { .mx_SenderProfile_hover:hover {
@ -165,4 +195,12 @@ $right-padding: 5px;
width: auto; width: auto;
z-index: 10; z-index: 10;
} }
.mx_ReplyThread {
margin: 0;
.mx_SenderProfile {
width: unset;
max-width: $name-width;
}
}
} }