imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use styled mxids in member list v2 (#8110)

Browse source 
* Revert "Revert "Use styled mxids in member list (#6328)" (#8107)"

This reverts commit 709e6e78d2.

* Fix disambiguated profile for bubbles

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2022-03-22 23:14:55 +01:00 • committed by GitHub
parent cfabcdda35
commit bff1ef31d6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 141 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_components.scss
View file

@ -193,6 +193,7 @@
@import "./views/messages/_CallEvent.scss";
@import "./views/messages/_CreateEvent.scss";
@import "./views/messages/_DateSeparator.scss";
@import "./views/messages/_DisambiguatedProfile.scss";
@import "./views/messages/_EventTileBubble.scss";
@import "./views/messages/_HiddenBody.scss";
@import "./views/messages/_JumpToDatePicker.scss";
@ -215,7 +216,6 @@
@import "./views/messages/_ReactionsRowButton.scss";
@import "./views/messages/_RedactedBody.scss";
@import "./views/messages/_RoomAvatarEvent.scss";
@import "./views/messages/_SenderProfile.scss";
@import "./views/messages/_TextualEvent.scss";
@import "./views/messages/_UnknownBody.scss";
@import "./views/messages/_ViewSourceEvent.scss";

2
res/css/structures/_FilePanel.scss
View file

@ -93,7 +93,7 @@ limitations under the License.
text-decoration: none;
}
.mx_FilePanel .mx_EventTile .mx_SenderProfile {
.mx_FilePanel .mx_EventTile .mx_DisambiguatedProfile {
flex: 1 1 auto;
line-height: initial;
padding: 0px;

2
res/css/structures/_NotificationPanel.scss
View file

@ -77,7 +77,7 @@ limitations under the License.
display: none; // we don't need this in this view
}
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
.mx_NotificationPanel .mx_EventTile .mx_DisambiguatedProfile,
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
color: $primary-content;
font-size: $font-12px;

22
res/css/views/messages/_SenderProfile.scss → res/css/views/messages/_DisambiguatedProfile.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,13 +15,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SenderProfile_displayName {
font-weight: 600;
}
.mx_DisambiguatedProfile {
overflow: hidden;
text-overflow: ellipsis;
.mx_SenderProfile_mxid {
font-weight: 600;
font-size: 1.1rem;
margin-left: 5px;
opacity: 0.5; // Match mx_TextualEvent
.mx_DisambiguatedProfile_displayName {
font-weight: 600;
}
.mx_DisambiguatedProfile_mxid {
font-weight: 600;
font-size: 1.1rem;
margin-left: 5px;
opacity: 0.5; // Match mx_TextualEvent
}
}

10
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -88,7 +88,7 @@ limitations under the License.
}
}
.mx_SenderProfile,
.mx_DisambiguatedProfile,
.mx_EventTile_line {
width: fit-content;
max-width: 70%;
@ -96,7 +96,7 @@ limitations under the License.
line-height: $font-18px;
}
> .mx_SenderProfile {
> .mx_DisambiguatedProfile {
position: relative;
top: -2px;
left: 2px;
@ -168,11 +168,11 @@ limitations under the License.
margin-right: calc(-1 * var(--gutterSize));
}
.mx_SenderProfile {
.mx_DisambiguatedProfile {
display: none;
}
.mx_ReplyTile .mx_SenderProfile {
.mx_ReplyTile .mx_DisambiguatedProfile {
display: block;
}
@ -379,7 +379,7 @@ limitations under the License.
.mx_EventTile_avatar {
position: static;
}
.mx_SenderProfile {
.mx_DisambiguatedProfile {
display: none;
}
}

17
res/css/views/rooms/_EventTile.scss
View file

@ -126,7 +126,7 @@ $left-gutter: 64px;
max-width: calc(100% - $left-gutter);
}
.mx_SenderProfile .mx_Flair {
.mx_DisambiguatedProfile .mx_Flair {
opacity: 0.7;
margin-left: 5px;
display: inline-block;
@ -141,6 +141,21 @@ $left-gutter: 64px;
}
}
.mx_DisambiguatedProfile {
color: $primary-content;
font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden;
cursor: pointer;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
/* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - $left-gutter);
}
&.mx_EventTile_isEditing .mx_MessageTimestamp {
visibility: hidden;
}

4
res/css/views/rooms/_GroupLayout.scss
View file

@ -19,7 +19,7 @@ $left-gutter: 64px;
.mx_GroupLayout {
.mx_EventTile {
> .mx_SenderProfile {
> .mx_DisambiguatedProfile {
line-height: $font-20px;
margin-left: $left-gutter;
}
@ -65,7 +65,7 @@ $left-gutter: 64px;
}
}
.mx_SenderProfile {
.mx_DisambiguatedProfile {
font-size: $font-13px;
}

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

@ -173,7 +173,7 @@ $irc-line-height: $font-18px;
border-left: 0;
}
.mx_SenderProfile {
.mx_DisambiguatedProfile {
width: var(--name-width);
display: flex;
order: 2;
@ -181,14 +181,14 @@ $irc-line-height: $font-18px;
justify-content: flex-start;
align-items: center;
> .mx_SenderProfile_displayName {
> .mx_DisambiguatedProfile_displayName {
width: 100%;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
}
> .mx_SenderProfile_mxid {
> .mx_DisambiguatedProfile_mxid {
visibility: collapse;
// Override the inherited margin.
margin-left: 0;
@ -196,11 +196,11 @@ $irc-line-height: $font-18px;
}
}
.mx_SenderProfile:hover {
.mx_DisambiguatedProfile:hover {
overflow: visible;
z-index: 10;
> .mx_SenderProfile_displayName {
> .mx_DisambiguatedProfile_displayName {
overflow: visible;
display: inline;
background-color: $event-selected-color;
@ -208,7 +208,7 @@ $irc-line-height: $font-18px;
padding-right: 8px;
}
> .mx_SenderProfile_mxid {
> .mx_DisambiguatedProfile_mxid {
visibility: visible;
opacity: 1;
background-color: $event-selected-color;
@ -217,7 +217,7 @@ $irc-line-height: $font-18px;
.mx_ReplyChain {
margin: 0;
.mx_SenderProfile {
.mx_DisambiguatedProfile {
order: unset;
max-width: unset;
width: unset;