fix scroll to end button behaviour

upfluence · Aug 8, 2024 · c8cf629 · c8cf629
1 parent 029c1a2
commit c8cf629
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 22 deletions.
diff --git a/addon/components/hyper-table-v2/index.hbs b/addon/components/hyper-table-v2/index.hbs
@@ -1,4 +1,9 @@
 <div class="hypertable-container" ...attributes>
+  {{#unless @handler.communicationError}}
+    <div class="scroll-button-container {{if this.scrollableTable 'is-visible'}}">
+      <OSS::Button @icon="fa fa-chevron-right" class="scroll-button is-visible" {{on "click" this.scrollToEnd}} />
+    </div>
+  {{/unless}}
   <div class="hypertable__upper-header">
     <div class="fx-row">
       <div class="left-side">
@@ -176,10 +181,6 @@
           {{/if}}
         {{/each}}
       </div>
-
-      <div class="scroll-button-container {{if this.scrollableTable 'is-visible'}}">
-        <OSS::Button @icon="fa fa-chevron-right" class="scroll-button is-visible" {{on "click" this.scrollToEnd}} />
-      </div>
     {{/if}}
   </div>
 </div>
diff --git a/addon/components/hyper-table-v2/index.ts b/addon/components/hyper-table-v2/index.ts
@@ -71,7 +71,7 @@ export default class HyperTableV2 extends Component<HyperTableV2Args> {
 
   @action
   computeScrollableTable(): void {
-    const table = this.innerTableElement?.querySelector('.hypertable');
+    const table = this.innerTableElement;
 
     if (table) {
       this.scrollableTable = Math.ceil(table.scrollLeft) + table.clientWidth < table.scrollWidth;
@@ -85,10 +85,8 @@ export default class HyperTableV2 extends Component<HyperTableV2Args> {
   setupInnerTableElement(element: Element): void {
     this.innerTableElement = element;
 
-    const table = element.querySelector('.hypertable');
-
-    if (table) {
-      scheduleOnce('afterRender', this, this._setupInnerTableElement, table);
+    if (element) {
+      scheduleOnce('afterRender', this, this._setupInnerTableElement, this.innerTableElement);
     }
   }
 
@@ -133,7 +131,7 @@ export default class HyperTableV2 extends Component<HyperTableV2Args> {
 
   @action
   scrollToEnd(): void {
-    const table = this.innerTableElement?.querySelector('.hypertable');
+    const table = this.innerTableElement;
 
     if (table) {
       scheduleOnce('afterRender', this, this._scrollToEnd, table);

diff --git a/addon/components/hyper-table/index.hbs b/addon/components/hyper-table/index.hbs
@@ -152,6 +152,14 @@
   />
 </div>
 
+<div class="scroll-button-container {{if this.manager.isScrollable 'is-visible'}}">
+  <OSS::Button
+    @label={{t "hypertable.column.scroll_to_end"}}
+    class="scroll-button {{if this.manager.isScrollable 'is-visible'}}"
+    {{action "scrollToEnd"}}
+  />
+</div>
+
 <div class="hypertable__table {{if (eq this._collection.length 0) 'hypertable__table--empty'}}">
   {{#if (and this.manager.tetherInstance this.manager.tetherBackdrop)}}
     <div class="hypertable__backdrop" {{action "onBackdropClick"}}></div>
@@ -289,13 +297,6 @@
     {{/each}}
   </div>
 
-  <div class="scroll-button-container {{if this.manager.isScrollable 'is-visible'}}">
-    <OSS::Button
-      @label={{t "hypertable.column.scroll_to_end"}}
-      class="scroll-button {{if this.manager.isScrollable 'is-visible'}}"
-      {{action "scrollToEnd"}}
-    />
-  </div>
 </div>
 
 {{#if this.footer}}

diff --git a/addon/components/hyper-table/index.js b/addon/components/hyper-table/index.js
@@ -173,7 +173,7 @@ export default Component.extend({
 
     // eslint-disable-next-line ember/no-incorrect-calls-with-inline-anonymous-functions
     scheduleOnce('afterRender', this, () => {
-      let table = document.querySelector('.hypertable');
+      let table = document.querySelector('.hypertable__table');
       $(table).scroll(() => {
         if (table.scrollLeft === table.scrollWidth - table.clientWidth) {
           this.manager.set('isScrollable', false);
@@ -250,7 +250,7 @@ export default Component.extend({
     },
 
     scrollToEnd() {
-      this._innerTable.firstElementChild.scrollLeft = this._innerTable.firstElementChild.scrollWidth;
+      this._innerTable.scrollLeft = this._innerTable.scrollWidth;
     },
 
     toggleHover(item, value) {

diff --git a/addon/types/table.js b/addon/types/table.js
@@ -248,8 +248,10 @@ export default EmberObject.extend({
   },
 
   refreshScrollableStatus() {
-    let table = document.querySelector('.hypertable');
-    this.set('isScrollable', table.scrollWidth > table.offsetWidth);
+    const table = document.querySelector('.hypertable__table');
+    if (table) {
+      this.set('isScrollable', table.scrollWidth > table.offsetWidth);
+    }
   },
 
   triggerTetherContainer(on, elementClass, options, backdrop = true, width) {

diff --git a/app/styles/hypertable.less b/app/styles/hypertable.less
@@ -7,6 +7,7 @@
 
 .hypertable-container {
   width: 100%;
+  position: relative;
 }
 
 .hypertable {
@@ -57,7 +58,7 @@
 .scroll-button-container {
   position: absolute;
   right: 13px;
-  top: calc(@cell-height - 13px);
+  top: 124px;
 
   z-index: 19;
   overflow-x: hidden;