From fac5b55b348bce0c96197f93d5905d3aeacc053f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Sun, 23 Jun 2019 14:48:58 +0200
Subject: [PATCH] Display search bar only if comments exist
---
.../comment-list/comment-list.component.html | 9 ++++++++-
.../comment-list/comment-list.component.scss | 20 ++++++++++++++++++-
2 files changed, 27 insertions(+), 2 deletions(-)
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 fbf294a73..5fe3482e1 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 708a54277..ce3f2a31c 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);
+}
--
GitLab