fix(popover): align content on height difference

vmware-clarity · Sep 11, 2024 · 63a6b28 · 63a6b28
1 parent f0906be
commit 63a6b28
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 18 deletions.
diff --git a/projects/angular/src/utils/popover/popover-content.ts b/projects/angular/src/utils/popover/popover-content.ts
@@ -37,6 +37,7 @@ export class ClrPopoverContent implements AfterContentChecked, OnDestroy {
   private removeClickListenerFn: VoidFunction | null = null;
 
   private shouldRealign = false;
+  private previousContentHeight: number | null = null;
 
   // Check-collector pattern:
   // In order to get accurate content height/width values, we cannot calculate alignment offsets until
@@ -77,9 +78,16 @@ export class ClrPopoverContent implements AfterContentChecked, OnDestroy {
   }
 
   ngAfterContentChecked(): void {
-    if (this.smartOpenService.open && this.view && this.shouldRealign) {
-      // Channel content-check event through the check-collector
-      this.checkCollector.emit();
+    if (this.smartOpenService.open && this.view) {
+      const [rootNode] = this.view.rootNodes;
+      if (
+        this.shouldRealign ||
+        (this.previousContentHeight !== null && this.previousContentHeight !== rootNode.offsetHeight)
+      ) {
+        // Channel content-check event through the check-collector
+        this.previousContentHeight = rootNode.offsetHeight;
+        this.checkCollector.emit();
+      }
     }
   }
 

diff --git a/projects/demo/src/app/datagrid/detail/detail.html b/projects/demo/src/app/datagrid/detail/detail.html
@@ -56,10 +56,14 @@ <h3>Simple API</h3>
       {{detail.name}} {{detail.name}}
     </clr-dg-detail-header>
     <clr-dg-detail-body>
-      <pre>{{detail | json}}</pre>
-      <pre>{{detail | json}}</pre>
-      <pre>{{detail | json}}</pre>
-      <pre>{{detail | json}}</pre>
+      <clr-select-container>
+        <label>Options</label>
+        <select clrSelect>
+          <option>Option 1</option>
+          <option>Option 1</option>
+          <option>Option 1</option>
+        </select>
+      </clr-select-container>
     </clr-dg-detail-body>
   </clr-dg-detail>
 

diff --git a/projects/demo/src/app/datagrid/full/full.html b/projects/demo/src/app/datagrid/full/full.html
@@ -36,6 +36,15 @@ <h2>Full Datagrid demo</h2>
       <input type="checkbox" clrCheckbox [(ngModel)]="options.server" name="server" />
       <label>Server-driven</label>
     </clr-checkbox-wrapper>
+    <clr-checkbox-wrapper>
+      <input
+        type="checkbox"
+        clrCheckbox
+        [(ngModel)]="options.loadRowActionsDynamically"
+        name="load-row-actions-dynamically"
+      />
+      <label>Load Row Actions dynamically</label>
+    </clr-checkbox-wrapper>
   </clr-checkbox-container>
 
   <clr-select-container>
@@ -92,15 +101,17 @@ <h2>Full Datagrid demo</h2>
 
     <clr-dg-placeholder>No users found</clr-dg-placeholder>
     <clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
-      <clr-dg-action-overflow (clrDgActionOverflowOpenChange)="clrDgActionOverflowOpenChangeFn($event)">
-        <button class="action-item">
-          <cds-icon shape="note"></cds-icon>
-          Edit
-        </button>
-        <button class="action-item">
-          <cds-icon shape="trash"></cds-icon>
-          Delete
-        </button>
+      <clr-dg-action-overflow
+        (click)="loadDynamicRowActions()"
+        (clrDgActionOverflowOpenChange)="clrDgActionOverflowOpenChangeFn($event)"
+      >
+        <span *ngIf="rowActionsLoading; else actions">
+          <span class="spinner spinner-inline">Loading...</span>
+          Loading...
+        </span>
+        <ng-template #actions>
+          <button class="action-item" *ngFor="let action of rowActions">{{ action }}</button>
+        </ng-template>
       </clr-dg-action-overflow>
 
       <clr-dg-cell>{{user.id}}</clr-dg-cell>

diff --git a/projects/demo/src/app/datagrid/full/full.ts b/projects/demo/src/app/datagrid/full/full.ts
@@ -30,6 +30,7 @@ export class DatagridFullDemo {
     server: false,
     latency: '500',
     nameFilter: 'd',
+    loadRowActionsDynamically: false,
   };
 
   resetting = true;
@@ -41,6 +42,8 @@ export class DatagridFullDemo {
   isServerDriven = false;
   loading = true;
   total: number;
+  rowActions: string[] = ['Edit', 'Delete'];
+  rowActionsLoading = false;
 
   pokemonComparator = new PokemonComparator();
   pokemonFilter = new PokemonFilter();
@@ -51,6 +54,24 @@ export class DatagridFullDemo {
 
   trackById: TrackByFunction<User> = (_index, item) => item.id;
 
+  loadDynamicRowActions() {
+    if (!this.options.loadRowActionsDynamically) {
+      return;
+    }
+    this.rowActionsLoading = true;
+    setTimeout(() => {
+      this.rowActions = [
+        'Edit',
+        'Delete',
+        'Dynamic Action 1',
+        'Dynamic Action 2',
+        'Dynamic Action 3',
+        'Dynamic Action 3',
+      ];
+      this.rowActionsLoading = false;
+    }, 2000);
+  }
+
   reset() {
     this.resetting = true;
     this.loading = true;
@@ -101,7 +122,7 @@ export class DatagridFullDemo {
     this.loading = false;
   }
 
-  clrDgActionOverflowOpenChangeFn($event: boolean) {
-    console.log('clrDgActionOverflowOpenChange event', $event);
+  clrDgActionOverflowOpenChangeFn(opened: boolean) {
+    console.log('clrDgActionOverflowOpenChange event', opened);
   }
 }