mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 11:47:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

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; 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, opacity: 0.8;
.react-resizable-handle:hover { background-color: $primary-fg-color;
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 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}