From a3ffaed6be503b2e997ecfa9ba7fa0b35802df57 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 16 Aug 2022 12:28:33 +0300 Subject: [PATCH 1/3] feat: profile menu on click --- package-lock.json | 244 +++++---------------------- src/app/app.component.css | 3 + src/app/app.module.ts | 9 + src/app/header/header.component.css | 52 ++++++ src/app/header/header.component.html | 76 ++++++++- src/app/header/header.component.ts | 35 +++- 6 files changed, 217 insertions(+), 202 deletions(-) diff --git a/package-lock.json b/package-lock.json index 42087a4..e6b487d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -393,11 +393,6 @@ "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" }, - "node_modules/@angular-devkit/build-angular/node_modules/fast-json-stable-stringify": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", - "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" - }, "node_modules/@angular-devkit/build-angular/node_modules/glob": { "version": "7.1.7", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", @@ -729,21 +724,6 @@ } } }, - "node_modules/@angular-devkit/build-angular/node_modules/webpack-dev-server/node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, "node_modules/@angular-devkit/build-angular/node_modules/webpack-dev-server/node_modules/schema-utils": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", @@ -911,11 +891,31 @@ "yarn": ">= 1.13.0" } }, + "node_modules/@angular-devkit/core/node_modules/ajv": { + "version": "8.6.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz", + "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, "node_modules/@angular-devkit/core/node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" }, + "node_modules/@angular-devkit/core/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + }, "node_modules/@angular-devkit/core/node_modules/rxjs": { "version": "6.6.7", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", @@ -4438,22 +4438,6 @@ "node": ">=v14" } }, - "node_modules/@commitlint/config-validator/node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dev": true, - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, "node_modules/@commitlint/ensure": { "version": "17.0.0", "resolved": "https://registry.npmjs.org/@commitlint/ensure/-/ensure-17.0.0.tgz", @@ -5174,21 +5158,6 @@ "schema-utils": "^2.7.0" } }, - "node_modules/@jsdevtools/coverage-istanbul-loader/node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, "node_modules/@jsdevtools/coverage-istanbul-loader/node_modules/schema-utils": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", @@ -5990,13 +5959,13 @@ } }, "node_modules/ajv": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz", - "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==", + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dependencies": { "fast-deep-equal": "^3.1.1", - "json-schema-traverse": "^1.0.0", - "require-from-string": "^2.0.2", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" }, "funding": { @@ -6056,11 +6025,6 @@ "ajv": "^6.9.1" } }, - "node_modules/ajv/node_modules/json-schema-traverse": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" - }, "node_modules/alphanum-sort": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", @@ -6390,21 +6354,6 @@ "webpack": ">=2" } }, - "node_modules/babel-loader/node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, "node_modules/babel-loader/node_modules/json5": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", @@ -10750,22 +10699,6 @@ "node": ">=6" } }, - "node_modules/har-validator/node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "devOptional": true, - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, "node_modules/hard-rejection": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz", @@ -17531,21 +17464,6 @@ "url": "https://opencollective.com/webpack" } }, - "node_modules/schema-utils/node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -20677,11 +20595,6 @@ "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" }, - "fast-json-stable-stringify": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", - "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" - }, "glob": { "version": "7.1.7", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", @@ -20925,17 +20838,6 @@ "yargs": "^13.3.2" }, "dependencies": { - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, "schema-utils": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", @@ -21062,11 +20964,27 @@ "source-map": "0.7.3" }, "dependencies": { + "ajv": { + "version": "8.6.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz", + "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==", + "requires": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + } + }, "fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" }, + "json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + }, "rxjs": { "version": "6.6.7", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", @@ -23612,20 +23530,6 @@ "requires": { "@commitlint/types": "^17.0.0", "ajv": "^6.12.6" - }, - "dependencies": { - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dev": true, - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - } } }, "@commitlint/ensure": { @@ -24156,17 +24060,6 @@ "schema-utils": "^2.7.0" }, "dependencies": { - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, "schema-utils": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", @@ -24854,21 +24747,14 @@ } }, "ajv": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz", - "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==", + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "requires": { "fast-deep-equal": "^3.1.1", - "json-schema-traverse": "^1.0.0", - "require-from-string": "^2.0.2", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" - }, - "dependencies": { - "json-schema-traverse": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" - } } }, "ajv-errors": { @@ -25153,17 +25039,6 @@ "schema-utils": "^2.6.5" }, "dependencies": { - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, "json5": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", @@ -28462,20 +28337,6 @@ "requires": { "ajv": "^6.12.3", "har-schema": "^2.0.0" - }, - "dependencies": { - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "devOptional": true, - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - } } }, "hard-rejection": { @@ -33458,19 +33319,6 @@ "@types/json-schema": "^7.0.8", "ajv": "^6.12.5", "ajv-keywords": "^3.5.2" - }, - "dependencies": { - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - } } }, "select-hose": { diff --git a/src/app/app.component.css b/src/app/app.component.css index c3c63f3..4327bf0 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -3,6 +3,9 @@ html, body { margin: 0; height: 100%; background: var(--sapBackgroundColor); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; } .app-content { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2b295de..25d9874 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -18,14 +18,23 @@ import '@ui5/webcomponents/dist/CustomListItem'; import '@ui5/webcomponents/dist/Panel'; import '@ui5/webcomponents/dist/Dialog'; import '@ui5/webcomponents/dist/Label'; +import "@ui5/webcomponents/dist/Popover"; import '@ui5/webcomponents/dist/TextArea'; import '@ui5/webcomponents/dist/StandardListItem'; import '@ui5/webcomponents/dist/Tab'; import '@ui5/webcomponents/dist/TabContainer'; import '@ui5/webcomponents-fiori/dist/ShellBar'; import '@ui5/webcomponents-fiori/dist/ShellBarItem'; +import "@ui5/webcomponents/dist/Switch"; import '@ui5/webcomponents-icons/dist/palette.js'; import '@ui5/webcomponents-fiori/dist/Assets'; +import "@ui5/webcomponents-icons/dist/settings.js"; +import "@ui5/webcomponents-icons/dist/sys-help.js"; +import "@ui5/webcomponents-icons/dist/log.js"; +import "@ui5/webcomponents-icons/dist/account.js"; +import "@ui5/webcomponents-icons/dist/private.js"; +import "@ui5/webcomponents-icons/dist/loan.js"; +import "@ui5/webcomponents-icons/dist/globe.js"; setTheme('sap_horizon'); @NgModule({ declarations: [ diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css index 4c1f829..df2fabb 100644 --- a/src/app/header/header.component.css +++ b/src/app/header/header.component.css @@ -13,4 +13,56 @@ height: 2rem; margin-right: 1rem; margin-left: 2rem; +} + +.app-bar-profile-popover { + width: 250px; +} + +#settings-dialog { + max-width: 300px; +} + +.dialog-button { + display: flex; + justify-content: flex-end; + margin-top: 0.625rem; + margin-bottom: -0.425rem; +} + +.profile-settings, .help-header { + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +.profile-text { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 1rem; +} + +.app-header-logo { + height: 2rem; +} + +.profile-settings-list { + margin-top: 1.25rem; +} + +.aligned { + align-items: center; + gap: 0.725rem; +} + +.help-dialog-text { + font-size: 0.875rem; +} + +.profile-rtl-switch { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; } \ No newline at end of file diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 6039ef3..a3c15be 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,7 +1,8 @@ -
+
+ notifications-count="2" + (profileClick)="handleProfileClick($event)"> @@ -17,7 +18,7 @@ horizontal-align="Right" header-text="Theme" > - + SAP Horizon Morning SAP Horizon Evening SAP Horizon HCB @@ -28,4 +29,73 @@ SAP Quartz HCW + + +
+ +
+ John Doe + Angular Developer +
+
+ +
+ + Settings + Help + Sign out + +
+ + + +
+
+
+ RTL +
+ +
+
+ +
+
+ Compact +
+ +
+ +
+ Close +
+ + + +
+ + UI5 Web Components Angular Sample App +
+ +

+ Release: b225.20220729335
+ Server: 31pc212x3132
+ Timestamp: 2022-07-28T10:29:03.159+0200
+ Company ID: SAP
+ UI version: SAP Fiori
+ Edition: Enterprise
+ Admin version: Angular Admin
+

+ For more information, please visit our documentation. +

+ +

+ Close +
+ +
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 652c13d..c92307b 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -11,6 +11,7 @@ import {setTheme } from '@ui5/webcomponents-base/dist/config/Theme'; export class HeaderComponent implements OnInit { @Input() selectionChange; @ViewChild('themeSettingsPopover') themeSettingsPopover: ElementRef; + @ViewChild('profileSettingsPopover') profileSettingsPopover: ElementRef; constructor() { } @@ -26,4 +27,36 @@ export class HeaderComponent implements OnInit { this.themeSettingsPopover.nativeElement.close(); } -} + handleProfileClick(event) { + this.profileSettingsPopover.nativeElement.showAt(event.detail.targetRef); + } + + handleProfileSettingsSelect(event) { + const selectedKey = event.detail.item.getAttribute('data-key'); + if (selectedKey === "settings") { + window["settings-dialog"].show(event.detail.targetRef); + } else if (selectedKey === "help") { + window["help-dialog"].show(event.detail.targetRef); + } + } + + handleRtlSwitchChange(event) { + document.body.dir = event.target.checked ? "rtl" : "ltr"; + } + + handleContentDensitySwitchChange(event) { + if (event.target.checked) { + document.body.classList.add("ui5-content-density-compact"); + } else { + document.body.classList.remove("ui5-content-density-compact"); + } + } + + handleSettingsDialogCloseButtonClick(event){ + window["settings-dialog"].close(); + } + + handleHelpDialogCloseButtonClick(event){ + window["help-dialog"].close(); + } +} \ No newline at end of file From cbf32c36c2f942a34163d7e2ca8f11e2b69bdd5f Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 16 Aug 2022 12:44:20 +0300 Subject: [PATCH 2/3] fix: lint fixes --- src/app/app.module.ts | 18 +++++++++--------- src/app/header/header.component.html | 6 +++--- src/app/header/header.component.ts | 24 ++++++++++++------------ 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 25d9874..160b265 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -18,23 +18,23 @@ import '@ui5/webcomponents/dist/CustomListItem'; import '@ui5/webcomponents/dist/Panel'; import '@ui5/webcomponents/dist/Dialog'; import '@ui5/webcomponents/dist/Label'; -import "@ui5/webcomponents/dist/Popover"; +import '@ui5/webcomponents/dist/Popover'; import '@ui5/webcomponents/dist/TextArea'; import '@ui5/webcomponents/dist/StandardListItem'; import '@ui5/webcomponents/dist/Tab'; import '@ui5/webcomponents/dist/TabContainer'; import '@ui5/webcomponents-fiori/dist/ShellBar'; import '@ui5/webcomponents-fiori/dist/ShellBarItem'; -import "@ui5/webcomponents/dist/Switch"; +import '@ui5/webcomponents/dist/Switch'; import '@ui5/webcomponents-icons/dist/palette.js'; import '@ui5/webcomponents-fiori/dist/Assets'; -import "@ui5/webcomponents-icons/dist/settings.js"; -import "@ui5/webcomponents-icons/dist/sys-help.js"; -import "@ui5/webcomponents-icons/dist/log.js"; -import "@ui5/webcomponents-icons/dist/account.js"; -import "@ui5/webcomponents-icons/dist/private.js"; -import "@ui5/webcomponents-icons/dist/loan.js"; -import "@ui5/webcomponents-icons/dist/globe.js"; +import '@ui5/webcomponents-icons/dist/settings.js'; +import '@ui5/webcomponents-icons/dist/sys-help.js'; +import '@ui5/webcomponents-icons/dist/log.js'; +import '@ui5/webcomponents-icons/dist/account.js'; +import '@ui5/webcomponents-icons/dist/private.js'; +import '@ui5/webcomponents-icons/dist/loan.js'; +import '@ui5/webcomponents-icons/dist/globe.js'; setTheme('sap_horizon'); @NgModule({ declarations: [ diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index a3c15be..1ad4d58 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -39,7 +39,7 @@
- John Doe + John Doe Angular Developer
@@ -76,12 +76,12 @@ -
+
UI5 Web Components Angular Sample App
-

+

Release: b225.20220729335
Server: 31pc212x3132
Timestamp: 2022-07-28T10:29:03.159+0200
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index c92307b..d6d6d0a 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -33,30 +33,30 @@ export class HeaderComponent implements OnInit { handleProfileSettingsSelect(event) { const selectedKey = event.detail.item.getAttribute('data-key'); - if (selectedKey === "settings") { - window["settings-dialog"].show(event.detail.targetRef); - } else if (selectedKey === "help") { - window["help-dialog"].show(event.detail.targetRef); + if (selectedKey === 'settings') { + window['settings-dialog'].show(event.detail.targetRef); + } else if (selectedKey === 'help') { + window['help-dialog'].show(event.detail.targetRef); } } handleRtlSwitchChange(event) { - document.body.dir = event.target.checked ? "rtl" : "ltr"; + document.body.dir = event.target.checked ? 'rtl' : 'ltr'; } handleContentDensitySwitchChange(event) { if (event.target.checked) { - document.body.classList.add("ui5-content-density-compact"); + document.body.classList.add('ui5-content-density-compact'); } else { - document.body.classList.remove("ui5-content-density-compact"); + document.body.classList.remove('ui5-content-density-compact'); } } - handleSettingsDialogCloseButtonClick(event){ - window["settings-dialog"].close(); + handleSettingsDialogCloseButtonClick(event) { + window['settings-dialog'].close(); } - handleHelpDialogCloseButtonClick(event){ - window["help-dialog"].close(); + handleHelpDialogCloseButtonClick(event) { + window['help-dialog'].close(); } -} \ No newline at end of file +} From 02c8c8f171555dbee9ee30be5d61ea02e36faf4c Mon Sep 17 00:00:00 2001 From: hinzzx Date: Mon, 22 Aug 2022 15:27:41 +0300 Subject: [PATCH 3/3] chore: updated header-text for help dialog --- package-lock.json | 246 ++++++++++++++++++++++----- src/app/header/header.component.css | 25 ++- src/app/header/header.component.html | 14 +- 3 files changed, 229 insertions(+), 56 deletions(-) diff --git a/package-lock.json b/package-lock.json index e6b487d..41a0a19 100644 --- a/package-lock.json +++ b/package-lock.json @@ -393,6 +393,11 @@ "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" }, + "node_modules/@angular-devkit/build-angular/node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" + }, "node_modules/@angular-devkit/build-angular/node_modules/glob": { "version": "7.1.7", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", @@ -724,6 +729,21 @@ } } }, + "node_modules/@angular-devkit/build-angular/node_modules/webpack-dev-server/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, "node_modules/@angular-devkit/build-angular/node_modules/webpack-dev-server/node_modules/schema-utils": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", @@ -891,31 +911,11 @@ "yarn": ">= 1.13.0" } }, - "node_modules/@angular-devkit/core/node_modules/ajv": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz", - "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==", - "dependencies": { - "fast-deep-equal": "^3.1.1", - "json-schema-traverse": "^1.0.0", - "require-from-string": "^2.0.2", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, "node_modules/@angular-devkit/core/node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" }, - "node_modules/@angular-devkit/core/node_modules/json-schema-traverse": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" - }, "node_modules/@angular-devkit/core/node_modules/rxjs": { "version": "6.6.7", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", @@ -4438,6 +4438,22 @@ "node": ">=v14" } }, + "node_modules/@commitlint/config-validator/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, "node_modules/@commitlint/ensure": { "version": "17.0.0", "resolved": "https://registry.npmjs.org/@commitlint/ensure/-/ensure-17.0.0.tgz", @@ -5158,6 +5174,21 @@ "schema-utils": "^2.7.0" } }, + "node_modules/@jsdevtools/coverage-istanbul-loader/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, "node_modules/@jsdevtools/coverage-istanbul-loader/node_modules/schema-utils": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", @@ -5959,13 +5990,13 @@ } }, "node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "version": "8.6.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz", + "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==", "dependencies": { "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", "uri-js": "^4.2.2" }, "funding": { @@ -6025,6 +6056,11 @@ "ajv": "^6.9.1" } }, + "node_modules/ajv/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + }, "node_modules/alphanum-sort": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", @@ -6354,6 +6390,21 @@ "webpack": ">=2" } }, + "node_modules/babel-loader/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, "node_modules/babel-loader/node_modules/json5": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", @@ -10699,6 +10750,22 @@ "node": ">=6" } }, + "node_modules/har-validator/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "devOptional": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, "node_modules/hard-rejection": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz", @@ -17464,6 +17531,21 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/schema-utils/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -20595,6 +20677,11 @@ "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" }, + "fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" + }, "glob": { "version": "7.1.7", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", @@ -20838,6 +20925,17 @@ "yargs": "^13.3.2" }, "dependencies": { + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, "schema-utils": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", @@ -20964,27 +21062,11 @@ "source-map": "0.7.3" }, "dependencies": { - "ajv": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz", - "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==", - "requires": { - "fast-deep-equal": "^3.1.1", - "json-schema-traverse": "^1.0.0", - "require-from-string": "^2.0.2", - "uri-js": "^4.2.2" - } - }, "fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" }, - "json-schema-traverse": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" - }, "rxjs": { "version": "6.6.7", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", @@ -23530,6 +23612,20 @@ "requires": { "@commitlint/types": "^17.0.0", "ajv": "^6.12.6" + }, + "dependencies": { + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + } } }, "@commitlint/ensure": { @@ -24060,6 +24156,17 @@ "schema-utils": "^2.7.0" }, "dependencies": { + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, "schema-utils": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", @@ -24747,14 +24854,21 @@ } }, "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "version": "8.6.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz", + "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==", "requires": { "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", "uri-js": "^4.2.2" + }, + "dependencies": { + "json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + } } }, "ajv-errors": { @@ -25039,6 +25153,17 @@ "schema-utils": "^2.6.5" }, "dependencies": { + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, "json5": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", @@ -28337,6 +28462,20 @@ "requires": { "ajv": "^6.12.3", "har-schema": "^2.0.0" + }, + "dependencies": { + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "devOptional": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + } } }, "hard-rejection": { @@ -33319,6 +33458,19 @@ "@types/json-schema": "^7.0.8", "ajv": "^6.12.5", "ajv-keywords": "^3.5.2" + }, + "dependencies": { + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + } } }, "select-hose": { @@ -35487,4 +35639,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css index df2fabb..dd2d3ae 100644 --- a/src/app/header/header.component.css +++ b/src/app/header/header.component.css @@ -34,6 +34,11 @@ display: flex; flex-direction: row; justify-content: flex-start; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + -webkit-box-pack: start; + -ms-flex-pack: start; } .profile-text { @@ -51,11 +56,6 @@ margin-top: 1.25rem; } -.aligned { - align-items: center; - gap: 0.725rem; -} - .help-dialog-text { font-size: 0.875rem; } @@ -65,4 +65,19 @@ display: flex; align-items: center; justify-content: space-between; +} + +#header-title-align{ + margin: 1rem 0; + gap: 0.225rem; +} + +#header-logo-align { + margin: 0.225rem 3.225rem 0.225rem 0; + align-items: center; + gap: 0.435rem; +} + +#help-dialog::part(header){ + justify-content: flex-start; } \ No newline at end of file diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 1ad4d58..e8d7464 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -75,11 +75,17 @@ - -

+ + +
+ + Help +
+ +
UI5 Web Components Angular Sample App -
+

Release: b225.20220729335
@@ -90,7 +96,7 @@ Edition: Enterprise
Admin version: Angular Admin

- For more information, please visit our documentation. + For more information, please visit our documentation.