From 52d2bf9d1bef7504fbdf76d18e70e76c877c5e86 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Tue, 27 Jun 2017 18:35:07 +0200 Subject: [PATCH 1/9] Old build scripts --- build.ps1 | 11 +++++++++++ dockerfile.build | 51 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 build.ps1 create mode 100644 dockerfile.build diff --git a/build.ps1 b/build.ps1 new file mode 100644 index 000000000..5e33380b8 --- /dev/null +++ b/build.ps1 @@ -0,0 +1,11 @@ +# Build the image +docker build . -t squidex-build-image -f dockerfile.build + +# Open the image +docker create --name squidex-build-container squidex-build-image + +# Copy the output to the host file system +docker cp squidex-build-container:/out ./publish + +# Cleanup +docker rm squidex-build-container \ No newline at end of file diff --git a/dockerfile.build b/dockerfile.build new file mode 100644 index 000000000..f59227346 --- /dev/null +++ b/dockerfile.build @@ -0,0 +1,51 @@ +FROM microsoft/aspnetcore-build:1.1.2 + +# Install runtime dependencies +RUN apt-get update \ + && apt-get install -y --no-install-recommends ca-certificates bzip2 libfontconfig \ + && apt-get clean \ + && rm -rf /var/lib/apt/lists/* + + # Install official PhantomJS release +RUN set -x \ + && apt-get update \ + && apt-get install -y --no-install-recommends \ + && mkdir /srv/var \ + && mkdir /tmp/phantomjs \ + # Download Phantom JS + && curl -L https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2 | tar -xj --strip-components=1 -C /tmp/phantomjs \ + # Copy binaries only + && mv /tmp/phantomjs/bin/phantomjs /usr/local/bin \ + # Create symbol link + # Clean up + && apt-get autoremove -y \ + && apt-get clean all \ + && rm -rf /tmp/* /var/lib/apt/lists/* + +RUN phantomjs --version + +COPY src/Squidex/package.json /tmp/package.json +RUN cd /tmp \ +&& npm install \ +&& npm rebuild node-sass + +COPY . . + +WORKDIR / + +# Build Frontend +RUN cp -a /tmp/node_modules /src/Squidex/ \ + && cd /src/Squidex \ + && npm run test:coverage \ + && npm run build:copy \ + && npm run build + +# Test Backend +RUN dotnet restore \ + && dotnet test tests/Squidex.Infrastructure.Tests/Squidex.Infrastructure.Tests.csproj \ + && dotnet test tests/Squidex.Core.Tests/Squidex.Core.Tests.csproj \ + && dotnet test tests/Squidex.Read.Tests/Squidex.Read.Tests.csproj \ + && dotnet test tests/Squidex.Write.Tests/Squidex.Write.Tests.csproj + +# Publish +RUN dotnet publish src/Squidex/Squidex.csproj --output /out/ --configuration Release \ No newline at end of file From 7a4e3c7eaf63d7c0753e78bead184fa78f7f6c30 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Wed, 28 Jun 2017 21:52:26 +0200 Subject: [PATCH 2/9] Casing fixed --- dockerfile => Dockerfile | 0 dockerfile.build => Dockerfile.build | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename dockerfile => Dockerfile (100%) rename dockerfile.build => Dockerfile.build (100%) diff --git a/dockerfile b/Dockerfile similarity index 100% rename from dockerfile rename to Dockerfile diff --git a/dockerfile.build b/Dockerfile.build similarity index 100% rename from dockerfile.build rename to Dockerfile.build From 80094a4f703aa9e508b95d0585fb463c5fb521c1 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Wed, 28 Jun 2017 22:08:12 +0200 Subject: [PATCH 3/9] Build script simplified --- Dockerfile | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Dockerfile b/Dockerfile index 981483cc4..f83d9c808 100644 --- a/Dockerfile +++ b/Dockerfile @@ -28,9 +28,9 @@ RUN set -x \ RUN phantomjs --version COPY src/Squidex/package.json /tmp/package.json -RUN cd /tmp \ -&& npm install \ -&& npm rebuild node-sass + +# Install Node Packages +RUN cd /tmp && npm install COPY . . From 448479e4c10089bc7697c8056f9d8a2176aaa54a Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Wed, 28 Jun 2017 22:45:44 +0200 Subject: [PATCH 4/9] Small fix when setting admin. --- src/Squidex/Config/Identity/IdentityUsage.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Squidex/Config/Identity/IdentityUsage.cs b/src/Squidex/Config/Identity/IdentityUsage.cs index 54947b8ee..4a4b4823d 100644 --- a/src/Squidex/Config/Identity/IdentityUsage.cs +++ b/src/Squidex/Config/Identity/IdentityUsage.cs @@ -59,7 +59,7 @@ namespace Squidex.Config.Identity Task.Run(async () => { - var user = await userManager.FindByEmailAsync(adminPass); + var user = await userManager.FindByEmailAsync(adminEmail); async Task userInitAsync(IUser theUser) { From 45b375dfd43bbd1532d178db87dbc1c09d45c528 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Sun, 2 Jul 2017 00:10:21 +0200 Subject: [PATCH 5/9] Dropdown improved. --- .../pages/schema/schema-page.component.html | 10 +- .../pages/schema/schema-page.component.scss | 8 ++ .../contributors-page.component.html | 2 +- .../angular/autocomplete.component.html | 2 +- .../angular/autocomplete.component.scss | 3 + .../angular/autocomplete.component.ts | 60 +++++---- .../angular/date-time-editor.component.scss | 8 -- .../framework/angular/dropdown.component.html | 22 ++++ .../framework/angular/dropdown.component.scss | 74 +++++++++++ .../framework/angular/dropdown.component.ts | 123 ++++++++++++++++++ .../angular/scroll-active.directive.ts | 12 +- .../angular/template-wrapper.directive.ts | 47 +++++++ src/Squidex/app/framework/declarations.ts | 2 + src/Squidex/app/framework/module.ts | 6 + src/Squidex/app/theme/_vars.scss | 1 + 15 files changed, 337 insertions(+), 43 deletions(-) create mode 100644 src/Squidex/app/framework/angular/dropdown.component.html create mode 100644 src/Squidex/app/framework/angular/dropdown.component.scss create mode 100644 src/Squidex/app/framework/angular/dropdown.component.ts create mode 100644 src/Squidex/app/framework/angular/template-wrapper.directive.ts diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html index 46e4e69ef..96cafe437 100644 --- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html @@ -54,10 +54,12 @@
-
- +
+ + + {{type}} + +
diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.scss b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.scss index e564511d0..2b25322fc 100644 --- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.scss +++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.scss @@ -20,6 +20,10 @@ margin-right: 1rem; } +.types-group { + width: 10rem; +} + .schema { &-edit { color: $color-border-dark; @@ -32,6 +36,10 @@ } } +.field-icon { + color: $color-border-dark; +} + .form-check { margin-top: 1rem; margin-bottom: -.2rem; 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 2bf8029c5..f2c57736c 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 @@ -56,7 +56,7 @@
-
+
diff --git a/src/Squidex/app/framework/angular/autocomplete.component.html b/src/Squidex/app/framework/angular/autocomplete.component.html index 7af1556b7..60aec93d9 100644 --- a/src/Squidex/app/framework/angular/autocomplete.component.html +++ b/src/Squidex/app/framework/angular/autocomplete.component.html @@ -1,5 +1,5 @@ - { /* NOOP */ }; @@ -59,7 +60,7 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O public writeValue(value: any) { if (!value) { - this.queryInput.setValue(''); + this.resetValue(); } else { let item: AutocompleteItem | null = null; @@ -101,27 +102,23 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O public ngOnInit() { this.subscription = this.queryInput.valueChanges - .map(q => q) - .map(q => q ? q.trim() : q) + .map(query => query) + .map(query => query ? query.trim() : query) .distinctUntilChanged() .debounceTime(200) - .do(q => { - if (!q) { + .do(query => { + if (!query) { this.reset(); } }) - .filter(q => !!q && !!this.source) - .switchMap(q => this.source.find(q)).catch(_ => Observable.of([])) - .subscribe(r => { + .filter(query => !!query && !!this.source) + .switchMap(query => this.source.find(query)).catch(_ => Observable.of([])) + .subscribe(items => { this.reset(); - this.items = r || []; + this.items = items || []; }); } - public markTouched() { - this.touchedCallback(); - } - public onKeyDown(event: KeyboardEvent) { switch (event.keyCode) { case KEY_UP: @@ -130,6 +127,10 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O case KEY_DOWN: this.down(); return false; + case KEY_ESCAPE: + this.resetValue(); + this.reset(); + return false; case KEY_ENTER: if (this.items.length > 0) { this.chooseItem(); @@ -139,21 +140,9 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O } } - private reset() { - this.items = []; - this.itemSelection = -1; - } - public blur() { this.reset(); - } - - public up() { - this.selectIndex(this.itemSelection - 1); - } - - public down() { - this.selectIndex(this.itemSelection + 1); + this.touchedCallback(); } public chooseItem(selection: AutocompleteItem | null = null) { @@ -175,7 +164,19 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O } } - public selectIndex(selection: number) { + private up() { + this.selectIndex(this.itemSelection - 1); + } + + private down() { + this.selectIndex(this.itemSelection + 1); + } + + private resetValue() { + this.queryInput.setValue(''); + } + + private selectIndex(selection: number) { if (selection < 0) { selection = 0; } @@ -186,4 +187,9 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O this.itemSelection = selection; } + + private reset() { + this.items = []; + this.itemSelection = -1; + } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/date-time-editor.component.scss b/src/Squidex/app/framework/angular/date-time-editor.component.scss index 36eb04c92..8b1f4bd02 100644 --- a/src/Squidex/app/framework/angular/date-time-editor.component.scss +++ b/src/Squidex/app/framework/angular/date-time-editor.component.scss @@ -1,8 +1,6 @@ @import '_mixins'; @import '_vars'; -$form-color: #fff; - :host(.ng-invalid) { &.ng-dirty { .form-control { @@ -18,12 +16,6 @@ $form-color: #fff; } } -.form-control { - &[readonly] { - background: $form-color; - } -} - .date-group { & { padding-right: .25rem; diff --git a/src/Squidex/app/framework/angular/dropdown.component.html b/src/Squidex/app/framework/angular/dropdown.component.html new file mode 100644 index 000000000..ca07bae7a --- /dev/null +++ b/src/Squidex/app/framework/angular/dropdown.component.html @@ -0,0 +1,22 @@ + +
+ + +
+ +
+ + +
+ +
+
+
+ +
+
+
+ \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/dropdown.component.scss b/src/Squidex/app/framework/angular/dropdown.component.scss new file mode 100644 index 000000000..d140b8a97 --- /dev/null +++ b/src/Squidex/app/framework/angular/dropdown.component.scss @@ -0,0 +1,74 @@ +@import '_mixins'; +@import '_vars'; + +$color-input-border: rgba(0, 0, 0, .15); +$color-input-disabled: #eef1f4; + +.form-control { + & { + width: 100%; + } + + &[readonly] { + background: $color-input-background; + } + + &:disabled { + background: $color-input-disabled; + } +} + +.selection { + & { + position: relative; + overflow: hidden; + } + + .item { + @include absolute(0, 1rem, 0, 0); + pointer-events: none; + } + + .icon-caret-down { + @include absolute(30%, .4rem, auto, auto); + font-size: .9rem; + font-weight: normal; + } +} + +.items { + &-container { + position: relative; + } + + & { + @include absolute(2px, auto, auto, 0); + @include border-radius(.25em); + @include box-shadow; + max-height: 12rem; + border: 1px solid $color-input-border; + background: $color-dark-foreground; + padding: .3rem 0; + overflow-y: auto; + z-index: 10000; + } +} + +.item { + & { + padding: .5rem .75rem; + } + + &.selectable { + & { + cursor: pointer; + } + + &.active, + &:hover { + color: $color-dark-foreground; + border: 0; + background: $color-theme-blue; + } + } +} \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/dropdown.component.ts b/src/Squidex/app/framework/angular/dropdown.component.ts new file mode 100644 index 000000000..6c3d52a7e --- /dev/null +++ b/src/Squidex/app/framework/angular/dropdown.component.ts @@ -0,0 +1,123 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Sebastian Stehle. All rights reserved + */ + +import { Component, ContentChild, forwardRef, Input, TemplateRef } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; + +const KEY_ENTER = 13; +const KEY_ESCAPE = 27; +const KEY_UP = 38; +const KEY_DOWN = 40; +const NOOP = () => { /* NOOP */ }; + +import { ModalView } from './../utils/modal-view'; + +export const SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR: any = { + provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DropdownComponent), multi: true +}; + +@Component({ + selector: 'sqx-dropdown', + styleUrls: ['./dropdown.component.scss'], + templateUrl: './dropdown.component.html', + providers: [SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR] +}) +export class DropdownComponent implements ControlValueAccessor { + private changeCallback: (value: any) => void = NOOP; + private touchedCallback: () => void = NOOP; + + @Input() + public items: any[] = []; + + @ContentChild(TemplateRef) + public itemTemplate: TemplateRef; + + public modalView = new ModalView(); + + public selectedItem: any; + public selectedIndex = -1; + + public isDisabled = false; + + private get safeItems(): any[] { + return this.items || []; + } + + public writeValue(value: any) { + this.selectIndex(this.items && value ? this.items.indexOf(value) : 0); + } + + public setDisabledState(isDisabled: boolean): void { + this.isDisabled = isDisabled; + } + + public registerOnChange(fn: any) { + this.changeCallback = fn; + } + + public registerOnTouched(fn: any) { + this.touchedCallback = fn; + } + + public onKeyDown(event: KeyboardEvent) { + switch (event.keyCode) { + case KEY_UP: + this.up(); + return false; + case KEY_DOWN: + this.down(); + return false; + case KEY_ESCAPE: + case KEY_ENTER: + this.close(); + return false; + } + } + + public open() { + this.modalView.show(); + this.touchedCallback(); + } + + public selectIndexAndClose(selectedIndex: number) { + this.selectIndex(selectedIndex); + this.close(); + } + + private close() { + this.modalView.hide(); + } + + private up() { + this.selectIndex(this.selectedIndex - 1); + } + + private down() { + this.selectIndex(this.selectedIndex + 1); + } + + private selectIndex(selectedIndex: number) { + if (selectedIndex < 0) { + selectedIndex = 0; + } + + const items = this.items || []; + + if (selectedIndex >= items.length) { + selectedIndex = items.length - 1; + } + + const value = items[selectedIndex]; + + if (value !== this.selectedItem) { + this.selectedIndex = selectedIndex; + this.selectedItem = value; + + this.changeCallback(value); + } + } +} \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/scroll-active.directive.ts b/src/Squidex/app/framework/angular/scroll-active.directive.ts index fb5db4a89..8fbdcaf6c 100644 --- a/src/Squidex/app/framework/angular/scroll-active.directive.ts +++ b/src/Squidex/app/framework/angular/scroll-active.directive.ts @@ -5,12 +5,12 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, Input, OnChanges } from '@angular/core'; @Directive({ selector: '[sqxScrollActive]' }) -export class ScrollActiveDirective implements OnChanges { +export class ScrollActiveDirective implements AfterViewInit, OnChanges { @Input('sqxScrollActive') public isActive = false; @@ -22,7 +22,15 @@ export class ScrollActiveDirective implements OnChanges { ) { } + public ngAfterViewInit() { + this.check(); + } + public ngOnChanges() { + this.check(); + } + + private check() { if (this.isActive && this.container) { this.scrollInView(this.container, this.element.nativeElement); } diff --git a/src/Squidex/app/framework/angular/template-wrapper.directive.ts b/src/Squidex/app/framework/angular/template-wrapper.directive.ts new file mode 100644 index 000000000..53f0c4d3e --- /dev/null +++ b/src/Squidex/app/framework/angular/template-wrapper.directive.ts @@ -0,0 +1,47 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Sebastian Stehle. All rights reserved + */ + +import { Directive, Input, OnDestroy, OnInit, OnChanges, TemplateRef, ViewContainerRef, EmbeddedViewRef } from '@angular/core'; + +@Directive({ + selector: '[sqxTemplateWrapper]' +}) +export class TemplateWrapper implements OnInit, OnDestroy, OnChanges { + @Input() + public item: any; + + @Input() + public index: number; + + @Input('sqxTemplateWrapper') + public templateRef: TemplateRef; + + public view: EmbeddedViewRef; + + public constructor( + private viewContainer: ViewContainerRef + ) { + } + + public ngOnChanges() { + if (this.view) { + this.view.context.$implicit = this.item; + this.view.context.index = this.index; + } + } + + public ngOnInit() { + this.view = this.viewContainer.createEmbeddedView(this.templateRef, { + '\$implicit': this.item, + 'index': this.index + }); + } + + public ngOnDestroy() { + this.view.destroy(); + } +} \ No newline at end of file diff --git a/src/Squidex/app/framework/declarations.ts b/src/Squidex/app/framework/declarations.ts index f28f8b164..87b83e5a4 100644 --- a/src/Squidex/app/framework/declarations.ts +++ b/src/Squidex/app/framework/declarations.ts @@ -13,6 +13,7 @@ export * from './angular/control-errors.component'; export * from './angular/copy.directive'; export * from './angular/date-time-editor.component'; export * from './angular/date-time.pipes'; +export * from './angular/dropdown.component'; export * from './angular/file-drop.directive'; export * from './angular/focus-on-change.directive'; export * from './angular/focus-on-init.directive'; @@ -37,6 +38,7 @@ export * from './angular/shortcut.component'; export * from './angular/slider.component'; export * from './angular/stars.component'; export * from './angular/tag-editor.component'; +export * from './angular/template-wrapper.directive'; export * from './angular/title.component'; export * from './angular/toggle.component'; export * from './angular/user-report.component'; diff --git a/src/Squidex/app/framework/module.ts b/src/Squidex/app/framework/module.ts index 67c0da1a4..db8c89e7f 100644 --- a/src/Squidex/app/framework/module.ts +++ b/src/Squidex/app/framework/module.ts @@ -22,6 +22,7 @@ import { DayOfWeekPipe, DayPipe, DisplayNamePipe, + DropdownComponent, DurationPipe, FileDropDirective, FocusOnChangeDirective, @@ -55,6 +56,7 @@ import { SliderComponent, StarsComponent, TagEditorComponent, + TemplateWrapper, TitleService, TitleComponent, ToggleComponent, @@ -78,6 +80,7 @@ import { DayOfWeekPipe, DayPipe, DisplayNamePipe, + DropdownComponent, DurationPipe, FileDropDirective, FocusOnChangeDirective, @@ -105,6 +108,7 @@ import { SliderComponent, StarsComponent, TagEditorComponent, + TemplateWrapper, TitleComponent, ToggleComponent, UserReportComponent @@ -118,6 +122,7 @@ import { DayOfWeekPipe, DayPipe, DisplayNamePipe, + DropdownComponent, DurationPipe, FileDropDirective, FocusOnChangeDirective, @@ -145,6 +150,7 @@ import { SliderComponent, StarsComponent, TagEditorComponent, + TemplateWrapper, TitleComponent, ToggleComponent, UserReportComponent, diff --git a/src/Squidex/app/theme/_vars.scss b/src/Squidex/app/theme/_vars.scss index 968d6952a..dca7382d5 100644 --- a/src/Squidex/app/theme/_vars.scss +++ b/src/Squidex/app/theme/_vars.scss @@ -10,6 +10,7 @@ $color-subtext: $color-text-decent; $color-empty: $color-text-decent; $color-control: rgba(0, 0, 0, .15); $color-input: #dbe4eb; +$color-input-background: #fff; $color-disabled: #eef1f4; $color-extern-google: #d34836; From c150f3c7b2e01ea30d4f6aaf6b853b0e128eb760 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Sun, 2 Jul 2017 13:37:45 +0200 Subject: [PATCH 6/9] Custom dropdowns. --- .../contents/content-item.component.html | 4 +- .../schemas/pages/schema/field.component.html | 4 +- .../pages/schema/schema-page.component.html | 4 +- .../angular/autocomplete.component.html | 14 +-- .../angular/autocomplete.component.scss | 60 +++------- .../angular/autocomplete.component.ts | 2 +- .../framework/angular/dropdown.component.html | 8 +- .../framework/angular/dropdown.component.scss | 40 +------ .../framework/angular/dropdown.component.ts | 6 +- .../angular/modal-target.directive.ts | 106 ++++++++++++++++++ src/Squidex/app/framework/declarations.ts | 1 + src/Squidex/app/framework/module.ts | 3 + .../language-selector.component.html | 4 +- src/Squidex/app/theme/_forms.scss | 33 ++++++ src/Squidex/app/theme/_vars.scss | 1 + 15 files changed, 184 insertions(+), 106 deletions(-) create mode 100644 src/Squidex/app/framework/angular/modal-target.directive.ts diff --git a/src/Squidex/app/features/content/pages/contents/content-item.component.html b/src/Squidex/app/features/content/pages/contents/content-item.component.html index 4be5ce32e..a45c7e429 100644 --- a/src/Squidex/app/features/content/pages/contents/content-item.component.html +++ b/src/Squidex/app/features/content/pages/contents/content-item.component.html @@ -13,10 +13,10 @@
- -
+
Publish diff --git a/src/Squidex/app/features/schemas/pages/schema/field.component.html b/src/Squidex/app/features/schemas/pages/schema/field.component.html index f14dea51a..b325aa9b6 100644 --- a/src/Squidex/app/features/schemas/pages/schema/field.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/field.component.html @@ -22,10 +22,10 @@
- -
+
Enable diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html index 96cafe437..2da7010bc 100644 --- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html @@ -18,10 +18,10 @@
- -
+
Delete diff --git a/src/Squidex/app/framework/angular/autocomplete.component.html b/src/Squidex/app/framework/angular/autocomplete.component.html index 60aec93d9..ad1b68a76 100644 --- a/src/Squidex/app/framework/angular/autocomplete.component.html +++ b/src/Squidex/app/framework/angular/autocomplete.component.html @@ -1,18 +1,16 @@ - -
-
-
- +
+
+ - {{item.title}} - {{item.description}} -
+ {{item.title}} + {{item.description}}
\ No newline at end of file diff --git a/src/Squidex/app/framework/angular/autocomplete.component.scss b/src/Squidex/app/framework/angular/autocomplete.component.scss index 90c3dff84..2a6c57f7e 100644 --- a/src/Squidex/app/framework/angular/autocomplete.component.scss +++ b/src/Squidex/app/framework/angular/autocomplete.component.scss @@ -3,52 +3,26 @@ $color-input-border: rgba(0, 0, 0, .15); -.items { - &-container { - position: relative; - } - +.control-dropdown { & { - @include absolute(2px, auto, auto, 0); - @include border-radius(.25em); - @include box-shadow; width: 18rem; - max-height: 12rem; - border: 1px solid $color-input-border; - background: $color-dark-foreground; - padding: .3rem 0; - overflow-y: auto; - z-index: 10000; - } -} - -.item { - & { - padding: .3rem .8rem; - border: 0; - background: transparent; - cursor: pointer; - } - - &.active { - color: $color-dark-foreground; - border: 0; - background: $color-theme-blue; - } - - &-image { - @include circle(2.5rem); - float: left; - } - - &-title, - &-description { - @include truncate; - margin-left: 3rem; } - &-description { - font-size: .8rem; - font-style: italic; + &-item { + &-image { + @include circle(2.5rem); + float: left; + } + + &-title, + &-description { + @include truncate; + margin-left: 3rem; + } + + &-description { + font-size: .8rem; + font-style: italic; + } } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/autocomplete.component.ts b/src/Squidex/app/framework/angular/autocomplete.component.ts index ee02bb464..1ea4f8994 100644 --- a/src/Squidex/app/framework/angular/autocomplete.component.ts +++ b/src/Squidex/app/framework/angular/autocomplete.component.ts @@ -141,7 +141,7 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O } public blur() { - this.reset(); + // this.reset(); this.touchedCallback(); } diff --git a/src/Squidex/app/framework/angular/dropdown.component.html b/src/Squidex/app/framework/angular/dropdown.component.html index ca07bae7a..89eea9240 100644 --- a/src/Squidex/app/framework/angular/dropdown.component.html +++ b/src/Squidex/app/framework/angular/dropdown.component.html @@ -1,11 +1,11 @@
- -
+
@@ -13,8 +13,8 @@
-
-
+
+
diff --git a/src/Squidex/app/framework/angular/dropdown.component.scss b/src/Squidex/app/framework/angular/dropdown.component.scss index d140b8a97..5e893dae5 100644 --- a/src/Squidex/app/framework/angular/dropdown.component.scss +++ b/src/Squidex/app/framework/angular/dropdown.component.scss @@ -1,7 +1,6 @@ @import '_mixins'; @import '_vars'; -$color-input-border: rgba(0, 0, 0, .15); $color-input-disabled: #eef1f4; .form-control { @@ -24,7 +23,7 @@ $color-input-disabled: #eef1f4; overflow: hidden; } - .item { + .control-dropdown-item { @include absolute(0, 1rem, 0, 0); pointer-events: none; } @@ -34,41 +33,4 @@ $color-input-disabled: #eef1f4; font-size: .9rem; font-weight: normal; } -} - -.items { - &-container { - position: relative; - } - - & { - @include absolute(2px, auto, auto, 0); - @include border-radius(.25em); - @include box-shadow; - max-height: 12rem; - border: 1px solid $color-input-border; - background: $color-dark-foreground; - padding: .3rem 0; - overflow-y: auto; - z-index: 10000; - } -} - -.item { - & { - padding: .5rem .75rem; - } - - &.selectable { - & { - cursor: pointer; - } - - &.active, - &:hover { - color: $color-dark-foreground; - border: 0; - background: $color-theme-blue; - } - } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/dropdown.component.ts b/src/Squidex/app/framework/angular/dropdown.component.ts index 6c3d52a7e..ed83d0342 100644 --- a/src/Squidex/app/framework/angular/dropdown.component.ts +++ b/src/Squidex/app/framework/angular/dropdown.component.ts @@ -36,7 +36,7 @@ export class DropdownComponent implements ControlValueAccessor { @ContentChild(TemplateRef) public itemTemplate: TemplateRef; - public modalView = new ModalView(); + public dropdown = new ModalView(); public selectedItem: any; public selectedIndex = -1; @@ -79,7 +79,7 @@ export class DropdownComponent implements ControlValueAccessor { } public open() { - this.modalView.show(); + this.dropdown.show(); this.touchedCallback(); } @@ -89,7 +89,7 @@ export class DropdownComponent implements ControlValueAccessor { } private close() { - this.modalView.hide(); + this.dropdown.hide(); } private up() { diff --git a/src/Squidex/app/framework/angular/modal-target.directive.ts b/src/Squidex/app/framework/angular/modal-target.directive.ts new file mode 100644 index 000000000..43d83522d --- /dev/null +++ b/src/Squidex/app/framework/angular/modal-target.directive.ts @@ -0,0 +1,106 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Sebastian Stehle. All rights reserved + */ + +import { AfterViewInit, Directive, ElementRef, Input, OnDestroy, OnInit, Renderer } from '@angular/core'; +import { Observable, Subscription } from 'rxjs'; + +@Directive({ + selector: '[sqxModalTarget]' +}) +export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit { + private elementResizeListener: Function; + private targetResizeListener: Function; + private timer: Subscription; + private targetElement: any; + + @Input('sqxModalTarget') + public target: any; + + @Input() + public offset = 2; + + @Input() + public position = 'left'; + + constructor( + private readonly renderer: Renderer, + private readonly element: ElementRef + ) { + } + + public ngOnInit() { + if (this.target) { + this.targetElement = this.target; + + this.targetResizeListener = + this.renderer.listen(this.targetElement, 'resize', () => { + this.updatePosition(); + }); + + this.elementResizeListener = + this.renderer.listen(this.element.nativeElement, 'resize', () => { + this.updatePosition(); + }); + + this.timer = + Observable.timer(100, 100).subscribe(() => { + this.updatePosition(); + }); + } + } + + public ngOnDestroy() { + if (this.targetResizeListener) { + this.targetResizeListener(); + } + + if (this.elementResizeListener) { + this.elementResizeListener(); + } + + if (this.timer) { + this.timer.unsubscribe(); + } + } + + public ngAfterViewInit() { + const modalRef = this.element.nativeElement; + + this.renderer.setElementStyle(modalRef, 'position', 'fixed'); + this.renderer.setElementStyle(modalRef, 'z-index', '1000000'); + + this.updatePosition(); + } + + private updatePosition() { + const viewportHeight = document.documentElement.clientHeight; + + const modalRef = this.element.nativeElement; + const modalRect = this.element.nativeElement.getBoundingClientRect(); + + const targetRect: ClientRect = this.targetElement.getBoundingClientRect(); + + const left = this.position === 'left' ? + targetRect.left : + targetRect.right - modalRect.width; + + let top = targetRect.bottom + this.offset; + + if (top + modalRect.height > viewportHeight) { + const potentialTop = targetRect.top - modalRect.height - this.offset; + + if (potentialTop > 0) { + top = potentialTop; + } + } + + this.renderer.setElementStyle(modalRef, 'top', top + 'px'); + this.renderer.setElementStyle(modalRef, 'left', left + 'px'); + this.renderer.setElementStyle(modalRef, 'right', 'auto'); + this.renderer.setElementStyle(modalRef, 'bottom', 'auto'); + } +} \ No newline at end of file diff --git a/src/Squidex/app/framework/declarations.ts b/src/Squidex/app/framework/declarations.ts index 87b83e5a4..f988ad4a2 100644 --- a/src/Squidex/app/framework/declarations.ts +++ b/src/Squidex/app/framework/declarations.ts @@ -24,6 +24,7 @@ export * from './angular/indeterminate-value.directive'; export * from './angular/json-editor.component'; export * from './angular/lowercase-input.directive'; export * from './angular/markdown-editor.component'; +export * from './angular/modal-target.directive'; export * from './angular/modal-view.directive'; export * from './angular/money.pipe'; export * from './angular/name.pipe'; diff --git a/src/Squidex/app/framework/module.ts b/src/Squidex/app/framework/module.ts index db8c89e7f..3277bcc27 100644 --- a/src/Squidex/app/framework/module.ts +++ b/src/Squidex/app/framework/module.ts @@ -36,6 +36,7 @@ import { LowerCaseInputDirective, MarkdownEditorComponent, MessageBus, + ModalTargetDirective, ModalViewDirective, MoneyPipe, MonthPipe, @@ -92,6 +93,7 @@ import { JsonEditorComponent, LowerCaseInputDirective, MarkdownEditorComponent, + ModalTargetDirective, ModalViewDirective, MoneyPipe, MonthPipe, @@ -134,6 +136,7 @@ import { JsonEditorComponent, LowerCaseInputDirective, MarkdownEditorComponent, + ModalTargetDirective, ModalViewDirective, MoneyPipe, MonthPipe, diff --git a/src/Squidex/app/shared/components/language-selector.component.html b/src/Squidex/app/shared/components/language-selector.component.html index a69be023c..1519a7f3b 100644 --- a/src/Squidex/app/shared/components/language-selector.component.html +++ b/src/Squidex/app/shared/components/language-selector.component.html @@ -5,10 +5,10 @@
- -
+
{{language.iso2Code}}     ({{language.englishName}})
diff --git a/src/Squidex/app/theme/_forms.scss b/src/Squidex/app/theme/_forms.scss index ee3b2d12f..25b3ff169 100644 --- a/src/Squidex/app/theme/_forms.scss +++ b/src/Squidex/app/theme/_forms.scss @@ -84,6 +84,39 @@ } } +// +// Control Dropdown item +// +.control-dropdown { + & { + @include absolute(2px, auto, auto, 0); + @include border-radius(.25em); + @include box-shadow; + max-height: 10rem; + border: 1px solid $color-input-border; + background: $color-dark-foreground; + padding: .3rem 0; + overflow-y: auto; + } + + &-item { + padding: .5rem .75rem; + } + + &-item-selectable { + & { + cursor: pointer; + } + + &.active, + &:hover { + color: $color-dark-foreground; + border: 0; + background: $color-theme-blue; + } + } +} + // // Form group error. // diff --git a/src/Squidex/app/theme/_vars.scss b/src/Squidex/app/theme/_vars.scss index dca7382d5..3fcb23164 100644 --- a/src/Squidex/app/theme/_vars.scss +++ b/src/Squidex/app/theme/_vars.scss @@ -10,6 +10,7 @@ $color-subtext: $color-text-decent; $color-empty: $color-text-decent; $color-control: rgba(0, 0, 0, .15); $color-input: #dbe4eb; +$color-input-border: rgba(0, 0, 0, .15); $color-input-background: #fff; $color-disabled: #eef1f4; From 842d3ac3719b1e800d5e78a5b985d4aed20e2999 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Sun, 2 Jul 2017 13:38:13 +0200 Subject: [PATCH 7/9] Fix --- src/Squidex/app/framework/angular/autocomplete.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Squidex/app/framework/angular/autocomplete.component.ts b/src/Squidex/app/framework/angular/autocomplete.component.ts index 1ea4f8994..ee02bb464 100644 --- a/src/Squidex/app/framework/angular/autocomplete.component.ts +++ b/src/Squidex/app/framework/angular/autocomplete.component.ts @@ -141,7 +141,7 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O } public blur() { - // this.reset(); + this.reset(); this.touchedCallback(); } From 57e81055d7363904f8e140bb1cdfdbae3d51336c Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Sun, 2 Jul 2017 13:42:36 +0200 Subject: [PATCH 8/9] Minor fixes --- .../framework/angular/cloak.directive.spec.ts | 18 +++++++++++------- .../app/framework/angular/cloak.directive.ts | 7 ++++--- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/Squidex/app/framework/angular/cloak.directive.spec.ts b/src/Squidex/app/framework/angular/cloak.directive.spec.ts index c4d87c39c..5a5421b70 100644 --- a/src/Squidex/app/framework/angular/cloak.directive.spec.ts +++ b/src/Squidex/app/framework/angular/cloak.directive.spec.ts @@ -12,16 +12,20 @@ describe('CloakDirective', () => { let called = false; const element = { - nativeElement: { - classList: { - remove: () => { - called = true; - } - } + nativeElement: {} + }; + + const renderer = { + setElementClass: (target: any, className: string, isAdd: boolean) => { + called = true; + + expect(target).toBe(element.nativeElement); + expect(className).toBe('sqx-cloak'); + expect(isAdd).toBeFalsy(); } }; - new CloakDirective(element).ngOnInit(); + new CloakDirective(element, renderer).ngOnInit(); expect(called).toBeTruthy(); }); diff --git a/src/Squidex/app/framework/angular/cloak.directive.ts b/src/Squidex/app/framework/angular/cloak.directive.ts index 1c67852f6..916efde1b 100644 --- a/src/Squidex/app/framework/angular/cloak.directive.ts +++ b/src/Squidex/app/framework/angular/cloak.directive.ts @@ -5,18 +5,19 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { Directive, ElementRef, OnInit } from '@angular/core'; +import { Directive, ElementRef, OnInit, Renderer } from '@angular/core'; @Directive({ selector: '.sqx-cloak' }) export class CloakDirective implements OnInit { constructor( - private readonly element: ElementRef + private readonly element: ElementRef, + private readonly renderer: Renderer ) { } public ngOnInit() { - this.element.nativeElement.classList.remove('sqx-cloak'); + this.renderer.setElementClass(this.element.nativeElement, 'sqx-cloak', false); } } \ No newline at end of file From 5a8e33c5d49a09f948d9c4e1efdb8d7f36b9a1b9 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Sun, 2 Jul 2017 16:35:50 +0200 Subject: [PATCH 9/9] Bugfixes with autocompletion. --- .../contributors-page.component.html | 9 +++- .../contributors-page.component.scss | 15 +++++- .../contributors-page.component.ts | 12 ++--- .../angular/autocomplete.component.html | 7 ++- .../angular/autocomplete.component.scss | 24 +-------- .../angular/autocomplete.component.ts | 53 +++++++++---------- .../framework/angular/dropdown.component.html | 8 ++- .../framework/angular/dropdown.component.ts | 25 ++++++--- .../angular/template-wrapper.directive.ts | 18 ++++--- 9 files changed, 88 insertions(+), 83 deletions(-) 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 f2c57736c..e748d6c93 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 @@ -57,7 +57,14 @@
- + + + + + {{user.displayName}} + {{user.email}} + +
diff --git a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.scss b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.scss index fbb752506..7cc270ddf 100644 --- a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.scss +++ b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.scss @@ -1,2 +1,15 @@ @import '_vars'; -@import '_mixins'; \ No newline at end of file +@import '_mixins'; + +.autocomplete-user { + &-picture { + float: left; + margin-top: .4rem; + } + + &-name, + &-email { + @include truncate; + margin-left: 3rem; + } +} \ No newline at end of file diff --git a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.ts b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.ts index 9dab24e77..fded8a608 100644 --- a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.ts +++ b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.ts @@ -15,7 +15,6 @@ import { AppContributorsService, AppsStoreService, AuthService, - AutocompleteItem, AutocompleteSource, HistoryChannelUpdated, ImmutableArray, @@ -32,19 +31,14 @@ export class UsersDataSource implements AutocompleteSource { ) { } - public find(query: string): Observable { + public find(query: string): Observable { return this.usersService.getUsers(query) .map(users => { - const results: AutocompleteItem[] = []; + const results: any[] = []; for (let user of users) { if (!this.component.appContributors || !this.component.appContributors.find(t => t.contributorId === user.id)) { - results.push( - new AutocompleteItem( - user.displayName, - user.email, - user.pictureUrl!, - user)); + results.push(user); } } return results; diff --git a/src/Squidex/app/framework/angular/autocomplete.component.html b/src/Squidex/app/framework/angular/autocomplete.component.html index ad1b68a76..608d14ffd 100644 --- a/src/Squidex/app/framework/angular/autocomplete.component.html +++ b/src/Squidex/app/framework/angular/autocomplete.component.html @@ -6,11 +6,10 @@ autocapitalize="off">
-
- +
+ {{item}} - {{item.title}} - {{item.description}} +
\ No newline at end of file diff --git a/src/Squidex/app/framework/angular/autocomplete.component.scss b/src/Squidex/app/framework/angular/autocomplete.component.scss index 2a6c57f7e..116837ee0 100644 --- a/src/Squidex/app/framework/angular/autocomplete.component.scss +++ b/src/Squidex/app/framework/angular/autocomplete.component.scss @@ -1,28 +1,6 @@ @import '_mixins'; @import '_vars'; -$color-input-border: rgba(0, 0, 0, .15); - .control-dropdown { - & { - width: 18rem; - } - - &-item { - &-image { - @include circle(2.5rem); - float: left; - } - - &-title, - &-description { - @include truncate; - margin-left: 3rem; - } - - &-description { - font-size: .8rem; - font-style: italic; - } - } + width: 18rem; } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/autocomplete.component.ts b/src/Squidex/app/framework/angular/autocomplete.component.ts index ee02bb464..d2b76f86a 100644 --- a/src/Squidex/app/framework/angular/autocomplete.component.ts +++ b/src/Squidex/app/framework/angular/autocomplete.component.ts @@ -5,22 +5,12 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, ContentChild, forwardRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Observable, Subscription } from 'rxjs'; export interface AutocompleteSource { - find(query: string): Observable; -} - -export class AutocompleteItem { - constructor( - public readonly title: string, - public readonly description: string, - public readonly image: string, - public readonly model: any - ) { - } + find(query: string): Observable; } const KEY_ENTER = 13; @@ -50,11 +40,18 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O @Input() public inputName = 'autocompletion'; + @Input() + public displayProperty = ''; + @Input() public placeholder = ''; - public items: AutocompleteItem[] = []; - public itemSelection = -1; + @ContentChild(TemplateRef) + public itemTemplate: TemplateRef; + + public items: any[] = []; + + public selectedIndex = -1; public queryInput = new FormControl(); @@ -62,13 +59,7 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O if (!value) { this.resetValue(); } else { - let item: AutocompleteItem | null = null; - - if (value instanceof AutocompleteItem) { - item = value; - } else { - item = this.items.find(i => i.model === value); - } + let item = this.items.find(i => i === value); if (item) { this.queryInput.setValue(value.title || ''); @@ -133,7 +124,7 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O return false; case KEY_ENTER: if (this.items.length > 0) { - this.chooseItem(); + this.selectItem(); return false; } break; @@ -145,9 +136,9 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O this.touchedCallback(); } - public chooseItem(selection: AutocompleteItem | null = null) { + public selectItem(selection: any | null = null) { if (!selection) { - selection = this.items[this.itemSelection]; + selection = this.items[this.selectedIndex]; } if (!selection && this.items.length === 1) { @@ -156,7 +147,11 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O if (selection) { try { - this.queryInput.setValue(selection.title); + if (this.displayProperty && this.displayProperty.length > 0) { + this.queryInput.setValue(selection[this.displayProperty], { emitEvent: false }); + } else { + this.queryInput.setValue(selection.toString(), { emitEvent: false }); + } this.changeCallback(selection); } finally { this.reset(); @@ -165,11 +160,11 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O } private up() { - this.selectIndex(this.itemSelection - 1); + this.selectIndex(this.selectedIndex - 1); } private down() { - this.selectIndex(this.itemSelection + 1); + this.selectIndex(this.selectedIndex + 1); } private resetValue() { @@ -185,11 +180,11 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O selection = this.items.length - 1; } - this.itemSelection = selection; + this.selectedIndex = selection; } private reset() { this.items = []; - this.itemSelection = -1; + this.selectedIndex = -1; } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/dropdown.component.html b/src/Squidex/app/framework/angular/dropdown.component.html index 89eea9240..865e7b3c0 100644 --- a/src/Squidex/app/framework/angular/dropdown.component.html +++ b/src/Squidex/app/framework/angular/dropdown.component.html @@ -6,7 +6,9 @@ autocapitalize="off">
- + {{selectedItem}} + +
@@ -15,7 +17,9 @@
- + {{item}} + +
diff --git a/src/Squidex/app/framework/angular/dropdown.component.ts b/src/Squidex/app/framework/angular/dropdown.component.ts index ed83d0342..b0cf58322 100644 --- a/src/Squidex/app/framework/angular/dropdown.component.ts +++ b/src/Squidex/app/framework/angular/dropdown.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { Component, ContentChild, forwardRef, Input, TemplateRef } from '@angular/core'; +import { AfterContentInit, Component, ContentChildren, forwardRef, Input, QueryList, TemplateRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; const KEY_ENTER = 13; @@ -26,25 +26,38 @@ export const SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR: any = { templateUrl: './dropdown.component.html', providers: [SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR] }) -export class DropdownComponent implements ControlValueAccessor { +export class DropdownComponent implements AfterContentInit, ControlValueAccessor { private changeCallback: (value: any) => void = NOOP; private touchedCallback: () => void = NOOP; @Input() public items: any[] = []; - @ContentChild(TemplateRef) - public itemTemplate: TemplateRef; + @ContentChildren(TemplateRef) + public templates: QueryList; public dropdown = new ModalView(); public selectedItem: any; public selectedIndex = -1; + public selectionTemplate: TemplateRef; + + public itemTemplate: TemplateRef; public isDisabled = false; - private get safeItems(): any[] { - return this.items || []; + public ngAfterContentInit() { + if (this.templates.length === 1) { + this.itemTemplate = this.selectionTemplate = this.templates.first; + } else { + this.templates.forEach(template => { + if (template.name === 'selection') { + this.selectionTemplate = template; + } else { + this.itemTemplate = template; + } + }); + } } public writeValue(value: any) { diff --git a/src/Squidex/app/framework/angular/template-wrapper.directive.ts b/src/Squidex/app/framework/angular/template-wrapper.directive.ts index 53f0c4d3e..e7f65da9c 100644 --- a/src/Squidex/app/framework/angular/template-wrapper.directive.ts +++ b/src/Squidex/app/framework/angular/template-wrapper.directive.ts @@ -27,13 +27,6 @@ export class TemplateWrapper implements OnInit, OnDestroy, OnChanges { ) { } - public ngOnChanges() { - if (this.view) { - this.view.context.$implicit = this.item; - this.view.context.index = this.index; - } - } - public ngOnInit() { this.view = this.viewContainer.createEmbeddedView(this.templateRef, { '\$implicit': this.item, @@ -41,7 +34,16 @@ export class TemplateWrapper implements OnInit, OnDestroy, OnChanges { }); } + public ngOnChanges() { + if (this.view) { + this.view.context.$implicit = this.item; + this.view.context.index = this.index; + } + } + public ngOnDestroy() { - this.view.destroy(); + if (this.view) { + this.view.destroy(); + } } } \ No newline at end of file