Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

NIFI-12721 Button UX (#8464) 

* NIFI-12721 Button UX

Updated all the dialog buttons to change them from stroked and raised to basic. This better aligns with Angular Material guidelines and should address the confusion between disabled and cancelled.

* NiFi-12721 incremental update

Changed the combo editor and editor components to use the flat button styles. Missed them before because I was looking for dialogs.

Also caught a style bleed with button:disabled that should be button.nifi-button:disabled and updated that.

* Consolidated the button.nifi-button:disabled rules

Also ran Prettier to improve markup in a few spots
This commit is contained in:
James Mingardi-Elliott 2024-03-06 17:11:07 -05:00 committed by GitHub
parent ac6c9c6ca4
commit e2e54f2bc8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
47 changed files with 89 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html
View File

@ -48,9 +48,9 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-stroked-button mat-dialog-close color="primary">Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
mat-raised-button mat-button
[disabled]="addTenantsForm.invalid || saving.value" [disabled]="addTenantsForm.invalid || saving.value"
(click)="addClicked()" (click)="addClicked()"
color="primary"> color="primary">

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/override-policy-dialog/override-policy-dialog.component.html
View File

@ -25,8 +25,8 @@
</mat-radio-group> </mat-radio-group>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-stroked-button mat-dialog-close color="primary">Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button mat-raised-button [disabled]="overridePolicyForm.invalid" (click)="overrideClicked()" color="primary"> <button mat-button [disabled]="overridePolicyForm.invalid" (click)="overrideClicked()" color="primary">
Override Override
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html
View File

@ -206,7 +206,7 @@
</ng-template> </ng-template>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-raised-button mat-dialog-close>Ok</button> <button color="primary" mat-button mat-dialog-close>Ok</button>
</mat-dialog-actions> </mat-dialog-actions>
</div> </div>
</div> </div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/purge-history/purge-history.component.html
View File

@ -50,12 +50,12 @@
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
color="primary" color="primary"
(click)="submit()" (click)="submit()"
[disabled]="!purgeHistoryForm.valid" [disabled]="!purgeHistoryForm.valid"
mat-raised-button mat-button
mat-dialog-close> mat-dialog-close>
Ok Ok
</button> </button>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
View File

@ -175,13 +175,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="createConnectionForm.invalid || saving.value" [disabled]="createConnectionForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="createConnection(breadcrumbs.id)" (click)="createConnection(breadcrumbs.id)"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Add</span> <span *nifiSpinner="saving.value">Add</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
View File

@ -176,13 +176,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close="CANCELLED">Cancel</button> <button mat-button mat-dialog-close="CANCELLED">Cancel</button>
<button <button
[disabled]="!editConnectionForm.dirty || editConnectionForm.invalid || saving.value" [disabled]="!editConnectionForm.dirty || editConnectionForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="editConnection()" (click)="editConnection()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html
View File

@ -141,13 +141,13 @@
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving"> <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="importFromRegistryForm.invalid || saving.value" [disabled]="importFromRegistryForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="importFromRegistry()" (click)="importFromRegistry()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Import</span> <span *nifiSpinner="saving.value">Import</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.html
View File

@ -47,13 +47,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!createPortForm.dirty || createPortForm.invalid || saving.value" [disabled]="!createPortForm.dirty || createPortForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="createPort()" (click)="createPort()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Add</span> <span *nifiSpinner="saving.value">Add</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.html
View File

@ -48,13 +48,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!editPortForm.dirty || editPortForm.invalid || saving.value" [disabled]="!editPortForm.dirty || editPortForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="editPort()" (click)="editPort()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html
View File

@ -72,13 +72,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value" [disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="createProcessGroup()" (click)="createProcessGroup()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Add</span> <span *nifiSpinner="saving.value">Add</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.html
View File

@ -149,14 +149,14 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!editProcessGroupForm.dirty || editProcessGroupForm.invalid || saving.value" [disabled]="!editProcessGroupForm.dirty || editProcessGroupForm.invalid || saving.value"
class="h-8" class="h-8"
type="button" type="button"
color="primary" color="primary"
(click)="submitForm()" (click)="submitForm()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/group-components/group-components.component.html
View File

@ -44,13 +44,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value" [disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="createProcessGroup()" (click)="createProcessGroup()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Add</span> <span *nifiSpinner="saving.value">Add</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
View File

@ -192,13 +192,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!editProcessorForm.dirty || editProcessorForm.invalid || saving.value" [disabled]="!editProcessorForm.dirty || editProcessorForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="submitForm()" (click)="submitForm()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-remote-process-group.component.html
View File

@ -103,13 +103,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!createRemoteProcessGroupForm.dirty || createRemoteProcessGroupForm.invalid || saving.value" [disabled]="!createRemoteProcessGroupForm.dirty || createRemoteProcessGroupForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="createRemoteProcessGroup()" (click)="createRemoteProcessGroup()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Add</span> <span *nifiSpinner="saving.value">Add</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
View File

@ -97,13 +97,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!editRemoteProcessGroupForm.dirty || editRemoteProcessGroupForm.invalid || saving.value" [disabled]="!editRemoteProcessGroupForm.dirty || editRemoteProcessGroupForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="submitForm()" (click)="submitForm()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Add</span> <span *nifiSpinner="saving.value">Add</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/no-registry-clients-dialog/no-registry-clients-dialog.component.html
View File

@ -27,11 +27,11 @@
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
@if (request.controllerPermissions.canRead) { @if (request.controllerPermissions.canRead) {
<button mat-stroked-button mat-dialog-close color="primary">Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button mat-raised-button mat-dialog-close color="primary" [routerLink]="['/settings', 'registry-clients']"> <button mat-button mat-dialog-close color="primary" [routerLink]="['/settings', 'registry-clients']">
Configure Configure
</button> </button>
} @else { } @else {
<button mat-raised-button mat-dialog-close color="primary">Ok</button> <button mat-button mat-dialog-close color="primary">Ok</button>
} }
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/edit-remote-port/edit-remote-port.component.html
View File

@ -58,13 +58,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!editPortForm.dirty || editPortForm.invalid || saving.value" [disabled]="!editPortForm.dirty || editPortForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="editRemotePort()" (click)="editRemotePort()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
View File

@ -134,21 +134,21 @@
@if ((updateRequest | async)!; as requestEntity) { @if ((updateRequest | async)!; as requestEntity) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
@if (requestEntity.request.complete) { @if (requestEntity.request.complete) {
<button color="primary" mat-raised-button mat-dialog-close>Close</button> <button color="primary" mat-button mat-dialog-close>Close</button>
} @else { } @else {
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
} }
</mat-dialog-actions> </mat-dialog-actions>
} @else { } @else {
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!editParameterContextForm.dirty || editParameterContextForm.invalid || saving.value" [disabled]="!editParameterContextForm.dirty || editParameterContextForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="submitForm()" (click)="submitForm()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-search-dialog/provenance-search-dialog.component.html
View File

@ -77,13 +77,13 @@
} }
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="provenanceOptionsForm.invalid" [disabled]="provenanceOptionsForm.invalid"
type="button" type="button"
color="primary" color="primary"
(click)="searchClicked()" (click)="searchClicked()"
mat-raised-button mat-button
mat-dialog-close> mat-dialog-close>
<span>Search</span> <span>Search</span>
</button> </button>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
View File

