Merge branch '397-new-downloads-api' into development

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">

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 {
@@ -335,7 +331,8 @@ h3 {
   .dropdown-trigger button,
   .dropdown-menu,
   .dropdown-content {
-    width: unset;
+    // width: unset;
+    max-width: 350px;
   }
 }
 

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)"

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 {