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 16:54:49 +02:00
parent 8be851763b
commit 7615e135e9
6 changed files with 108 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,12 +10,23 @@
<!-- <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">
<mat-form-field class="col-6 msg-input">
<!-- <mat-form-field class="col-6 msg-input">
<textarea matInput matTextareaAutosize matAutosizeMinRows="1" name="thread-text" formControlName="text" placeholder="{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}" required></textarea>
<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> -->
<mat-form-field appearance="outline" class="col">
<mat-label>{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}</mat-label>
<input matInput formControlName="text" required>
<mat-icon matSuffix class="material-symbols-outlined">
add_reaction
</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>
<mat-form-field class="col-6 pl-0 pr-0 protection-input">
<mat-form-field class="col-auto pl-0 pr-0 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>
@ -23,10 +34,15 @@
<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-auto send-msg">
<button mat-raised-button type="button" (click)="createThread()">
<i class="fa fa-paper-plane"></i> {{'ANNOTATION-DIALOG.THREADS.SEND' | translate}}
</button>
<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>
<div class="col-auto pl-1">
<button type="button" class="normal-btn-light-sm" (click)="close()">{{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}</button>
</div>
</div>
</div>
</form>
</div>
@ -43,12 +59,21 @@
<div class="row reply-content">
<div class="col-12">
<div class="row h-100">
<div class="col-10 annotation-time">{{getParentAnnotation(thread).timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div>
<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 class="col-md-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div>
<div class="col-md-12">
<em class="user">{{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}} {{getParentAnnotation(thread).author.name}}</em>
<div class="col-auto">
<img class="profile-picture" src="/assets/images/user-profile-2.png" alt="profile-picture">
</div>
<div class="col">
<div class="row">
<em class="col-auto 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 class="row">
<div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</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>
@ -71,11 +96,20 @@
</div>
<div class="col reply-content">
<div class="row h-100">
<div class="col-md-12 annotation-time">{{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div>
<div class="col-md-12 annotation-full-text">{{annotation.payload}}</div>
<div class="col-md-12">
<em class="gr-color">{{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}}</em>
{{annotation.author.name}}
<div class="col-auto">
<img class="profile-picture" src="/assets/images/user-profile-2.png" alt="profile-picture">
</div>
<div class="col">
<div class="row">
<div class="col-auto">
<em class="gr-color">{{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}}</em>
{{annotation.author.name}}
</div>
<div class="col annotation-time">{{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div>
</div>
<div class="row">
<div class="col-md-12 annotation-full-text">{{annotation.payload}}</div>
</div>
</div>
</div>
</div>
@ -86,14 +120,23 @@
<!-- Type reply in thread -->
<!-- <div *ngIf="this.canEdit && !this.isDeleted" class="col-12"> -->
<div class="col-12">
<div class="col-12 mt-2">
<div class="row new-reply mr-0">
<mat-form-field appearance="outline" class="col">
<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">
add_reaction
</mat-icon>
</mat-form-field>
<!--
<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>
<mat-error *ngIf="this.threadReplyTextsFG[thread.toString()]?.get('replyText')?.hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</mat-form-field> -->
<div class="col-auto send-msg">
<button class="form-field-margin" mat-icon-button type="button" color="accent" (click)="replyThread(thread)" matTooltip="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}">
<button class="form-field-margin" mat-icon-button type="button" color="black" (click)="replyThread(thread)" matTooltip="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}">
<i class="fa fa-paper-plane"></i>
</button>
</div>

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

@ -1,3 +1,5 @@
$mat-card-header-size: 40px !default;
::ng-deep .mat-dialog-container {
border-radius: 8px;
}
@ -5,7 +7,7 @@
.form-container {
width: 100%;
min-height: 14rem;
padding: 1rem;
padding: 1rem 2rem 2rem 2rem;
}
.logo {
@ -66,3 +68,10 @@
.warn {
color: #f16868;
}
.profile-picture {
height: $mat-card-header-size;
width: $mat-card-header-size;
border-radius: 50%;
flex-shrink: 0;
}

4
dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts
View File

@ -18,7 +18,7 @@ import { takeUntil } from 'rxjs/operators';
import { nameof } from 'ts-simple-nameof';
@Component({
selector: 'app-start-new-dmp',
selector: 'app-annotation-dialog',
templateUrl: './annotation-dialog.component.html',
styleUrls: ['./annotation-dialog.component.scss']
})
@ -139,6 +139,7 @@ export class AnnotationDialogComponent extends BaseComponent {
.pipe(takeUntil(this._destroyed))
.subscribe(
data => {
console.log(data);
this.annotationsPerThread = {};
this.parentAnnotationsPerThread = {};
this.threads = new Set();
@ -152,6 +153,7 @@ export class AnnotationDialogComponent extends BaseComponent {
this.parentAnnotationsPerThread[element.threadId.toString()] = data.items.filter(x => x.threadId === element.threadId && x.id === element.id)[0];
this.threads.add(element.threadId);
});
console.log(this.parentAnnotationsPerThread);
// console.log(this.comments);
// console.log(this.threads);
// console.log(this.parentAnnotationsPerThread);

30
dmp-frontend/src/assets/css/demo.css
View File

@ -590,6 +590,36 @@ hr {
font-weight: 500;
}
.normal-btn-sm {
min-width: 100px;
max-width: 256px;
height: 40px;
cursor: pointer;
background: var(--primary-color) 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1E202029;
border-radius: 30px;
border: none;
color: #FFFFFF;
opacity: 1;
font-size: 0.87rem;
padding: 0.62rem 1.87rem;
font-weight: 400;
}
.normal-btn-light-sm {
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1E202029;
border: 1px solid var(--primary-color);
border-radius: 30px;
opacity: 1;
min-width: 100px;
max-width: 256px;
height: 40px;
color: var(--primary-color);
font-size: 0.87rem;
font-weight: 400;
}
.mirror {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);

3
dmp-frontend/src/assets/i18n/en.json
View File

@ -254,7 +254,8 @@
"THREADS": {
"NEW-THREAD": "New comment",
"FROM-USER": "From",
"SEND": "Send comment",
"SEND": "Send",
"CANCEL": "Cancel",
"REPLY": "Reply",
"PROTECTION": {
"TITLE": "Visibility"

BIN
dmp-frontend/src/assets/images/user-profile-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 KiB