From 60f7a39b4a9e5c125fb674cf80a0c0fef3ae9631 Mon Sep 17 00:00:00 2001 From: SheenaMalhotra182 Date: Fri, 14 Oct 2022 02:59:43 +0530 Subject: [PATCH] added About Design Changes --- .../about-extension-list.component.html | 53 ++++-- .../about-extension-list.component.scss | 0 .../about-extension-list.component.ts | 59 ++++--- .../about-github-link.component.html | 45 ++++-- .../about-github-link.component.scss | 79 ++++++++- .../about-github-link.component.ts | 14 +- .../about-license-list.component.html | 53 ++++-- .../about-license-list.component.scss | 105 +++++++++++- .../about-license-list.component.ts | 14 +- .../module-list.component.html | 53 ++++-- .../module-list.component.scss | 107 +++++++++++++ .../module-list.component.ts | 15 +- .../about-package/package-list.component.html | 53 ++++-- .../about-package/package-list.component.scss | 107 +++++++++++++ .../about-package/package-list.component.ts | 15 +- .../about-platform-version.component.html | 151 ++++++++++-------- .../about-platform-version.component.scss | 77 +++++++++ .../about-platform-version.component.ts | 17 +- .../about-server-settings.component.html | 47 ++++-- .../about-server-settings.component.scss | 78 ++++++++- .../about-server-settings.component.ts | 14 +- .../about-status-list.component.html | 53 ++++-- .../about-status-list.component.scss | 107 +++++++++++++ .../about-status-list.component.ts | 15 +- lib/core/src/lib/about/about.component.html | 5 - lib/core/src/lib/about/about.component.scss | 3 +- 26 files changed, 1159 insertions(+), 180 deletions(-) create mode 100644 lib/core/src/lib/about/about-extension-list/about-extension-list.component.scss create mode 100644 lib/core/src/lib/about/about-module-list/module-list.component.scss create mode 100644 lib/core/src/lib/about/about-package/package-list.component.scss create mode 100644 lib/core/src/lib/about/about-platform-version/about-platform-version.component.scss create mode 100644 lib/core/src/lib/about/about-status-list/about-status-list.component.scss diff --git a/lib/core/src/lib/about/about-extension-list/about-extension-list.component.html b/lib/core/src/lib/about/about-extension-list/about-extension-list.component.html index f58a2cf6fa..d95b1f82fa 100644 --- a/lib/core/src/lib/about/about-extension-list/about-extension-list.component.html +++ b/lib/core/src/lib/about/about-extension-list/about-extension-list.component.html @@ -1,11 +1,44 @@ - - - - {{ column.header | translate }} - - {{ column.cell(row) }} - +
- - - +
+ +
+
+ + {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}} + {{ 'ABOUT.PLUGINS.TITLE' | translate }} + +
+ +
+ + + + + +
+
+ +
+ + + + {{ column.header | translate }} + + {{ column.cell(row) }} + + + + + +
+ + + +
+
+ + +
+ +
diff --git a/lib/core/src/lib/about/about-extension-list/about-extension-list.component.scss b/lib/core/src/lib/about/about-extension-list/about-extension-list.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/lib/core/src/lib/about/about-extension-list/about-extension-list.component.ts b/lib/core/src/lib/about/about-extension-list/about-extension-list.component.ts index 3757eb727f..3336145d4d 100644 --- a/lib/core/src/lib/about/about-extension-list/about-extension-list.component.ts +++ b/lib/core/src/lib/about/about-extension-list/about-extension-list.component.ts @@ -15,31 +15,46 @@ * limitations under the License. */ -import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core'; -import { ExtensionRef } from '@alfresco/adf-extensions'; +import { + Component, + ChangeDetectionStrategy, + Input, +} from "@angular/core"; +import { ExtensionRef } from "@alfresco/adf-extensions"; @Component({ - selector: 'adf-about-extension-list', - templateUrl: './about-extension-list.component.html', - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'adf-about-extension-list', + templateUrl: './about-extension-list.component.htm', + styleUrls: ['./about-extention-list.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class AboutExtensionListComponent { - columns = [ - { - columnDef: 'name', - header: 'ABOUT.PLUGINS.NAME', - cell: (row: ExtensionRef) => `${row.$name}` - }, - { - columnDef: 'version', - header: 'ABOUT.PLUGINS.VERSION', - cell: (row: ExtensionRef) => `${row.$version}` + columns = [ + { + columnDef: "name", + header: "ABOUT.PLUGINS.NAME", + cell: (row: ExtensionRef) => `${row.$name}`, + }, + { + columnDef: "version", + header: "ABOUT.PLUGINS.VERSION", + cell: (row: ExtensionRef) => `${row.$version}`, + }, + ]; + + displayedColumns = this.columns.map((x) => x.columnDef); + + @Input() + data: Array = []; + + dropdownExpandedStatus = false; + dropdownToggle = true; + + toggleDropdown() { + this.dropdownExpandedStatus = !this.dropdownExpandedStatus; + + if (!this.dropdownExpandedStatus) { + this.dropdownToggle = true; + } } - ]; - - displayedColumns = this.columns.map((x) => x.columnDef); - - @Input() - data: Array = []; } diff --git a/lib/core/src/lib/about/about-github-link/about-github-link.component.html b/lib/core/src/lib/about/about-github-link/about-github-link.component.html index b2cbffa42d..3fb18e0663 100644 --- a/lib/core/src/lib/about/about-github-link/about-github-link.component.html +++ b/lib/core/src/lib/about/about-github-link/about-github-link.component.html @@ -1,14 +1,39 @@ -
-
{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}
- -

{{application}}

-

{{ 'ABOUT.VERSION' | translate }}: {{ version }}

+
+ +
+ +
+
+ + {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}} + {{ 'ABOUT.SOURCE_CODE.TITLE' | translate }} +
+ +
+ + + + + +
+
+ +
+
{{ 'ABOUT.VERSION' | translate }}: {{version}}
+
+ + + +
+
{{ 'ABOUT.SOURCE_CODE.DESCRIPTION' | translate }} +
+
{{url}}
+
-
- {{ 'ABOUT.SOURCE_CODE.DESCRIPTION' | translate }} -
- + + +
+
diff --git a/lib/core/src/lib/about/about-github-link/about-github-link.component.scss b/lib/core/src/lib/about/about-github-link/about-github-link.component.scss index 16d6a6e6ac..7f8e50d807 100644 --- a/lib/core/src/lib/about/about-github-link/about-github-link.component.scss +++ b/lib/core/src/lib/about/about-github-link/about-github-link.component.scss @@ -1,3 +1,78 @@ -.adf-github-link-container { - padding: 10px; +.app-github-link-container { + margin: 0px 0px -24px 0px; + overflow: hidden; + height: 100%; + width: 100%; +} + +.app-github-link-row { + margin: 24px 24px 24px 24px; + width: 95%; + border: 1px solid rgba(33, 33, 33, 0.12); + border-radius: 12px; +} + +.app-github-link-heading { + display: flex; + padding-left: 1rem; + +} + +.app-github-link-div { + display: flex; + width: 60%; + cursor: pointer; + height: 32px; + padding: 24px 0px; +} + +.app-github-link-icon { + padding-top: 4px; + cursor: pointer; + color: var(--theme-grey-color); +} + +.app-github-link-title { + margin-left: 0.6rem; + margin-top: 4px; + letter-spacing: .15px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 24px; +} + +.app-github-link-divider { + color: rgba(33, 33, 33, 0.12); + padding-left: -1px; + padding-right: 1px; +} + +.app-github-link-dropdown { + padding: 0rem 1rem; +} + +.app-github-link-dropdown-heading { + display: flex; + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-github-link-dropdown-details { + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-mat-divider { + color: rgba(33, 33, 33, 0.12); } diff --git a/lib/core/src/lib/about/about-github-link/about-github-link.component.ts b/lib/core/src/lib/about/about-github-link/about-github-link.component.ts index 36c91e8221..7ec18b80a0 100644 --- a/lib/core/src/lib/about/about-github-link/about-github-link.component.ts +++ b/lib/core/src/lib/about/about-github-link/about-github-link.component.ts @@ -15,12 +15,11 @@ * limitations under the License. */ -import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'adf-about-github-link', templateUrl: './about-github-link.component.html', - encapsulation: ViewEncapsulation.None }) export class AboutGithubLinkComponent { /** Commit corresponding to the version of ADF to be used. */ @@ -35,5 +34,16 @@ export class AboutGithubLinkComponent { @Input() application: string = ''; + dropdownExpandedStatus = false; + dropdownToggle = true; + constructor() {} + + toggleDropdown() { + this.dropdownExpandedStatus = !this.dropdownExpandedStatus; + + if (!this.dropdownExpandedStatus) { + this.dropdownToggle = true; + } + } } diff --git a/lib/core/src/lib/about/about-license-list/about-license-list.component.html b/lib/core/src/lib/about/about-license-list/about-license-list.component.html index d84eb685e5..710f2fa6cb 100644 --- a/lib/core/src/lib/about/about-license-list/about-license-list.component.html +++ b/lib/core/src/lib/about/about-license-list/about-license-list.component.html @@ -1,11 +1,44 @@ - - - - {{ column.header | translate }} - - - +
- - - +
+ +
+
+ + {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}} + {{ 'ABOUT.LICENSE.TITLE' | translate }} + +
+ +
+ + + + + +
+
+ +
+ + + + {{ column.header | translate }} + + + + + + + +
+ + + +
+
+ + +
+ +
diff --git a/lib/core/src/lib/about/about-license-list/about-license-list.component.scss b/lib/core/src/lib/about/about-license-list/about-license-list.component.scss index ed2bfbb093..1170803de2 100644 --- a/lib/core/src/lib/about/about-license-list/about-license-list.component.scss +++ b/lib/core/src/lib/about/about-license-list/about-license-list.component.scss @@ -1,4 +1,107 @@ mat-cell { white-space: pre-line; - line-height: 30px; + line-height: 48px; +} + +mat-table { + width: 100%; + font-family: "Open Sans"; +} + +mat-row { + border: none; +} + +mat-header-row { + height: 32px; + padding: 8px 0px; +} + +mat-header-cell { + flex: 0 1 40%; + +} + +mat-cell { + flex: 0 1 40%; + +} + +.app-license-list-container { + margin: 0px 0px -24px 0px; + overflow: hidden; + height: 100%; + width: 100%; +} + +.app-license-list-row { + margin: 24px 24px 24px 24px; + width: 95%; + border: 1px solid rgba(33, 33, 33, 0.12); + border-radius: 12px; +} + +.app-license-list-heading { + display: flex; + padding-left: 1rem; + +} + +.app-license-list-div { + display: flex; + width: 60%; + cursor: pointer; + height: 32px; + padding: 24px 0px; +} + +.app-license-list-icon { + padding-top: 4px; + cursor: pointer; + color: var(--theme-grey-color); +} + +.app-license-list-title { + margin-left: 0.6rem; + margin-top: 4px; + letter-spacing: .15px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 24px; +} + +.app-license-list-divider { + color: rgba(33, 33, 33, 0.12); + padding-left: -1px; + padding-right: 1px; +} + +.app-license-list-dropdown { + padding: 0rem 1rem; +} + +.app-license-list-dropdown-heading { + display: flex; + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-license-list-dropdown-details { + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-mat-divider { + color: rgba(33, 33, 33, 0.12); } diff --git a/lib/core/src/lib/about/about-license-list/about-license-list.component.ts b/lib/core/src/lib/about/about-license-list/about-license-list.component.ts index 7c091e2e6a..600a24fdd2 100644 --- a/lib/core/src/lib/about/about-license-list/about-license-list.component.ts +++ b/lib/core/src/lib/about/about-license-list/about-license-list.component.ts @@ -15,14 +15,13 @@ * limitations under the License. */ -import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core'; +import { Component, ChangeDetectionStrategy, Input } from '@angular/core'; import { LicenseData } from '../interfaces'; @Component({ selector: 'adf-about-license-list', templateUrl: './about-license-list.component.html', styleUrls: ['./about-license-list.component.scss'], - encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }) export class AboutLicenseListComponent { @@ -43,4 +42,15 @@ export class AboutLicenseListComponent { @Input() data: LicenseData[] = []; + + dropdownExpandedStatus = false; + dropdownToggle = true; + + toggleDropdown() { + this.dropdownExpandedStatus = !this.dropdownExpandedStatus; + + if (!this.dropdownExpandedStatus) { + this.dropdownToggle = true; + } + } } diff --git a/lib/core/src/lib/about/about-module-list/module-list.component.html b/lib/core/src/lib/about/about-module-list/module-list.component.html index f58a2cf6fa..fff39bbfe0 100644 --- a/lib/core/src/lib/about/about-module-list/module-list.component.html +++ b/lib/core/src/lib/about/about-module-list/module-list.component.html @@ -1,11 +1,44 @@ - - - - {{ column.header | translate }} - - {{ column.cell(row) }} - +
- - - +
+ +
+
+ + {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}} + {{ 'ABOUT.MODULES.TITLE' | translate }} + +
+ +
+ + + + + +
+
+ +
+ + + + {{ column.header | translate }} + + {{ column.cell(row) }} + + + + + +
+ + + +
+
+ + +
+ +
diff --git a/lib/core/src/lib/about/about-module-list/module-list.component.scss b/lib/core/src/lib/about/about-module-list/module-list.component.scss new file mode 100644 index 0000000000..ed952e1f23 --- /dev/null +++ b/lib/core/src/lib/about/about-module-list/module-list.component.scss @@ -0,0 +1,107 @@ +mat-cell { + white-space: pre-line; + line-height: 48px; +} + +mat-table { + width: 100%; + font-family: "Open Sans"; +} + +mat-row { + border: none; +} + +mat-header-row { + height: 32px; + padding: 8px 0px; +} + +mat-header-cell { + flex: 0 1 40%; + +} + +mat-cell { + flex: 0 1 40%; + +} + +.app-module-list-container { + margin: 0px 0px -24px 0px; + overflow: hidden; + height: 100%; + width: 100%; +} + +.app-module-list-row { + margin: 24px 24px 24px 24px; + width: 95%; + border: 1px solid rgba(33, 33, 33, 0.12); + border-radius: 12px; +} + +.app-module-list-heading { + display: flex; + padding-left: 1rem; + +} + +.app-module-list-div { + display: flex; + width: 60%; + cursor: pointer; + height: 32px; + padding: 24px 0px; +} + +.app-module-list-icon { + padding-top: 4px; + cursor: pointer; + color: var(--theme-grey-color); +} + +.app-module-list-title { + margin-left: 0.6rem; + margin-top: 4px; + letter-spacing: .15px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 24px; +} + +.app-module-list-divider { + color: rgba(33, 33, 33, 0.12); + padding-left: -1px; + padding-right: 1px; +} + +.app-module-list-dropdown { + padding: 0rem 1rem; +} + +.app-module-list-dropdown-heading { + display: flex; + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-module-list-dropdown-details { + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-mat-divider { + color: rgba(33, 33, 33, 0.12); +} diff --git a/lib/core/src/lib/about/about-module-list/module-list.component.ts b/lib/core/src/lib/about/about-module-list/module-list.component.ts index 1afe3e9970..857230b7fe 100644 --- a/lib/core/src/lib/about/about-module-list/module-list.component.ts +++ b/lib/core/src/lib/about/about-module-list/module-list.component.ts @@ -15,13 +15,13 @@ * limitations under the License. */ -import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core'; +import { Component, ChangeDetectionStrategy, Input } from '@angular/core'; import { ModuleInfo } from '@alfresco/js-api'; @Component({ selector: 'adf-about-module-list', templateUrl: './module-list.component.html', - encapsulation: ViewEncapsulation.None, + styleUrls: ['./module-list.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class ModuleListComponent { @@ -42,4 +42,15 @@ export class ModuleListComponent { @Input() data: Array = []; + + dropdownExpandedStatus = false; + dropdownToggle = true; + + toggleDropdown() { + this.dropdownExpandedStatus = !this.dropdownExpandedStatus; + + if (!this.dropdownExpandedStatus) { + this.dropdownToggle = true; + } +} } diff --git a/lib/core/src/lib/about/about-package/package-list.component.html b/lib/core/src/lib/about/about-package/package-list.component.html index f58a2cf6fa..54c46b24df 100644 --- a/lib/core/src/lib/about/about-package/package-list.component.html +++ b/lib/core/src/lib/about/about-package/package-list.component.html @@ -1,11 +1,44 @@ - - - - {{ column.header | translate }} - - {{ column.cell(row) }} - +
- - - +
+ +
+
+ + {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}} + {{ 'ABOUT.PACKAGES.TITLE' | translate }} + +
+ +
+ + + + + +
+
+ +
+ + + + {{ column.header | translate }} + + {{ column.cell(row) }} + + + + + +
+ + + +
+
+ + +
+ +
diff --git a/lib/core/src/lib/about/about-package/package-list.component.scss b/lib/core/src/lib/about/about-package/package-list.component.scss new file mode 100644 index 0000000000..939aaac5c5 --- /dev/null +++ b/lib/core/src/lib/about/about-package/package-list.component.scss @@ -0,0 +1,107 @@ +mat-cell { + white-space: pre-line; + line-height: 48px; +} + +mat-table { + width: 100%; + font-family: "Open Sans"; +} + +mat-row { + border: none; +} + +mat-header-row { + height: 32px; + padding: 8px 0px; +} + +mat-header-cell { + flex: 0 1 40%; + +} + +mat-cell { + flex: 0 1 40%; + +} + +.app-package-list-container { + margin: 0px 0px -24px 0px; + overflow: hidden; + height: 100%; + width: 100%; +} + +.app-package-list-row { + margin: 24px 24px 24px 24px; + width: 95%; + border: 1px solid rgba(33, 33, 33, 0.12); + border-radius: 12px; +} + +.app-package-list-heading { + display: flex; + padding-left: 1rem; + +} + +.app-package-list-div { + display: flex; + width: 60%; + cursor: pointer; + height: 32px; + padding: 24px 0px; +} + +.app-package-list-icon { + padding-top: 4px; + cursor: pointer; + color: var(--theme-grey-color); +} + +.app-package-list-title { + margin-left: 0.6rem; + margin-top: 4px; + letter-spacing: .15px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 24px; +} + +.app-package-list-divider { + color: rgba(33, 33, 33, 0.12); + padding-left: -1px; + padding-right: 1px; +} + +.app-package-list-dropdown { + padding: 0rem 1rem; +} + +.app-package-list-dropdown-heading { + display: flex; + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-package-list-dropdown-details { + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-mat-divider { + color: rgba(33, 33, 33, 0.12); +} diff --git a/lib/core/src/lib/about/about-package/package-list.component.ts b/lib/core/src/lib/about/about-package/package-list.component.ts index 524f3dca2a..4a45236ebd 100644 --- a/lib/core/src/lib/about/about-package/package-list.component.ts +++ b/lib/core/src/lib/about/about-package/package-list.component.ts @@ -15,13 +15,13 @@ * limitations under the License. */ -import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core'; +import { Component, ChangeDetectionStrategy, Input } from '@angular/core'; import { PackageInfo } from '../interfaces'; @Component({ selector: 'adf-about-package-list', templateUrl: './package-list.component.html', - encapsulation: ViewEncapsulation.None, + styleUrls: ['./package-list.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class PackageListComponent { @@ -42,4 +42,15 @@ export class PackageListComponent { @Input() data: Array = []; + + dropdownExpandedStatus = false; + dropdownToggle = true; + + toggleDropdown() { + this.dropdownExpandedStatus = !this.dropdownExpandedStatus; + + if (!this.dropdownExpandedStatus) { + this.dropdownToggle = true; + } +} } diff --git a/lib/core/src/lib/about/about-platform-version/about-platform-version.component.html b/lib/core/src/lib/about/about-platform-version/about-platform-version.component.html index d318181fb1..562c9d4a82 100644 --- a/lib/core/src/lib/about/about-platform-version/about-platform-version.component.html +++ b/lib/core/src/lib/about/about-platform-version/about-platform-version.component.html @@ -1,67 +1,92 @@ -
{{ 'ABOUT.VERSIONS.TITLE' | translate }}
- +
- -
-
{{ 'ABOUT.VERSIONS.PROCESS_SERVICE' | translate }}
-

- {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ process.majorVersion }}.{{ - process.minorVersion }}.{{ process.revisionVersion }} -

-
- -
- -
-
{{ 'ABOUT.VERSIONS.CONTENT_SERVICE' | translate }}
-

- {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ repository.edition }} -

-

- {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ repository.version.display }} -

-
- -
- -
-
{{ 'ABOUT.VERSIONS.MODELING_SERVICE' | translate }}
-

- {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ modeling.version }} -

-
- -
- -
-
{{ 'ABOUT.VERSIONS.DEPLOYMENT_SERVICE' | translate }}
-

- {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ deployment.version }} -

-
- -
- -
-
{{ 'ABOUT.VERSIONS.RB' | translate }}
-

- {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ rb.artifact }} -

-

- {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ rb.version }} -

