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

[NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes (#8294) 

* [NIFI-12655] theme nifi following Material Design and leveraging Angular Material themes

* update accent palette usage to $nifi-canvas-accent-light-palette

* fix layout of create process group dialog

This closes #8294
This commit is contained in:
Scott Aslan 2024-01-30 08:54:56 -05:00 committed by GitHub
parent 13271d198f
commit 8b2758cd18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
161 changed files with 3530 additions and 1045 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/pom.xml
View File

@ -30,6 +30,12 @@
<node.version>v20.5.1</node.version>
<frontend.source>${basedir}/src/main/nifi</frontend.source>
<frontend.working.dir>${project.build.directory}/frontend-working-directory</frontend.working.dir>
<copy-rename-maven-plugin.version>1.0</copy-rename-maven-plugin.version>
<!--
String name of the theme file to be used.
Ex: 'purple' // will overwrite the nifi.scss theme file with the 'purple' theme.
-->
<frontend.theme>nifi</frontend.theme>
</properties>
<build>
@ -85,6 +91,27 @@
</execution>
</executions>
</plugin>
<plugin>
<groupId>com.coderplus.maven.plugins</groupId>
<artifactId>copy-rename-maven-plugin</artifactId>
<version>${copy-rename-maven-plugin.version}</version>
<executions>
<!--
Copy theme.
-->
<execution>
<id>copy-theme</id>
<phase>initialize</phase>
<goals>
<goal>copy</goal>
</goals>
<configuration>
<sourceFile>${frontend.working.dir}/src/assets/themes/${frontend.theme}.scss</sourceFile>
<destinationFile>${frontend.working.dir}/src/assets/themes/nifi.scss</destinationFile>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>

34
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss Normal file
View File

@ -0,0 +1,34 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
.splash {
background-color: $primary-palette-500;
}
}

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.html
View File

@ -17,8 +17,10 @@
<div class="splash h-screen p-20" *ngIf="guardLoading">
<div class="splash-img h-full flex items-center justify-center">
<mat-spinner color="warn"></mat-spinner>
<mat-spinner color="primary"></mat-spinner>
</div>
</div>
<router-outlet></router-outlet>
<div class="mat-app-background">
<router-outlet></router-outlet>
</div>

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

@ -16,8 +16,6 @@
*/
.splash {
background-color: #7098ad;
.splash-img {
background: transparent url(../assets/icons/nifi-drop-splash.svg) no-repeat center center;
}

34
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss Normal file
View File

@ -0,0 +1,34 @@
/*!
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
.access-policies-header {
color: $primary-palette-500;
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.scss
View File

@ -14,7 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.access-policies-header {
color: #728e9b;
}

36
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-theme.scss Normal file
View File

@ -0,0 +1,36 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
.add-tenant-to-policy-form {
.fa {
color: $primary-palette-A400;
}
}
}

2
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

@ -42,7 +42,7 @@
</div>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button mat-raised-button mat-dialog-close color="accent">Cancel</button>
<button mat-stroked-button mat-dialog-close color="primary">Cancel</button>
<button
mat-raised-button
[disabled]="addTenantsForm.invalid || saving.value"

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.scss
View File

@ -20,10 +20,6 @@
.add-tenant-to-policy-form {
@include mat.button-density(-1);
.fa {
color: #004849;
}
mat-selection-list {
max-height: 250px;
overflow: auto;

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.ts
View File

@ -37,7 +37,7 @@ export interface TenantItem {
standalone: true,
templateUrl: './policy-table.component.html',
imports: [MatTableModule, MatSortModule, NgIf],
styleUrls: ['./policy-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
styleUrls: ['./policy-table.component.scss']
})
export class PolicyTable {
displayedColumns: string[] = ['user', 'actions'];

51
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/_component-access-policies.component-theme.scss Normal file
View File

@ -0,0 +1,51 @@
/*!
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
.component-access-policies {
.operation-context-logo {
.icon {
color: $warn-palette-A200;
}
}
.operation-context-name {
color: $canvas-primary-palette-A200;
}
.operation-context-type {
color: $primary-palette-500;
}
}
}

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.scss
View File

@ -29,20 +29,14 @@
.operation-context-logo {
.icon {
font-size: 36px;
color: #ad9897;
}
}
.operation-context-name {
font-size: 18px;
color: #262626;
width: 370px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.operation-context-type {
color: #728e9b;
}
}

34
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss Normal file
View File

@ -0,0 +1,34 @@
/*!
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
.bulletin-board-header {
color: $primary-palette-500;
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.scss
View File

@ -14,7 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.bulletin-board-header {
color: #728e9b;
}

46
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/_bulletin-board-list.component-theme.scss Normal file
View File

@ -0,0 +1,46 @@
/*!
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$warn-palette: map.get($color-config, 'warn');
$canvas-accent-palette: map.get($canvas-color-config, 'accent');
// Get hues from palette
$canvas-accent-palette-700: mat.get-color-from-palette($canvas-accent-palette, 700);
$canvas-accent-palette-A400: mat.get-color-from-palette($canvas-accent-palette, 'A400');
$warn-palette-600: mat.get-color-from-palette($warn-palette, 600);
.bulletin-error {
color: $warn-palette-600;
}
.bulletin-warn {
color: $canvas-accent-palette-A400;
}
.bulletin-normal {
color: $canvas-accent-palette-700;
}
}

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.scss
View File

@ -15,18 +15,6 @@
* limitations under the License.
*/
.bulletin-error {
color: #ec3030;
}
.bulletin-warn {
color: #bda500;
}
.bulletin-normal {
color: #016131;
}
.link {
font-size: 16px;
}

34
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss Normal file
View File

@ -0,0 +1,34 @@
/*!
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
.counter-header {
color: $primary-palette-500;
}
}

28
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.scss
View File

@ -1,20 +1,16 @@
/*!
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.counter-header {
color: #728e9b;
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.ts
View File

@ -26,7 +26,7 @@ import { NiFiCommon } from '../../../../../service/nifi-common.service';
@Component({
selector: 'counter-table',
templateUrl: './counter-table.component.html',
styleUrls: ['./counter-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
styleUrls: ['./counter-table.component.scss']
})
export class CounterTable implements AfterViewInit {
private _canModifyCounters: boolean = false;

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
View File

@ -1229,11 +1229,11 @@ export class CanvasUtils {
const bBox = activeThreadCount.node().getBBox();
return d.dimensions.width - bBox.width - 20;
})
.style('fill', function () {
.attr('class', function () {
if (terminatedThreads > 0) {
return '#ba554a';
return `active-thread-count-icon warn-400`;
} else {
return '#728e9b';
return `active-thread-count-icon primary-500`;
}
})
.style('display', 'block')

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
View File

@ -1432,18 +1432,18 @@ export class ConnectionManager {
// update the coloring of the backgrounds
backgrounds.forEach((background, i) => {
if (i % 2 === 0) {
background.attr('fill', '#f4f6f7');
background.attr('class', 'primary-contrast-800');
} else {
background.attr('fill', '#ffffff');
background.attr('class', 'primary-contrast-900');
}
});
// update the coloring of the label borders
borders.forEach((border, i) => {
if (i > 0) {
border.attr('fill', '#c7d2d7');
border.attr('class', 'primary-200');
} else {
border.attr('fill', 'transparent');
border.attr('class', 'transparent');
}
});

13
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
View File

@ -151,7 +151,6 @@ export class PortManager {
.attr('class', 'remote-banner')
.attr('width', this.remotePortDimensions.width)
.attr('height', PortManager.OFFSET_VALUE)
.attr('fill', '#e3e8eb')
.classed('hidden', this.isLocalPort);
// port icon
@ -386,18 +385,18 @@ export class PortManager {
// update the run status
updated
.select('text.run-status-icon')
.attr('fill', function (d: any) {
let fill: string = '#728e9b';
.attr('class', function (d: any) {
let clazz: string = 'primary-500';
if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
fill = '#cf9f5d';
clazz = 'canvas-accent-A200';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') {
fill = '#7dc7a0';
clazz = 'canvas-accent-200';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
fill = '#d18686';
clazz = 'warn-200';
}
return fill;
return `run-status-icon ${clazz}`;
})
.attr('font-family', function (d: any) {
let family: string = 'FontAwesome';

54
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
View File

@ -121,11 +121,11 @@ export class ProcessGroupManager {
// process group name background
processGroup
.append('rect')
.attr('class', 'process-group-banner')
.attr('width', function (d: any) {
return d.dimensions.width;
})
.attr('height', 32)
.attr('fill', '#b8c6cd');
.attr('height', 32);
// process group name
processGroup
@ -227,16 +227,17 @@ export class ProcessGroupManager {
details
.append('rect')
.attr('class', 'process-group-details-banner')
.attr('x', 0)
.attr('y', 32)
.attr('width', function () {
return processGroupData.dimensions.width;
})
.attr('height', 24)
.attr('fill', '#e3e8eb');
.attr('height', 24);
details
.append('rect')
.attr('class', 'process-group-details-banner')
.attr('x', 0)
.attr('y', function () {
return processGroupData.dimensions.height - 24;
@ -244,8 +245,7 @@ export class ProcessGroupManager {
.attr('width', function () {
return processGroupData.dimensions.width;
})
.attr('height', 24)
.attr('fill', '#e3e8eb');
.attr('height', 24);
// --------
// contents
@ -456,79 +456,79 @@ export class ProcessGroupManager {
// queued
details
.append('rect')
.attr('class', 'process-group-queued-stats')
.attr('width', function () {
return processGroupData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 66)
.attr('fill', '#f4f6f7');
.attr('y', 66);
// border
details
.append('rect')
.attr('class', 'process-group-stats-border')
.attr('width', function () {
return processGroupData.dimensions.width;
})
.attr('height', 1)
.attr('x', 0)
.attr('y', 84)
.attr('fill', '#c7d2d7');
.attr('y', 84);
// in
details
.append('rect')
.attr('class', 'process-group-stats-in-out')
.attr('width', function () {
return processGroupData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 85)
.attr('fill', '#ffffff');
.attr('y', 85);
// border
details
.append('rect')
.attr('class', 'process-group-stats-border')
.attr('width', function () {
return processGroupData.dimensions.width;
})
.attr('height', 1)
.attr('x', 0)
.attr('y', 103)
.attr('fill', '#c7d2d7');
.attr('y', 103);
// read/write
details
.append('rect')
.attr('class', 'process-group-read-write-stats')
.attr('width', function () {
return processGroupData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 104)
.attr('fill', '#f4f6f7');
.attr('y', 104);
// border
details
.append('rect')
.attr('class', 'process-group-stats-border')
.attr('width', function () {
return processGroupData.dimensions.width;
})
.attr('height', 1)
.attr('x', 0)
.attr('y', 122)
.attr('fill', '#c7d2d7');
.attr('y', 122);
// out
details
.append('rect')
.attr('class', 'process-group-stats-in-out')
.attr('width', function () {
return processGroupData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 123)
.attr('fill', '#ffffff');
.attr('y', 123);
// -----
// stats
@ -1075,22 +1075,22 @@ export class ProcessGroupManager {
const versionControl = processGroup
.select('text.version-control')
.style('visibility', self.isUnderVersionControl(processGroupData) ? 'visible' : 'hidden')
.style('fill', function () {
.attr('class', function () {
if (self.isUnderVersionControl(processGroupData)) {
const vciState = processGroupData.versionedFlowState;
if (vciState === 'SYNC_FAILURE') {
return '#666666';
return `version-control primary-contrast-A700`;
} else if (vciState === 'LOCALLY_MODIFIED_AND_STALE') {
return '#BA554A';
return `version-control warn-400`;
} else if (vciState === 'STALE') {
return '#BA554A';
return `version-control warn-400`;
} else if (vciState === 'LOCALLY_MODIFIED') {
return '#666666';
return `version-control primary-contrast-A700`;
} else {
return '#1A9964';
return `version-control canvas-accent-600`;
}
} else {
return '#000';
return 'version-control primary-contrast-200';
}
})
.text(function () {

42
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
View File

@ -228,79 +228,79 @@ export class ProcessorManager {
// in
details
.append('rect')
.attr('class', 'processor-stats-in-out')
.attr('width', function () {
return processorData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 50)
.attr('fill', '#f4f6f7');
.attr('y', 50);
// border
details
.append('rect')
.attr('class', 'processor-stats-border')
.attr('width', function () {
return processorData.dimensions.width;
})
.attr('height', 1)
.attr('x', 0)
.attr('y', 68)
.attr('fill', '#c7d2d7');
.attr('y', 68);
// read/write
details
.append('rect')
.attr('class', 'processor-read-write-stats')
.attr('width', function () {
return processorData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 69)
.attr('fill', '#ffffff');
.attr('y', 69);
// border
details
.append('rect')
.attr('class', 'processor-stats-border')
.attr('width', function () {
return processorData.dimensions.width;
})
.attr('height', 1)
.attr('x', 0)
.attr('y', 87)
.attr('fill', '#c7d2d7');
.attr('y', 87);
// out
details
.append('rect')
.attr('class', 'processor-stats-in-out')
.attr('width', function () {
return processorData.dimensions.width;
})
.attr('height', 20)
.attr('x', 0)
.attr('y', 88)
.attr('fill', '#f4f6f7');
.attr('y', 88);
// border
details
.append('rect')
.attr('class', 'processor-stats-border')
.attr('width', function () {
return processorData.dimensions.width;
})
.attr('height', 1)
.attr('x', 0)
.attr('y', 106)
.attr('fill', '#c7d2d7');
.attr('y', 106);
// tasks/time
details
.append('rect')
.attr('class', 'processor-read-write-stats')
.attr('width', function () {
return processorData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 107)
.attr('fill', '#ffffff');
.attr('y', 107);
// stats label container
const processorStatsLabel = details.append('g').attr('transform', 'translate(10, 55)');
@ -669,20 +669,20 @@ export class ProcessorManager {
// update the run status
updated
.select('text.run-status-icon')
.attr('fill', function (d: any) {
let fill: string = '#728e9b';
.attr('class', function (d: any) {
let clazz: string = 'primary-500';
if (d.status.aggregateSnapshot.runStatus === 'Validating') {
fill = '#a8a8a8';
clazz = 'warn-contrast-300';
} else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
fill = '#cf9f5d';
clazz = 'canvas-accent-A400';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') {
fill = '#7dc7a0';
clazz = 'canvas-accent-200';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
fill = '#d18686';
clazz = 'warn-200';
}
return fill;
return `run-status-icon ${clazz}`;
})
.attr('font-family', function (d: any) {
let family: string = 'FontAwesome';

24
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
View File

@ -120,11 +120,11 @@ export class RemoteProcessGroupManager {
// remote process group name background
remoteProcessGroup
.append('rect')
.attr('class', 'remote-process-group-banner')
.attr('width', function (d: any) {
return d.dimensions.width;
})
.attr('height', 32)
.attr('fill', '#b8c6cd');
.attr('height', 32);
// remote process group name
remoteProcessGroup
@ -182,13 +182,13 @@ export class RemoteProcessGroupManager {
details
.append('rect')
.attr('class', 'remote-process-group-details-banner')
.attr('x', 0)
.attr('y', 32)
.attr('width', function () {
return remoteProcessGroupData.dimensions.width;
})
.attr('height', 24)
.attr('fill', '#e3e8eb');
.attr('height', 24);
// -------
// details
@ -217,35 +217,35 @@ export class RemoteProcessGroupManager {
// sent
details
.append('rect')
.attr('class', 'remote-process-group-sent-stats')
.attr('width', function () {
return remoteProcessGroupData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 66)
.attr('fill', '#f4f6f7');
.attr('y', 66);
// border
details
.append('rect')
.attr('class', 'remote-process-group-stats-border')
.attr('width', function () {
return remoteProcessGroupData.dimensions.width;
})
.attr('height', 1)
.attr('x', 0)
.attr('y', 84)
.attr('fill', '#c7d2d7');
.attr('y', 84);
// received
details
.append('rect')
.attr('class', 'remote-process-group-received-stats')
.attr('width', function () {
return remoteProcessGroupData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 85)
.attr('fill', '#ffffff');
.attr('y', 85);
// -----
// stats
@ -342,6 +342,7 @@ export class RemoteProcessGroupManager {
details
.append('rect')
.attr('class', 'remote-process-group-last-refresh-rect')
.attr('x', 0)
.attr('y', function () {
return remoteProcessGroupData.dimensions.height - 24;
@ -349,8 +350,7 @@ export class RemoteProcessGroupManager {
.attr('width', function () {
return remoteProcessGroupData.dimensions.width;
})
.attr('height', 24)
.attr('fill', '#e3e8eb');
.attr('height', 24);
details
.append('text')

537
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss Normal file
View File

@ -0,0 +1,537 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
$canvas-accent-palette: map.get($canvas-color-config, 'accent');
// Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
$primary-palette-200: mat.get-color-from-palette($primary-palette, 200);
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$primary-palette-A200: mat.get-color-from-palette($primary-palette, 'A200');
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
$canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200);
$canvas-primary-palette-300: mat.get-color-from-palette($canvas-primary-palette, 300);
$canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400);
$canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
$canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600);
$canvas-primary-palette-700: mat.get-color-from-palette($canvas-primary-palette, 700);
$canvas-primary-palette-800: mat.get-color-from-palette($canvas-primary-palette, 800);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
$canvas-primary-palette-A400: mat.get-color-from-palette($canvas-primary-palette, 'A400');
$canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700');
$canvas-accent-palette-200: mat.get-color-from-palette($canvas-accent-palette, 200);
$canvas-accent-palette-300: mat.get-color-from-palette($canvas-accent-palette, 300);
$canvas-accent-palette-600: mat.get-color-from-palette($canvas-accent-palette, 600);
$canvas-accent-palette-800: mat.get-color-from-palette($canvas-accent-palette, 800);
$canvas-accent-palette-900: mat.get-color-from-palette($canvas-accent-palette, 900);
$canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200');
$canvas-accent-palette-A400: mat.get-color-from-palette($canvas-accent-palette, 'A400');
$canvas-accent-palette-A700: mat.get-color-from-palette($canvas-accent-palette, 'A700');
$warn-palette-200: mat.get-color-from-palette($warn-palette, 200);
$warn-palette-400: mat.get-color-from-palette($warn-palette, 400);
$warn-palette-800: mat.get-color-from-palette($warn-palette, 800);
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
$warn-palette-A700: mat.get-color-from-palette($warn-palette, 'A700');
.canvas-background {
background-color: $canvas-primary-palette-600;
background-image: linear-gradient(to right, $canvas-primary-palette-700 1px, transparent 1px),
linear-gradient(to bottom, $canvas-primary-palette-700 1px, transparent 1px);
}
/* svg styles */
svg.canvas-svg {
text.unset {
fill: $canvas-primary-palette-400;
}
/*
All components
*/
.transparent {
fill: transparent
}
.warn-200 {
fill: $warn-palette-200;
}
.warn-400 {
fill: $warn-palette-400;
}
.warn-A700 {
fill: $warn-palette-A700;
}
.warn-contrast-300 {
fill: $canvas-primary-palette-400;
}
.canvas-accent-200 {
fill: $canvas-accent-palette-200;
}
.canvas-accent-600 {
fill: $canvas-accent-palette-600;
}
.canvas-accent-A200 {
fill: $canvas-accent-palette-A200;
}
.canvas-accent-A400 {
fill: $canvas-accent-palette-A400;
}
.primary-200 {
fill: $primary-palette-200;
}
.primary-500 {
fill: $primary-palette-500;
}
.primary-contrast-200 {
fill: $canvas-primary-palette-200;
}
.primary-contrast-300 {
fill: $canvas-primary-palette-300;
}
.primary-contrast-800 {
fill: $canvas-primary-palette-800;
}
.primary-contrast-900 {
fill: $canvas-primary-palette-900;
}
.primary-contrast-A700 {
fill: $canvas-primary-palette-A700;
}
g.component rect.body {
fill: $canvas-primary-palette-900;
}
g.component rect.body.unauthorized {
fill: $canvas-primary-palette-700;
}
g.component rect.border {
stroke: $canvas-primary-palette-50;
}
g.component rect.border.unauthorized {
stroke: $warn-palette-400 !important;
}
g.component rect.border.ghost {
stroke: $canvas-primary-palette-400 !important;
}
g.component rect.processor-icon-container.unauthorized {
fill: $canvas-primary-palette-700 !important;
}
g.component.selected rect.border {
stroke: $primary-palette-A400 !important;
}
text.stats-label {
fill: $canvas-primary-palette-A200;
}
text.stats-value {
fill: $warn-palette-A400;
}
text.stats-info {
fill: $primary-palette-500;
}
text.bulletin-icon {
fill: $canvas-primary-palette-900;
}
rect.bulletin-background {
fill: $warn-palette-400;
}
text.active-thread-count-icon {
fill: $primary-palette-500;
}
text.active-thread-count {
fill: $warn-palette-A400;
}
path.component-comments {
fill: $canvas-primary-palette-50;
stroke: $canvas-primary-palette-50;
}
/*
Selection
*/
g.component.connectable-destination rect.border {
stroke: $canvas-accent-palette-900;
}
rect.component-selection,
rect.drag-selection,
rect.label-drag {
stroke: $canvas-primary-palette-A400;
fill: transparent;
}
text.add-connect {
fill: $primary-palette-A400;
}
/*
Processor
*/
#component-drop-shadow feFlood {
flood-color: $canvas-primary-palette-200;
}
#connection-full-drop-shadow feFlood {
flood-color: $warn-palette-400;
}
rect.processor-read-write-stats {
fill: $canvas-primary-palette-900;
}
rect.processor-stats-border {
fill: $primary-palette-200;
}
rect.processor-stats-in-out {
fill: $canvas-primary-palette-800;
}
text.processor-name {
fill: $canvas-primary-palette-A200;
}
text.processor-type {
fill: $primary-palette-500;
}
text.processor-bundle {
fill: $canvas-primary-palette-A700;
}
rect.processor-icon-container {
fill: $canvas-primary-palette-900;
}
circle.restricted-background,
circle.is-primary-background {
fill: $canvas-primary-palette-900;
}
text.restricted {
fill: $warn-palette-400;
}
/*
Connection
*/
g.connection rect.body {
fill: $canvas-primary-palette-900;
}
g.connection rect.body.unauthorized {
fill: $canvas-primary-palette-700;
}
g.connection rect.border.unauthorized {
stroke: $warn-palette-400;
}
g.connection rect.border.full {
stroke: $warn-palette-A700;
}
g.connection.selected rect.border {
stroke: $canvas-accent-palette-A700;
}
path.connector {
stroke: $warn-palette-800;
}
path.connector.connectable {
stroke: $canvas-accent-palette-900;
}
g.connection path.connection-path {
fill: none;
stroke: $canvas-primary-palette-50;
}
g.connection path.connection-path.full {
stroke: $warn-palette-400;
}
g.connection path.connection-path.unauthorized {
stroke: $warn-palette-400;
}
text.connection-from-run-status,
text.connection-to-run-status,
text.expiration-icon,
text.load-balance-icon,
text.penalized-icon {
fill: $primary-palette-500;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
text.load-balance-icon-active {
fill: $primary-palette-A200;
}
text.connection-from-run-status.is-missing-port,
text.connection-to-run-status.is-missing-port {
fill: $canvas-accent-palette-A200;
}
g.connection rect.backpressure-tick {
fill: transparent;
}
g.connection rect.backpressure-tick.data-size-prediction.prediction-down,
g.connection rect.backpressure-tick.object-prediction.prediction-down {
fill: $canvas-primary-palette-900;
}
g.connection rect.backpressure-tick.data-size-prediction,
g.connection rect.backpressure-tick.object-prediction {
fill: $canvas-primary-palette-50;
}
g.connection rect.backpressure-tick.data-size-prediction.not-configured,
g.connection rect.backpressure-tick.object-prediction.not-configured,
g.connection rect.backpressure-tick.data-size-prediction.prediction-down.not-configured,
g.connection rect.backpressure-tick.object-prediction.prediction-down.not-configured {
fill: transparent;
}
g.connection rect.backpressure-tick.not-configured {
fill: $canvas-primary-palette-400;
}
g.connection rect.backpressure-object,
g.connection rect.backpressure-data-size {
fill: $canvas-primary-palette-500
}
g.connection rect.backpressure-object.not-configured,
g.connection rect.backpressure-data-size.not-configured {
fill: transparent;
}
g.connection rect.backpressure-percent {
fill: $canvas-accent-palette-300;
}
g.connection rect.backpressure-percent.warning {
fill: $canvas-accent-palette-A400;
}
g.connection rect.backpressure-percent.error {
fill: $warn-palette-400;
}
/* ghost connection */
g.connection.ghost path.connection-path,
g.connection.ghost rect.connection-label {
stroke: $canvas-primary-palette-400;
}
g.connection path.connection-selection-path {
stroke: $canvas-accent-palette-A700;
fill: none;
}
g.connection path.connection-path-selectable {
fill: none;
}
g.connection rect.startpoint {
stroke: $warn-palette-800;
fill: $warn-palette-800;
}
g.connection rect.midpoint {
stroke: $canvas-accent-palette-A700;
fill: $canvas-accent-palette-A700;
}
g.connection rect.endpoint {
stroke: $canvas-accent-palette-800;
fill: $canvas-accent-palette-800;
}
/* labels */
g.label rect.labelpoint {
stroke: $canvas-accent-palette-A700;
fill: $canvas-accent-palette-A700;
}
/* funnels */
text.funnel-icon {
fill: $warn-palette-A200;
}
/* ports */
text.port-name {
fill: $canvas-primary-palette-A200;
}
text.port-icon {
fill: $warn-palette-A200;
}
rect.remote-banner {
fill: $primary-palette-100;
}
text.port-transmission-icon {
fill: $primary-palette-500;
}
/* process groups */
rect.process-group-stats-in-out {
fill: $canvas-primary-palette-900;
}
rect.process-group-stats-border {
fill: $primary-palette-200;
}
rect.process-group-queued-stats {
fill: $canvas-primary-palette-800;
}
rect.process-group-read-write-stats {
fill: $canvas-primary-palette-800;
}
rect.process-group-details-banner {
fill: $primary-palette-100;
}
text.process-group-name {
fill: $canvas-primary-palette-A200;
}
text.version-control {
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
rect.process-group-banner {
fill: $primary-palette-200;
}
text.process-group-contents-count {
fill: $warn-palette-A400;
}
g.process-group.drop rect.border {
stroke: $canvas-accent-palette-800;
}
text.process-group-contents-icon {
fill: $primary-palette-500;
}
/* remote process group */
rect.remote-process-group-stats-border {
fill: $primary-palette-200;
}
rect.remote-process-group-sent-stats {
fill: $canvas-primary-palette-800;
}
rect.remote-process-group-received-stats {
fill: $canvas-primary-palette-900;
}
rect.remote-process-group-details-banner {
fill: $primary-palette-100;
}
rect.remote-process-group-last-refresh-rect {
fill: $primary-palette-100;
}
text.remote-process-group-name {
fill: $canvas-primary-palette-A200;
}
text.remote-process-group-uri {
fill: $primary-palette-A400;
}
rect.remote-process-group-banner {
fill: $primary-palette-200;
}
text.remote-process-group-transmission-status {
fill: $primary-palette-500;
}
text.remote-process-group-transmission-secure {
fill: $primary-palette-A400;
}
text.remote-process-group-last-refresh {
fill: $primary-palette-500;
}
}
}

156
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss
View File

@ -16,10 +16,7 @@
*/
.canvas-background {
background-color: #f9fafb;
background-size: 14px 14px;
background-image: linear-gradient(to right, rgba(229, 235, 237, 1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(229, 235, 237, 1) 1px, transparent 1px);
z-index: 1;
overflow: hidden;
}
@ -36,7 +33,6 @@
text.unset {
font-style: italic;
font-weight: normal;
fill: #aaa;
}
.moveable {
@ -51,48 +47,30 @@
font-family: Roboto;
}
g.component rect.body {
fill: #ffffff;
}
g.component rect.body.unauthorized {
fill: #f4f6f7;
}
g.component rect.border {
stroke: rgba(0, 0, 0, 0.25);
stroke-width: 1;
}
g.component rect.border.unauthorized {
stroke-width: 3;
stroke: #ba554a !important;
stroke-dasharray: 4;
}
g.component rect.border.ghost {
stroke-width: 3;
stroke: #aaaaaa !important;
stroke-dasharray: 4;
}
g.component rect.processor-icon-container.unauthorized {
fill: #f4f6f7 !important;
}
g.component.selected rect.border {
stroke: #004849 !important;
stroke-width: 3;
}
text.stats-label {
fill: #262626;
font-size: 12px;
font-family: Roboto Slab;
}
text.stats-value {
fill: #775351;
font-size: 12px;
font-weight: bold;
}
@ -104,38 +82,25 @@
}
text.stats-info {
fill: #728e9b;
font-size: 12px;
}
text.bulletin-icon {
font-size: 13px;
font-family: FontAwesome;
fill: #ffffff;
}
rect.bulletin-background {
fill: #ba554a;
}
text.active-thread-count-icon {
font-family: flowfont;
font-size: 12px;
fill: #728e9b;
text-anchor: end;
}
text.active-thread-count {
fill: #775351;
font-size: 12px;
font-weight: bold;
}
path.component-comments {
fill: #000;
stroke: #000;
}
text.spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
@ -183,23 +148,19 @@
*/
g.component.connectable-destination rect.border {
stroke: #00ff00;
stroke-width: 3;
}
rect.component-selection,
rect.drag-selection,
rect.label-drag {
stroke: #444444;
stroke-opacity: 0.5;
fill: transparent;
}
text.add-connect {
cursor: pointer;
font-family: flowfont;
font-size: 28px;
fill: #004849;
}
/*
@ -207,24 +168,17 @@
*/
text.processor-name {
fill: #262626;
font-size: 14px;
}
text.processor-type {
fill: #728e9b;
font-size: 12px;
}
text.processor-bundle {
fill: #666;
font-size: 10px;
}
rect.processor-icon-container {
fill: #ffffff;
}
text.processor-icon {
font-family: flowfont;
font-size: 30px;
@ -233,14 +187,12 @@
circle.restricted-background,
circle.is-primary-background {
visibility: hidden;
fill: rgba(255, 255, 255, 0.9);
}
text.restricted {
visibility: hidden;
font-family: FontAwesome;
font-size: 12px;
fill: #ba554a;
}
text.is-primary {
@ -262,59 +214,38 @@
font-family: Roboto;
}
g.connection rect.body {
fill: #ffffff;
}
g.connection rect.body.unauthorized {
fill: #f4f6f7;
}
g.connection rect.border.unauthorized {
stroke-width: 1.5;
stroke: #ba554a;
stroke-dasharray: 3, 3;
}
g.connection rect.border.full {
stroke: rgba(186, 85, 74, 0.65);
stroke-width: 1;
}
g.connection.selected rect.border {
/*stroke: #004849;*/
stroke: #ffcc00;
stroke-width: 3;
}
path.connector {
fill: none;
pointer-events: none;
stroke: #ff0000;
stroke-width: 3;
stroke-opacity: 0.5;
stroke-dasharray: 2;
}
path.connector.connectable {
stroke: #00ff00;
stroke-width: 3;
stroke-dasharray: 4;
}
g.connection path.connection-path {
fill: none;
stroke: #000000;
stroke-width: 2;
cursor: pointer;
}
g.connection path.connection-path.full {
stroke: #ba554a;
}
g.connection path.connection-path.unauthorized {
stroke: #ba554a;
stroke-dasharray: 3, 3;
}
@ -323,14 +254,8 @@
text.expiration-icon,
text.load-balance-icon,
text.penalized-icon {
fill: #728e9b;
font-family: FontAwesome;
font-size: 12px;
text-shadow: 0 0 4px rgba(255, 255, 255, 1);
}
text.load-balance-icon-active {
fill: #44a3cf;
}
text.load-balance-icon-184 {
@ -341,67 +266,15 @@
transform-origin: 213px 10px 0;
}
text.connection-from-run-status.is-missing-port,
text.connection-to-run-status.is-missing-port {
fill: #cf9f5d;
}
g.connection rect.backpressure-tick {
fill: transparent;
}
g.connection rect.backpressure-tick.data-size-prediction.prediction-down,
g.connection rect.backpressure-tick.object-prediction.prediction-down {
fill: white;
}
g.connection rect.backpressure-tick.data-size-prediction,
g.connection rect.backpressure-tick.object-prediction {
fill: black;
}
g.connection rect.backpressure-tick.data-size-prediction.not-configured,
g.connection rect.backpressure-tick.object-prediction.not-configured,
g.connection rect.backpressure-tick.data-size-prediction.prediction-down.not-configured,
g.connection rect.backpressure-tick.object-prediction.prediction-down.not-configured {
fill: transparent;
}
g.connection rect.backpressure-tick.not-configured {
fill: #acacac;
}
g.connection rect.backpressure-object,
g.connection rect.backpressure-data-size {
fill: #d8d8d8;
}
/**/
g.connection rect.backpressure-object > title > tspan,
g.connection rect.backpressure-data-size > title > tspan {
display: block;
}
/**/
g.connection rect.backpressure-object.not-configured,
g.connection rect.backpressure-data-size.not-configured {
fill: transparent;
}
g.connection rect.backpressure-percent {
fill: #67b796;
pointer-events: none;
}
g.connection rect.backpressure-percent.warning {
fill: #cea958;
}
g.connection rect.backpressure-percent.error {
fill: #ba554a;
}
/* grouped connection */
g.connection.grouped path.connection-path,
@ -413,21 +286,17 @@
g.connection.ghost path.connection-path,
g.connection.ghost rect.connection-label {
stroke: #aaaaaa;
stroke-dasharray: 4;
}
g.connection path.connection-selection-path {
visibility: hidden;
stroke-width: 1;
stroke: #ffcc00;
fill: none;
}
g.connection path.connection-path-selectable {
visibility: hidden;
stroke-width: 20;
fill: none;
cursor: pointer;
}
@ -444,20 +313,11 @@
visibility: visible;
}
g.connection rect.startpoint {
stroke: #ff0000;
fill: #ff0000;
}
g.connection rect.midpoint {
stroke: #ffcc00;
fill: #ffcc00;
cursor: pointer;
}
g.connection rect.endpoint {
stroke: #0000ff;
fill: #0000ff;
cursor: pointer;
}
@ -466,8 +326,6 @@
g.label rect.labelpoint {
display: none;
stroke-width: 1;
stroke: #ffcc00;
fill: #ffcc00;
cursor: se-resize;
}
@ -478,7 +336,6 @@
/* funnels */
text.funnel-icon {
fill: #ad9897;
font-family: flowfont;
font-size: 30px;
}
@ -486,19 +343,16 @@
/* ports */
text.port-name {
fill: #262626;
font-size: 14px;
}
text.port-icon {
fill: #ad9897;
font-family: flowfont;
font-size: 30px;
}
text.port-transmission-icon {
font-size: 15px;
fill: #728e9b;
}
/* active thread count */
@ -510,59 +364,49 @@
/* process groups */
text.process-group-name {
fill: #262626;
font-size: 14px;
}
text.version-control {
font-family: FontAwesome;
font-size: 18px;
text-shadow: 0 0 4px rgba(255, 255, 255, 1);
visibility: hidden;
}
text.process-group-contents-count {
fill: #775351;
font-size: 15px;
font-weight: 500;
font-family: Roboto, sans-serif;
}
g.process-group.drop rect.border {
stroke: #0000ff;
stroke-width: 3;
}
text.process-group-contents-icon {
font-size: 15px;
fill: #728e9b;
}
/* remote process group */
text.remote-process-group-name {
fill: #262626;
font-size: 14px;
}
text.remote-process-group-uri {
fill: #004849;
font-size: 12px;
}
text.remote-process-group-transmission-status {
font-size: 15px;
fill: #728e9b;
}
text.remote-process-group-transmission-secure {
font-family: FontAwesome;
font-size: 13px;
fill: #004849;
}
text.remote-process-group-last-refresh {
fill: #728e9b;
font-size: 10px;
}
}

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
View File

