Resolve "I//pas header"
MODIFY
angular.json
angular.json
{
- "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "$schema": "node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
],
"styles": [
"src/styles/styles.scss",
- "./node_modules/angular2-toaster/src/toaster.scss",
- "./node_modules/swagger-ui-dist/swagger-ui.css",
+ "node_modules/typeface-roboto/index.css",
+ "node_modules/angular2-toaster/src/toaster.scss",
+ "node_modules/swagger-ui-dist/swagger-ui.css",
"src/styles/swagger-custom-styles.css"
],
"scripts": [
- "./node_modules/swagger-ui-dist/swagger-ui-bundle.js",
- "./node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js"
+ "node_modules/swagger-ui-dist/swagger-ui-bundle.js",
+ "node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js"
],
"vendorChunk": true,
"extractLicenses": false,
"styles": [
"src/styles/styles.scss",
"node_modules/typeface-roboto/index.css",
- "./node_modules/angular2-toaster/src/toaster.scss",
- "./node_modules/swagger-ui-dist/swagger-ui.css",
+ "node_modules/angular2-toaster/src/toaster.scss",
+ "node_modules/swagger-ui-dist/swagger-ui.css",
"src/styles/swagger-custom-styles.css"
],
"scripts": []

MODIFY
docker/start-nginx-with-devportal.sh
docker/start-nginx-with-devportal.sh
@@ -24,15 +24,6 @@ then
fi
sed -i "s|FAVICON_FILE_URL|${FAVICON_FILE_URL:-favicon.ico}|g" "/usr/share/nginx/html/index.html"
-
-# Set the default logo
-if [ -n "$LOGO_FILE_URL" ]
-then
- printf "Using custom img url: %s\n" "$LOGO_FILE_URL"
-else
- export LOGO_FILE_URL="assets/ScheerPASLogo.svg"
-fi
-
# Set the default about logo
if [ -n "$ABOUT_LOGO_FILE_URL" ]
then

