From 34e21f004a2b572015b04c8e511539d7d8df0ff5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Thu, 16 May 2019 23:19:46 +0200
Subject: [PATCH] Fix button position in search bar
---
.../comment-list/comment-list.component.html | 35 +++++++++++--------
.../comment-list/comment-list.component.scss | 6 +++-
2 files changed, 25 insertions(+), 16 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 f2a8effa8..98683e222 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -8,21 +8,25 @@
(click)="hideCommentsList=false; searchBox.value=''">
<mat-icon>close</mat-icon>
</button>
+
<span class="fill-remaining-space"></span>
- <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && userRole === 1 && comments.length > 0"
- [matTooltip]="'Export comments'" (click)="openExportDialog()">
- <mat-icon class="searchBarIcon" color="accent">cloud_download</mat-icon>
- </button>
- <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value"
- color="accent" (click)="openCreateDialog()">
- <mat-icon class="searchBarIcon">add_circle</mat-icon>
- </button>
+ <div class="button-bar" fxLayoutAlign="center center">
+ <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && userRole === 1 && comments.length > 0"
+ [matTooltip]="'Export comments'" (click)="openExportDialog()">
+ <mat-icon class="searchBarIcon" color="accent">cloud_download</mat-icon>
+ </button>
- <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && comments.length > 0"
- color="accent" [matMenuTriggerFor]="filterMenu">
- <mat-icon class="searchBarIcon">sort</mat-icon>
- </button>
+ <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value"
+ color="accent" (click)="openCreateDialog()">
+ <mat-icon class="searchBarIcon">add_circle</mat-icon>
+ </button>
+
+ <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && comments.length > 0"
+ color="accent" [matMenuTriggerFor]="filterMenu">
+ <mat-icon class="searchBarIcon">sort</mat-icon>
+ </button>
+ </div>
<mat-menu #filterMenu="matMenu" xPosition="before">
<div id="filterIcon">
@@ -56,9 +60,10 @@
</mat-menu>
</div>
-<mat-card class="outer-card" *ngIf="comments.length > 0">
+<mat-card class="outer-card" *ngIf="showComments().length > 0">
<app-comment *ngFor="let current of showComments()" [comment]="current"></app-comment>
</mat-card>
-<div fxLayout="row" fxLayoutAlign="center center" class="no-comments">
- <h4 *ngIf="comments.length < 1">{{ 'comment-page.no-comments' | translate }}</h4>
+
+<div *ngIf="comments.length < 1" fxLayout="row" fxLayoutAlign="center center" class="no-comments">
+ <h4>{{ 'comment-page.no-comments' | translate }}</h4>
</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 ba0f6026d..60184789e 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -40,7 +40,7 @@ input {
height: 45px !important;
text-align: center;
min-width: 50px;
- margin: 10px 2% 0 0;
+ margin: 0 2% 0 0;
}
.close {
@@ -61,3 +61,7 @@ input {
h4 {
color: var(--text-1);
}
+
+.button-bar {
+ margin-right: 2%;
+}
--
GitLab