feat: profile page sections

Close #233, #261, #267

src/app/util/element-size-change.directive.ts

@@ -0,0 +1,47 @@
+/*
+ * 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/>.
+ */
+
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+
+@Directive({
+  selector: '[elementSizeChange]',
+})
+export class ElementSizeChangeDirective implements OnInit, OnDestroy {
+  @Output()
+  elementSizeChange = new EventEmitter<ResizeObserverEntry>();
+
+  private resizeObserver: ResizeObserver;
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngOnInit() {
+    this.resizeObserver = new ResizeObserver(elements => {
+      if (!elements[0]) return;
+      this.elementSizeChange.emit(elements[0]);
+    });
+    this.resizeObserver.observe(this.elementRef.nativeElement);
+  }
+
+  ngOnDestroy() {
+    this.resizeObserver.disconnect();
+  }
+}

src/app/util/section/section-link-card.component.ts

@@ -0,0 +1,27 @@
+/*
+ * 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/>.
+ */
+import {Component, Input} from '@angular/core';
+import {SCSectionLink} from '../../modules/profile/page/sections';
+
+@Component({
+  selector: 'stapps-section-link-card',
+  templateUrl: 'section-link-card.html',
+  styleUrls: ['section-link-card.scss'],
+})
+export class SectionLinkCardComponent {
+  @Input() item: SCSectionLink;
+
+  @Input() disabled: boolean;
+}

src/app/util/section/section-link-card.html

@@ -0,0 +1,23 @@
+<!--
+  ~ 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/>.
+  -->
+<ion-card [routerLink]="item.link" class="card" [class.disabled]="disabled">
+  <ion-card-header mode="md">
+    <ion-card-title>
+      <ion-icon [name]="item.icon" size="40"></ion-icon>
+      <!-- TODO: move this to thing translate -->
+      {{ 'name' | translateSimple: item }}
+    </ion-card-title>
+  </ion-card-header>
+</ion-card>

src/app/util/section/section-link-card.scss

@@ -0,0 +1,46 @@
+/*!
+ * 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, ion-card, ion-card-header, ion-card::part(native) {
+  height: 100%;
+}
+
+ion-card {
+  padding: 0;
+  margin-block: 0;
+  margin-inline: var(--spacing-sm);
+}
+
+ion-card-header {
+  padding: var(--spacing-md) var(--spacing-lg)
+}
+
+ion-card-title {
+  padding: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  font-family: var(--ion-font-family);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semi-bold);
+}
+
+.disabled {
+  opacity: 0.3;
+}

src/app/util/section/section-tail-prompt-card.component.ts

@@ -0,0 +1,23 @@
+/*
+ * 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/>.
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'stapps-section-tail-prompt-card',
+  templateUrl: 'section-tail-prompt-card.html',
+  styleUrls: ['section-tail-prompt-card.scss', 'section-link-card.scss'],
+})
+export class SectionTailPromptCardComponent {}

src/app/util/section/section-tail-prompt-card.html

@@ -0,0 +1,22 @@
+<!--
+  ~ 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/>.
+  -->
+
+<ion-card [button]="true" class="card">
+  <ion-card-header>
+    <ion-card-title>
+      <ng-content></ng-content>
+    </ion-card-title>
+  </ion-card-header>
+</ion-card>

src/app/util/section/section-tail-prompt-card.scss

@@ -0,0 +1,19 @@
+/*!
+ * 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/>.
+ */
+
+.card {
+  box-shadow: none;
+  background: none;
+}

src/app/util/section/section.module.ts

@@ -0,0 +1,37 @@
+/*
+ * 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/>.
+ */
+import {NgModule} from '@angular/core';
+import {SectionLinkCardComponent} from './section-link-card.component';
+import {IonicModule} from '@ionic/angular';
+import {BrowserModule} from '@angular/platform-browser';
+import {TranslateModule} from '@ngx-translate/core';
+import {IonIconModule} from '../ion-icon/ion-icon.module';
+import {ThingTranslateModule} from '../../translation/thing-translate.module';
+import {RouterModule} from '@angular/router';
+import {SectionTailPromptCardComponent} from './section-tail-prompt-card.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    IonicModule,
+    TranslateModule,
+    IonIconModule,
+    ThingTranslateModule,
+    RouterModule,
+  ],
+  declarations: [SectionLinkCardComponent, SectionTailPromptCardComponent],
+  exports: [SectionLinkCardComponent, SectionTailPromptCardComponent],
+})
+export class SectionModule {}

src/app/util/util.module.ts

@@ -12,7 +12,6 @@
  * 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 {NgModule} from '@angular/core';
 import {ArrayLastPipe} from './array-last.pipe';
 import {DateIsThisPipe} from './date-is-today.pipe';
@@ -25,10 +24,12 @@ import {EditModalComponent} from './edit-modal.component';
 import {BrowserModule} from '@angular/platform-browser';
 import {IonicModule} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
+import {ElementSizeChangeDirective} from './element-size-change.directive';
 
 @NgModule({
   imports: [BrowserModule, IonicModule, TranslateModule],
   declarations: [
+    ElementSizeChangeDirective,
     ArrayLastPipe,
     DateIsThisPipe,
     NullishCoalescingPipe,
@@ -39,6 +40,7 @@ import {TranslateModule} from '@ngx-translate/core';
     EditModalComponent,
   ],
   exports: [
+    ElementSizeChangeDirective,
     ArrayLastPipe,
     DateIsThisPipe,
     NullishCoalescingPipe,