Changed topics layout; Show more/less button; etc.

angular/src/app/_helpers/fakeBackendInterceptor.ts

@@ -150,7 +150,7 @@ export class FakeBackendInterceptor implements HttpInterceptor {
           return of(new HttpResponse({ status: 200, body }));
       }
 
-      if (request.url.indexOf('test3') > -1 && request.method === 'GET') {
+      if (request.url.indexOf('od/id/test3') > -1 && request.method === 'GET') {
         console.log("Getting collectionTestData.....")
         return of(new HttpResponse({ status: 200, body: sampleCollection2 }));
     }

angular/src/app/landing/description/description.component.html

@@ -1,7 +1,7 @@
 <!-- Description header 
   -  Red * only display in edit mode indicating this is a required field
   -->
-<div style="display: inline-block; width: fit-content; max-width: 95%;">
+<div style="display: inline-block; width: fit-content; ">
     <div style="display: table; margin-bottom: 1em;">
         <div class="editable_container">
             <div class="editable_field" style="width:100%;"

angular/src/app/landing/keyword/keyword.component.html

@@ -10,7 +10,7 @@
 
             <span class="editable_field ind" style="max-width: 90%;">
                 <span style="white-space: nowrap;"><strong>Keywords: </strong></span>
-                <span class="keywords" [style.background-color]="bubbleColor(keyword)" style="border: 1px solid rgb(236, 236, 236);padding: 0px 5px;margin: 3px;border-radius: 20px;text-align: center;line-height: 25px;white-space: nowrap;margin-right: 5px;cursor: pointer;" (click)="keywordClick(keyword)" *ngFor="let keyword of keywordDisplay; let i =index">
+                <span class="keywords" [style.background-color]="bubbleColor(keyword)" [style.border]="borderStyle(keyword)" (mouseenter)="mouseEnter(keyword)" (mouseover)="mouseEnter(keyword)" (mouseout)="mouseOut(keyword)" [style.cursor]="setCursor(keyword)" style="padding: 0px 5px;margin: 3px;border-radius: 20px;text-align: center;line-height: 25px;white-space: nowrap;margin-right: 5px;" (click)="keywordClick(keyword)" *ngFor="let keyword of keywordDisplay; let i =index">
                     <span style="display: inline-block">{{ keyword }}</span>
                 </span> 
             </span>

angular/src/app/landing/keyword/keyword.component.ts

@@ -17,6 +17,7 @@ export class KeywordComponent implements OnInit {
     keywordLong: string[] = [];
     keywordBreakPoint: number = 5;
     keywordDisplay: string[] = [];
+    hovered: boolean = false;
 
     constructor(public mdupdsvc : MetadataUpdateService,        
                 private ngbModal: NgbModal,     
@@ -81,9 +82,51 @@ export class KeywordComponent implements OnInit {
      */
     bubbleColor(keyword) {
         if(keyword == "Show more..." || keyword == "Show less..." ) {
-            return "#ffffe6";
+            return "#e6ecff";
         }else{
-            return "#cceeff";
+            return "#ededed";
+        }
+    }
+
+    /**
+     * Set cursor type for "More..." and "Less..." button
+     * @param keyword
+     * @returns 
+     */
+    setCursor(keyword) {
+        if(keyword == "Show more..." || keyword == "Show less..." ) {
+            return "pointer";
+        }else{
+            return "";
+        }
+    }
+
+    /**
+     * Set border for "More..." and "Less..." button when mouse over
+     * @param keyword 
+     * @returns 
+     */
+    borderStyle(keyword) {
+        if(keyword == "Show more..." || keyword == "Show less..." ) {
+            if(this.hovered){
+                return "1px solid blue";
+            }else{
+                return "1px solid #ededed";
+            }
+        }else{
+            return "1px solid #ededed";
+        }
+    }
+
+    mouseEnter(keyword) {
+        if(keyword == "Show more..." || keyword == "Show less..." ) {
+            this.hovered = true;
+        }
+    }
+
+    mouseOut(keyword) {
+        if(keyword == "Show more..." || keyword == "Show less..." ) {
+            this.hovered = false;
         }
     }
 
@@ -99,6 +142,8 @@ export class KeywordComponent implements OnInit {
         if(keyword == "Show less...") {
             this.keywordDisplay = this.keywordShort;
         }
+
+        this.hovered = false;
     }
 
     /**

angular/src/app/landing/landingpage.module.ts

@@ -23,7 +23,8 @@ import { ErrorComponent, UserErrorComponent } from './error.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'
+import { CollectionService } from '../shared/collection-service/collection.service';
+import { ResultitemComponent } from './resultitem/resultitem.component'
 
 /**
  * A module supporting the complete display of landing page content associated with 
@@ -43,7 +44,7 @@ import { CollectionService } from '../shared/collection-service/collection.servi
     ],
     declarations: [
         LandingPageComponent, LandingBodyComponent, DoneComponent, DownloadstatusComponent,
-        ErrorComponent, UserErrorComponent, NoidComponent, NerdmComponent
+        ErrorComponent, UserErrorComponent, NoidComponent, NerdmComponent, ResultitemComponent
     ],
     providers: [
         MetadataUpdateService, TaxonomyListService, DatePipe, CollectionService

angular/src/app/landing/resultitem/resultitem.component.html

@@ -0,0 +1 @@
+<p>resultitem works!</p>

angular/src/app/landing/resultitem/resultitem.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResultitemComponent } from './resultitem.component';
+
+describe('ResultitemComponent', () => {
+  let component: ResultitemComponent;
+  let fixture: ComponentFixture<ResultitemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ResultitemComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResultitemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/landing/resultitem/resultitem.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-resultitem',
+  templateUrl: './resultitem.component.html',
+  styleUrls: ['./resultitem.component.css']
+})
+export class ResultitemComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

angular/src/app/landing/resultlist/resultlist.component.css

@@ -19,14 +19,17 @@
 .visit-home-page {
     font-size: 13px;
     width: 120px;
-    background-color: var(--nist-green-default);
+    /* background-color: var(--nist-green-default); */
+    background-color: white;
     height: 30px !important;
-    color: white;
-    float: right;
+    color: rgb(44, 44, 175);
+    /* float: right; */
 }
 
 .visit-home-page:hover {
-    background-color: var(--nist-green-light);
+    background-color: var(--background-hover);
+    color: rgb(44, 44, 175);
+    /* background-color: rgb(202, 202, 202); */
 }
 
 .search-button {
@@ -109,4 +112,16 @@ option[value=""][disabled] {
 
 option {
     color: black;
+}
+
+.panel-footer {
+    display:flex;
+}
+
+.header-footer-item {
+    text-align: right;
+}
+
+.header-footer-item {
+    align-self: center;
 }

angular/src/app/landing/resultlist/resultlist.component.html

@@ -52,7 +52,7 @@
                 <a *ngIf="resultItem.landingPage" style="float: right; margin-top: -0.3em;"
                     href="{{resultItem.landingPage}}" target="_blank" rel="noopener">
                     <button pButton label="Home Page" type="button" class="p-button-sm visit-home-page" 
-                    [style.--background-default]="colorScheme.default"
+                    [style.--background-default]="homeBtnBackColor"
                     [style.--background-lighter]="colorScheme.lighter"
                     [style.--background-hover]="colorScheme.light"
                         icon="faa faa-external-link" iconPos="left" style="padding: 3px 10px;"></button>
@@ -62,7 +62,7 @@
                     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" 
-                    [style.--background-default]="colorScheme.default"
+                    [style.--background-default]="homeBtnBackColor"
                     [style.--background-lighter]="colorScheme.lighter"
                     [style.--background-hover]="colorScheme.light"
                         icon="faa faa-external-link" iconPos="left" style="padding: 3px 10px;"></button>

angular/src/app/landing/resultlist/resultlist.component.ts

@@ -51,6 +51,7 @@ export class ResultlistComponent implements OnInit {
     searchFields: string[] = ["title", "description", "keyword"];
     PDRAPIURL: string = "https://data.nist.gov/lps/";
     isEmail: boolean = false;
+    homeBtnBackColor: string = "white";
 
     //Result display
     showResult: boolean = true;

angular/src/app/landing/topic/topic.component.css

@@ -13,4 +13,4 @@
 
 .row > div {
     display: inline-block;
-}
+}

angular/src/app/landing/topic/topic.component.html

@@ -1,60 +1,67 @@
-<div>
-    <h3><strong>Research Areas:</strong></h3>
-</div>
-<div style="margin-bottom: .5em; margin-left: 0px;">
-    <div style="display: inline-block; width: fit-content; max-width: 95%;">
-        <span style="display: table;">
-            <div class="editable_container">
+<div style="border: 1px solid rgb(210, 210, 210);border-radius: 10px;padding: 10px;margin-bottom: 0.5em;">
+    <div style="margin-top: -1.3em; margin-bottom: 0px; background-color: white;width: fit-content;padding-left: 10px;padding-right: 10px;font-size:larger;">
+        <strong>Research Areas</strong>
+    </div>
 
-                    <div *ngFor="let col of collectionOrder; let i =index" style="margin-bottom: .3em;">
-                        <div class="editable_field">
-                            <span *ngIf="topics[col] && topics[col].length > 0; else noTopic" style="font-weight: 500;white-space: nowrap;" >
-                                <strong>{{ allCollections[col].tag }}: </strong>
-                            </span>
-                            <ng-template #noTopic>
-                                <span *ngIf="mdupdsvc.isEditMode" style="padding-right: 10px !important; white-space: nowrap;">
-                                    <strong>Add {{ allCollections[col].tag }}: </strong>
+    <!-- <div style="text-decoration-line: underline;margin-top: -1.5em;">
+        <strong>Research Areas:</strong>
+    </div> -->
+
+    <div style="margin-bottom: 0em; margin-left: 10px;margin-bottom: -15px;">
+        <div style="display: inline-block; width: fit-content; max-width: 95%;">
+            <span style="display: table;">
+                <div class="editable_container" style="border: 1px solid grey;">
+
+                        <div *ngFor="let col of collectionOrder; let i =index" style="margin-bottom: .3em;">
+                            <div class="editable_field">
+                                <span *ngIf="topics[col] && topics[col].length > 0; else noTopic" style="font-weight: 500;white-space: nowrap;" >
+                                    <strong>{{ allCollections[col].tag }}: </strong>
                                 </span>
-                            </ng-template>
-                            <span *ngIf="topics[col] && topics[col].length > 0" style="padding-left: 20px">
-
-                                <!-- <p-chips [(ngModel)]="topics[col]" [inputStyle]="{ display: 'none' }"></p-chips> -->
-
-                                <span style="max-width: 90%; ">
-                                    <span class="topics" [style.background-color]="bubbleColor(topic)"  style="border: 1px solid rgb(236, 236, 236);padding: 0px 5px;margin: 3px;border-radius: 20px;text-align: center;margin-right: 5px;line-height: 25px;white-space: nowrap;cursor: pointer;" (click)="topicClick(topic, col)" *ngFor="let topic of topicDisplay[col]; let i =index">
-                                        <span style="display: inline-block">{{ topic.tag }}</span>
-                                    </span> 
+                                <ng-template #noTopic>
+                                    <span *ngIf="mdupdsvc.isEditMode" style="padding-right: 10px !important; white-space: nowrap;">
+                                        <strong>Add {{ allCollections[col].tag }}: </strong>
+                                    </span>
+                                </ng-template>
+                                <span *ngIf="topics[col] && topics[col].length > 0" style="padding-left: 20px;">
+
+                                    <!-- <p-chips [(ngModel)]="topics[col]" [inputStyle]="{ display: 'none' }"></p-chips> -->
+
+                                    <span style="max-width: 90%; ">
+                                        <span class="topics" [style.background-color]="bubbleColor(topic)" [style.border]="borderStyle(topic)" (mouseenter)="mouseEnter(topic)" (mouseover)="mouseEnter(topic)" (mouseout)="mouseOut(topic)" [style.cursor]="setCursor(topic)" style="padding: 0px 5px;margin: 3px;border-radius: 20px;text-align: center;margin-right: 5px;line-height: 25px;white-space: nowrap;" (click)="topicClick(topic, col)" *ngFor="let topic of topicDisplay[col]; let i =index">
+                                            <span style="display: inline-block">{{ topic.tag }}</span>
+                                        </span> 
+                                    </span>
                                 </span>
+                            </div>
+
+
+                            <span class="editable_field">
+                                <button class="edit_button" *ngIf="mdupdsvc.isEditMode" type="button" (click)="openModal(col)"
+                                    aria-label="edit button">
+                                    <i class="faa faa-pencil icon_enabled" data-toggle="tooltip" title="Edit topic"></i>
+                                </button>
+                                <button class="undo_button" *ngIf="mdupdsvc.isEditMode" type="button" [disabled]="!updated(col)"
+                                    (click)="undoEditing(col)" aria-label="undo button">
+                                    <i class="faa faa-undo" [ngClass]="{'icon_enabled': updated(col), 'icon_disabled':!updated(col) }"
+                                        data-toggle="tooltip" title="Undo topic"></i>
+                                </button>
                             </span>
                         </div>
 
+                </div>
 
-                        <span class="editable_field">
-                            <button class="edit_button" *ngIf="mdupdsvc.isEditMode" type="button" (click)="openModal(col)"
-                                aria-label="edit button">
-                                <i class="faa faa-pencil icon_enabled" data-toggle="tooltip" title="Edit topic"></i>
-                            </button>
-                            <button class="undo_button" *ngIf="mdupdsvc.isEditMode" type="button" [disabled]="!updated(col)"
-                                (click)="undoEditing(col)" aria-label="undo button">
-                                <i class="faa faa-undo" [ngClass]="{'icon_enabled': updated(col), 'icon_disabled':!updated(col) }"
-                                    data-toggle="tooltip" title="Undo topic"></i>
-                            </button>
-                        </span>
+                <!-- <div *ngFor="let col of collectionOrder; let i =index">
+                    <div *ngIf="topics[col] && topics[col].length > 0">
+                        <strong>{{ allCollections[col].tag }}: </strong>
+                        <span class="topics" style="border: 1px solid rgb(236, 236, 236);background-color: #e3f9fc;padding: 2px 5px;margin: 3px;border-radius: 20px;text-align: center;margin-right: 5px;" *ngFor="let topic of topics[col]; let i =index">
+                            {{ topic }}
+                        </span> 
                     </div>
-
-            </div>
-
-            <!-- <div *ngFor="let col of collectionOrder; let i =index">
-                <div *ngIf="topics[col] && topics[col].length > 0">
-                    <strong>{{ allCollections[col].tag }}: </strong>
-                    <span class="topics" style="border: 1px solid rgb(236, 236, 236);background-color: #e3f9fc;padding: 2px 5px;margin: 3px;border-radius: 20px;text-align: center;margin-right: 5px;" *ngFor="let topic of topics[col]; let i =index">
-                        {{ topic }}
-                    </span> 
-                </div>
-            </div> -->
-        </span>
+                </div> -->
+            </span>
+        </div>
+        <div *ngIf="mdupdsvc.isEditMode"
+            style="color: rgb(173, 0, 0); display: inline-block;width: fit-content; max-width:5%;vertical-align: top;text-align: left; padding-left: .5em;">
+            *</div>
     </div>
-    <div *ngIf="mdupdsvc.isEditMode"
-        style="color: rgb(173, 0, 0); display: inline-block;width: fit-content; max-width:5%;vertical-align: top;text-align: left; padding-left: .5em;">
-        *</div>
 </div>