From d97d3a52e135fb8b8e940cc428f137ce3041417d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Till=20Sch=C3=BCtze?= <151851258+TIL-EBP@users.noreply.github.com> Date: Wed, 13 Mar 2024 15:08:48 +0100 Subject: [PATCH] Feature/assets 8: add missing scrollbars (#40) * assets-8: add scrollbars to all tabs in assets editor and user management * assets-8: remove some duplicate attributes * assets-8: fix unchanged files with annotations * assets-8: fix unchanged files with annotations * assets-8: fix unchanged files with annotations --------- Co-authored-by: Alex Graf --- .../admin-page/admin-page.component.scss | 5 +++ ...t-editor-tab-administration.component.html | 6 ++-- ...set-editor-tab-administration.component.ts | 4 +-- .../asset-editor-tab-contacts.component.html | 4 +-- .../asset-editor-tab-contacts.component.ts | 1 - .../asset-editor-tab-general.component.html | 4 +-- .../asset-editor-tab-general.component.ts | 13 +++---- .../asset-editor-tab-page.component.scss | 2 +- .../asset-editor-tab-references.component.ts | 3 +- .../asset-editor-tab-usage.component.html | 4 +-- .../asset-editor-tab-usage.component.scss | 5 +++ .../asset-multiselect.component.ts | 2 +- .../src/lib/services/asset-editor.service.ts | 6 ++-- .../src/lib/state/asset-editor.effects.ts | 2 +- .../drag-handle/drag-handle.component.ts | 2 +- libs/core/src/lib/utils/array.ts | 36 ------------------- libs/ngx-kobalte/src/lib/components/tabs.ts | 5 ++- 17 files changed, 35 insertions(+), 69 deletions(-) diff --git a/libs/admin/src/lib/components/admin-page/admin-page.component.scss b/libs/admin/src/lib/components/admin-page/admin-page.component.scss index 3dc6fa8d..309f3ae2 100644 --- a/libs/admin/src/lib/components/admin-page/admin-page.component.scss +++ b/libs/admin/src/lib/components/admin-page/admin-page.component.scss @@ -21,6 +21,11 @@ mat-progress-bar { width: calc(100% - 1rem); } +.user-list { + height: calc(100% - 4.5rem); + overflow-y: scroll; +} + asset-sg-user-collapsed, asset-sg-user-expanded { margin-bottom: 1rem; diff --git a/libs/asset-editor/src/lib/components/asset-editor-tab-administration/asset-editor-tab-administration.component.html b/libs/asset-editor/src/lib/components/asset-editor-tab-administration/asset-editor-tab-administration.component.html index 87c64cf3..4a81d8ba 100644 --- a/libs/asset-editor/src/lib/components/asset-editor-tab-administration/asset-editor-tab-administration.component.html +++ b/libs/asset-editor/src/lib/components/asset-editor-tab-administration/asset-editor-tab-administration.component.html @@ -1,10 +1,10 @@
-
-
edit.tabs.administration.infoGeol
+
+
edit.tabs.administration.infoGeol
- edit.tabs.administration.sgsId + edit.tabs.administration.sgsId diff --git a/libs/asset-editor/src/lib/components/asset-editor-tab-administration/asset-editor-tab-administration.component.ts b/libs/asset-editor/src/lib/components/asset-editor-tab-administration/asset-editor-tab-administration.component.ts index e39a1620..2a7129e8 100644 --- a/libs/asset-editor/src/lib/components/asset-editor-tab-administration/asset-editor-tab-administration.component.ts +++ b/libs/asset-editor/src/lib/components/asset-editor-tab-administration/asset-editor-tab-administration.component.ts @@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output import { FormBuilder, FormGroupDirective } from '@angular/forms'; import { RxState } from '@rx-angular/state'; import * as O from 'fp-ts/Option'; -import { Observable, map, take } from 'rxjs'; +import { Observable } from 'rxjs'; import { fromAppShared } from '@asset-sg/client-shared'; import { DateId } from '@asset-sg/shared'; @@ -55,7 +55,6 @@ export class AssetEditorTabAdministrationComponent implements OnInit { @Input() public set referenceDataVM$(value: Observable) { - // value.pipe(take(1)).subscribe(v => console.log(v)); this._state.connect('referenceDataVM', value); } @@ -69,7 +68,6 @@ export class AssetEditorTabAdministrationComponent implements OnInit { if (this._rootFormGroup.invalid) { this._rootFormGroup.markAllAsTouched(); } - // console.log(this._form); } public save() { diff --git a/libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.html b/libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.html index cc4ebf6b..4d94196d 100644 --- a/libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.html +++ b/libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.html @@ -71,8 +71,8 @@
-
-
+
+
diff --git a/libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.ts b/libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.ts index 70c97317..2aeb7bb8 100644 --- a/libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.ts +++ b/libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.ts @@ -1,6 +1,5 @@ import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, EventEmitter, Input, diff --git a/libs/asset-editor/src/lib/components/asset-editor-tab-general/asset-editor-tab-general.component.html b/libs/asset-editor/src/lib/components/asset-editor-tab-general/asset-editor-tab-general.component.html index 709bb1ed..82d52b71 100644 --- a/libs/asset-editor/src/lib/components/asset-editor-tab-general/asset-editor-tab-general.component.html +++ b/libs/asset-editor/src/lib/components/asset-editor-tab-general/asset-editor-tab-general.component.html @@ -1,7 +1,7 @@
-
+
edit.tabs.general.title
edit.tabs.general.publicTitle @@ -89,7 +89,7 @@
-
+
edit.tabs.general.topic
0) { + } else if (ids.length > 0) { this._form.controls.ids.setValue( ids.filter((_, i) => i !== this._state.get().currentlyEditedIdIndex), { emitEvent: false }, ); this._form.markAsDirty(); } - } + } }); } @@ -240,7 +238,6 @@ export class AssetEditorTabGeneralComponent implements OnInit { public _fileInvalid$ = new BehaviorSubject(false); public _fileInputChange(inputElement: HTMLInputElement) { - // console.log('adsf', inputElement.files); const files = inputElement.files; if (files && files.length > 0) { if (Array.from(files).some(f => f.size > 250 * 1024 * 1024)) { diff --git a/libs/asset-editor/src/lib/components/asset-editor-tab-page/asset-editor-tab-page.component.scss b/libs/asset-editor/src/lib/components/asset-editor-tab-page/asset-editor-tab-page.component.scss index cffa04f9..a357fdd5 100644 --- a/libs/asset-editor/src/lib/components/asset-editor-tab-page/asset-editor-tab-page.component.scss +++ b/libs/asset-editor/src/lib/components/asset-editor-tab-page/asset-editor-tab-page.component.scss @@ -26,7 +26,7 @@ form { ::ng-deep { [role='tabpanel'] { - height: 100%; + height: calc(100% - 4rem); & > * { height: calc(100% - 1rem); } diff --git a/libs/asset-editor/src/lib/components/asset-editor-tab-references/asset-editor-tab-references.component.ts b/libs/asset-editor/src/lib/components/asset-editor-tab-references/asset-editor-tab-references.component.ts index 994504d9..6f19a7b9 100644 --- a/libs/asset-editor/src/lib/components/asset-editor-tab-references/asset-editor-tab-references.component.ts +++ b/libs/asset-editor/src/lib/components/asset-editor-tab-references/asset-editor-tab-references.component.ts @@ -2,7 +2,7 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core'; import { FormBuilder, FormControl, FormGroupDirective, Validators } from '@angular/forms'; import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; -import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; +import { UntilDestroy } from '@ngneat/until-destroy'; import * as A from 'fp-ts/Array'; import * as E from 'fp-ts/Either'; import { flow, pipe } from 'fp-ts/function'; @@ -13,7 +13,6 @@ import { catchError, combineLatest, debounceTime, - delay, distinctUntilChanged, map, of, diff --git a/libs/asset-editor/src/lib/components/asset-editor-tab-usage/asset-editor-tab-usage.component.html b/libs/asset-editor/src/lib/components/asset-editor-tab-usage/asset-editor-tab-usage.component.html index e54dd3ad..f6bf9e4a 100644 --- a/libs/asset-editor/src/lib/components/asset-editor-tab-usage/asset-editor-tab-usage.component.html +++ b/libs/asset-editor/src/lib/components/asset-editor-tab-usage/asset-editor-tab-usage.component.html @@ -1,7 +1,7 @@ - +
-
+
edit.tabs.usage.internalUsage
(as: Array): Array<[A, A]> => { return bs; }; -type ClassType = string | string[] | Set | { [key: string]: unknown }; - -const addClass = (currentClass: ClassType, className: string): ClassType => { - if (!currentClass) { - return className; - } - if (typeof currentClass == 'string' && !currentClass.match(className)) { - return `${currentClass} ${className}`; - } - if (Array.isArray(currentClass) && !currentClass.includes(className)) { - return [...currentClass, className]; - } - if (currentClass instanceof Set) { - return currentClass.add(className); - } - if (typeof currentClass === 'object') { - return { ...currentClass, [className]: true }; - } - return currentClass; -}; - -const removeClass = (currentClass: ClassType, className: string): ClassType => { - if (typeof currentClass == 'string' && !currentClass.match(className)) { - return currentClass.replace(`\\s*${className}`, ''); - } - if (Array.isArray(currentClass) && !currentClass.includes(className)) { - return currentClass.filter(c => c !== className); - } - if (currentClass instanceof Set) { - return currentClass.add(className); - } - if (typeof currentClass === 'object') { - return { ...currentClass, [className]: true }; - } - return currentClass; -}; diff --git a/libs/ngx-kobalte/src/lib/components/tabs.ts b/libs/ngx-kobalte/src/lib/components/tabs.ts index 18cf8a7d..76d26c3b 100644 --- a/libs/ngx-kobalte/src/lib/components/tabs.ts +++ b/libs/ngx-kobalte/src/lib/components/tabs.ts @@ -1,7 +1,7 @@ import { Tabs } from '@kobalte/core'; import type { TabsContentOptions, TabsRootOptions, TabsTriggerOptions } from '@kobalte/core/dist/types/tabs'; import { Observable } from 'rxjs'; -import { Accessor, createSignal } from 'solid-js'; +import { Accessor } from 'solid-js'; import h from 'solid-js/h'; import { render } from 'solid-js/web'; @@ -23,8 +23,7 @@ export interface KobalteTabProps { export function KobalteTabs(element: HTMLElement, props: KobalteTabsProps, tabs$: Observable) { const tabs = fromWithStartWith(tabs$, []); - // const [tabKey, setTabKey] = createSignal(undefined); - // setTimeout(() => setTabKey('usage')); + render( () => h(Tabs.Root, props, () => [