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

Merge pull request #5557 from matrix-org/travis/fix-widget-resizing

Browse source 
Give a bigger target area to AppsDrawer vertical resizer
This commit is contained in:
Travis Ralston 2021-01-21 07:17:29 -07:00 committed by GitHub
commit f52405de38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
res/css/views/rooms/_AppsDrawer.scss
View file

@ -24,26 +24,45 @@ $MiniAppTileHeight: 200px;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
.mx_AppsContainer_resizerHandleContainer {
width: 100%;
height: 10px;
margin-top: -3px; // move it up so the interactions are slightly more comfortable
display: block;
position: relative;
}
.mx_AppsContainer_resizerHandle { .mx_AppsContainer_resizerHandle {
cursor: ns-resize; cursor: ns-resize;
border-radius: 3px;
// Override styles from library // Override styles from library, making the whole area the target area
width: unset !important; width: 100% !important;
height: 4px !important; height: 100% !important;
// This is positioned directly below frame // This is positioned directly below frame
position: absolute; position: absolute;
bottom: -8px !important; // override from library bottom: 0 !important; // override from library
// We then render the pill handle in an ::after to keep it in the handle's
// area without being a massive line across the screen
&::after {
content: '';
position: absolute;
border-radius: 3px;
// The combination of these two should make the pill 4px high
top: 6px;
bottom: 0;
// Together, these make the bar 64px wide // Together, these make the bar 64px wide
// These are also overridden from the library // These are also overridden from the library
left: calc(50% - 32px) !important; left: calc(50% - 32px);
right: calc(50% - 32px) !important; right: calc(50% - 32px);
}
} }
&:hover { &:hover {
.mx_AppsContainer_resizerHandle { .mx_AppsContainer_resizerHandle::after {
opacity: 0.8; opacity: 0.8;
background: $primary-fg-color; background: $primary-fg-color;
} }

1
src/components/views/rooms/AppsDrawer.js
View file

@ -252,6 +252,7 @@ export default class AppsDrawer extends React.Component {
minHeight={100} minHeight={100}
maxHeight={this.props.maxHeight ? this.props.maxHeight - 50 : undefined} maxHeight={this.props.maxHeight ? this.props.maxHeight - 50 : undefined}
handleClass="mx_AppsContainer_resizerHandle" handleClass="mx_AppsContainer_resizerHandle"
handleWrapperClass="mx_AppsContainer_resizerHandleContainer"
className="mx_AppsContainer_resizer" className="mx_AppsContainer_resizer"
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.props.resizeNotifier}
> >