feat: dark theme

2026-01-21 09:03:02 +00:00 · 2023-03-22 17:44:40 +00:00
parent 23bd5a431c
commit e75a46633c
62 changed files with 688 additions and 339 deletions
--- a/src/app/modules/data/data.module.ts
+++ b/src/app/modules/data/data.module.ts
@@ -99,6 +99,7 @@ import {SCThingListItemVirtualScrollStrategyDirective} from './list/sc-thing-lis
 import {DataListItemHostDirective} from './list/data-list-item-host.directive';
 import {DataListItemHostDefaultComponent} from './list/data-list-item-host-default.component';
 import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
+import {DishCharacteristicsComponent} from './types/dish/dish-characteristics.component';

 /**
 * Module for handling data
@@ -111,6 +112,7 @@ import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
    AddressDetailComponent,
    CatalogDetailContentComponent,
    CatalogListItemComponent,
+    DishCharacteristicsComponent,
    DataDetailComponent,
    DataDetailContentComponent,
    DataIconPipe,
--- a/src/app/modules/data/detail/data-detail-content.scss
+++ b/src/app/modules/data/detail/data-detail-content.scss
@@ -38,7 +38,7 @@ stapps-origin-detail {
    position: relative;
    margin-block-start: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
    margin-block-end: var(--spacing-xl);
-    background-color: var(--ion-color-primary-contrast);
+    background-color: var(--ion-card-background);
    @include content-padding();

    & > ion-thumbnail {
@@ -73,7 +73,6 @@ stapps-origin-detail {
      padding-bottom: 8px;
    }
    ion-card-header {
-      color: var(--ion-color-dark);
      padding-top: 8px;
      padding-bottom: 4px;
      font-weight: bold;
--- a/src/app/modules/data/detail/data-detail.scss
+++ b/src/app/modules/data/detail/data-detail.scss
@@ -19,3 +19,15 @@ ion-content > div {
  flex-direction: column;
  flex: 1;
 }
+
+stapps-data-path ::ng-deep ion-breadcrumb {
+  color: var(--ion-color-primary-contrast);
+
+  &::part(separator) {
+    color: var(--ion-color-primary-contrast);
+  }
+
+  &::part(collapsed-indicator) {
+    background: var(--ion-color-primary-contrast);
+  }
+}
--- a/src/app/modules/data/elements/favorite-button.component.html
+++ b/src/app/modules/data/elements/favorite-button.component.html
@@ -1,16 +1,16 @@
 <!--
-  ~ 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.
+  ~ 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.
+  ~ 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/>.
+  ~ 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 (click)="toggle($event)" color="medium" size="small" fill="clear">
--- a/src/app/modules/data/elements/favorite-button.component.scss
+++ b/src/app/modules/data/elements/favorite-button.component.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.
@@ -27,6 +27,7 @@
  }

  .selected {
+    // TODO
    color: #fbc02d;
  }
 }
--- a/src/app/modules/data/elements/title-card.component.html
+++ b/src/app/modules/data/elements/title-card.component.html
@@ -38,7 +38,6 @@
    <ion-button
      expand="full"
      fill="clear"
-      color="light"
      *ngIf="item.description && buttonShown"
      (click)="toggleDescriptionAccordion()"
    >
--- a/src/app/modules/data/elements/title-card.component.scss
+++ b/src/app/modules/data/elements/title-card.component.scss
@@ -39,10 +39,14 @@ ion-card {
    padding: 0 0 var(--header-spacing-bottom);

    .description * {
-      color: var(--ion-color-light);
+      color: var(--ion-color-primary-contrast);
    }
    .openingHours {
-      color: var(--ion-color-light);
+      color: var(--ion-color-primary-contrast);
    }
  }
+
+  ion-button {
+    --color: var(--ion-color-primary-contrast);
+  }
 }
--- a/src/app/modules/data/list/data-list-item.scss
+++ b/src/app/modules/data/list/data-list-item.scss
@@ -13,7 +13,6 @@
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */
@import 'src/theme/util/_mixins.scss';
-@import 'src/theme/common/_helper.scss';

 :host {
  display: block;
@@ -50,11 +49,6 @@ ion-item {
      flex-direction: column;
    }
  }
