added design changes for About Component

This commit is contained in:
SheenaMalhotra182
2022-10-14 10:52:39 +05:30
parent 60f7a39b4a
commit 5afc9a7ca1
12 changed files with 39 additions and 37 deletions
@@ -4,7 +4,7 @@
<div class="app-extension-list-heading">
<div class="app-extension-list-div">
<mat-icon class="app-extension-list-icon" (click)="togglesDropdown()">
<mat-icon class="app-extension-list-icon" (click)="toggleDropdown()">
{{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
<span class="app-extension-list-title">{{ 'ABOUT.PLUGINS.TITLE' | translate }}
</span>
@@ -13,10 +13,10 @@
</div>
<mat-divider class="app-extension-list-divider" *ngIf="serverSettingsDropdown"></mat-divider>
<mat-divider class="app-extension-list-divider" *ngIf="dropdownExpandedStatus"></mat-divider>
<div *ngIf="serverSettingsDropdown">
<div *ngIf="dropdownExpandedStatus">
<div class="app-extension-list-dropdown">
<div class="app-extension-list-dropdown-details">
@@ -24,8 +24,8 @@ import { ExtensionRef } from "@alfresco/adf-extensions";
@Component({
selector: 'adf-about-extension-list',
templateUrl: './about-extension-list.component.htm',
styleUrls: ['./about-extention-list.component.scss'],
templateUrl: './about-extension-list.component.html',
styleUrls: ['./about-extension-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AboutExtensionListComponent {
@@ -4,7 +4,7 @@
<div class="app-github-link-heading">
<div class="app-github-link-div">
<mat-icon class="app-github-link-icon" (click)="togglesDropdown()">
<mat-icon class="app-github-link-icon" (click)="toggleDropdown()">
{{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
<span class="app-github-link-title">{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}</span>
</div>
@@ -12,10 +12,10 @@
</div>
<mat-divider class="app-github-link-divider" *ngIf="serverSettingsDropdown"></mat-divider>
<mat-divider class="app-github-link-divider" *ngIf="dropdownExpandedStatus"></mat-divider>
<div *ngIf="serverSettingsDropdown">
<div *ngIf="dropdownExpandedStatus">
<div class="app-github-link-dropdown">
<div class="app-github-link-dropdown-details">
@@ -20,6 +20,7 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'adf-about-github-link',
templateUrl: './about-github-link.component.html',
styleUrls: ['./about-github-link.component.scss'],
})
export class AboutGithubLinkComponent {
/** Commit corresponding to the version of ADF to be used. */
@@ -4,7 +4,7 @@
<div class="app-license-list-heading">
<div class="app-license-list-div">
<mat-icon class="app-license-list-icon" (click)="togglesDropdown()">
<mat-icon class="app-license-list-icon" (click)="toggleDropdown()">
{{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
<span class="app-license-list-title">{{ 'ABOUT.LICENSE.TITLE' | translate }}
</span>
@@ -13,10 +13,10 @@
</div>
<mat-divider class="app-license-list-divider" *ngIf="serverSettingsDropdown"></mat-divider>
<mat-divider class="app-license-list-divider" *ngIf="dropdownExpandedStatus"></mat-divider>
<div *ngIf="serverSettingsDropdown">
<div *ngIf="dropdownExpandedStatus">
<div class="app-license-list-dropdown">
<div class="app-license-list-dropdown-details">
@@ -4,7 +4,7 @@
<div class="app-module-list-heading">
<div class="app-module-list-div">
<mat-icon class="app-module-list-icon" (click)="togglesDropdown()">
<mat-icon class="app-module-list-icon" (click)="toggleDropdown()">
{{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
<span class="app-module-list-title">{{ 'ABOUT.MODULES.TITLE' | translate }}
</span>
@@ -13,10 +13,10 @@
</div>
<mat-divider class="app-module-list-divider" *ngIf="serverSettingsDropdown"></mat-divider>
<mat-divider class="app-module-list-divider" *ngIf="dropdownExpandedStatus"></mat-divider>
<div *ngIf="serverSettingsDropdown">
<div *ngIf="dropdownExpandedStatus">
<div class="app-module-list-dropdown">
<div class="app-module-list-dropdown-details">
@@ -4,7 +4,7 @@
<div class="app-package-list-heading">
<div class="app-package-list-div">
<mat-icon class="app-package-list-icon" (click)="togglesDropdown()">
<mat-icon class="app-package-list-icon" (click)="toggleDropdown()">
{{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
<span class="app-package-list-title">{{ 'ABOUT.PACKAGES.TITLE' | translate }}
</span>
@@ -13,10 +13,10 @@
</div>
<mat-divider class="app-package-list-divider" *ngIf="serverSettingsDropdown"></mat-divider>
<mat-divider class="app-package-list-divider" *ngIf="dropdownExpandedStatus"></mat-divider>
<div *ngIf="serverSettingsDropdown">
<div *ngIf="dropdownExpandedStatus">
<div class="app-package-list-dropdown">
<div class="app-package-list-dropdown-details">
@@ -4,7 +4,7 @@
<div class="app-platform-version-heading">
<div class="app-platform-version-div">
<mat-icon class="app-platform-version-icon" (click)="togglesDropdown()">
<mat-icon class="app-platform-version-icon" (click)="toggleDropdown()">
{{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
<span class="app-platform-version-title">{{ 'ABOUT.VERSIONS.TITLE' | translate }}</span>
</div>
@@ -12,10 +12,10 @@
</div>
<mat-divider class="app-platform-version-divider" *ngIf="serverSettingsDropdown"></mat-divider>
<mat-divider class="app-platform-version-divider" *ngIf="dropdownExpandedStatus"></mat-divider>
<div *ngIf="serverSettingsDropdown">
<div *ngIf="dropdownExpandedStatus">
<div class="app-platform-version-dropdown" data-automation-id="adf-about-bpm-service">
<div class="app-platform-version-dropdown-details" *ngIf="process">
@@ -3,7 +3,7 @@
<div class="app-server-settings-row">
<div class="app-server-settings-heading">
<div class="app-server-settings-div">
<mat-icon class="app-server-settings-icon" (click)="togglesDropdown()">
<mat-icon class="app-server-settings-icon" (click)="toggleDropdown()">
{{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
<span class="app-server-settings-title">{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</span>
</div>
@@ -11,10 +11,10 @@
</div>
<mat-divider class="app-server-settings-divider" *ngIf="serverSettingsDropdown"></mat-divider>
<mat-divider class="app-server-settings-divider" *ngIf="dropdownExpandedStatus"></mat-divider>
<div *ngIf="serverSettingsDropdown">
<div *ngIf="dropdownExpandedStatus">
<div class="app-server-settings-dropdown">
<div class="app-server-settings-dropdown-details">
@@ -21,6 +21,7 @@ import { AppConfigService, AppConfigValues } from '../../app-config/app-config.s
@Component({
selector: 'adf-about-server-settings',
templateUrl: './about-server-settings.component.html',
styleUrls: ['./about-server-settings.component.scss'],
})
export class AboutServerSettingsComponent implements OnInit {
ecmHost = '';
@@ -4,7 +4,7 @@
<div class="app-status-list-heading">
<div class="app-status-list-div">
<mat-icon class="app-status-list-icon" (click)="togglesDropdown()">
<mat-icon class="app-status-list-icon" (click)="toggleDropdown()">
{{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
<span class="app-status-list-title">{{ 'ABOUT.STATUS.TITLE' | translate }}
</span>
@@ -13,10 +13,10 @@
</div>
<mat-divider class="app-status-list-divider" *ngIf="serverSettingsDropdown"></mat-divider>
<mat-divider class="app-status-list-divider" *ngIf="dropdownExpandedStatus"></mat-divider>
<div *ngIf="serverSettingsDropdown">
<div *ngIf="dropdownExpandedStatus">
<div class="app-status-list-dropdown">
<div class="app-status-list-dropdown-details">
@@ -27,27 +27,27 @@ mat-cell {
}
.app-extension-list-container {
.app-status-list-container {
margin: 0px 0px -24px 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.app-extension-list-row {
.app-status-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 {
.app-status-list-heading {
display: flex;
padding-left: 1rem;
}
.app-extension-list-div {
.app-status-list-div {
display: flex;
width: 60%;
cursor: pointer;
@@ -55,13 +55,13 @@ mat-cell {
padding: 24px 0px;
}
.app-extension-list-icon {
.app-status-list-icon {
padding-top: 4px;
cursor: pointer;
color: var(--theme-grey-color);
}
.app-extension-list-title {
.app-status-list-title {
margin-left: 0.6rem;
margin-top: 4px;
letter-spacing: .15px;
@@ -71,17 +71,17 @@ mat-cell {
line-height: 24px;
}
.app-extension-list-divider {
border: 1px solid rgba(33, 33, 33, 0.12);
.app-status-list-divider {
color: rgba(33, 33, 33, 0.12);
padding-left: -1px;
padding-right: 1px;
}
.app-extension-list-dropdown {
.app-status-list-dropdown {
padding: 0rem 1rem;
}
.app-extension-list-dropdown-heading {
.app-status-list-dropdown-heading {
display: flex;
color: var(--theme-heading-color);
width: 100%;
@@ -92,7 +92,7 @@ mat-cell {
letter-spacing: .25px;
}
.app-extension-list-dropdown-details {
.app-status-list-dropdown-details {
color: var(--theme-heading-color);
width: 100%;
font-style: normal;