PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Improve the mxid overlap situation

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-06-16 17:21:29 +02:00
parent 5dc87869eb
commit dbdb61c820
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
2 changed files with 22 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
res/css/views/rooms/_IRCLayout.scss
View file

@ -49,18 +49,6 @@ $irc-line-height: $font-18px;
}
}
> .mx_SenderProfile {
order: 2;
flex-shrink: 0;
width: var(--name-width);
text-overflow: ellipsis;
text-align: left;
display: flex;
align-items: center;
overflow: visible;
justify-content: flex-end;
}
.mx_EventTile_line, .mx_EventTile_reply {
padding: 0;
display: flex;
@ -173,27 +161,37 @@ $irc-line-height: $font-18px;
border-left: 0;
}
.mx_SenderProfile_hover {
background-color: $primary-bg-color;
overflow: hidden;
.mx_SenderProfile {
width: var(--name-width);
display: flex;
order: 2;
flex-shrink: 0;
justify-content: flex-start;
align-items: center;
> .mx_SenderProfile_displayName, .mx_SenderProfile_mxid {
> .mx_SenderProfile_displayName {
width: 100%;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
min-width: var(--name-width);
text-align: end;
}
> .mx_SenderProfile_mxid {
visibility: collapse;
}
}
.mx_SenderProfile:hover {
justify-content: flex-start;
overflow: visible;
z-index: 10;
> .mx_SenderProfile_displayName {
overflow: visible;
}
.mx_SenderProfile_hover:hover {
overflow: visible;
width: max(auto, 100%);
z-index: 10;
> .mx_SenderProfile_mxid {
visibility: visible;
}
}
.mx_ReplyThread {
@ -201,16 +199,7 @@ $irc-line-height: $font-18px;
.mx_SenderProfile {
width: unset;
max-width: var(--name-width);
}
.mx_SenderProfile_hover {
background: transparent;
> span {
> .mx_SenderProfile_displayName, .mx_SenderProfile_mxid {
min-width: inherit;
}
}
}
.mx_EventTile_emote {

2
src/components/views/messages/SenderProfile.tsx
View file

@ -140,7 +140,7 @@ export default class SenderProfile extends React.Component<IProps, IState> {
}
return (
<div className="mx_SenderProfile mx_SenderProfile_hover" dir="auto" onClick={this.props.onClick}>
<div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
<span className={`mx_SenderProfile_displayName ${colorClass}`}>
{ displayName }
</span>