styling/ui changes on annotation dialog and copy-link
This commit is contained in:
parent
b45bff4452
commit
9345c4a6ce
|
|
@ -1,5 +1,13 @@
|
|||
<div class="container-fluid">
|
||||
<div class="mt-3 pl-3 pr-3 pb-2 pt-1">
|
||||
<div class="row d-flex justify-content-between align-items-center">
|
||||
<div class="col-auto pr-0">
|
||||
<button mat-icon-button class="col-auto" type="button" matTooltip="{{ 'DESCRIPTION-EDITOR.QUESTION.EXTENDED-DESCRIPTION.COPY-LINK' | translate }}" (click)="copyLink()">
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h4 class="mt-2">{{'ANNOTATION-DIALOG.TITLE' | translate}}</h4>
|
||||
</div>
|
||||
<div class="col-auto ml-auto" (click)="close()">
|
||||
<mat-icon class="close-icon">close</mat-icon>
|
||||
</div>
|
||||
|
|
@ -7,16 +15,12 @@
|
|||
</div>
|
||||
<mat-dialog-content>
|
||||
<div class="row">
|
||||
|
||||
<!-- Create New Thread -->
|
||||
<div class="ml-auto col-auto">
|
||||
<button mat-icon-button class="col-auto" type="button" matTooltip="{{ 'DESCRIPTION-EDITOR.QUESTION.EXTENDED-DESCRIPTION.COPY-LINK' | translate }}" (click)="copyLink()">
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<form [formGroup]="threadFormGroup">
|
||||
<div class="row mt-2 mb-3">
|
||||
<div class="col-12 col-md mb-2">
|
||||
<div class="col-12 mb-2">
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-label>{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}</mat-label>
|
||||
<textarea matInput name="text" rows="2" formControlName="text" required></textarea>
|
||||
|
|
@ -28,25 +32,17 @@
|
|||
<mat-error *ngIf="threadFormGroup.get('text').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto">
|
||||
<mat-form-field class="w-100 protection-input">
|
||||
<mat-label>{{'ANNOTATION-DIALOG.THREADS.PROTECTION.TITLE' | translate}}</mat-label>
|
||||
<mat-select name="thread-protectionType" formControlName="protectionType" required>
|
||||
<mat-option *ngFor="let enumValue of annotationProtectionTypeEnumValues" [value]="enumValue">{{enumUtils.toAnnotationProtectionTypeString(enumValue)}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="threadFormGroup.get('protectionType').hasError('backendError')">{{threadFormGroup.get('protectionType').getError('backendError')?.message}}</mat-error>
|
||||
<mat-error *ngIf="threadFormGroup.get('protectionType').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
<div class="col-6">
|
||||
<mat-button-toggle-group appearance="standard" name="fontStyle" hideSingleSelectionIndicator="true" [formControl]="threadFormGroup.get('protectionType')" aria-label="Font Style" required>
|
||||
<mat-button-toggle [value]="annotationProtectionTypeEnum.Private" [matTooltip]="enumUtils.toAnnotationProtectionTypeString(annotationProtectionTypeEnum.Private)"><mat-icon>visibility_off</mat-icon></mat-button-toggle>
|
||||
<mat-button-toggle [value]="annotationProtectionTypeEnum.EntityAccessors" [matTooltip]="enumUtils.toAnnotationProtectionTypeString(annotationProtectionTypeEnum.EntityAccessors)"><mat-icon>public</mat-icon></mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
<div class="col-12 send-msg mt-1">
|
||||
<div class="row">
|
||||
<div class="col-auto pr-1">
|
||||
<button type="button" class="normal-btn-sm" (click)="createThread()">{{ 'ANNOTATION-DIALOG.THREADS.SEND' | translate }} <i class="fa fa-paper-plane ml-2"></i></button>
|
||||
<div class="col-auto ml-auto pr-1">
|
||||
<button type="button" class="normal-btn-sm mt-2" (click)="createThread()">{{ 'ANNOTATION-DIALOG.THREADS.SEND' | translate }} <i class="fa fa-paper-plane ml-2"></i></button>
|
||||
</div>
|
||||
<div class="col-auto pl-1">
|
||||
<button type="button" class="normal-btn-light-sm" (click)="close()">{{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="normal-btn-light-sm mt-2" (click)="close()">{{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -64,7 +60,7 @@
|
|||
<div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private">
|
||||
<div class="col-auto ml-auto">
|
||||
<div class="d-flex align-items-center" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}">
|
||||
<img src="/assets/images/annotations/eye-hide.png">
|
||||
<mat-icon>visibility_off</mat-icon>
|
||||
<div class="ml-1 mt-1">
|
||||
{{getAnnotationProtectionType(thread)}}
|
||||
</div>
|
||||
|
|
@ -74,9 +70,8 @@
|
|||
<div class="row ml-auto" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors">
|
||||
<div class="col-auto ml-auto">
|
||||
<div class="d-flex aling-items center" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}">
|
||||
<img src="/assets/images/annotations/globe.png" alt="globe">
|
||||
<!-- <i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i> -->
|
||||
<span class="ml-1">
|
||||
<mat-icon>public</mat-icon>
|
||||
<span class="ml-1 mt-1">
|
||||
{{getAnnotationProtectionType(thread)}}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -193,6 +193,7 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
|
|||
|
||||
ngAfterViewInit(): void {
|
||||
if (this.scrollToField && this.anchorFieldsetId && this.anchorFieldsetId != '') {
|
||||
this.descriptionFormService.scrollingToAnchor(this.anchorFieldsetId);
|
||||
if (this.openAnnotation) this.descriptionFormAnnotationService.οpenAnnotationDialog(this.anchorFieldsetId);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
<div *ngIf="!hideTitle" class="row">
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<h5 *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id">
|
||||
<div class="row title">
|
||||
<h5 *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id" [ngClass]="{'focused': isAnchor}">
|
||||
{{path}}
|
||||
{{fieldSet.title}}
|
||||
</h5>
|
||||
<mat-icon class="col-auto info-icon" *ngIf="fieldSet.additionalInformation && !isChild" matTooltip="{{fieldSet.additionalInformation}}">info</mat-icon>
|
||||
<button *ngIf="!hildeLink" mat-icon-button class="col-auto link-icon" type="button" matTooltip="{{ 'DESCRIPTION-EDITOR.QUESTION.EXTENDED-DESCRIPTION.COPY-LINK' | translate }}" (click)="copyLink()">
|
||||
<mat-icon class="">link</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<any> = new EventEmitter<any>();
|
||||
|
||||
public showExtendedDescription: boolean = false;
|
||||
|
||||
|
|
@ -19,4 +22,8 @@ export class DescriptionFormFieldSetTitleComponent implements OnInit {
|
|||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
copyLink(): void {
|
||||
this.copyLinkEvent.next(true);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,15 @@
|
|||
<div class="container p-0">
|
||||
<div *ngIf="fieldSet" class="row">
|
||||
<div *ngIf="showTitle" class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="row align-items-start">
|
||||
<div class="col">
|
||||
<app-description-form-field-set-title [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-description-form-field-set-title>
|
||||
<app-description-form-field-set-title [fieldSet]="fieldSet" [path]="path" [isChild]="isChild" [hildeLink]="hideAnnotations" (copyLinkEvent)="copyLink(fieldSet.id)" [isAnchor]="isAnchor"></app-description-form-field-set-title>
|
||||
</div>
|
||||
<div *ngIf="!hideAnnotations" class="col-auto">
|
||||
<div *ngIf="!hideAnnotations" class="col-auto" style="margin-top: 1rem;">
|
||||
<button mat-icon-button class="col-auto annotation-icon" (click)="showAnnotations(fieldSet.id)" matTooltip="{{ 'DESCRIPTION-EDITOR.QUESTION.EXTENDED-DESCRIPTION.ANNOTATIONS' | translate }}" [disabled]="!canReview">
|
||||
<mat-icon [matBadge]="annotationsCount" [matBadgeHidden]="annotationsCount <= 0" matBadgeColor="warn">comment</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="!hideAnnotations" class="col-auto pl-0">
|
||||
<button mat-icon-button class="col-auto" type="button" matTooltip="{{ 'DESCRIPTION-EDITOR.QUESTION.EXTENDED-DESCRIPTION.COPY-LINK' | translate }}" (click)="copyLink(fieldSet.id)">
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!fieldSet?.multiplicity?.tableView" class="col-12">
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
@ -81,6 +81,12 @@ export class DescriptionFormFieldSetComponent extends BaseComponent {
|
|||
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{
|
||||
|
|
|
|||
|
|
@ -13,4 +13,14 @@ export class DescriptionFormService {
|
|||
public detectChanges(next: any): void {
|
||||
this.detectChangesSubject.next(next);
|
||||
}
|
||||
|
||||
private scrollingToAnchorSubject: Subject<any> = new Subject<any>();
|
||||
|
||||
public getScrollingToAnchorObservable(): Observable<any> {
|
||||
return this.detectChangesSubject.asObservable();
|
||||
}
|
||||
|
||||
public scrollingToAnchor(next: any): void {
|
||||
this.detectChangesSubject.next(next);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
|
|||
|
||||
|
||||
constructor(
|
||||
private tableOfContentsService: TableOfContentsService
|
||||
private tableOfContentsService: TableOfContentsService,
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue