From 546b6446584ae37b240d4854d5ea292416f65151 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Tue, 9 Jan 2018 17:27:37 +0100 Subject: [PATCH] Bulk edit for content. --- .../event-consumers-page.component.html | 18 +- .../pages/users/users-page.component.html | 110 ++++----- .../contents/contents-page.component.html | 141 +++++++----- .../contents/contents-page.component.scss | 10 +- .../pages/contents/contents-page.component.ts | 215 ++++++++++++++---- .../shared/content-item.component.html | 16 +- .../content/shared/content-item.component.ts | 9 + .../shared/references-editor.component.html | 7 - .../shared/references-editor.component.ts | 8 - .../pages/rules/rules-page.component.html | 21 +- .../pages/rules/rules-page.component.scss | 12 - .../pages/clients/client.component.html | 147 ++++++------ .../pages/clients/client.component.scss | 4 + .../contributors-page.component.html | 18 +- .../angular/ignore-scrollbar.directive.ts | 67 ++++++ .../angular/image-source.directive.ts | 2 +- src/Squidex/app/framework/declarations.ts | 1 + src/Squidex/app/framework/module.ts | 3 + src/Squidex/app/theme/_lists.scss | 40 ++++ src/Squidex/app/theme/_panels.scss | 39 ++++ 20 files changed, 587 insertions(+), 301 deletions(-) create mode 100644 src/Squidex/app/framework/angular/ignore-scrollbar.directive.ts diff --git a/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html b/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html index fd3a2f58e..65747dbf4 100644 --- a/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html +++ b/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html @@ -22,21 +22,15 @@
- - - - - - - - - @@ -45,17 +39,17 @@ - - -
+ Name + Position + Actions
+ {{eventConsumer.name}} + {{eventConsumer.position}} + diff --git a/src/Squidex/app/features/administration/pages/users/users-page.component.html b/src/Squidex/app/features/administration/pages/users/users-page.component.html index d22a8362c..d127cacf5 100644 --- a/src/Squidex/app/features/administration/pages/users/users-page.component.html +++ b/src/Squidex/app/features/administration/pages/users/users-page.component.html @@ -30,61 +30,65 @@
-
- - - - - - - - - - - - - - - - - - - - - - - - +
+
+
-   - - Name - - Email - - Actions -
- - - {{user.displayName}} - - {{user.email}} - - - - - -
+ + + + + + - - - -
+   + + Name + + Email + + Actions +
+ +
+
+ +
+
+ + + + + + + + + + + + +
+ + + {{user.displayName}} + + {{user.email}} + + + + + + +
+
+
-
+
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- {{field | sqxDisplayName:'properties.label':'name'}} - - Updated - - By - - Options -
- -
+
+
+ + + + + + + + + + +
+ + + {{field | sqxDisplayName:'properties.label':'name'}} + + Updated + + By + + Options +
+
+ +
+ {{selectionCount}} items selected: + + + + + + + + + + +
+ +
+
+ + + + + + + + + + + + + + +
+
+
+ +
- + diff --git a/src/Squidex/app/features/content/shared/content-item.component.ts b/src/Squidex/app/features/content/shared/content-item.component.ts index cbeb37b11..7ba32c2f3 100644 --- a/src/Squidex/app/features/content/shared/content-item.component.ts +++ b/src/Squidex/app/features/content/shared/content-item.component.ts @@ -45,6 +45,15 @@ export class ContentItemComponent implements OnInit, OnChanges { @Output() public deleting = new EventEmitter(); + @Output() + public selectedChange = new EventEmitter(); + + @Input() + public selected = false; + + @Input() + public columnWidth: number; + @Input() public languageCode: string; diff --git a/src/Squidex/app/features/content/shared/references-editor.component.html b/src/Squidex/app/features/content/shared/references-editor.component.html index dda1209f8..7e2a68453 100644 --- a/src/Squidex/app/features/content/shared/references-editor.component.html +++ b/src/Squidex/app/features/content/shared/references-editor.component.html @@ -10,13 +10,6 @@
- - - - - - - (); public contentFields: FieldDto[]; - public columnWidth: number; - public isDisabled = false; public isInvalidSchema = false; @@ -154,11 +152,5 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit { if (this.contentFields.length === 0) { this.contentFields = [{}]; } - - if (this.contentFields.length > 0) { - this.columnWidth = 100 / this.contentFields.length; - } else { - this.columnWidth = 100; - } } } \ No newline at end of file diff --git a/src/Squidex/app/features/rules/pages/rules/rules-page.component.html b/src/Squidex/app/features/rules/pages/rules/rules-page.component.html index c57303e10..b5e558b89 100644 --- a/src/Squidex/app/features/rules/pages/rules/rules-page.component.html +++ b/src/Squidex/app/features/rules/pages/rules/rules-page.component.html @@ -31,22 +31,13 @@
- - - - - - - - - - - - - - -
+

