[DSC-1864] fix missing dependency in chart, fix missing scss variables

Author: FrancescoMolinaro

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss

@@ -5,14 +5,14 @@
 
   .dropdown-menu {
     overflow: hidden;
+    background-color: var(--ds-expandable-navbar-bg);
+
     @include media-breakpoint-down(sm) {
       border: 0;
-      background-color: var(--ds-expandable-navbar-bg);
     }
     @include media-breakpoint-up(md) {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
-      background-color: var(--ds-navbar-dropdown-bg);
     }
   }
 

src/app/shared/explore/section-component/facet-section/facet-section.component.html

@@ -4,7 +4,7 @@ <h2>{{ 'explore.facet-section.title' | translate }}</h2>
     <div *ngFor="let facet of (facets$ | async)" [class]="getFacetsBoxCol(facet)" class="mb-4" data-test="facet-column">
       <h5>{{'explore.index.' + facet.name | translate}}</h5>
       <div *ngIf="facet.filterType.includes('chart'); else notChartFacet">
-        <ds-search-chart [filter]="facet" [inPlaceSearch]="false"> </ds-search-chart>
+        <ds-search-chart [scope]="''" [filter]="facet" [inPlaceSearch]="false"> </ds-search-chart>
       </div>
       <ng-template #notChartFacet>
         <div *ngFor="let facetValue of facet._embedded.values" class="border p-3">

src/app/shared/search/search-charts/search-chart/search-chart-wrapper/search-chart-wrapper.component.ts

@@ -4,7 +4,8 @@ import { GenericConstructor } from '../../../../../core/shared/generic-construct
 import {
   FILTER_CONFIG,
   IN_PLACE_SEARCH,
-  REFRESH_FILTER
+  REFRESH_FILTER,
+  SCOPE
 } from '../../../../../core/shared/search/search-filter.service';
 import { FilterType } from '../../../models/filter-type.model';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
@@ -37,6 +38,11 @@ export class SearchChartFilterWrapperComponent implements OnInit {
    */
   @Input() refreshFilters: BehaviorSubject<boolean>;
 
+  /**
+   * The scope of the search.
+   */
+  @Input() scope: string;
+
   /**
    * The constructor of the search facet filter that should be rendered, based on the filter config's type
    */
@@ -59,7 +65,8 @@ export class SearchChartFilterWrapperComponent implements OnInit {
       providers: [
         { provide: FILTER_CONFIG, useFactory: () => (this.filterConfig), deps: [] },
         { provide: IN_PLACE_SEARCH, useFactory: () => (this.inPlaceSearch), deps: [] },
-        { provide: REFRESH_FILTER, useFactory: () => (this.refreshFilters), deps: [] }
+        { provide: REFRESH_FILTER, useFactory: () => (this.refreshFilters), deps: [] },
+        { provide: SCOPE, useFactory: () => (this.scope), deps: [] }
       ],
       parent: this.injector
     });

src/app/shared/search/search-charts/search-chart/search-chart.component.html

@@ -1,6 +1,7 @@
 <div class="facet-filter mb-3 p-3">
   <ds-search-chart-wrapper [filterConfig]="filter"
                            [inPlaceSearch]="inPlaceSearch"
+                           [scope]="scope"
                            [refreshFilters]="refreshFilters"></ds-search-chart-wrapper>
   <p class="mt-3 mb-0" *ngIf="showCaption">{{caption}}</p>
 </div>

src/app/shared/search/search-charts/search-chart/search-chart.component.ts

