feat(geo): refactored ui of directions component

packages/geo/src/lib/directions/directions-buttons/directions-buttons.component.html

@@ -1,72 +1,42 @@
-<div class="igo-form-button-group">
-  <button
-    mat-icon-button
-    tooltip-position="below"
-    matTooltipShowDelay="500"
-    [matTooltip]="'igo.geo.directionsForm.addStop' | translate"
-    color="primary"
-    (click)="addStop()"
-  >
-    <mat-icon>add_location_alt</mat-icon>
-  </button>
-  <button
-    mat-icon-button
-    tooltip-position="below"
-    matTooltipShowDelay="500"
-    *ngIf="
-      (routesFeatureStore.count$ | async) >= 1 ||
-      (stopsStore.count$ | async) >= 1
-    "
-    [matTooltip]="'igo.geo.directionsForm.resetDirectionsBtn' | translate"
-    color="warn"
-    (click)="resetStops()"
-  >
-    <mat-icon>restore_page</mat-icon>
-  </button>
-  <button
-    mat-icon-button
-    tooltip-position="below"
-    matTooltipShowDelay="500"
-    *ngIf="(routesFeatureStore.count$ | async) >= 1"
-    (click)="zoomRoute()"
-    [matTooltip]="'igo.geo.directionsForm.zoomRoute' | translate"
-    color="primary"
-  >
-    <mat-icon>zoom_in</mat-icon>
-  </button>
-  <button
-    mat-icon-button
-    tooltip-position="below"
-    matTooltipShowDelay="500"
-    *ngIf="(routesFeatureStore.count$ | async) >= 1"
-    (click)="copyDirectionsToClipboard()"
-    [matTooltip]="'igo.geo.directionsForm.copy' | translate"
-    color="primary"
-  >
-    <mat-icon>content_copy</mat-icon>
-  </button>
-  <button
-    mat-icon-button
-    tooltip-position="below"
-    matTooltipShowDelay="500"
-    *ngIf="(routesFeatureStore.count$ | async) >= 1"
-    (click)="copyLinkToClipboard()"
-    [matTooltip]="'igo.geo.directionsForm.link' | translate"
-    color="primary"
-  >
-    <mat-icon>link</mat-icon>
-  </button>
+<button
+  mat-icon-button
+  [matTooltip]="'igo.geo.directions.buttons.resetStops' | translate"
+  color="warn"
+  (click)="resetStops()"
+>
+  <mat-icon>restart_alt</mat-icon>
+</button>
+<button
+  mat-icon-button
+  [matTooltip]="'igo.geo.directions.buttons.zoomOnRoute' | translate"
+  color="primary"
+  (click)="zoomOnActiveRoute()"
+>
+  <mat-icon>frame_inspect</mat-icon>
+</button>
+<button
+  mat-icon-button
+  [matTooltip]="'igo.geo.directions.buttons.copyDirections' | translate"
+  color="primary"
+  (click)="copyDirectionsToClipboard()"
+>
+  <mat-icon>content_copy</mat-icon>
+</button>
+<button
+  mat-icon-button
+  [matTooltip]="'igo.geo.directions.buttons.copyLink' | translate"
+  color="primary"
+  (click)="copyLinkToClipboard()"
+>
+  <mat-icon>link</mat-icon>
+</button>
 
-  <button
-    mat-icon-button
-    tooltip-position="below"
-    matTooltipShowDelay="500"
-    *ngIf="(routesFeatureStore.count$ | async) >= 1"
-    (click)="printDirections()"
-    [disabled]="disabled$ | async"
-    [matTooltip]="'igo.geo.directionsForm.print' | translate"
-    color="primary"
-  >
-    <mat-icon>print</mat-icon>
-  </button>
-</div>
+<button
+  mat-icon-button
+  [disabled]="downloadDirectionsBtnDisabled"
+  [matTooltip]="'igo.geo.directions.buttons.downloadDirections' | translate"
+  color="primary"
+  (click)="downloadDirections()"
+>
+  <mat-icon>download</mat-icon>
+</button>