Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Fix dropdown menu positions when scrolling (#22916)

Browse source 
* Update react-overlays to latest version

* Fix breaking changes in dropdown menus

* Use react-overlays built-in arrow positioning feature
* Re-implemented `.dropdown-menu__arrow` to have a defined width and height to improve positioning
* Moved wrapping div (`.dropdown-menu` from `DropdownMenu` to `Dropdown`)
* Wrap button in a span to solve issue with ref
* Temporarily remove animations

* Fix breaking changes in emoji picker

* Wrap EmojiPickerMenu in a div where react-overlays’ ref is added

* Fix breaking changes in language dropdown

* Fix breaking changes in privacy dropdown

* Fix breaking changes in search form

* Add animations back using `@keyframes`

* Fix arrow color in light theme

* Fix linting issue

* Remove unused `mounted` state

* Remove `placement` state from components and redux

And remove the placement state from props of the menu components.

* Remove abolution position to fix flip issue

* Remove z-index to fix modals and overlay positions

* Fix lint issues

* Set placement in privacy and language components

Copy the placement state into the `PrivacyDropdown` and `LanguageDropdown` components, to apply correct styling to the buttons depending on which placement the Overlay has.

* Move `placement` state to correct component
This commit is contained in:
Peter Simonsson 2023-01-11 21:58:46 +01:00 • committed by GitHub
parent ae62e5fa53
commit fd33bcb3b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 301 additions and 271 deletions
Download patch file Download diff file Expand all files Collapse all files

18
app/javascript/styles/mastodon-light/diff.scss
View file

@ -285,22 +285,8 @@ html {
.dropdown-menu {
background: $white;
&__arrow {
&.left {
border-left-color: $white;
}
&.top {
border-top-color: $white;
}
&.bottom {
border-bottom-color: $white;
}
&.right {
border-right-color: $white;
}
&__arrow::before {
background-color: $white;
}
&__item {

87
app/javascript/styles/mastodon/components.scss
View file

@ -363,8 +363,8 @@
}
}
.dropdown-menu {
position: absolute;
body > [data-popper-placement] {
z-index: 3;
}
.invisible {
@ -1932,6 +1932,42 @@ a.account__display-name {
text-decoration: none;
}
.dropdown-animation {
animation: dropdown 300ms cubic-bezier(0.1, 0.7, 0.1, 1);
@keyframes dropdown {
from {
opacity: 0;
transform: scaleX(0.85) scaleY(0.75);
}
to {
opacity: 1;
transform: scaleX(1) scaleY(1);
}
}
&.top {
transform-origin: bottom;
}
&.right {
transform-origin: left;
}
&.bottom {
transform-origin: top;
}
&.left {
transform-origin: right;
}
.reduce-motion & {
animation: none;
}
}
.dropdown {
display: inline-block;
}
@ -2016,36 +2052,42 @@ a.account__display-name {
.dropdown-menu__arrow {
position: absolute;
width: 0;
height: 0;
border: 0 solid transparent;
&.left {
right: -5px;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: $ui-secondary-color;
&::before {
content: '';
display: block;
width: 14px;
height: 5px;
background-color: $ui-secondary-color;
mask-image: url("data:image/svg+xml;utf8,<svg width='14' height='5' xmlns='http://www.w3.org/2000/svg'><path d='M7 0L0 5h14L7 0z' fill='white'/></svg>");
}
&.top {
bottom: -5px;
margin-left: -7px;
border-width: 5px 7px 0;
border-top-color: $ui-secondary-color;
&::before {
transform: rotate(180deg);
}
}
&.right {
left: -9px;
&::before {
transform: rotate(-90deg);
}
}
&.bottom {
top: -5px;
margin-left: -7px;
border-width: 0 7px 5px;
border-bottom-color: $ui-secondary-color;
}
&.right {
left: -5px;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: $ui-secondary-color;
&.left {
right: -9px;
&::before {
transform: rotate(90deg);
}
}
}
@ -4524,7 +4566,6 @@ a.status-card.compact:hover {
}
.privacy-dropdown__dropdown {
position: absolute;
background: $simple-background-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
border-radius: 4px;
@ -4630,7 +4671,6 @@ a.status-card.compact:hover {
.language-dropdown {
&__dropdown {
position: absolute;
background: $simple-background-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
border-radius: 4px;
@ -4877,7 +4917,6 @@ a.status-card.compact:hover {
.modal-root__modal {
pointer-events: auto;
display: flex;
z-index: 9999;
}
.video-modal__container {