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

Attempt to support a hard cutoff with the show more button

Browse source 
Known issues:
* Causes scroll jumps when the button gets added to DOM
* Resize handle is invisible when there's a show more button

TODO:
* Clean up comments
* Clean up useless code (all the padding stuff isn't needed)
This commit is contained in:
Travis Ralston 2020-07-09 13:07:13 -06:00
parent ce68314de9
commit 859f65659c
3 changed files with 84 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -179,7 +179,6 @@ limitations under the License.
}
.mx_RoomSublist2_resizeBox {
margin-bottom: 4px; // for the resize handle
position: relative;
// Create another flexbox column for the tiles
@ -187,65 +186,12 @@ limitations under the License.
flex-direction: column;
overflow: hidden;
.mx_RoomSublist2_showNButton {
cursor: pointer;
font-size: $font-13px;
line-height: $font-18px;
color: $roomtile2-preview-color;
// This is the same color as the left panel background because it needs
// to occlude the lastmost tile in the list.
background-color: $roomlist2-bg-color;
// Update the render() function for RoomSublist2 if these change
// Update the ListLayout class for minVisibleTiles if these change.
//
// At 24px high, 8px padding on the top and 4px padding on the bottom this equates to 0.73 of
// a tile due to how the padding calculations work.
height: 24px;
padding-top: 8px;
padding-bottom: 4px;
// We force this to the bottom so it will overlap rooms as needed.
// We account for the space it takes up (24px) in the code through padding.
.mx_RoomSublist2_resizerHandles_showNButton {
position: absolute;
bottom: 0; // the height of the resize handle
bottom: -32px; // height of the button
left: 0;
right: 0;
// We create a flexbox to cheat at alignment
display: flex;
align-items: center;
.mx_RoomSublist2_showNButtonChevron {
position: relative;
width: 16px;
height: 16px;
margin-left: 12px;
margin-right: 18px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $roomtile2-preview-color;
}
.mx_RoomSublist2_showMoreButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_RoomSublist2_showLessButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
}
&.mx_RoomSublist2_isCutting::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
box-shadow: 0px -2px 3px rgba(46, 47, 50, 0.08);
}
height: 4px; // height of the handle
}
// Class name comes from the ResizableBox component
@ -277,6 +223,56 @@ limitations under the License.
}
}
.mx_RoomSublist2_showNButton {
cursor: pointer;
font-size: $font-13px;
line-height: $font-18px;
color: $roomtile2-preview-color;
// Update the render() function for RoomSublist2 if these change
// Update the ListLayout class for minVisibleTiles if these change.
//
// At 24px high, 8px padding on the top and 4px padding on the bottom this equates to 0.73 of
// a tile due to how the padding calculations work.
height: 24px;
padding-top: 8px;
padding-bottom: 4px;
// We create a flexbox to cheat at alignment
display: flex;
align-items: center;
.mx_RoomSublist2_showNButtonChevron {
position: relative;
width: 16px;
height: 16px;
margin-left: 12px;
margin-right: 18px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $roomtile2-preview-color;
}
.mx_RoomSublist2_showMoreButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_RoomSublist2_showLessButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
}
&.mx_RoomSublist2_isCutting::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
box-shadow: 0px -2px 3px rgba(46, 47, 50, 0.08);
}
}
&.mx_RoomSublist2_hasMenuOpen,
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:focus-within,
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
@ -322,13 +318,13 @@ limitations under the License.
.mx_RoomSublist2_resizeBox {
align-items: center;
}
.mx_RoomSublist2_showNButton {
flex-direction: column;
.mx_RoomSublist2_showNButton {
flex-direction: column;
.mx_RoomSublist2_showNButtonChevron {
margin-right: 12px; // to center
}
.mx_RoomSublist2_showNButtonChevron {
margin-right: 12px; // to center
}
}

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

@ -119,7 +119,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
}
private get numVisibleTiles(): number {
const nVisible = Math.floor(this.layout.visibleTiles);
const nVisible = Math.ceil(this.layout.visibleTiles);
return Math.min(nVisible, this.numTiles);
}
@ -635,8 +635,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
// The padding is variable though, so figure out what we need padding for.
let padding = 0;
if (showNButton) padding += SHOW_N_BUTTON_HEIGHT;
padding += RESIZE_HANDLE_HEIGHT; // always append the handle height
//if (showNButton) padding += SHOW_N_BUTTON_HEIGHT;
//padding += RESIZE_HANDLE_HEIGHT; // always append the handle height
const relativeTiles = layout.tilesWithPadding(this.numTiles, padding);
const minTilesPx = layout.calculateTilesToPixelsMin(relativeTiles, layout.minVisibleTiles, padding);
@ -644,25 +644,32 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
const tilesWithoutPadding = Math.min(relativeTiles, layout.visibleTiles);
const tilesPx = layout.calculateTilesToPixelsMin(relativeTiles, tilesWithoutPadding, padding);
const handleWrapperClasses = classNames({
'mx_RoomSublist2_resizerHandles': true,
'mx_RoomSublist2_resizerHandles_showNButton': !!showNButton,
});
const dimensions = {
height: tilesPx,
};
content = (
<Resizable
size={dimensions as any}
minHeight={minTilesPx}
maxHeight={maxTilesPx}
onResizeStart={this.onResizeStart}
onResizeStop={this.onResizeStop}
onResize={this.onResize}
handleWrapperClass="mx_RoomSublist2_resizerHandles"
handleClasses={{bottom: "mx_RoomSublist2_resizerHandle"}}
className="mx_RoomSublist2_resizeBox"
enable={handles}
>
{visibleTiles}
<React.Fragment>
<Resizable
size={dimensions as any}
minHeight={minTilesPx}
maxHeight={maxTilesPx}
onResizeStart={this.onResizeStart}
onResizeStop={this.onResizeStop}
onResize={this.onResize}
handleWrapperClass={handleWrapperClasses}
handleClasses={{bottom: "mx_RoomSublist2_resizerHandle"}}
className="mx_RoomSublist2_resizeBox"
enable={handles}
>
{visibleTiles}
</Resizable>
{showNButton}
</Resizable>
</React.Fragment>
);
}

3
src/stores/room-list/ListLayout.ts
View file

@ -20,7 +20,8 @@ const TILE_HEIGHT_PX = 44;
// this comes from the CSS where the show more button is
// mathematically this percent of a tile when floating.
const RESIZER_BOX_FACTOR = 0.78;
//const RESIZER_BOX_FACTOR = 0.78;
const RESIZER_BOX_FACTOR = 0;
interface ISerializedListLayout {
numTiles: number;