If

 + @@ -56,10 +47,10 @@ +

then

 + @@ -69,10 +60,10 @@ + + + +
+ +
+ +
+
+ Client Id: +
+
+ +
+
+ +
+
+
+
+ Client Secret: +
+
+ +
+
+ +
+
+
+
+ Permission: +
+
+ +
+
+
+
diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.scss b/src/Squidex/app/features/settings/pages/clients/client.component.scss index 11db2c53a..5bfbabd3f 100644 --- a/src/Squidex/app/features/settings/pages/clients/client.component.scss +++ b/src/Squidex/app/features/settings/pages/clients/client.component.scss @@ -66,6 +66,10 @@ $color-editor: #eceeef; } } +.col-form-label { + text-align: left; +} + .btn-cancel { padding: .4rem; } diff --git a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html index 5cbcc40ff..c3522e567 100644 --- a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html +++ b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html @@ -18,32 +18,24 @@
- - - - - - - - - - - - -
+ + {{contributor.contributorId | sqxUserName}} + {{contributor.contributorId | sqxUserEmail}} + + diff --git a/src/Squidex/app/framework/angular/ignore-scrollbar.directive.ts b/src/Squidex/app/framework/angular/ignore-scrollbar.directive.ts new file mode 100644 index 000000000..65f09de73 --- /dev/null +++ b/src/Squidex/app/framework/angular/ignore-scrollbar.directive.ts @@ -0,0 +1,67 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. + */ + +import { AfterViewInit, Directive, ElementRef, OnDestroy, OnInit, Renderer } from '@angular/core'; + +@Directive({ + selector: '[sqxIgnoreScrollbar]' +}) +export class IgnoreScrollbarDirective implements OnDestroy, OnInit, AfterViewInit { + private resizeListener: Function; + private parent: any; + private checkTimer: any; + private scollbarWidth = 0; + + constructor( + private readonly element: ElementRef, + private readonly renderer: Renderer + ) { + } + + public ngOnDestroy() { + clearTimeout(this.checkTimer); + + this.resizeListener(); + } + + public ngOnInit() { + if (!this.parent) { + this.parent = this.element.nativeElement.parentElement; + } + + this.resizeListener = + this.renderer.listen(this.element.nativeElement, 'resize', () => { + this.reposition(); + }); + + this.checkTimer = + setTimeout(() => { + this.reposition(); + }, 100); + } + + public ngAfterViewInit() { + this.reposition(); + } + + private reposition() { + if (!this.parent) { + return; + } + + const parentOuter = this.parent.offsetWidth; + const parentInner = this.parent.clientWidth; + + const scrollbarWidth = parentOuter - parentInner; + + if (scrollbarWidth !== this.scollbarWidth) { + this.scollbarWidth = scrollbarWidth; + + this.renderer.setElementStyle(this.element.nativeElement, 'marginRight', `-${scrollbarWidth}px`); + } + } +} \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/image-source.directive.ts b/src/Squidex/app/framework/angular/image-source.directive.ts index e609873f0..5cacfe5ba 100644 --- a/src/Squidex/app/framework/angular/image-source.directive.ts +++ b/src/Squidex/app/framework/angular/image-source.directive.ts @@ -42,7 +42,7 @@ export class ImageSourceDirective implements OnChanges, OnDestroy, OnInit, After } public ngOnInit() { - if (this.parent === null) { + if (!this.parent) { this.parent = this.element.nativeElement.parentElement; } diff --git a/src/Squidex/app/framework/declarations.ts b/src/Squidex/app/framework/declarations.ts index d0f523fdc..26438792f 100644 --- a/src/Squidex/app/framework/declarations.ts +++ b/src/Squidex/app/framework/declarations.ts @@ -18,6 +18,7 @@ export * from './angular/dropdown.component'; export * from './angular/file-drop.directive'; export * from './angular/focus-on-init.directive'; export * from './angular/http-extensions-impl'; +export * from './angular/ignore-scrollbar.directive'; export * from './angular/image-source.directive'; export * from './angular/indeterminate-value.directive'; export * from './angular/jscript-editor.component'; diff --git a/src/Squidex/app/framework/module.ts b/src/Squidex/app/framework/module.ts index 02d72e767..e5416757e 100644 --- a/src/Squidex/app/framework/module.ts +++ b/src/Squidex/app/framework/module.ts @@ -32,6 +32,7 @@ import { FileSizePipe, FocusOnInitDirective, FromNowPipe, + IgnoreScrollbarDirective, ImageSourceDirective, IndeterminateValueDirective, JscriptEditorComponent, @@ -97,6 +98,7 @@ import { FileSizePipe, FocusOnInitDirective, FromNowPipe, + IgnoreScrollbarDirective, ImageSourceDirective, IndeterminateValueDirective, JscriptEditorComponent, @@ -146,6 +148,7 @@ import { FileSizePipe, FocusOnInitDirective, FromNowPipe, + IgnoreScrollbarDirective, ImageSourceDirective, IndeterminateValueDirective, JscriptEditorComponent, diff --git a/src/Squidex/app/theme/_lists.scss b/src/Squidex/app/theme/_lists.scss index 10640ef32..a4e689a59 100644 --- a/src/Squidex/app/theme/_lists.scss +++ b/src/Squidex/app/theme/_lists.scss @@ -177,6 +177,46 @@ } } +// +// Cell styles +// +.cell { + &-select { + width: 50px; + } + + &-separator { + width: 60px; + } + + &-user { + width: 55px; + } + + &-time { + width: 180px; + } + + &-options { + width: 70px; + } + + &-options-lg { + width: 150px; + } + + &-separator, + &-select { + text-align: center; + } + + &-auto-right, + &-options, + &-options-lg { + text-align: right; + } +} + // // Table cell with truncated content. // diff --git a/src/Squidex/app/theme/_panels.scss b/src/Squidex/app/theme/_panels.scss index 9ecc81d25..33bb19aa0 100644 --- a/src/Squidex/app/theme/_panels.scss +++ b/src/Squidex/app/theme/_panels.scss @@ -268,4 +268,43 @@ } } } +} + +// +// Grid with footer and header +// +.grid { + & { + @include flex-box; + @include flex-direction(column); + overflow: hidden; + padding: 0; + } + + .grid-content, + .grid-header, + .grid-footer { + padding: 0 $panel-padding; + } + + .grid-content { + @include flex-grow(1); + margin: 0; + margin-top: .25rem; + overflow-y: scroll; + } + + .grid-header { + padding-top: .75 * $panel-padding; + border: 0; + border-bottom: 2px solid $color-border; + } + + .grid-footer { + border-top: 2px solid $color-border; + } + + .pagination { + margin-top: .25rem; + } } \ No newline at end of file