diff --git a/src/app/modules/dashboard/sections/search-section/search-section.component.ts b/src/app/modules/dashboard/sections/search-section/search-section.component.ts
index 053241f7..a4c4783a 100644
--- a/src/app/modules/dashboard/sections/search-section/search-section.component.ts
+++ b/src/app/modules/dashboard/sections/search-section/search-section.component.ts
@@ -13,10 +13,7 @@
* this program. If not, see .
*/
import {Component} from '@angular/core';
-import {Router} from '@angular/router';
-import {Capacitor} from '@capacitor/core';
-import {Keyboard} from '@capacitor/keyboard';
-import {AnimationBuilder, AnimationController} from '@ionic/angular';
+import {AnimationController} from '@ionic/angular';
import {homePageSearchTransition} from './search-route-transition';
/**
@@ -28,29 +25,7 @@ import {homePageSearchTransition} from './search-route-transition';
styleUrls: ['search-section.component.scss'],
})
export class SearchSectionComponent {
- searchTerm = '';
+ routeTransition = homePageSearchTransition(this.animationController);
- routeTransition: AnimationBuilder;
-
- constructor(private router: Router, private animationController: AnimationController) {
- this.routeTransition = homePageSearchTransition(this.animationController);
- }
-
- /**
- * User submits search
- */
- onSubmitSearch() {
- this.router
- .navigate(['/search'], {queryParams: {query: this.searchTerm}})
- .then(() => this.hideKeyboard());
- }
-
- /**
- * Hides keyboard in native app environments
- */
- hideKeyboard() {
- if (Capacitor.isNativePlatform()) {
- Keyboard.hide();
- }
- }
+ constructor(private animationController: AnimationController) {}
}
diff --git a/src/app/modules/favorites/favorites.service.ts b/src/app/modules/favorites/favorites.service.ts
index 24423907..b936e982 100644
--- a/src/app/modules/favorites/favorites.service.ts
+++ b/src/app/modules/favorites/favorites.service.ts
@@ -51,6 +51,8 @@ export class FavoritesService {
// using debounce time 0 allows change detection to run through async suspension
favoritesChanged$ = this.favorites.pipe(debounceTime(0));
+ favoriteThings$ = this.favoritesChanged$.pipe(map(favorite => [...favorite.values()].map(it => it.data)));
+
static getDataFromFavorites(items: SCFavorite[]) {
return items.map(item => item.data);
}
diff --git a/src/app/modules/profile/page/profile-page-section.html b/src/app/modules/profile/page/profile-page-section.html
index 053ea254..ac78accb 100644
--- a/src/app/modules/profile/page/profile-page-section.html
+++ b/src/app/modules/profile/page/profile-page-section.html
@@ -28,6 +28,7 @@
*ngFor="let link of item.links"
[routerLink]="link.link"
[disabled]="link.needsAuth && !isLoggedIn"
+ [detail]="false"
>
diff --git a/src/app/modules/profile/page/profile-page-section.scss b/src/app/modules/profile/page/profile-page-section.scss
index fd2d18f1..f4169e7d 100644
--- a/src/app/modules/profile/page/profile-page-section.scss
+++ b/src/app/modules/profile/page/profile-page-section.scss
@@ -12,6 +12,8 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see .
*/
+@use 'sass:math';
+
$width: 108px;
simple-swiper {
@@ -22,7 +24,7 @@ simple-swiper {
@each $i in 7, 6, 5, 4, 3, 2, 1 {
$max: #{($width + 8px) * $i};
@container (inline-size < #{$max}) {
- --swiper-slide-width: #{100cqi / $i};
+ --swiper-slide-width: #{math.div(100cqi, $i)};
}
}
}
diff --git a/src/app/util/ion-icon/icon.component.ts b/src/app/util/ion-icon/icon.component.ts
index 4c5a1747..62a0fd02 100644
--- a/src/app/util/ion-icon/icon.component.ts
+++ b/src/app/util/ion-icon/icon.component.ts
@@ -1,24 +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.
+ * 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 .
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see .
*/
-import {Component, HostBinding, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';
@Component({
selector: 'stapps-icon',
templateUrl: 'icon.html',
styleUrls: ['icon.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconComponent {
@HostBinding('style.--size')
diff --git a/src/app/util/section.component.html b/src/app/util/section.component.html
index 469f032b..18e62b92 100644
--- a/src/app/util/section.component.html
+++ b/src/app/util/section.component.html
@@ -25,14 +25,24 @@
-
+
-
+
-
+
diff --git a/src/app/util/section.component.scss b/src/app/util/section.component.scss
index 7d31943e..982fc2b6 100644
--- a/src/app/util/section.component.scss
+++ b/src/app/util/section.component.scss
@@ -55,6 +55,7 @@ ion-col {
}
:host {
+ transition: height 250ms ease;
display: block;
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
--swiper-scroll-padding: var(--spacing-md);
diff --git a/src/app/util/section.component.ts b/src/app/util/section.component.ts
index b0504acc..ef228d27 100644
--- a/src/app/util/section.component.ts
+++ b/src/app/util/section.component.ts
@@ -12,8 +12,11 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see .
*/
-import {AfterContentInit, Component, Input, OnDestroy, ViewContainerRef} from '@angular/core';
+import {AfterContentInit, ChangeDetectionStrategy, Component, Input, ViewContainerRef} from '@angular/core';
import {SCThings} from '@openstapps/core';
+import {fromMutationObserver} from '../_helpers/rxjs/mutation-observer';
+import {mergeMap, ReplaySubject, takeLast} from 'rxjs';
+import {distinctUntilChanged, filter, map, startWith} from 'rxjs/operators';
/**
* Shows a horizontal list of action chips
@@ -22,50 +25,34 @@ import {SCThings} from '@openstapps/core';
selector: 'stapps-section',
templateUrl: 'section.component.html',
styleUrls: ['section.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class SectionComponent implements AfterContentInit, OnDestroy {
+export class SectionComponent implements AfterContentInit {
@Input() title = '';
@Input() item?: SCThings;
- mutationObserver: MutationObserver;
+ nativeElement = new ReplaySubject(1);
- swiper?: HTMLElement;
+ swiper = this.nativeElement.pipe(
+ takeLast(1),
+ mergeMap(element =>
+ fromMutationObserver(element, {
+ childList: true,
+ subtree: true,
+ }).pipe(
+ startWith([]),
+ map(() => element.querySelector('simple-swiper') as HTMLElement),
+ distinctUntilChanged(),
+ filter(element => !!element),
+ ),
+ ),
+ );
constructor(readonly viewContainerRef: ViewContainerRef) {}
ngAfterContentInit() {
- this.mutationObserver = new MutationObserver(() => {
- const simpleSwiper = this.viewContainerRef.element.nativeElement.querySelector('simple-swiper');
- if (!simpleSwiper) return;
-
- this.swiper = simpleSwiper;
- });
- this.mutationObserver.observe(this.viewContainerRef.element.nativeElement, {
- childList: true,
- subtree: true,
- });
- }
-
- slideNext() {
- if (this.swiper) {
- this.swiper.scrollBy({
- left: this.swiper.offsetWidth,
- behavior: 'smooth',
- });
- }
- }
-
- slidePrev() {
- if (this.swiper) {
- this.swiper.scrollBy({
- left: -this.swiper.offsetWidth,
- behavior: 'smooth',
- });
- }
- }
-
- ngOnDestroy() {
- this.mutationObserver.disconnect();
+ this.nativeElement.next(this.viewContainerRef.element.nativeElement);
+ this.nativeElement.complete();
}
}
diff --git a/src/app/util/simple-swiper.component.ts b/src/app/util/simple-swiper.component.ts
index 640cc1d5..def5906a 100644
--- a/src/app/util/simple-swiper.component.ts
+++ b/src/app/util/simple-swiper.component.ts
@@ -13,15 +13,12 @@
* this program. If not, see .
*/
-import {Component, ContentChildren, ElementRef, ViewContainerRef} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
@Component({
selector: 'simple-swiper',
templateUrl: 'simple-swiper.html',
styleUrls: ['simple-swiper.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class SimpleSwiperComponent {
- constructor(readonly viewContainerRef: ViewContainerRef) {}
-
- @ContentChildren('*') children: ElementRef;
-}
+export class SimpleSwiperComponent {}
diff --git a/src/app/util/simple-swiper.scss b/src/app/util/simple-swiper.scss
index 1768aba4..32a2ed16 100644
--- a/src/app/util/simple-swiper.scss
+++ b/src/app/util/simple-swiper.scss
@@ -29,7 +29,7 @@
gap: var(--swiper-gap, 0);
- &::ng-deep > *:not(ion-button) {
+ &::ng-deep > * {
contain: layout;
scroll-snap-align: start;
scroll-margin-inline: var(--swiper-scroll-padding, 0);
diff --git a/src/app/util/util.module.ts b/src/app/util/util.module.ts
index c003e269..b9d9300d 100644
--- a/src/app/util/util.module.ts
+++ b/src/app/util/util.module.ts
@@ -30,9 +30,10 @@ import {ThingTranslateModule} from '../translation/thing-translate.module';
import {SimpleSwiperComponent} from './simple-swiper.component';
import {SearchbarAutofocusDirective} from './searchbar-autofocus.directive';
import {SectionComponent} from './section.component';
+import {RouterModule} from '@angular/router';
@NgModule({
- imports: [BrowserModule, IonicModule, TranslateModule, ThingTranslateModule.forChild()],
+ imports: [BrowserModule, IonicModule, TranslateModule, ThingTranslateModule.forChild(), RouterModule],
declarations: [
ElementSizeChangeDirective,
ArrayLastPipe,