@ -224,6 +224,6 @@
</ng-template> </ng-template>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-raised-button mat-dialog-close>Ok</button> <button color="primary" mat-button mat-dialog-close>Ok</button>
</mat-dialog-actions> </mat-dialog-actions>
</div> </div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
View File

@ -83,13 +83,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!editFlowAnalysisRuleForm.dirty || editFlowAnalysisRuleForm.invalid || saving.value" [disabled]="!editFlowAnalysisRuleForm.dirty || editFlowAnalysisRuleForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="submitForm()" (click)="submitForm()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html
View File

@ -80,13 +80,13 @@
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!editParameterProviderForm.dirty || editParameterProviderForm.invalid || saving.value" [disabled]="!editParameterProviderForm.dirty || editParameterProviderForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="submitForm()" (click)="submitForm()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
View File

@ -322,18 +322,18 @@
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving"> <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<ng-container *ngIf="updateRequest | async; else normalActions"> <ng-container *ngIf="updateRequest | async; else normalActions">
<!-- an update to the associated parameter context(s) has been triggered --> <!-- an update to the associated parameter context(s) has been triggered -->
<button color="primary" mat-stroked-button mat-dialog-close> <button mat-button mat-dialog-close>
<span *nifiSpinner="saving.value">Close</span> <span *nifiSpinner="saving.value">Close</span>
</button> </button>
</ng-container> </ng-container>
<ng-template #normalActions> <ng-template #normalActions>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!canSubmitForm() || saving.value" [disabled]="!canSubmitForm() || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="submitForm()" (click)="submitForm()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</ng-template> </ng-template>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/create-registry-client/create-registry-client.component.html
View File

