Merged PR 833: Remove ACN Branding and update to new Material Design

src/app/app.component.html

@@ -1,22 +1,17 @@
-<mat-toolbar [className]="'app-toolbar'">
-    <img class="logo-acn" src="assets/Acc_Logo_Black_Purple_RGB.png" alt="Accenture" />
-    <mat-divider vertical></mat-divider>
-    <img class="logo-roms" src="assets/ROMS_Logo_Black_Purple_RGB.png" alt="ROMS" />
-    <mat-divider vertical></mat-divider>
-    <span class="app-name">XFSC Federated Catalog Viewer</span>
-    <span class="app-spacer"></span>
-    <nav>
-        <a routerLink="" [className]="getActiveClass('/nodes')">Browse Catalog</a>
-        <a routerLink="query" [className]="getActiveClass('/query')"> Query Tool</a>
-        <ng-container *ngIf="isLoggedIn()">
-            <button id="user-menu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="User: {{ username }}">
-                <mat-icon>account_circle</mat-icon>
-            </button>
-            <mat-menu #menu="matMenu">
-                <button mat-menu-item (click)="logout()">Logout</button>
-            </mat-menu>
-        </ng-container>
-    </nav>
+<mat-toolbar>
+    <span class="app-name">Federated Catalog Viewer</span>
+    <span class="app-toolbar--spacer"></span>
+
+    <a mat-button routerLink="">Browse Catalog</a>
+    <a mat-button routerLink="query">Query Tool</a>
+    <ng-container *ngIf="isLoggedIn()">
+        <button id="user-menu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="User: {{ username }}">
+            <mat-icon>account_circle</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="logout()">Logout</button>
+        </mat-menu>
+    </ng-container>
 </mat-toolbar>
 
 <div class="app-content">

src/app/app.component.scss

