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

Design thread list tiles according to mockups (#7078)

Browse source
This commit is contained in:
Germain 2021-11-03 18:05:01 +00:00 • committed by GitHub
parent 2a20d9a7df
commit 38750202ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 332 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

37
res/css/views/right_panel/_ThreadPanel.scss
View file

@ -21,13 +21,10 @@ limitations under the License.
padding-right: 0;
.mx_BaseCard_header {
padding: 6px 8px 6px 0;
.mx_BaseCard_close,
.mx_BaseCard_back {
margin-top: 15px;
}
.mx_BaseCard_close {
right: -8px;
}
@ -39,6 +36,7 @@ limitations under the License.
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
span:first-of-type {
font-weight: 600;
@ -49,7 +47,11 @@ limitations under the License.
.mx_AccessibleButton {
font-size: 12px;
color: $secondary-content;
color: $primary-content;
}
.mx_MessageActionBar_optionsButton {
position: relative;
}
.mx_ContextualMenu_wrapper {
@ -178,6 +180,33 @@ limitations under the License.
padding: 0 8px;
box-sizing: border-box;
}
.mx_ThreadPanel_dropdown {
padding: 4px 8px;
border-radius: 4px;
line-height: 1.5;
user-select: none;
}
.mx_ThreadPanel_dropdown:hover,
.mx_ThreadPanel_dropdown[aria-expanded=true] {
background: $quinary-content;
}
.mx_ThreadPanel_dropdown::before {
content: "";
width: 18px;
height: 18px;
background: currentColor;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-size: 100%;
mask-repeat: no-repeat;
float: right;
}
.mx_ThreadPanel_dropdown[aria-expanded=true]::before {
transform: rotate(180deg);
}
}
.mx_ThreadPanel_viewInRoom::before {

90
res/css/views/rooms/_EventTile.scss
View file

@ -687,28 +687,82 @@ $left-gutter: 64px;
padding-left: 11px;
padding-right: 15px;
}
}
.mx_ThreadInfo_content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-left: 8px;
.mx_ThreadInfo_content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-left: 8px;
}
.mx_ThreadInfo_thread-icon {
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
mask-position: center;
height: 16px;
min-width: 16px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_ThreadInfo_threads-amount {
font-weight: 600;
position: relative;
padding: 0 8px;
white-space: nowrap;
}
.mx_EventTile[data-shape=thread_list] {
--topOffset: 24px;
--leftOffset: 46px;
margin: var(--topOffset) 0;
border-radius: 8px;
&:hover {
background-color: $system;
}
.mx_ThreadInfo_thread-icon {
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
mask-position: center;
height: 16px;
min-width: 16px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
&::after {
content: "";
position: absolute;
left: var(--leftOffset);
right: 0;
height: 1px;
bottom: calc(-1 * var(--topOffset));
background-color: $quinary-content;
}
.mx_ThreadInfo_threads-amount {
font-weight: 600;
position: relative;
padding: 0 8px;
white-space: nowrap;
&:last-child {
&::after {
content: unset;
}
margin-bottom: 0;
}
&:first-child {
margin-top: 0;
}
padding-top: 0;
.mx_EventTile_avatar {
top: -4px;
left: 0;
}
.mx_SenderProfile {
margin-left: var(--leftOffset) !important;
}
.mx_EventTile_line {
padding-left: var(--leftOffset) !important;
padding-bottom: 0;
}
.mx_MessageTimestamp {
right: 0;
left: auto;
top: -23px;
}
}