feature(desktop-ui): add ProgressTracker UI component + new dui-secti…

…on-header

Also add new `.text-tabular` css class to display tabular numeric data nicely

packages/desktop-ui/src/components/app/reactivate-change-detection.ts

@@ -226,7 +226,7 @@ export function reactiveComponent<T extends AfterViewInit>() {
  *
  * Optionally @observe({unsubscribe: true}) unsubscribes the whole value as well (calling unsubscribe() on current value) on NgOnDestroy or when net property value is set.
  */
-export function observe<T extends OnDestroy>(options: { unsubscribe?: true } = {}) {
+export function observe<T extends {}>(options: { unsubscribe?: true } = {}) {
     return function (target: T, propertyKey: string | symbol) {
 
         function unsub(value: any) {

packages/desktop-ui/src/components/indicator/index.ts

@@ -10,16 +10,18 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IndicatorComponent } from './indicator.component';
+import { IndicatorComponent, ProgressIndicatorComponent } from './indicator.component';
 
 export * from './indicator.component';
 
 @NgModule({
     declarations: [
         IndicatorComponent,
+        ProgressIndicatorComponent,
     ],
     exports: [
         IndicatorComponent,
+        ProgressIndicatorComponent,
     ],
     imports: [
         CommonModule,

packages/desktop-ui/src/components/indicator/indicator.component.ts

@@ -8,7 +8,9 @@
  * You should have received a copy of the MIT License along with this program.
  */
 
-import { Component, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy } from '@angular/core';
+import { ProgressTracker } from '@deepkit/core-rxjs';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'dui-indicator',
@@ -20,3 +22,67 @@ import { Component, Input } from '@angular/core';
 export class IndicatorComponent {
     @Input() step = 0;
 }
+
+
+@Component({
+    selector: 'dui-progress-indicator',
+    styles: [`
+        .indicator {
+            display: inline-flex;
+            align-items: center;
+            opacity: 1;
+            transition: opacity .3s ease-in-out;
+        }
+
+        .indicator.vertical {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .label {
+            padding-left: 4px;
+        }
+
+        .percentage {
+            display: inline-block;
+            width: 55px;
+            text-align: right;
+        }
+
+        .hide {
+            opacity: 0;
+        }
+    `],
+    template: `
+        <div class="indicator" [class.vertical]="display === 'vertical'" [class.hide]="progressTracker.ended" *ngIf="progressTracker">
+            <dui-indicator [step]="step"></dui-indicator>
+            <div class="label" *ngIf="progressTracker.current as group">
+                <span class="percentage text-light text-tabular">{{progressTracker.progress*100|number:'0.2-2'}}%</span> - {{group.message}}
+            </div>
+        </div>
+    `
+})
+export class ProgressIndicatorComponent implements OnChanges, OnDestroy {
+    @Input() progressTracker?: ProgressTracker;
+    @Input() display: 'horizontal' | 'vertical' = 'horizontal';
+
+    step: number = 0;
+    sub?: Subscription;
+
+    constructor(private cd: ChangeDetectorRef) {
+    }
+
+    ngOnChanges(): void {
+        if (this.sub) this.sub.unsubscribe();
+        if (this.progressTracker) {
+            this.sub = this.progressTracker.subscribe(v => {
+                this.step = this.progressTracker!.progress;
+                this.cd.detectChanges();
+            });
+        }
+    }
+
+    ngOnDestroy(): void {
+        if (this.sub) this.sub.unsubscribe();
+    }
+}

packages/desktop-ui/src/components/layout/index.ts

@@ -10,16 +10,19 @@
 
 import { NgModule } from '@angular/core';
 import { LabelComponent, LabelGridComponent } from './label.component';
+import { SectionHeaderComponent } from './section-header.component';
 
 @NgModule({
     imports: [],
     exports: [
         LabelComponent,
         LabelGridComponent,
+        SectionHeaderComponent,
     ],
     declarations: [
         LabelComponent,
         LabelGridComponent,
+        SectionHeaderComponent,
     ],
     providers: [],
 })

packages/desktop-ui/src/components/layout/section-header.component.scss

@@ -0,0 +1,21 @@
+:host {
+    display: block;
+}
+
+.title {
+    white-space: nowrap;
+    font-size: 12px;
+    padding: 4px 2px;
+    color: var(--color-black1);
+}
+
+.line {
+    border-top: 1px solid var(--line-color-light);
+    height: 10px;
+}
+
+:host.center {
+    .header  {
+        text-align: center;
+    }
+}

packages/desktop-ui/src/components/layout/section-header.component.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) Marc J. Schmidt <marc@marcjschmidt.de>
+ * This file is part of Deepkit and licensed under GNU GPL v3. See the LICENSE file for more information.
+ */
+
+import {Component, Input} from "@angular/core";
+
+@Component({
+    selector: 'dui-section-header',
+    template: `
+        <div class="title">
+            <ng-content></ng-content>
+        </div>
+        <div class="line"></div>
+    `,
+    host: {
+        '[class.center]': 'center !== false'
+    },
+    styleUrls: ['./section-header.component.scss']
+})
+export class SectionHeaderComponent {
+    @Input() center: boolean | '' = false;
+}

packages/desktop-ui/src/scss/dui.scss

@@ -120,6 +120,9 @@
         color: var(--text-light);
     }
 
+    .text-tabular {
+        font-variant-numeric: tabular-nums !important;
+    }
 
     input, textarea, select, button {
         font-size: 13px;