@@ -1,76 +1,11 @@
-.app-toolbar {
-    .app-spacer {
-        flex: 1 1 auto;
-    }
-    background: #fff;
-    img {
-        height: 32px;
-        margin: 0 16px;
-        align-self: flex-end;
-    }
-    img.logo-roms {
-        padding-bottom: 0.5rem;
-    }
-
-    img.logo-acn {
-        padding-bottom: 1rem;
-    }
-    .mat-divider-vertical {
-        border-right: #e6e6dc 2px solid;
-        height: calc(100% - 1rem);
-    }
-    .app-name,
-    nav {
-        height: 64px;
-        line-height: 64px;
-        margin-top: 16px;
-    }
-    .app-name {
-        margin: 0 16px;
-        height: 48px;
-        margin-top: 2px;
-        font-size: 1rem;
-    }
-    nav {
-        display: flex;
-        flex-direction: row;
-        margin-right: 26px;
-        a {
-            font-size: 1rem;
-            display: block;
-            height: 64px;
-            line-height: 64px;
-            margin: 0 8px;
-            text-decoration: none;
-            color: #000000;
-            padding: 0 16px;
-            &:hover,
-            &:active,
-            &.active {
-                border-bottom: #a100ff solid 4px;
-            }
-        }
-        #user-menu {
-            align-self: center;
-        }
-    }
-}
-.app-content {
-    margin: 32px;
+.app-toolbar--logo {
+    height: 32px;
+    margin-right: 16px;
 }
 
-:host ::ng-deep .mat-mdc-card-title {
-    font-weight: 900;
-    font-size: 2.5rem;
-    font-family: graphik-black, 'Helvetica Neue', sans-serif;
-    margin-bottom: 16px;
+.app-toolbar--spacer {
+    flex: 1 1 auto;
 }
-
-:host ::ng-deep .mat-mdc-card {
-    border-radius: 0;
-    box-shadow: none;
-}
-
-:host ::ng-deep .mdc-button {
-    border-radius: 0;
+.app-content {
+    padding: 32px;
 }

src/app/app.component.ts

@@ -9,7 +9,6 @@ import { Subscription } from 'rxjs';
     styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit, OnDestroy {
-    protected readonly toolbar = toolbar;
     username: string | null = null;
     private usernameSubscription!: Subscription;
 
@@ -28,14 +27,6 @@ export class AppComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void {
         this.usernameSubscription.unsubscribe();
     }
-
-    getActiveClass(urlPrefix: string): string[] {
-        if (this.router.url.startsWith(urlPrefix)) {
-            return ['active'];
-        }
-        return [];
-    }
-
     isLoggedIn(): boolean {
         return this.authService.isLoggedIn();
     }

src/app/app.module.ts

@@ -11,7 +11,6 @@ import { JsonStringifyPipe } from './util/json-stringify.pipe';
 import { MatTableModule } from '@angular/material/table';
 import { MatCardModule } from '@angular/material/card';
 import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatTabsModule } from '@angular/material/tabs';
 import { CatalogBrowserComponent } from './components/catalog-browser/catalog-browser.component';
@@ -25,6 +24,7 @@ import { AuthenticationComponent } from './components/authentication/authenticat
 import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatAnchor, MatButtonModule, MatIconButton } from '@angular/material/button';
 
 @NgModule({
     declarations: [
@@ -56,6 +56,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
         MatMenuModule,
         MatIconModule,
         MatTooltipModule,
+        MatAnchor,
+        MatIconButton,
     ],
     providers: [],
     bootstrap: [AppComponent],

src/app/components/authentication/authentication.component.html

@@ -1,5 +1,5 @@
 <div class="login-container" *ngIf="!isLoggedIn()">
-    <p>Please login with a XFSC Catalog User.</p>
+    <p>Please login with a Catalog User.</p>
     <form (submit)="login()" class="login-form">
         <mat-form-field appearance="outline" class="input-field small">
             <mat-label>Username</mat-label>

src/app/components/catalog-browser/catalog-browser.component.html

@@ -4,57 +4,28 @@
             {{ '"' + (label | async) + '" Entries' }}
         </mat-card-title>
         <ng-template #noLabel><mat-card-title>Browse Catalog Contents</mat-card-title></ng-template>
-        <ng-container *ngIf="data$ | async as data">
-            <div class="header-row">
-                <mat-form-field class="page-size-select">
-                    <mat-label>Items per page</mat-label>
-                    <mat-select [value]="limit$.value" (selectionChange)="onPageSizeChange($event.value)">
-                        <mat-option *ngFor="let size of pageSizes" [value]="size">{{ size }}</mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-card-subtitle> Showing {{ data.nodes.length }} of {{ data.totalCount }} total </mat-card-subtitle>
-            </div>
-            <mat-card-content>
-                <mat-tab-group
-                    dynamicHeight
-                    [selectedIndex]="selectedTab$.value"
-                    (selectedIndexChange)="onTabChange($event)"
-                >
-                    <mat-tab label="Legal Participant">
-                        <app-node-table [nodes]="data.nodes"></app-node-table>
-                        <button
-                            mat-raised-button
-                            color="primary"
-                            *ngIf="data.nodes.length < data.totalCount"
-                            (click)="loadMore()"
-                        >
-                            Load More <mat-icon>expand_more</mat-icon>
-                        </button>
-                    </mat-tab>
-                    <mat-tab label="Service Offering">
-                        <app-node-table [nodes]="data.nodes"></app-node-table>
-                        <button
-                            mat-raised-button
-                            color="primary"
-                            *ngIf="data.nodes.length < data.totalCount"
-                            (click)="loadMore()"
-                        >
-                            Load More <mat-icon>expand_more</mat-icon>
-                        </button>
-                    </mat-tab>
-                    <mat-tab label="Resource">
-                        <app-node-table [nodes]="data.nodes"></app-node-table>
-                        <button
-                            mat-raised-button
-                            color="primary"
-                            *ngIf="data.nodes.length < data.totalCount"
-                            (click)="loadMore()"
-                        >
-                            Load More <mat-icon>expand_more</mat-icon>
-                        </button>
-                    </mat-tab>
-                </mat-tab-group>
-            </mat-card-content>
-        </ng-container>
     </mat-card-header>
+    <ng-container *ngIf="data$ | async as data">
+        <mat-card-content>
+            <mat-tab-group
+                dynamicHeight
+                [selectedIndex]="selectedTab$.value"
+                (selectedIndexChange)="onTabChange($event)"
+            >
+                <mat-tab label="Legal Participant">
+                    <app-node-table [nodes]="data.nodes"></app-node-table>
+                </mat-tab>
+                <mat-tab label="Service Offering">
+                    <app-node-table [nodes]="data.nodes"></app-node-table>
+                </mat-tab>
+                <mat-tab label="Resource">
+                    <app-node-table [nodes]="data.nodes"></app-node-table>
+                </mat-tab>
+            </mat-tab-group>
+            <mat-card-footer> Showing {{ data.nodes.length }} of {{ data.totalCount }} total </mat-card-footer>
+        </mat-card-content>
+        <mat-card-actions *ngIf="data.nodes.length < data.totalCount">
+            <button mat-button (click)="loadMore()"><mat-icon>unfold_more</mat-icon> Load More</button>
+        </mat-card-actions>
+    </ng-container>
 </mat-card>

src/app/components/catalog-browser/catalog-browser.component.scss

@@ -1,13 +1,3 @@
-mat-card-header {
-    flex-direction: column;
-
-    .header-row {
-        display: flex;
-        align-items: center;
-    }
-
-    mat-form-field.page-size-select {
-        margin-right: 2rem;
-        font-size: 0.875rem;
-    }
+.items-count-footer {
+    margin-top: 16px;
 }

src/app/components/catalog-browser/catalog-browser.component.ts

@@ -16,6 +16,8 @@ export class CatalogBrowserComponent implements OnInit {
     public readonly limit$ = new BehaviorSubject<number>(30);
     public readonly fetchMore$ = new Subject<void>();
 
+    public readonly tabs = ['Legal Participant', 'Service Offering', 'Resource'];
+
     constructor(private _queryService: QueryService, private _activatedRoute: ActivatedRoute) {
         const selectedKey$ = this.selectedTab$.pipe(
             map((selectedTab) => ['LegalParticipant', 'ServiceOffering', 'Resource'][selectedTab]),

src/app/components/node-labels/node-labels.component.html

@@ -1,3 +1,3 @@
 <mat-chip-set>
-    <mat-chip *ngFor="let label of labels" [routerLink]="'/nodes'" [queryParams]="{label}">{{ label }}</mat-chip>
+    <mat-chip *ngFor="let label of labels">{{ label }}</mat-chip>
 </mat-chip-set>

src/app/components/query/query.component.scss

@@ -0,0 +1,8 @@
+table {
+    table-layout: fixed;
+    width: 100%;
+
+    pre {
+        overflow-x: auto;
+    }
+}

src/index.html

@@ -2,21 +2,16 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <title>Accenture | XFSC Federated Catalog Viewer</title>
+        <title>Federated Catalog Viewer</title>
         <base href="/" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/x-icon" href="favicon.ico" />
-
-        <link rel="preload" as="font" type="font/woff2" crossorigin href="assets/graphik-regular-web.woff2" />
-        <link rel="preload" as="font" type="font/woff2" crossorigin href="assets/graphik-semibold-web.woff2" />
-        <link rel="preload" as="font" type="font/woff2" crossorigin href="assets/graphik-bold-web.woff2" />
-        <link rel="preload" as="font" type="font/woff2" crossorigin href="assets/graphik-black-web.woff2" />
-
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
 
         <!--# echo var="ENVIRONMENT_OUTLET" encoding="none" -->
     </head>
-    <body>
+    <body class="mat-typography">
         <app-root></app-root>
     </body>
 </html>