paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-08-16 00:36:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rework comment UI

Browse Source 
Add error popups, text field validation, move form, move comment header to footer, updated styling
This commit is contained in:
Michael Shamoon
2022-08-07 21:44:28 -07:00
parent d5018af2a3
commit 1b56ffd0c0
3 changed files with 65 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src-ui/src/app/components/document-comments/document-comments.component.html
View File

@@ -1,25 +1,29 @@
<div *ngIf="comments">
<form [formGroup]='commentForm'>
<div class="form-group">
<textarea class="form-control" rows="5" formControlName='newcomment'></textarea>
<div *ngFor="let comment of comments" class="card border mb-3">
<div class="card-body text-dark">
<p class="card-text">{{comment.comment}}</p>
</div>
<button type="button" class="btn btn-primary" [disabled]="networkActive" (click)="addComment()" i18n>Add comment</button>
</form>
<hr>
<div *ngFor="let comment of comments; trackBy: commentId" class="card border-bg-primary bg-primary mb-3 comment-card" [attr.comment-id]="comment.id">
<div class="d-flex card-header comment-card-header text-white justify-content-between">
<span>{{comment?.user?.firstname}} {{comment?.user?.lastname}} ({{comment?.user?.username}}) - {{ comment?.created | customDate}}</span>
<span>
<a class="text-white" (click)="deleteComment(comment.id)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
</a>
</span>
</div>
<div class="card-body bg-white text-dark comment-card-body card-text">
{{comment.comment}}
<div class="d-flex card-footer small bg-light text-primary justify-content-between align-items-center">
<span>{{displayName(comment)}} - {{ comment?.created | customDate}}</span>
<btn class="btn btn-link btn-sm p-0 fade" (click)="deleteComment(comment.id)">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
</btn>
</div>
</div>
<hr>
<form [formGroup]="commentForm" class="needs-validation" novalidate>
<div class="form-group">
<textarea class="form-control form-control-sm" [class.is-invalid]="newCommentError" rows="3" formControlName="newComment" placeholder="Enter comment" i18n-placeholder required></textarea>
<div class="invalid-feedback" i18n>
Please enter a comment.
</div>
</div>
<div class="form-group mt-2 d-flex justify-content-end">
<button type="button" class="btn btn-primary btn-sm" [disabled]="networkActive" (click)="addComment()" i18n>Add comment</button>
</div>
</form>
<hr>
</div>