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-26 17:46:13 +02:00
parent fe323d9b6a
commit 8206602387
2 changed files with 100 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,7 +48,18 @@
</div> </div>
<div class="col-12 mb-3 pt-2 gr-color" *ngIf="threads?.size > 0">{{'ANNOTATION-DIALOG.TITLE' | translate}}</div> <div class="col-12 mb-3 pt-2 gr-color" *ngIf="threads?.size > 0">{{'ANNOTATION-DIALOG.TITLE' | translate}}</div>
<div class="col-12"> <div class="col-12">
<div *ngFor="let thread of threads" class="row"> <ng-container *ngFor="let thread of threads">
<div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}">
<div class="col-auto ml-auto">
<i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i>{{getAnnotationProtectionType(thread)}}
</div>
</div>
<div class="row ml-auto" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}">
<div class="col-auto ml-auto">
<i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i>{{getAnnotationProtectionType(thread)}}
</div>
</div>
<div class="row thread mb-2">
<!-- Parent Thread --> <!-- Parent Thread -->
<div class="col-12"> <div class="col-12">
<div class="row parent-thread m-0 h-100"> <div class="row parent-thread m-0 h-100">
@ -64,16 +75,14 @@
</div> </div>
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<em class="col-auto user">{{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}} {{getParentAnnotation(thread).author.name}}</em> <span class="col user">{{getParentAnnotation(thread).author.name}}</span>
<div class="col annotation-time">{{getParentAnnotation(thread).timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div> <div class="col-auto annotation-time">{{getParentAnnotation(thread).timeStamp | date: "d MMMM, y 'at' h:mm a"}}</div>
<!-- <em class="col user">{{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}} {{getParentAnnotation(thread).author.name}}</em> -->
<!-- <div class="col annotation-time">{{getParentAnnotation(thread).timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div> -->
</div> </div>
<div class="row"> <div class="row pt-1 pb-1">
<div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div> <div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div>
</div> </div>
<div class="row">
<div class="col-auto" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}"><i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i>{{getAnnotationProtectionType(thread)}}</div>
<div class="col-auto" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}"><i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i>{{getAnnotationProtectionType(thread)}}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -101,13 +110,13 @@
</div> </div>
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col">
<em class="gr-color">{{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}}</em> <span class="user">{{annotation.author.name}}</span>
{{annotation.author.name}}
</div> </div>
<div class="col annotation-time">{{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div> <div class="col-auto annotation-time">{{annotation.timeStamp | date:"d MMMM, y 'at' h:mm a"}}</div>
<!-- <div class="col annotation-time">{{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div> -->
</div> </div>
<div class="row"> <div class="row pt-1 pb-1">
<div class="col-md-12 annotation-full-text">{{annotation.payload}}</div> <div class="col-md-12 annotation-full-text">{{annotation.payload}}</div>
</div> </div>
</div> </div>
@ -130,7 +139,7 @@
add_reaction add_reaction
</mat-icon> </mat-icon>
</mat-form-field> </mat-form-field>
<!-- <!--
<mat-form-field class="col pt-2 pb-2 pr-0"> <mat-form-field class="col pt-2 pb-2 pr-0">
<textarea matInput matTextareaAutosize matAutosizeMinRows="1" [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" placeholder="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}"></textarea> <textarea matInput matTextareaAutosize matAutosizeMinRows="1" [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" placeholder="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}"></textarea>
<mat-error *ngIf="this.threadReplyTextsFG[thread.toString()]?.get('replyText')?.hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="this.threadReplyTextsFG[thread.toString()]?.get('replyText')?.hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -143,6 +152,7 @@
</div> </div>
</div> </div>
</div> </div>
</ng-container>
</div> </div>
</div> </div>
</div> </div>

10
dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
View File

@ -75,3 +75,13 @@ $mat-card-header-size: 40px !default;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
} }
.thread {
padding: 1em 0 0 0;
background-color: #F5F5F5;
margin: 1em 0 0 0;
}
.user {
font-weight: bold;
}