From b164ebec01a07a843d186e2e5c0a067607e327e9 Mon Sep 17 00:00:00 2001 From: Timo Date: Wed, 25 Nov 2020 12:24:19 +0200 Subject: [PATCH] reworked dev features --- apps/red-ui/src/app/app.module.ts | 2 + .../red-tooltip/custom-tooltip.directive.ts | 23 ++- .../red-tooltip/custom-tooltip.module.ts | 2 +- .../common/red-tooltip/overlay-position.ts | 138 ++++++++++++++++++ .../tooltip-content.component.html | 9 +- .../tooltip-content.component.scss | 27 ++-- .../tooltip-content.component.ts | 5 +- .../tooltip-content/tooltip.model.ts | 3 - .../common/service/user-preference.service.ts | 8 +- .../base-screen/base-screen.component.html | 7 +- .../base-screen/base-screen.component.scss | 12 ++ .../base-screen/base-screen.component.ts | 2 + .../file-preview-screen.component.html | 22 +-- .../file-preview-screen.component.ts | 2 +- .../app/screens/file/model/file-data.model.ts | 4 +- .../file/service/annotation-draw.service.ts | 21 ++- apps/red-ui/src/assets/i18n/en.json | 1 + 17 files changed, 214 insertions(+), 74 deletions(-) create mode 100644 apps/red-ui/src/app/common/red-tooltip/overlay-position.ts delete mode 100644 apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip.model.ts diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index c08d7f733..214051c99 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -84,6 +84,7 @@ import { UserButtonComponent } from './components/buttons/user-button/user-butto import { CircleButtonComponent } from './components/buttons/circle-button/circle-button.component'; import { ChevronButtonComponent } from './components/buttons/chevron-button/chevron-button.component'; import { DictionaryListingScreenComponent } from './screens/admin/dictionary-listing-screen/dictionary-listing-screen.component'; +import { CustomTooltipModule } from './common/red-tooltip/custom-tooltip.module'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -148,6 +149,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) { ApiModule, MatDialogModule, MatNativeDateModule, + CustomTooltipModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, diff --git a/apps/red-ui/src/app/common/red-tooltip/custom-tooltip.directive.ts b/apps/red-ui/src/app/common/red-tooltip/custom-tooltip.directive.ts index 8f3ed0e44..57cf4e6e9 100644 --- a/apps/red-ui/src/app/common/red-tooltip/custom-tooltip.directive.ts +++ b/apps/red-ui/src/app/common/red-tooltip/custom-tooltip.directive.ts @@ -2,16 +2,15 @@ import { ComponentRef, Directive, ElementRef, HostListener, Input, OnChanges, On import { Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; import { TooltipContentComponent } from './tooltip-content/tooltip-content.component'; -import { TooltipModel } from './tooltip-content/tooltip.model'; -import { ArOverlayPosition, Placement } from '../../common/model/ar-overlay-position'; import { NavigationStart, Router } from '@angular/router'; +import { OverlayPosition, Placement } from './overlay-position'; @Directive({ - selector: '[redTooltip]', - exportAs: 'redTooltip' + selector: '[redactionTooltip]', + exportAs: 'redactionTooltip' }) export class CustomTooltipDirective implements OnInit, OnChanges, OnDestroy { - @Input() redTooltip: string; + @Input() redactionTooltip: string; @Input() placement: Placement = 'top'; @@ -37,8 +36,8 @@ export class CustomTooltipDirective implements OnInit, OnChanges, OnDestroy { } ngOnChanges(changes: SimpleChanges): void { - if (this.tooltipRef && this.redTooltip) { - this.tooltipRef.instance.tooltip = new TooltipModel(this.redTooltip); + if (this.tooltipRef && this.redactionTooltip) { + this.tooltipRef.instance.tooltip = this.redactionTooltip; } } @@ -55,19 +54,19 @@ export class CustomTooltipDirective implements OnInit, OnChanges, OnDestroy { } } - open(model?: TooltipModel) { + open(model?: string) { if (!this.overlayRef) { this.createOverlay(); } if (model) { - this.redTooltip = model; + this.redactionTooltip = model; } - if (this.redTooltip) { + if (this.redactionTooltip) { this.overlayRef.detach(); const tooltipPortal = new ComponentPortal(TooltipContentComponent); this.tooltipRef = this.overlayRef.attach(tooltipPortal); - this.tooltipRef.instance.tooltip = new TooltipModel(this.redTooltip); + this.tooltipRef.instance.tooltip = this.redactionTooltip; } } @@ -94,7 +93,7 @@ export class CustomTooltipDirective implements OnInit, OnChanges, OnDestroy { private createOverlay() { const positionStrategy = this.overlayPositionBuilder .flexibleConnectedTo(this.elementRef) - .withPositions(ArOverlayPosition.getConnectedPosition(this.placement)); + .withPositions(OverlayPosition.getConnectedPosition(this.placement)); this.overlayRef = this.overlay.create({ positionStrategy, scrollStrategy: this.overlay.scrollStrategies.close() diff --git a/apps/red-ui/src/app/common/red-tooltip/custom-tooltip.module.ts b/apps/red-ui/src/app/common/red-tooltip/custom-tooltip.module.ts index 3b95f0f58..0d42f60ca 100644 --- a/apps/red-ui/src/app/common/red-tooltip/custom-tooltip.module.ts +++ b/apps/red-ui/src/app/common/red-tooltip/custom-tooltip.module.ts @@ -1,8 +1,8 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { OverlayModule } from '@angular/cdk/overlay'; -import { CustomTooltipDirective } from './ar-tooltip.directive'; import { TooltipContentComponent } from './tooltip-content/tooltip-content.component'; +import { CustomTooltipDirective } from './custom-tooltip.directive'; @NgModule({ imports: [CommonModule, OverlayModule], diff --git a/apps/red-ui/src/app/common/red-tooltip/overlay-position.ts b/apps/red-ui/src/app/common/red-tooltip/overlay-position.ts new file mode 100644 index 000000000..c1cc3d420 --- /dev/null +++ b/apps/red-ui/src/app/common/red-tooltip/overlay-position.ts @@ -0,0 +1,138 @@ +import { ConnectedPosition } from '@angular/cdk/overlay'; +import { isArray } from 'rxjs/internal-compatibility'; + +export declare type Placement = + | 'auto' + | 'top' + | 'bottom' + | 'left' + | 'right' + | 'top-left' + | 'top-right' + | 'bottom-left' + | 'bottom-right' + | 'left-top' + | 'left-bottom' + | 'right-top' + | 'right-bottom'; +export declare type PlacementArray = Placement | Array; + +export class OverlayPosition { + private static readonly _offsetYVal = 7; + + public static TOP_LEFT: ConnectedPosition = { + originX: 'end', + originY: 'top', + overlayX: 'end', + overlayY: 'bottom', + offsetY: -OverlayPosition._offsetYVal + }; + + public static TOP_RIGHT: ConnectedPosition = { + originX: 'start', + originY: 'top', + overlayX: 'start', + overlayY: 'bottom', + offsetY: -OverlayPosition._offsetYVal + }; + + public static BOTTOM_LEFT: ConnectedPosition = { + originX: 'end', + originY: 'bottom', + overlayX: 'end', + overlayY: 'top', + offsetY: OverlayPosition._offsetYVal + }; + + public static BOTTOM_RIGHT: ConnectedPosition = { + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'top', + offsetY: OverlayPosition._offsetYVal + }; + + public static LEFT_TOP: ConnectedPosition = { + originX: 'start', + originY: 'top', + overlayX: 'end', + overlayY: 'top', + offsetX: -OverlayPosition._offsetYVal + }; + + public static LEFT_BOTTOM: ConnectedPosition = { + originX: 'start', + originY: 'bottom', + overlayX: 'end', + overlayY: 'bottom', + offsetX: -OverlayPosition._offsetYVal + }; + + public static RIGHT_TOP: ConnectedPosition = { + originX: 'end', + originY: 'top', + overlayX: 'start', + overlayY: 'top', + offsetX: OverlayPosition._offsetYVal + }; + + public static RIGHT_BOTTOM: ConnectedPosition = { + originX: 'end', + originY: 'bottom', + overlayX: 'start', + overlayY: 'bottom', + offsetX: OverlayPosition._offsetYVal + }; + + public static getConnectedPosition(position: PlacementArray): ConnectedPosition[] { + if (isArray(position)) { + return Array.from(position).map((pos) => this.getPosition(pos as Placement)); + } else if (position === 'auto') { + return this.getAutoPosition(); + } else { + return [this.getPosition(position as Placement)]; + } + } + + private static getPosition(position: Placement) { + switch (position) { + case 'top': + return OverlayPosition.TOP_RIGHT; + case 'bottom': + return OverlayPosition.BOTTOM_RIGHT; + case 'left': + return OverlayPosition.LEFT_TOP; + case 'right': + return OverlayPosition.RIGHT_TOP; + case 'top-left': + return OverlayPosition.TOP_LEFT; + case 'top-right': + return OverlayPosition.TOP_RIGHT; + case 'bottom-left': + return OverlayPosition.BOTTOM_LEFT; + case 'bottom-right': + return OverlayPosition.BOTTOM_RIGHT; + case 'left-top': + return OverlayPosition.LEFT_TOP; + case 'left-bottom': + return OverlayPosition.LEFT_BOTTOM; + case 'right-top': + return OverlayPosition.RIGHT_TOP; + case 'right-bottom': + return OverlayPosition.RIGHT_BOTTOM; + } + } + + private static getAutoPosition(): ConnectedPosition[] { + return [ + OverlayPosition.TOP_LEFT, + OverlayPosition.TOP_RIGHT, + OverlayPosition.BOTTOM_LEFT, + OverlayPosition.BOTTOM_RIGHT, + OverlayPosition.LEFT_TOP, + OverlayPosition.LEFT_BOTTOM, + OverlayPosition.RIGHT_TOP, + OverlayPosition.RIGHT_BOTTOM + ]; + } +} diff --git a/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.html b/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.html index c5337a6ed..5db65a4fe 100644 --- a/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.html +++ b/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.html @@ -1,10 +1,3 @@
-
-
{{ tooltip.title }}
-
{{ tooltip.body }}
-
- -
{{ tooltip.title }}
-
{{ tooltip.body }}
- + {{ tooltip }}
diff --git a/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.scss b/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.scss index f329c8ce2..b3288bb52 100644 --- a/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.scss +++ b/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.scss @@ -1,19 +1,14 @@ -@import '../../../../../../../assets/styles/ar-typography'; +@import '../../../../assets/styles/red-variables'; .tooltip-wrapper { - background-color: $aci-white; - box-shadow: 2px 3px 20px 0 rgba(0, 0, 0, 0.1); - padding: 12px 16px; - max-width: 300px; - font-size: 13px; - opacity: 0.95; - - .tooltip-title { - @extend .aci-font-style-f8, .aci-grey-1; - padding-bottom: 4px; - } - - .tooltip-body { - @extend .aci-font-style-f9, .aci-grey-1; - } + background-color: $accent; + border-radius: 3px; + padding: 10px; + font-family: Inter, sans-serif; + font-size: 11px; + line-height: 14px; + color: white; + position: relative; + overflow: visible !important; + text-align: center; } diff --git a/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.ts b/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.ts index 89b8b5c27..f7a45b05d 100644 --- a/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.ts +++ b/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.ts @@ -1,13 +1,12 @@ import { Component, Input, OnInit } from '@angular/core'; -import { TooltipModel } from './tooltip.model'; @Component({ - selector: 'up-ext-tooltip-content', + selector: 'redaction-tooltip-content', templateUrl: './tooltip-content.component.html', styleUrls: ['./tooltip-content.component.scss'] }) export class TooltipContentComponent implements OnInit { - @Input() tooltip: TooltipModel; + @Input() tooltip: string; constructor() {} diff --git a/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip.model.ts b/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip.model.ts deleted file mode 100644 index 6dd21e043..000000000 --- a/apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip.model.ts +++ /dev/null @@ -1,3 +0,0 @@ -export class TooltipModel { - constructor(public body: string) {} -} diff --git a/apps/red-ui/src/app/common/service/user-preference.service.ts b/apps/red-ui/src/app/common/service/user-preference.service.ts index f092492ef..a81b85893 100644 --- a/apps/red-ui/src/app/common/service/user-preference.service.ts +++ b/apps/red-ui/src/app/common/service/user-preference.service.ts @@ -4,16 +4,16 @@ import { Injectable } from '@angular/core'; providedIn: 'root' }) export class UserPreferenceService { - get areIgnoredAnnotationsEnabled() { - const value = sessionStorage.getItem('redaction.enable-ignore-annotations'); + get areDevFeaturesEnabled() { + const value = sessionStorage.getItem('redaction.enable-dev-features'); if (value) { return value === 'true'; } return false; } - public toggleIgnoredAnnotationsEnabled() { - sessionStorage.setItem('redaction.enable-ignore-annotations', `${!this.areIgnoredAnnotationsEnabled}`); + public toggleDevFeatures() { + sessionStorage.setItem('redaction.enable-dev-features', `${!this.areDevFeaturesEnabled}`); window.location.reload(); } } diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html index 41e3a0e59..6bef2bfea 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html @@ -38,8 +38,11 @@
- + + +
+
@@ -57,7 +60,7 @@ diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss b/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss index 63b3b59b8..32dc88c7e 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss @@ -23,3 +23,15 @@ } } } + +.dev-mode { + margin: 0 10px; + padding: 2px 5px; + background-color: $primary; + color: $white; + font-size: 14px; + font-weight: 600; + line-height: 16px; + height: 16px; + text-align: center; +} diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts b/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts index acf42a869..25e165587 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts @@ -3,6 +3,7 @@ import { UserService } from '../../user/user.service'; import { AppStateService } from '../../state/app-state.service'; import { LanguageService } from '../../i18n/language.service'; import { PermissionsService } from '../../common/service/permissions.service'; +import { UserPreferenceService } from '../../common/service/user-preference.service'; @Component({ selector: 'redaction-base-screen', @@ -13,6 +14,7 @@ export class BaseScreenComponent { constructor( public readonly appStateService: AppStateService, public readonly permissionsService: PermissionsService, + public readonly userPreferenceService: UserPreferenceService, private readonly _languageService: LanguageService, private readonly _userService: UserService ) {} diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index fa0a5a6a6..ce2b89683 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -85,20 +85,14 @@
- -
- -
- +
+ +
{ - this.drawSections(activeViewer, sectionGrid); - }); + if (this._userPreferenceService.areDevFeaturesEnabled) { + this._redactionLogControllerService.getSectionGrid(this._appStateService.activeFileId).subscribe((sectionGrid) => { + this.drawSections(activeViewer, sectionGrid); + }); + } } public drawSections(activeViewer: WebViewerInstance, sectionGrid: SectionGrid) { @@ -37,6 +39,9 @@ export class AnnotationDrawService { const sectionRectangles: SectionRectangle[] = sectionGrid.rectanglesPerPage[page]; sectionRectangles.forEach((sectionRectangle) => { sections.push(this.computeSection(activeViewer, parseInt(page, 10), sectionRectangle)); + // sectionRectangle.tableCells?.forEach(cell =>{ + // sections.push(this.computeSection(activeViewer, parseInt(page, 10), cell)); + // }) }); } const annotationManager = activeViewer.annotManager; @@ -49,13 +54,13 @@ export class AnnotationDrawService { const pageHeight = activeViewer.docViewer.getPageHeight(pageNumber); const rectangle = { topLeft: sectionRectangle.topLeft, page: pageNumber, height: sectionRectangle.height, width: sectionRectangle.width }; rectangleAnnot.PageNumber = pageNumber; - rectangleAnnot.X = rectangle.topLeft.x - 2; - rectangleAnnot.Y = pageHeight - (rectangle.topLeft.y + rectangle.height) - 2; - rectangleAnnot.Width = rectangle.width + 4; - rectangleAnnot.Height = rectangle.height + 4; + rectangleAnnot.X = rectangle.topLeft.x - 1; + rectangleAnnot.Y = pageHeight - (rectangle.topLeft.y + rectangle.height) - 1; + rectangleAnnot.Width = rectangle.width + 2; + rectangleAnnot.Height = rectangle.height + 2; rectangleAnnot.ReadOnly = true; rectangleAnnot.StrokeColor = this.getColor(activeViewer, 'analysis', 'analysis'); - rectangleAnnot.StrokeThickness = 2; + rectangleAnnot.StrokeThickness = 1; return rectangleAnnot; } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index ea2e43e07..a47ff28c4 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -7,6 +7,7 @@ "logout": "Logout" }, "app-name": "DDA-R", + "dev-mode": "[ DEV MODE ]", "upload-status": { "dialog": { "title": "File Upload",