Merge branch '85-tooltip-bug-css' into 'develop'

Resolve "Tooltip bug + css"

Closes #85

See merge request !96

src/app/search/components/output/output-tabs.component.ts

@@ -27,5 +27,4 @@ export class OutputTabsComponent {
 
     constructor(private toastr: ToastrService) { }
 
-
 }

src/app/search/components/summary.component.html

@@ -5,7 +5,7 @@
     </p>
     <p *ngIf="datasetName && datasetList.length > 0" class="pl-5">{{ getDataset().label }}</p>
     <hr>
-    <p class="text-center font-italic" [tooltip]="summaryCriteria">
+    <p class="text-center font-italic" [tooltip]="summaryCriteria" containerClass="custom-tooltip">
         Criteria <span class="far fa-question-circle fa-xs"></span>
     </p>
     <p *ngIf="criteriaList.length < 1" class="pl-5 font-weight-bold">
@@ -17,7 +17,7 @@
         </li>
     </ul>
     <hr>
-    <p class="text-center font-italic" [tooltip]="summaryOutputs">
+    <p class="text-center font-italic" [tooltip]="summaryOutputs" containerClass="custom-tooltip">
         Output <span class="far fa-question-circle fa-xs"></span>
     </p>
     <p *ngIf="outputList.length < 1" class="pl-5 text-danger font-weight-bold">
@@ -32,7 +32,7 @@
 
 <ng-template #summaryCriteria>
     <strong>Criteria family list:</strong>
-    <ul class="list-unstyled">
+    <ul class="list-unstyled text-left">
         <li *ngFor="let family of criteriaFamilyList">
             {{ family.label }}
         </li>
@@ -40,11 +40,11 @@
 </ng-template>
 <ng-template #summaryOutputs>
     <strong>Outputs family and category list:</strong>
-    <ul class="p-0 ml-n5">
+    <ul class="p-0 ml-3 text-left">
         <li *ngFor="let family of outputFamilyList">
             {{ family.label }}
-            <ul>
-                <li *ngFor="let category of categoryList">
+            <ul class="pl-3">
+                <li *ngFor="let category of getCategoryByFamilySortedByDisplay(family.id)">
                     {{ category.label }}
                 </li>
             </ul>

src/app/search/components/summary.component.spec.ts

@@ -3,8 +3,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 import { SummaryComponent } from './summary.component';
-import { ATTRIBUTE_LIST, CRITERIA_LIST, DATASET_LIST } from '../../../settings/test-data';
+import { ATTRIBUTE_LIST, CRITERIA_LIST, DATASET_LIST, CATEGORY_LIST } from '../../../settings/test-data';
 import { Criterion } from '../store/model';
+import { Category } from '../../metamodel/model';
 
 describe('[Search] Component: SummaryComponent', () => {
     let component: SummaryComponent;
@@ -38,5 +39,13 @@ describe('[Search] Component: SummaryComponent', () => {
         const criterion: Criterion = CRITERIA_LIST.find(c => c.id === 1);
         expect(component.printCriterion(criterion)).toBe('= fd_crit_1');
     });
+
+    it('#getCategoryByFamilySortedByDisplay(idFamily) should sort by display categories belonging to idFamily', () => {
+        component.categoryList = CATEGORY_LIST;
+        const sortedCategoryList: Category[] = component.getCategoryByFamilySortedByDisplay(1);
+        expect(sortedCategoryList.length).toBe(2);
+        expect(sortedCategoryList[0].id).toBe(2);
+        expect(sortedCategoryList[1].id).toBe(1);
+    });
 });
 

src/app/search/components/summary.component.ts

@@ -8,7 +8,7 @@ import { printCriterion as print } from '../../shared/utils'
     selector: 'app-summary',
     templateUrl: 'summary.component.html',
     styleUrls: ['summary.component.css'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SummaryComponent {
     @Input() datasetName: string;
@@ -33,4 +33,10 @@ export class SummaryComponent {
     printCriterion(criterion: Criterion) {
         return print(criterion);
     }
+
+    getCategoryByFamilySortedByDisplay(idFamily: number): Category[] {
+        return this.categoryList
+            .filter(category => category.id_output_family === idFamily)
+            .sort((a, b) => a.display - b.display);
+    }
 }

src/styles.css

@@ -6,16 +6,20 @@
 
 /* Custom styles for external library components */
 /* Needs to be in global stylesheet due to ViewEncapsulation */
+
+/* accordion */
 .custom-accordion-output .panel-body {
     padding-top: 0;
     padding-bottom: 0;
 }
 
+/* modal */
 .modal-fit-content {
     width: fit-content;
     max-width: 95%;
 }
 
+/* ng select */
 .ng-select.ng-select-custom .ng-select-container  {
     height: calc(1.5em + .75rem + 2px);
 }
@@ -43,4 +47,21 @@
 
 .ng-select.ng-select-time .ng-select-container  {
     width: 80px;
+}
+
+/* tooltip */
+
+.tooltip.custom-tooltip.fade {
+    transition: opacity 1s;
+}
+
+.tooltip.custom-tooltip .tooltip-inner {
+    color: #000;
+    background-color: #E9ECEF;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
+
+.tooltip.custom-tooltip .tooltip-arrow,
+.tooltip.custom-tooltip .arrow:before {
+    border-top-color: #E9ECEF;
 }
\ No newline at end of file