fix: correct data path color

fix: missing ionic component icons
feat: parallax detail background

src/app/modules/data/detail/data-detail-content.scss

@@ -1,3 +1,18 @@
+/*!
+ * Copyright (C) 2022 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 ::ng-deep {
   ion-slides.work-locations {
     ion-slide {
@@ -34,7 +49,6 @@
 
   > div {
     padding: 0 var(--spacing-md);
-    background-color: var(--ion-color-light);
 
     & > * {
       display: block;

src/app/modules/data/detail/data-detail.html

@@ -1,16 +1,16 @@
 <!--
   ~ Copyright (C) 2022 StApps
-  ~  This program is free software: you can redistribute it and/or modify it
+  ~ 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
+  ~ under the terms of the GNU General Public License as published by the Free
-  ~  Software Foundation, version 3.
+  ~ Software Foundation, version 3.
   ~
-  ~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-  ~  more details.
+  ~ more details.
   ~
-  ~  You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
 <ion-header *ngIf="defaultHeader">
@@ -33,7 +33,7 @@
   </ion-toolbar>
 </ion-header>
 <ng-content select="[header]"></ng-content>
-<ion-content class="ion-no-padding">
+<ion-content class="ion-no-padding ion-content-parallax">
   <div [ngSwitch]="true">
     <ng-container *ngSwitchCase="!item && (isDisconnected | async)">
       <div class="centeredMessageContainer">

src/app/modules/data/detail/data-detail.scss

@@ -1,9 +1,25 @@
+/*!
+ * Copyright (C) 2022 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/>.
+ */
+
 ::ng-deep {
   ion-card-header {
     font-weight: bold;
   }
+
   stapps-favorite-button {
-      ion-icon {
+    ion-icon {
       color: var(--ion-color-light);
     }
   }

src/app/modules/data/detail/data-path.html

@@ -1,20 +1,21 @@
 <!--
   ~ Copyright (C) 2022 StApps
-  ~  This program is free software: you can redistribute it and/or modify it
+  ~ 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
+  ~ under the terms of the GNU General Public License as published by the Free
-  ~  Software Foundation, version 3.
+  ~ Software Foundation, version 3.
   ~
-  ~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-  ~  more details.
+  ~ more details.
   ~
-  ~  You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
 <ng-container *ngIf="path | async as stack">
   <ion-breadcrumbs
+    color="light"
     [itemsBeforeCollapse]="1"
     [itemsAfterCollapse]="($width | async) >= 768 ? 1 : 0"
     [maxItems]="2"

src/app/util/ion-icon/ion-breadcrumb.directive.ts

@@ -1,16 +1,16 @@
 /*
  * Copyright (C) 2022 StApps
- *  This program is free software: you can redistribute it and/or modify it
+ * 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
+ * under the terms of the GNU General Public License as published by the Free
- *  Software Foundation, version 3.
+ * Software Foundation, version 3.
  *
- *  This program is distributed in the hope that it will be useful, but WITHOUT
+ * This program is distributed in the hope that it will be useful, but WITHOUT
- *  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- *  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- *  more details.
+ * more details.
  *
- *  You should have received a copy of the GNU General Public License along with
+ * You should have received a copy of the GNU General Public License along with
- *  this program. If not, see <https://www.gnu.org/licenses/>.
+ * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
 import {Directive, ElementRef, ViewContainerRef} from '@angular/core';
@@ -26,12 +26,22 @@ export class IonBreadcrumbDirective extends IconReplacer {
   }
 
   replace() {
+    this.replaceIcon(
+      this.host.querySelector('span[part="separator"]'),
+      {
+        name: SCIcon`arrow_forward_ios`,
+        size: 16,
+        style: `color: var(--ion-color-tint);`,
+      },
+      '-separator',
+    );
     this.replaceIcon(
       this.host.querySelector('button[part="collapsed-indicator"]'),
       {
         name: SCIcon`more_horiz`,
         size: 24,
       },
+      '-collapsed',
     );
   }
 }

src/app/util/ion-icon/ion-icon.directive.ts

@@ -1,16 +1,16 @@
 /*
  * Copyright (C) 2022 StApps
- *  This program is free software: you can redistribute it and/or modify it
+ * 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
+ * under the terms of the GNU General Public License as published by the Free
- *  Software Foundation, version 3.
+ * Software Foundation, version 3.
  *
- *  This program is distributed in the hope that it will be useful, but WITHOUT
+ * This program is distributed in the hope that it will be useful, but WITHOUT
- *  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- *  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- *  more details.
+ * more details.
  *
- *  You should have received a copy of the GNU General Public License along with
+ * You should have received a copy of the GNU General Public License along with
- *  this program. If not, see <https://www.gnu.org/licenses/>.
+ * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
 import {
@@ -54,6 +54,8 @@ export class IonIconDirective implements OnInit, OnDestroy, OnChanges {
 
   @Input() grade: number;
 
+  @Input() style: string;
+
   private mutationObserver: MutationObserver;
 
   iconComponent?: ComponentRef<IconComponent>;
@@ -121,6 +123,9 @@ export class IonIconDirective implements OnInit, OnDestroy, OnChanges {
     if (this.size) {
       this.element.nativeElement.style.cssText = `font-size: ${this.size}px;`;
     }
+    if (this.style) {
+      this.element.nativeElement.style.cssText += this.style;
+    }
   }
 
   disableProperty(name: string) {

src/app/util/ion-icon/replace-util.ts

@@ -1,16 +1,16 @@
 /*
  * Copyright (C) 2022 StApps
- *  This program is free software: you can redistribute it and/or modify it
+ * 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
+ * under the terms of the GNU General Public License as published by the Free
- *  Software Foundation, version 3.
+ * Software Foundation, version 3.
  *
- *  This program is distributed in the hope that it will be useful, but WITHOUT
+ * This program is distributed in the hope that it will be useful, but WITHOUT
- *  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- *  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- *  more details.
+ * more details.
  *
- *  You should have received a copy of the GNU General Public License along with
+ * You should have received a copy of the GNU General Public License along with
- *  this program. If not, see <https://www.gnu.org/licenses/>.
+ * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
 import {
@@ -121,7 +121,7 @@ export abstract class IconReplacer implements OnInit, OnDestroy {
     });
   }
 
-  replaceIcon(parent: HTMLElement | null, iconData: IconData) {
+  replaceIcon(parent: HTMLElement | null, iconData: IconData, slotName = '') {
     if (!parent) return;
 
     const icon = parent.querySelector('ion-icon');
@@ -135,10 +135,10 @@ export abstract class IconReplacer implements OnInit, OnDestroy {
       // shadow dom needs to utilize slotting, to put it outside
       // the shadow dom, otherwise it won't receive any css data
       const slot = document.createElement('slot');
-      slot.name = this.slotName;
+      slot.name = this.slotName + slotName;
       icon.replaceWith(slot);
 
-      scIcon.location.nativeElement.slot = this.slotName;
+      scIcon.location.nativeElement.slot = this.slotName + slotName;
       this.element.nativeElement.append(scIcon.location.nativeElement);
     } else {
       icon.replaceWith(scIcon.location.nativeElement);

src/global.scss

@@ -1,16 +1,16 @@
 /*!
  * Copyright (C) 2022 StApps
- *  This program is free software: you can redistribute it and/or modify it
+ * 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
+ * under the terms of the GNU General Public License as published by the Free
- *  Software Foundation, version 3.
+ * Software Foundation, version 3.
  *
- *  This program is distributed in the hope that it will be useful, but WITHOUT
+ * This program is distributed in the hope that it will be useful, but WITHOUT
- *  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- *  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- *  more details.
+ * more details.
  *
- *  You should have received a copy of the GNU General Public License along with
+ * You should have received a copy of the GNU General Public License along with
- *  this program. If not, see <https://www.gnu.org/licenses/>.
+ * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
 // http://ionicframework.com/docs/theming/
@@ -32,6 +32,7 @@
 
 // @import 'material-symbols/rounded.scss';
 @import "./theme/material-symbols.scss";
+@import "./theme/common/_ion-content-parallax.scss";
 
 /* StApps */
 
@@ -113,3 +114,7 @@ ion-card.bold-header {
     font-weight: bold;
   }
 }
+
+.ion-content-parallax {
+  @include ion-content-parallax()
+}

src/theme/common/_ion-content-parallax.scss

@@ -0,0 +1,48 @@
+/*!
+ * Copyright (C) 2022 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/>.
+ */
+
+@mixin ion-content-parallax(
+  $parallax-background: var(--ion-color-primary),
+  $background: var(--ion-color-light),
+  $parallax-strength: 2,
+  $overscroll-padding: 50vh,
+  $content-size: 0px,
+) {
+  &::part(background) {
+    background: $background;
+  }
+  &::part(scroll) {
+    perspective: 2px;
+  }
+  > div {
+    transform-style: preserve-3d;
+    position: relative;
+
+    &::after {
+      content: " ";
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: calc(#{$content-size} + #{$parallax-strength} * #{$overscroll-padding});
+      width: 200%;
+      transform:
+        translateY(calc(-#{$overscroll-padding} * #{$parallax-strength}))
+        translateZ(calc(-1px * #{$parallax-strength}))
+        scale(1.5);
+      z-index: -1;
+      background: $parallax-background;
+    }
+  }
+}