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

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

Browse Source 
* Prevent sender name to overflow pinned event tile

* Add tooltip to display the sender name
This commit is contained in:
Florian Duros 2024-09-04 11:45:18 +02:00 committed by GitHub
parent ab1e28bfea
commit 1e3320da1e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
res/css/views/rooms/_PinnedEventTile.pcss
View File

@ -26,6 +26,8 @@ limitations under the License.
/* Remove avatar width and space between the avatar and the wrapper */ /* Remove avatar width and space between the avatar and the wrapper */
/* We need it to make the location fit */ /* We need it to make the location fit */
width: calc(100% - var(--cpd-space-4x) - 32px); width: calc(100% - var(--cpd-space-4x) - 32px);
/* Prevent a long sender name to overflow the tile */
overflow: hidden;
.mx_PinnedEventTile_top { .mx_PinnedEventTile_top {
display: flex; display: flex;
@ -37,6 +39,7 @@ limitations under the License.
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
font: var(--cpd-font-body-md-semibold);
} }
} }

12
src/components/views/rooms/PinnedEventTile.tsx
View File

@ -17,7 +17,7 @@ limitations under the License.
import React, { JSX, useCallback, useState } from "react"; import React, { JSX, useCallback, useState } from "react";
import { EventTimeline, EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; 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 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 UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg";
import { Icon as ForwardIcon } from "@vector-im/compound-design-tokens/icons/forward.svg"; import { Icon as ForwardIcon } from "@vector-im/compound-design-tokens/icons/forward.svg";
@ -86,13 +86,11 @@ export function PinnedEventTile({ event, room, permalinkCreator }: PinnedEventTi
</div> </div>
<div className="mx_PinnedEventTile_wrapper"> <div className="mx_PinnedEventTile_wrapper">
<div className="mx_PinnedEventTile_top"> <div className="mx_PinnedEventTile_top">
<Text <Tooltip label={event.sender?.name || sender}>
weight="semibold" <span className={classNames("mx_PinnedEventTile_sender", getUserNameColorClass(sender))}>
className={classNames("mx_PinnedEventTile_sender", getUserNameColorClass(sender))}
as="span"
>
{event.sender?.name || sender} {event.sender?.name || sender}
</Text> </span>
</Tooltip>
<PinMenu event={event} room={room} permalinkCreator={permalinkCreator} /> <PinMenu event={event} room={room} permalinkCreator={permalinkCreator} />
</div> </div>
<MessageEvent <MessageEvent

8
test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
View File

@ -152,7 +152,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
class="mx_PinnedEventTile_top" class="mx_PinnedEventTile_top"
> >
<span <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 @alice:example.org
</span> </span>
@ -218,7 +218,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
class="mx_PinnedEventTile_top" class="mx_PinnedEventTile_top"
> >
<span <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 @alice:example.org
</span> </span>
@ -347,7 +347,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
class="mx_PinnedEventTile_top" class="mx_PinnedEventTile_top"
> >
<span <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 @alice:example.org
</span> </span>
@ -413,7 +413,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
class="mx_PinnedEventTile_top" class="mx_PinnedEventTile_top"
> >
<span <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 @alice:example.org
</span> </span>

4
test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
View File

@ -25,7 +25,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
class="mx_PinnedEventTile_top" class="mx_PinnedEventTile_top"
> >
<span <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 @alice:server.org
</span> </span>
@ -90,7 +90,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
class="mx_PinnedEventTile_top" class="mx_PinnedEventTile_top"
> >
<span <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 @alice:server.org
</span> </span>