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

Fixes following threads design implementation review (#7100)

Browse source
This commit is contained in:
Germain 2021-11-11 11:00:18 +00:00 • committed by GitHub
parent b8edebecc9
commit 1de9630e44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 280 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

1
res/css/structures/_ContextualMenu.scss
View file

@ -38,7 +38,6 @@ limitations under the License.
position: absolute;
font-size: $font-14px;
z-index: 5001;
contain: content;
}
.mx_ContextualMenu_right {

2
res/css/structures/_RightPanel.scss
View file

@ -22,7 +22,7 @@ limitations under the License.
display: flex;
flex-direction: column;
border-radius: 8px;
padding: 4px 0;
padding: 8px 0;
box-sizing: border-box;
height: 100%;
contain: strict;

8
res/css/views/right_panel/_BaseCard.scss
View file

@ -22,7 +22,7 @@ limitations under the License.
flex: 1;
.mx_BaseCard_header {
margin: 8px 0;
margin: 4px 0;
> h2 {
margin: 0 44px;
@ -40,13 +40,13 @@ limitations under the License.
width: 20px;
margin: 12px;
top: 0;
border-radius: 10px;
border-radius: 50%;
&::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
height: inherit;
width: inherit;
top: 0;
left: 0;
mask-repeat: no-repeat;

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

@ -18,21 +18,29 @@ limitations under the License.
display: flex;
flex-direction: column;
padding-right: 0;
.mx_BaseCard_header {
margin-bottom: 12px;
.mx_BaseCard_close,
.mx_BaseCard_back {
margin-top: 15px;
width: 24px;
height: 24px;
}
.mx_BaseCard_back {
left: -4px;
}
.mx_BaseCard_close {
right: -8px;
right: -4px;
}
}
.mx_ThreadPanel__header {
.mx_BaseCard_back ~ .mx_ThreadPanel__header {
width: calc(100% - 60px);
margin-left: 30px;
}
.mx_ThreadPanel__header {
width: calc(100% - 30px);
height: 24px;
display: flex;
flex: 1;
justify-content: space-between;
@ -47,13 +55,23 @@ limitations under the License.
.mx_AccessibleButton {
font-size: 12px;
color: $primary-content;
color: $secondary-content;
}
.mx_MessageActionBar_optionsButton {
position: relative;
}
.mx_MessageActionBar_maskButton {
--size: 24px;
width: var(--size);
height: var(--size);
&::after {
mask-size: var(--size);
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
}
}
.mx_ContextualMenu_wrapper {
// It's added here due to some weird error if I pass it directly in the style, even though it's a numeric value, so it's being passed 0 instead.
// The error: react_devtools_backend.js:2526 Warning: `NaN` is an invalid value for the `top` css style property.
@ -70,6 +88,25 @@ limitations under the License.
font-size: 12px;
color: $secondary-content;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid $quinary-content;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
}
.mx_ContextualMenu_chevron_top {
left: auto;
right: 22px;
border-bottom-color: $quinary-content;
&::after {
content: "";
border: inherit;
border-bottom-color: $background;
position: absolute;
top: 1px;
left: -8px;
}
}
.mx_ThreadPanel_Header_FilterOptionItem {
@ -77,31 +114,33 @@ limitations under the License.
flex-grow: 1;
justify-content: space-between;
flex-direction: column;
overflow: visible;
width: 100%;
padding: 20px;
padding-left: 30px;
padding: 10px 20px 10px 30px;
position: relative;
&:hover {
background-color: $event-selected-color;
}
&[aria-selected="true"] {
&::before {
:first-child {
margin-left: -20px;
}
:first-child::before {
content: "";
width: 12px;
height: 12px;
grid-column: 1;
grid-row: 1;
margin-right: 8px;
mask-image: url("$(res)/img/feather-customised/check.svg");
mask-size: 100%;
mask-repeat: no-repeat;
position: absolute;
top: 22px;
left: 10px;
background-color: $primary-content;
display: inline-block;
vertical-align: middle;
}
}
:last-child {
color: $secondary-content;
}
}
}
@ -131,24 +170,20 @@ limitations under the License.
}
.mx_AutoHideScrollbar {
border-radius: 8px;
}
.mx_RoomView_messageListWrapper {
background: #fff;
background-color: $background;
padding: 8px;
border-radius: inherit;
border-radius: 8px;
width: calc(100% - 16px);
padding-right: 16px;
}
.mx_ScrollPanel {
.mx_RoomView_MessageList {
padding: 0;
}
.mx_RoomView_MessageList {
padding-left: 12px;
padding-right: 0;
}
.mx_EventTile, .mx_EventListSummary {
// Account for scrollbar when hovering
width: calc(100% - 3px);
margin: 0 2px;
padding-top: 0;
@ -170,19 +205,28 @@ limitations under the License.
.mx_DateSeparator {
display: none;
}
&.mx_EventTile_clamp:hover {
cursor: pointer;
}
}
.mx_EventTile:not([data-layout=bubble]) {
.mx_EventTile_e2eIcon {
left: 8px;
}
}
.mx_MessageComposer {
background-color: $background;
border-radius: 8px;
margin-top: 8px;
width: calc(100% - 8px);
padding: 0 8px;
box-sizing: border-box;
}
.mx_ThreadPanel_dropdown {
padding: 4px 8px;
padding: 3px 8px;
border-radius: 4px;
line-height: 1.5;
user-select: none;
@ -207,6 +251,36 @@ limitations under the License.
.mx_ThreadPanel_dropdown[aria-expanded=true]::before {
transform: rotate(180deg);
}
.mx_MessageTimestamp {
font-size: $font-12px;
}
}
.mx_ThreadPanel_replies {
margin-top: 8px;
}
.mx_ThreadPanel_repliesSummary {
&::before {
content: "";
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
mask-position: center;
display: inline-block;
height: 18px;
min-width: 18px;
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: contain;
margin-right: 8px;
vertical-align: middle;
}
color: $secondary-content;
font-weight: 600;
float: left;
margin-right: 12px;
font-size: $font-12px;
}
.mx_ThreadPanel_viewInRoom::before {

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

@ -460,6 +460,16 @@ $left-gutter: 64px;
}
}
.mx_EventTile_clamp {
.mx_EventTile_body {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
}
}
.mx_EventTile_content .markdown-body {
font-family: inherit !important;
white-space: normal !important;
@ -663,7 +673,10 @@ $left-gutter: 64px;
}
.mx_ThreadInfo {
height: 35px;
min-width: 267px;
max-width: min(calc(100% - 64px), 600px);
width: auto;
height: 40px;
position: relative;
background-color: $system;
padding-left: 12px;
@ -671,13 +684,13 @@ $left-gutter: 64px;
align-items: center;
border-radius: 8px;
padding-right: 16px;
padding-top: 8px;
padding-bottom: 8px;
margin-top: 8px;
font-size: $font-12px;
color: $secondary-content;
box-sizing: border-box;
justify-content: flex-start;
clear: both;
overflow: hidden;
&:hover {
cursor: pointer;
@ -687,6 +700,44 @@ $left-gutter: 64px;
padding-left: 11px;
padding-right: 15px;
}
&::before {
content: "";
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
mask-position: center;
height: 18px;
min-width: 18px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
}
&::after {
content: "›";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60px;
padding: 0 10px;
font-size: 15px;
line-height: 39px;
box-sizing: border-box;
text-align: right;
font-weight: 600;
background: linear-gradient(270deg, $system 52.6%, transparent 100%);
opacity: 0;
transform: translateX(20px);
transition: all .1s ease-in-out;
}
&:hover::after {
opacity: 1;
transform: translateX(0);
}
}
.mx_ThreadInfo_content {
@ -703,15 +754,6 @@ $left-gutter: 64px;
float: left;
}
.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;
@ -720,10 +762,10 @@ $left-gutter: 64px;
}
.mx_EventTile[data-shape=thread_list] {
--topOffset: 24px;
--topOffset: 20px;
--leftOffset: 46px;
margin: var(--topOffset) 0;
margin: var(--topOffset) 16px var(--topOffset) 0;
border-radius: 8px;
&:hover {
@ -819,6 +861,7 @@ $left-gutter: 64px;
left: auto;
right: 2px !important;
top: 1px !important;
font-size: 1rem;
}
.mx_ReactionsRow {
@ -830,7 +873,8 @@ $left-gutter: 64px;
}
}
.mx_EventTile_content {
.mx_EventTile_content,
.mx_RedactedBody {
margin-left: 36px;
margin-right: 50px;
}