mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

add "jump down" button in timeline

Browse source
This commit is contained in:
Bruno Windels 2021-09-15 18:30:08 +02:00
parent 1df12b8c89
commit e4101ece65
5 changed files with 130 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/domain/session/room/timeline/TimelineViewModel.js
View file

@ -46,6 +46,7 @@ export class TimelineViewModel extends ViewModel {
this._requestedStartTile = null;
this._requestedEndTile = null;
this._requestScheduled = false;
this._showJumpDown = false;
}
/** if this.tiles is empty, call this with undefined for both startTile and endTile */
@ -75,10 +76,12 @@ export class TimelineViewModel extends ViewModel {
tile.notifyVisible();
}
loadTop = startIndex < 10;
this._setShowJumpDown(endIndex < (this._tiles.length - 1));
// console.log("got tiles", startIndex, endIndex, loadTop);
} else {
// tiles collection is empty, load more at top
loadTop = true;
this._setShowJumpDown(false);
// console.log("no tiles, load more at top");
}
@ -100,4 +103,15 @@ export class TimelineViewModel extends ViewModel {
get tiles() {
return this._tiles;
}
_setShowJumpDown(show) {
if (this._showJumpDown !== show) {
this._showJumpDown = show;
this.emitChange("showJumpDown");
}
}
get showJumpDown() {
return this._showJumpDown;
}
}

58
src/platform/web/ui/css/themes/element/icons/chevron-down.svg Normal file
View file

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="17"
height="9"
viewBox="0 0 17 9"
fill="none"
version="1.1"
id="svg839"
sodipodi:docname="chevron-down.svg"
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview841"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="45.647059"
inkscape:cx="8.0509021"
inkscape:cy="8.5219072"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg839" />
<g
clip-path="url(#clip0)"
id="g832"
transform="rotate(-90,4.3001277,4.8826258)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M 8.20723,2.70711 C 8.59775,3.09763 8.59878,3.73182 8.20952,4.1236 L 3.27581,9.08934 8.22556,14.0391 c 0.39052,0.3905 0.39155,1.0247 0.00229,1.4165 -0.38926,0.3918 -1.0214,0.3928 -1.41192,0.0023 L 1.15907,9.80101 C 0.768549,9.41049 0.767523,8.7763 1.15678,8.38452 L 6.79531,2.70939 C 7.18457,2.31761 7.8167,2.31658 8.20723,2.70711 Z"
fill="#8d99a5"
id="path830" />
</g>
<defs
id="defs837">
<clipPath
id="clip0">
<rect
width="8"
height="17"
fill="#ffffff"
transform="rotate(180,4.25,8.5)"
id="rect834"
x="0"
y="0" />
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

14
src/platform/web/ui/css/themes/element/timeline.css
View file

@ -15,6 +15,20 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.Timeline_jumpDown {
width: 40px;
height: 40px;
bottom: 16px;
right: 32px;
border-radius: 100%;
border: 1px solid #8d99a5;
background-image: url(icons/chevron-down.svg);
background-position: center;
background-color: white;
background-repeat: no-repeat;
cursor: pointer;
}
.Timeline_message {
display: grid;
grid-template:

15
src/platform/web/ui/css/timeline.css
View file

@ -14,8 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.Timeline {
display: flex;
flex-direction: column;
position: relative;
}
.RoomView_body > .Timeline {
.Timeline_jumpDown {
position: absolute;
}
.Timeline_scroller {
overflow-y: scroll;
overscroll-behavior-y: contain;
overflow-anchor: none;
@ -23,9 +32,11 @@ limitations under the License.
margin: 0;
/* need to read the offsetTop of tiles relative to this element in TimelineView */
position: relative;
min-height: 0;
flex: 1 0 0;
}
.RoomView_body > .Timeline > ul {
.Timeline_scroller > ul {
list-style: none;
/* use small horizontal padding so first/last children margin isn't collapsed
at the edge and a scrollbar shows up when setting margin-top to bottom-align

44
src/platform/web/ui/session/room/TimelineView.ts
View file

@ -78,8 +78,19 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
this.restoreScrollPosition();
});
this.tilesView = new TilesListView(vm.tiles, () => this.restoreScrollPosition());
const root = t.div({className: "Timeline bottom-aligned-scroll", onScroll: () => this.onScroll()}, [
t.view(this.tilesView)
const root = t.div({className: "Timeline"}, [
t.div({
className: "Timeline_scroller bottom-aligned-scroll",
onScroll: () => this.onScroll()
}, t.view(this.tilesView)),
t.button({
className: {
"Timeline_jumpDown": true,
hidden: vm => !vm.showJumpDown
},
title: "Jump down",
onClick: () => this.jumpDown()
})
]);
if (typeof ResizeObserver === "function") {
@ -92,6 +103,16 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
return root;
}
private get scroller() {
return this.root().firstElementChild as HTMLElement;
}
private jumpDown() {
const {scroller} = this;
this.stickToBottom = true;
scroller.scrollTop = scroller.scrollHeight;
}
public unmount() {
super.unmount();
if (this.resizeObserver) {
@ -101,10 +122,10 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
}
private restoreScrollPosition() {
const timeline = this.root() as HTMLElement;
const {scroller} = this;
const tiles = this.tilesView!.root() as HTMLElement;
const missingTilesHeight = timeline.clientHeight - tiles.clientHeight;
const missingTilesHeight = scroller.clientHeight - tiles.clientHeight;
if (missingTilesHeight > 0) {
tiles.style.setProperty("margin-top", `${missingTilesHeight}px`);
// we don't have enough tiles to fill the viewport, so set all as visible
@ -113,23 +134,20 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
} else {
tiles.style.removeProperty("margin-top");
if (this.stickToBottom) {
timeline.scrollTop = timeline.scrollHeight;
scroller.scrollTop = scroller.scrollHeight;
} else if (this.anchoredNode) {
const newAnchoredBottom = bottom(this.anchoredNode!);
if (newAnchoredBottom !== this.anchoredBottom) {
const bottomDiff = newAnchoredBottom - this.anchoredBottom;
console.log(`restore: scroll by ${bottomDiff} as height changed`);
// scrollBy tends to create less scroll jumps than reassigning scrollTop as it does
// not depend on reading scrollTop, which might be out of date as some platforms
// run scrolling off the main thread.
if (typeof timeline.scrollBy === "function") {
timeline.scrollBy(0, bottomDiff);
if (typeof scroller.scrollBy === "function") {
scroller.scrollBy(0, bottomDiff);
} else {
timeline.scrollTop = timeline.scrollTop + bottomDiff;
scroller.scrollTop = scroller.scrollTop + bottomDiff;
}
this.anchoredBottom = newAnchoredBottom;
} else {
// console.log("restore: bottom didn't change, must be below viewport");
}
}
// TODO: should we be updating the visible range here as well as the range might have changed even though
@ -138,8 +156,8 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
}
private onScroll(): void {
const timeline = this.root() as HTMLElement;
const {scrollHeight, scrollTop, clientHeight} = timeline;
const {scroller} = this;
const {scrollHeight, scrollTop, clientHeight} = scroller;
const tiles = this.tilesView!.root() as HTMLElement;
let bottomNodeIndex;