@ -56,13 +56,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!createRegistryClientForm.dirty || createRegistryClientForm.invalid || saving.value" [disabled]="!createRegistryClientForm.dirty || createRegistryClientForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="createRegistryClientClicked()" (click)="createRegistryClientClicked()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
View File

@ -61,13 +61,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!editRegistryClientForm.dirty || editRegistryClientForm.invalid || saving.value" [disabled]="!editRegistryClientForm.dirty || editRegistryClientForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="submitForm()" (click)="submitForm()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
View File

@ -101,13 +101,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!editReportingTaskForm.dirty || editReportingTaskForm.invalid || saving.value" [disabled]="!editReportingTaskForm.dirty || editReportingTaskForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="submitForm()" (click)="submitForm()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
View File

@ -79,7 +79,7 @@
<div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div> <div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div>
</div> </div>
<button color="primary" mat-raised-button mat-dialog-close tabindex="0">Close</button> <button mat-button mat-dialog-close tabindex="0">Close</button>
</div> </div>
</mat-dialog-actions> </mat-dialog-actions>
</div> </div>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
View File

@ -85,6 +85,6 @@
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-raised-button mat-dialog-close>Close</button> <button mat-button mat-dialog-close>Close</button>
</mat-dialog-actions> </mat-dialog-actions>
</div> </div>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/cancel-dialog/cancel-dialog.component.html
View File

@ -20,5 +20,5 @@
<div class="text-sm">{{ request.message }}</div> <div class="text-sm">{{ request.message }}</div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button type="button" (click)="cancelClicked()" mat-raised-button mat-dialog-close color="primary">Cancel</button> <button type="button" (click)="cancelClicked()" mat-button mat-dialog-close>Cancel</button>
</mat-dialog-actions> </mat-dialog-actions>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
View File

@ -87,6 +87,6 @@
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-raised-button mat-dialog-close>Close</button> <button mat-button mat-dialog-close>Close</button>
</mat-dialog-actions> </mat-dialog-actions>
</div> </div>

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
View File

@ -45,8 +45,8 @@
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button type="button" color="primary" (click)="submitForm()" mat-raised-button>Disable</button> <button type="button" color="primary" (click)="submitForm()" mat-button>Disable</button>
</mat-dialog-actions> </mat-dialog-actions>
} @else { } @else {
<mat-dialog-content> <mat-dialog-content>
@ -127,11 +127,9 @@
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
@if (disableRequest.currentStep === SetEnableStep.Completed || disableRequest.error) { @if (disableRequest.currentStep === SetEnableStep.Completed || disableRequest.error) {
<button color="primary" mat-raised-button mat-dialog-close>Close</button> <button mat-button mat-dialog-close>Close</button>
} @else { } @else {
<button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close> <button (click)="cancelClicked()" mat-button mat-dialog-close>Cancel</button>
Cancel
</button>
} }
</mat-dialog-actions> </mat-dialog-actions>
} }

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html
View File

