Task/extract FAB into a reusable component (GfPageFabComponent)

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -19,6 +19,7 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { GfSymbolPipe } from '@ghostfolio/common/pipes';
 import { GfActivitiesFilterComponent } from '@ghostfolio/ui/activities-filter';
 import { translate } from '@ghostfolio/ui/i18n';
+import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { AdminService, DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
@@ -80,10 +81,10 @@ import { CreateAssetProfileDialogParams } from './create-asset-profile-dialog/in
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'has-fab' },
   imports: [
     CommonModule,
     GfActivitiesFilterComponent,
+    GfPageFabComponent,
     GfPremiumIndicatorComponent,
     GfSymbolPipe,
     GfValueComponent,

apps/client/src/app/components/admin-market-data/admin-market-data.html

@@ -332,7 +332,7 @@
     </div>
   </div>
 
-  <div class="fab-container">
+  <gf-page-fab>
     <a
       class="align-items-center d-flex justify-content-center"
       color="primary"
@@ -342,5 +342,5 @@
     >
       <ion-icon name="add-outline" size="large" />
     </a>
-  </div>
+  </gf-page-fab>
 </div>

apps/client/src/app/components/home-watchlist/home-watchlist.component.ts

@@ -8,6 +8,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
+import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
@@ -37,6 +38,7 @@ import { CreateWatchlistItemDialogParams } from './create-watchlist-item-dialog/
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     GfBenchmarkComponent,
+    GfPageFabComponent,
     GfPremiumIndicatorComponent,
     IonIcon,
     MatButtonModule,

apps/client/src/app/components/home-watchlist/home-watchlist.html

@@ -22,7 +22,7 @@
   </div>
 </div>
 @if (!hasImpersonationId && hasPermissionToCreateWatchlistItem) {
-  <div class="fab-container">
+  <gf-page-fab>
     <a
       class="align-items-center d-flex justify-content-center"
       color="primary"
@@ -32,5 +32,5 @@
     >
       <ion-icon name="add-outline" size="large" />
     </a>
-  </div>
+  </gf-page-fab>
 }

apps/client/src/app/components/user-account-access/user-account-access.component.ts

@@ -5,6 +5,7 @@ import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { Access, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { NotificationService } from '@ghostfolio/ui/notifications';
+import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
@@ -42,9 +43,9 @@ import { CreateOrUpdateAccessDialogParams } from './create-or-update-access-dial
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'has-fab' },
   imports: [
     GfAccessTableComponent,
+    GfPageFabComponent,
     GfPremiumIndicatorComponent,
     IonIcon,
     MatButtonModule,

apps/client/src/app/components/user-account-access/user-account-access.html

@@ -69,7 +69,7 @@
     (accessToUpdate)="onUpdateAccess($event)"
   />
   @if (hasPermissionToCreateAccess) {
-    <div class="fab-container">
+    <gf-page-fab>
       <a
         class="align-items-center d-flex justify-content-center"
         color="primary"
@@ -79,6 +79,6 @@
       >
         <ion-icon name="add-outline" size="large" />
       </a>
-    </div>
+    </gf-page-fab>
   }
 </div>

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -11,6 +11,7 @@ import { User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { GfAccountsTableComponent } from '@ghostfolio/ui/accounts-table';
 import { NotificationService } from '@ghostfolio/ui/notifications';
+import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
@@ -36,8 +37,13 @@ import { TransferBalanceDialogParams } from './transfer-balance/interfaces/inter
 import { GfTransferBalanceDialogComponent } from './transfer-balance/transfer-balance-dialog.component';
 
 @Component({
-  host: { class: 'has-fab page' },
-  imports: [GfAccountsTableComponent, MatButtonModule, RouterModule],
+  host: { class: 'page' },
+  imports: [
+    GfAccountsTableComponent,
+    GfPageFabComponent,
+    MatButtonModule,
+    RouterModule
+  ],
   selector: 'gf-accounts-page',
   styleUrls: ['./accounts-page.scss'],
   templateUrl: './accounts-page.html'

apps/client/src/app/pages/accounts/accounts-page.html

@@ -26,7 +26,7 @@
     hasPermissionToCreateAccount &&
     !user.settings.isRestrictedView
   ) {
-    <div class="fab-container">
+    <gf-page-fab>
       <a
         class="align-items-center d-flex justify-content-center"
         color="primary"
@@ -36,6 +36,6 @@
       >
         <ion-icon name="add-outline" size="large" />
       </a>
-    </div>
+    </gf-page-fab>
   }
 </div>

apps/client/src/app/pages/portfolio/activities/activities-page.component.ts

@@ -12,6 +12,7 @@ import {
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
 import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
+import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
@@ -41,9 +42,9 @@ import { GfImportActivitiesDialogComponent } from './import-activities-dialog/im
 import { ImportActivitiesDialogParams } from './import-activities-dialog/interfaces/interfaces';
 
 @Component({
-  host: { class: 'has-fab' },
   imports: [
     GfActivitiesTableComponent,
+    GfPageFabComponent,
     IonIcon,
     MatButtonModule,
     MatSnackBarModule,

apps/client/src/app/pages/portfolio/activities/activities-page.html

@@ -43,7 +43,7 @@
     hasPermissionToCreateActivity &&
     !user.settings.isRestrictedView
   ) {
-    <div class="fab-container">
+    <gf-page-fab>
       <a
         class="align-items-center d-flex justify-content-center"
         color="primary"
@@ -53,6 +53,6 @@
       >
         <ion-icon name="add-outline" size="large" />
       </a>
-    </div>
+    </gf-page-fab>
   }
 </div>

apps/client/src/styles.scss

@@ -360,10 +360,6 @@ ngx-skeleton-loader {
   text-wrap: balance;
 }
 
-.has-fab {
-  padding-bottom: 3rem !important;
-}
-
 .has-info-message {
   // Restrict viewport height of tabbed views when the Live Demo or system announcements banner are displayed
   .page:has(gf-page-tabs) {
@@ -484,13 +480,6 @@ ngx-skeleton-loader {
   padding-bottom: env(safe-area-inset-bottom);
   padding-bottom: constant(safe-area-inset-bottom);
 
-  .fab-container {
-    bottom: 2rem;
-    position: fixed;
-    right: 2rem;
-    z-index: 999;
-  }
-
   // Restrict viewport height and layout boundaries only when the page hosts tab navigation
   &:has(gf-page-tabs) {
     height: calc(100svh - var(--mat-toolbar-standard-height));

libs/ui/src/lib/page-fab/index.ts

@@ -0,0 +1 @@
+export * from './page-fab.component';

libs/ui/src/lib/page-fab/page-fab.component.html

@@ -0,0 +1 @@
+<ng-content />

libs/ui/src/lib/page-fab/page-fab.component.scss

@@ -0,0 +1,14 @@
+:host {
+  bottom: calc(constant(safe-area-inset-bottom) + 2rem);
+  bottom: calc(env(safe-area-inset-bottom) + 2rem);
+  position: fixed;
+  right: 2rem;
+  z-index: 999;
+}
+
+:host-context(gf-page-tabs) {
+  @media (max-width: 575.98px) {
+    bottom: calc(constant(safe-area-inset-bottom) + 5rem);
+    bottom: calc(env(safe-area-inset-bottom) + 5rem);
+  }
+}

libs/ui/src/lib/page-fab/page-fab.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-page-fab',
+  styleUrls: ['./page-fab.component.scss'],
+  templateUrl: './page-fab.component.html'
+})
+export class GfPageFabComponent {}

libs/ui/src/lib/page-tabs/page-tabs.component.scss

@@ -15,12 +15,6 @@
   );
 
   ::ng-deep {
-    .fab-container {
-      @media (max-width: 575.98px) {
-        bottom: 5rem;
-      }
-    }
-
     .mat-mdc-tab-nav-panel {
       padding: 2rem 0;