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

Update Thread Panel to match latest designs (#12797)

Browse source 
* Add reusable empty state for the right panel

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

* Update tests

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

* Improve coverage

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

* Update Thread Panel to match latest Figma

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

* Update tests

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

* i18n

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

* Use --cpd-space var

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-23 10:12:07 +01:00 • committed by GitHub
parent 5308c91842
commit 25fcd6a65f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 8 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_common.pcss
View file

@ -851,7 +851,7 @@ legend {
@define-mixin ThreadSummaryIcon {
content: "";
display: inline-block;
mask-image: url("$(res)/img/element-icons/thread-summary.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;

9
res/css/views/right_panel/_ThreadPanel.pcss
View file

@ -18,12 +18,13 @@ limitations under the License.
height: 100px;
overflow: visible;
/* Unset flex on the thread list, but not the thread view */
&:not(.mx_ThreadView) .mx_BaseCard_header .mx_BaseCard_header_title {
flex: unset;
}
.mx_BaseCard_header {
.mx_BaseCard_header_title {
.mx_BaseCard_header_title_heading {
margin-right: auto;
}
.mx_AccessibleButton {
font-size: 12px;
color: $secondary-content;

4
res/css/views/rooms/_EventTile.pcss
View file

@ -1024,7 +1024,7 @@ $left-gutter: 64px;
$notification-dot-size: 8px; /* notification dot next to the timestamp */
margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); /* include the height of horizontal line */
padding: $padding $spacing-24 $padding $padding;
padding: $padding;
border-radius: $borderRadius;
display: flex;
@ -1039,7 +1039,7 @@ $left-gutter: 64px;
&::after {
$inset-block-start: auto;
$inset-inline-end: calc(32px - $padding);
$inset-inline-end: calc(-1 * var(--cpd-space-2x));
$inset-block-end: calc(-1 * var(--topOffset) - $hrHeight); /* exclude the height of horizontal line */
$inset-inline-start: calc(var(--leftOffset) + $padding);
inset: $inset-block-start $inset-inline-end $inset-block-end $inset-inline-start;