@ -109,13 +109,13 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="!editControllerServiceForm.dirty || editControllerServiceForm.invalid || saving.value" [disabled]="!editControllerServiceForm.dirty || editControllerServiceForm.invalid || saving.value"
type="button" type="button"
color="primary" color="primary"
(click)="submitForm()" (click)="submitForm()"
mat-raised-button> mat-button>
<span *nifiSpinner="saving.value">Apply</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
View File

@ -58,13 +58,13 @@
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="enableControllerServiceForm.invalid" [disabled]="enableControllerServiceForm.invalid"
type="button" type="button"
color="primary" color="primary"
(click)="submitForm()" (click)="submitForm()"
mat-raised-button> mat-button>
Enable Enable
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>
@ -148,11 +148,9 @@
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
@if (enableRequest.currentStep === SetEnableStep.Completed || enableRequest.error) { @if (enableRequest.currentStep === SetEnableStep.Completed || enableRequest.error) {
<button color="primary" mat-raised-button mat-dialog-close>Close</button> <button mat-button mat-dialog-close>Close</button>
} @else { } @else {
<button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close> <button (click)="cancelClicked()" mat-button mat-dialog-close>Cancel</button>
Cancel
</button>
} }
</mat-dialog-actions> </mat-dialog-actions>
} }

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html
View File

@ -54,9 +54,9 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-stroked-button mat-dialog-close color="primary">Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
mat-raised-button mat-button
[disabled]="editParameterForm.invalid || saving.value" [disabled]="editParameterForm.invalid || saving.value"
(click)="okClicked()" (click)="okClicked()"
color="primary"> color="primary">

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-tenant/edit-tenant-dialog.component.html
View File

@ -60,9 +60,9 @@
</mat-dialog-content> </mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-stroked-button mat-dialog-close color="primary">Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
mat-raised-button mat-button
[disabled]="editTenantForm.invalid || saving.value" [disabled]="editTenantForm.invalid || saving.value"
(click)="okClicked()" (click)="okClicked()"
color="primary"> color="primary">

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
View File

@ -101,12 +101,12 @@
} }
</div> </div>
<div class="flex justify-end gap-x-2"> <div class="flex justify-end gap-x-2">
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
[disabled]="selectedType == null || saving" [disabled]="selectedType == null || saving"
color="primary" color="primary"
(click)="createExtension(selectedType)" (click)="createExtension(selectedType)"
mat-raised-button> mat-button>
<span *nifiSpinner="saving">Add</span> <span *nifiSpinner="saving">Add</span>
</button> </button>
</div> </div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/new-property-dialog/new-property-dialog.component.html
View File

@ -36,9 +36,9 @@
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-stroked-button mat-dialog-close color="primary">Cancel</button> <button mat-button mat-dialog-close>Cancel</button>
<button <button
mat-raised-button mat-button
[disabled]="!newPropertyForm.dirty || newPropertyForm.invalid" [disabled]="!newPropertyForm.dirty || newPropertyForm.invalid"
(click)="addProperty()" (click)="addProperty()"
color="primary"> color="primary">

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/ok-dialog/ok-dialog.component.html
View File

@ -20,5 +20,5 @@
<div class="text-sm max-w-sm">{{ request.message }}</div> <div class="text-sm max-w-sm">{{ request.message }}</div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-raised-button mat-dialog-close cdkFocusInitial color="primary">Ok</button> <button mat-button mat-dialog-close cdkFocusInitial>Ok</button>
</mat-dialog-actions> </mat-dialog-actions>

9
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
View File

@ -94,12 +94,7 @@
</ng-template> </ng-template>
</div> </div>
<div class="flex justify-end items-center gap-x-2"> <div class="flex justify-end items-center gap-x-2">
<button <button mat-button type="button" (mousedown)="preventDrag($event)" (click)="cancelClicked()">
color="primary"
mat-stroked-button
type="button"
(mousedown)="preventDrag($event)"
(click)="cancelClicked()">
Cancel Cancel
</button> </button>
<button <button
@ -108,7 +103,7 @@
type="button" type="button"
color="primary" color="primary"
(click)="okClicked()" (click)="okClicked()"
mat-raised-button> mat-button>
Ok Ok
</button> </button>
</div> </div>

