Iterate on the new room list resize handle

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

View file

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

View file

@ -43,7 +43,7 @@ import { TagID } from "../../../stores/room-list/models";
*******************************************************************/ *******************************************************************/
const SHOW_N_BUTTON_HEIGHT = 32; // As defined by CSS 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; const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT;
@ -70,6 +70,7 @@ interface IProps {
interface IState { interface IState {
notificationState: ListNotificationState; notificationState: ListNotificationState;
menuDisplayed: boolean; menuDisplayed: boolean;
isResizing: boolean;
} }
export default class RoomSublist2 extends React.Component<IProps, IState> { export default class RoomSublist2 extends React.Component<IProps, IState> {
@ -82,6 +83,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
this.state = { this.state = {
notificationState: new ListNotificationState(this.props.isInvite, this.props.tagId), notificationState: new ListNotificationState(this.props.isInvite, this.props.tagId),
menuDisplayed: false, menuDisplayed: false,
isResizing: false,
}; };
this.state.notificationState.setRooms(this.props.rooms); 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 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 = () => { private onShowAllClick = () => {
this.props.layout.visibleTiles = this.props.layout.tilesWithPadding(this.numTiles, MAX_PADDING_HEIGHT); this.props.layout.visibleTiles = this.props.layout.tilesWithPadding(this.numTiles, MAX_PADDING_HEIGHT);
this.forceUpdate(); // because the layout doesn't trigger a re-render 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 maxTilesFactored = layout.tilesWithResizerBoxFactor(tiles.length);
const showMoreBtnClasses = classNames({ const showMoreBtnClasses = classNames({
'mx_RoomSublist2_showNButton': true, '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 // 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} resizeHandles={handles}
onResize={this.onResize} onResize={this.onResize}
className="mx_RoomSublist2_resizeBox" className="mx_RoomSublist2_resizeBox"
onResizeStart={this.onResizeStart}
onResizeStop={this.onResizeStop}
> >
{visibleTiles} {visibleTiles}
{showNButton} {showNButton}