From f8ddd6b178ebb25c3f471bf7695f3f3910e4d2c8 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Sun, 23 Sep 2018 18:14:49 +0200 Subject: [PATCH] Tag selector for asset selector. --- .../assets/pages/assets-page.component.html | 28 +++++++++++++------ .../assets/pages/assets-page.component.scss | 18 ++++++++++++ .../assets/pages/assets-page.component.ts | 4 +++ .../angular/forms/tag-editor.component.scss | 7 +++++ .../angular/forms/tag-editor.component.ts | 28 +++++++++---------- .../shared/components/asset.component.scss | 9 ++++++ .../components/assets-selector.component.html | 25 +++++++++++++---- .../components/assets-selector.component.scss | 20 ++++++++++++- .../components/assets-selector.component.ts | 4 +++ .../components/search-form.component.ts | 8 ++++-- src/Squidex/app/shared/state/assets.state.ts | 18 ++++++++++++ 11 files changed, 136 insertions(+), 33 deletions(-) diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.html b/src/Squidex/app/features/assets/pages/assets-page.component.html index 382985711..594f6220c 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.html +++ b/src/Squidex/app/features/assets/pages/assets-page.component.html @@ -14,15 +14,25 @@ Refresh -
- - - - +
+
+
+ + +
+
+ + +
+
diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.scss b/src/Squidex/app/features/assets/pages/assets-page.component.scss index f353ad360..6bc6bf7dc 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.scss +++ b/src/Squidex/app/features/assets/pages/assets-page.component.scss @@ -4,4 +4,22 @@ .section { border-top: 1px solid $color-border; padding: 1rem; +} + +:host /deep/ { + .search { + .form-control { + @include border-radius-right; + } + + .tags { + @include border-radius-left; + border-right: 0; + + &:focus, + &.focus { + z-index: 1000; + } + } + } } \ No newline at end of file diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.ts b/src/Squidex/app/features/assets/pages/assets-page.component.ts index 1b595550f..2e5ead4b5 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.ts +++ b/src/Squidex/app/features/assets/pages/assets-page.component.ts @@ -51,6 +51,10 @@ export class AssetsPageComponent implements OnInit { this.assetsState.toggleTag(tag).pipe(onErrorResumeNext()).subscribe(); } + public selectTags(tags: string[]) { + this.assetsState.selectTags(tags).pipe(onErrorResumeNext()).subscribe(); + } + public resetTags() { this.assetsState.resetTags().pipe(onErrorResumeNext()).subscribe(); } diff --git a/src/Squidex/app/framework/angular/forms/tag-editor.component.scss b/src/Squidex/app/framework/angular/forms/tag-editor.component.scss index d93c57c91..9a40216e2 100644 --- a/src/Squidex/app/framework/angular/forms/tag-editor.component.scss +++ b/src/Squidex/app/framework/angular/forms/tag-editor.component.scss @@ -3,6 +3,10 @@ $focus-color: #b3d3ff; +:host { + text-align: left; +} + .form-control { & { cursor: text; @@ -32,6 +36,9 @@ $focus-color: #b3d3ff; div { &.form-control { height: auto; + text-align: left; + text-decoration: none; + position: relative; } } diff --git a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts index e04e64df6..12247f366 100644 --- a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts +++ b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Subscription } from 'rxjs'; import { distinctUntilChanged, map, tap } from 'rxjs/operators'; @@ -77,7 +77,7 @@ export const SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR: any = { templateUrl: './tag-editor.component.html', providers: [SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR] }) -export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnInit { +export class TagEditorComponent implements AfterViewInit, ControlValueAccessor, OnDestroy, OnInit { private subscription: Subscription; private callChange = (v: any) => { /* NOOP */ }; private callTouched = () => { /* NOOP */ }; @@ -104,7 +104,7 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn public class: string; @Input() - public placeholder = 'Press comma (,) to add tag'; + public placeholder = ', to add tag'; @Input() public inputName = 'tag-editor'; @@ -128,6 +128,10 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn this.subscription.unsubscribe(); } + public ngAfterViewInit() { + this.resetSize(); + } + public ngOnInit() { this.subscription = this.addInput.valueChanges.pipe( @@ -211,18 +215,12 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn if (ctx) { ctx.font = `${style.getPropertyValue('font-size')} ${style.getPropertyValue('font-family')}`; - let width = 0; + const widthText = ctx.measureText(this.inputElement.nativeElement.value).width; + const widthPlaceholder = ctx.measureText(this.placeholder).width; - if (this.singleLine) { - width = ctx.measureText(this.inputElement.nativeElement.value || this.placeholder).width; - } else { - const widthText = ctx.measureText(this.inputElement.nativeElement.value).width; - const widthPlaceholder = ctx.measureText(this.placeholder).width; - - width = Math.max(widthText, widthPlaceholder); - } + const width = Math.max(widthText, widthPlaceholder); - this.inputElement.nativeElement.style.width = ((width + 20) + 'px'); + this.inputElement.nativeElement.style.width = ((width + 5) + 'px'); } } @@ -291,8 +289,8 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn selection = 0; } - if (selection >= this.items.length) { - selection = this.items.length - 1; + if (selection >= this.suggestedItems.length) { + selection = this.suggestedItems.length - 1; } this.suggestedIndex = selection; diff --git a/src/Squidex/app/shared/components/asset.component.scss b/src/Squidex/app/shared/components/asset.component.scss index 8ada9a242..7e1a3462b 100644 --- a/src/Squidex/app/shared/components/asset.component.scss +++ b/src/Squidex/app/shared/components/asset.component.scss @@ -51,6 +51,15 @@ padding-right: 8px; } +:host /deep/ { + .form-control { + &.disabled, + &:disabled { + background: transparent; + } + } +} + .card { & { @include overlay-container; diff --git a/src/Squidex/app/shared/components/assets-selector.component.html b/src/Squidex/app/shared/components/assets-selector.component.html index 639f0447e..7ed1893c3 100644 --- a/src/Squidex/app/shared/components/assets-selector.component.html +++ b/src/Squidex/app/shared/components/assets-selector.component.html @@ -5,16 +5,29 @@
-
+
-
- - +
+
+
+ + +
+
+ + +
+
diff --git a/src/Squidex/app/shared/components/assets-selector.component.scss b/src/Squidex/app/shared/components/assets-selector.component.scss index fbb752506..ba605503d 100644 --- a/src/Squidex/app/shared/components/assets-selector.component.scss +++ b/src/Squidex/app/shared/components/assets-selector.component.scss @@ -1,2 +1,20 @@ @import '_vars'; -@import '_mixins'; \ No newline at end of file +@import '_mixins'; + +:host /deep/ { + .search { + .form-control { + @include border-radius-right; + } + + .tags { + @include border-radius-left; + border-right: 0; + + &:focus, + &.focus { + z-index: 1000; + } + } + } +} \ No newline at end of file diff --git a/src/Squidex/app/shared/components/assets-selector.component.ts b/src/Squidex/app/shared/components/assets-selector.component.ts index 0f9266273..4380f6358 100644 --- a/src/Squidex/app/shared/components/assets-selector.component.ts +++ b/src/Squidex/app/shared/components/assets-selector.component.ts @@ -56,6 +56,10 @@ export class AssetsSelectorComponent implements OnInit { this.selected.emit(Object.values(this.selectedAssets)); } + public selectTags(tags: string[]) { + this.state.selectTags(tags).pipe(onErrorResumeNext()).subscribe(); + } + public selectAsset(asset: AssetDto) { if (this.selectedAssets[asset.id]) { delete this.selectedAssets[asset.id]; diff --git a/src/Squidex/app/shared/components/search-form.component.ts b/src/Squidex/app/shared/components/search-form.component.ts index 60432aa90..20529e113 100644 --- a/src/Squidex/app/shared/components/search-form.component.ts +++ b/src/Squidex/app/shared/components/search-form.component.ts @@ -82,7 +82,9 @@ export class SearchFormComponent implements OnChanges, OnInit { } public ngOnInit() { - this.saveKey = this.queries.getSaveKey(this.contentsFilter.valueChanges); + if (this.queries) { + this.saveKey = this.queries.getSaveKey(this.contentsFilter.valueChanges); + } } public ngOnChanges() { @@ -98,7 +100,9 @@ export class SearchFormComponent implements OnChanges, OnInit { const value = this.saveQueryForm.submit(); if (value) { - this.queries.add(value.name, this.contentsFilter.value); + if (this.queries) { + this.queries.add(value.name, this.contentsFilter.value); + } this.saveQueryForm.submitCompleted(); } diff --git a/src/Squidex/app/shared/state/assets.state.ts b/src/Squidex/app/shared/state/assets.state.ts index 233010500..39f08819d 100644 --- a/src/Squidex/app/shared/state/assets.state.ts +++ b/src/Squidex/app/shared/state/assets.state.ts @@ -41,6 +41,10 @@ export class AssetsState extends State { this.tags.pipe( distinctUntilChanged(), map(x => x.map(t => t.name))); + public selectedTagNames = + this.changes.pipe( + distinctUntilChanged(), map(x => Object.keys(x.tagsSelected))); + public assets = this.changes.pipe(map(x => x.assets), distinctUntilChanged()); @@ -165,6 +169,20 @@ export class AssetsState extends State { return this.loadInternal(); } + public selectTags(tags: string[]): Observable { + this.next(s => { + const tagsSelected = {}; + + for (let tag of tags) { + tagsSelected[tag] = true; + } + + return { ...s, assetsPager: new Pager(0, 0, 30), tagsSelected }; + }); + + return this.loadInternal(); + } + public resetTags(): Observable { this.next(s => ({ ...s, assetsPager: new Pager(0, 0, 30), tagsSelected: {} }));