Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Pinned message list: prevent sender name to overflow pinned event tile #12947

Merged
merged 3 commits into from
Sep 4, 2024
Merged

Pinned message list: prevent sender name to overflow pinned event tile #12947

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
7cdcdad
Prevent sender name to overflow pinned event tile
florianduros Sep 2, 2024
d237e40
Add tooltip to display the sender name
florianduros Sep 3, 2024
01abcb3
Merge branch 'refs/heads/develop' into florianduros/pinned-messages/f…
florianduros Sep 4, 2024
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
3 changes: 3 additions & 0 deletions res/css/views/rooms/_PinnedEventTile.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ limitations under the License.
/* Remove avatar width and space between the avatar and the wrapper */
/* We need it to make the location fit */
width: calc(100% - var(--cpd-space-4x) - 32px);
/* Prevent a long sender name to overflow the tile */
overflow: hidden;

.mx_PinnedEventTile_top {
display: flex;
Expand All @@ -37,6 +39,7 @@ limitations under the License.
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font: var(--cpd-font-body-md-semibold);
}
}

Expand Down
14 changes: 6 additions & 8 deletions src/components/views/rooms/PinnedEventTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ limitations under the License.

import React, { JSX, useCallback, useState } from "react";
import { EventTimeline, EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import { IconButton, Menu, MenuItem, Separator, Text } from "@vector-im/compound-web";
import { IconButton, Menu, MenuItem, Separator, Tooltip } from "@vector-im/compound-web";
import { Icon as ViewIcon } from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg";
import { Icon as ForwardIcon } from "@vector-im/compound-design-tokens/icons/forward.svg";
Expand Down Expand Up @@ -86,13 +86,11 @@ export function PinnedEventTile({ event, room, permalinkCreator }: PinnedEventTi
</div>
<div className="mx_PinnedEventTile_wrapper">
<div className="mx_PinnedEventTile_top">
<Text
weight="semibold"
className={classNames("mx_PinnedEventTile_sender", getUserNameColorClass(sender))}
as="span"
>
{event.sender?.name || sender}
</Text>
<Tooltip label={event.sender?.name || sender}>
<span className={classNames("mx_PinnedEventTile_sender", getUserNameColorClass(sender))}>
{event.sender?.name || sender}
</span>
</Tooltip>
<PinMenu event={event} room={room} permalinkCreator={permalinkCreator} />
</div>
<MessageEvent
Expand Down
8 changes: 4 additions & 4 deletions test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
class="mx_PinnedEventTile_top"
>
<span
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
class="mx_PinnedEventTile_sender mx_Username_color3"
>
@alice:example.org
</span>
Expand Down Expand Up @@ -218,7 +218,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
class="mx_PinnedEventTile_top"
>
<span
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
class="mx_PinnedEventTile_sender mx_Username_color3"
>
@alice:example.org
</span>
Expand Down Expand Up @@ -347,7 +347,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
class="mx_PinnedEventTile_top"
>
<span
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
class="mx_PinnedEventTile_sender mx_Username_color3"
>
@alice:example.org
</span>
Expand Down Expand Up @@ -413,7 +413,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
class="mx_PinnedEventTile_top"
>
<span
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
class="mx_PinnedEventTile_sender mx_Username_color3"
>
@alice:example.org
</span>
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
class="mx_PinnedEventTile_top"
>
<span
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color2"
class="mx_PinnedEventTile_sender mx_Username_color2"
>
@alice:server.org
</span>
Expand Down Expand Up @@ -90,7 +90,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
class="mx_PinnedEventTile_top"
>
<span
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color2"
class="mx_PinnedEventTile_sender mx_Username_color2"
>
@alice:server.org
</span>
Expand Down
Loading