inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-6245] remove mat-card and internal styling from demo shell (#9050)

Browse Source 
* remove mat-card from properties demo

* remove mat-card from demo shell viewer (versions)

* cleanup host settings component in demo shell

* cleanup cloud settings
This commit is contained in:
Denys Vuika
2023-10-31 14:38:59 +00:00
committed by GitHub
parent e8ea75d9f3
commit 5d72597d7d
8 changed files with 173 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
demo-shell/src/app/components/card-view/card-view.component.html
View File

@@ -1,17 +1,15 @@
<div class="app-main-content"> <div class="app-main-content">
<h1>CardView Component</h1> <h1>CardView Component</h1>
<mat-card class="app-card-view"> <adf-card-view
<adf-card-view [properties]="properties"
[properties]="properties" [editable]="isEditable"
[editable]="isEditable" [displayClearAction]="showClearDateAction"
[displayClearAction]="showClearDateAction" [displayNoneOption]="showNoneOption"
[displayNoneOption]="showNoneOption" [displayLabelForChips]="showLabelForChips">
[displayLabelForChips]="showLabelForChips"> </adf-card-view>
</adf-card-view>
</mat-card>
<div class="app-console" #console> <div class="app-console">
<h3>Changes log:</h3> <h3>Changes log:</h3>
<p *ngFor="let log of logs">{{ log }}</p> <p *ngFor="let log of logs">{{ log }}</p>
</div> </div>

2
demo-shell/src/app/components/card-view/card-view.component.scss
View File

@@ -2,7 +2,7 @@
padding: 0 15px; padding: 0 15px;
} }
.app-card-view { adf-card-view {
width: 30%; width: 30%;
display: inline-block; display: inline-block;
} }

