diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html index fbf294a73ab084bdbe9a29b6d06860fb7c6e162b..5fe3482e1b664b6abaf91854bc00d4ecfd388b26 100644 --- a/src/app/components/shared/comment-list/comment-list.component.html +++ b/src/app/components/shared/comment-list/comment-list.component.html @@ -1,4 +1,4 @@ -<div fxLayout="row" id="search-container"> +<div fxLayout="row" id="search-container" *ngIf="comments.length > 0"> <mat-label fxLayoutAlign="center center"> <mat-icon class="search-icon">search</mat-icon> </mat-label> @@ -72,6 +72,13 @@ </mat-menu> </div> +<div fxLayout="row" fxLayoutAlign="center" *ngIf="comments.length < 1"> + <button mat-fab class="fab-extended" (click)="openCreateDialog()"> + {{'comment-list.add-comment' | translate}} + <mat-icon class="add">add</mat-icon> + </button> +</div> + <div *ngIf="!isLoading"> <app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current" [parseVote]="getVote(current)"></app-comment> </div> diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss index 708a54277aa2198c22edb6cd5f4d2ad9c793bb2e..ce3f2a31cb93e7d08aea9a8bb7ee48788d57d9f6 100644 --- a/src/app/components/shared/comment-list/comment-list.component.scss +++ b/src/app/components/shared/comment-list/comment-list.component.scss @@ -65,7 +65,7 @@ input { } .no-comments { - margin-top: 30%; + margin-top: 10%; } h4 { @@ -115,3 +115,21 @@ h4 { color: var(--on-surface); opacity: 1; } + +.fab-extended { + width: 50%; + min-width: 270px; + height: 40px; + border-radius: 32px; + margin: 10% 0 10% 0; + font-size: large; + background-color: var(--primary); + color: var(--on-primary); +} + +.add { + transform: scale(1.4); + padding-right: 5px; + padding-left: 5px; + color: var(--on-primary); +}