From edf6f739e5b6e4c783e5bfaf92f41466a8714917 Mon Sep 17 00:00:00 2001
From: mohammad <mohammad.alayoub@mni.thm.de>
Date: Tue, 18 May 2021 19:42:14 +0200
Subject: [PATCH] added animation to sort icon and removed some unused
variables
---
.../topic-cloud-administration.component.html | 14 +++++++-------
.../topic-cloud-administration.component.scss | 18 ++++++++++--------
.../topic-cloud-administration.component.ts | 2 --
.../services/util/topic-cloud-admin.service.ts | 1 -
4 files changed, 17 insertions(+), 18 deletions(-)
diff --git a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html
index f51d41b2e..0b6dbf9e9 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html
+++ b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html
@@ -81,24 +81,24 @@
</mat-form-field>
</div>
- <div fxLayoutAlign="center center" style="margin-left: 52%;" >
- <p [ngClass]="{'resCount': searchMode}">{{searchMode ? filteredKeywords.length : keywords.length}}</p>
+ <div fxLayoutAlign="center center" style="margin-left: 52%; font-weight: bold;" >
+ <p [ngClass]="{'animation-blink': searchMode}">{{searchMode ? filteredKeywords.length : keywords.length}}</p>
</div>
<div fxLayoutAlign="end" *ngIf="!searchMode">
- <button mat-button [matMenuTriggerFor]="sortMenu" mat-ripple>
+ <button [ngClass]="{'animation-blink': sortMode!=='alphabetic'}" mat-button [matMenuTriggerFor]="sortMenu" mat-ripple>
<mat-icon>sort</mat-icon>
</button>
</div>
</div>
<mat-menu #sortMenu>
- <button mat-menu-item (click)="sortQuestions('alphabetic')">
+ <button [ngClass]="{'animation-blink': sortMode==='alphabetic'}" mat-menu-item (click)="sortQuestions('alphabetic')">
<mat-icon>sort_by_alpha</mat-icon>
{{'topic-cloud-dialog.sort-alpha' | translate}} </button>
- <button mat-menu-item (click)="sortQuestions('questionsCount')">
+ <button [ngClass]="{'animation-blink': sortMode==='questionsCount'}" mat-menu-item (click)="sortQuestions('questionsCount')">
<mat-icon>swap_vert</mat-icon>
{{'topic-cloud-dialog.sort-count' | translate}} </button>
- <button mat-menu-item (click)="sortQuestions('voteCount')">
+ <button [ngClass]="{'animation-blink': sortMode==='voteCount'}" mat-menu-item (click)="sortQuestions('voteCount')">
<mat-icon>swap_vert</mat-icon>
{{'topic-cloud-dialog.sort-vote' | translate}} </button>
</mat-menu>
@@ -119,7 +119,7 @@
*ngFor="let keyword of
(searchMode ? filteredKeywords : keywords); let i = index" [attr.data-index]="i">
<mat-expansion-panel-header class="color-surface">
- <mat-panel-title [ngClass]="{'edit-keyword': editedKeyword}">
+ <mat-panel-title>
{{profanityFilter ? getKeywordWithoutProfanity(keyword.keyword) : keyword.keyword}}
</mat-panel-title>
<mat-panel-description>
diff --git a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
index 13ce3fe5c..e6d6ca231 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
+++ b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
@@ -46,15 +46,17 @@ mat-icon {
}
.search{
- width: 240%;
- color: var(--red) !important;
+ box-sizing: border-box;
+ padding: 0 10px 0 5px;
+ border: none;
+ outline: none;
+ min-height: 60px;
+ font-size: large;
+ border-radius: 5px;
+ color: var(--on-surface);
+ transition: width 300ms linear;
}
-.resCount{
- color: var(--red) !important;
- font-weight: bold;
-
-}
#send_to_spacy{
color: khaki;
background-color: blueviolet;
@@ -81,7 +83,7 @@ mat-panel-title, mat-panel-description {
}
}
-.edit-keyword .mat-panel-title {
+.animation-blink{
color: var(--red) !important;
animation-name: animation_blink_5s;
animation-timing-function: ease-in;
diff --git a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts
index 89c6dd912..bc4bd36ba 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts
+++ b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts
@@ -27,7 +27,6 @@ export class TopicCloudAdministrationComponent implements OnInit {
newBadWord: string = undefined;
sortMode = 'alphabetic';
- editedKeyword = false;
searchedKeyword = undefined;
searchMode = false;
filteredKeywords: Keyword[] = [];
@@ -189,7 +188,6 @@ export class TopicCloudAdministrationComponent implements OnInit {
}
});
this.edit = false;
- this.editedKeyword = true;
this.newKeyword = undefined;
this.sortQuestions();
if (this.searchMode){
diff --git a/src/app/services/util/topic-cloud-admin.service.ts b/src/app/services/util/topic-cloud-admin.service.ts
index 1289bc992..c2a861cc5 100644
--- a/src/app/services/util/topic-cloud-admin.service.ts
+++ b/src/app/services/util/topic-cloud-admin.service.ts
@@ -20,7 +20,6 @@ export class TopicCloudAdminService {
filterProfanityWords(str: string): string {
let questionWithProfanity = str;
- const questionLowerCase = questionWithProfanity.toLowerCase();
// German Profanity
this.badWords['de'].map(word =>{
--
GitLab