28
demo-shell/src/app/components/card-view/card-view.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, OnInit, ElementRef, ViewChild, OnDestroy } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { import {
CardViewTextItemModel, CardViewTextItemModel,
CardViewDateItemModel, CardViewDateItemModel,
@@ -39,9 +39,6 @@ import { takeUntil } from 'rxjs/operators';
styleUrls: ['./card-view.component.scss'] styleUrls: ['./card-view.component.scss']
}) })
export class CardViewComponent implements OnInit, OnDestroy { export class CardViewComponent implements OnInit, OnDestroy {
@ViewChild('console', { static: true }) console: ElementRef;
isEditable = true; isEditable = true;
properties: any; properties: any;
logs: string[]; logs: string[];
@@ -51,8 +48,7 @@ export class CardViewComponent implements OnInit, OnDestroy {
private onDestroy$ = new Subject<boolean>(); private onDestroy$ = new Subject<boolean>();
constructor(private cardViewUpdateService: CardViewUpdateService, constructor(private cardViewUpdateService: CardViewUpdateService, private decimalNumberPipe: DecimalNumberPipe) {
private decimalNumberPipe: DecimalNumberPipe) {
this.logs = []; this.logs = [];
this.createCard(); this.createCard();
} }
@@ -62,9 +58,7 @@ export class CardViewComponent implements OnInit, OnDestroy {
} }
ngOnInit() { ngOnInit() {
this.cardViewUpdateService.itemUpdated$ this.cardViewUpdateService.itemUpdated$.pipe(takeUntil(this.onDestroy$)).subscribe(this.onItemChange.bind(this));
.pipe(takeUntil(this.onDestroy$))
.subscribe(this.onItemChange.bind(this));
} }
ngOnDestroy() { ngOnDestroy() {
@@ -192,20 +186,29 @@ export class CardViewComponent implements OnInit, OnDestroy {
}), }),
new CardViewKeyValuePairsItemModel({ new CardViewKeyValuePairsItemModel({
label: 'CardView Key-Value Pairs Item', label: 'CardView Key-Value Pairs Item',
value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }], value: [
{ name: 'hey', value: 'you' },
{ name: 'hey', value: 'you' }
],
key: 'key-value-pairs', key: 'key-value-pairs',
editable: this.isEditable editable: this.isEditable
}), }),
new CardViewKeyValuePairsItemModel({ new CardViewKeyValuePairsItemModel({
label: 'CardView Key-Value Pairs Item', label: 'CardView Key-Value Pairs Item',
value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }], value: [
{ name: 'hey', value: 'you' },
{ name: 'hey', value: 'you' }
],
key: 'key-value-pairs', key: 'key-value-pairs',
editable: false editable: false
}), }),
new CardViewSelectItemModel({ new CardViewSelectItemModel({
label: 'CardView Select Item', label: 'CardView Select Item',
value: 'one', value: 'one',
options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]), options$: of([
{ key: 'one', label: 'One' },
{ key: 'two', label: 'Two' }
]),
key: 'select', key: 'select',
editable: this.isEditable editable: this.isEditable
}), }),
@@ -253,7 +256,6 @@ export class CardViewComponent implements OnInit, OnDestroy {
} }
this.logs.push(`[${notification.target.label}] - ${value}`); this.logs.push(`[${notification.target.label}] - ${value}`);
this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
} }
toggleEditable() { toggleEditable() {

58
demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
View File

@@ -16,7 +16,8 @@
<mat-slide-toggle [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection"> <mat-slide-toggle [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
Display process details on process click Display process details on process click
</mat-slide-toggle> </mat-slide-toggle>
<mat-form-field data-automation-id="selectionMode">
<mat-form-field data-automation-id="selectionMode" class="adf-cloud-settings-selection-mode">
<mat-label>Selection Mode</mat-label> <mat-label>Selection Mode</mat-label>
<mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()"> <mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
<mat-option *ngFor="let option of selectionModeOptions" [value]="option.value"> <mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
@@ -24,32 +25,29 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-card *ngIf="actionMenu || contextMenu">
<mat-card-header> <div class="app-cloud-actions" *ngIf="actionMenu || contextMenu">
<mat-card-title>Add Action</mat-card-title> <h2>Add Action</h2>
</mat-card-header> <form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
<mat-card-content> <mat-form-field class="app-cloud-settings-form-input">
<form class="app-cloud-settings-form" [formGroup]="actionMenuForm"> <input matInput formControlName="key" placeholder="Key">
<mat-form-field> </mat-form-field>
<input matInput formControlName="key" placeholder="Key"> <mat-form-field class="app-cloud-settings-form-input">
</mat-form-field> <input matInput formControlName="title" placeholder="Title">
<mat-form-field> </mat-form-field>
<input matInput formControlName="title" placeholder="Title"> <mat-form-field class="app-cloud-settings-form-input">
</mat-form-field> <input matInput formControlName="icon" placeholder="Icon">
<mat-form-field> </mat-form-field>
<input matInput formControlName="icon" placeholder="Icon"> <mat-checkbox formControlName="visible">Visible</mat-checkbox>
</mat-form-field> <mat-checkbox formControlName="disabled">Disable</mat-checkbox>
<mat-checkbox formControlName="visible">Visible</mat-checkbox> <button mat-raised-button (click)="addAction()">Add</button>
<mat-checkbox formControlName="disabled">Disable</mat-checkbox> </form>
<button mat-raised-button (click)="addAction()">Add</button> <div *ngIf="actions.length > 0">
</form> <mat-chip-list>
<div *ngIf="actions.length > 0"> <mat-chip *ngFor="let action of actions" [removable]="true">
<mat-chip-list> {{action.title}}
<mat-chip *ngFor="let action of actions" [removable]="true"> <mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
{{action.title}} </mat-chip>
<mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon> </mat-chip-list>
</mat-chip> </div>
</mat-chip-list> </div>
</div>
</mat-card-content>
</mat-card>

12
demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
View File

@@ -4,7 +4,11 @@ app-cloud-settings {
display: flex; display: flex;
flex: 1; flex: 1;
mat-form-field { .app-cloud-actions {
background-color: white;
}
.adf-cloud-settings-selection-mode {
max-width: 200px; max-width: 200px;
} }
@@ -13,13 +17,9 @@ app-cloud-settings {
place-content: center space-around; place-content: center space-around;
align-items: center; align-items: center;
mat-form-field { .app-cloud-settings-form-input {
flex: 1 1 100%; flex: 1 1 100%;
max-width: 23%; max-width: 23%;
} }
mat-form-field, mat-checkbox {
margin-right: 20px;
}
} }
} }

12
demo-shell/src/app/components/file-view/file-view.component.html
View File

@@ -110,14 +110,10 @@
</adf-info-drawer-tab> </adf-info-drawer-tab>
<adf-info-drawer-tab label="Versions"> <adf-info-drawer-tab label="Versions">
<mat-card> <adf-version-manager [node]="node"
<mat-card-content> (uploadError)="onUploadError($event)"
<adf-version-manager [node]="node" (viewVersion)="onViewVersion($event)">
(uploadError)="onUploadError($event)" </adf-version-manager>
(viewVersion)="onViewVersion($event)">
</adf-version-manager>
</mat-card-content>
</mat-card>
</adf-info-drawer-tab> </adf-info-drawer-tab>
</adf-info-drawer> </adf-info-drawer>
</ng-template> </ng-template>

206
demo-shell/src/app/components/settings/host-settings.component.html
View File

@@ -1,120 +1,106 @@
<div class="adf-setting-container"> <div class="adf-setting-container">
<mat-card class="adf-setting-card"> <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)" (keydown)="keyDownFunction($event)">
<form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)" (keydown)="keyDownFunction($event)"> <mat-form-field *ngIf="showSelectProviders">
<mat-form-field *ngIf="showSelectProviders"> <mat-select id="adf-provider-selector" [formControl]="providersControl">
<mat-select id="adf-provider-selector" [formControl]="providersControl"> <mat-option *ngFor="let provider of providers" [value]="provider">
<mat-option *ngFor="let provider of providers" [value]="provider"> {{ provider }}
{{ provider }} </mat-option>
</mat-option> </mat-select>
</mat-select> </mat-form-field>
<div class="adf-authentication-type">
<div>Authentication type:</div>
<mat-radio-group formControlName="authType" class="adf-authentication-radio-group">
<mat-radio-button value="BASIC" class="adf-authentication-radio-button">Basic Authentication</mat-radio-button>
<mat-radio-button value="OAUTH" class="adf-authentication-radio-button">SSO</mat-radio-button>
</mat-radio-group>
</div>
<mat-form-field *ngIf="isALL() || isECM()" class="adf-full-width">
<mat-label>Content Services URL</mat-label>
<input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text" id="ecmHost" [placeholder]="PLACEHOLDER_URL">
<mat-error *ngIf="ecmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
<mat-error *ngIf="ecmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
</mat-form-field>
<mat-form-field *ngIf="isALL() || isBPM()" class="adf-full-width">
<mat-label>Process Services URL</mat-label>
<input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text" id="bpmHost" [placeholder]="PLACEHOLDER_URL">
<mat-error *ngIf="bpmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
<mat-error *ngIf="bpmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
</mat-form-field>
<mat-form-field *ngIf="isOAUTH()" class="adf-full-width">
<mat-label>Identity Host</mat-label>
<input matInput name="identityHost" id="identityHost" formControlName="identityHost" [placeholder]="PLACEHOLDER_URL">
<mat-error *ngIf="identityHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
<mat-error *ngIf="identityHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
</mat-form-field>
<div *ngIf="isOAUTH()" formGroupName="oauthConfig">
<mat-form-field class="adf-full-width">
<mat-label>Auth Host</mat-label>
<input matInput name="host" id="oauthHost" formControlName="host" [placeholder]="PLACEHOLDER_URL">
<mat-error *ngIf="host.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
<mat-error *ngIf="host.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
</mat-form-field> </mat-form-field>
<div class="adf-authentication-type"> <mat-form-field class="adf-full-width">
<div>Authentication type :</div> <mat-label>Client ID</mat-label>
<mat-radio-group formControlName="authType" > <input matInput name="clientId" id="clientId" formControlName="clientId">
<mat-radio-button value="BASIC">Basic Authentication</mat-radio-button> <mat-error *ngIf="clientId.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
<mat-radio-button value="OAUTH">SSO</mat-radio-button> </mat-form-field>
</mat-radio-group>
</div>
<ng-container *ngIf="isALL() || isECM()"> <mat-form-field class="adf-full-width">
<mat-card-content> <mat-label>Scope Id</mat-label>
<mat-form-field class="adf-full-width"> <input matInput name="Scope" formControlName="scope">
<mat-label>Content Services URL</mat-label> <mat-error *ngIf="scope.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
<input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text" id="ecmHost" [placeholder]="PLACEHOLDER_URL"> </mat-form-field>
<mat-error *ngIf="ecmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
<mat-error *ngIf="ecmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error> <mat-form-field class="adf-full-width">
</mat-form-field> <mat-label>Secret</mat-label>
</mat-card-content> <input matInput name="Secret" formControlName="secret">
<mat-error *ngIf="secret.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
</mat-form-field>
<mat-label>Silent Login</mat-label>
<mat-slide-toggle class="adf-full-width" name="silentLogin" formControlName="silentLogin">
</mat-slide-toggle>
<mat-label>Implicit Flow</mat-label>
<mat-slide-toggle class="adf-full-width" name="implicitFlow" formControlName="implicitFlow">
</mat-slide-toggle>
<ng-container *ngIf="supportsCodeFlow">
<mat-label>Code Flow</mat-label>
<mat-slide-toggle class="adf-full-width" name="codeFlow" formControlName="codeFlow">
</mat-slide-toggle>
</ng-container> </ng-container>
<ng-container *ngIf="isALL() || isBPM()"> <mat-form-field class="adf-full-width">
<mat-card-content> <mat-label>Redirect URI</mat-label>
<mat-form-field class="adf-full-width"> <input matInput name="redirectUri" formControlName="redirectUri">
<mat-label>Process Services URL</mat-label> <mat-error *ngIf="redirectUri.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
<input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text" id="bpmHost" [placeholder]="PLACEHOLDER_URL"> </mat-form-field>
<mat-error *ngIf="bpmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
<mat-error *ngIf="bpmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
</mat-form-field>
</mat-card-content>
</ng-container>
<ng-container *ngIf="isOAUTH()"> <mat-form-field class="adf-full-width">
<mat-card-content> <mat-label>Redirect URI Logout</mat-label>
<mat-form-field class="adf-full-width"> <input id="logout-url" matInput name="redirectUriLogout" formControlName="redirectUriLogout">
<mat-label>Identity Host</mat-label> </mat-form-field>
<input matInput name="identityHost" id="identityHost" formControlName="identityHost" [placeholder]="PLACEHOLDER_URL">
<mat-error *ngIf="identityHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
<mat-error *ngIf="identityHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
</mat-form-field>
</mat-card-content>
</ng-container>
<ng-container *ngIf="isOAUTH()"> <mat-form-field class="adf-full-width">
<div formGroupName="oauthConfig"> <mat-label>Public urls silent Login</mat-label>
<mat-form-field class="adf-full-width"> <input id="public-url" matInput name="publicUrls" formControlName="publicUrls">
<mat-label>Auth Host</mat-label> </mat-form-field>
<input matInput name="host" id="oauthHost" formControlName="host" [placeholder]="PLACEHOLDER_URL"> </div>
<mat-error *ngIf="host.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
<mat-error *ngIf="host.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
</mat-form-field>
<mat-form-field class="adf-full-width"> <div class="adf-host-settings-actions">
<mat-label>Client ID</mat-label> <button mat-button (click)="onCancel()">Back</button>
<input matInput name="clientId" id="clientId" formControlName="clientId"> <button type="submit"
<mat-error *ngIf="clientId.hasError('required')">{{ ERR_REQUIRED }}</mat-error> mat-button
</mat-form-field> color="primary"
data-automation-id="settings-apply-button"
<mat-form-field class="adf-full-width"> [disabled]="!form.valid">Apply</button>
<mat-label>Scope Id</mat-label> </div>
<input matInput name="Scope" formControlName="scope"> </form>
<mat-error *ngIf="scope.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
</mat-form-field>
<mat-form-field class="adf-full-width">
<mat-label>Secret</mat-label>
<input matInput name="Secret" formControlName="secret">
<mat-error *ngIf="secret.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
</mat-form-field>
<mat-label>Silent Login</mat-label>
<mat-slide-toggle class="adf-full-width" name="silentLogin" formControlName="silentLogin">
</mat-slide-toggle>
<mat-label>Implicit Flow</mat-label>
<mat-slide-toggle class="adf-full-width" name="implicitFlow" formControlName="implicitFlow">
</mat-slide-toggle>
<ng-container *ngIf="supportsCodeFlow">
<mat-label>Code Flow</mat-label>
<mat-slide-toggle class="adf-full-width" name="codeFlow" formControlName="codeFlow">
</mat-slide-toggle>
</ng-container>
<mat-form-field class="adf-full-width">
<mat-label>Redirect URI</mat-label>
<input matInput name="redirectUri" formControlName="redirectUri">
<mat-error *ngIf="redirectUri.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
</mat-form-field>
<mat-form-field class="adf-full-width">
<mat-label>Redirect URI Logout</mat-label>
<input id="logout-url" matInput name="redirectUriLogout" formControlName="redirectUriLogout">
</mat-form-field>
<mat-form-field class="adf-full-width">
<mat-label>Public urls silent Login</mat-label>
<input id="public-url" matInput name="publicUrls" formControlName="publicUrls">
</mat-form-field>
</div>
</ng-container>
<mat-card-actions align="end">
<button mat-button (click)="onCancel()">Back</button>
<button type="submit" class="adf-login-button" mat-button
color="primary" data-automation-id="settings-apply-button"
[disabled]="!form.valid">Apply</button>
</mat-card-actions>
</form>
</mat-card>
</div> </div>

15
demo-shell/src/app/components/settings/host-settings.component.scss
View File

@@ -3,11 +3,26 @@
min-height: 100%; min-height: 100%;
align-items: center; align-items: center;
.adf-host-settings-actions {
text-align: end;
}
.adf-authentication-type { .adf-authentication-type {
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 10px; margin-top: 10px;
} }
.adf-authentication-radio-group {
display: flex;
flex-direction: column;
margin: 15px 0;
align-items: flex-start;
}
.adf-authentication-radio-button {
margin: 5px;
}
.adf-setting-container { .adf-setting-container {
width: 800px; width: 800px;
display: table; display: table;