@ -313,15 +313,15 @@ export class Canvas implements OnInit, OnDestroy {
.attr('markerWidth', 6)
.attr('markerHeight', 6)
.attr('orient', 'auto')
.attr('fill', function (d: string) {
.attr('class', function (d: string) {
if (d === 'ghost') {
return '#aaaaaa';
return 'primary-contrast-300';
} else if (d === 'unauthorized') {
return '#ba554a';
return 'warn-400';
} else if (d === 'full') {
return '#ba554a';
return 'warn-400';
} else {
return '#000000';
return 'primary-contrast-200';
}
})
.append('path')
@ -352,7 +352,6 @@ export class Canvas implements OnInit, OnDestroy {
// color/opacity
componentDropShadowFilter
.append('feFlood')
.attr('flood-color', '#000000')
.attr('flood-opacity', 0.4)
.attr('result', 'offsetColor');
@ -394,7 +393,6 @@ export class Canvas implements OnInit, OnDestroy {
// color/opacity
connectionFullDropShadowFilter
.append('feFlood')
.attr('flood-color', '#ba554a')
.attr('flood-opacity', 1)
.attr('result', 'offsetColor');

42
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss Normal file
View File

@ -0,0 +1,42 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
$primary-palette-600: mat.get-color-from-palette($primary-palette, 600);
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
.breadcrumb-container {
box-shdowa: 0 1px 6px $canvas-primary-palette-50;
background-color: $canvas-primary-palette-900;
border-top: 1px solid $primary-palette-300;
color: $primary-palette-600;
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/footer.component.html
View File

@ -16,7 +16,7 @@
-->
<footer>
<div class="bg-nifi-accent breadcrumb-container">
<div class="breadcrumb-container">
<breadcrumbs
[entity]="(breadcrumbs$ | async)!"
[currentProcessGroupId]="(currentProcessGroupId$ | async)!"></breadcrumbs>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/footer.component.scss
View File

@ -16,9 +16,5 @@
*/
.breadcrumb-container {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
background-color: rgba(249, 250, 251, 0.9);
border-top: 1px solid #aabbc3;
color: #598599;
z-index: 3;
}

61
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss Normal file
View File

@ -0,0 +1,61 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
$canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600);
$canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, 'A100');
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
div.navigation-control {
box-shadow: 0 1px 6px $canvas-primary-palette-50;
background-color: $canvas-primary-palette-600;
border-top: 1px solid $primary-palette-300;
border-right: 1px solid $primary-palette-300;
border-bottom: 1px solid $primary-palette-300;
.fa,
.icon {
color: $primary-palette-A400;
}
.navigation-control-header {
&:hover {
background: linear-gradient(90deg, $canvas-primary-palette-A100 252px, $primary-palette-100 34px);
}
}
.navigation-control-title {
color: $canvas-primary-palette-A200;
}
}
}

44
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss Normal file
View File

@ -0,0 +1,44 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-600: mat.get-color-from-palette($primary-palette, 600);
$canvas-primary-palette-700: mat.get-color-from-palette($canvas-primary-palette, 700);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
#birdseye {
background: $canvas-primary-palette-900;
border: 1px solid $canvas-primary-palette-700;
rect.birdseye-brush {
stroke: $primary-palette-600;
fill: transparent;
}
}
}

7
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/birdseye.component.scss
View File

@ -18,9 +18,7 @@
:host ::ng-deep #birdseye {
width: 266px;
height: 150px;
background: #fff;
overflow: hidden;
border: 1px solid #e5ebed;
box-sizing: content-box;
canvas,
@ -28,9 +26,4 @@
position: absolute;
overflow: hidden;
}
rect.birdseye-brush {
stroke: #7098ad;
fill: transparent;
}
}

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss
View File

