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

Message Pinning: rework the message pinning list in the right panel (#12825)

Browse source 
* Fix pinning event loading after restart

* Update deps

* Replace pinned event list

* Add a dialog to confirm to unpin all messages

* Use `EmptyState` when there is no pinned messages

* Rework `PinnedEventTile` tests

* Add comments and refactor `PinnedMessageCard`

* Rework `PinnedMessageCard` tests

* Add tests for `UnpinAllDialog`

* Add e2e tests for pinned messages

* Replace 3px custom gap by 4px gap

* Use string interpolation for `Pin` action.

* Update playright sceenshot for empty state
This commit is contained in:
Florian Duros 2024-08-16 14:16:06 +02:00 • committed by GitHub
parent 88cf643cbd
commit 6f3dc30693
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 2099 additions and 507 deletions
Download patch file Download diff file Expand all files Collapse all files

104
res/css/views/rooms/_PinnedEventTile.pcss
View file

@ -15,95 +15,27 @@ limitations under the License.
*/
.mx_PinnedEventTile {
min-height: 40px;
width: 100%;
padding: 0 4px 12px;
display: flex;
gap: var(--cpd-space-4x);
align-items: flex-start;
display: grid;
grid-template-areas:
"avatar name remove"
"content content content"
"footer footer footer";
grid-template-rows: max-content auto max-content;
grid-template-columns: 24px auto 24px;
grid-row-gap: 12px;
grid-column-gap: 8px;
.mx_PinnedEventTile_wrapper {
display: flex;
flex-direction: column;
gap: var(--cpd-space-1x);
width: 100%;
& + .mx_PinnedEventTile {
padding: 12px 4px;
border-top: 1px solid $menu-border-color;
}
.mx_PinnedEventTile_top {
display: flex;
gap: var(--cpd-space-1x);
justify-content: space-between;
align-items: center;
.mx_PinnedEventTile_senderAvatar,
.mx_PinnedEventTile_sender,
.mx_PinnedEventTile_unpinButton,
.mx_PinnedEventTile_message,
.mx_PinnedEventTile_footer {
min-width: 0; /* Prevent a grid blowout */
}
.mx_PinnedEventTile_senderAvatar {
grid-area: avatar;
}
.mx_PinnedEventTile_sender {
grid-area: name;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_PinnedEventTile_unpinButton {
visibility: hidden;
grid-area: remove;
position: relative;
width: 24px;
height: 24px;
border-radius: 8px;
&:hover {
background-color: $roomheader-addroom-bg-color;
}
&::before {
content: "";
position: absolute;
height: inherit;
width: inherit;
background: $secondary-content;
mask-position: center;
mask-size: 8px;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/image-view/close.svg");
}
}
.mx_PinnedEventTile_message {
grid-area: content;
}
.mx_PinnedEventTile_footer {
grid-area: footer;
font-size: $font-10px;
line-height: 12px;
.mx_PinnedEventTile_timestamp {
color: $secondary-content;
display: unset;
width: unset; /* Cancel the default width value */
}
.mx_AccessibleButton_kind_link {
margin-left: 12px;
}
}
&:hover {
.mx_PinnedEventTile_unpinButton {
visibility: visible;
.mx_PinnedEventTile_sender {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
}