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

Update design of files list in right panel (#144)

Browse source 
* Update design of files list in right panel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Make i18n script happier

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Discard changes to src/components/structures/MessagePanel.tsx

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix flaky screenshot test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-14 19:08:05 +01:00 • committed by GitHub
parent d770e2afcc
commit 07506253f9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 276 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

47
res/css/structures/_FilePanel.pcss
View file

@ -20,70 +20,51 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomView_MessageList {
width: 100%;
h2 {
display: none;
}
gap: var(--cpd-space-6x);
}
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
we should make EventTile a base CSS class and customise it specifically
for usage in {Message,File,Notification}Panel. */
.mx_EventTile_avatar {
display: none;
}
/* Overrides for the attachment body tiles */
.mx_EventTile {
word-break: break-word;
margin-top: 10px;
padding-top: 0;
& + .mx_EventTile {
border-top: 1px solid var(--cpd-color-gray-400);
padding-top: var(--cpd-space-6x);
}
.mx_EventTile_line {
padding-inline-start: 0;
}
.mx_MFileBody {
line-height: 2.4rem;
}
.mx_MFileBody_download {
padding-top: $spacing-8;
display: flex;
justify-content: space-between;
font: var(--cpd-font-body-md-regular);
color: $event-timestamp-color;
.mx_MImageBody_size {
font: var(--cpd-font-body-md-regular);
text-align: right;
white-space: nowrap;
}
}
.mx_MFileBody_downloadLink {
flex: 1 1 auto;
color: $light-fg-color;
margin-top: var(--cpd-space-4x);
}
/* anchor link as wrapper */
.mx_EventTile_senderDetailsLink {
text-decoration: none;
margin-bottom: var(--cpd-space-1x);
display: block;
.mx_EventTile_senderDetails {
display: flex;
justify-content: space-between;
margin-top: -2px;
gap: var(--cpd-space-2x);
align-items: center;
.mx_DisambiguatedProfile {
color: $event-timestamp-color; /* for ellipsis. Color of displayName and mxid is inherited */
}
.mx_MessageTimestamp {
text-align: right;
color: $secondary-content;
font: var(--cpd-font-body-sm-regular);
margin-left: auto;
font: var(--cpd-font-body-xs-regular);
color: var(--cpd-color-text-secondary);
}
}
}

28
res/css/views/messages/_MFileBody.pcss
View file

@ -8,25 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_MFileBody_download {
color: $accent;
.mx_MFileBody_download_icon {
/* 12px instead of 14px to better match surrounding font size */
width: 12px;
height: 12px;
mask-size: 12px;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/download.svg");
background-color: $accent;
display: inline-block;
}
}
.mx_MFileBody_download a {
color: $accent;
text-decoration: none;
cursor: pointer;
height: var(--cpd-space-9x);
}
.mx_MFileBody_download object {
@ -43,12 +25,6 @@ Please see LICENSE files in the repository root for full details.
padding: 0px;
border: none;
width: 100%;
/* Set the height of the iframe to be 1 line of text.
* Iframes don't automatically size themselves to fit their content.
* So either we have to fix the height of the iframe using CSS or
* use javascript's cross-origin postMessage API to communicate how
* big the content of the iframe is. */
height: 1.5em;
}
.mx_MFileBody_info {
@ -81,6 +57,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MFileBody_info_filename {
font: var(--cpd-font-body-md-regular);
color: var(--cpd-color-text-primary);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;