From fe25efbb76b5c3cb3d2aef04bff89029c0e79ecd Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 8 Oct 2018 17:01:45 +0200 Subject: [PATCH] UI improvements. --- .../content/shared/assets-editor.component.ts | 10 ++++---- .../shared/contents-selector.component.html | 8 +++---- .../shared/references-editor.component.ts | 20 ++++++++++++---- .../angular/forms/autocomplete.component.ts | 5 ++-- .../forms/date-time-editor.component.ts | 14 +++++++++-- .../angular/forms/dropdown.component.ts | 5 ++-- .../angular/forms/iframe-editor.component.ts | 4 ++-- .../angular/forms/jscript-editor.component.ts | 5 ++-- .../angular/forms/json-editor.component.ts | 5 ++-- .../angular/forms/progress-bar.component.ts | 8 +++++-- .../angular/forms/slider.component.ts | 5 ++-- .../angular/forms/stars.component.ts | 5 ++-- .../angular/forms/tag-editor.component.ts | 5 ++-- .../angular/forms/toggle.component.ts | 5 ++-- .../shared/components/app-form.component.ts | 7 +++--- .../shared/components/asset.component.html | 4 +--- .../shared/components/asset.component.scss | 20 ++++------------ .../app/shared/components/asset.component.ts | 24 +++++++++++-------- .../components/assets-list.component.ts | 5 ++-- .../components/assets-selector.component.ts | 5 ++-- .../geolocation-editor.component.ts | 5 ++-- .../app/shared/components/help.component.ts | 5 ++-- .../components/history-list.component.ts | 5 ++-- .../shared/components/history.component.ts | 7 +++--- 24 files changed, 111 insertions(+), 80 deletions(-) diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.ts b/src/Squidex/app/features/content/shared/assets-editor.component.ts index bcfeaa2e7..4fdc69ade 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.ts +++ b/src/Squidex/app/features/content/shared/assets-editor.component.ts @@ -7,7 +7,7 @@ // tslint:disable:prefer-for-of -import { Component, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { @@ -28,9 +28,8 @@ export const SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-assets-editor', styleUrls: ['./assets-editor.component.scss'], templateUrl: './assets-editor.component.html', - providers: [ - SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR - ] + providers: [SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class AssetsEditorComponent implements ControlValueAccessor { private callChange = (v: any) => { /* NOOP */ }; @@ -47,6 +46,7 @@ export class AssetsEditorComponent implements ControlValueAccessor { constructor( private readonly appsState: AppsState, private readonly assetsService: AssetsService, + private readonly changeDetector: ChangeDetectorRef, private readonly localStore: LocalStoreService ) { this.isListView = this.localStore.get('assetView') === 'List'; @@ -131,6 +131,8 @@ export class AssetsEditorComponent implements ControlValueAccessor { this.callTouched(); this.callChange(ids); + + this.changeDetector.markForCheck(); } public sort(assets: AssetDto[]) { diff --git a/src/Squidex/app/features/content/shared/contents-selector.component.html b/src/Squidex/app/features/content/shared/contents-selector.component.html index 03c7a7934..c38612c34 100644 --- a/src/Squidex/app/features/content/shared/contents-selector.component.html +++ b/src/Squidex/app/features/content/shared/contents-selector.component.html @@ -16,10 +16,10 @@ (queryChanged)="search($event)" expandable="true"> - - - - + + +
+
diff --git a/src/Squidex/app/features/content/shared/references-editor.component.ts b/src/Squidex/app/features/content/shared/references-editor.component.ts index 5d4542a10..855594365 100644 --- a/src/Squidex/app/features/content/shared/references-editor.component.ts +++ b/src/Squidex/app/features/content/shared/references-editor.component.ts @@ -7,7 +7,7 @@ // tslint:disable:prefer-for-of -import { Component, forwardRef, Input, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { @@ -31,9 +31,8 @@ export const SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-references-editor', styleUrls: ['./references-editor.component.scss'], templateUrl: './references-editor.component.html', - providers: [ - SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR - ] + providers: [SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class ReferencesEditorComponent implements ControlValueAccessor, OnInit { private callChange = (v: any) => { /* NOOP */ }; @@ -59,6 +58,7 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit { constructor( private readonly appsState: AppsState, + private readonly changeDetector: ChangeDetectorRef, private readonly contentsService: ContentsService, private readonly schemasService: SchemasService ) { @@ -73,8 +73,12 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit { this.schemasService.getSchema(this.appsState.appName, this.schemaId) .subscribe(dto => { this.schema = dto; - }, error => { + + this.changeDetector.markForCheck(); + }, () => { this.isInvalidSchema = true; + + this.changeDetector.markForCheck(); }); } @@ -90,8 +94,12 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit { if (this.contentItems.length !== contentIds.length) { this.updateValue(); } + + this.changeDetector.markForCheck(); }, () => { this.contentItems = ImmutableArray.empty(); + + this.changeDetector.markForCheck(); }); } } else { @@ -148,5 +156,7 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit { this.callTouched(); this.callChange(ids); + + this.changeDetector.markForCheck(); } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/forms/autocomplete.component.ts b/src/Squidex/app/framework/angular/forms/autocomplete.component.ts index a8666a9cf..bacb8a845 100644 --- a/src/Squidex/app/framework/angular/forms/autocomplete.component.ts +++ b/src/Squidex/app/framework/angular/forms/autocomplete.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component, ContentChild, forwardRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ContentChild, forwardRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Observable, of, Subscription } from 'rxjs'; import { catchError, debounceTime, distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs/operators'; @@ -27,7 +27,8 @@ export const SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-autocomplete', styleUrls: ['./autocomplete.component.scss'], templateUrl: './autocomplete.component.html', - providers: [SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR] + providers: [SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, OnInit { private subscription: Subscription; diff --git a/src/Squidex/app/framework/angular/forms/date-time-editor.component.ts b/src/Squidex/app/framework/angular/forms/date-time-editor.component.ts index 85f2d2b18..0021ed2c8 100644 --- a/src/Squidex/app/framework/angular/forms/date-time-editor.component.ts +++ b/src/Squidex/app/framework/angular/forms/date-time-editor.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; import * as moment from 'moment'; import { Subscription } from 'rxjs'; @@ -22,7 +22,8 @@ export const SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-date-time-editor', styleUrls: ['./date-time-editor.component.scss'], templateUrl: './date-time-editor.component.html', - providers: [SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR] + providers: [SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy, OnInit, AfterViewInit { private timeSubscription: Subscription; @@ -60,6 +61,11 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy, public isDisabled = false; + constructor( + private readonly changeDetector: ChangeDetectorRef + ) { + } + public ngOnDestroy() { this.dateSubscription.unsubscribe(); this.timeSubscription.unsubscribe(); @@ -136,6 +142,10 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy, this.updateValue(); this.touched(); + + if (false) { + this.changeDetector.markForCheck(); + } } }); diff --git a/src/Squidex/app/framework/angular/forms/dropdown.component.ts b/src/Squidex/app/framework/angular/forms/dropdown.component.ts index 4788bce5a..f5819e39c 100644 --- a/src/Squidex/app/framework/angular/forms/dropdown.component.ts +++ b/src/Squidex/app/framework/angular/forms/dropdown.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { AfterContentInit, Component, ContentChildren, forwardRef, Input, QueryList, TemplateRef } from '@angular/core'; +import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, forwardRef, Input, QueryList, TemplateRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; const KEY_ENTER = 13; @@ -23,7 +23,8 @@ export const SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-dropdown', styleUrls: ['./dropdown.component.scss'], templateUrl: './dropdown.component.html', - providers: [SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR] + providers: [SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class DropdownComponent implements AfterContentInit, ControlValueAccessor { private callChange = (v: any) => { /* NOOP */ }; diff --git a/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts b/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts index 867e00c6d..bdbd181f3 100644 --- a/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts +++ b/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts @@ -19,8 +19,8 @@ export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-iframe-editor', styleUrls: ['./iframe-editor.component.scss'], templateUrl: './iframe-editor.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR] + providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class IFrameEditorComponent implements ControlValueAccessor, AfterViewInit, OnInit, OnDestroy { private windowMessageListener: Function; diff --git a/src/Squidex/app/framework/angular/forms/jscript-editor.component.ts b/src/Squidex/app/framework/angular/forms/jscript-editor.component.ts index ba54c6150..9675afa61 100644 --- a/src/Squidex/app/framework/angular/forms/jscript-editor.component.ts +++ b/src/Squidex/app/framework/angular/forms/jscript-editor.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, ViewChild } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Subject } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; @@ -22,7 +22,8 @@ export const SQX_JSCRIPT_EDITOR_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-jscript-editor', styleUrls: ['./jscript-editor.component.scss'], templateUrl: './jscript-editor.component.html', - providers: [SQX_JSCRIPT_EDITOR_CONTROL_VALUE_ACCESSOR] + providers: [SQX_JSCRIPT_EDITOR_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class JscriptEditorComponent implements ControlValueAccessor, AfterViewInit { private callChange = (v: any) => { /* NOOP */ }; diff --git a/src/Squidex/app/framework/angular/forms/json-editor.component.ts b/src/Squidex/app/framework/angular/forms/json-editor.component.ts index 3a97d3eb0..35f84d0b5 100644 --- a/src/Squidex/app/framework/angular/forms/json-editor.component.ts +++ b/src/Squidex/app/framework/angular/forms/json-editor.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, ViewChild } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Subject } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; @@ -22,7 +22,8 @@ export const SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-json-editor', styleUrls: ['./json-editor.component.scss'], templateUrl: './json-editor.component.html', - providers: [SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR] + providers: [SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class JsonEditorComponent implements ControlValueAccessor, AfterViewInit { private callChange = (v: any) => { /* NOOP */ }; diff --git a/src/Squidex/app/framework/angular/forms/progress-bar.component.ts b/src/Squidex/app/framework/angular/forms/progress-bar.component.ts index cd3e30577..843574f04 100644 --- a/src/Squidex/app/framework/angular/forms/progress-bar.component.ts +++ b/src/Squidex/app/framework/angular/forms/progress-bar.component.ts @@ -32,6 +32,9 @@ export class ProgressBarComponent implements OnChanges, OnInit { @Input() public strokeWidth = 4; + @Input() + public showText = true; + @Input() public value = 0; @@ -46,7 +49,8 @@ export class ProgressBarComponent implements OnChanges, OnInit { color: this.color, trailColor: this.trailColor, trailWidth: this.trailWidth, - strokeWidth: this.strokeWidth + strokeWidth: this.strokeWidth, + svgStyle: { width: '100%', height: '100%' } }; this.renderer.setStyle(this.element.nativeElement, 'display', 'block'); @@ -71,7 +75,7 @@ export class ProgressBarComponent implements OnChanges, OnInit { this.progressBar.animate(value / 100); - if (value > 0) { + if (value > 0 && this.showText) { this.progressBar.setText(Math.round(value) + '%'); } } diff --git a/src/Squidex/app/framework/angular/forms/slider.component.ts b/src/Squidex/app/framework/angular/forms/slider.component.ts index 7e03256aa..f7baeb850 100644 --- a/src/Squidex/app/framework/angular/forms/slider.component.ts +++ b/src/Squidex/app/framework/angular/forms/slider.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component, ElementRef, forwardRef, Input, Renderer2, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, Input, Renderer2, ViewChild } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Types } from '@app/framework/internal'; @@ -18,7 +18,8 @@ export const SQX_SLIDER_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-slider', styleUrls: ['./slider.component.scss'], templateUrl: './slider.component.html', - providers: [SQX_SLIDER_CONTROL_VALUE_ACCESSOR] + providers: [SQX_SLIDER_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SliderComponent implements ControlValueAccessor { private callChange = (v: any) => { /* NOOP */ }; diff --git a/src/Squidex/app/framework/angular/forms/stars.component.ts b/src/Squidex/app/framework/angular/forms/stars.component.ts index b3b17eb9c..dd30c81ad 100644 --- a/src/Squidex/app/framework/angular/forms/stars.component.ts +++ b/src/Squidex/app/framework/angular/forms/stars.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component, forwardRef, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, forwardRef, Input } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Types } from '@app/framework/internal'; @@ -18,7 +18,8 @@ export const SQX_STARS_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-stars', styleUrls: ['./stars.component.scss'], templateUrl: './stars.component.html', - providers: [SQX_STARS_CONTROL_VALUE_ACCESSOR] + providers: [SQX_STARS_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class StarsComponent implements ControlValueAccessor { private callChange = (v: any) => { /* NOOP */ }; diff --git a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts index 9a7422295..37aae5565 100644 --- a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts +++ b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Subscription } from 'rxjs'; import { distinctUntilChanged, map, tap } from 'rxjs/operators'; @@ -75,7 +75,8 @@ export const SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-tag-editor', styleUrls: ['./tag-editor.component.scss'], templateUrl: './tag-editor.component.html', - providers: [SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR] + providers: [SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class TagEditorComponent implements AfterViewInit, ControlValueAccessor, OnDestroy, OnInit { private subscription: Subscription; diff --git a/src/Squidex/app/framework/angular/forms/toggle.component.ts b/src/Squidex/app/framework/angular/forms/toggle.component.ts index 270ef5eb8..2a7323fde 100644 --- a/src/Squidex/app/framework/angular/forms/toggle.component.ts +++ b/src/Squidex/app/framework/angular/forms/toggle.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Types } from '@app/framework/internal'; @@ -18,7 +18,8 @@ export const SQX_TOGGLE_CONTROL_VALUE_ACCESSOR: any = { selector: 'sqx-toggle', styleUrls: ['./toggle.component.scss'], templateUrl: './toggle.component.html', - providers: [SQX_TOGGLE_CONTROL_VALUE_ACCESSOR] + providers: [SQX_TOGGLE_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class ToggleComponent implements ControlValueAccessor { private callChange = (v: any) => { /* NOOP */ }; diff --git a/src/Squidex/app/shared/components/app-form.component.ts b/src/Squidex/app/shared/components/app-form.component.ts index f997a3443..808139bf7 100644 --- a/src/Squidex/app/shared/components/app-form.component.ts +++ b/src/Squidex/app/shared/components/app-form.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { FormBuilder } from '@angular/forms'; import { @@ -18,7 +18,8 @@ import { @Component({ selector: 'sqx-app-form', styleUrls: ['./app-form.component.scss'], - templateUrl: './app-form.component.html' + templateUrl: './app-form.component.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class AppFormComponent { @Output() @@ -46,7 +47,7 @@ export class AppFormComponent { const request = new CreateAppDto(value.name, this.template); this.appsStore.create(request) - .subscribe(dto => { + .subscribe(() => { this.complete(); }, error => { this.createForm.submitFailed(error); diff --git a/src/Squidex/app/shared/components/asset.component.html b/src/Squidex/app/shared/components/asset.component.html index 9eeb0acd0..94a882c16 100644 --- a/src/Squidex/app/shared/components/asset.component.html +++ b/src/Squidex/app/shared/components/asset.component.html @@ -130,9 +130,7 @@
-
-
-
+
diff --git a/src/Squidex/app/shared/components/asset.component.scss b/src/Squidex/app/shared/components/asset.component.scss index 27f07083a..1caa49e4b 100644 --- a/src/Squidex/app/shared/components/asset.component.scss +++ b/src/Squidex/app/shared/components/asset.component.scss @@ -254,6 +254,10 @@ $list-height: 2.375rem; min-width: 12rem; } } + + .upload-progress { + padding: .25rem 0; + } } .drop-overlay { @@ -279,22 +283,6 @@ $list-height: 2.375rem; } } -.progress { - &-background { - background: $color-border; - margin: (($list-height - .25rem) / 2) 0; - } - - &-bar { - background: $color-theme-blue; - } - - &-background, - &-bar { - height: .25rem; - } -} - .selectable { cursor: pointer; } diff --git a/src/Squidex/app/shared/components/asset.component.ts b/src/Squidex/app/shared/components/asset.component.ts index 3de754ff8..822d7bea2 100644 --- a/src/Squidex/app/shared/components/asset.component.ts +++ b/src/Squidex/app/shared/components/asset.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core'; import { FormBuilder, FormControl } from '@angular/forms'; import { Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; @@ -31,7 +31,8 @@ import { templateUrl: './asset.component.html', animations: [ fadeAnimation - ] + ], + changeDetection: ChangeDetectionStrategy.OnPush }) export class AssetComponent implements OnDestroy, OnInit { private tagSubscription: Subscription; @@ -91,6 +92,7 @@ export class AssetComponent implements OnDestroy, OnInit { private readonly appsState: AppsState, private readonly assetsService: AssetsService, private readonly authState: AuthService, + private readonly changeDetector: ChangeDetectorRef, private readonly dialogs: DialogService, private readonly formBuilder: FormBuilder ) { @@ -105,7 +107,7 @@ export class AssetComponent implements OnDestroy, OnInit { if (Types.is(dto, AssetDto)) { this.emitLoaded(dto); } else { - this.progress = dto; + this.setProgress(dto); } }, error => { this.dialogs.notifyError(error); @@ -145,7 +147,7 @@ export class AssetComponent implements OnDestroy, OnInit { }, error => { this.dialogs.notifyError(error); - this.setProgress(); + this.setProgress(0); }); } } @@ -159,8 +161,6 @@ export class AssetComponent implements OnDestroy, OnInit { this.assetsService.putAsset(this.appsState.appName, this.asset.id, requestDto, this.asset.version) .subscribe(dto => { this.updateAsset(this.asset.rename(requestDto.fileName, this.authState.user!.token, dto.version), true); - - this.renameCancel(); }, error => { this.dialogs.notifyError(error); @@ -194,10 +194,6 @@ export class AssetComponent implements OnDestroy, OnInit { this.renaming = false; } - private setProgress(progress = 0) { - this.progress = progress; - } - private emitFailed(error: any) { this.failed.emit(error); } @@ -210,6 +206,12 @@ export class AssetComponent implements OnDestroy, OnInit { this.updated.emit(asset); } + private setProgress(progress: number) { + this.progress = progress; + + this.changeDetector.markForCheck(); + } + private updateAsset(asset: AssetDto, emitEvent: boolean) { this.asset = asset; this.progress = 0; @@ -221,5 +223,7 @@ export class AssetComponent implements OnDestroy, OnInit { } this.renameCancel(); + + this.changeDetector.markForCheck(); } } \ No newline at end of file diff --git a/src/Squidex/app/shared/components/assets-list.component.ts b/src/Squidex/app/shared/components/assets-list.component.ts index 75d5601b3..51f3a1e16 100644 --- a/src/Squidex/app/shared/components/assets-list.component.ts +++ b/src/Squidex/app/shared/components/assets-list.component.ts @@ -7,7 +7,7 @@ // tslint:disable:prefer-for-of -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { onErrorResumeNext } from 'rxjs/operators'; import { @@ -19,7 +19,8 @@ import { @Component({ selector: 'sqx-assets-list', styleUrls: ['./assets-list.component.scss'], - templateUrl: './assets-list.component.html' + templateUrl: './assets-list.component.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class AssetsListComponent { public newFiles = ImmutableArray.empty(); diff --git a/src/Squidex/app/shared/components/assets-selector.component.ts b/src/Squidex/app/shared/components/assets-selector.component.ts index 457929c2d..9dca033c3 100644 --- a/src/Squidex/app/shared/components/assets-selector.component.ts +++ b/src/Squidex/app/shared/components/assets-selector.component.ts @@ -7,7 +7,7 @@ // tslint:disable:prefer-for-of -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core'; import { onErrorResumeNext } from 'rxjs/operators'; import { @@ -23,7 +23,8 @@ import { templateUrl: './assets-selector.component.html', animations: [ fadeAnimation - ] + ], + changeDetection: ChangeDetectionStrategy.OnPush }) export class AssetsSelectorComponent implements OnInit { public selectedAssets: { [id: string]: AssetDto } = {}; diff --git a/src/Squidex/app/shared/components/geolocation-editor.component.ts b/src/Squidex/app/shared/components/geolocation-editor.component.ts index 3531b0731..88d13df64 100644 --- a/src/Squidex/app/shared/components/geolocation-editor.component.ts +++ b/src/Squidex/app/shared/components/geolocation-editor.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, ViewChild } from '@angular/core'; import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; import { @@ -31,7 +31,8 @@ interface Geolocation { selector: 'sqx-geolocation-editor', styleUrls: ['./geolocation-editor.component.scss'], templateUrl: './geolocation-editor.component.html', - providers: [SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR] + providers: [SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush }) export class GeolocationEditorComponent implements ControlValueAccessor, AfterViewInit { private callChange = (v: any) => { /* NOOP */ }; diff --git a/src/Squidex/app/shared/components/help.component.ts b/src/Squidex/app/shared/components/help.component.ts index f7d7bf68f..c7679636c 100644 --- a/src/Squidex/app/shared/components/help.component.ts +++ b/src/Squidex/app/shared/components/help.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { HelpService } from '@app/shared/internal'; @@ -13,7 +13,8 @@ import { HelpService } from '@app/shared/internal'; @Component({ selector: 'sqx-help', styleUrls: ['./help.component.scss'], - templateUrl: './help.component.html' + templateUrl: './help.component.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class HelpComponent { public helpSections = diff --git a/src/Squidex/app/shared/components/history-list.component.ts b/src/Squidex/app/shared/components/history-list.component.ts index e5a7acb93..bbb8417cd 100644 --- a/src/Squidex/app/shared/components/history-list.component.ts +++ b/src/Squidex/app/shared/components/history-list.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { Observable } from 'rxjs'; import { @@ -17,7 +17,8 @@ import { @Component({ selector: 'sqx-history-list', styleUrls: ['./history-list.component.scss'], - templateUrl: './history-list.component.html' + templateUrl: './history-list.component.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class HistoryListComponent { @Input() diff --git a/src/Squidex/app/shared/components/history.component.ts b/src/Squidex/app/shared/components/history.component.ts index 727e53247..7182caec2 100644 --- a/src/Squidex/app/shared/components/history.component.ts +++ b/src/Squidex/app/shared/components/history.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { merge, Observable, timer } from 'rxjs'; import { delay, switchMap } from 'rxjs/operators'; @@ -22,7 +22,8 @@ import { @Component({ selector: 'sqx-history', styleUrls: ['./history.component.scss'], - templateUrl: './history.component.html' + templateUrl: './history.component.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class HistoryComponent { private readonly channel = this.calculateChannel(); @@ -32,7 +33,7 @@ export class HistoryComponent { timer(0, 10000), this.messageBus.of(HistoryChannelUpdated).pipe(delay(1000)) ).pipe( - switchMap(app => this.historyService.getHistory(this.appsState.appName, this.channel))); + switchMap(() => this.historyService.getHistory(this.appsState.appName, this.channel))); constructor( private readonly appsState: AppsState,