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

Iterate on the new room list resize handle

Browse source 
Only show shadow when resizing, increase the hit area, and make the handle show up when the list itself is hovered.
This commit is contained in:
Travis Ralston 2020-06-25 16:03:56 -06:00
parent bebd0a35af
commit 555078a993
2 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
res/css/views/rooms/_RoomSublist2.scss
View file

@ -245,24 +245,23 @@ limitations under the License.
cursor: ns-resize;
border-radius: 3px;
// Update the render() function for RoomSublist2 if this changes
height: 3px;
// Update RESIZE_HANDLE_HEIGHT if this changes
height: 4px;
// This is positioned directly below the 'show more' button.
position: absolute;
bottom: 0;
// Together, these make the bar 48px wide
left: calc(50% - 24px);
right: calc(50% - 24px);
// Together, these make the bar 64px wide
left: calc(50% - 32px);
right: calc(50% - 32px);
}
// TODO: Use less sketchy selector by replacing the resize component entirely
// This causes flickering.
.mx_RoomSublist2_showNButton:hover + .react-resizable-handle,
.react-resizable-handle:hover {
opacity: 0.8;
background-color: $primary-fg-color;
&:hover, &.mx_RoomSublist2_hasMenuOpen {
.react-resizable-handle {
opacity: 0.8;
background-color: $primary-fg-color;
}
}
}

16
src/components/views/rooms/RoomSublist2.tsx
View file

@ -43,7 +43,7 @@ import { TagID } from "../../../stores/room-list/models";
*******************************************************************/
const SHOW_N_BUTTON_HEIGHT = 32; // As defined by CSS
const RESIZE_HANDLE_HEIGHT = 3; // As defined by CSS
const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT;
@ -70,6 +70,7 @@ interface IProps {
interface IState {
notificationState: ListNotificationState;
menuDisplayed: boolean;
isResizing: boolean;
}
export default class RoomSublist2 extends React.Component<IProps, IState> {
@ -82,6 +83,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
this.state = {
notificationState: new ListNotificationState(this.props.isInvite, this.props.tagId),
menuDisplayed: false,
isResizing: false,
};
this.state.notificationState.setRooms(this.props.rooms);
}
@ -111,6 +113,14 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
this.forceUpdate(); // because the layout doesn't trigger a re-render
};
private onResizeStart = () => {
this.setState({isResizing: true});
};
private onResizeStop = () => {
this.setState({isResizing: false});
};
private onShowAllClick = () => {
this.props.layout.visibleTiles = this.props.layout.tilesWithPadding(this.numTiles, MAX_PADDING_HEIGHT);
this.forceUpdate(); // because the layout doesn't trigger a re-render
@ -359,7 +369,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
const maxTilesFactored = layout.tilesWithResizerBoxFactor(tiles.length);
const showMoreBtnClasses = classNames({
'mx_RoomSublist2_showNButton': true,
'mx_RoomSublist2_isCutting': layout.visibleTiles < maxTilesFactored,
'mx_RoomSublist2_isCutting': this.state.isResizing && layout.visibleTiles < maxTilesFactored,
});
// If we're hiding rooms, show a 'show more' button to the user. This button
@ -438,6 +448,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
resizeHandles={handles}
onResize={this.onResize}
className="mx_RoomSublist2_resizeBox"
onResizeStart={this.onResizeStart}
onResizeStop={this.onResizeStop}
>
{visibleTiles}
{showNButton}