From 4347b7cbe2d8db16197c6611dd628b1b581a212c Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Wed, 20 Nov 2019 13:07:36 +0100 Subject: [PATCH] Feature/page size (#448) * Define page size and performance improvements. * More performance improvements. * More improvements. --- frontend/app/_theme.html | 4 +- .../pages/users/user.component.ts | 2 +- .../pages/users/users-page.component.html | 2 +- .../pages/users/users-page.component.ts | 8 -- .../administration/state/users.state.spec.ts | 9 +- .../administration/state/users.state.ts | 14 +- .../assets/pages/assets-page.component.ts | 8 -- .../content-history-page.component.html | 2 +- .../contents/contents-page.component.html | 2 +- .../pages/contents/contents-page.component.ts | 8 -- .../content/shared/array-item.component.ts | 4 +- .../shared/content-list-field.component.ts | 4 +- .../content/shared/content.component.ts | 4 +- .../shared/contents-selector.component.html | 2 +- .../shared/contents-selector.component.ts | 12 +- .../shared/due-time-selector.component.ts | 7 +- .../events/rule-events-page.component.html | 2 +- .../events/rule-events-page.component.ts | 8 -- .../pages/schema/schema-fields.component.ts | 6 +- .../clients/client-connect-form.component.ts | 8 +- .../pages/clients/client.component.html | 2 +- .../pages/clients/client.component.ts | 4 - .../contributor-add-form.component.html | 2 +- .../contributors/contributor.component.ts | 2 +- .../contributors-page.component.html | 2 +- .../contributors-page.component.ts | 8 -- .../pages/languages/language.component.ts | 6 +- .../pages/patterns/pattern.component.ts | 4 - .../settings/pages/plans/plan.component.ts | 9 +- .../settings/pages/roles/role.component.ts | 4 - .../app/framework/angular/avatar.component.ts | 2 +- .../angular/external-link.directive.ts | 4 +- .../angular/forms/autocomplete.component.html | 11 +- .../angular/forms/focus-on-init.directive.ts | 2 +- .../angular/forms/tag-editor.component.html | 11 +- .../angular/image-source.directive.ts | 25 +++- .../modals/modal-dialog.component.html | 4 +- .../angular/modals/modal-dialog.component.ts | 31 +++-- .../angular/modals/tooltip.directive.ts | 2 +- .../framework/angular/pager.component.html | 11 +- .../framework/angular/pager.component.scss | 9 +- .../app/framework/angular/pager.component.ts | 17 +-- frontend/app/framework/utils/pager.spec.ts | 16 +++ frontend/app/framework/utils/pager.ts | 6 + .../shared/components/asset.component.html | 124 ++++++++++-------- .../app/shared/components/asset.component.ts | 25 ++-- .../components/assets-list.component.html | 2 +- .../components/assets-list.component.ts | 15 +-- .../components/assets-selector.component.ts | 4 - .../shared/components/comment.component.html | 2 +- .../components/history-list.component.html | 2 +- frontend/app/shared/components/pipes.ts | 11 +- .../queries/filter-comparison.component.ts | 4 - .../queries/filter-logical.component.ts | 4 - .../components/search-form.component.ts | 4 - .../app/shared/state/assets.state.spec.ts | 8 +- frontend/app/shared/state/assets.state.ts | 22 ++-- frontend/app/shared/state/contents.state.ts | 14 +- .../shared/state/contributors.state.spec.ts | 29 ++-- .../app/shared/state/contributors.state.ts | 39 +++--- .../shared/state/rule-events.state.spec.ts | 10 +- .../app/shared/state/rule-events.state.ts | 14 +- .../app/shared/state/schemas.state.spec.ts | 4 +- .../pages/internal/internal-area.component.ts | 6 +- .../internal/profile-menu.component.html | 2 +- frontend/app/theme/_panels.scss | 10 +- 66 files changed, 286 insertions(+), 379 deletions(-) diff --git a/frontend/app/_theme.html b/frontend/app/_theme.html index 63e198b24..dde63e9a4 100644 --- a/frontend/app/_theme.html +++ b/frontend/app/_theme.html @@ -1249,8 +1249,8 @@ Modal body text goes here. -
-
+
+
diff --git a/frontend/app/features/administration/pages/users/user.component.ts b/frontend/app/features/administration/pages/users/user.component.ts index 06d9396bb..06da724b1 100644 --- a/frontend/app/features/administration/pages/users/user.component.ts +++ b/frontend/app/features/administration/pages/users/user.component.ts @@ -16,7 +16,7 @@ import { UserDto, UsersState } from '@app/features/administration/internal'; template: ` - + {{user.displayName}} diff --git a/frontend/app/features/administration/pages/users/users-page.component.html b/frontend/app/features/administration/pages/users/users-page.component.html index eec39f31e..137d2a271 100644 --- a/frontend/app/features/administration/pages/users/users-page.component.html +++ b/frontend/app/features/administration/pages/users/users-page.component.html @@ -59,7 +59,7 @@
- +
diff --git a/frontend/app/features/administration/pages/users/users-page.component.ts b/frontend/app/features/administration/pages/users/users-page.component.ts index 9e1c698e4..61a39b691 100644 --- a/frontend/app/features/administration/pages/users/users-page.component.ts +++ b/frontend/app/features/administration/pages/users/users-page.component.ts @@ -35,14 +35,6 @@ export class UsersPageComponent implements OnInit { this.usersState.search(this.usersFilter.value); } - public goPrev() { - this.usersState.goPrev(); - } - - public goNext() { - this.usersState.goNext(); - } - public trackByUser(index: number, user: UserDto) { return user.id; } diff --git a/frontend/app/features/administration/state/users.state.spec.ts b/frontend/app/features/administration/state/users.state.spec.ts index 3242ab8fd..e2d7f422c 100644 --- a/frontend/app/features/administration/state/users.state.spec.ts +++ b/frontend/app/features/administration/state/users.state.spec.ts @@ -8,7 +8,7 @@ import { of, throwError } from 'rxjs'; import { IMock, It, Mock, Times } from 'typemoq'; -import { DialogService } from '@app/shared'; +import { DialogService, Pager } from '@app/shared'; import { UserDto, @@ -87,16 +87,15 @@ describe('UsersState', () => { expect(usersState.snapshot.selectedUser).toEqual(newUsers[0]); }); - it('should load next page and prev page when paging', () => { + it('should load with new pagination when paging', () => { usersService.setup(x => x.getUsers(10, 0, undefined)) - .returns(() => of(oldUsers)).verifiable(Times.exactly(2)); + .returns(() => of(oldUsers)).verifiable(Times.once()); usersService.setup(x => x.getUsers(10, 10, undefined)) .returns(() => of(new UsersDto(200, []))).verifiable(); usersState.load().subscribe(); - usersState.goNext().subscribe(); - usersState.goPrev().subscribe(); + usersState.setPager(new Pager(20, 1, 10)).subscribe(); expect().nothing(); }); diff --git a/frontend/app/features/administration/state/users.state.ts b/frontend/app/features/administration/state/users.state.ts index 39239bdbd..1ee2396ab 100644 --- a/frontend/app/features/administration/state/users.state.ts +++ b/frontend/app/features/administration/state/users.state.ts @@ -69,7 +69,7 @@ export class UsersState extends State { private readonly dialogs: DialogService, private readonly usersService: UsersService ) { - super({ users: [], usersPager: new Pager(0) }); + super({ users: [], usersPager: Pager.DEFAULT }); } public select(id: string | null): Observable { @@ -173,19 +173,13 @@ export class UsersState extends State { } public search(query: string): Observable { - this.next(s => ({ ...s, usersPager: new Pager(0), usersQuery: query })); + this.next(s => ({ ...s, usersPager: s.usersPager.reset(), usersQuery: query })); return this.loadInternal(); } - public goNext(): Observable { - this.next(s => ({ ...s, usersPager: s.usersPager.goNext() })); - - return this.loadInternal(); - } - - public goPrev(): Observable { - this.next(s => ({ ...s, usersPager: s.usersPager.goPrev() })); + public setPager(usersPager: Pager) { + this.next(s => ({ ...s, usersPager })); return this.loadInternal(); } diff --git a/frontend/app/features/assets/pages/assets-page.component.ts b/frontend/app/features/assets/pages/assets-page.component.ts index fd2224127..eba5a29d4 100644 --- a/frontend/app/features/assets/pages/assets-page.component.ts +++ b/frontend/app/features/assets/pages/assets-page.component.ts @@ -59,14 +59,6 @@ export class AssetsPageComponent extends ResourceOwner implements OnInit { this.assetsState.toggleTag(tag); } - public goNext() { - this.assetsState.goNext(); - } - - public goPrev() { - this.assetsState.goPrev(); - } - public changeView(isListView: boolean) { this.isListView = isListView; diff --git a/frontend/app/features/content/pages/content/content-history-page.component.html b/frontend/app/features/content/pages/content/content-history-page.component.html index a77ff3c0e..1f42af010 100644 --- a/frontend/app/features/content/pages/content/content-history-page.component.html +++ b/frontend/app/features/content/pages/content/content-history-page.component.html @@ -6,7 +6,7 @@
- +
diff --git a/frontend/app/features/content/pages/contents/contents-page.component.html b/frontend/app/features/content/pages/contents/contents-page.component.html index e5cdc9a01..26c62f71b 100644 --- a/frontend/app/features/content/pages/contents/contents-page.component.html +++ b/frontend/app/features/content/pages/contents/contents-page.component.html @@ -101,7 +101,7 @@
- +
diff --git a/frontend/app/features/content/pages/contents/contents-page.component.ts b/frontend/app/features/content/pages/contents/contents-page.component.ts index 56b4f5128..d2e66f4b7 100644 --- a/frontend/app/features/content/pages/contents/contents-page.component.ts +++ b/frontend/app/features/content/pages/contents/contents-page.component.ts @@ -137,14 +137,6 @@ export class ContentsPageComponent extends ResourceOwner implements OnInit { .subscribe(); } - public goPrev() { - this.contentsState.goPrev(); - } - - public goNext() { - this.contentsState.goNext(); - } - public search(query: Query) { this.contentsState.search(query); } diff --git a/frontend/app/features/content/shared/array-item.component.ts b/frontend/app/features/content/shared/array-item.component.ts index f27c39332..88ba73fbd 100644 --- a/frontend/app/features/content/shared/array-item.component.ts +++ b/frontend/app/features/content/shared/array-item.component.ts @@ -146,13 +146,13 @@ export class ArrayItemComponent implements OnChanges, OnDestroy { public collapse() { this.isHidden = true; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public expand() { this.isHidden = false; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public emitClone() { diff --git a/frontend/app/features/content/shared/content-list-field.component.ts b/frontend/app/features/content/shared/content-list-field.component.ts index 7a4d758e0..993b3aeed 100644 --- a/frontend/app/features/content/shared/content-list-field.component.ts +++ b/frontend/app/features/content/shared/content-list-field.component.ts @@ -29,7 +29,7 @@ import { {{content.created | sqxFromNow}} - + {{content.createdBy | sqxUserNameRef}} @@ -38,7 +38,7 @@ import { {{content.lastModified | sqxFromNow}} - + {{content.lastModifiedBy | sqxUserNameRef}} diff --git a/frontend/app/features/content/shared/content.component.ts b/frontend/app/features/content/shared/content.component.ts index 07ce079b0..8b469e4bc 100644 --- a/frontend/app/features/content/shared/content.component.ts +++ b/frontend/app/features/content/shared/content.component.ts @@ -104,11 +104,11 @@ export class ContentComponent implements OnChanges { .subscribe(() => { this.patchForm.submitCompleted({ noReset: true}); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }, error => { this.patchForm.submitFailed(error); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }); } } diff --git a/frontend/app/features/content/shared/contents-selector.component.html b/frontend/app/features/content/shared/contents-selector.component.html index 7f49a21eb..799a9627f 100644 --- a/frontend/app/features/content/shared/contents-selector.component.html +++ b/frontend/app/features/content/shared/contents-selector.component.html @@ -77,7 +77,7 @@
- +
diff --git a/frontend/app/features/content/shared/contents-selector.component.ts b/frontend/app/features/content/shared/contents-selector.component.ts index 56a7be402..95ade9289 100644 --- a/frontend/app/features/content/shared/contents-selector.component.ts +++ b/frontend/app/features/content/shared/contents-selector.component.ts @@ -79,8 +79,6 @@ export class ContentsSelectorComponent extends ResourceOwner implements OnInit { } this.selectSchema(this.schemas[0]); - - this.changeDetector.detectChanges(); } public selectSchema(selected: string | SchemaDto) { @@ -98,7 +96,7 @@ export class ContentsSelectorComponent extends ResourceOwner implements OnInit { this.updateModel(); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } }); } @@ -111,14 +109,6 @@ export class ContentsSelectorComponent extends ResourceOwner implements OnInit { this.contentsState.search(query); } - public goNext() { - this.contentsState.goNext(); - } - - public goPrev() { - this.contentsState.goPrev(); - } - public isItemSelected(content: ContentDto) { return !!this.selectedItems[content.id]; } diff --git a/frontend/app/features/content/shared/due-time-selector.component.ts b/frontend/app/features/content/shared/due-time-selector.component.ts index ce8a69e5c..80bb89d6b 100644 --- a/frontend/app/features/content/shared/due-time-selector.component.ts +++ b/frontend/app/features/content/shared/due-time-selector.component.ts @@ -8,15 +8,12 @@ import { Component } from '@angular/core'; import { Observable, Subject } from 'rxjs'; -import { DialogModel, fadeAnimation } from '@app/shared'; +import { DialogModel } from '@app/shared'; @Component({ selector: 'sqx-due-time-selector', styleUrls: ['./due-time-selector.component.scss'], - templateUrl: './due-time-selector.component.html', - animations: [ - fadeAnimation - ] + templateUrl: './due-time-selector.component.html' }) export class DueTimeSelectorComponent { public dueTimeDialog = new DialogModel(); diff --git a/frontend/app/features/rules/pages/events/rule-events-page.component.html b/frontend/app/features/rules/pages/events/rule-events-page.component.html index 7192b9686..f40dcd544 100644 --- a/frontend/app/features/rules/pages/events/rule-events-page.component.html +++ b/frontend/app/features/rules/pages/events/rule-events-page.component.html @@ -90,7 +90,7 @@ - + diff --git a/frontend/app/features/rules/pages/events/rule-events-page.component.ts b/frontend/app/features/rules/pages/events/rule-events-page.component.ts index f03ddbc24..9f482080d 100644 --- a/frontend/app/features/rules/pages/events/rule-events-page.component.ts +++ b/frontend/app/features/rules/pages/events/rule-events-page.component.ts @@ -43,14 +43,6 @@ export class RuleEventsPageComponent extends ResourceOwner implements OnInit { this.ruleEventsState.load(true); } - public goNext() { - this.ruleEventsState.goNext(); - } - - public goPrev() { - this.ruleEventsState.goPrev(); - } - public enqueue(event: RuleEventDto) { this.ruleEventsState.enqueue(event); } diff --git a/frontend/app/features/schemas/pages/schema/schema-fields.component.ts b/frontend/app/features/schemas/pages/schema/schema-fields.component.ts index 9c5338863..74e6703da 100644 --- a/frontend/app/features/schemas/pages/schema/schema-fields.component.ts +++ b/frontend/app/features/schemas/pages/schema/schema-fields.component.ts @@ -10,7 +10,6 @@ import { Component, Input, OnInit } from '@angular/core'; import { DialogModel, - fadeAnimation, FieldDto, fieldTypes, PatternsState, @@ -22,10 +21,7 @@ import { @Component({ selector: 'sqx-schema-fields', styleUrls: ['./schema-fields.component.scss'], - templateUrl: './schema-fields.component.html', - animations: [ - fadeAnimation - ] + templateUrl: './schema-fields.component.html' }) export class SchemaFieldsComponent implements OnInit { public fieldTypes = fieldTypes; diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.ts b/frontend/app/features/settings/pages/clients/client-connect-form.component.ts index e8a951785..459455ee5 100644 --- a/frontend/app/features/settings/pages/clients/client-connect-form.component.ts +++ b/frontend/app/features/settings/pages/clients/client-connect-form.component.ts @@ -14,17 +14,13 @@ import { ClientDto, ClientsService, DialogService, - fadeAnimation, RoleDto } from '@app/shared'; @Component({ selector: 'sqx-client-connect-form', styleUrls: ['./client-connect-form.component.scss'], - templateUrl: './client-connect-form.component.html', - animations: [ - fadeAnimation - ] + templateUrl: './client-connect-form.component.html' }) export class ClientConnectFormComponent implements OnInit { @Output() @@ -67,7 +63,7 @@ export class ClientConnectFormComponent implements OnInit { .subscribe(dto => { this.connectToken = dto; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }, error => { this.dialogs.notifyError(error); }); diff --git a/frontend/app/features/settings/pages/clients/client.component.html b/frontend/app/features/settings/pages/clients/client.component.html index 3f5790356..5e9869ac5 100644 --- a/frontend/app/features/settings/pages/clients/client.component.html +++ b/frontend/app/features/settings/pages/clients/client.component.html @@ -42,7 +42,7 @@ Client Secret
- +
-
+
@@ -19,7 +19,7 @@
-
+
diff --git a/frontend/app/framework/angular/modals/modal-dialog.component.ts b/frontend/app/framework/angular/modals/modal-dialog.component.ts index 9ccd72bdf..9f6ad5518 100644 --- a/frontend/app/framework/angular/modals/modal-dialog.component.ts +++ b/frontend/app/framework/angular/modals/modal-dialog.component.ts @@ -5,14 +5,9 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; -import { fadeAnimation, StatefulComponent } from '@app/framework/internal'; - -interface State { - hasTabs: boolean; - hasFooter: boolean; -} +import { fadeAnimation } from '@app/framework/internal'; @Component({ selector: 'sqx-modal-dialog', @@ -23,7 +18,7 @@ interface State { ], changeDetection: ChangeDetectionStrategy.Default }) -export class ModalDialogComponent extends StatefulComponent implements AfterViewInit { +export class ModalDialogComponent implements AfterViewInit { @Output() public close = new EventEmitter(); @@ -57,18 +52,22 @@ export class ModalDialogComponent extends StatefulComponent implements Af @ViewChild('footerElement', { static: false }) public footerElement: ElementRef; - constructor(changeDetector: ChangeDetectorRef) { - super(changeDetector, { - hasTabs: false, - hasFooter: false - }); + constructor( + private readonly renderer: Renderer2 + ) { } public ngAfterViewInit() { - const hasTabs = this.tabsElement.nativeElement.children.length > 0; - const hasFooter = this.footerElement.nativeElement.children.length > 0; + this.hideWhenEmpty(this.tabsElement.nativeElement); + this.hideWhenEmpty(this.footerElement.nativeElement); + } + + private hideWhenEmpty(element: any) { + const isEmpty = element.children.length === 0; - this.next({ hasTabs, hasFooter }); + if (isEmpty) { + this.renderer.setStyle(element, 'display', 'none'); + } } public emitClose() { diff --git a/frontend/app/framework/angular/modals/tooltip.directive.ts b/frontend/app/framework/angular/modals/tooltip.directive.ts index 6e835cee2..917f23dc1 100644 --- a/frontend/app/framework/angular/modals/tooltip.directive.ts +++ b/frontend/app/framework/angular/modals/tooltip.directive.ts @@ -50,7 +50,7 @@ export class TooltipDirective { private unsetAttribute() { try { - this.renderer.setAttribute(this.element.nativeElement, 'title', ''); + this.renderer.setProperty(this.element.nativeElement, 'title', ''); } catch (ex) { return; } diff --git a/frontend/app/framework/angular/pager.component.html b/frontend/app/framework/angular/pager.component.html index 9fd879cfa..a9b446d5f 100644 --- a/frontend/app/framework/angular/pager.component.html +++ b/frontend/app/framework/angular/pager.component.html @@ -2,11 +2,18 @@
\ No newline at end of file diff --git a/frontend/app/framework/angular/pager.component.scss b/frontend/app/framework/angular/pager.component.scss index d1951ab29..1e90e29b3 100644 --- a/frontend/app/framework/angular/pager.component.scss +++ b/frontend/app/framework/angular/pager.component.scss @@ -1,2 +1,9 @@ @import '_mixins'; -@import '_vars'; \ No newline at end of file +@import '_vars'; + +.form-control { + display: inline-block; + margin-left: 2rem; + margin-top: .25rem; + width: auto; +} \ No newline at end of file diff --git a/frontend/app/framework/angular/pager.component.ts b/frontend/app/framework/angular/pager.component.ts index fbea4a691..eedae2bbe 100644 --- a/frontend/app/framework/angular/pager.component.ts +++ b/frontend/app/framework/angular/pager.component.ts @@ -17,10 +17,7 @@ import { Pager } from '@app/framework/internal'; }) export class PagerComponent { @Output() - public nextPage = new EventEmitter(); - - @Output() - public prevPage = new EventEmitter(); + public pagerChange = new EventEmitter(); @Input() public pager: Pager; @@ -28,11 +25,15 @@ export class PagerComponent { @Input() public autoHide = false; - public emitNext() { - this.nextPage.emit(); + public goPrev() { + this.pagerChange.emit(this.pager.goPrev()); + } + + public goNext() { + this.pagerChange.emit(this.pager.goNext()); } - public emitPrev() { - this.prevPage.emit(); + public setPageSize(pageSize: number) { + this.pagerChange.emit(this.pager.setPageSize(pageSize)); } } \ No newline at end of file diff --git a/frontend/app/framework/utils/pager.spec.ts b/frontend/app/framework/utils/pager.spec.ts index 0d85d512c..96e2e7fc2 100644 --- a/frontend/app/framework/utils/pager.spec.ts +++ b/frontend/app/framework/utils/pager.spec.ts @@ -195,4 +195,20 @@ describe('Pager', () => { canGoPrev: true }); }); + + it('should update page size', () => { + const pager_1 = new Pager(21, 0, 10); + const pager_2 = pager_1.setPageSize(30); + + expect(Object.assign({}, pager_2)).toEqual({ + page: 0, + pageSize: 30, + itemFirst: 1, + itemLast: 21, + skip: 0, + numberOfItems: 21, + canGoNext: false, + canGoPrev: false + }); + }); }); \ No newline at end of file diff --git a/frontend/app/framework/utils/pager.ts b/frontend/app/framework/utils/pager.ts index ca497b7f3..7e77aa331 100644 --- a/frontend/app/framework/utils/pager.ts +++ b/frontend/app/framework/utils/pager.ts @@ -6,6 +6,8 @@ */ export class Pager { + public static readonly DEFAULT = new Pager(0); + public canGoNext = false; public canGoPrev = false; @@ -54,6 +56,10 @@ export class Pager { return new Pager(0, 0, this.pageSize); } + public setPageSize(pageSize: number): Pager { + return new Pager(this.numberOfItems, this.page, pageSize); + } + public setCount(numberOfItems: number): Pager { return new Pager(numberOfItems, this.page, this.pageSize); } diff --git a/frontend/app/shared/components/asset.component.html b/frontend/app/shared/components/asset.component.html index bd125c193..a170956ea 100644 --- a/frontend/app/shared/components/asset.component.html +++ b/frontend/app/shared/components/asset.component.html @@ -4,17 +4,21 @@ [sqxDropDisabled]="!asset || !asset.canUpload" [noDrop]="true">
-
+
{{asset.fileType}} -
- -
-
- -
+ +
+ +
+ + +
+ +
+
@@ -50,15 +54,15 @@
+ +
+
+
Drop to update
+
-
- -
- -
-
-
Drop to update
+
+
@@ -86,53 +90,63 @@ [noDrop]="true">
-
- -
-
- -
+ + +
+ +
+ + +
+ +
+ + + + + -
+
+ {{asset.fileName}} +
+
- - - - - - - -
-
- {{asset.fileName}} -
- 		- {{asset.pixelWidth}}x{{asset.pixelHeight}}px, {{asset.fileSize | sqxFileSize}} - - - - - - - - - -
+ + + {{asset.pixelWidth}}x{{asset.pixelHeight}}px, {{asset.fileSize | sqxFileSize}} + + + + + + + + + + -
- -
+ + + + + + -
+
Drop to update
+ + +
+ +
diff --git a/frontend/app/shared/components/asset.component.ts b/frontend/app/shared/components/asset.component.ts index 5aab3c390..5ab252ccf 100644 --- a/frontend/app/shared/components/asset.component.ts +++ b/frontend/app/shared/components/asset.component.ts @@ -12,26 +12,17 @@ import { AssetUploaderState, DialogModel, DialogService, - fadeAnimation, - StatefulComponent, Types, UploadCanceled } from '@app/shared/internal'; -interface State { - progress: number; -} - @Component({ selector: 'sqx-asset', styleUrls: ['./asset.component.scss'], templateUrl: './asset.component.html', - animations: [ - fadeAnimation - ], changeDetection: ChangeDetectionStrategy.OnPush }) -export class AssetComponent extends StatefulComponent implements OnInit { +export class AssetComponent implements OnInit { @Output() public load = new EventEmitter(); @@ -77,15 +68,15 @@ export class AssetComponent extends StatefulComponent implements OnInit { @Input() public allTags: ReadonlyArray; + public progress = 0; + public editDialog = new DialogModel(); - constructor(changeDetector: ChangeDetectorRef, + constructor( private readonly assetUploader: AssetUploaderState, + private readonly changeDetector: ChangeDetectorRef, private readonly dialogs: DialogService ) { - super(changeDetector, { - progress: 0 - }); } public ngOnInit() { @@ -167,7 +158,9 @@ export class AssetComponent extends StatefulComponent implements OnInit { } private setProgress(progress: number) { - this.next(s => ({ ...s, progress })); + this.progress = progress; + + this.changeDetector.markForCheck(); } public updateAsset(asset: AssetDto, emitEvent: boolean) { @@ -177,7 +170,7 @@ export class AssetComponent extends StatefulComponent implements OnInit { this.emitUpdate(); } - this.next(s => ({ ...s, progress: 0 })); + this.setProgress(0); this.cancelEdit(); } diff --git a/frontend/app/shared/components/assets-list.component.html b/frontend/app/shared/components/assets-list.component.html index a50c98f24..9e203b7d6 100644 --- a/frontend/app/shared/components/assets-list.component.html +++ b/frontend/app/shared/components/assets-list.component.html @@ -35,4 +35,4 @@
- \ No newline at end of file + \ No newline at end of file diff --git a/frontend/app/shared/components/assets-list.component.ts b/frontend/app/shared/components/assets-list.component.ts index f27736491..c8780d436 100644 --- a/frontend/app/shared/components/assets-list.component.ts +++ b/frontend/app/shared/components/assets-list.component.ts @@ -6,7 +6,6 @@ */ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; -import { onErrorResumeNext } from 'rxjs/operators'; import { AssetDto, @@ -48,7 +47,7 @@ export class AssetsListComponent { setTimeout(() => { this.newFiles = this.newFiles.removed(file); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }, 2000); } else { this.newFiles = this.newFiles.removed(file); @@ -58,19 +57,11 @@ export class AssetsListComponent { } public search() { - this.state.load().pipe(onErrorResumeNext()).subscribe(); + this.state.load(); } public delete(asset: AssetDto) { - this.state.delete(asset).pipe(onErrorResumeNext()).subscribe(); - } - - public goNext() { - this.state.goNext().pipe(onErrorResumeNext()).subscribe(); - } - - public goPrev() { - this.state.goPrev().pipe(onErrorResumeNext()).subscribe(); + this.state.delete(asset); } public update(asset: AssetDto) { diff --git a/frontend/app/shared/components/assets-selector.component.ts b/frontend/app/shared/components/assets-selector.component.ts index 31856edec..4c178a2cf 100644 --- a/frontend/app/shared/components/assets-selector.component.ts +++ b/frontend/app/shared/components/assets-selector.component.ts @@ -10,7 +10,6 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, On import { AssetDto, AssetsState, - fadeAnimation, LocalStoreService, Query, StatefulComponent @@ -27,9 +26,6 @@ interface State { selector: 'sqx-assets-selector', styleUrls: ['./assets-selector.component.scss'], templateUrl: './assets-selector.component.html', - animations: [ - fadeAnimation - ], changeDetection: ChangeDetectionStrategy.OnPush }) export class AssetsSelectorComponent extends StatefulComponent implements OnInit { diff --git a/frontend/app/shared/components/comment.component.html b/frontend/app/shared/components/comment.component.html index 8e959524b..ac1556e57 100644 --- a/frontend/app/shared/components/comment.component.html +++ b/frontend/app/shared/components/comment.component.html @@ -1,6 +1,6 @@
- +
diff --git a/frontend/app/shared/components/history-list.component.html b/frontend/app/shared/components/history-list.component.html index 5c8563167..eb69b9716 100644 --- a/frontend/app/shared/components/history-list.component.html +++ b/frontend/app/shared/components/history-list.component.html @@ -1,7 +1,7 @@
- +
diff --git a/frontend/app/shared/components/pipes.ts b/frontend/app/shared/components/pipes.ts index 9c3d8d1fc..6e042cdad 100644 --- a/frontend/app/shared/components/pipes.ts +++ b/frontend/app/shared/components/pipes.ts @@ -69,6 +69,7 @@ class UserAsyncPipe implements OnDestroy { private lastUserId: string; private lastValue: string | undefined = undefined; private subscription: Subscription; + private current: Observable; constructor(loading: string, private readonly users: UsersProviderService, @@ -91,11 +92,17 @@ class UserAsyncPipe implements OnDestroy { this.subscription.unsubscribe(); } - this.subscription = transform(this.users).subscribe(value => { + const pipe = transform(this.users); + + this.subscription = pipe.subscribe(value => { this.lastValue = value || undefined; - this.changeDetector.markForCheck(); + if (this.current === pipe) { + this.changeDetector.markForCheck(); + } }); + + this.current = pipe; } return this.lastValue; diff --git a/frontend/app/shared/components/queries/filter-comparison.component.ts b/frontend/app/shared/components/queries/filter-comparison.component.ts index b30cf1707..acba843f1 100644 --- a/frontend/app/shared/components/queries/filter-comparison.component.ts +++ b/frontend/app/shared/components/queries/filter-comparison.component.ts @@ -8,7 +8,6 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; import { - fadeAnimation, FilterComparison, LanguageDto, QueryFieldModel, @@ -20,9 +19,6 @@ import { selector: 'sqx-filter-comparison', styleUrls: ['./filter-comparison.component.scss'], templateUrl: './filter-comparison.component.html', - animations: [ - fadeAnimation - ], changeDetection: ChangeDetectionStrategy.OnPush }) export class FilterComparisonComponent implements OnChanges { diff --git a/frontend/app/shared/components/queries/filter-logical.component.ts b/frontend/app/shared/components/queries/filter-logical.component.ts index 4819225de..768c12576 100644 --- a/frontend/app/shared/components/queries/filter-logical.component.ts +++ b/frontend/app/shared/components/queries/filter-logical.component.ts @@ -10,7 +10,6 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { - fadeAnimation, FilterLogical, FilterNode, LanguageDto, @@ -21,9 +20,6 @@ import { selector: 'sqx-filter-logical', styleUrls: ['./filter-logical.component.scss'], templateUrl: './filter-logical.component.html', - animations: [ - fadeAnimation - ], changeDetection: ChangeDetectionStrategy.OnPush }) export class FilterLogicalComponent { diff --git a/frontend/app/shared/components/search-form.component.ts b/frontend/app/shared/components/search-form.component.ts index 55316dccc..4c68c0ed1 100644 --- a/frontend/app/shared/components/search-form.component.ts +++ b/frontend/app/shared/components/search-form.component.ts @@ -11,7 +11,6 @@ import { Observable } from 'rxjs'; import { DialogModel, - fadeAnimation, hasFilter, LanguageDto, Queries, @@ -24,9 +23,6 @@ import { selector: 'sqx-search-form', styleUrls: ['./search-form.component.scss'], templateUrl: './search-form.component.html', - animations: [ - fadeAnimation - ], changeDetection: ChangeDetectionStrategy.OnPush }) export class SearchFormComponent implements OnChanges { diff --git a/frontend/app/shared/state/assets.state.spec.ts b/frontend/app/shared/state/assets.state.spec.ts index d8d6926d3..6500fe63c 100644 --- a/frontend/app/shared/state/assets.state.spec.ts +++ b/frontend/app/shared/state/assets.state.spec.ts @@ -13,6 +13,7 @@ import { AssetsService, AssetsState, DialogService, + Pager, versioned } from '@app/shared/internal'; @@ -117,16 +118,15 @@ describe('AssetsState', () => { expect(assetsState.isTagSelectionEmpty()).toBeTruthy(); }); - it('should load next page and prev page when paging', () => { + it('should load with new pagination when paging', () => { assetsService.setup(x => x.getAssets(app, 30, 0, undefined, It.isValue([]))) - .returns(() => of(new AssetsDto(200, []))).verifiable(Times.exactly(2)); + .returns(() => of(new AssetsDto(200, []))).verifiable(); assetsService.setup(x => x.getAssets(app, 30, 30, undefined, It.isValue([]))) .returns(() => of(new AssetsDto(200, []))).verifiable(); assetsState.load().subscribe(); - assetsState.goNext().subscribe(); - assetsState.goPrev().subscribe(); + assetsState.setPager(new Pager(60, 1, 30)).subscribe(); expect().nothing(); }); diff --git a/frontend/app/shared/state/assets.state.ts b/frontend/app/shared/state/assets.state.ts index c96816541..a9dd5d68e 100644 --- a/frontend/app/shared/state/assets.state.ts +++ b/frontend/app/shared/state/assets.state.ts @@ -181,7 +181,9 @@ export class AssetsState extends State { tagsSelected[tag] = true; } - return { ...s, assetsPager: new Pager(0, 0, 30), tagsSelected }; + const assetsPager = s.assetsPager.reset(); + + return { ...s, assetsPager, tagsSelected }; }); return this.loadInternal(); @@ -195,32 +197,28 @@ export class AssetsState extends State { tagsSelected[tag] = true; } - return { ...s, assetsPager: new Pager(0, 0, 30), tagsSelected }; + const assetsPager = s.assetsPager.reset(); + + return { ...s, assetsPager: assetsPager, tagsSelected }; }); return this.loadInternal(); } public resetTags(): Observable { - this.next(s => ({ ...s, assetsPager: new Pager(0, 0, 30), tagsSelected: {} })); + this.next(s => ({ ...s, assetsPager: s.assetsPager.reset(), tagsSelected: {} })); return this.loadInternal(); } public search(query?: Query): Observable { - this.next(s => ({ ...s, assetsPager: new Pager(0, 0, 30), assetsQuery: query, assetsQueryJson: encodeQuery(query) })); - - return this.loadInternal(); - } - - public goNext(): Observable { - this.next(s => ({ ...s, assetsPager: s.assetsPager.goNext() })); + this.next(s => ({ ...s, assetsPager: s.assetsPager.reset(), assetsQuery: query, assetsQueryJson: encodeQuery(query) })); return this.loadInternal(); } - public goPrev(): Observable { - this.next(s => ({ ...s, assetsPager: s.assetsPager.goPrev() })); + public setPager(assetsPager: Pager) { + this.next(s => ({ ...s, assetsPager })); return this.loadInternal(); } diff --git a/frontend/app/shared/state/contents.state.ts b/frontend/app/shared/state/contents.state.ts index 3f540162e..3ca6e0353 100644 --- a/frontend/app/shared/state/contents.state.ts +++ b/frontend/app/shared/state/contents.state.ts @@ -97,7 +97,7 @@ export abstract class ContentsStateBase extends State { private readonly contentsService: ContentsService, private readonly dialogs: DialogService ) { - super({ contents: [], contentsPager: new Pager(0), contentsQueryJson: '' }); + super({ contents: [], contentsPager: Pager.DEFAULT, contentsQueryJson: '' }); } public select(id: string | null): Observable { @@ -309,19 +309,13 @@ export abstract class ContentsStateBase extends State { } public search(contentsQuery?: Query): Observable { - this.next(s => ({ ...s, contentsPager: new Pager(0), contentsQuery, contentsQueryJson: encodeQuery(contentsQuery) })); + this.next(s => ({ ...s, contentsPager: s.contentsPager.reset(), contentsQuery, contentsQueryJson: encodeQuery(contentsQuery) })); return this.loadInternal(); } - public goNext(): Observable { - this.next(s => ({ ...s, contentsPager: s.contentsPager.goNext() })); - - return this.loadInternal(); - } - - public goPrev(): Observable { - this.next(s => ({ ...s, contentsPager: s.contentsPager.goPrev() })); + public setPager(contentsPager: Pager) { + this.next(s => ({ ...s, contentsPager })); return this.loadInternal(); } diff --git a/frontend/app/shared/state/contributors.state.spec.ts b/frontend/app/shared/state/contributors.state.spec.ts index ece302715..d260d902a 100644 --- a/frontend/app/shared/state/contributors.state.spec.ts +++ b/frontend/app/shared/state/contributors.state.spec.ts @@ -14,6 +14,7 @@ import { ContributorsService, ContributorsState, DialogService, + Pager, versioned } from '@app/shared/internal'; @@ -60,6 +61,7 @@ describe('ContributorsState', () => { contributorsState.load().subscribe(); expect(contributorsState.snapshot.contributors).toEqual(oldContributors.items); + expect(contributorsState.snapshot.contributorsPager).toEqual(new Pager(20, 0, 10)); expect(contributorsState.snapshot.isLoaded).toBeTruthy(); expect(contributorsState.snapshot.maxContributors).toBe(oldContributors.maxContributors); expect(contributorsState.snapshot.version).toEqual(version); @@ -67,7 +69,7 @@ describe('ContributorsState', () => { dialogs.verify(x => x.notifyInfo(It.isAnyString()), Times.never()); }); - it('should only current page of contributors', () => { + it('should only show current page of contributors', () => { contributorsState.load().subscribe(); let contributors: ReadonlyArray; @@ -77,12 +79,12 @@ describe('ContributorsState', () => { }); expect(contributors!).toEqual(oldContributors.items.slice(0, 10)); - expect(contributorsState.snapshot.page).toEqual(0); + expect(contributorsState.snapshot.contributorsPager).toEqual(new Pager(20, 0, 10)); }); - it('should show next of contributors when going next', () => { + it('should show with new pagination when paging', () => { contributorsState.load().subscribe(); - contributorsState.goNext(); + contributorsState.setPager(new Pager(20, 1, 10)); let contributors: ReadonlyArray; @@ -91,22 +93,7 @@ describe('ContributorsState', () => { }); expect(contributors!).toEqual(oldContributors.items.slice(10, 20)); - expect(contributorsState.snapshot.page).toEqual(1); - }); - - it('should show next of contributors when going prev', () => { - contributorsState.load().subscribe(); - contributorsState.goNext(); - contributorsState.goPrev(); - - let contributors: ReadonlyArray; - - contributorsState.contributorsPaged.subscribe(result => { - contributors = result; - }); - - expect(contributors!).toEqual(oldContributors.items.slice(0, 10)); - expect(contributorsState.snapshot.page).toEqual(0); + expect(contributorsState.snapshot.contributorsPager).toEqual(new Pager(20, 1, 10)); }); it('should show filtered contributors when searching', () => { @@ -120,7 +107,7 @@ describe('ContributorsState', () => { }); expect(contributors!).toEqual(createContributors(4, 14).items); - expect(contributorsState.snapshot.page).toEqual(0); + expect(contributorsState.snapshot.contributorsPager.page).toEqual(0); }); it('should show notification on load when reload is true', () => { diff --git a/frontend/app/shared/state/contributors.state.ts b/frontend/app/shared/state/contributors.state.ts index f6f9729d0..4852e003e 100644 --- a/frontend/app/shared/state/contributors.state.ts +++ b/frontend/app/shared/state/contributors.state.ts @@ -33,15 +33,15 @@ interface Snapshot { // All loaded contributors. contributors: ContributorsList; + // The pagination information. + contributorsPager: Pager; + // Indicates if the contributors are loaded. isLoaded?: boolean; // The maximum allowed users. maxContributors: number; - // The current page. - page: number; - // The search query. query?: string; @@ -62,9 +62,6 @@ export class ContributorsState extends State { public contributors = this.project(x => x.contributors); - public page = - this.project(x => x.page); - public query = this.project(x => x.query); @@ -83,18 +80,18 @@ export class ContributorsState extends State { public filtered = this.projectFrom2(this.queryRegex, this.contributors, (q, c) => getFilteredContributors(c, q)); - public contributorsPaged = - this.projectFrom2(this.page, this.filtered, (p, c) => getPagedContributors(c, p)); - public contributorsPager = - this.projectFrom2(this.page, this.filtered, (p, c) => new Pager(c.length, p, PAGE_SIZE)); + this.project(x => x.contributorsPager); + + public contributorsPaged = + this.projectFrom2(this.contributorsPager, this.filtered, (p, c) => getPagedContributors(c, p)); constructor( private readonly contributorsService: ContributorsService, private readonly appsState: AppsState, private readonly dialogs: DialogService ) { - super({ contributors: [], page: 0, maxContributors: -1, version: Version.EMPTY }); + super({ contributors: [], contributorsPager: Pager.DEFAULT, maxContributors: -1, version: Version.EMPTY }); } public load(isReload = false): Observable { @@ -113,12 +110,8 @@ export class ContributorsState extends State { shareSubscribed(this.dialogs)); } - public goNext() { - this.next(s => ({ ...s, page: s.page + 1 })); - } - - public goPrev() { - this.next(s => ({ ...s, page: s.page - 1 })); + public setPager(contributorsPager: Pager) { + this.next(s => ({ ...s, contributorsPager })); } public search(query: string) { @@ -149,15 +142,17 @@ export class ContributorsState extends State { } private replaceContributors(version: Version, payload: ContributorsPayload) { - this.next(() => { + this.next(s => { const { canCreate, items: contributors, maxContributors } = payload; + const contributorsPager = s.contributorsPager.setCount(contributors.length); + return { canCreate, contributors, + contributorsPager, isLoaded: true, maxContributors, - page: 0, version }; }); @@ -172,10 +167,8 @@ export class ContributorsState extends State { } } -const PAGE_SIZE = 10; - -function getPagedContributors(contributors: ContributorsList, page: number) { - return contributors.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE); +function getPagedContributors(contributors: ContributorsList, pager: Pager) { + return contributors.slice(pager.page * pager.pageSize, (pager.page + 1) * pager.pageSize); } function getFilteredContributors(contributors: ContributorsList, query?: RegExp) { diff --git a/frontend/app/shared/state/rule-events.state.spec.ts b/frontend/app/shared/state/rule-events.state.spec.ts index f993c303d..a75db1811 100644 --- a/frontend/app/shared/state/rule-events.state.spec.ts +++ b/frontend/app/shared/state/rule-events.state.spec.ts @@ -10,6 +10,7 @@ import { IMock, It, Mock, Times } from 'typemoq'; import { DialogService, + Pager, RuleEventsDto, RuleEventsState, RulesService @@ -62,17 +63,16 @@ describe('RuleEventsState', () => { dialogs.verify(x => x.notifyInfo(It.isAnyString()), Times.once()); }); - it('should load next page and prev page when paging', () => { + it('should load with new pagination when paging', () => { rulesService.setup(x => x.getEvents(app, 10, 10, undefined)) .returns(() => of(new RuleEventsDto(200, []))); - ruleEventsState.goNext().subscribe(); - ruleEventsState.goPrev().subscribe(); + ruleEventsState.setPager(new Pager(20, 1, 10)); expect().nothing(); rulesService.verify(x => x.getEvents(app, 10, 10, undefined), Times.once()); - rulesService.verify(x => x.getEvents(app, 10, 0, undefined), Times.exactly(2)); + rulesService.verify(x => x.getEvents(app, 10, 0, undefined), Times.once()); }); it('should load with rule id when filtered', () => { @@ -83,7 +83,7 @@ describe('RuleEventsState', () => { expect().nothing(); - rulesService.verify(x => x.getEvents(app, 10, 0, '12'), Times.exactly(1)); + rulesService.verify(x => x.getEvents(app, 10, 0, '12'), Times.once()); }); it('should call service when enqueuing event', () => { diff --git a/frontend/app/shared/state/rule-events.state.ts b/frontend/app/shared/state/rule-events.state.ts index 0afa20466..04c96b4f4 100644 --- a/frontend/app/shared/state/rule-events.state.ts +++ b/frontend/app/shared/state/rule-events.state.ts @@ -50,7 +50,7 @@ export class RuleEventsState extends State { private readonly dialogs: DialogService, private readonly rulesService: RulesService ) { - super({ ruleEvents: [], ruleEventsPager: new Pager(0) }); + super({ ruleEvents: [], ruleEventsPager: Pager.DEFAULT }); } public load(isReload = false): Observable { @@ -105,19 +105,13 @@ export class RuleEventsState extends State { return empty(); } - this.next(s => ({ ...s, ruleEventsPager: new Pager(0), ruleId })); + this.next(s => ({ ...s, ruleEventsPager: s.ruleEventsPager.reset(), ruleId })); return this.loadInternal(); } - public goNext(): Observable { - this.next(s => ({ ...s, ruleEventsPager: s.ruleEventsPager.goNext() })); - - return this.loadInternal(); - } - - public goPrev(): Observable { - this.next(s => ({ ...s, ruleEventsPager: s.ruleEventsPager.goPrev() })); + public setPager(ruleEventsPager: Pager): Observable { + this.next(s => ({ ...s, ruleEventsPager })); return this.loadInternal(); } diff --git a/frontend/app/shared/state/schemas.state.spec.ts b/frontend/app/shared/state/schemas.state.spec.ts index fe9ca2c88..aae84c9c8 100644 --- a/frontend/app/shared/state/schemas.state.spec.ts +++ b/frontend/app/shared/state/schemas.state.spec.ts @@ -207,7 +207,7 @@ describe('SchemasState', () => { it('should return schema on get and cache it', () => { schemasService.setup(x => x.getSchema(app, schema1.name)) - .returns(() => of(schema)).verifiable(Times.exactly(1)); + .returns(() => of(schema)).verifiable(Times.once()); schemasState.loadSchema(schema1.name, true).subscribe(); schemasState.loadSchema(schema1.name, true).subscribe(); @@ -217,7 +217,7 @@ describe('SchemasState', () => { it('should return schema on get and reuse it from select when caching', () => { schemasService.setup(x => x.getSchema(app, schema1.name)) - .returns(() => of(schema)).verifiable(Times.exactly(1)); + .returns(() => of(schema)).verifiable(Times.once()); schemasState.select(schema1.name).subscribe(); schemasState.loadSchema(schema1.name, true).subscribe(); diff --git a/frontend/app/shell/pages/internal/internal-area.component.ts b/frontend/app/shell/pages/internal/internal-area.component.ts index 8282cdf9a..1213cb517 100644 --- a/frontend/app/shell/pages/internal/internal-area.component.ts +++ b/frontend/app/shell/pages/internal/internal-area.component.ts @@ -10,7 +10,6 @@ import { ActivatedRoute } from '@angular/router'; import { DialogService, - fadeAnimation, LoadingService, Notification, ResourceOwner @@ -19,10 +18,7 @@ import { @Component({ selector: 'sqx-internal-area', styleUrls: ['./internal-area.component.scss'], - templateUrl: './internal-area.component.html', - animations: [ - fadeAnimation - ] + templateUrl: './internal-area.component.html' }) export class InternalAreaComponent extends ResourceOwner implements OnInit { constructor( diff --git a/frontend/app/shell/pages/internal/profile-menu.component.html b/frontend/app/shell/pages/internal/profile-menu.component.html index 9cfbf09b1..342cafcf0 100644 --- a/frontend/app/shell/pages/internal/profile-menu.component.html +++ b/frontend/app/shell/pages/internal/profile-menu.component.html @@ -7,7 +7,7 @@
  • - + {{snapshot.profileDisplayName}} diff --git a/frontend/app/theme/_panels.scss b/frontend/app/theme/_panels.scss index d6fcb6193..b01bb4a7c 100644 --- a/frontend/app/theme/_panels.scss +++ b/frontend/app/theme/_panels.scss @@ -403,10 +403,12 @@ a { } .grid-footer { - border-top: 2px solid $color-border; - } + & { + border-top: 2px solid $color-border; + } - .pagination { - margin: .25rem 0; + .pagination { + margin: .25rem 0; + } } } \ No newline at end of file