From 9345c4a6ce18121bf35776827cb75a3ec5e61000 Mon Sep 17 00:00:00 2001 From: Sofia Papacharalampous Date: Mon, 1 Jul 2024 12:04:56 +0300 Subject: [PATCH] styling/ui changes on annotation dialog and copy-link --- .../annotation-dialog.component.html | 53 +++++++++---------- .../annotation-dialog.component.ts | 2 +- .../editor/description-editor.component.ts | 1 + .../field-set-title.component.html | 7 ++- .../field-set-title.component.scss | 33 ++++++++++-- .../field-set-title.component.ts | 9 +++- .../form-field-set.component.html | 11 ++-- .../form-field-set.component.ts | 10 +++- .../services/description-form.service.ts | 10 ++++ .../table-of-contents.component.ts | 2 +- 10 files changed, 90 insertions(+), 48 deletions(-) diff --git a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html index bda190867..8923055af 100644 --- a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html +++ b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html @@ -1,5 +1,13 @@ -
+
+
+ +
+
+

{{'ANNOTATION-DIALOG.TITLE' | translate}}

+
close
@@ -7,16 +15,12 @@
+ -
- -
-
+
{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}} @@ -28,25 +32,17 @@ {{'COMMONS.VALIDATION.REQUIRED' | translate}}
-
- - {{'ANNOTATION-DIALOG.THREADS.PROTECTION.TITLE' | translate}} - - {{enumUtils.toAnnotationProtectionTypeString(enumValue)}} - - {{threadFormGroup.get('protectionType').getError('backendError')?.message}} - {{'COMMONS.VALIDATION.REQUIRED' | translate}} - +
+ + visibility_off + public +
-
-
-
- -
-
- -
-
+
+ +
+
+
@@ -64,7 +60,7 @@
- + visibility_off
{{getAnnotationProtectionType(thread)}}
@@ -74,9 +70,8 @@
- globe - - + public + {{getAnnotationProtectionType(thread)}}
diff --git a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts index 5626e9b58..80fb51011 100644 --- a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts +++ b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts @@ -54,7 +54,7 @@ export class AnnotationDialogComponent extends BaseComponent { private language: TranslateService, private annotationService: AnnotationService, private formService: FormService, - private enumUtils: EnumUtils, + public enumUtils: EnumUtils, protected routerUtils: RouterUtilsService, ) { super(); diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts b/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts index 752f7cb80..5940693ab 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts @@ -193,6 +193,7 @@ export class DescriptionEditorComponent extends BaseEditor
-
-
+
+
{{path}} {{fieldSet.title}}
info +
diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss index ae6e4d6ff..c7e9e0fb0 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss @@ -1,8 +1,5 @@ .field-set { - // font-weight: bold; - // color: #3a3737; - // max-width: 100%; - // padding-top: 1em; + max-width: 85% !important; text-align: left; font-weight: 700; font-size: 18px; @@ -31,3 +28,31 @@ h6 { font-size: 1rem; font-weight: 400; } + +.link-icon { + margin-top: 1rem; + visibility: hidden; +} + +.title:hover { + & > .link-icon { + visibility: visible; + } +} + +.focused { + animation-name: titleFocus; + animation-duration: 5s; +} + +@keyframes titleFocus { + 0% { + color: #212121; + } + 50% { + color: var(--primary-color); + } + 100% { + color: #212121; + } +} diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.ts b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.ts index 1dc72063c..78b2171e3 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template'; @Component({ @@ -12,6 +12,9 @@ export class DescriptionFormFieldSetTitleComponent implements OnInit { @Input() isChild: Boolean = false; @Input() path: string; @Input() hideTitle: Boolean = false; + @Input() hildeLink: Boolean = false; + @Input() isAnchor: Boolean = false; + @Output() copyLinkEvent: EventEmitter = new EventEmitter(); public showExtendedDescription: boolean = false; @@ -19,4 +22,8 @@ export class DescriptionFormFieldSetTitleComponent implements OnInit { ngOnInit() { } + + copyLink(): void { + this.copyLinkEvent.next(true); + } } diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html index 35771b003..2dea29470 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html @@ -1,20 +1,15 @@
-
+
- +
-
+
-
- -
diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.ts b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.ts index a6447b848..a4822ec3b 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.ts @@ -25,7 +25,6 @@ import { TranslateService } from '@ngx-translate/core'; selector: 'app-description-form-field-set', templateUrl: './form-field-set.component.html', styleUrls: ['./form-field-set.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush }) export class DescriptionFormFieldSetComponent extends BaseComponent { @@ -54,6 +53,7 @@ export class DescriptionFormFieldSetComponent extends BaseComponent { annotationsCount: number = 0; descriptionTemplateFieldType = DescriptionTemplateFieldType; + isAnchor: boolean = false; constructor( private routerUtils: RouterUtilsService, @@ -78,9 +78,15 @@ export class DescriptionFormFieldSetComponent extends BaseComponent { } }); - this.descriptionFormAnnotationService.getOpenAnnotationSubjectObservable().pipe(takeUntil(this._destroyed)).subscribe( (anchorFieldsetId: string) => { + this.descriptionFormAnnotationService.getOpenAnnotationSubjectObservable().pipe(takeUntil(this._destroyed)).subscribe((anchorFieldsetId: string) => { if (anchorFieldsetId && anchorFieldsetId == this.fieldSet.id) this.showAnnotations(anchorFieldsetId); }); + + this.descriptionFormService.getScrollingToAnchorObservable().pipe(takeUntil(this._destroyed)).subscribe((anchorFieldsetId: string) => { + if (anchorFieldsetId && anchorFieldsetId == this.fieldSet.id) { + this.isAnchor = true; + } + }); } canAddMultiplicityField(): boolean{ diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/services/description-form.service.ts b/dmp-frontend/src/app/ui/description/editor/description-form/components/services/description-form.service.ts index c319675d6..8f56ac6e4 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/services/description-form.service.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/services/description-form.service.ts @@ -13,4 +13,14 @@ export class DescriptionFormService { public detectChanges(next: any): void { this.detectChangesSubject.next(next); } + + private scrollingToAnchorSubject: Subject = new Subject(); + + public getScrollingToAnchorObservable(): Observable { + return this.detectChangesSubject.asObservable(); + } + + public scrollingToAnchor(next: any): void { + this.detectChangesSubject.next(next); + } } diff --git a/dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.ts b/dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.ts index f4baaed6e..25e451b5e 100644 --- a/dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.ts +++ b/dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.ts @@ -37,7 +37,7 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O constructor( - private tableOfContentsService: TableOfContentsService + private tableOfContentsService: TableOfContentsService, ) { super(); }