From 06e25e5081b068be952e2abe31fd765ee08766e9 Mon Sep 17 00:00:00 2001 From: Chidozie Ononiwu Date: Thu, 5 Oct 2023 12:05:23 -0700 Subject: [PATCH] Update to review Nav --- .../Client/css/shared/theme-colors.scss | 1 + .../review-info/review-info.component.html | 91 +++++++++++-------- .../review-info/review-info.component.scss | 12 +++ .../review-info/review-info.component.ts | 2 +- .../review-nav/review-nav.component.html | 2 +- .../review-nav/review-nav.component.scss | 18 ++++ .../review-nav/review-nav.component.ts | 54 +++++------ .../review-page/review-page.component.html | 4 +- .../review-page/review-page.component.scss | 5 + .../APIView/ClientSPA/src/app/app.module.ts | 6 +- .../ClientSPA/src/ng-prime-overrides.scss | 36 ++++++-- 11 files changed, 148 insertions(+), 83 deletions(-) diff --git a/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss b/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss index 35fb2b6db06..94ad7c16810 100644 --- a/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss +++ b/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss @@ -134,6 +134,7 @@ /*----Shadows and Glows------------------------------------------*/ --outer-glow: #{tint-color($primary-color, 80%)}; --shadow-color: rgba(#{$gray-100}, .15); + --shadow-color-primary: 0 0 0 0.15rem #{rgba($primary-color, 0.5)}; --box-shadow: 0 .5rem 1rem #{rgba($gray-100, .15)}; --box-shadow-sm: 0 .125rem .25rem #{rgba($gray-100, .075)}; --box-shadow-lg: 0 1rem 3rem #{rgba($gray-100, .175)}; diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.html index 154c2e19fcc..59cba2047a6 100644 --- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.html +++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.html @@ -1,40 +1,55 @@ - -
- - {{ review!.language}} - - {{ review!.packageName }} - - - - - - -
-
{{ selectedRevisionsType.name }}
-
- - -
-
{{ revisionsTypeDropDown.name }}
+
+
+
+ + + {{ review!.language}} + + {{ review!.packageName }} + + + + + + +
+
{{ selectedRevisionsType.name }}
+
+ + +
+
{{ revisionsTypeDropDown.name }}
+
+ + + + + + + +
+
{{ selectedDiffRevisionsType.name }}
+
+ + +
+
{{ diffRevisionsTypeDropDown.name }}
+
+ + + + + + +
+
+
+
+
+
- - - +
+
+
- - -
-
{{ selectedDiffRevisionsType.name }}
-
- - -
-
{{ diffRevisionsTypeDropDown.name }}
-
- - - - - -
\ No newline at end of file diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.scss b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.scss index 67074028668..26dab6fad62 100644 --- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.scss +++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.scss @@ -17,4 +17,16 @@ border-top-right-radius: 0px; border-top-left-radius: 0px; } + + .btn-outline-primary { + border-color: var(--border-color); + } + + .revision-drop-down { + max-width: 15vw; + } + + .review-name { + max-width: 10vw; + } } \ No newline at end of file diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.ts index 9b831ca722b..954499ba04e 100644 --- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.ts +++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.ts @@ -76,7 +76,7 @@ export class ReviewInfoComponent { getReviewRevisionsDropDown(selectedType : any) { const revisions : any[] = []; this.reviewRevisions.get(selectedType.value)?.forEach((revision: { label: any; id: any; }) => { - revisions.push({ name: revision.label, value: revision.id }); + revisions.push({ name: revision.label ?? revision.id, value: revision.id }); }); return revisions; } diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.html index bc9adb51bfd..7b955d1cfe0 100644 --- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.html +++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.scss b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.scss index e69de29bb2d..5878008a2bf 100644 --- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.scss +++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.scss @@ -0,0 +1,18 @@ +:host ::ng-deep { + .p-tree { + border: 0px; + padding: 0.1rem; + max-height: 100%; + width: 100%; + overflow-y: scroll; + overflow-x: hidden; + } + + .p-tree .p-tree-container .p-treenode .p-treenode-content { + display: block; + padding: 0.15rem; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } +} \ No newline at end of file diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.ts index 17e226d7faf..3defed407db 100644 --- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.ts +++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.ts @@ -1,5 +1,6 @@ -import { Component } from '@angular/core'; -import { MenuItem } from 'primeng/api'; +import { Component, Input, SimpleChanges } from '@angular/core'; +import { NavigationItem } from 'src/app/_models/review'; +import { TreeNode } from 'primeng/api' @Component({ selector: 'app-review-nav', @@ -7,37 +8,28 @@ import { MenuItem } from 'primeng/api'; styleUrls: ['./review-nav.component.scss'] }) export class ReviewNavComponent { - menuItems : MenuItem[] | undefined = []; - activeItem: MenuItem | undefined; + @Input() navigation : NavigationItem[] | null = null; + navigationTree : TreeNode[] = []; - ngOnInit() { - this.menuItems = this.setDockItems(); - this.activeItem = this.menuItems[0]; + ngOnChanges(changes: SimpleChanges) { + if (changes['navigation'].previousValue){ + this.navigation?.forEach(navigationItem => { + this.navigationTree.push(this.parseNavigationItemsToTreeNodes(navigationItem)); + }); + } } - setDockItems() { - return [ - { - label: 'API', - icon: 'bi bi-braces', - expanded: false - }, - { - label: 'Revisions', - icon: 'bi bi-clock-history', - expanded: true - }, - { - label: 'Conversiation', - icon: 'fa-regular fa-message', - expanded: true - }, - { - label: 'Samples', - icon: 'bi bi-puzzle', - expanded: true - }, - ] + parseNavigationItemsToTreeNodes(navigationItem : NavigationItem) { + let treeNode : TreeNode = { + label: navigationItem.text, + data: navigationItem.navigationId, + expanded: true + } + let children : TreeNode[] = []; + navigationItem.childItems.forEach(child => { + children.push(this.parseNavigationItemsToTreeNodes(child)); + }); + treeNode.children = children; + return treeNode; } - } diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html index 02a2acc573a..b35bf2b62e0 100644 --- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html +++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html @@ -3,9 +3,9 @@ + [style]="{ height: 'calc(100vh - 124px)' }"> -
Panel 1
+
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.scss b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.scss index e46007f8e43..a41fc9606a3 100644 --- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.scss +++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.scss @@ -2,4 +2,9 @@ .p-sidebar-right { width: 70dvw; } + + .p-splitter-panel-nested { + display: block; + min-width: 0; + } } \ No newline at end of file diff --git a/src/dotnet/APIView/ClientSPA/src/app/app.module.ts b/src/dotnet/APIView/ClientSPA/src/app/app.module.ts index eef1cf32725..3ec4b5c5e56 100644 --- a/src/dotnet/APIView/ClientSPA/src/app/app.module.ts +++ b/src/dotnet/APIView/ClientSPA/src/app/app.module.ts @@ -33,8 +33,8 @@ import { SplitterModule } from 'primeng/splitter'; import { CodePanelComponent } from './_components/code-panel/code-panel.component'; import { VirtualScrollerModule } from 'primeng/virtualscroller'; import { ReviewInfoComponent } from './_components/review-info/review-info.component'; -import { ReviewNavComponent } from './_components/review-nav/review-nav.component'; import { RevisionsListComponent } from './_components/revisions-list/revisions-list.component'; +import { ReviewNavComponent } from './_components/review-nav/review-nav.component'; @NgModule({ declarations: [ @@ -47,8 +47,8 @@ import { RevisionsListComponent } from './_components/revisions-list/revisions-l ReviewPageComponent, CodePanelComponent, ReviewInfoComponent, - ReviewNavComponent, - RevisionsListComponent + RevisionsListComponent, + ReviewNavComponent ], imports: [ AppRoutingModule, diff --git a/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss b/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss index a06df42cfe3..bd16c8103be 100644 --- a/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss +++ b/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss @@ -148,8 +148,8 @@ .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight, .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { - color: var(--primary-btn-color); - background: var(--link-active); + color: var(--base-text-color); + background: var(--base-bg-color); } .p-dropdown:not(.p-disabled):hover { @@ -157,7 +157,7 @@ } .p-dropdown:not(.p-disabled).p-focus { - box-shadow: 0 0 0 0.2rem var(--outer-glow); + box-shadow: var(--shadow-color-primary); border-color: var(--primary-btn-color); } @@ -175,7 +175,7 @@ } .p-inputtext:enabled:focus { - box-shadow: 0 0 0 0.2rem var(--outer-glow); + box-shadow: var(--shadow-color-primary); border-color: var(--primary-btn-color); } @@ -215,7 +215,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - box-shadow: inset 0 0 0 0.15rem var(--outer-glow); + box-shadow: var(--shadow-color-primary); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group { @@ -228,7 +228,7 @@ } .p-multiselect:not(.p-disabled).p-focus { - box-shadow: 0 0 0 0.2rem var(--outer-glow); + box-shadow: var(--shadow-color-primary); border-color: var(--primary-btn-color); } @@ -238,7 +238,7 @@ } .p-datatable .p-sortable-column:focus { - box-shadow: inset 0 0 0 0.15rem var(--outer-glow); + box-shadow: var(--shadow-color-primary); } .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { @@ -274,4 +274,26 @@ color: var(--base-text-color); padding-top: 2px; padding-bottom: 2px; +} + +.p-tree { + border: 1px solid var(--border-color); + background: var(--base-fg-color); + color: var(--base-text-color); +} + +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + color: var(--base-text-color); +} + +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: var(--base-text-color); +} + +.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { + box-shadow: inset var(--shadow-color-primary); +} + +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus { + box-shadow: var(--shadow-color-primary); } \ No newline at end of file