diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html index 96540c481..d628bf93b 100644 --- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html +++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html @@ -3,13 +3,13 @@
- + > +> div { } } -redaction-table-header::ng-deep .header-item { +iqser-table-header::ng-deep .header-item { padding: 0 24px 0 10px; box-shadow: none; border-top: 1px solid $separator; diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html index 452ba50bf..1bff06812 100644 --- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html @@ -86,7 +86,7 @@
-
+
- + >
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html index 9c0be9858..8443f12e3 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html @@ -20,13 +20,13 @@
- + >
- + >
-
- +
- + >
- + >
- + > diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts index b27a16217..4c333d833 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts @@ -5,15 +5,14 @@ import { AppStateService } from '@state/app-state.service'; import { environment } from '@environments/environment'; import { HttpClient } from '@angular/common/http'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { Debounce } from '@utils/debounce'; +import { Debounce, IconButtonTypes } from '@iqser/common-ui'; import { WatermarkControllerService, WatermarkModelRes } from '@redaction/red-ui-http'; import { Toaster } from '@services/toaster.service'; import { ActivatedRoute } from '@angular/router'; import { BASE_HREF } from '../../../../tokens'; -import { stampPDFPage } from '../../../../utils/page-stamper'; +import { stampPDFPage } from '@utils/page-stamper'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { LoadingService } from '../../../../services/loading.service'; -import { IconButtonTypes } from '@iqser/common-ui'; +import { LoadingService } from '@services/loading.service'; export const DEFAULT_WATERMARK: WatermarkModelRes = { text: null, diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts index 022589698..205030f39 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts @@ -15,12 +15,11 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { AnnotationProcessingService } from '../../services/annotation-processing.service'; import { MatDialogRef, MatDialogState } from '@angular/material/dialog'; import scrollIntoView from 'scroll-into-view-if-needed'; -import { Debounce } from '@utils/debounce'; +import { CircleButtonTypes, Debounce, IconButtonTypes, NestedFilter } from '@iqser/common-ui'; import { FileDataModel } from '@models/file/file-data.model'; import { CommentsComponent } from '../comments/comments.component'; import { PermissionsService } from '@services/permissions.service'; import { WebViewerInstance } from '@pdftron/webviewer'; -import { CircleButtonTypes, IconButtonTypes, NestedFilter } from '@iqser/common-ui'; const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape']; const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html index 96b57646e..cdd63b498 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html @@ -8,10 +8,7 @@
- + ; @ViewChild(CdkVirtualScrollViewport) diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html index 0aa509fea..cb1c6c5be 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html @@ -36,12 +36,12 @@
- + >
- + - - - - {{ tableHeaderLabel | translate: { length: (entitiesService.displayedLength$ | async) } }} - - - - - - - - -
- -
-
- - - -
- -
-
diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.scss b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts deleted file mode 100644 index f2eeb0d2c..000000000 --- a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core'; -import { EntitiesService, FilterService, Required, TableColumnConfig } from '@iqser/common-ui'; -import { map } from 'rxjs/operators'; - -@Component({ - selector: 'redaction-table-header', - templateUrl: './table-header.component.html', - styleUrls: ['./table-header.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class TableHeaderComponent { - @Input() @Required() tableHeaderLabel: string; - @Input() @Required() tableColumnConfigs: TableColumnConfig[]; - @Input() hasEmptyColumn = false; - @Input() selectionEnabled = false; - @Input() bulkActions: TemplateRef; - - readonly quickFilters$ = this.filterService.getFilterModels$('quickFilters').pipe(map(filters => new Set(filters))); - - constructor(readonly entitiesService: EntitiesService, readonly filterService: FilterService) {} -} diff --git a/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts b/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts deleted file mode 100644 index dcf09fafc..000000000 --- a/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core'; -import { Debounce } from '@utils/debounce'; - -@Directive({ - selector: '[redactionSyncWidth]', - exportAs: 'redactionSyncWidth' -}) -export class SyncWidthDirective implements AfterViewInit, OnDestroy { - @Input() - redactionSyncWidth: string; - private _interval: number; - - constructor(private readonly _elementRef: ElementRef) {} - - ngAfterViewInit(): void { - this._interval = setInterval(() => { - this.matchWidth(); - }, 1000); - } - - ngOnDestroy(): void { - clearInterval(this._interval); - } - - @Debounce(10) - matchWidth() { - const headerItems = this._elementRef.nativeElement.children; - const tableRows = this._elementRef.nativeElement.parentElement.parentElement.getElementsByClassName(this.redactionSyncWidth); - - if (!tableRows || !tableRows.length) { - return; - } - - this._elementRef.nativeElement.setAttribute('synced', true); - - const { tableRow, length } = this._sampleRow(tableRows); - - const hasExtraColumns = headerItems.length !== length ? 1 : 0; - - for (let idx = 0; idx < length - hasExtraColumns - 1; ++idx) { - if (headerItems[idx]) { - headerItems[idx].style.width = `${tableRow.children[idx].getBoundingClientRect().width}px`; - headerItems[idx].style.minWidth = `${tableRow.children[idx].getBoundingClientRect().width}px`; - } - } - - for (let idx = length - hasExtraColumns - 1; idx < headerItems.length; ++idx) { - if (headerItems[idx]) { - headerItems[idx].style.minWidth = `0`; - } - } - } - - @HostListener('window:resize') - onResize() { - this.matchWidth(); - } - - private _sampleRow(tableRows: HTMLCollectionOf): { - tableRow: Element; - length: number; - } { - let length = 0; - let tableRow: Element; - - for (let idx = 0; idx < tableRows.length; ++idx) { - const row = tableRows.item(idx); - if (row.children.length > length) { - length = row.children.length; - tableRow = row; - } - } - - return { tableRow, length }; - } -} diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index b65587c85..44c41e7ee 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FullPageLoadingIndicatorComponent } from './components/full-page-loading-indicator/full-page-loading-indicator.component'; -import { TranslateModule } from '@ngx-translate/core'; import { InitialsAvatarComponent } from './components/initials-avatar/initials-avatar.component'; import { ScrollingModule } from '@angular/cdk/scrolling'; import { PaginationComponent } from './components/pagination/pagination.component'; @@ -13,7 +12,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component'; import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component'; import { StatusBarComponent } from './components/status-bar/status-bar.component'; -import { SyncWidthDirective } from './directives/sync-width.directive'; import { HasScrollbarDirective } from './directives/has-scrollbar.directive'; import { DictionaryAnnotationIconComponent } from './components/dictionary-annotation-icon/dictionary-annotation-icon.component'; import { HiddenActionComponent } from './components/hidden-action/hidden-action.component'; @@ -32,14 +30,12 @@ import { AssignUserDropdownComponent } from './components/assign-user-dropdown/a import { InputWithActionComponent } from '@shared/components/input-with-action/input-with-action.component'; import { PageHeaderComponent } from './components/page-header/page-header.component'; import { DatePipe } from '@shared/pipes/date.pipe'; -import { TableHeaderComponent } from './components/table-header/table-header.component'; const buttons = [FileDownloadBtnComponent, UserButtonComponent]; const components = [ FullPageLoadingIndicatorComponent, InitialsAvatarComponent, - TableHeaderComponent, PaginationComponent, InputWithActionComponent, AnnotationIconComponent, @@ -59,14 +55,14 @@ const components = [ ...buttons ]; -const utils = [DatePipe, SyncWidthDirective, HasScrollbarDirective, NavigateLastDossiersScreenDirective]; +const utils = [DatePipe, HasScrollbarDirective, NavigateLastDossiersScreenDirective]; -const modules = [MatConfigModule, TranslateModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, CommonUiModule]; +const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, CommonUiModule]; @NgModule({ - declarations: [...components, ...utils, TableHeaderComponent], + declarations: [...components, ...utils], imports: [CommonModule, ...modules, MonacoEditorModule], - exports: [...modules, ...components, ...utils, TableHeaderComponent], + exports: [...modules, ...components, ...utils], providers: [ { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }, { diff --git a/apps/red-ui/src/app/utils/custom-route-reuse.strategy.ts b/apps/red-ui/src/app/utils/custom-route-reuse.strategy.ts index cfc0e50be..cde02a2eb 100644 --- a/apps/red-ui/src/app/utils/custom-route-reuse.strategy.ts +++ b/apps/red-ui/src/app/utils/custom-route-reuse.strategy.ts @@ -1,5 +1,5 @@ import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router'; -import { Debounce } from './debounce'; +import { Debounce } from '@iqser/common-ui'; export interface OnAttach { ngOnAttach(previousRoute: ActivatedRouteSnapshot); diff --git a/apps/red-ui/src/app/utils/debounce.ts b/apps/red-ui/src/app/utils/debounce.ts deleted file mode 100644 index 47fd1a269..000000000 --- a/apps/red-ui/src/app/utils/debounce.ts +++ /dev/null @@ -1,14 +0,0 @@ -export function Debounce(delay: number = 300): MethodDecorator { - return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { - let timeout = null; - - const original = descriptor.value; - - descriptor.value = function (...args) { - clearTimeout(timeout); - timeout = setTimeout(() => original.apply(this, args), delay); - }; - - return descriptor; - }; -} diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss deleted file mode 100644 index 72e1b083c..000000000 --- a/apps/red-ui/src/assets/styles/red-grid.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import 'variables'; -@import 'red-mixins'; - -.header-item { - background-color: $grey-6; - height: 50px; - padding: 0 24px; - display: flex; - align-items: center; - z-index: 1; - border-bottom: 1px solid $separator; - box-sizing: border-box; - - > *:not(:last-child) { - margin-right: 10px; - } - - .actions { - display: flex; - align-items: center; - justify-content: flex-end; - - > *:not(:last-child) { - margin-right: 16px; - } - } - - &.selection-enabled { - padding-left: 10px; - } -} diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index c745443f2..2b5122101 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -123,8 +123,3 @@ cdk-virtual-scroll-viewport { } } } - -.scrollbar-placeholder { - width: 11px; - padding: 0 !important; -} diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 1e411145a..d55ffb091 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -18,7 +18,6 @@ @import 'red-controls'; @import 'red-toasts'; @import 'red-tooltips'; -@import 'red-grid'; @import 'red-breadcrumbs'; @import 'red-editor'; @import 'red-slider'; diff --git a/libs/common-ui b/libs/common-ui index f0c440876..7e9b28a10 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit f0c440876402cb4f603583537eca36f9038cc6fa +Subproject commit 7e9b28a10c7b226dcab54354c6e7f1d8ccebc0c6