From f7580f073216376ee0596f7ed0bdb1d9af2d5317 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Thu, 9 May 2019 13:53:42 +0200
Subject: [PATCH] Fix comment-list styles
---
.../comment-list/comment-list.component.html | 31 +++++++-------
.../comment-list/comment-list.component.scss | 42 +++++++------------
2 files changed, 32 insertions(+), 41 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 8a2110887..ef28a4f1e 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -4,47 +4,50 @@
</mat-label>
<input #searchBox placeholder="{{ 'comment-list-page.search' | translate }}"
(input)="searchComments(searchBox.value)">
- <button mat-icon-button *ngIf="searchBox.value || isIconHide" (click)="hideCommentsList=false; searchBox.value=''; isIconHide=false">
+ <button mat-icon-button class="searchBarButton close" *ngIf="searchBox.value || isIconHide"
+ (click)="hideCommentsList=false; searchBox.value=''; isIconHide=false">
<mat-icon>close</mat-icon>
</button>
<span class="fill-remaining-space"></span>
- <button mat-icon-button *ngIf="!searchBox.value && userRole === 1 && comments.length > 0"
+ <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && userRole === 1 && comments.length > 0 && !isIconHide"
[matTooltip]="'Export comments'" (click)="export(true)">
- <mat-icon class="add-icon" id="export-icon">cloud_download</mat-icon>
+ <mat-icon class="searchBarIcon" color="accent">cloud_download</mat-icon>
</button>
- <button mat-icon-button *ngIf="!searchBox.value && !isIconHide" color="accent" (click)="openSubmitDialog()">
- <mat-icon class="add-icon">add_circle</mat-icon>
+ <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && !isIconHide"
+ color="accent" (click)="openSubmitDialog()">
+ <mat-icon class="searchBarIcon">add_circle</mat-icon>
</button>
- <mat-icon mat-icon-button *ngIf="!searchBox.value" class="filterIcon" color="accent" [matMenuTriggerFor]="filterMenu">
- sort
- </mat-icon>
+ <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && !isIconHide"
+ color="accent" [matMenuTriggerFor]="filterMenu">
+ <mat-icon class="searchBarIcon">sort</mat-icon>
+ </button>
<mat-menu #filterMenu="matMenu" xPosition="before">
<div id="filterIcon">
<button mat-icon-button (focus)="hideCommentsList=true" (click)="filterMarkAsCorrect(); isIconHide=true">
- <mat-icon>check_circle</mat-icon>
+ <mat-icon color="primary">check_circle</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=true" (click)="filterFavorite(); isIconHide=true">
- <mat-icon>star</mat-icon>
+ <mat-icon color="primary">star</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=true" (click)="filterMarkAsRead(); isIconHide=true">
- <mat-icon>visibility</mat-icon>
+ <mat-icon color="primary">visibility</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=false" (click)="sortVoteDesc()">
- <mat-icon>keyboard_arrow_up</mat-icon>
+ <mat-icon color="primary">keyboard_arrow_up</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=false" (click)="sortVote()">
- <mat-icon>keyboard_arrow_down</mat-icon>
+ <mat-icon color="primary">keyboard_arrow_down</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=false" (click)="sortTimeStamp()">
- <mat-icon>remove</mat-icon>
+ <mat-icon color="primary">remove</mat-icon>
</button>
</div>
</mat-menu>
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 d299e8117..17da83ef1 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -8,6 +8,11 @@ app-comment {
overflow-wrap: break-word;
}
+.mat-form-field {
+ float: left;
+ padding-left: 10px;
+}
+
input {
box-sizing: border-box;
padding: 0 10px 0 5px;
@@ -30,38 +35,21 @@ input {
padding: 10px;
}
-.add-button {
- width: 44px !important;
- height: 44px !important;
+.searchBarButton {
+ width: 45px !important;
+ height: 45px !important;
text-align: center;
-}
-
-.add-icon {
- font-size: 45px;
- height: 45px;
- width: 45px;
- line-height: 100% !important;
-}
-
-.mat-icon-button {
min-width: 50px;
- margin: 10px 2% 0px 0px;
+ margin: 10px 2% 0 0;
}
-#export-icon {
- color: rgba(30,136,229,0.7)
+.close {
+ margin: 5px 0 5px 0;
}
-.filterIcon {
+.searchBarIcon {
font-size: 45px;
- height: 50px;
- width: 50px;
- line-height: 100%!important;
- padding-right: 15px;
- padding-top: 8px;
-}
-
-.mat-form-field {
- float: left;
- padding-left: 10px;
+ height: 45px;
+ width: 45px;
+ line-height: 100% !important;
}
--
GitLab