@ -16,17 +16,11 @@
*/
div.navigation-control {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
background-color: rgba(249, 250, 251, 0.9);
border-top: 1px solid #aabbc3;
border-right: 1px solid #aabbc3;
border-bottom: 1px solid #aabbc3;
margin-bottom: 2px;
.fa,
.icon {
font-size: 18px;
color: #004849;
}
.navigation-control-header {
@ -36,16 +30,11 @@ div.navigation-control {
line-height: 34px;
text-align: center;
}
&:hover {
background: linear-gradient(90deg, rgba(227, 232, 235, 0) 252px, rgba(227, 232, 235, 1) 34px);
}
}
.navigation-control-title {
font-size: 12px;
font-family: 'Roboto Slab';
color: #262626;
letter-spacing: 0.05rem;
}
}

79
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss Normal file
View File

@ -0,0 +1,79 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
$canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600);
$canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, 'A100');
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
div.operation-control {
box-shadow: 0 1px 6px $canvas-primary-palette-50;
background-color: $canvas-primary-palette-600;
border-top: 1px solid $primary-palette-300;
border-right: 1px solid $primary-palette-300;
border-bottom: 1px solid $primary-palette-300;
.fa,
.icon {
color: $primary-palette-A400;
}
.operation-control-header {
&:hover {
background: linear-gradient(90deg, $canvas-primary-palette-A100 252px, $primary-palette-100 34px);
}
}
.operation-control-title {
color: $canvas-primary-palette-A200;
}
.operation-context-logo {
.icon {
color: $warn-palette-A200;
}
}
.operation-context-name {
color: $canvas-primary-palette-A200;
}
.operation-context-type {
color: $primary-palette-500;
}
}
}

