[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
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

View File

@@ -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,32 +25,29 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-card *ngIf="actionMenu || contextMenu">
<mat-card-header>
<mat-card-title>Add Action</mat-card-title>
</mat-card-header>
<mat-card-content>
<form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
<mat-form-field>
<input matInput formControlName="key" placeholder="Key">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="title" placeholder="Title">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="icon" placeholder="Icon">
</mat-form-field>
<mat-checkbox formControlName="visible">Visible</mat-checkbox>
<mat-checkbox formControlName="disabled">Disable</mat-checkbox>
<button mat-raised-button (click)="addAction()">Add</button>
</form>
<div *ngIf="actions.length > 0">
<mat-chip-list>
<mat-chip *ngFor="let action of actions" [removable]="true">
{{action.title}}
<mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
</mat-card-content>
</mat-card>
<div class="app-cloud-actions" *ngIf="actionMenu || contextMenu">
<h2>Add Action</h2>
<form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
<mat-form-field class="app-cloud-settings-form-input">
<input matInput formControlName="key" placeholder="Key">
</mat-form-field>
<mat-form-field class="app-cloud-settings-form-input">
<input matInput formControlName="title" placeholder="Title">
</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>
<mat-checkbox formControlName="disabled">Disable</mat-checkbox>
<button mat-raised-button (click)="addAction()">Add</button>
</form>
<div *ngIf="actions.length > 0">
<mat-chip-list>
<mat-chip *ngFor="let action of actions" [removable]="true">
{{action.title}}
<mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
</div>

View File

@@ -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;
}
}
}