From f43b27f099e23ddbc81e5ba272e224b6aac621ad Mon Sep 17 00:00:00 2001
From: "ext.sopra.ncastejon" <castejon.nicolas@gmail.com>
Date: Mon, 10 Feb 2020 15:46:34 +0100
Subject: [PATCH] In filter details, replace fontawesome chevron with custom
SVG
---
.../resource-queryable.component.html | 33 ++++++++++++++-----
.../resource-queryable.component.scss | 14 +++-----
.../filter-detail.component.html | 11 +++++--
.../filter-detail.component.scss | 13 ++++++--
4 files changed, 49 insertions(+), 22 deletions(-)
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
index 2f88a8d6..2b9b422f 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
@@ -53,9 +53,14 @@
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>{{ selectedFormat.name }}</span>
- <span class="icon is-small">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ </svg>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
@@ -86,9 +91,14 @@
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>{{ getProjectionLabel(selectedProjection.name) }}</span>
- <span class="icon is-small">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ </svg>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
@@ -117,9 +127,14 @@
<span
*ngIf="selectedInsee">{{ selectedInsee ? selectedInsee.commune + ' - ' + selectedInsee.insee : ''}}</span>
<span *ngIf="!selectedInsee" i18n="@@dataset.resources.commune">Municipality</span>
- <span class="icon is-small">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ </svg>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
index 78782178..8bbedd26 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
@@ -150,15 +150,6 @@
word-break: break-all;
}
-.create-request-icon {
- svg {
- margin-right: 1.2rem;
- width: 16px;
- fill: grey;
- transform: rotate(-90deg);
- }
-}
-
.resource-download-icon {
padding: 0.5rem 0.4rem;
border: 1px solid $grey-super-light-color;
@@ -268,6 +259,11 @@ h3 {
/* stylelint-disable-next-line */
.dropdown-trigger .button {
justify-content: space-between;
+
+ svg {
+ width: 1rem;
+ height: 0.6rem;
+ }
}
.resource-title {
diff --git a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
index 9650d321..486df2fd 100644
--- a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
+++ b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
@@ -31,8 +31,15 @@
*ngIf="aggregation.subAggregations.length > 1 && aggregation.key !== 'ATMO Auvergne-Rhône-Alpes'">
<span class="icon is-small icon-toggle-sub"
(click)="subAreOpen[aggregation.key] = !subAreOpen[aggregation.key]">
- <i class="fas fa-angle-right" aria-hidden="true" *ngIf="!subAreOpen[aggregation.key]"></i>
- <i class="fas fa-angle-down" aria-hidden="true" *ngIf="subAreOpen[aggregation.key]"></i>
+ <svg [ngClass]="{'is-active': subAreOpen[aggregation.key]}" xmlns=" http://www.w3.org/2000/svg" id="chevron"
+ viewBox="0 0 15 9">
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ </svg>
</span>
<div class="field">
<input type="checkbox" (click)="changeFilter(aggregation)"
diff --git a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
index fb15b48b..51385c8d 100644
--- a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
+++ b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
@@ -82,10 +82,19 @@ aside.is-active {
display: inline-block;
}
+
.icon-toggle-sub {
cursor: pointer;
- padding-right: 0.5rem;
- padding-left: 0.5rem;
+
+ svg {
+ width: 0.8rem;
+ height: 0.6rem;
+ transform: rotate(-90deg);
+ }
+
+ svg.is-active {
+ transform: rotate(0deg);
+ }
}
.no-sub {
--
GitLab