Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make the pill text single line (#8744)

Browse Source
This commit is contained in:
Suguru Hirahara 2022-06-19 09:56:37 +00:00 committed by GitHub
parent a434402b41
commit b1e07e8ef0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
res/css/views/elements/_Pill.scss
View File

@ -21,7 +21,9 @@ limitations under the License.
vertical-align: text-top;
display: inline-flex;
align-items: center;
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
cursor: pointer;
color: $accent-fg-color !important; // To override .markdown-body
@ -50,6 +52,13 @@ limitations under the License.
.mx_BaseAvatar {
margin-inline-start: -0.3em; // Otherwise the gap is too large
margin-inline-end: 0.2em;
min-width: $font-16px; // ensure the avatar is not compressed
}
.mx_Pill_linkText {
white-space: nowrap; // enforce the pill text to be a single line
overflow: hidden;
text-overflow: ellipsis;
}
a& {

1
res/css/views/elements/_ReplyChain.scss
View File

@ -24,6 +24,7 @@ limitations under the License.
&.mx_AccessibleButton_kind_link_inline {
padding: 0;
color: unset;
white-space: nowrap; // Enforce 'In reply to' to be a single line
&:hover {
color: $links;

6
res/css/views/rooms/_BasicMessageComposer.scss
View File

@ -57,6 +57,10 @@ limitations under the License.
user-select: all;
position: relative;
cursor: unset; // We don't want indicate clickability
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
// We don't want indicate clickability | To override the overriding of .markdown-body
@ -65,8 +69,10 @@ limitations under the License.
// avatar psuedo element
&::before {
display: inline-block;
content: var(--avatar-letter);
width: $font-16px;
min-width: $font-16px; // ensure the avatar is not compressed
height: $font-16px;
margin-inline-end: 0.24rem;
background: var(--avatar-background), $background;

6
src/components/views/elements/Pill.tsx
View File

@ -264,18 +264,20 @@ export default class Pill extends React.Component<IProps, IState> {
onClick={onClick}
onMouseOver={this.onMouseOver}
onMouseLeave={this.onMouseLeave}
dir="auto"
>
{ avatar }
{ linkText }
<span className="mx_Pill_linkText">{ linkText }</span>
{ tip }
</a> :
<span
className={classes}
onMouseOver={this.onMouseOver}
onMouseLeave={this.onMouseLeave}
dir="auto"
>
{ avatar }
{ linkText }
<span className="mx_Pill_linkText">{ linkText }</span>
{ tip }
</span> }
</MatrixClientContext.Provider>;

5
test/components/views/messages/TextualBody-test.tsx
View File

@ -331,11 +331,11 @@ describe("<TextualBody />", () => {
'<span class="mx_EventTile_body markdown-body" dir="auto">' +
'A <span><a class="mx_Pill mx_RoomPill" ' +
'href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com' +
'?via=example.com&amp;via=bob.com"' +
'?via=example.com&amp;via=bob.com" dir="auto"' +
'><img class="mx_BaseAvatar mx_BaseAvatar_image" ' +
'src="mxc://avatar.url/room.png" ' +
'style="width: 16px; height: 16px;" alt="" aria-hidden="true">' +
'room name</a></span> with vias</span>',
'<span class="mx_Pill_linkText">room name</span></a></span> with vias</span>',
);
});
@ -425,4 +425,3 @@ describe("<TextualBody />", () => {
});
});
});

2
test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View File

@ -14,4 +14,4 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
</span>"
`;
exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\">Hey <span><a class=\\"mx_Pill mx_UserPill\\"><img class=\\"mx_BaseAvatar mx_BaseAvatar_image\\" src=\\"mxc://avatar.url/image.png\\" style=\\"width: 16px; height: 16px;\\" alt=\\"\\" aria-hidden=\\"true\\">Member</a></span></span>"`;
exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\">Hey <span><a class=\\"mx_Pill mx_UserPill\\" dir=\\"auto\\"><img class=\\"mx_BaseAvatar mx_BaseAvatar_image\\" src=\\"mxc://avatar.url/image.png\\" style=\\"width: 16px; height: 16px;\\" alt=\\"\\" aria-hidden=\\"true\\"><span class=\\"mx_Pill_linkText\\">Member</span></a></span></span>"`;