diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf index 4b173a5ee..ec086bcd4 100644 --- a/src-ui/messages.xlf +++ b/src-ui/messages.xlf @@ -1831,7 +1831,7 @@ src/app/components/common/input/select/select.component.html - 31 + 32 src/app/components/common/input/tags/tags.component.html @@ -1970,10 +1970,25 @@ Add item src/app/components/common/input/select/select.component.html - 11 + 12 Used for both types, correspondents, storage paths + + Private + + src/app/components/common/input/select/select.component.ts + 36 + + + src/app/components/common/tag/tag.component.html + 7 + + + src/app/components/common/tag/tag.component.html + 8 + + Add tag diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html index aa005fb1f..9a1887338 100644 --- a/src-ui/src/app/components/common/input/select/select.component.html +++ b/src-ui/src/app/components/common/input/select/select.component.html @@ -5,6 +5,7 @@ [disabled]="disabled" [style.color]="textColor" [style.background]="backgroundColor" + [class.private]="isPrivate" [clearable]="allowNull" [items]="items" [addTag]="allowCreateNew && addItemRef" diff --git a/src-ui/src/app/components/common/input/select/select.component.scss b/src-ui/src/app/components/common/input/select/select.component.scss index 3d5f37526..2ed6995c8 100644 --- a/src-ui/src/app/components/common/input/select/select.component.scss +++ b/src-ui/src/app/components/common/input/select/select.component.scss @@ -12,3 +12,8 @@ } } } + +::ng-deep .private .ng-value-container { + font-style: italic; + opacity: .75; +} diff --git a/src-ui/src/app/components/common/input/select/select.component.ts b/src-ui/src/app/components/common/input/select/select.component.ts index 877b0f78d..0f65d76b6 100644 --- a/src-ui/src/app/components/common/input/select/select.component.ts +++ b/src-ui/src/app/components/common/input/select/select.component.ts @@ -26,8 +26,23 @@ export class SelectComponent extends AbstractInputComponent { this.addItemRef = this.addItem.bind(this) } + _items: any[] + @Input() - items: any[] + set items(items) { + if (this.value && items.find((i) => i.id === this.value) === undefined) { + items.push({ + id: this.value, + name: $localize`Private`, + private: true, + }) + } + this._items = items + } + + get items(): any[] { + return this._items + } @Input() textColor: any @@ -61,6 +76,10 @@ export class SelectComponent extends AbstractInputComponent { return this.createNew.observers.length > 0 } + get isPrivate(): boolean { + return this.items.find((i) => i.id === this.value)?.private + } + getSuggestions() { if (this.suggestions && this.items) { return this.suggestions diff --git a/src-ui/src/app/components/common/tag/tag.component.html b/src-ui/src/app/components/common/tag/tag.component.html index ed51597dc..ff07b4864 100644 --- a/src-ui/src/app/components/common/tag/tag.component.html +++ b/src-ui/src/app/components/common/tag/tag.component.html @@ -1,2 +1,9 @@ -{{tag.name}} -{{tag.name}} + + {{tag.name}} + {{tag.name}} + + + + Private + Private + diff --git a/src-ui/src/app/components/common/tag/tag.component.scss b/src-ui/src/app/components/common/tag/tag.component.scss index d5d77448d..3de7e7f13 100644 --- a/src-ui/src/app/components/common/tag/tag.component.scss +++ b/src-ui/src/app/components/common/tag/tag.component.scss @@ -4,3 +4,10 @@ a { word-break: break-word; text-align: end; } + +.private { + background-color: #000000; + color: #ffffff; + opacity: .5; + font-style: italic; +}