-  ::ng-deep {
-    ion-note {
-      @extend %horizontal-list;
-    }
-  }
 }

 :host.square ::ng-deep {
--- a/src/app/modules/data/list/search-page.html
+++ b/src/app/modules/data/list/search-page.html
@@ -56,7 +56,10 @@
 </ion-header>

 <ion-content class="content">
-  <div [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'">
+  <div
+    [class.no-results]="!showDefaultData && !items && !loading"
+    [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
+  >
    <ion-label class="centeredMessageContainer">
      {{ 'search.instruction' | translate }}
    </ion-label>
--- a/src/app/modules/data/list/search-page.scss
+++ b/src/app/modules/data/list/search-page.scss
@@ -37,7 +37,7 @@ ion-toolbar:first-of-type {
 }

 ion-content {
-  --background: var(--ion-color-light);
+  --background: var(--ion-background-color);
 }

 .content > div {
--- a/src/app/modules/data/types/dish/dish-characteristics.component.ts
+++ b/src/app/modules/data/types/dish/dish-characteristics.component.ts
@@ -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/>.
+ */
+import {Component, Input} from '@angular/core';
+import {SCDish} from '@openstapps/core';
+
+@Component({
+  selector: 'stapps-dish-characteristics',
+  templateUrl: 'dish-characteristics.html',
+  styleUrls: ['dish-characteristics.scss'],
+})
+export class DishCharacteristicsComponent {
+  @Input() item: SCDish;
+}
--- a/src/app/modules/data/types/dish/dish-characteristics.html
+++ b/src/app/modules/data/types/dish/dish-characteristics.html
@@ -0,0 +1,28 @@
+<!--
+  ~ 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-note>
+  <ng-container *ngIf="item.characteristics">
+    <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
+      <!-- Abbr tag shows the actual name on hover -->
+      <abbr
+        [style.--background-url]="'url(' + characteristic.image + ')'"
+        [title]="characteristic.name | titlecase"
+      ></abbr>
+    </ng-container>
+  </ng-container>
+  <ion-label>
+    {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
+  </ion-label>
+</ion-note>
--- a/src/app/modules/data/types/dish/dish-characteristics.scss
+++ b/src/app/modules/data/types/dish/dish-characteristics.scss
@@ -0,0 +1,38 @@
+/*!
+ * 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-note {
+  list-style: none;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: start;
+}
+
+abbr {
+  width: 16px;
+  aspect-ratio: 1;
+
+  background: var(--ion-color-medium);
+
+  mask-image: var(--background-url);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  mask-mode: alpha;
+
+  + ion-label::after {
+    content: '•';
+    margin-inline: var(--spacing-xs);
+  }
+}
--- a/src/app/modules/data/types/dish/dish-detail-content.html
+++ b/src/app/modules/data/types/dish/dish-detail-content.html
@@ -13,31 +13,7 @@
  ~ this program. If not, see <https://www.gnu.org/licenses/>.
  -->

-<ion-grid>
-  <ion-row>
-    <ion-col>
-      <ion-card *ngIf="item.categories">
-        <ion-card-header>
-          {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
-        </ion-card-header>
-      </ion-card>
-    </ion-col>
-    <ion-col>
-      <ion-card *ngIf="item.characteristics">
-        <ion-card-header class="no-padding-inline-start vertical-list">
-          <ul>
-            <li>
-              <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
-                <img [src]="characteristic.image" [alt]="characteristic.name | titlecase" />
-              </ng-container>
-            </li>
-          </ul>
-        </ion-card-header>
-      </ion-card>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-
+<stapps-dish-characteristics *ngIf="item.characteristics" [item]="item"></stapps-dish-characteristics>
 <stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
 <!-- unwanted by swffm
 <ion-card *ngIf="item.nutrition">
@@ -92,7 +68,7 @@
 -->
 <stapps-simple-card
  *ngIf="item.additives"
-  [title]="'additives' | propertyNameTranslate: item"
+  [title]="$any('additives' | propertyNameTranslate: item) | titlecase"
  [content]="'additives' | thingTranslate: item | join: ', '"
 >
 </stapps-simple-card>
--- a/src/app/modules/data/types/dish/dish-detail-content.scss
+++ b/src/app/modules/data/types/dish/dish-detail-content.scss
@@ -12,10 +12,7 @@
 * 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 'src/theme/common/_helper.scss';
-.vertical-list {
-  ul li img {
-    filter: unset;
-  }
+stapps-dish-characteristics {
+  margin: var(--spacing-lg);
+  margin-block-end: var(--spacing-sm);
 }
--- a/src/app/modules/data/types/dish/dish-list-item.html
+++ b/src/app/modules/data/types/dish/dish-list-item.html
@@ -21,18 +21,7 @@
        <p class="title-sub ion-hide-sm-down">
          {{ 'description' | thingTranslate: item }}
        </p>
-        <ion-note>
-          <ul>
-            <li>
-              {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
-            </li>
-            <li *ngIf="item.characteristics">
-              <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
-                <img [src]="characteristic.image" [alt]="characteristic.name | titlecase" />
-              </ng-container>
-            </li>
-          </ul>
-        </ion-note>
+        <stapps-dish-characteristics [item]="item"></stapps-dish-characteristics>
      </div>
    </ion-col>
    <ion-col width-10 text-right>
--- a/src/app/modules/data/types/event/event-list-item.html
+++ b/src/app/modules/data/types/event/event-list-item.html
@@ -24,9 +24,9 @@
        <p *ngIf="item.academicTerms" class="title-sub">
          {{ 'name' | thingTranslate: item.academicTerms[0] }}
        </p>
-        <ion-note *ngIf="!item.categories">{{ 'type' | thingTranslate: item }}</ion-note>
+        <ion-note *ngIf="!item.categories">{{ 'type' | thingTranslate: item | titlecase }}</ion-note>
        <ion-note *ngIf="item.categories">
-          {{ 'categories' | thingTranslate: item | join: ', ' }}
+          {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
        </ion-note>
      </div>
    </ion-col>
--- a/src/app/modules/data/types/message/message-detail-content.html
+++ b/src/app/modules/data/types/message/message-detail-content.html
@@ -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,9 +40,8 @@
 </div>

 <ng-template #news>
-  <ion-thumbnail>
+  <ion-thumbnail *ngIf="item.image" style="background-image: url('{{ item.image }}')">
    <ion-img
-      *ngIf="item.image"
      src="{{ item.image }}"
      (ionError)="$event.target.nextSibling.style.display = 'none'"
      alt="{{ item.name }}"
--- a/src/app/modules/data/types/message/message-detail-content.scss
+++ b/src/app/modules/data/types/message/message-detail-content.scss
@@ -1,5 +1,5 @@
-/*
- * Copyright (C) 2021 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.
@@ -15,17 +15,24 @@

 :host {
  ion-thumbnail {
+    position: relative;
    width: 100%;
    height: auto;
-    img {
-      display: block;
-    }
-  }
-  // Show smaller image on a desktop
-  @media (min-width: 992px) {
-    ion-thumbnail {
-      width: 60%;
-      margin: 0 auto;
+    margin-inline: auto;
+    overflow: hidden;
+    background-size: contain;
+    background-position: center;
+    transform: scaleX(-1);
+
+    ion-img {
+      backdrop-filter: blur(32px);
+
+      &::part(image) {
+        transform: scaleX(-1);
+        max-width: 16cm;
+        object-fit: contain;
+        margin-inline: auto;
+      }
    }
  }

--- a/src/app/modules/data/types/place/place-detail-content.component.ts
+++ b/src/app/modules/data/types/place/place-detail-content.component.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.
@@ -12,10 +12,13 @@
 * 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, Input, OnInit} from '@angular/core';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {SCBuilding, SCFloor, SCPointOfInterest, SCRoom, SCThings} from '@openstapps/core';
 import {DataProvider} from '../../data.provider';
 import {hasValidLocation, isSCFloor} from './place-types';
+import {DataRoutingService} from '../../data-routing.service';
+import {Router} from '@angular/router';
+import {Subscription} from 'rxjs';

 /**
 * TODO
@@ -26,7 +29,7 @@ import {hasValidLocation, isSCFloor} from './place-types';
  selector: 'stapps-place-detail-content',
  templateUrl: 'place-detail-content.html',
 })
-export class PlaceDetailContentComponent implements OnInit {
+export class PlaceDetailContentComponent implements OnInit, OnDestroy {
  /**
   * TODO
   */
@@ -39,6 +42,8 @@ export class PlaceDetailContentComponent implements OnInit {
   */
  hasValidLocation = false;

+  itemRouting: Subscription;
+
  /**
   * TODO
   *
@@ -63,7 +68,17 @@ export class PlaceDetailContentComponent implements OnInit {
    );
  }

+  constructor(dataRoutingService: DataRoutingService, router: Router) {
+    this.itemRouting = dataRoutingService.itemSelectListener().subscribe(item => {
+      void router.navigate(['/data-detail', item.uid]);
+    });
+  }
+
  ngOnInit() {
    this.hasValidLocation = !isSCFloor(this.item) && hasValidLocation(this.item);
  }
+
+  ngOnDestroy() {
+    this.itemRouting.unsubscribe();
+  }
 }
--- a/src/app/modules/data/types/place/place-detail-content.html
+++ b/src/app/modules/data/types/place/place-detail-content.html
@@ -35,8 +35,7 @@
      {{ 'inPlace' | propertyNameTranslate: item | titlecase }}
    </ion-card-header>
    <ion-card-content>
-      <ion-icon name="pin_drop"></ion-icon>
-      <a [routerLink]="['/data-detail', item.inPlace.uid]">{{ 'name' | thingTranslate: item.inPlace }}</a>
+      <stapps-data-list-item [item]="item.inPlace"></stapps-data-list-item>
    </ion-card-content>
  </ion-card>
 </ng-container>
--- a/src/app/modules/data/types/place/place-list-item.component.ts
+++ b/src/app/modules/data/types/place/place-list-item.component.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.
@@ -14,7 +14,7 @@
 */
 import {Component, Input} from '@angular/core';
 import {PositionService} from '../../../map/position.service';
-import {Subscription, interval} from 'rxjs';
+import {interval, Subscription} from 'rxjs';
 import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from './place-types';

 /**
@@ -23,6 +23,7 @@ import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from '.
@Component({
  selector: 'stapps-place-list-item',
  templateUrl: 'place-list-item.html',
+  styleUrls: ['place-list-item.scss'],
 })
 export class PlaceListItemComponent {
  /**
--- a/src/app/modules/data/types/place/place-list-item.html
+++ b/src/app/modules/data/types/place/place-list-item.html
@@ -26,28 +26,24 @@
          </p>
          <p>
            <ion-note *ngIf="item.categories && item.type !== 'building'; else onlyType">
-              <ul>
-                <li>
-                  {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
-                </li>
-                <li *ngIf="distance">
-                  <ion-icon name="directions_walk"></ion-icon>
-                  {{ distance | metersLocalized }}
-                </li>
-              </ul>
+              <ion-label>
+                {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
+              </ion-label>
+              <ion-label *ngIf="distance" class="distance">
+                <ion-icon name="directions_walk"></ion-icon>
+                {{ distance | metersLocalized }}
+              </ion-label>
            </ion-note>
          </p>
          <ng-template #onlyType>
            <ion-note>
-              <ul>
-                <li>
-                  {{ 'type' | thingTranslate: item }}
-                </li>
-                <li *ngIf="distance">
-                  <ion-icon name="directions_walk"></ion-icon>
-                  {{ distance | metersLocalized }}
-                </li>
-              </ul>
+              <ion-label>
+                {{ 'type' | thingTranslate: item | titlecase }}
+              </ion-label>
+              <ion-label *ngIf="distance" class="distance">
+                <ion-icon name="directions_walk"></ion-icon>
+                {{ distance | metersLocalized }}
+              </ion-label>
            </ion-note>
          </ng-template>
        </ng-container>
@@ -56,10 +52,11 @@
        </p>
      </div>
    </ion-col>
-    <div *ngIf="item.type !== 'building'">
-      <ion-col width-20 text-right *ngIf="item.inPlace">
-        <ion-icon name="pin_drop"></ion-icon>{{ 'name' | thingTranslate: item.inPlace }}
+    <ng-container *ngIf="item.type !== 'building'">
+      <ion-col size="auto" class="in-place" *ngIf="item.inPlace">
+        <ion-icon name="pin_drop"></ion-icon
+        ><ion-label>{{ 'name' | thingTranslate: item.inPlace }}</ion-label>
      </ion-col>
-    </div>
+    </ng-container>
  </ion-row>
 </ion-grid>
--- a/src/app/modules/data/types/place/place-list-item.scss
+++ b/src/app/modules/data/types/place/place-list-item.scss
@@ -0,0 +1,36 @@
+/*!
+ * 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-note {
+  display: flex;
+
+  > ion-label {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+ion-label + ion-label.distance::before {
+  content: '•';
+  margin-inline: var(--spacing-xs);
+}
+
+.in-place {
+  display: flex;
+
+  justify-content: end;
+  align-items: center;
+}