@@ -36,6 +36,11 @@ export class SearchChartComponent implements OnInit {
    */
   @Input() refreshFilters: BehaviorSubject<boolean>;
 
+  /**
+   * The scope of the search
+   */
+  @Input() scope: string;
+
   /**
    * Emits all currently selected values for this filter
    */

src/app/shared/search/search-charts/search-charts.component.html

@@ -24,6 +24,7 @@ <h2 class="m-0 text-break">{{'search.filters.applied.charts.' + ((configuration
         <div *ngIf="(canShowChart(selectedFilter) | async)">
           <ds-search-chart [filter]="selectedFilter"
                            [inPlaceSearch]="inPlaceSearch"
+                           [scope]="scope"
                            [refreshFilters]="refreshFilters"></ds-search-chart>
         </div>
       </div>

src/app/shared/search/search-charts/search-charts.component.ts

@@ -54,6 +54,11 @@ export class SearchChartsComponent implements OnInit {
    */
   @Input() showChartsToggle = false;
 
+  /**
+   * The scope of the search
+   */
+  @Input() scope: string;
+
   /**
    * The selected chart to show
    */

src/app/shared/search/search.component.html

@@ -12,6 +12,7 @@
                   [filters]="chartFiltersRD$.asObservable()"
                   [inPlaceSearch]="inPlaceSearch"
                   [refreshFilters]="refreshFilters"
+                  [scope]="scope"
                   [showChartsToggle]="showChartsToggle"></ds-search-charts>
 
 <div *ngIf="!showSidebar && (initialized$ | async)">

src/styles/_bootstrap_variables.scss

@@ -12,6 +12,12 @@
 // All SASS variables that are declared must have the '!default' flag, otherwise it won't be possible
 // to override them in custom themes.
 
+/** Help Variables **/
+$fa-fixed-width: 1.25rem !default;
+$icon-padding: 1rem !default;
+$collapsed-sidebar-width: calculatePx($fa-fixed-width + (2 * $icon-padding)) !default;
+$sidebar-items-width: 250px !default;
+$total-sidebar-width: $collapsed-sidebar-width + $sidebar-items-width !default;
 
 /*** FONT FAMILIES AND FONT SIZES ***/
 
@@ -33,15 +39,31 @@ $enable-shadows: true !default;
 
 /*** SEMANTIC COLOR SCHEME ***/
 
+/* Colors */
+$gray-700: #495057 !default;  // Bootstrap $gray-700
+$gray-100: #f8f9fa !default;  //           $gray-100
+
 // Override semantic colors
-$primary:   #2b4e72 !default;               // Blue gray
-$secondary: #495057 !default;               // As Bootstrap $gray-700
+$blue:   #2B4E72 !default;
+$green:  #94BA65 !default;
+$cyan:   #006666 !default;
+$yellow: #ec9433 !default;
+$red:    #CF4444 !default;
+$dark:   darken($blue, 17%) !default;
 $success:   #94ba65 !default;               // Lime
-$info:      #006666 !default;               // Blue green
-$warning:   #ec9433 !default;               // Orange
-$danger:    #cf4444 !default;               // Red
-$light:     #f8f9fa !default;               // As Bootstrap $gray-100
-$dark:      darken(#2b4e72, 17%) !default;  // Blue gray (darker)
+
+
+
+$theme-colors: (
+  primary: $blue,
+  secondary: $gray-700,
+  success: $green,
+  info: $cyan,
+  warning: $yellow,
+  danger: $red,
+  light: $gray-100,
+  dark: $dark
+) !default;
 
 
 /*** OTHER BOOTSTRAP VARIABLES ***/
@@ -87,16 +109,19 @@ $ds-admin-sidebar-fixed-element-width: 55px !default;
 $ds-admin-sidebar-collapsible-element-width: 250px !default;
 $ds-admin-sidebar-total-width: $ds-admin-sidebar-fixed-element-width + $ds-admin-sidebar-collapsible-element-width; // do not change/override
 
-$ds-primary-bg: #{lighten($primary, 30%)} !default;
-$ds-secondary-bg: #{lighten($secondary, 30%)} !default;
-$ds-success-bg: #{lighten($success, 30%)} !default;
-$ds-info-bg: #{lighten($info, 30%)} !default;
-$ds-warning-bg: #{lighten($warning, 30%)} !default;
-$ds-danger-bg: #{lighten($danger, 30%)} !default;
+
+$primary-bg: #{lighten(map-get($theme-colors, primary), 30%)} !default;
+$secondary-bg: #{lighten(map-get($theme-colors, secondary), 30%)} !default;
+$success-bg: #{lighten(map-get($theme-colors, success), 30%)} !default;
+$info-bg: #{lighten(map-get($theme-colors, info), 30%)} !default;
+$warning-bg: #{lighten(map-get($theme-colors, warning), 30%)} !default;
+$danger-bg: #{lighten(map-get($theme-colors, danger), 30%)} !default;
 
 
 /*** MISC ***/
 
 // Starting this url with a caret (^) allows it to be a relative path based on UI's deployment path
 // See https://github.com/angular/angular-cli/issues/12797#issuecomment-598534241
 $fa-font-path: "^assets/fonts" !default;
+/* Images */
+$image-path: "../assets/images" !default;

src/styles/_custom_variables.scss

@@ -22,6 +22,8 @@
   --ds-sidebar-z-index: 20;
 
   --ds-header-bg: #{$white};
+  --ds-header-logo-height: 50px;
+  --ds-header-logo-height-xs: 50px;
   --ds-header-icon-color: #{$link-color};
   --ds-header-icon-color-hover: #{$link-hover-color};
   --ds-navbar-bg: var(--ds-header-bg);
@@ -62,6 +64,11 @@
   --ds-notification-bg-info: #{darken(adjust-hue($info, -10), 10%)};
   --ds-notification-bg-warning: #{darken(adjust-hue($warning, -10), 10%)};
 
+  --ds-fa-fixed-width: #{$fa-fixed-width};
+  --ds-icon-padding: #{$icon-padding};
+  --ds-collapsed-sidebar-width: #{$collapsed-sidebar-width};
+  --ds-sidebar-items-width: #{$sidebar-items-width};
+  --ds-total-sidebar-width: #{$total-sidebar-width};
 
   --ds-top-footer-bg: #{$gray-200};
   --ds-footer-bg: #{theme-color('primary')};
@@ -165,17 +172,21 @@
   --ds-admin-sidebar-link-hover-color: #{$navbar-dark-hover-color};
   --ds-admin-sidebar-item-padding: 1rem;
   --ds-admin-sidebar-section-indent: .75rem;
+  --ds-admin-sidebar-logo-height: 20px;
+  --ds-admin-sidebar-fixed-element-width: #{$ds-admin-sidebar-fixed-element-width};
+  --ds-admin-sidebar-fixed-element-z-index: 10;
+
 
   --ds-dark-scrollbar-width: 8px;
 
   --ds-slider-handle-color: #{darken($blue, 17%)};
 
-  --ds-primary-bg: #{$ds-primary-bg};
-  --ds-secondary-bg: #{$ds-secondary-bg};
-  --ds-success-bg: #{$ds-success-bg};
-  --ds-info-bg: #{$ds-info-bg};
-  --ds-warning-bg: #{$ds-warning-bg};
-  --ds-danger-bg: #{$ds-danger-bg};
+  --ds-primary-bg: #{$primary-bg};
+  --ds-secondary-bg: #{$secondary-bg};
+  --ds-success-bg: #{$success-bg};
+  --ds-info-bg: #{$info-bg};
+  --ds-warning-bg: #{$warning-bg};
+  --ds-danger-bg: #{$danger-bg};
 
   --green1: #1FB300;  // This variable represents the success color for the Klaro cookie banner
   --button-text-color-cookie: #333; // This variable represents the text color for buttons in the Klaro cookie banner