MODIFY
package-lock.json
package-lock.json
{
"name": "api-mgmt-dev-portal",
- "version": "7.7.1",
+ "version": "7.8.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
"dev": true
},
+ "@fortawesome/angular-fontawesome": {
+ "version": "0.9.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.9.0.tgz",
+ "integrity": "sha512-pJNJqxRTJChkUtywbqRuJRpmK/WNwqFqeN/GMmJmy3gHeCnWQ4SG0BwPJqaWqhi4gqII5dADijGts6wqeusxeQ==",
+ "requires": {
+ "tslib": "^2.2.0"
+ }
+ },
+ "@fortawesome/fontawesome-common-types": {
+ "version": "0.2.35",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+ "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
+ },
+ "@fortawesome/fontawesome-svg-core": {
+ "version": "1.2.35",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+ "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.2.35"
+ }
+ },
+ "@fortawesome/free-solid-svg-icons": {
+ "version": "5.15.3",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+ "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.2.35"
+ }
+ },
"@istanbuljs/schema": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"ini": {
- "version": "1.3.5",
- "resolved": "",
+ "version": "1.3.8",
+ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
"dev": true
},
"inquirer": {

MODIFY
package.json
package.json
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/router": "~12.1.1",
+ "@fortawesome/angular-fontawesome": "^0.9.0",
+ "@fortawesome/fontawesome-svg-core": "^1.2.35",
+ "@fortawesome/free-solid-svg-icons": "^5.15.3",
"angular2-toaster": "^8.0.0",
"keycloak-admin": "^1.14.18",
"keycloak-angular": "~8.2.0",

MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -56,6 +56,7 @@ import {SwaggerComponent} from './components/swagger/swagger.component';
import {MenuComponent} from './components/menu/menu.component';
import {AboutComponent} from './about/about.component';
import {TokenService} from './services/token.service';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
@@ -96,6 +97,7 @@ import {TokenService} from './services/token.service';
_MatMenuDirectivesModule,
MatMenuModule,
MatCardModule,
+ FontAwesomeModule,
],
providers: [
{

MODIFY
src/app/components/app-header/header.component.html
src/app/components/app-header/header.component.html
~ limitations under the License.
-->
-<nav>
- <img routerLink="/" src="{{ logo }}" class="logo clickable" alt="Logo">
-
+<header>
+ <div class="caption">API Developer Portal</div>
<div class="rightMenu">
<div class="floatRight">
- <mat-icon id="header-icon">desktop_windows</mat-icon>
- <div id="app-header">Developer Portal</div>
<div class="dropDownWrapper clickable" [matMenuTriggerFor]="menu">
- <mat-icon id="user-icon">person</mat-icon>
<div id="app-user">{{user}}</div>
- <mat-icon id="dropDown">keyboard_arrow_down</mat-icon>
+ <fa-icon class="header-icons" [icon]="faUserCircle"></fa-icon>
+ <fa-icon class="header-icons" id="caret" [icon]="faCaretDown"></fa-icon>
</div>
<mat-menu #menu="matMenu">
- <div mat-menu-item class="clickable" routerLink="/about">About</div>
- <div mat-menu-item class="clickable" (click)="logout()">Logout</div>
+ <div mat-menu-item class="clickable" routerLink="/about">
+ <fa-icon class="drop-icon" [icon]="faInfo"></fa-icon>
+ <span>About</span>
+ </div>
+ <div mat-menu-item class="clickable" (click)="logout()">
+ <fa-icon class="drop-icon" [icon]="faSignOutAlt"></fa-icon>
+ <span>Logout</span>
+ </div>
</mat-menu>
</div>
</div>
-</nav>
+</header>

MODIFY
src/app/components/app-header/header.component.scss
src/app/components/app-header/header.component.scss
* limitations under the License.
*/
-:host {
- background: var(--branding-header-bg-color);
- display: flex;
-
- padding: 18px;
- color: var(--branding-header-color);
-}
-
-nav {
+header {
+ background-image: url(^assets/ScheerPASLogo.svg),
+ linear-gradient(to right, transparent 0, transparent 48px, var(--white) 48px, var(--white) 248px, transparent 248px),
+ linear-gradient(to bottom, var(--blue) 0, var(--blue) 8px, var(--white) 8px);
+ background-repeat: no-repeat;
+ background-position: 64px center, left, center;
+ background-size: auto 20px, 100%, 100%;
+ height: 60px;
width: 100%;
+ box-sizing: border-box;
+ padding: 0 32px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-end;
+ position: fixed;
+ top: 0;
+ z-index: 2;
}
-.logo {
- height: 20px;
- width: 170px;
+header .caption {
+ display: flex;
+ flex-grow: 1;
+ margin: 0 0 0 216px;
+ font-size: 24px;
+ align-items: center;
+ font-weight: 200;
+ line-height: 20px;
}
.rightMenu {
@@ -58,6 +71,8 @@ mat-icon {
#app-user {
margin-top: 3px;
+ font-size: 14px;
+ font-weight: bold;
}
.dropDownWrapper {
@@ -77,3 +92,29 @@ mat-icon {
#dropDown {
margin-left: 0;
}
+
+.header-icons {
+ color: var(--blue-80);
+ height: 24px;
+ width: 24px;
+ font-size: 24px;
+ margin-left: 8px;
+ text-align: center;
+}
+
+.drop-icon {
+ color: var(--blue-80);
+ height: 24px;
+ width: 24px;
+ font-size: 24px;
+ margin-left: 8px;
+ margin-right: 16px;
+ vertical-align: sub;
+ display: inline-block;
+}
+
+#caret {
+ font-size: 14px;
+ line-height: 24px;
+ width: auto;
+}

MODIFY
src/app/components/app-header/header.component.ts
src/app/components/app-header/header.component.ts
import {Component} from '@angular/core';
import {KeycloakService} from 'keycloak-angular';
-import {environment} from '../../../environments/environment';
+import { faUserCircle, faCaretDown, faInfo, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-app-header',
@@ -24,9 +24,11 @@ import {environment} from '../../../environments/environment';
styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
-
- public user: string = this.keycloak.getKeycloakInstance().profile.username;
- public logo: string = environment.logoUrl;
+ public faUserCircle = faUserCircle;
+ public faCaretDown = faCaretDown;
+ public faInfo = faInfo;
+ public faSignOutAlt = faSignOutAlt;
+ public user: string = this.keycloak.getKeycloakInstance().profile.firstName + ' ' + this.keycloak.getKeycloakInstance().profile.lastName;
constructor(private keycloak: KeycloakService) {}
@@ -39,5 +41,4 @@ export class HeaderComponent {
redirectUri: location.href
});
}
-
}

MODIFY
src/environments/environment.prod.ts
src/environments/environment.prod.ts
@@ -19,7 +19,6 @@ export const environment = {
apiMgmtRealm: '${KEYCLOAK_REALM}',
apiMgmtUiRestUrl: '${API_MGMT_UI_REST_URL}',
keycloakAuthUrl: '${KEYCLOAK_AUTH_URL}',
- logoUrl: '${LOGO_FILE_URL}',
aboutLogoUrl: '${ABOUT_LOGO_FILE_URL}',
firstLink: '${FIRST_LINK}',
firstLinkLabel: '${FIRST_LINK_LABEL}',

MODIFY
src/environments/environment.ts
src/environments/environment.ts
@@ -23,7 +23,6 @@ export const environment = {
apiMgmtRealm: '[keycloakRealm]',
apiMgmtUiRestUrl: 'https://[apimanUiRestEndpoint]:[port]/apiman',
keycloakAuthUrl: 'https://[keycloakEndpoint]:[port]/auth',
- logoUrl: 'assets/ScheerPASLogo.svg',
aboutLogoUrl: 'assets/about-logo.png',
firstLink: 'https://scheer-pas.com',
firstLinkLabel: 'Project Site',

MODIFY
src/styles/styles.scss
src/styles/styles.scss
@import './material-icons.scss';
:root {
- --branding-bg-color: #06618e;
-
- --branding-header-bg-color: #c8c9cc;
- --branding-header-color: #6a747f;
-
- --branding-menu-color: white;
-
- --branding-button-bg: #2996cc;
- --branding-button-border-color: #2996cc;
+ /* Scheer Corporate Colors */
+ --red: rgba(208, 50, 55, 1);
+ --red-80: rgba(208, 50, 55, .8);
+ --red-60: rgba(208, 50, 55, .6);
+ --red-40: rgba(208, 50, 55, .4);
+ --red-20: rgba(208, 50, 55, .2);
+
+ --blue: rgba(41, 150, 204, 1);
+ --blue-80: rgba(41, 150, 204, .8);
+ --blue-60: rgba(41, 150, 204, .6);
+ --blue-40: rgba(41, 150, 204, .4);
+ --blue-20: rgba(41, 150, 204, .2);
+
+ --grey: rgba(186, 182, 185, 1);
+ --grey-80: rgba(186, 182, 185, .8);
+ --grey-60: rgba(186, 182, 185, .6);
+ --grey-40: rgba(186, 182, 185, .4);
+ --grey-20: rgba(186, 182, 185, .2);
+
+ --white: rgba(255, 255, 255, 1);
+
+ --dark-red: rgba(172, 30, 28, 1);
+ --dark-red-80: rgba(172, 30, 28, .8);
+ --dark-red-60: rgba(172, 30, 28, .6);
+ --dark-red-40: rgba(172, 30, 28, .4);
+ --dark-red-20: rgba(172, 30, 28, .2);
+
+ --dark-blue: rgba(5, 97, 141, 1);
+ --dark-blue-80: rgba(5, 97, 141, .8);
+ --dark-blue-60: rgba(5, 97, 141, .6);
+ --dark-blue-40: rgba(5, 97, 141, .4);
+ --dark-blue-20: rgba(5, 97, 141, .2);
+
+ --dark-grey: rgba(106, 116, 127, 1);
+ --dark-grey-80: rgba(106, 116, 127, .8);
+ --dark-grey-60: rgba(106, 116, 127, .6);
+ --dark-grey-40: rgba(106, 116, 127, .4);
+ --dark-grey-20: rgba(106, 116, 127, .2);
+
+ --black: rgba(0, 0, 0, 1);
+ --black-80: rgba(0, 0, 0, .8);
+ --black-60: rgba(0, 0, 0, .6);
+ --black-40: rgba(0, 0, 0, .4);
+ --black-20: rgba(0, 0, 0, .2);
+
+ --orange: rgba(239, 124, 0, 1);
+ --orange-80: rgba(239, 124, 0, .8);
+ --orange-60: rgba(239, 124, 0, .6);
+ --orange-40: rgba(239, 124, 0, .4);
+ --orange-20: rgba(239, 124, 0, .2);
+
+ --Pantone-vivid-navy: rgba(0, 67, 255, 1);
+ --Pantone-vivid-navy-80: rgba(0, 67, 255, .8);
+ --Pantone-vivid-navy-60: rgba(0, 67, 255, .6);
+ --Pantone-vivid-navy-40: rgba(0, 67, 255, .4);
+ --Pantone-vivid-navy-20: rgba(0, 67, 255, .2);
+
+ --Pantone-deep-navy: rgba(17, 44, 116, 1);
+ --Pantone-deep-navy-80: rgba(17, 44, 116, .8);
+ --Pantone-deep-navy-60: rgba(17, 44, 116, .6);
+ --Pantone-deep-navy-40: rgba(17, 44, 116, .4);
+ --Pantone-deep-navy-20: rgba(17, 44, 116, .2);
+
+ --Pantone-1797C: rgba(192, 66, 64, 1);
+ --Pantone-1797C-80: rgba(192, 66, 64, .8);
+ --Pantone-1797C-60: rgba(192, 66, 64, .6);
+ --Pantone-1797C-40: rgba(192, 66, 64, .4);
+ --Pantone-1797C-20: rgba(192, 66, 64, .2);
+
+ --Pantone-black: rgba(15, 21, 30, 1);
+ --Pantone-black-80: rgba(15, 21, 30, .8);
+ --Pantone-black-60: rgba(15, 21, 30, .6);
+ --Pantone-black-40: rgba(15, 21, 30, .4);
+ --Pantone-black-20: rgba(15, 21, 30, .2);
+
+ /* light grey */
+ --Pantone-P106-1C: rgba(244, 245, 248, 1);
+
+ /* grey */
+ --Pantone-P179-2U: rgba(218, 220, 223, 1);
+
+ /* medium grey */
+ --Pantone-P174-4U: rgba(146, 148, 153, 1);
+
+ /* dark grey */
+ --Pantone-P174-10U: rgba(105, 108, 118, 1);
+
+
+ /* Devportal Colors */
+
+ --branding-bg-color: var(--blue);
+
+ --branding-menu-color: var(--white);
+
+ --branding-button-bg: var(--blue);
+ --branding-button-border-color: var(--blue);
+ --branding-button-hover-color: var(--blue);
+ --branding-button-focus-color: var(--blue);
--branding-container-header-color: var(--branding-bg-color);
- --branding-button-hover-color: #06628e;
- --branding-button-focus-color: #06628e;
-
- --alert-color-hover: #ac1e1c;
+ --alert-color-hover: var(--red);
--branding-grey-color-fill: #bab6b9;
--branding-color-green: #0F9D58;

Resolve PAS-1366 "I//pas header"