UX: Horizontal scroll bar on top of user directory (when needed) (#13553)

This commit is contained in:
Mark VanLandingham 2021-06-28 15:10:38 -05:00 committed by GitHub
parent 7d0d13c32e
commit d03aee4642
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 125 additions and 27 deletions

View File

@ -2,16 +2,103 @@ import Component from "@ember/component";
import { action } from "@ember/object";
export default Component.extend({
classNames: ["directory-table-container"],
lastScrollPosition: 0,
ticking: false,
_topHorizontalScrollBar: null,
_tableContainer: null,
_table: null,
_fakeScrollContent: null,
didInsertElement() {
this._super(...arguments);
this.setProperties({
_tableContainer: this.element.querySelector(".directory-table-container"),
_topHorizontalScrollBar: this.element.querySelector(
".directory-table-top-scroll"
),
_fakeScrollContent: this.element.querySelector(
".directory-table-top-scroll-fake-content"
),
_table: this.element.querySelector(".directory-table"),
});
this._tableContainer.addEventListener("scroll", this.onBottomScroll);
this._topHorizontalScrollBar.addEventListener("scroll", this.onTopScroll);
// Set active header might have already scrolled the _tableContainer.
// Call onHorizontalScroll manually to scroll the _topHorizontalScrollBar
this.onResize();
this.onHorizontalScroll(this._tableContainer, this._topHorizontalScrollBar);
window.addEventListener("resize", this.onResize);
},
@action
onResize() {
if (
this._tableContainer.getBoundingClientRect().bottom < window.innerHeight
) {
// Bottom of the table is visible. Hide the scrollbar
this._fakeScrollContent.style.height = 0;
} else {
this._fakeScrollContent.style.width = `${this._table.offsetWidth}px`;
this._fakeScrollContent.style.height = "1px";
}
},
@action
onTopScroll() {
this.onHorizontalScroll(this._topHorizontalScrollBar, this._tableContainer);
},
@action
onBottomScroll() {
this.onHorizontalScroll(this._tableContainer, this._topHorizontalScrollBar);
},
@action
onHorizontalScroll(primary, replica) {
if (this.lastScrollPosition === primary.scrollLeft) {
return;
}
this.set("lastScrollPosition", primary.scrollLeft);
if (!this.ticking) {
window.requestAnimationFrame(() => {
replica.scrollLeft = this.lastScrollPosition;
this.set("ticking", false);
});
this.set("ticking", true);
}
},
willDestoryElement() {
this._tableContainer.removeEventListener("scroll", this.onBottomScroll);
this._topHorizontalScrollBar.removeEventListener(
"scroll",
this.onTopScroll
);
window.removeEventListener("resize", this.onResize);
},
@action
setActiveHeader(header) {
// After render, scroll table left to ensure the order by column is visible
if (!this._tableContainer) {
this.set(
"_tableContainer",
document.querySelector(".directory-table-container")
);
}
const scrollPixels =
header.offsetLeft + header.offsetWidth + 10 - this.element.offsetWidth;
header.offsetLeft +
header.offsetWidth +
10 -
this._tableContainer.offsetWidth;
if (scrollPixels > 0) {
this.element.scrollLeft = scrollPixels;
this._tableContainer.scrollLeft = scrollPixels;
}
},
});

View File

@ -1,25 +1,31 @@
<table>
<thead>
{{table-header-toggle field="username" order=order asc=asc}}
{{#each columns as |column|}}
{{table-header-toggle
field=column.name
icon=column.icon
order=order
asc=asc
automatic=(directory-column-is-automatic column=column)
translated=column.user_field_id
onActiveRender=setActiveHeader
}}
{{/each}}
<div class="directory-table-top-scroll">
<div class="directory-table-top-scroll-fake-content"></div>
</div>
{{#if showTimeRead}}
<th>{{i18n "directory.time_read"}}</th>
{{/if}}
</thead>
<tbody>
{{#each items as |item|}}
{{directory-item item=item columns=columns showTimeRead=showTimeRead}}
{{/each}}
</tbody>
</table>
<div class="directory-table-container">
<table class="directory-table">
<thead>
{{table-header-toggle field="username" order=order asc=asc}}
{{#each columns as |column|}}
{{table-header-toggle
field=column.name
icon=column.icon
order=order
asc=asc
automatic=(directory-column-is-automatic column=column)
translated=column.user_field_id
onActiveRender=setActiveHeader
}}
{{/each}}
{{#if showTimeRead}}
<th>{{i18n "directory.time_read"}}</th>
{{/if}}
</thead>
<tbody>
{{#each items as |item|}}
{{directory-item item=item columns=columns showTimeRead=showTimeRead}}
{{/each}}
</tbody>
</table>
</div>

View File

@ -6,6 +6,11 @@
overflow-x: auto;
}
.directory-table-top-scroll {
width: 100%;
overflow-x: auto;
}
.open-edit-columns-btn {
vertical-align: top;
padding: 0.45em 0.8em;