9
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
View File

@ -59,12 +59,7 @@
> >
</div> </div>
<div class="flex justify-end items-center gap-x-2"> <div class="flex justify-end items-center gap-x-2">
<button <button mat-button type="button" (mousedown)="preventDrag($event)" (click)="cancelClicked()">
color="primary"
mat-stroked-button
type="button"
(mousedown)="preventDrag($event)"
(click)="cancelClicked()">
Cancel Cancel
</button> </button>
<button <button
@ -73,7 +68,7 @@
type="button" type="button"
color="primary" color="primary"
(click)="okClicked()" (click)="okClicked()"
mat-raised-button> mat-button>
Ok Ok
</button> </button>
</div> </div>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
View File

@ -442,6 +442,6 @@
</ng-template> </ng-template>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-raised-button mat-dialog-close>Ok</button> <button mat-button mat-dialog-close>Ok</button>
</mat-dialog-actions> </mat-dialog-actions>
</div> </div>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
View File

@ -172,7 +172,7 @@
} }
</div> </div>
<div> <div>
<button color="primary" mat-raised-button mat-dialog-close>Close</button> <button mat-button mat-dialog-close>Close</button>
</div> </div>
</div> </div>
</mat-dialog-actions> </mat-dialog-actions>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
View File

@ -236,7 +236,7 @@
<div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div> <div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div>
</div> </div>
<div> <div>
<button color="primary" mat-raised-button mat-dialog-close>Close</button> <button mat-button mat-dialog-close>Close</button>
</div> </div>
</div> </div>
</mat-dialog-actions> </mat-dialog-actions>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/yes-no-dialog/yes-no-dialog.component.html
View File

@ -20,6 +20,6 @@
<div class="text-sm max-w-sm" data-qa="yes-no-message">{{ request.message }}</div> <div class="text-sm max-w-sm" data-qa="yes-no-message">{{ request.message }}</div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-stroked-button mat-dialog-close color="primary" (click)="noClicked()">No</button> <button mat-button mat-dialog-close (click)="noClicked()">No</button>
<button mat-raised-button mat-dialog-close cdkFocusInitial color="primary" (click)="yesClicked()">Yes</button> <button mat-button mat-dialog-close cdkFocusInitial color="primary" (click)="yesClicked()">Yes</button>
</mat-dialog-actions> </mat-dialog-actions>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
View File

@ -393,7 +393,7 @@ $warn-dark-palette: (
); );
// Define the palettes for your theme // Define the palettes for your theme
$material-primary-light: mat.define-palette($material-primary-light-palette); $material-primary-light: mat.define-palette($material-primary-light-palette, 600, 100, 900);
$material-accent-light: mat.define-palette($material-primary-light-palette, A400, A100, A700); $material-accent-light: mat.define-palette($material-primary-light-palette, A400, A100, A700);
$nifi-canvas-primary-light: mat.define-palette($nifi-canvas-light-palette); $nifi-canvas-primary-light: mat.define-palette($nifi-canvas-light-palette);
$nifi-canvas-accent-light: mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700); $nifi-canvas-accent-light: mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700);

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
View File

@ -317,12 +317,9 @@ $appFontPath: '~roboto-fontface/fonts';
border-color: $accent-palette-A400; border-color: $accent-palette-A400;
} }
button:disabled { button.nifi-button:disabled {
color: $primary-palette-200 !important; color: $primary-palette-200 !important;
cursor: not-allowed; cursor: not-allowed;
}
button.nifi-button:disabled {
border: 1px solid $primary-palette-200; border: 1px solid $primary-palette-200;
i { i {

2
nifi-registry/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/dialogs/about/nf-registry-explorer-about.html
View File

@ -32,5 +32,5 @@ limitations under the License.
</div> </div>
</div> </div>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-raised-button color="fds-primary" mat-dialog-close>Close</button> <button mat-button mat-dialog-close>Close</button>
</mat-dialog-actions> </mat-dialog-actions>