Made collection color scheme configurable

chuanlin2018 · Mar 29, 2024 · e3f354a · e3f354a
1 parent ffe6e35
commit e3f354a
Show file tree

Hide file tree

Showing 17 changed files with 205 additions and 306 deletions.
diff --git a/angular/src/app/landing/filters/filters.component.spec.ts b/angular/src/app/landing/filters/filters.component.spec.ts
@@ -13,6 +13,7 @@ import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import { testdata } from '../../../environments/environment';
 import { TaxonomyModule } from '../taxonomy/taxonomy.module';
 import { TaxonomyComponent } from '../taxonomy/taxonomy.component';
+import { CollectionService } from '../../shared/collection-service/collection.service';
 
 describe('FiltersComponent', () => {
     let component: FiltersComponent;
@@ -35,6 +36,7 @@ describe('FiltersComponent', () => {
                 TaxonomyModule],
             providers: [
                 SearchService,
+                CollectionService,
                 { provide: AppConfig,       useValue: cfg }
             ]
         })

diff --git a/angular/src/app/landing/filters/filters.component.ts b/angular/src/app/landing/filters/filters.component.ts
@@ -11,6 +11,7 @@ import { NerdmRes, NERDResource } from '../../nerdm/nerdm';
 import { AppConfig } from '../../config/config';
 import { Themes, ThemesPrefs, Collections, Collection, ColorScheme, CollectionThemes } from '../../shared/globals/globals';
 import * as CollectionData from '../../../assets/site-constants/collections.json';
+import { CollectionService } from '../../shared/collection-service/collection.service';
 
 const SEARCH_SERVICE = 'SEARCH_SERVICE';
 
@@ -70,9 +71,6 @@ export class FiltersComponent implements OnInit {
     showMoreLink: boolean = true;
     standardNISTTaxonomyURI: string = "https://data.nist.gov/od/dm/nist-themes/";
 
-    nistObj: Collection;
-    collectionObj: Collection;
-
     filterStrings = {};
 
 //  Object that hold all themes: Forensics, NIST, ...
@@ -150,6 +148,7 @@ export class FiltersComponent implements OnInit {
         public taxonomyListService: TaxonomyListService,
         public searchFieldsListService: SearchfieldsListService,
         public searchService: SearchService,
+        public collectionService: CollectionService,
         private cfg: AppConfig
     ) { 
         // this.standardNISTTaxonomyURI = this.cfg.get("standardNISTTaxonomyURI", "https://data.nist.gov/od/dm/nist-themes/");
@@ -159,22 +158,18 @@ export class FiltersComponent implements OnInit {
         this.msgs = [];
         this.searchResultsError = [];
         this.MoreOptionsDisplayed = (this.theme == 'ScienceTheme');
-
         this.setFilterWidth();
-
-        // Load collection data from config file
-        this.nistObj = Object.assign(new Collection(), CollectionData[Collections.DEFAULT.toLowerCase()]);  
-        this.collectionObj = Object.assign(new Collection(), CollectionData[this.collection.toLowerCase()]);  
+
+        this.allCollections = this.collectionService.loadCollections(this.collection.toLowerCase());
 
         // Set colors
         this.setColor();
-
-        this.standardNISTTaxonomyURI = this.nistObj.taxonomyURI;
+        this.standardNISTTaxonomyURI = this.allCollections.nist.taxonomyURI;
     }
 
     setColor() {
-        this.defaultColor = this.collectionObj.color.default;
-        this.lighterColor = this.collectionObj.color.lighter;
+        this.defaultColor = this.allCollections[this.collection.toLowerCase()].color.default;
+        this.lighterColor = this.allCollections[this.collection.toLowerCase()].color.lighter;
         this.collapedFilerColor = "linear-gradient(" +  this.defaultColor + ", white)";
     }
 

diff --git a/angular/src/app/landing/landingpage.component.html b/angular/src/app/landing/landingpage.component.html
@@ -23,13 +23,24 @@
             <!-- div to keep track of the menu button position -->
             <div #stickyButton></div>
 
-            <button #menubtn *ngIf="md !== null && inBrowser && mobileMode" type="button" pButton icon="faa faa-list"
+            <!-- <button #menubtn *ngIf="md !== null && inBrowser && mobileMode" type="button" pButton icon="faa faa-list"
                 class="ui-button ui-button-icon-only sticky-menu"
                 (click)="menu3.togglePopup($event)">
+            </button> -->
+
+            <button #menubtn *ngIf="md !== null && inBrowser && mobileMode"
+                [ngClass]="windowScrolled ? 'sticky-button' : 'rightmenu-button'" type="button" pButton
+                icon="faa faa-list" class="ui-button ui-button-icon-only" (click)="menu3.togglePopup($event)">
             </button>
 
-            <tools-menu #menu3 [record]="md" [isPopup]="true" [appendTo]="menubtn" [theme]="theme"
-                (toggle_citation)="toggleCitation('small')" (scroll)="goToSection($event)">
+            <tools-menu #menu3 
+                [record]="md" 
+                [isPopup]="true" 
+                [collection]="collection" 
+                [appendTo]="menubtn" 
+                [theme]="theme"
+                (toggle_citation)="toggleCitation('small')" 
+                (scroll)="goToSection($event)">
             </tools-menu>
         </div>
         <div #stickyMenu></div>

diff --git a/angular/src/app/landing/landingpage.module.ts b/angular/src/app/landing/landingpage.module.ts
@@ -23,6 +23,7 @@ import { MetricsinfoComponent } from './metricsinfo/metricsinfo.component';
 // import { ForensicslandingbodyModule } from './forensicslandingbody/forensicslandingbody.module';
 // import { ForensicssearchresultModule } from './forensicssearchresult/forensicssearchresult.module';
 import { SearchresultModule } from './searchresult/searchresult.module';
+import { CollectionService } from '../shared/collection-service/collection.service'
 
 /**
  * A module supporting the complete display of landing page content associated with 
@@ -45,7 +46,7 @@ import { SearchresultModule } from './searchresult/searchresult.module';
         ErrorComponent, UserErrorComponent, NoidComponent, NerdmComponent, MetricsinfoComponent
     ],
     providers: [
-        MetadataUpdateService, TaxonomyListService, DatePipe
+        MetadataUpdateService, TaxonomyListService, DatePipe, CollectionService
     ],
     exports: [
         LandingPageComponent, LandingBodyComponent, DoneComponent, DownloadstatusComponent,

diff --git a/angular/src/app/landing/resultlist/resultlist.component.css b/angular/src/app/landing/resultlist/resultlist.component.css
@@ -19,7 +19,7 @@
     font-size: 13px;
     width: 120px;
     background-color: var(--nist-green-default);
-    height: 35px;
+    height: 30px !important;
     color: white;
     float: right;
 }
@@ -28,19 +28,6 @@
     background-color: var(--nist-green-light);
 }
 
-.visit-home-page-forensics {
-    font-size: 13px;
-    width: 120px;
-    background-color: var(--forensics-background-blue);
-    height: 30px !important;
-    color: white;
-    float: right;
-}
-
-.visit-home-page-forensics:hover {
-    background-color: var(--forensics-background-dark-hover);
-}
-
 .search-button {
     background-color: var(--forensics-background-blue);
 }

diff --git a/angular/src/app/landing/resultlist/resultlist.component.html b/angular/src/app/landing/resultlist/resultlist.component.html
@@ -45,14 +45,20 @@
             style="border-bottom: 1px solid rgb(202, 202, 202);margin-bottom: 1em; ">
             <a *ngIf="resultItem.landingPage" style="float: right; margin-top: -0.5em;"
                 href="{{resultItem.landingPage}}" target="_blank" rel="noopener">
-                <button pButton label="Home Page" type="button" class="p-button-sm visit-home-page-forensics"
+                <button pButton label="Home Page" type="button" class="p-button-sm visit-home-page" 
+                [style.--background-default]="defaultColor"
+                [style.--background-lighter]="lighterColor"
+                [style.--background-hover]="lightColor"
                     icon="faa faa-external-link" iconPos="left" style="padding: 3px 10px;"></button>
             </a>
 
             <a *ngIf="!resultItem.landingPage" style="float: right; margin-top: -0.5em;"
                 href="{{PDRAPIURL}}{{resultItem.ediid}}" target="_blank"
                 (click)="gaService.gaTrackEvent('outbound', $event, 'Visit to homepage',resultItem.landingPage)">
-                <button pButton label="Home Page" type="button" class="p-button-sm visit-home-page-forensics"
+                <button pButton label="Home Page" type="button" class="p-button-sm visit-home-page" 
+                [style.--background-default]="defaultColor"
+                [style.--background-lighter]="lighterColor"
+                [style.--background-hover]="lightColor"
                     icon="faa faa-external-link" iconPos="left" style="padding: 3px 10px;"></button>
             </a>
 

diff --git a/angular/src/app/landing/resultlist/resultlist.component.spec.ts b/angular/src/app/landing/resultlist/resultlist.component.spec.ts
@@ -11,6 +11,7 @@ import { FormsModule } from '@angular/forms';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { testdata } from '../../../environments/environment';
 import { GoogleAnalyticsService } from '../../shared/ga-service/google-analytics.service';
+import { CollectionService } from '../../shared/collection-service/collection.service';
 
 describe('ResultlistComponent', () => {
   let component: ResultlistComponent;
@@ -32,6 +33,7 @@ describe('ResultlistComponent', () => {
         providers: [
             SearchService,
             GoogleAnalyticsService,
+            CollectionService,
             { provide: AppConfig,       useValue: cfg }
         ]
     })

diff --git a/angular/src/app/landing/resultlist/resultlist.component.ts b/angular/src/app/landing/resultlist/resultlist.component.ts
@@ -8,8 +8,9 @@ import { ThisReceiver } from '@angular/compiler';
 import * as e from 'express';
 import { connectableObservableDescriptor } from 'rxjs/internal/observable/ConnectableObservable';
 import { GoogleAnalyticsService } from '../../shared/ga-service/google-analytics.service';
-import * as ColorTheme from '../../../assets/site-constants/color-theme.json';
-import { Collections } from '../../shared/globals/globals';
+import { Themes, ThemesPrefs, Collections, Collection, ColorScheme, CollectionThemes } from '../../shared/globals/globals';
+import * as CollectionData from '../../../assets/site-constants/collections.json';
+import { CollectionService } from '../../shared/collection-service/collection.service';
 
 @Component({
   selector: 'app-resultlist',
@@ -62,6 +63,8 @@ export class ResultlistComponent implements OnInit {
     pages = [{name:'Page 1', value:1},{name:'Page 2', value:2}];
     currentPage: any = {name:'Page 1', value:1};
 
+    allCollections: any = {};
+
     //  Color
     defaultColor: string;
     lightColor: string;  
@@ -77,6 +80,7 @@ export class ResultlistComponent implements OnInit {
 
     constructor(private searchService: SearchService, 
         private cfg: AppConfig,
+        public collectionService: CollectionService,
         public gaService: GoogleAnalyticsService) { }
 
     ngOnInit(): void {
@@ -97,27 +101,20 @@ export class ResultlistComponent implements OnInit {
             );
         }
 
-        this.setColor(this.collection);
+        this.allCollections = this.collectionService.loadCollections(this.collection.toLowerCase());
+
+        // Set colors
+        this.setColor();
     }
 
     onPageChange(value: any){
         console.log("this.currentPage", value.target.value);
     }
 
-    setColor(collection: string) {
-        let _collection;
-        if(!collection) _collection = "default";
-        else _collection = collection.toLowerCase();
-
-        if(ColorTheme[_collection]) {
-            this.defaultColor = ColorTheme[_collection].default;
-            this.lightColor = ColorTheme[_collection].light;
-            this.lighterColor = ColorTheme[_collection].lighter;
-        }else{
-            this.defaultColor = ColorTheme["default"].default;
-            this.lightColor = ColorTheme["default"].light;
-            this.lighterColor = ColorTheme["default"].lighter;
-        }
+    setColor() {
+        this.defaultColor = this.allCollections[this.collection.toLowerCase()].color.default;
+        this.lighterColor = this.allCollections[this.collection.toLowerCase()].color.lighter;
+        this.lightColor = this.allCollections[this.collection.toLowerCase()].color.light;
     }
 
     ngOnChanges(changes: SimpleChanges): void {