fix(common): fix sidenav button scrollUp and scrolldown (#1493)

infra-geo-ouverte · Nov 14, 2023 · da807d9 · da807d9
1 parent ce3e4cb
commit da807d9
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 31 deletions.
diff --git a/packages/common/src/lib/action/actionbar/actionbar.component.html b/packages/common/src/lib/action/actionbar/actionbar.component.html
@@ -1,19 +1,18 @@
-<mat-list *ngIf="mode === actionbarMode.Dock" matListItemIcon>
-  <div
-    *ngIf="heightCondition && positionConditionTop && isDesktop"
-    id="topChevron"
+<div
+  *ngIf="heightCondition && positionConditionTop && isDesktop"
+  id="topChevron"
+>
+  <button
+    mat-icon-button
+    tooltip-position="below"
+    matTooltipShowDelay="500"
+    [matTooltip]="'igo.common.actionbar.scrollUp' | translate"
+    (click)="scrollUp()"
   >
-    <button
-      mat-icon-button
-      tooltip-position="below"
-      matTooltipShowDelay="500"
-      [matTooltip]="'igo.common.actionbar.scrollUp' | translate"
-      (click)="scrollUp()"
-    >
-      <mat-icon svgIcon="chevron-up"></mat-icon>
-    </button>
-  </div>
-
+    <mat-icon svgIcon="chevron-up"></mat-icon>
+  </button>
+</div>
+<mat-list *ngIf="mode === actionbarMode.Dock" matListItemIcon>
   <igo-actionbar-item
     *ngIf="withToggleButton"
     color="accent"
@@ -45,22 +44,22 @@
     >
     </igo-actionbar-item>
   </ng-template>
+</mat-list>
 
-  <div
-    *ngIf="heightCondition && positionConditionLow && isDesktop"
-    id="lowChevron"
+<div
+  *ngIf="heightCondition && positionConditionLow && isDesktop"
+  id="lowChevron"
+>
+  <button
+    mat-icon-button
+    tooltip-position="below"
+    matTooltipShowDelay="500"
+    [matTooltip]="'igo.common.actionbar.scrollDown' | translate"
+    (click)="scrollDown()"
   >
-    <button
-      mat-icon-button
-      tooltip-position="below"
-      matTooltipShowDelay="500"
-      [matTooltip]="'igo.common.actionbar.scrollDown' | translate"
-      (click)="scrollDown()"
-    >
-      <mat-icon svgIcon="chevron-down"></mat-icon>
-    </button>
-  </div>
-</mat-list>
+    <mat-icon svgIcon="chevron-down"></mat-icon>
+  </button>
+</div>
 
 <div *ngIf="mode === actionbarMode.Overlay">
   <button

diff --git a/packages/common/src/lib/action/actionbar/actionbar.component.scss b/packages/common/src/lib/action/actionbar/actionbar.component.scss
@@ -41,7 +41,8 @@ $igo-actionbar-item-icon-padding: 8px;
     top: 0;
     background-color: white;
     z-index: 3;
-
+    display: flex;
+    justify-content: center;
     @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
       position: fixed;
       top: unset;
@@ -53,11 +54,12 @@ $igo-actionbar-item-icon-padding: 8px;
   }
 
   #lowChevron {
-    position: fixed;
     position: sticky;
     bottom: 0;
     background-color: white;
     z-index: 3;
+    display: flex;
+    justify-content: center;
   }
 
   .igo-actionbar-overlay {