MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

styling changes 

*annotations
This commit is contained in:
Sofia Papacharalampous 2024-03-29 16:26:48 +02:00
parent f8b7bfc96c
commit 0b8f2e2fa7
1 changed files with 127 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
View File

@ -1,28 +1,26 @@
<div class="container form-container">
<div class="row d-flex justify-content-between align-items-center m-0">
<!-- <div class="col-auto"><a class="logo"><img class="logo" src="../../../assets/images/new-dmp-logo.png" onerror="this.style.display='none'"></a></div> -->
<div class="col-auto ml-auto close-btn" (click)="close()">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-auto ml-auto" (click)="close()">
<mat-icon class="close-icon">close</mat-icon>
</div>
</div>
<div class="annotation-viewer row">
<div class="row">
<!-- Create New Thread -->
<!-- <div *ngIf="this.canEdit && !this.isDeleted" class="col-12"> -->
<div class="col-12">
<form class="row p-2 mt-2 mb-3 ml-0 pr-3 mr-0 new-thread" [formGroup]="threadFormGroup">
<form [formGroup]="threadFormGroup">
<div class="row mt-2 mb-3">
<div class="col-12 col-md mb-2">
<mat-form-field appearance="outline" class="w-100">
<mat-label>{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}</mat-label>
<input matInput formControlName="text" required>
<mat-icon matSuffix class="material-symbols-outlined">
<!-- <mat-icon matSuffix class="material-symbols-outlined">
add_reaction
</mat-icon>
</mat-icon> -->
<mat-error *ngIf="threadFormGroup.get('text').hasError('backendError')">{{threadFormGroup.get('text').getError('backendError')?.message}}</mat-error>
<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 pl-md-0 pr-md-0">
<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>
@ -32,7 +30,6 @@
<mat-error *ngIf="threadFormGroup.get('protectionType').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 send-msg mt-1">
<div class="row">
<div class="col-auto pr-1">
@ -43,6 +40,7 @@
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-12 pt-2 gr-color" *ngIf="threads?.size > 0">
@ -55,9 +53,9 @@
</div>
<div class="col-12">
<ng-container *ngFor="let thread of threads">
<div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}">
<div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private">
<div class="col-auto ml-auto">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}">
<img src="/assets/images/annotations/eye-hide.png">
<div class="ml-1 mt-1">
{{getAnnotationProtectionType(thread)}}
@ -65,9 +63,9 @@
</div>
</div>
</div>
<div class="row ml-auto" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}">
<div class="row ml-auto" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors">
<div class="col-auto ml-auto">
<div class="d-flex aling-items center">
<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">
@ -76,15 +74,16 @@
</div>
</div>
</div>
<div class="row pt-1 pb-1 mt-1 comment-wrapper">
<div class="row mt-2 mb-2">
<!-- Parent Thread -->
<div class="col-12">
<div class="row m-0 h-100">
<div class="col pt-1">
<div class="container">
<div class="row comment-wrapper pt-1 pb-2 h-100">
<div class="col-12 pt-1">
<div class="row">
<div class="col-12">
<div class="row h-100">
<div class="col-auto p-0">
<div class="col-auto pr-0">
<img class="profile-picture" src="/assets/images/annotations/user-profile-2.png" alt="profile-picture">
</div>
<div class="col">
@ -114,16 +113,9 @@
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Previous Replies -->
<ng-container *ngIf="this.showRepliesPerThread[thread]">
<div *ngIf="this.showRepliesPerThread[thread]" class="row">
<div *ngFor="let annotation of annotationsPerThread[thread]; let i = index;" class="col-12">
<div class="row m-0 h-100">
<div class="col-auto pr-0 pl-0">
@ -153,20 +145,20 @@
</div>
</div>
</div>
</ng-container>
</div>
<div class="row mb-2">
<!-- Type reply in thread -->
<ng-container *ngIf="this.replyEnabledPerThread[thread]">
<div *ngIf="this.replyEnabledPerThread[thread]" class="row">
<div class="col-12 mt-2">
<div class="row new-reply mr-0">
<mat-form-field appearance="outline" class="col pl-0">
<div class="col">
<mat-form-field appearance="outline" class="w-100">
<mat-label>{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</mat-label>
<input matInput [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" required>
<mat-icon matSuffix class="material-symbols-outlined">
<!-- <mat-icon matSuffix class="material-symbols-outlined">
add_reaction
</mat-icon>
</mat-icon> -->
</mat-form-field>
</div>
<div class="col-auto p-0 send-msg">
<button class="form-field-margin" mat-icon-button color="black" (click)="replyThread(thread)" matTooltip="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}">
<img class="paper-plane" src="/assets/images/annotations/paper-plane.png" alt="paper-plane">
@ -174,7 +166,15 @@
</div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>
</div>