PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix thread filter being cut-off on narrow screens (#7354)

Browse source
This commit is contained in:
Germain 2021-12-14 09:43:51 +00:00 committed by GitHub
parent 132e19beb7
commit d00809b8b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -71,77 +71,6 @@ limitations under the License.
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.
top: 43px;
}
.mx_ContextualMenu {
position: initial;
span:first-of-type {
font-weight: 600;
font-size: 12px;
color: $primary-content;
}
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 {
display: flex;
flex-grow: 1;
justify-content: space-between;
flex-direction: column;
padding: 10px 20px 10px 30px;
position: relative;
&:hover {
background-color: $event-selected-color;
}
&[aria-checked="true"] {
:first-child {
margin-left: -20px;
}
:first-child::before {
content: "";
width: 12px;
height: 12px;
margin-right: 8px;
mask-image: url("$(res)/img/feather-customised/check.svg");
mask-size: 100%;
mask-repeat: no-repeat;
background-color: $primary-content;
display: inline-block;
vertical-align: middle;
}
}
:last-child {
color: $secondary-content;
}
}
}
.mx_ThreadPanel_button {
@ -347,3 +276,70 @@ limitations under the License.
background-color: $secondary-content;
}
}
.mx_ContextualMenu_wrapper.mx_ThreadPanel__header {
.mx_ContextualMenu {
position: initial;
span:first-of-type {
font-weight: $font-semi-bold;
font-size: inherit;
color: $primary-content;
}
font-size: $font-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 {
display: flex;
flex-grow: 1;
justify-content: space-between;
flex-direction: column;
padding: 10px 20px 10px 30px;
position: relative;
&:hover {
background-color: $event-selected-color;
}
&[aria-checked="true"] {
:first-child {
margin-left: -20px;
}
:first-child::before {
content: "";
width: 12px;
height: 12px;
margin-right: 8px;
mask-image: url("$(res)/img/feather-customised/check.svg");
mask-size: 100%;
mask-repeat: no-repeat;
background-color: $primary-content;
display: inline-block;
vertical-align: middle;
}
}
:last-child {
color: $secondary-content;
}
}
}

6
src/components/structures/ThreadPanel.tsx
View file

@ -137,11 +137,11 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption }: {
isSelected={opt === value}
/>);
const contextMenu = menuDisplayed ? <ContextMenu
top={0}
right={25}
top={100}
right={33}
onFinished={closeMenu}
chevronFace={ChevronFace.Top}
mountAsChild={true}
wrapperClassName="mx_ThreadPanel__header"
>
{ contextMenuOptions }
</ContextMenu> : null;