feat: offline notice

src/app/modules/menu/context/context-menu.service.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -40,7 +40,7 @@ export class ContextMenuService {
   /**
    * Container for the filter query (SCSearchFilter)
    */
-  filterQuery = new Subject<SCSearchFilter>();
+  filterQuery = new Subject<SCSearchFilter | undefined>();
 
   /**
    * Observable filterContext streams
@@ -65,7 +65,7 @@ export class ContextMenuService {
   /**
    * Container for the sort query
    */
-  sortQuery = new Subject<SCSearchSort[]>();
+  sortQuery = new Subject<SCSearchSort[] | undefined>();
 
   /**
    * Observable SortContext streams

src/app/modules/menu/navigation/navigation.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2018, 2019 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.

src/app/modules/menu/navigation/navigation.html

@@ -13,6 +13,7 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
+<stapps-offline-notice></stapps-offline-notice>
 <ion-split-pane contentId="main" when="lg">
   <ion-menu menuId="main" contentId="main" type="overlay" side="start" swipe-gesture="false">
     <ion-header>

src/app/modules/menu/navigation/navigation.module.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -21,9 +21,10 @@ import {IonicModule} from '@ionic/angular';
 import {IonIconModule} from '../../../util/ion-icon/ion-icon.module';
 import {TranslateModule} from '@ngx-translate/core';
 import {RouterModule} from '@angular/router';
+import {OfflineNoticeComponent} from './offline-notice.component';
 
 @NgModule({
-  declarations: [RootLinkDirective, NavigationComponent, TabsComponent],
+  declarations: [RootLinkDirective, NavigationComponent, TabsComponent, OfflineNoticeComponent],
   imports: [CommonModule, IonicModule, IonIconModule, TranslateModule, RouterModule],
   exports: [TabsComponent, RootLinkDirective, NavigationComponent],
 })

src/app/modules/menu/navigation/navigation.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -21,8 +21,14 @@ stapps-navigation-tabs {
   }
 }
 
+stapps-offline-notice.has-error ~ ion-split-pane,
+stapps-offline-notice.is-offline ~ ion-split-pane {
+  margin-top: calc(var(--font-size-md) + 2 * var(--spacing-sm));
+}
+
 :host {
   ion-split-pane {
+    transition: margin-top 150ms ease;
     --side-max-width: 256px;
     margin-bottom: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom));
 

src/app/modules/menu/navigation/offline-notice.component.ts

@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Component, ElementRef, HostBinding, OnDestroy, ViewChild} from '@angular/core';
+import {InternetConnectionService} from '../../../util/internet-connection.service';
+import {Subscription} from 'rxjs';
+import {Router} from '@angular/router';
+import {NGXLogger} from 'ngx-logger';
+
+@Component({
+  selector: 'stapps-offline-notice',
+  templateUrl: 'offline-notice.html',
+  styleUrls: ['offline-notice.scss'],
+})
+export class OfflineNoticeComponent implements OnDestroy {
+  @HostBinding('class.is-offline') isOffline = false;
+
+  @HostBinding('class.has-error') hasError = false;
+
+  @ViewChild('spinIcon', {read: ElementRef}) spinIcon: ElementRef;
+
+  readonly subscriptions: Subscription[];
+
+  constructor(
+    readonly offlineProvider: InternetConnectionService,
+    readonly router: Router,
+    readonly logger: NGXLogger,
+  ) {
+    this.subscriptions = [
+      this.offlineProvider.offline$.subscribe(isOffline => {
+        this.isOffline = isOffline;
+      }),
+      this.offlineProvider.error$.subscribe(hasError => {
+        this.hasError = hasError;
+      }),
+    ];
+  }
+
+  retry() {
+    this.spinIcon.nativeElement.classList.remove('spin');
+    this.spinIcon.nativeElement.offsetWidth;
+    this.spinIcon.nativeElement.classList.add('spin');
+    this.offlineProvider.retry();
+  }
+
+  ngOnDestroy() {
+    for (const subscription of this.subscriptions) {
+      subscription.unsubscribe();
+    }
+  }
+}

src/app/modules/menu/navigation/offline-notice.html

@@ -0,0 +1,25 @@
+<!--
+  ~ Copyright (C) 2023 StApps
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
+  ~
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+<ion-button class="offline-button" color="warning">
+  <ion-icon slot="start" size="16" weight="800" name="cloud_off"></ion-icon>
+  <ion-label>{{ 'app.errors.OFFLINE' | translate }}</ion-label>
+</ion-button>
+<ion-button class="error-button" color="danger" (click)="retry()">
+  <ion-icon #spinIcon slot="start" size="16" weight="800" name="refresh"></ion-icon>
+  <ion-label>{{ 'app.errors.CONNECTION_ERROR' | translate }}</ion-label>
+</ion-button>
+<ion-button class="close" fill="clear" color="light" (click)="offlineProvider.dismissError()"
+  ><ion-icon size="16" weight="800" name="close" slot="icon-only"></ion-icon
+></ion-button>

src/app/modules/menu/navigation/offline-notice.scss

@@ -0,0 +1,77 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+:host {
+  display: grid;
+  $height: calc(var(--font-size-md) + 2 * var(--spacing-sm));
+
+  height: $height;
+  width: 100%;
+
+  line-height: var(--font-size-md);
+  font-size: var(--font-size-md);
+  font-weight: bold;
+
+  transform: translateY(calc(-1 * $height));
+
+  transition: all 150ms ease;
+
+  &.is-offline,
+  &.has-error {
+    transform: translateY(0px);
+  }
+
+  > ion-button {
+    grid-row: 1;
+    grid-column: 1;
+    margin: 0;
+    --border-radius: 0;
+    opacity: 0;
+    --padding-top: 0;
+    --padding-bottom: 0;
+    transition: all 150ms ease;
+    z-index: 0;
+
+    &.close {
+      height: 100%;
+      margin: 0;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      bottom: 0;
+      transform: translateY(-50%);
+      z-index: 1;
+      color: var(--ion-color-danger-contrast);
+    }
+  }
+
+  &.is-offline > .offline-button,
+  &.has-error > .close,
+  &.has-error > .error-button {
+    opacity: 1;
+  }
+}
+
+.spin {
+  animation: loading 1s ease running 3;
+}
+
+@keyframes loading {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}