15
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss
View File

@ -16,17 +16,11 @@
*/
div.operation-control {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
background-color: rgba(249, 250, 251, 0.9);
border-top: 1px solid #aabbc3;
border-right: 1px solid #aabbc3;
border-bottom: 1px solid #aabbc3;
margin-bottom: 2px;
.fa,
.icon {
font-size: 18px;
color: #004849;
}
.operation-control-header {
@ -36,16 +30,11 @@ div.operation-control {
line-height: 34px;
text-align: center;
}
&:hover {
background: linear-gradient(90deg, rgba(227, 232, 235, 0) 252px, rgba(227, 232, 235, 1) 34px);
}
}
.operation-control-title {
font-size: 12px;
font-family: 'Roboto Slab';
color: #262626;
letter-spacing: 0.05rem;
}
@ -56,13 +45,11 @@ div.operation-control {
.icon {
font-size: 32px;
color: #ad9897;
}
}
.operation-context-name {
font-size: 15px;
color: #262626;
height: 20px;
width: 225px;
text-overflow: ellipsis;
@ -72,12 +59,10 @@ div.operation-control {
.operation-context-type {
font-size: 12px;
color: #728e9b;
}
.operation-context-id {
height: 18px;
font-size: 12px;
color: #775351;
}
}

30
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/_header.component-theme.scss Normal file
View File

@ -0,0 +1,30 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($canvas-theme) {
// Get the color config from the theme.
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
}

63
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss Normal file
View File

@ -0,0 +1,63 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$warn-palette-400: mat.get-color-from-palette($warn-palette, 400);
$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
.flow-status {
border-bottom: 1px solid $primary-palette-300;
.fa,
.icon {
color: $primary-palette-500;
}
.status-value {
color: $warn-palette-A400;
}
.controller-bulletins {
border-left: 1px solid $primary-palette-300;
background-color: $primary-palette-500;
}
.controller-bulletins.has-bulletins {
background-color: $warn-palette-400;
}
.controller-bulletins .fa {
color: $canvas-primary-palette-900;
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
View File

@ -15,7 +15,7 @@
~ limitations under the License.
-->
<div class="bg-nifi-accent h-8 flow-status">
<div class="h-8 flow-status">
<div class="flex justify-between">
<div class="flex flex-1 justify-around pr-20">
<div

13
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.scss
View File

@ -16,34 +16,21 @@
*/
.flow-status {
border-bottom: 1px solid #aabbc3;
box-sizing: content-box;
font-size: 15px;
.fa,
.icon {
font-style: normal;
color: #728e9b;
}
.status-value {
white-space: nowrap;
font-weight: 500;
color: #775351;
text-shadow: none;
}
.controller-bulletins {
border-left: 1px solid #aabbc3;
background-color: #728e9b;
cursor: default;
}
.controller-bulletins.has-bulletins {
background-color: #ba554a;
}
.controller-bulletins .fa {
color: #fff;
}
}

56
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss Normal file
View File

@ -0,0 +1,56 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
.new-canvas-item {
.icon {
color: $primary-palette-A400;
&.hovering {
background-color: $primary-palette-100;
box-shadow: 0 3px 6px $canvas-primary-palette-50;
.component-button-grip {
background: repeating-linear-gradient(
90deg,
$primary-palette-300,
$primary-palette-300 4px,
$primary-palette-300 4px,
$primary-palette-300 6px
);
}
}
}
}
}

29
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.html
View File

@ -14,17 +14,18 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<div class="h-16 w-16 pl-1.5 flex items-center justify-center relative icon" [class]="iconClass"></div>
<button
class="h-16 w-16 pl-1.5 -mt-16 flex items-center justify-center relative icon"
[class]="isHovering() ? iconHoverClass + ' hovering' : iconClass"
[class.dragging]="dragging"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
cdkDrag
cdkDragBoundary="body"
(cdkDragStarted)="onDragStarted($event)"
(cdkDragEnded)="onDragEnded($event)">
<span class="h-1 absolute left-[3px] right-[3px] bottom-0.5 component-button-grip"></span>
</button>
<div class="new-canvas-item">
<div class="h-16 w-16 pl-1.5 flex items-center justify-center relative icon" [class]="iconClass"></div>
<button
class="h-16 w-16 pl-1.5 -mt-16 flex items-center justify-center relative icon"
[class]="isHovering() ? iconHoverClass + ' hovering' : iconClass"
[class.dragging]="dragging"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
cdkDrag
cdkDragBoundary="body"
(cdkDragStarted)="onDragStarted($event)"
(cdkDragEnded)="onDragEnded($event)">
<span class="h-1 absolute left-[3px] right-[3px] bottom-0.5 component-button-grip"></span>
</button>
</div>

13
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss
View File

@ -17,25 +17,12 @@
.icon {
font-size: 32px;
color: #004849;
&.hovering {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
background-color: #e3e8eb;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
.component-button-grip {
background: repeating-linear-gradient(
90deg,
rgba(170, 187, 195, 1),
rgba(170, 187, 195, 1) 4px,
rgba(170, 187, 195, 0) 4px,
rgba(170, 187, 195, 0) 6px
);
}
}
&.dragging {

53
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss Normal file
View File

@ -0,0 +1,53 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
$canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700');
.search-container {
border-left: 1px solid $primary-palette-300;
&:hover,
&.open {
background-color: $canvas-primary-palette-900;
border-left: 1px solid $canvas-primary-palette-A700;
}
.search-input {
color: $canvas-primary-palette-A200;
}
.fa {
color: $canvas-primary-palette-A700;
}
}
}

13
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.scss
View File

@ -16,21 +16,12 @@
*/
.search-container {
border-left: 1px solid #aabbc3;
&:hover,
&.open {
background-color: #ffffff;
border-left: 1px solid #004849;
}
.search-input {
width: 0;
height: 32px;
outline: none;
font-size: 13px;
line-height: 13px;
color: #262626;
transition: width 400ms ease-in-out;
}
@ -38,8 +29,4 @@
width: 200px;
transition: width 400ms ease-in-out;
}
.fa {
color: #004849;
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.ts
View File

@ -37,8 +37,8 @@ import { RouterLink } from '@angular/router';
selector: 'search',
standalone: true,
templateUrl: './search.component.html',
imports: [ReactiveFormsModule, CdkOverlayOrigin, CdkConnectedOverlay, NgIf, NgTemplateOutlet, RouterLink, NgForOf],
styleUrls: ['./search.component.scss']
styleUrls: ['./search.component.scss'],
imports: [ReactiveFormsModule, CdkOverlayOrigin, CdkConnectedOverlay, NgIf, NgTemplateOutlet, RouterLink, NgForOf]
})
export class Search implements OnInit {
protected readonly ComponentType = ComponentType;

2
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

@ -162,7 +162,7 @@
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
<button
[disabled]="createConnectionForm.invalid || saving.value"
type="button"

2
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

@ -162,7 +162,7 @@
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="accent" mat-raised-button mat-dialog-close="CANCELLED">Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close="CANCELLED">Cancel</button>
<button
[disabled]="!editConnectionForm.dirty || editConnectionForm.invalid || saving.value"
type="button"

59
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/prioritizers/_prioritizers.component-theme.scss Normal file
View File

@ -0,0 +1,59 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
$canvas-primary-palette-100: mat.get-color-from-palette($canvas-primary-palette, 100);
$canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400);
$canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
.prioritizers {
.prioritizers-list {
background: $primary-palette-500;
border: solid 1px $canvas-primary-palette-400;
.cdk-drag-disabled {
background: $canvas-primary-palette-500;
}
}
.prioritizer-draggable-item {
border-bottom: solid 1px $canvas-primary-palette-400;
color: $canvas-primary-palette-100;
background: $canvas-primary-palette-900;
}
.cdk-drag-preview {
box-shadow: 0 3px 6px $canvas-primary-palette-50;
}
}
}

11
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/prioritizers/prioritizers.component.scss
View File

@ -17,31 +17,24 @@
.prioritizers {
.prioritizers-list {
background: #eaeef0;
border: solid 1px #ccc;
min-height: 66px;
border-radius: 4px;
overflow: hidden;
display: block;
.cdk-drag-disabled {
background: #ccc;
cursor: not-allowed;
}
}
.prioritizer-draggable-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: grab;
background: white;
font-size: 14px;
&:last-child {
@ -52,10 +45,6 @@
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow:
0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {

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/prioritizers/prioritizers.component.ts
View File

@ -56,14 +56,14 @@ import {
CdkDrag,
NgForOf
],
styleUrls: ['./prioritizers.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => Prioritizers),
multi: true
}
]
],
styleUrls: ['./prioritizers.component.scss']
})
export class Prioritizers implements ControlValueAccessor {
@Input() set allPrioritizers(allPrioritizers: DocumentedType[]) {

1
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/source/source-processor/source-processor.component.html
View File

@ -30,6 +30,7 @@
<div *ngFor="let item of relationshipItems; index as i" class="flex flex-col gap-y-1.5">
<div class="flex items-center gap-x-2">
<mat-checkbox
color="primary"
[(ngModel)]="item.selected"
name="selected-{{ i }}"
(change)="handleChanged()"

2
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

@ -44,7 +44,7 @@
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
<button
[disabled]="!createPortForm.dirty || createPortForm.invalid || saving.value"
type="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/port/edit-port/edit-port.component.html
View File

@ -33,7 +33,7 @@
</div>
<div *ngIf="portTypeLabel == 'Output Port'" class="mb-3.5">
<mat-label>Failure Port</mat-label>
<mat-checkbox formControlName="portFunction"></mat-checkbox>
<mat-checkbox color="primary" formControlName="portFunction"></mat-checkbox>
</div>
<div>
<mat-form-field>
@ -43,7 +43,7 @@
</div>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
<button
[disabled]="!editPortForm.dirty || editPortForm.invalid || saving.value"
type="button"

38
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-theme.scss Normal file
View File

@ -0,0 +1,38 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
// Get hues from palette
.create-process-group-form {
.upload-flow-definition {
color: $primary-palette-A400;
}
}
}

2
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

@ -68,7 +68,7 @@
</div>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
<button
[disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value"
type="button"

1
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.scss
View File

@ -26,6 +26,5 @@
.upload-flow-definition {
font-size: 18px;
color: #004849;
}
}

3
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

@ -52,6 +52,7 @@
</div>
<div class="-mt-6 mb-4">
<mat-checkbox
color="primary"
formControlName="applyParameterContextRecursively"
name="applyParameterContextRecursively">
Apply Recursively
@ -148,7 +149,7 @@
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
<button
[disabled]="!editProcessGroupForm.dirty || editProcessGroupForm.invalid || saving.value"
class="h-8"

2
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,7 +44,7 @@
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
<button
[disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value"
type="button"

2
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

@ -184,7 +184,7 @@
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
<button
[disabled]="!editProcessorForm.dirty || editProcessorForm.invalid || saving.value"
type="button"

1
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/relationship-settings/relationship-settings.component.html
View File

@ -31,6 +31,7 @@
<div class="value">{{ relationship.name }}</div>
<div class="flex items-center gap-x-2">
<mat-checkbox
color="primary"
[(ngModel)]="relationship.autoTerminate"
name="autoTerminate-{{ i }}"
(change)="handleChanged()"

36
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/banner/_banner.component-theme.scss Normal file
View File

@ -0,0 +1,36 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$warn-palette: map.get($color-config, 'warn');
// Get hues from palette
$warn-palette-100: mat.get-color-from-palette($warn-palette, 100);
div {
&.error {
background-color: $warn-palette-100;
}
}
}

34
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/_controller-services.component-theme.scss Normal file
View File

@ -0,0 +1,34 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
.controller-services-header {
color: $primary-palette-500;
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.scss
View File

@ -15,10 +15,6 @@
* limitations under the License.
*/
.controller-services-header {
color: #728e9b;
}
.refresh-container {
line-height: normal;
}

35
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss Normal file
View File

@ -0,0 +1,35 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
.login-background {
background: $canvas-primary-palette-900 url(../../../../assets/icons/bg-error.png) left top no-repeat;
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/login.component.scss
View File

@ -14,7 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.login-background {
background: #fff url(../../../../assets/icons/bg-error.png) left top no-repeat;
}

36
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/_login-form.component-theme.scss Normal file
View File

@ -0,0 +1,36 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
.login-form {
.login-title {
color: $primary-palette-500;
}
}
}

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.scss
View File

@ -20,7 +20,6 @@
font-size: 18px;
font-weight: 600;
font-family: Roboto Slab;
color: #728e9b;
}
.mat-mdc-form-field {

34
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/_parameter-contexts.component-theme.scss Normal file
View File

@ -0,0 +1,34 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
.parameter-context-header {
color: $primary-palette-500;
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.scss
View File

@ -14,7 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.parameter-context-header {
color: #728e9b;
}

4
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

@ -118,12 +118,12 @@
<button color="primary" mat-raised-button mat-dialog-close>Close</button>
</ng-container>
<ng-template #updateInProgressActions>
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
</ng-template>
</mat-dialog-actions>
<ng-template #editFormActions>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
<button
[disabled]="!editParameterContextForm.dirty || editParameterContextForm.invalid || saving.value"
type="button"

2
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.scss
View File

@ -18,8 +18,6 @@
@use '@angular/material' as mat;
.parameter-context-edit-form {
//@include mat.dialog-density(-2);
//@include mat.tabs-density(-2);
@include mat.button-density(-1);
.mdc-dialog__content {

58
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/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss Normal file
View File

@ -0,0 +1,58 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
$canvas-primary-palette-100: mat.get-color-from-palette($canvas-primary-palette, 100);
$canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400);
$canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
.parameter-context-inheritance {
.parameter-context-inheritance-list {
background: $primary-palette-500;
border: solid 1px $canvas-primary-palette-400;
.cdk-drag-disabled {
background: $canvas-primary-palette-500;
}
}
.parameter-context-draggable-item {
border-bottom: solid 1px $canvas-primary-palette-400;
color: $canvas-primary-palette-100;
background: white;
}
.cdk-drag-preview {
box-shadow: 0 3px 6px $canvas-primary-palette-50;
}
}
}

11
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/parameter-context-inheritance/parameter-context-inheritance.component.scss
View File

@ -17,31 +17,24 @@
.parameter-context-inheritance {
.parameter-context-inheritance-list {
background: #eaeef0;
border: solid 1px #ccc;
min-height: 66px;
border-radius: 4px;
overflow: hidden;
display: block;
.cdk-drag-disabled {
background: #ccc;
cursor: not-allowed;
}
}
.parameter-context-draggable-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: grab;
background: white;
font-size: 14px;
&:last-child {
@ -52,10 +45,6 @@
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow:
0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {

4
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/parameter-context-inheritance/parameter-context-inheritance.component.ts
View File

@ -59,14 +59,14 @@ import {
CdkDrag,
NgForOf
],
styleUrls: ['./parameter-context-inheritance.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ParameterContextInheritance),
multi: true
}
]
],
styleUrls: ['./parameter-context-inheritance.component.scss']
})
export class ParameterContextInheritance implements ControlValueAccessor {
@Input() set allParameterContexts(allParameterContexts: ParameterContextEntity[]) {

2
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/parameter-context-table/parameter-context-table.component.ts
View File

@ -26,7 +26,7 @@ import { CurrentUser } from '../../../../../state/current-user';
@Component({
selector: 'parameter-context-table',
templateUrl: './parameter-context-table.component.html',
styleUrls: ['./parameter-context-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
styleUrls: ['./parameter-context-table.component.scss']
})
export class ParameterContextTable {
@Input() initialSortColumn: 'name' | 'provider' | 'description' = 'name';

2
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/parameter-table/parameter-table.component.ts
View File

@ -57,7 +57,7 @@ export interface ParameterItem {
NifiTooltipDirective,
ParameterReferences
],
styleUrls: ['./parameter-table.component.scss', '../../../../../../assets/styles/listing-table.scss'],
styleUrls: ['./parameter-table.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,

64
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss Normal file
View File

@ -0,0 +1,64 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200);
$canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
.provenance-header {
color: $primary-palette-500;
};
rect.lineage {
fill: $canvas-primary-palette-600;
}
g.flowfile-icon text {
fill: $warn-palette-A200;
}
circle.event-circle {
fill: $primary-palette-300;
stroke: $canvas-primary-palette-200;
}
path.link {
stroke: $canvas-primary-palette-200;
}
circle.flowfile-link {
fill: $canvas-primary-palette-900;
stroke: $canvas-primary-palette-200;
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.scss
View File

@ -14,7 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.provenance-header {
color: #728e9b;
}

48
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-event-table/_provenance-event-table.component-theme.scss Normal file
View File

@ -0,0 +1,48 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
$canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600);
$canvas-primary-palette-700: mat.get-color-from-palette($canvas-primary-palette, 700);
.provenance-event-table {
.lineage {
border: 1px solid $canvas-primary-palette-700;
background-color: $canvas-primary-palette-600;
.lineage-controls {
.fa,
.icon {
color: $primary-palette-A400;
}
}
}
}
}

63
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-event-table/lineage/_lineage.component-theme.scss Normal file
View File

@ -0,0 +1,63 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn');
$canvas-accent-palette: map.get($canvas-color-config, 'accent');
// Get hues from palette
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
$warn-palette-400: mat.get-color-from-palette($warn-palette, 400);
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
$canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200');
#lineage {
canvas,
svg {
path.link.selected {
stroke: $warn-palette-400;
}
g.event circle.selected {
fill: $warn-palette-400;
}
g.event circle.context {
fill: $canvas-accent-palette-A200;
}
g.flowfile circle.context,
g.event circle.context {
stroke: $primary-palette-A400;
}
.flowfile-icon {
color: $warn-palette-A200;
}
}
}
}

14
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-event-table/lineage/lineage.component.scss
View File

@ -24,23 +24,11 @@
position: absolute;
overflow: hidden;
path.link.selected {
stroke: #ba554a;
}
g.event {
cursor: pointer;
user-select: none;
}
g.event circle.selected {
fill: #ba554a;
}
g.event circle.context {
fill: #cf9f5d;
}
text.event-type {
font-family: Roboto;
font-size: 11px;
@ -63,7 +51,6 @@
g.flowfile circle.context,
g.event circle.context {
stroke: #004849;
stroke-width: 1.5px;
}
@ -71,7 +58,6 @@
font-family: flowfont;
content: '\e808';
font-size: 16px;
color: #ad9897;
}
}
}

16
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-event-table/lineage/lineage.component.ts
View File

@ -280,9 +280,9 @@ export class LineageComponent implements OnInit {
.on('dblclick.zoom', null);
svg.append('rect')
.attr('class', 'lineage')
.attr('width', '100%')
.attr('height', '100%')
.attr('fill', '#f9fafb')
.on('mousedown', function (event, d) {
// hide the context menu if necessary
self.clearSelectionContext();
@ -311,11 +311,11 @@ export class LineageComponent implements OnInit {
.attr('markerWidth', 6)
.attr('markerHeight', 6)
.attr('orient', 'auto')
.attr('fill', function (d) {
.attr('class', function (d) {
if (d.indexOf('SELECTED') >= 0) {
return '#ba554a';
return 'warn-400';
} else {
return '#000000';
return 'primary-contrast-200';
}
})
.append('path')
@ -723,9 +723,8 @@ export class LineageComponent implements OnInit {
// node
flowfiles
.append('circle')
.attr('class', 'flowfile-link')
.attr('r', 16)
.attr('fill', '#fff')
.attr('stroke', '#000')
.attr('stroke-width', 1.0)
.on('mouseover', function (event: MouseEvent, d: any) {
self.lineageContainerElement
@ -759,7 +758,6 @@ export class LineageComponent implements OnInit {
.append('text')
.attr('font-family', 'flowfont')
.attr('font-size', '18px')
.attr('fill', '#ad9897')
.attr('transform', function () {
return 'translate(0,15)';
})
@ -822,12 +820,11 @@ export class LineageComponent implements OnInit {
events
.append('circle')
.attr('class', 'event-circle')
.classed('selected', function (d: any) {
return d.id === self.eventId;
})
.attr('r', 8)
.attr('fill', '#aabbc3')
.attr('stroke', '#000')
.attr('stroke-width', 1.0)
.attr('id', function (d: any) {
return `event-node-${d.id}`;
@ -956,7 +953,6 @@ export class LineageComponent implements OnInit {
.insert('path', '.node')
.attr('class', 'link')
.attr('stroke-width', 1.5)
.attr('stroke', '#000')
.attr('fill', 'none')
.attr('d', function (d: any) {
return `M${d.source.x},${d.source.y}L${d.source.x},${d.source.y}`;

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-event-table/provenance-event-table.component.scss
View File

@ -26,9 +26,6 @@
}
.lineage {
border: 1px solid #e5ebed;
background-color: #f9fafb;
.lineage-controls {
position: absolute;
top: 5px;
@ -37,7 +34,6 @@
.fa,
.icon {
color: #004849;
width: 14px;
height: 14px;
text-align: center;

2
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-event-table/provenance-event-table.component.ts
View File

@ -59,7 +59,7 @@ import { MatSliderModule } from '@angular/material/slider';
LineageComponent,
MatSliderModule
],
styleUrls: ['./provenance-event-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
styleUrls: ['./provenance-event-table.component.scss']
})
export class ProvenanceEventTable implements AfterViewInit {
@Input() set events(events: ProvenanceEventSummary[]) {

7
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

@ -25,7 +25,10 @@
<input matInput formControlName="value" type="text" />
</mat-form-field>
<div class="-mt-6 mb-4">
<mat-checkbox formControlName="inverse" name="inverse"> Exclude </mat-checkbox>
<mat-checkbox
color="primary"
formControlName="inverse"
name="inverse"> Exclude </mat-checkbox>
</div>
</div>
</ng-container>
@ -62,7 +65,7 @@
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
<button
[disabled]="provenanceOptionsForm.invalid"
type="button"

40
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-theme.scss Normal file
View File

@ -0,0 +1,40 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
.flowfile {
.mdc-dialog__content {
.tab-content {
.flowfile-header {
color: $primary-palette-500;
}
}
}
}
}

6
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

@ -151,15 +151,15 @@
"></ng-container>
</div>
<div class="flex">
<button color="accent" mat-raised-button (click)="downloadContentClicked()">
<button color="primary" mat-stroked-button (click)="downloadContentClicked()">
<i class="fa fa-download"></i>
Download
</button>
<button
*ngIf="contentViewerAvailable"
class="ml-3"
color="accent"
mat-raised-button
color="primary"
mat-stroked-button
(click)="viewContentClicked()">
<i class="fa fa-eye"></i>
View

1
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.scss
View File

@ -30,7 +30,6 @@
overflow-y: auto;
.flowfile-header {
color: #728e9b;
font-size: 15px;
font-family: 'Roboto Slab';
font-style: normal;

4
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.ts
View File

@ -31,6 +31,7 @@ import { NiFiCommon } from '../../../../../service/nifi-common.service';
selector: 'flowfile-dialog',
standalone: true,
templateUrl: './flowfile-dialog.component.html',
styleUrls: ['./flowfile-dialog.component.scss'],
imports: [
ReactiveFormsModule,
MatDialogModule,
@ -45,8 +46,7 @@ import { NiFiCommon } from '../../../../../service/nifi-common.service';
NgTemplateOutlet,
FormsModule,
KeyValuePipe
],
styleUrls: ['./flowfile-dialog.component.scss']
]
})
export class FlowFileDialog {
@Input() contentViewerAvailable!: boolean;

42
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/_flowfile-table.component-theme.scss Normal file
View File

@ -0,0 +1,42 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$warn-palette-400: mat.get-color-from-palette($warn-palette, 400);
.flowfile-table {
.queue-listing-header {
color: $primary-palette-500;
}
.listing-message {
color: $warn-palette-400;
}
}
}

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.scss
View File

@ -16,14 +16,6 @@
*/
.flowfile-table {
.queue-listing-header {
color: #728e9b;
}
.listing-message {
color: #ba554a;
}
.listing-table {
table {
.mat-column-moreDetails {

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-table/flowfile-table.component.ts
View File

@ -31,7 +31,7 @@ import { CurrentUser } from '../../../../../state/current-user';
standalone: true,
templateUrl: './flowfile-table.component.html',
imports: [MatTableModule, NgForOf, NgIf, RouterLink],
styleUrls: ['./flowfile-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
styleUrls: ['./flowfile-table.component.scss']
})
export class FlowFileTable implements AfterViewInit {
@Input() connectionLabel!: string;

34
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/_settings.component-theme.scss Normal file
View File

@ -0,0 +1,34 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
.settings-header {
color: $primary-palette-500;
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.scss
View File

@ -15,10 +15,6 @@
* limitations under the License.
*/
.settings-header {
color: #728e9b;
}
.settings-tabs {
border-bottom-width: 1px;
}

2
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

@ -80,7 +80,7 @@
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
<button
[disabled]="!editFlowAnalysisRuleForm.dirty || editFlowAnalysisRuleForm.invalid || saving.value"
type="button"

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.ts
View File

@ -46,7 +46,7 @@ import { CurrentUser } from '../../../../../state/current-user';
NifiTooltipDirective,
RouterLink
],
styleUrls: ['./flow-analysis-rule-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
styleUrls: ['./flow-analysis-rule-table.component.scss']
})
export class FlowAnalysisRuleTable {
@Input() set flowAnalysisRules(flowAnalysisRuleEntities: FlowAnalysisRuleEntity[]) {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.ts
View File

@ -46,7 +46,7 @@ export type SupportedColumns = 'name' | 'type' | 'bundle';
RouterLink
],
templateUrl: './parameter-providers-table.component.html',
styleUrls: ['./parameter-providers-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
styleUrls: ['./parameter-providers-table.component.scss']
})
export class ParameterProvidersTable {
@Input() initialSortColumn: SupportedColumns = 'name';

2
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,7 +56,7 @@
</div>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
<button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
<button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
<button
[disabled]="!createRegistryClientForm.dirty || createRegistryClientForm.invalid || saving.value"
type="button"

Some files were not shown because too many files have changed in this diff Show More