Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make the pill text single line #8744

Merged
merged 3 commits into from
Jun 19, 2022
Merged

Make the pill text single line #8744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c99569
Enforce the pill text to be a single line
luixxiul Jun 2, 2022
318826e
Ensure the avatar is not compressed
luixxiul Jun 19, 2022
114b199
Ensure the pill on the message composer to be a single line
luixxiul Jun 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion res/css/views/elements/_Pill.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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& {
Expand Down
1 change: 1 addition & 0 deletions res/css/views/elements/_ReplyChain.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 6 additions & 0 deletions res/css/views/rooms/_BasicMessageComposer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
Expand Down
6 changes: 4 additions & 2 deletions src/components/views/elements/Pill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down
5 changes: 2 additions & 3 deletions test/components/views/messages/TextualBody-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>',
);
});

Expand Down Expand Up @@ -425,4 +425,3 @@ describe("<TextualBody />", () => {
});
});
});

2 changes: 1 addition & 1 deletion test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>"`;