From 05369b0ae78fe27c4dafcce890697128ee7a8c91 Mon Sep 17 00:00:00 2001
From: "hamza.hramchi" <hamza.hramchi@xelians.fr>
Date: Thu, 7 Jan 2021 11:03:27 +0100
Subject: [PATCH] FEAT #10994 TIME 0:20 modify the icons + put the background
of the filters in white in the history
---
.../history/history-list.component.html | 27 +++++++++----------
.../history/history-list.component.scss | 4 +++
src/frontend/app/search/search.component.html | 13 ++++-----
3 files changed, 24 insertions(+), 20 deletions(-)
diff --git a/src/frontend/app/administration/history/history-list.component.html b/src/frontend/app/administration/history/history-list.component.html
index 94fcff8b7b..e040703e7f 100644
--- a/src/frontend/app/administration/history/history-list.component.html
+++ b/src/frontend/app/administration/history/history-list.component.html
@@ -11,30 +11,29 @@
</ion-menu-button>
</ion-buttons>
</ion-toolbar>
- <ion-toolbar color="primary">
- <ion-title slot="end" *ngIf="getNbFilters() >= 0">{{getNbFilters()}} {{'lang.currentFilters' | translate}}</ion-title>
- <div class="scrollfilters" slot="start">
- <ion-button *ngIf="getNbFilters() > 0" class="clearFilter"
- shape="round" size="small" slot="start" color="primary" (click)="clearFilters()" [title]="'lang.clearFilters' | translate">
- <ion-icon slot="icon-only" name="backspace" color="light"></ion-icon>
+ <ion-toolbar color="primary" *ngIf="getNbFilters() > 0" color="primary" style="padding-left: 1px;padding-right: 1px;">
+ <ion-button class="clearFilter" shape="round" size="small" fill="clear" slot="start" color="primary"
+ (click)="clearFilters()" [title]="'lang.clearFilters' | translate">
+ <ion-icon slot="icon-only" name="trash-bin-outline" color="light"></ion-icon>
</ion-button>
- <ion-chip *ngFor="let filter of this.filters.messageTypes" [title]="'lang.actions' | translate" color="light" (click)="removeFilter(filter)">
- <ion-icon name="options-outline"></ion-icon>
+ <div class="scrollfilters" slot="start">
+ <ion-chip outline *ngFor="let filter of this.filters.messageTypes" [title]="'lang.actions' | translate" color="primary" (click)="removeFilter(filter)">
+ <ion-icon name="swap-horizontal-outline"></ion-icon>
<ion-label>{{ 'lang.' + filter | translate }}</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
- <ion-chip *ngIf="filters.user !== ''" [title]="'lang.userName' | translate" color="light" (click)="removeFilter(this.filters.user)">
- <ion-icon name="person-circle"></ion-icon>
+ <ion-chip outline *ngIf="filters.user !== ''" [title]="'lang.userName' | translate" color="primary" (click)="removeFilter(this.filters.user)">
+ <ion-icon name="person-outline"></ion-icon>
<ion-label >{{ this.filters.user}}</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
- <ion-chip *ngIf="filters.date.start !== null" [title]="'lang.since' | translate" color="light" (click)="removeFilter(this.filters.date.start)">
- <ion-icon name="calendar"></ion-icon>
+ <ion-chip outline *ngIf="filters.date.start !== null" [title]="'lang.since' | translate" color="primary" (click)="removeFilter(this.filters.date.start)">
+ <ion-icon name="today-outline"></ion-icon>
<ion-label >{{ this.filters.date.start | date:'dd/MM/yyyy'}}</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
- <ion-chip *ngIf="filters.date.end !== null" [title]="'lang.until' | translate" color="light" (click)="removeFilter(this.filters.date.end)">
- <ion-icon name="calendar"></ion-icon>
+ <ion-chip outline *ngIf="filters.date.end !== null" [title]="'lang.until' | translate" color="primary" (click)="removeFilter(this.filters.date.end)">
+ <ion-icon name="calendar-outline"></ion-icon>
<ion-label >{{ this.filters.date.end | date:'dd/MM/yyyy'}}</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
diff --git a/src/frontend/app/administration/history/history-list.component.scss b/src/frontend/app/administration/history/history-list.component.scss
index 53ecf15648..5ce3005b48 100644
--- a/src/frontend/app/administration/history/history-list.component.scss
+++ b/src/frontend/app/administration/history/history-list.component.scss
@@ -41,4 +41,8 @@ ion-button.clearFilter {
position: sticky;
left: 0;
z-index: 1;
+}
+
+ion-chip {
+ background-color: white;
}
\ No newline at end of file
diff --git a/src/frontend/app/search/search.component.html b/src/frontend/app/search/search.component.html
index d23c2d88ed..5a4421769d 100644
--- a/src/frontend/app/search/search.component.html
+++ b/src/frontend/app/search/search.component.html
@@ -20,16 +20,16 @@
<div class="scrollfilters" slot="start">
<div *ngFor="let currentFilter of currentFilters">
<ion-chip outline *ngIf="currentFilter.id === 'title' && currentFilter.val !== ''" color="primary"
- style="background: white;" [title]="'lang.titleSearch' | translate"
+ style="background: white;" [title]="'lang.' + currentFilter.id + 'Search' | translate"
(click)="removeFilter(currentFilter)">
- <ion-icon name="document-text"></ion-icon>
+ <ion-icon name="document-text-outline"></ion-icon>
<ion-label>{{ currentFilter.val }}</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
<ion-chip outline *ngIf="currentFilter.id === 'reference' && currentFilter.val !== ''"
- color="primary" style="background: white;" [title]="'lang.titleSearch' | translate"
+ color="primary" style="background: white;" [title]="'lang.' + currentFilter.id + 'Search' | translate"
(click)="removeFilter(currentFilter)">
- <ion-icon name="key"></ion-icon>
+ <ion-icon name="compass-outline"></ion-icon>
<ion-label>{{ currentFilter.val }}</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
@@ -37,16 +37,17 @@
<ion-chip outline *ngFor="let item of currentFilter.val" color="primary"
style="background: white;" [title]="'lang.workflowStatesSearch' | translate"
(click)="removeFilter(currentFilter, item.id)">
- <ion-icon name="options-outline"></ion-icon>
+ <ion-icon name="swap-horizontal-outline"></ion-icon>
<ion-label>{{ item.label | translate}}</ion-label>
<ion-icon name="close-circle"></ion-icon>
+
</ion-chip>
</div>
<div *ngIf="currentFilter.id === 'workflowUsers' && currentFilter.val.length > 0">
<ion-chip outline *ngFor="let item of currentFilter.val" color="primary"
style="background: white;" [title]="'lang.workflowUsersSearch' | translate"
(click)="removeFilter(currentFilter, item)">
- <ion-icon name="person-circle"></ion-icon>
+ <ion-icon name="person-outline"></ion-icon>
<ion-label>{{ item.firstname}} {{ item.lastname }}</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
--
GitLab