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

* remove mat-card from properties demo

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

* cleanup host settings component in demo shell

* cleanup cloud settings

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

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

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

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

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

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

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

@@ -16,7 +16,8 @@
 <mat-slide-toggle [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
     Display process details on process click
 </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-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
         <mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
@@ -24,19 +25,17 @@
         </mat-option>
     </mat-select>
 </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>
-    <mat-card-content>
     <form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
-            <mat-form-field>
+        <mat-form-field class="app-cloud-settings-form-input">
             <input matInput formControlName="key" placeholder="Key">
         </mat-form-field>
-            <mat-form-field>
+        <mat-form-field class="app-cloud-settings-form-input">
             <input matInput formControlName="title" placeholder="Title">
         </mat-form-field>
-            <mat-form-field>
+        <mat-form-field class="app-cloud-settings-form-input">
             <input matInput formControlName="icon" placeholder="Icon">
         </mat-form-field>
         <mat-checkbox formControlName="visible">Visible</mat-checkbox>
@@ -51,5 +50,4 @@
             </mat-chip>
         </mat-chip-list>
     </div>
-    </mat-card-content>
+</div>
-</mat-card>

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

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

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

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

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

@@ -1,5 +1,4 @@
 <div class="adf-setting-container">
-    <mat-card class="adf-setting-card">
     <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)" (keydown)="keyDownFunction($event)">
         <mat-form-field *ngIf="showSelectProviders">
             <mat-select id="adf-provider-selector" [formControl]="providersControl">
@@ -11,47 +10,34 @@
 
         <div class="adf-authentication-type">
             <div>Authentication type:</div>
-                <mat-radio-group formControlName="authType" >
+            <mat-radio-group formControlName="authType" class="adf-authentication-radio-group">
-                <mat-radio-button value="BASIC">Basic Authentication</mat-radio-button>
+                <mat-radio-button value="BASIC" class="adf-authentication-radio-button">Basic Authentication</mat-radio-button>
-                <mat-radio-button value="OAUTH">SSO</mat-radio-button>
+                <mat-radio-button value="OAUTH" class="adf-authentication-radio-button">SSO</mat-radio-button>
             </mat-radio-group>
         </div>
 
-            <ng-container *ngIf="isALL() || isECM()">
+        <mat-form-field *ngIf="isALL() || isECM()" class="adf-full-width">
-                <mat-card-content>
-                    <mat-form-field 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-card-content>
-            </ng-container>
 
-            <ng-container *ngIf="isALL() || isBPM()">
+        <mat-form-field *ngIf="isALL() || isBPM()" class="adf-full-width">
-                <mat-card-content>
-                    <mat-form-field 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-card-content>
-            </ng-container>
 
-            <ng-container *ngIf="isOAUTH()">
+        <mat-form-field *ngIf="isOAUTH()" class="adf-full-width">
-                <mat-card-content>
-                    <mat-form-field 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>
-                </mat-card-content>
-            </ng-container>
 
-            <ng-container *ngIf="isOAUTH()">
+        <div *ngIf="isOAUTH()" formGroupName="oauthConfig">
-                <div 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">
@@ -106,15 +92,15 @@
                 <mat-label>Public urls silent Login</mat-label>
                 <input id="public-url" matInput name="publicUrls" formControlName="publicUrls">
             </mat-form-field>
+        </div>
 
-                </div>
+        <div class="adf-host-settings-actions">
-            </ng-container>
-            <mat-card-actions align="end">
             <button mat-button (click)="onCancel()">Back</button>
-                <button type="submit" class="adf-login-button" mat-button
+            <button type="submit"
-                        color="primary" data-automation-id="settings-apply-button"
+                    mat-button
+                    color="primary"
+                    data-automation-id="settings-apply-button"
                     [disabled]="!form.valid">Apply</button>
-            </mat-card-actions>
+        </div>
-        </form>
+    </form>
-    </mat-card>
 </div>

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

@@ -3,11 +3,26 @@
     min-height: 100%;
     align-items: center;
 
+    .adf-host-settings-actions {
+        text-align: end;
+    }
+
     .adf-authentication-type {
         margin-bottom: 20px;
         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 {
         width: 800px;
         display: table;