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

Iterate design of right panel empty state (#12796)

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>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-19 18:17:40 +01:00 • committed by GitHub
parent d202295015
commit 0fc1c53a8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 266 additions and 280 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -106,10 +106,17 @@ limitations under the License.
}
.mx_RoomView_messagePanel {
/* To avoid the rule from being applied to .mx_ThreadPanel_empty */
&.mx_RoomView_messageListWrapper {
position: initial;
}
.mx_RoomView_messageListWrapper {
width: calc(100% + 6px); /* 8px - 2px */
}
.mx_RoomView_empty {
display: contents;
}
}
.mx_RoomView_MessageList {
@ -168,72 +175,6 @@ limitations under the License.
mask-image: url("$(res)/img/element-icons/link.svg");
}
.mx_ThreadPanel_empty {
border-radius: 8px;
background: $background;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
padding: 20px;
box-sizing: border-box; /* Include padding and border */
width: 100%;
h2 {
color: $primary-content;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
margin-top: 24px;
margin-bottom: 10px;
}
p {
font-size: $font-15px;
color: $secondary-content;
margin: 10px 0;
}
button {
border: none;
background: none;
color: $accent;
font-size: $font-15px;
&:hover,
&:active {
text-decoration: underline;
cursor: pointer;
}
}
.mx_ThreadPanel_empty_tip {
font-size: $font-12px;
line-height: $font-15px;
> b {
font-weight: var(--cpd-font-weight-semibold);
}
}
}
.mx_ThreadPanel_largeIcon {
width: 28px;
height: 28px;
padding: 18px;
background: $system;
border-radius: 50%;
&::after {
@mixin ThreadSummaryIcon;
width: inherit;
height: inherit;
}
}
.mx_ContextualMenu_wrapper {
.mx_ThreadPanel_Header_FilterOptionItem {
display: flex;