-
- -
- -
-
{{ 'ABOUT.VERSIONS.QUERY_SERVICE' | translate }}
-

- {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ query.version }} -

-
- - +
+ +
+
+ + {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}} + {{ 'ABOUT.VERSIONS.TITLE' | translate }} +
+ +
+ + +
+
+ +
+
{{ 'ABOUT.VERSIONS.PROCESS_SERVICE' | translate + }}
+
{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate + }}: 1
+
+ + + +
+
{{ 'ABOUT.VERSIONS.CONTENT_SERVICE' | translate + }}
+
{{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate + }}: {{ repository.edition }}
+
{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate + }}: {{ repository.version.display }}
+ +
+ + + + +
+
{{ 'ABOUT.VERSIONS.MODELING_SERVICE' | translate + }}
+
{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate + }}: {{ modeling.version }}
+ +
+ + + + +
+
{{ 'ABOUT.VERSIONS.DEPLOYMENT_SERVICE' | + translate }}
+
{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate + }}: {{ deployment.version }}
+
+ + + +
+
{{ 'ABOUT.VERSIONS.RB' | translate }}
+
{{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate + }}: {{ rb.artifact }}
+
{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate + }}: {{ rb.version }}
+
+ + + + +
+
{{ 'ABOUT.VERSIONS.QUERY_SERVICE' | translate }} +
+
{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate + }}: {{ query.version }}
+
+ +
+
+ + +
+ +
diff --git a/lib/core/src/lib/about/about-platform-version/about-platform-version.component.scss b/lib/core/src/lib/about/about-platform-version/about-platform-version.component.scss new file mode 100644 index 0000000000..7f2b47b5c7 --- /dev/null +++ b/lib/core/src/lib/about/about-platform-version/about-platform-version.component.scss @@ -0,0 +1,77 @@ +.app-platform-version-container { + margin: 0px 0px -24px 0px; + overflow: hidden; + height: 100%; + width: 100%; +} + +.app-platform-version-row { + margin: 24px 24px 24px 24px; + width: 95%; + border: 1px solid rgba(33, 33, 33, 0.12); + border-radius: 12px; +} + +.app-platform-version-heading { + display: flex; + padding-left: 1rem; +} + +.app-platform-version-div { + display: flex; + width: 60%; + cursor: pointer; + height: 32px; + padding: 24px 0px; +} + +.app-platform-version-icon { + padding-top: 4px; + cursor: pointer; + color: var(--theme-grey-color); +} + +.app-platform-version-title { + margin-left: 0.6rem; + margin-top: 4px; + letter-spacing: .15px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 24px; +} + +.app-platform-version-divider { + color: rgba(33, 33, 33, 0.12); + padding-left: -1px; + padding-right: 1px; +} + +.app-platform-version-dropdown { + padding: 0rem 1rem; +} + +.app-platform-version-dropdown-heading { + display: flex; + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-platform-version-dropdown-details { + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-mat-divider { + color: rgba(33, 33, 33, 0.12); +} diff --git a/lib/core/src/lib/about/about-platform-version/about-platform-version.component.ts b/lib/core/src/lib/about/about-platform-version/about-platform-version.component.ts index b0ad8a763d..e5e0fd7639 100644 --- a/lib/core/src/lib/about/about-platform-version/about-platform-version.component.ts +++ b/lib/core/src/lib/about/about-platform-version/about-platform-version.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { RepositoryInfo } from '@alfresco/js-api'; import { Observable } from 'rxjs'; @@ -26,7 +26,8 @@ import { AppConfigService } from '../../app-config/app-config.service'; @Component({ selector: 'adf-about-platform-version', templateUrl: './about-platform-version.component.html', - encapsulation: ViewEncapsulation.None + styleUrls: ['./about-platform-version.component.scss'], + }) export class AboutPlatformVersionComponent { @@ -43,12 +44,23 @@ export class AboutPlatformVersionComponent { rb$: Observable; query$: Observable; + dropdownExpandedStatus = false; + dropdownToggle = true; + constructor(private aaeInfoService: AaeInfoService, private appConfigService: AppConfigService) { this.modelingInfo(); this.deploymentInfo(); this.rbInfo(); } + toggleDropdown() { + this.dropdownExpandedStatus = !this.dropdownExpandedStatus; + + if (!this.dropdownExpandedStatus) { + this.dropdownToggle = true; + } + } + modelingInfo() { this.modeling$ = this.aaeInfoService.getServiceVersion('modeling-service'); } @@ -64,4 +76,5 @@ export class AboutPlatformVersionComponent { queryInfo() { this.query$ = this.aaeInfoService.getServiceVersion(`${this.appConfigService.get('oauth2.clientId')}/query`); } + } diff --git a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.html b/lib/core/src/lib/about/about-server-settings/about-server-settings.component.html index 343d65a6e0..1f5a2b7661 100644 --- a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.html +++ b/lib/core/src/lib/about/about-server-settings/about-server-settings.component.html @@ -1,11 +1,38 @@ -
-
{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}
- -

- {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: {value: bpmHost} }} -

-

- {{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' | translate: {value: ecmHost} }} -

- +
+ +
+
+
+ + {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}} + {{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }} +
+ +
+ + + + + +
+
+ +
+
{{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | + translate: {value: bpmHost} }}
+
+ + + +
+
{{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' | + translate: {value: ecmHost} }}
+
+ +
+
+ + +
+
diff --git a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss b/lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss index 16d6a6e6ac..3a64e44284 100644 --- a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss +++ b/lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss @@ -1,3 +1,77 @@ -.adf-github-link-container { - padding: 10px; +.app-server-settings-container { + margin: 0px 0px -24px 0px; + overflow: hidden; + height: 100%; + width: 100%; +} + +.app-server-settings-row { + margin: 24px 24px 24px 24px; + width: 95%; + border: 1px solid rgba(33, 33, 33, 0.12); + border-radius: 12px; +} + +.app-server-settings-heading { + display: flex; + padding-left: 1rem; +} + +.app-server-settings-div { + display: flex; + width: 60%; + cursor: pointer; + height: 32px; + padding: 24px 0px; +} + +.app-server-settings-icon { + padding-top: 4px; + cursor: pointer; + color: var(--theme-grey-color); +} + +.app-server-settings-title { + margin-left: 0.6rem; + margin-top: 4px; + letter-spacing: .15px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 24px; +} + +.app-server-settings-divider { + color: rgba(33, 33, 33, 0.12); + padding-left: -1px; + padding-right: 1px; +} + +.app-server-settings-dropdown { + padding: 0rem 1rem; +} + +.app-server-settings-dropdown-heading { + display: flex; + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-server-settings-dropdown-details { + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-mat-divider { + color: rgba(33, 33, 33, 0.12); } diff --git a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.ts b/lib/core/src/lib/about/about-server-settings/about-server-settings.component.ts index 674c6f6090..1495195fd7 100644 --- a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.ts +++ b/lib/core/src/lib/about/about-server-settings/about-server-settings.component.ts @@ -15,22 +15,32 @@ * limitations under the License. */ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { AppConfigService, AppConfigValues } from '../../app-config/app-config.service'; @Component({ selector: 'adf-about-server-settings', templateUrl: './about-server-settings.component.html', - encapsulation: ViewEncapsulation.None }) export class AboutServerSettingsComponent implements OnInit { ecmHost = ''; bpmHost = ''; + dropdownExpandedStatus = false; + dropdownToggle = true; + constructor(private appConfig: AppConfigService) {} ngOnInit() { this.ecmHost = this.appConfig.get(AppConfigValues.ECMHOST); this.bpmHost = this.appConfig.get(AppConfigValues.BPMHOST); } + + toggleDropdown() { + this.dropdownExpandedStatus = !this.dropdownExpandedStatus; + + if (!this.dropdownExpandedStatus) { + this.dropdownToggle = true; + } + } } diff --git a/lib/core/src/lib/about/about-status-list/about-status-list.component.html b/lib/core/src/lib/about/about-status-list/about-status-list.component.html index f58a2cf6fa..d02d98dfcb 100644 --- a/lib/core/src/lib/about/about-status-list/about-status-list.component.html +++ b/lib/core/src/lib/about/about-status-list/about-status-list.component.html @@ -1,11 +1,44 @@ - - - - {{ column.header | translate }} - - {{ column.cell(row) }} - +
- - - +
+ +
+
+ + {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}} + {{ 'ABOUT.STATUS.TITLE' | translate }} + +
+ +
+ + + + + +
+
+ +
+ + + + {{ column.header | translate }} + + {{ column.cell(row) }} + + + + + +
+ + + +
+
+ + +
+ +
diff --git a/lib/core/src/lib/about/about-status-list/about-status-list.component.scss b/lib/core/src/lib/about/about-status-list/about-status-list.component.scss new file mode 100644 index 0000000000..ab72f1767d --- /dev/null +++ b/lib/core/src/lib/about/about-status-list/about-status-list.component.scss @@ -0,0 +1,107 @@ +mat-cell { + white-space: pre-line; + line-height: 48px; +} + +mat-table { + width: 100%; + font-family: "Open Sans"; +} + +mat-row { + border: none; +} + +mat-header-row { + height: 32px; + padding: 8px 0px; +} + +mat-header-cell { + flex: 0 1 40%; + +} + +mat-cell { + flex: 0 1 40%; + +} + +.app-extension-list-container { + margin: 0px 0px -24px 0px; + overflow: hidden; + height: 100%; + width: 100%; +} + +.app-extension-list-row { + margin: 24px 24px 24px 24px; + width: 95%; + border: 1px solid rgba(33, 33, 33, 0.12); + border-radius: 12px; +} + +.app-extension-list-heading { + display: flex; + padding-left: 1rem; + +} + +.app-extension-list-div { + display: flex; + width: 60%; + cursor: pointer; + height: 32px; + padding: 24px 0px; +} + +.app-extension-list-icon { + padding-top: 4px; + cursor: pointer; + color: var(--theme-grey-color); +} + +.app-extension-list-title { + margin-left: 0.6rem; + margin-top: 4px; + letter-spacing: .15px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 24px; +} + +.app-extension-list-divider { + border: 1px solid rgba(33, 33, 33, 0.12); + padding-left: -1px; + padding-right: 1px; +} + +.app-extension-list-dropdown { + padding: 0rem 1rem; +} + +.app-extension-list-dropdown-heading { + display: flex; + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-extension-list-dropdown-details { + color: var(--theme-heading-color); + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 48px; + letter-spacing: .25px; +} + +.app-mat-divider { + color: rgba(33, 33, 33, 0.12); +} diff --git a/lib/core/src/lib/about/about-status-list/about-status-list.component.ts b/lib/core/src/lib/about/about-status-list/about-status-list.component.ts index 15267ae1f8..c33de2f494 100644 --- a/lib/core/src/lib/about/about-status-list/about-status-list.component.ts +++ b/lib/core/src/lib/about/about-status-list/about-status-list.component.ts @@ -15,13 +15,13 @@ * limitations under the License. */ -import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core'; +import { Component, ChangeDetectionStrategy, Input } from '@angular/core'; import { StatusData } from '../interfaces'; @Component({ selector: 'adf-about-status-list', templateUrl: './about-status-list.component.html', - encapsulation: ViewEncapsulation.None, + styleUrls: ['./about-status-list.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class AboutStatusListComponent { @@ -42,4 +42,15 @@ export class AboutStatusListComponent { @Input() data: StatusData[] = []; + + dropdownExpandedStatus = false; + dropdownToggle = true; + + toggleDropdown() { + this.dropdownExpandedStatus = !this.dropdownExpandedStatus; + + if (!this.dropdownExpandedStatus) { + this.dropdownToggle = true; + } + } } diff --git a/lib/core/src/lib/about/about.component.html b/lib/core/src/lib/about/about.component.html index 30a8d24bc7..8069f547a6 100644 --- a/lib/core/src/lib/about/about.component.html +++ b/lib/core/src/lib/about/about.component.html @@ -11,29 +11,24 @@
-
{{ 'ABOUT.LICENSE.TITLE' | translate }}
-
{{ 'ABOUT.STATUS.TITLE' | translate }}
-
{{ 'ABOUT.MODULES.TITLE' | translate }}
-
{{ 'ABOUT.PACKAGES.TITLE' | translate }}
-
{{ 'ABOUT.PLUGINS.TITLE' | translate }}
 diff --git a/lib/core/src/lib/about/about.component.scss b/lib/core/src/lib/about/about.component.scss index ec30303047..122978442c 100644 --- a/lib/core/src/lib/about/about.component.scss +++ b/lib/core/src/lib/about/about.component.scss @@ -1,6 +1,7 @@ adf-about { .adf-about-container { - margin: 10px 0 5px 2px; + background-color: white; + border-top: 1px solid rgba(33, 33, 33, 0.12) !important; } header {