put show more button inside resizer

this way we have a flexbox layout in the resizer with:
 - the resize handle (fixed)
 - the show more/less button, if any (fixed)
 - the list of tiles (grabbing whatever is left)
pull/21833/head
Bruno Windels 2020-07-10 18:29:39 +02:00
parent 859f65659c
commit d5a3071518
2 changed files with 19 additions and 7 deletions

View File

@ -186,12 +186,22 @@ limitations under the License.
flex-direction: column;
overflow: hidden;
.mx_RoomSublist2_tiles {
flex: 1 0 0;
overflow: hidden;
// need this to be flex otherwise the overflow hidden from above
// sometimes vertically centers the clipped list ... no idea why it would do this
// as the box model should be top aligned. Happens in both FF and Chromium
display: flex;
flex-direction: column;
}
.mx_RoomSublist2_resizerHandles_showNButton {
position: absolute;
bottom: -32px; // height of the button
left: 0;
right: 0;
height: 4px; // height of the handle
flex: 0 0 32px;
}
.mx_RoomSublist2_resizerHandles {
flex: 0 0 4px;
}
// Class name comes from the ResizableBox component

View File

@ -666,9 +666,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
className="mx_RoomSublist2_resizeBox"
enable={handles}
>
{visibleTiles}
<div className="mx_RoomSublist2_tiles">
{visibleTiles}
</div>
{showNButton}
</Resizable>
{showNButton}
</React.Fragment>
);
}