diff --git a/src/patterns/pages/pages.component.ts b/src/patterns/pages/pages.component.ts index 0109274ec..416501ecb 100755 --- a/src/patterns/pages/pages.component.ts +++ b/src/patterns/pages/pages.component.ts @@ -1,5 +1,12 @@ import { Component } from '@angular/core'; -import { Router } from '@angular/router'; +import { + Router, + NavigationEnd, + UrlTree, + UrlSegmentGroup, + UrlSegment, + PRIMARY_OUTLET +} from '@angular/router'; @Component({ template: ` @@ -10,9 +17,10 @@ import { Router } from '@angular/router';
Patterns Home - Page - + Implementation @@ -21,19 +29,42 @@ import { Router } from '@angular/router'; }) export class PagesComponent { - constructor( private router: Router){} + selectedOption:any; - pages = [ - { name: "A", value: "a" }, - { name: "B", value: "b" } + options = [ + { name: "User Account", value: "a" }, + { name: "Award Domains", value: "b" } ]; - selectedValue:any; + routerSubscription: any; + + constructor(private router: Router){ + this.routerSubscription = router.events.subscribe(event => { + if (event instanceof NavigationEnd ) { + const tree: UrlTree = router.parseUrl(event.url); + const group: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET]; + const segment: UrlSegment[] = group.segments; + this.selectOption(segment[2].path); + } + }); + } + + selectOption(value){ + this.options.forEach(option => { + if(option.value === value){ + this.selectedOption = option; + } + }); + } navigateTo(){ - if(this.selectedValue.value){ - this.router.navigate([`/patterns/page/${this.selectedValue.value}`]); + if(this.selectedOption.value){ + this.router.navigate([`/patterns/page/${this.selectedOption.value}`]); } } + ngOnDestroy() { + this.routerSubscription.unsubscribe(); + } + } \ No newline at end of file diff --git a/src/prototypes/components/picker/component.ts b/src/prototypes/components/picker/component.ts index 3d4b71d54..89980668b 100644 --- a/src/prototypes/components/picker/component.ts +++ b/src/prototypes/components/picker/component.ts @@ -1,9 +1,22 @@ -import { Component} from '@angular/core'; +import { Component, HostListener} from '@angular/core'; @Component({ templateUrl: 'template.html' }) -export class PickerComponent {} +export class PickerComponent { + + @HostListener('click', ['$event']) onClick($event) { + let target = $event.target.className; + this.showOverlay = target === "prototype-picker-overlay" ? false : true; + } + + showOverlay: boolean = true; + + openModal(){ + this.showOverlay = true; + } + +} @Component({ diff --git a/src/prototypes/components/picker/template-2.html b/src/prototypes/components/picker/template-2.html index a9d1f5bef..3af841c1a 100644 --- a/src/prototypes/components/picker/template-2.html +++ b/src/prototypes/components/picker/template-2.html @@ -1,103 +1,80 @@ -
+
+ + +
+ + +
- -
- - - Picker - - -
- - -
- -
- - - - - - - - -
- - -
- Office of Intergovernmental Relations -
- -
-
-
- Homer -
-
- Bart -
-
- Marge -
-
- Lisa -
-
- Mr. Burns -
-
- Apu -
-
- Milhouse -
-
- Moe -
-
- Ned -
-
- Nelson -
-
- Krusty -
-
- Barney -
- -
- Ralph -
-
- Skinner -
-
- Edna -
-
- Fat Tony -
-
- Lenny -
-
- Carl -
-
-
- -
-
- Reset    - +
+ + + Search Federal Organizations + + +
+ + +
+ +
+ + + + + + + + +
+ +
+ Department of Defense +
+ +
+
+ + Departments + 3 found + + + Agencies + 20 found + + + Field Activities + 8 found +
-
-
\ No newline at end of file +
+ +
+ Reset    + +
+ +
+ +
\ No newline at end of file diff --git a/src/prototypes/components/picker/template-3.html b/src/prototypes/components/picker/template-3.html index 251585b70..663cc573e 100644 --- a/src/prototypes/components/picker/template-3.html +++ b/src/prototypes/components/picker/template-3.html @@ -1,103 +1,91 @@ -
+
+ + +
+ + +
- -
- - - Picker - - -
- - -
- -
- - - - - - - - -
- - -
- The Simpsons / Bart -
- -
-
-
- El Barto -
-
- Ay Caramba! -
-
- Bartman -
-
- Milhouse -
-
- Nelson -
-
- Apu -
-
- Milhouse -
-
- Moe -
-
- Ned -
-
- Nelson -
-
- Krusty -
-
- Barney -
- -
- Ralph -
-
- Skinner -
-
- Edna -
-
- Fat Tony -
-
- Lenny -
-
- Carl -
-
-
- - -
- Reset    - +
+ + + Search Federal Organizations + + +
+ + +
+ +
+ + + + + + + + +
+ +
+ Department of Defense / + Agencies +
+ +
+
+ Defense Advanced Research Projects Agency + Defense Commissary Agency + Defense Contract Audit Agency + Defense Contract Management Agency + Defense Finance and Accounting Service + Defense Health Agency + Defense Information Systems Agency + Defense Intelligence Agency + Defense Legal Services Agency + Defense Logistics Agency + Defense POW/MIA Accounting Agency + Defense Security Cooperation Agency + Defense Security Service + Defense Threat Reduction Agency + Joint Improvised-Threat Defeat Agency + Missile Defense Agency + National Geospatial-Intelligence Agency + National Reconnaissance Office + National Security Agency/Central Security Service + Pentagon Force Protection Agency
-
-
\ No newline at end of file +
+ +
+ Reset    + +
+ +
+ +
+ + diff --git a/src/prototypes/components/picker/template-4.html b/src/prototypes/components/picker/template-4.html index 8cc60d3b4..b436cf595 100644 --- a/src/prototypes/components/picker/template-4.html +++ b/src/prototypes/components/picker/template-4.html @@ -1,105 +1,92 @@ -
+
+ + +
+ + +
- -
- - - Picker - - -
- - -
- -
- - - - - - - - -
- - -
- The Simpsons / - Bart / - Ay Caramba! -
- -
-
-
- El Barto -
-
- Ay Caramba! -
-
- Bartman -
-
- Milhouse -
-
- Nelson -
-
- Apu -
-
- Milhouse -
-
- Moe -
-
- Ned -
-
- Nelson -
-
- Krusty -
-
- Barney -
- -
- Ralph -
-
- Skinner -
-
- Edna -
-
- Fat Tony -
-
- Lenny -
-
- Carl -
-
-
- - -
- Reset    - +
+ + + Search Federal Organizations + + +
+ + +
+ +
+ + + + + + + + +
+ +
+ Department of Defense / + Agencies / + Defense Contract Management Agency +
+ +
+
+ Defense Advanced Research Projects Agency + Defense Commissary Agency + Defense Contract Audit Agency + Defense Contract Management Agency + Defense Finance and Accounting Service + Defense Health Agency + Defense Information Systems Agency + Defense Intelligence Agency + Defense Legal Services Agency + Defense Logistics Agency + Defense POW/MIA Accounting Agency + Defense Security Cooperation Agency + Defense Security Service + Defense Threat Reduction Agency + Joint Improvised-Threat Defeat Agency + Missile Defense Agency + National Geospatial-Intelligence Agency + National Reconnaissance Office + National Security Agency/Central Security Service + Pentagon Force Protection Agency
-
-
\ No newline at end of file +
+ +
+ Reset    + +
+ +
+ +
+ + diff --git a/src/prototypes/components/picker/template-5.html b/src/prototypes/components/picker/template-5.html index 94cb7885f..96dda3c30 100644 --- a/src/prototypes/components/picker/template-5.html +++ b/src/prototypes/components/picker/template-5.html @@ -1,61 +1,75 @@ -
+
+ + +
+
+
- Picker + Search Federal Organizations
- -
- - + + - -
-
- The Simpsons + Department of Defense / + Agencies / + Defense Contract Management Agency
-
-
- - Bart - -
-
- - Marge - -
-
- Barney -
+
+ Defense Contract Audit Agency + Defense Contract Management Agency
+
- Reset    - + Reset    +
-
\ No newline at end of file +
+ + + \ No newline at end of file diff --git a/src/prototypes/components/picker/template-6.html b/src/prototypes/components/picker/template-6.html index 61ad7c30a..857acc4a1 100644 --- a/src/prototypes/components/picker/template-6.html +++ b/src/prototypes/components/picker/template-6.html @@ -1,106 +1,112 @@ -
- - - Picker - - -
- - -
- -
- - - - - - - - -
- -
- green found in 32 Agencies, - 400 Departments and - 10000 Offices -
+
+ + +
+ + +
-
-
- - Action - Department - - - United States Information Agency - Agency - - - Office of Intergovernmental Relations - Office - - - Bureau of Radiological Health - Department - - - Office of Human Development Services - Agency - - - U.S. Postal Service - Department - - - Old West Regional Commission - Department - - - Health Care Financing Administration - Department - - - Interstate Commerce Commission - Department - - - Smithsonian Institution - Office - - - Interstate Commerce Commission - Office - - - Action - Department - - - United States Information Agency - Agency - - - Office of Intergovernmental Relations - Office - - - Bureau of Radiological Health - Department - +
+ + + Search Federal Organizations + + +
+ +
+ +
+ + + + + + + + +
+ +
+ contract found in 32 Agencies, + 400 Departments and + 10000 Offices +
+ +
+
+ + Action + Department + + + United States Information Agency + Agency + + + Department of Defense + Department + + + Bureau of Radiological Health + Department + + + Office of Human Development Services + Agency + + + U.S. Postal Service + Department + + + Old West Regional Commission + Department + + + Health Care Financing Administration + Agency + + + Interstate Commerce Commission + Department + + + Smithsonian Institution + Office + +
+
+ +
+ +
+ Reset    + +
+
-
-
- Reset    - -
- -
-



\ No newline at end of file + + diff --git a/src/prototypes/components/picker/template.html b/src/prototypes/components/picker/template.html index 2a631ff8d..c17f28b11 100644 --- a/src/prototypes/components/picker/template.html +++ b/src/prototypes/components/picker/template.html @@ -1,109 +1,107 @@ -
- - - Picker - - -
- - -
- -
- - - - - - - - -
- -
- Most searched -
+
+ + +
+ + +
-
-
- - Action - Department - - - United States Information Agency - Agency - - - Office of Intergovernmental Relations - Office - - - Bureau of Radiological Health - Department - - - Office of Human Development Services - Agency - - - U.S. Postal Service - Department - - - Old West Regional Commission - Department - - - Health Care Financing Administration - Department - - - Interstate Commerce Commission - Department - - - Smithsonian Institution - Office - - - Interstate Commerce Commission - Office - - - Action - Department - - - United States Information Agency - Agency - - - Office of Intergovernmental Relations - Office - - - Bureau of Radiological Health - Department - +
+ + + Search Federal Organizations + + +
+ +
+ +
+ + + + + + + + +
+ +
+ Most searched +
+ +
+
+ + Action + Department + + + United States Information Agency + Agency + + + Department of Defense + Department + + + Bureau of Radiological Health + Department + + + Office of Human Development Services + Agency + + + U.S. Postal Service + Department + + + Old West Regional Commission + Department + + + Health Care Financing Administration + Agency + + + Interstate Commerce Commission + Department + + + Smithsonian Institution + Office + +
+
+ +
+ +
+ +
+
-
- -
- -
- -
- - - - - - -


\ No newline at end of file +
\ No newline at end of file diff --git a/src/prototypes/components/prototypes-components.component.ts b/src/prototypes/components/prototypes-components.component.ts index 218fbbce0..1b59f97b5 100644 --- a/src/prototypes/components/prototypes-components.component.ts +++ b/src/prototypes/components/prototypes-components.component.ts @@ -12,9 +12,8 @@ import { template: `
- Prototypes Home + Prototypes - Component diff --git a/src/styles/sam-design-system/prototypes/_picker.scss b/src/styles/sam-design-system/prototypes/_picker.scss index 46935ef33..d8c1cfa1b 100644 --- a/src/styles/sam-design-system/prototypes/_picker.scss +++ b/src/styles/sam-design-system/prototypes/_picker.scss @@ -1,13 +1,29 @@ /********************************************** - PICKER +PICKER ***********************************************/ +.prototype-picker-filter{ + padding: 1rem; + label{ + display: block !important; + } +} + +.prototype-picker-overlay{ + position: absolute; + display: flex; + align-items: center; + justify-content: center; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); +} .prototype-picker{ - width:500px; - margin: 4rem auto; + width:600px; + margin-top: -10rem; padding: 2rem; background-color: white; - border-radius: .3rem; box-shadow: 0 0 0 1px rgba(0,0,0,0.03); will-change: transform; @@ -49,18 +65,22 @@ .picker-results{ width: 100%; - overflow-x: scroll; -} -.picker-results:after { - content: ""; - display: block; - position: absolute; - width: 13%; - height: 285px; - bottom: 85px; - right: 14px; - background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); + max-height: 300px; + padding: 3px 0; + overflow-y: auto; + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; + &::-webkit-scrollbar { + -webkit-appearance: none; + width: 7px; + } + &::-webkit-scrollbar-thumb { + border-radius: 4px; + background-color: rgba(0,0,0,.5); + -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); + } } + .picker-results-wrapper{ display: flex; flex-wrap: wrap; @@ -79,6 +99,7 @@ } } } + .picker-result{ background-color: #f3eee7; padding: 1rem 3rem; @@ -125,13 +146,10 @@ .picker-results-wrapper-2 { display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - grid-gap: 2px; - //grid-auto-rows: minmax(80px, auto); - width: 1000px; + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + grid-gap: 4px; a{ display: block; - margin: 3px; color: black; font-size: 15px; line-height: 1.2em; @@ -140,13 +158,17 @@ border: 1px solid #f3eee7; border-radius: 2px; overflow: hidden; - text-overflow: ellipsis; + text-overflow: ellipsis; span{ display: block; font-size: 14px; font-weight: normal; } + .normal{ + font-weight: 400; + } } + a.active, a:hover{ border: 1px solid #1abce0; text-decoration: none;