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

[NIFI-13142] configure typography (#8745) 

* [NIFI-13142] configure typography

* remove Roboto Slab

* adjust letter spacing

* one font

* material theme

* update purple theme font to Comic Sans

* material theme

* align primary node indicator

This closes #8745
This commit is contained in:
Scott Aslan 2024-05-06 16:47:32 -04:00 committed by GitHub
parent 2711f9d8cf
commit b87e9c8d9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
59 changed files with 760 additions and 686 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1036
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
View File

@ -28,7 +28,6 @@
"@angular/router": "^17.1.3", "@angular/router": "^17.1.3",
"@ctrl/ngx-codemirror": "^7.0.0", "@ctrl/ngx-codemirror": "^7.0.0",
"@fontsource/roboto": "^5.0.12", "@fontsource/roboto": "^5.0.12",
"@fontsource/roboto-slab": "^5.0.19",
"@ngrx/effects": "^17.1.0", "@ngrx/effects": "^17.1.0",
"@ngrx/router-store": "^17.1.0", "@ngrx/router-store": "^17.1.0",
"@ngrx/store": "^17.1.0", "@ngrx/store": "^17.1.0",
@ -41,7 +40,6 @@
"ngx-skeleton-loader": "^8.1.0", "ngx-skeleton-loader": "^8.1.0",
"rxjs": "~7.8.1", "rxjs": "~7.8.1",
"tslib": "^2.6.2", "tslib": "^2.6.2",
"webfontloader": "^1.6.28",
"zone.js": "0.14.4" "zone.js": "0.14.4"
}, },
"devDependencies": { "devDependencies": {
@ -64,7 +62,6 @@
"@types/d3": "^7.4.3", "@types/d3": "^7.4.3",
"@types/humanize-duration": "^3.27.3", "@types/humanize-duration": "^3.27.3",
"@types/jest": "^29.5.12", "@types/jest": "^29.5.12",
"@types/webfontloader": "^1.6.38",
"@typescript-eslint/eslint-plugin": "6.21.0", "@typescript-eslint/eslint-plugin": "6.21.0",
"@typescript-eslint/parser": "6.21.0", "@typescript-eslint/parser": "6.21.0",
"autoprefixer": "^10.4.16", "autoprefixer": "^10.4.16",

4
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.html
View File

@ -23,6 +23,4 @@
</div> </div>
} }
<div class="mat-app-background"> <router-outlet></router-outlet>
<router-outlet></router-outlet>
</div>

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation> <navigation></navigation>
</header> </header>
<div class="px-5"> <div class="px-5">
<h3 class="text-xl bold primary-color">Access Policies</h3> <h3 class="primary-color">Access Policies</h3>
</div> </div>
<div class="px-5 flex-1"> <div class="px-5 flex-1">
<router-outlet></router-outlet> <router-outlet></router-outlet>

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation> <navigation></navigation>
</header> </header>
<div class="px-5 flex-1 flex flex-col"> <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold primary-color">NiFi Bulletin Board</h3> <h3 class="primary-color">NiFi Bulletin Board</h3>
<bulletin-board class="flex-1"></bulletin-board> <bulletin-board class="flex-1"></bulletin-board>
</div> </div>
</div> </div>

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/feature/cluster.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation> <navigation></navigation>
</header> </header>
<div class="px-5 flex-1 flex flex-col gap-y-2"> <div class="px-5 flex-1 flex flex-col gap-y-2">
<h3 class="text-xl bold primary-color">NiFi Cluster</h3> <h3 class="primary-color">NiFi Cluster</h3>
<error-banner></error-banner> <error-banner></error-banner>
@if (getTabLinks(); as tabs) { @if (getTabLinks(); as tabs) {
<!-- Don't show the tab bar if there is only 1 tab to show --> <!-- Don't show the tab bar if there is only 1 tab to show -->

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation> <navigation></navigation>
</header> </header>
<div class="px-5 flex-1 flex flex-col"> <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold primary-color">NiFi Counters</h3> <h3 class="primary-color">NiFi Counters</h3>
<counter-listing class="flex-1"></counter-listing> <counter-listing class="flex-1"></counter-listing>
</div> </div>
</div> </div>

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/feature/flow-configuration-history.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation> <navigation></navigation>
</header> </header>
<div class="px-5 flex-1 flex flex-col"> <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold primary-color">Flow Configuration History</h3> <h3 class="primary-color">Flow Configuration History</h3>
<flow-configuration-history-listing class="flex-1"></flow-configuration-history-listing> <flow-configuration-history-listing class="flex-1"></flow-configuration-history-listing>
</div> </div>
</div> </div>

18
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
View File

@ -17,7 +17,6 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import * as d3 from 'd3'; import * as d3 from 'd3';
import * as WebFont from 'webfontloader';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { CanvasState } from '../state'; import { CanvasState } from '../state';
import { refreshBirdseyeView, transformComplete } from '../state/transform/transform.actions'; import { refreshBirdseyeView, transformComplete } from '../state/transform/transform.actions';
@ -67,23 +66,6 @@ export class CanvasView {
) {} ) {}
public init(svg: any, canvas: any): void { public init(svg: any, canvas: any): void {
WebFont.load({
custom: {
families: ['Roboto', 'Roboto Slab', 'flowfont', 'FontAwesome']
},
active: function () {
// re-render once the fonts have loaded, without the fonts
// positions of elements on the canvas may be incorrect
self.processorManager.render();
self.processGroupManager.render();
self.remoteProcessGroupManager.render();
self.portManager.render();
self.labelManager.render();
self.funnelManager.render();
self.connectionManager.render();
}
});
this.svg = svg; this.svg = svg;
this.canvas = canvas; this.canvas = canvas;

11
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
View File

@ -90,6 +90,11 @@
/* /*
All components All components
*/ */
g.component {
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
}
.transparent { .transparent {
fill: transparent; fill: transparent;
} }
@ -146,6 +151,7 @@
text.stats-label { text.stats-label {
@extend .surface-contrast; @extend .surface-contrast;
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
} }
text.stats-value { text.stats-value {
@ -256,6 +262,10 @@
Connection Connection
*/ */
g.connection {
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
}
g.connection rect.body { g.connection rect.body {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter); fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
} }
@ -427,6 +437,7 @@
text.process-group-contents-count { text.process-group-contents-count {
fill: $material-theme-accent-palette-default; fill: $material-theme-accent-palette-default;
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
} }
g.process-group.drop rect.border { g.process-group.drop rect.border {

10
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

@ -43,10 +43,6 @@
All components All components
*/ */
g.component {
font-family: Roboto;
}
g.component rect.border.unauthorized { g.component rect.border.unauthorized {
stroke-width: 3; stroke-width: 3;
stroke-dasharray: 4; stroke-dasharray: 4;
@ -63,7 +59,6 @@
text.stats-label { text.stats-label {
font-size: 12px; font-size: 12px;
font-family: Roboto Slab;
} }
text.stats-value { text.stats-value {
@ -206,10 +201,6 @@
Connection Connection
*/ */
g.connection {
font-family: Roboto;
}
g.connection rect.border.unauthorized { g.connection rect.border.unauthorized {
stroke-width: 1.5; stroke-width: 1.5;
stroke-dasharray: 3, 3; stroke-dasharray: 3, 3;
@ -372,7 +363,6 @@
text.process-group-contents-count { text.process-group-contents-count {
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
font-family: Roboto, sans-serif;
} }
g.process-group.drop rect.border { g.process-group.drop rect.border {

1
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

@ -34,7 +34,6 @@ div.navigation-control {
.navigation-control-title { .navigation-control-title {
font-size: 12px; font-size: 12px;
font-family: 'Roboto Slab';
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
} }
} }

1
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

@ -34,7 +34,6 @@ div.operation-control {
.operation-control-title { .operation-control-title {
font-size: 12px; font-size: 12px;
font-family: 'Roboto Slab';
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
} }

6
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

@ -24,12 +24,6 @@
font-style: normal; font-style: normal;
} }
.status-value {
white-space: nowrap;
font-weight: 500;
text-shadow: none;
}
.controller-bulletins { .controller-bulletins {
cursor: default; cursor: default;
} }

5
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/breadcrumbs/breadcrumbs.component.html
View File

@ -28,7 +28,10 @@
[title]="getVersionControlTooltip(breadcrumb)"></div> [title]="getVersionControlTooltip(breadcrumb)"></div>
} }
@if (isCurrentProcessGroupBreadcrumb(breadcrumb)) { @if (isCurrentProcessGroupBreadcrumb(breadcrumb)) {
<a #currentProcessGroup class="current-process-group" [routerLink]="['/process-groups', breadcrumb.id]"> <a
#currentProcessGroup
class="current-process-group font-bold"
[routerLink]="['/process-groups', breadcrumb.id]">
{{ getBreadcrumbLabel(breadcrumb) }} {{ getBreadcrumbLabel(breadcrumb) }}
</a> </a>
} @else { } @else {

1
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/breadcrumbs/breadcrumbs.component.scss
View File

@ -21,7 +21,6 @@
} }
a.current-process-group { a.current-process-group {
font-weight: bold;
text-decoration: none; text-decoration: none;
} }
} }

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation> <navigation></navigation>
</header> </header>
<div class="px-5 flex-1 flex flex-col"> <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold primary-color">Controller Services</h3> <h3 class="primary-color">Controller Services</h3>
@if (serviceState$ | async; as serviceState) { @if (serviceState$ | async; as serviceState) {
@if (isInitialLoading(serviceState)) { @if (isInitialLoading(serviceState)) {
<div> <div>

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation> <navigation></navigation>
</header> </header>
<div class="px-5 flex-1 flex flex-col"> <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold primary-color pb-5">Manage Remote Ports</h3> <h3 class="primary-color pb-5">Manage Remote Ports</h3>
@if (portsState$ | async; as portsState) { @if (portsState$ | async; as portsState) {
<div class="grid-container grid grid-cols-2"> <div class="grid-container grid grid-cols-2">
<div class="col-span-1 pr-5"> <div class="col-span-1 pr-5">

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.html
View File

@ -17,7 +17,7 @@
<div class="login-form w-96 flex flex-col gap-y-5"> <div class="login-form w-96 flex flex-col gap-y-5">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="login-title primary-color">Log In</div> <h3 class="primary-color">Log In</h3>
<div class="flex gap-x-2"> <div class="flex gap-x-2">
@if (hasToken()) { @if (hasToken()) {
<a (click)="logout()">log out</a> <a (click)="logout()">log out</a>

6
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

@ -16,12 +16,6 @@
*/ */
.login-form { .login-form {
.login-title {
font-size: 18px;
font-weight: 600;
font-family: Roboto Slab;
}
.mat-mdc-form-field { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation> <navigation></navigation>
</header> </header>
<div class="px-5 flex-1 flex flex-col"> <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold primary-color">Parameter Contexts</h3> <h3 class="primary-color">Parameter Contexts</h3>
<parameter-context-listing class="flex-1"></parameter-context-listing> <parameter-context-listing class="flex-1"></parameter-context-listing>
</div> </div>
</div> </div>

4
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/process-group-references/process-group-references.component.html
View File

@ -22,7 +22,7 @@
<ul> <ul>
@if (authorizedProcessGroupReferences.length > 0) { @if (authorizedProcessGroupReferences.length > 0) {
<li> <li>
<h4> <h4 class="primary-color">
<b>Process Groups ({{ authorizedProcessGroupReferences.length }})</b> <b>Process Groups ({{ authorizedProcessGroupReferences.length }})</b>
</h4> </h4>
<ul class="nested"> <ul class="nested">
@ -36,7 +36,7 @@
} }
@if (unauthorizedProcessGroupReferences.length > 0) { @if (unauthorizedProcessGroupReferences.length > 0) {
<li> <li>
<h4> <h4 class="primary-color">
<b>Unauthorized ({{ unauthorizedProcessGroupReferences.length }})</b> <b>Unauthorized ({{ unauthorizedProcessGroupReferences.length }})</b>
</h4> </h4>
<ul class="nested"> <ul class="nested">

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html
View File

@ -19,7 +19,7 @@
<header class="nifi-header"> <header class="nifi-header">
<navigation></navigation> <navigation></navigation>
</header> </header>
<h3 class="px-5 text-xl bold primary-color">Provenance</h3> <h3 class="px-5 primary-color">Provenance</h3>
<div class="px-5 flex-1"> <div class="px-5 flex-1">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

6
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
View File

@ -41,6 +41,12 @@
svg { svg {
text.event-type { text.event-type {
@extend .surface-contrast; @extend .surface-contrast;
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
}
text.event-type.expand-parents,
text.event-type.expand-children {
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
} }
path.link.selected { path.link.selected {

2
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

@ -30,7 +30,6 @@
} }
text.event-type { text.event-type {
font-family: Roboto;
font-size: 11px; font-size: 11px;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -39,7 +38,6 @@
text.event-type.expand-parents, text.event-type.expand-parents,
text.event-type.expand-children { text.event-type.expand-children {
font-weight: 500; font-weight: 500;
font-family: 'Roboto';
font-style: normal; font-style: normal;
font-size: 13px; font-size: 13px;
} }

6
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

@ -24,7 +24,7 @@
<div class="absolute inset-0 flex gap-x-4"> <div class="absolute inset-0 flex gap-x-4">
<div class="w-full flex flex-col gap-y-3"> <div class="w-full flex flex-col gap-y-3">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flowfile-header primary-color">FlowFile Details</div> <div class="flowfile-header font-bold primary-color">FlowFile Details</div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div>UUID</div> <div>UUID</div>
@ -106,7 +106,7 @@
</div> </div>
<div class="w-full flex flex-col gap-y-3"> <div class="w-full flex flex-col gap-y-3">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flowfile-header primary-color">Content Claim</div> <div class="flowfile-header font-bold primary-color">Content Claim</div>
</div> </div>
<div <div
class="flex flex-col gap-y-3" class="flex flex-col gap-y-3"
@ -181,7 +181,7 @@
<div class="tab-content py-4"> <div class="tab-content py-4">
<div class="absolute inset-0 flex flex-col gap-y-4"> <div class="absolute inset-0 flex flex-col gap-y-4">
<div class="flex"> <div class="flex">
<div class="flowfile-header primary-color">Attribute Values</div> <div class="flowfile-header font-bold primary-color">Attribute Values</div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div *ngFor="let attribute of request.flowfile.attributes | keyvalue"> <div *ngFor="let attribute of request.flowfile.attributes | keyvalue">

2
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

@ -31,9 +31,7 @@
.flowfile-header { .flowfile-header {
font-size: 15px; font-size: 15px;
font-family: 'Roboto Slab';
font-style: normal; font-style: normal;
font-weight: bold;
} }
} }
} }

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

@ -16,7 +16,7 @@
--> -->
<div class="flowfile-table h-full flex flex-col gap-y-2"> <div class="flowfile-table h-full flex flex-col gap-y-2">
<h3 class="text-xl bold queue-listing-header primary-color">{{ connectionLabel }}</h3> <h3 class="queue-listing-header primary-color">{{ connectionLabel }}</h3>
<error-banner></error-banner> <error-banner></error-banner>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="accent-color font-medium"> <div class="accent-color font-medium">

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation> <navigation></navigation>
</header> </header>
<div class="px-5 flex-1 flex flex-col"> <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold primary-color">NiFi Settings</h3> <h3 class="primary-color">NiFi Settings</h3>
<div class="settings-tabs"> <div class="settings-tabs">
<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel"> <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
@for (tab of tabLinks; track tab) { @for (tab of tabLinks; track tab) {

8
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-context-references/parameter-providers-references.component.html
View File

@ -42,9 +42,7 @@
<ng-template #parameterContexts let-references let-label="label"> <ng-template #parameterContexts let-references let-label="label">
@if (references.length > 0) { @if (references.length > 0) {
<li> <li>
<h4> <h4 class="accent-color">{{ label }} ({{ references.length }})</h4>
<span class="accent-color font-medium">{{ label }}</span> ({{ references.length }})
</h4>
<div class="references"> <div class="references">
@for (reference of references; track reference) { @for (reference of references; track reference) {
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2">
@ -61,9 +59,7 @@
<ng-template #unauthorized let-references let-label="label"> <ng-template #unauthorized let-references let-label="label">
@if (references.length > 0) { @if (references.length > 0) {
<li> <li>
<h4> <h4 class="accent-color">{{ label }} ({{ references.length }})</h4>
<span class="accent-color font-medium">{{ label }}</span> ({{ references.length }})
</h4>
<div class="references"> <div class="references">
@for (reference of references; track reference) { @for (reference of references; track reference) {
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2">

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation> <navigation></navigation>
</header> </header>
<div class="px-5 flex-1 flex flex-col gap-y-2"> <div class="px-5 flex-1 flex flex-col gap-y-2">
<h3 class="text-xl bold primary-color"> <h3 class="primary-color">
@if (selectedClusterNode$ | async; as selectedNode) { @if (selectedClusterNode$ | async; as selectedNode) {
@if (selectedNode.id !== 'All') { @if (selectedNode.id !== 'All') {
{{ selectedNode.address }} Summary {{ selectedNode.address }} Summary

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.html
View File

@ -65,7 +65,7 @@
<div class="flex align-middle"> <div class="flex align-middle">
@if (item.processorStatusSnapshot.executionNode === 'PRIMARY') { @if (item.processorStatusSnapshot.executionNode === 'PRIMARY') {
<div <div
class="primary-node-only border surface-contrast mt-0.5 mr-1" class="primary-node-only border surface-contrast mr-1 font-bold"
title="This component is only scheduled to execute on the Primary Node"> title="This component is only scheduled to execute on the Primary Node">
P P
</div> </div>

10
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.scss
View File

@ -14,6 +14,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
.processor-status-table { .processor-status-table {
.listing-table { .listing-table {
.mat-column-moreDetails { .mat-column-moreDetails {
@ -28,13 +29,12 @@
width: 74px; width: 74px;
} }
} }
.primary-node-only { .primary-node-only {
font-family: Roboto;
font-size: 10px; font-size: 10px;
font-weight: bold; line-height: 13px;
line-height: 14px; width: 14px;
width: 16px; height: 15px;
height: 16px;
border-radius: 8px; border-radius: 8px;
float: left; float: left;
text-align: center; text-align: center;

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation> <navigation></navigation>
</header> </header>
<div class="px-5 flex-1 flex flex-col"> <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold user-header primary-color">NiFi Users</h3> <h3 class="user-header primary-color">NiFi Users</h3>
<user-listing class="flex-1"></user-listing> <user-listing class="flex-1"></user-listing>
</div> </div>
</div> </div>

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

@ -16,7 +16,7 @@
--> -->
<div class="user-access-policies"> <div class="user-access-policies">
<h3 mat-dialog-title>User Policies</h3> <h2 mat-dialog-title>User Policies</h2>
<mat-dialog-content> <mat-dialog-content>
<div class="flex flex-col justify-between gap-y-3"> <div class="flex flex-col justify-between gap-y-3">
<div class="flex flex-col"> <div class="flex flex-col">

6
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.html
View File

@ -81,7 +81,7 @@
<ng-template #nonService let-references let-referenceTypeLabel="referenceTypeLabel"> <ng-template #nonService let-references let-referenceTypeLabel="referenceTypeLabel">
@if (references.length > 0) { @if (references.length > 0) {
<li> <li>
<h4> <h4 class="primary-color">
<span class="accent-color font-medium">{{ referenceTypeLabel }}</span> <span class="accent-color font-medium">{{ referenceTypeLabel }}</span>
({{ references.length }}) ({{ references.length }})
</h4> </h4>
@ -121,7 +121,7 @@
<ng-template #service let-references> <ng-template #service let-references>
@if (references.length > 0) { @if (references.length > 0) {
<li> <li>
<h4><span class="accent-color font-medium">Controller Services</span> ({{ references.length }})</h4> <h4 class="accent-color">Controller Services ({{ references.length }})</h4>
<div class="references"> <div class="references">
@for (service of references; track service) { @for (service of references; track service) {
<div class="flex flex-col"> <div class="flex flex-col">
@ -171,7 +171,7 @@
<ng-template #unauthorized let-references> <ng-template #unauthorized let-references>
@if (references.length > 0) { @if (references.length > 0) {
<li> <li>
<h4><span class="accent-color font-medium">Unauthorized</span> ({{ references.length }})</h4> <h4 class="accent-color">Unauthorized ({{ references.length }})</h4>
<div class="references"> <div class="references">
@for (reference of references; track reference) { @for (reference of references; track reference) {
<div class="flex"> <div class="flex">

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

@ -14,24 +14,23 @@
~ See the License for the specific language governing permissions and ~ See the License for the specific language governing permissions and
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="extension-creation-dialog" (keyup)="navigateSelectionList($event)">
<section tabindex="0" (keyup)="navigateSelectionList($event)"> <div class="flex justify-between items-center">
<div class="extension-creation-dialog p-4 flex flex-col justify-between gap-y-3"> <h2 mat-dialog-title>Add {{ componentType }}</h2>
<div class="flex justify-between items-center"> <div class="pt-5 pr-5">
<h3 class="text-lg">Add {{ componentType }}</h3> <mat-form-field>
<div> <mat-label>Filter types</mat-label>
<mat-form-field> <input
<mat-label>Filter types</mat-label> matInput
<input class="px-1.5 py-1 w-64"
matInput type="text"
class="px-1.5 py-1 w-64" (keyup)="filterTypes($event)"
type="text" tabindex="0"
(keyup)="filterTypes($event)" placeholder="Filter types..." />
cdkFocusInitial </mat-form-field>
placeholder="Filter types..." />
</mat-form-field>
</div>
</div> </div>
</div>
<mat-dialog-content>
<div class="listing-table select-none"> <div class="listing-table select-none">
<div class="h-96 overflow-y-auto overflow-x-hidden"> <div class="h-96 overflow-y-auto overflow-x-hidden">
<table <table
@ -102,10 +101,10 @@
</table> </table>
</div> </div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col pt-3">
@if (selectedType) { @if (selectedType) {
<div class="flex items-center"> <div class="flex items-center">
<div class="selected-type-name accent-color"> <div class="selected-type-name font-medium accent-color">
{{ formatType(selectedType) }} {{ formatType(selectedType) }}
</div> </div>
<div class="selected-type-bundle surface-color">{{ formatBundle(selectedType) }}</div> <div class="selected-type-bundle surface-color">{{ formatBundle(selectedType) }}</div>
@ -117,15 +116,15 @@
<div class="no-selected-type unset surface-color">No type selected</div> <div class="no-selected-type unset surface-color">No type selected</div>
} }
</div> </div>
<div class="flex justify-end gap-x-2"> </mat-dialog-content>
<button mat-button mat-dialog-close>Cancel</button> <mat-dialog-actions align="end">
<button <button mat-button mat-dialog-close>Cancel</button>
[disabled]="selectedType == null || saving" <button
color="primary" [disabled]="selectedType == null || saving"
(click)="createExtension(selectedType)" color="primary"
mat-button> (click)="createExtension(selectedType)"
<span *nifiSpinner="saving">Add</span> mat-button>
</button> <span *nifiSpinner="saving">Add</span>
</div> </button>
</div> </mat-dialog-actions>
</section> </div>

1
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.scss
View File

@ -34,7 +34,6 @@
.selected-type-name { .selected-type-name {
font-size: 16px; font-size: 16px;
font-weight: 500;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;

3
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
View File

@ -19,7 +19,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../node_modules/@angular/material/core/theming/inspection' as inspection; @use '../../../../../node_modules/@angular/material/core/theming/inspection' as inspection;
@mixin generate-theme($material-theme) { @mixin generate-theme($material-theme, $nifi-theme) {
// Get the color config from the theme. // Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme); $material-theme-color-config: mat.get-color-config($material-theme);
@ -55,6 +55,7 @@
.current-user { .current-user {
@extend .primary-contrast; @extend .primary-contrast;
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
} }
a { a {

3
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.scss
View File

@ -21,9 +21,6 @@
} }
.current-user { .current-user {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: normal;
font-size: 12px; font-size: 12px;
max-width: 250px; max-width: 250px;
text-overflow: ellipsis; text-overflow: ellipsis;

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/page-content/page-content.component.html
View File

@ -17,7 +17,7 @@
<div class="page-content w-1/2 flex flex-col gap-y-5"> <div class="page-content w-1/2 flex flex-col gap-y-5">
<div class="flex justify-between items-center gap-x-3"> <div class="flex justify-between items-center gap-x-3">
<div class="title whitespace-nowrap overflow-hidden text-ellipsis" [title]="title">{{ title }}</div> <h3 class="primary-color whitespace-nowrap overflow-hidden text-ellipsis" [title]="title">{{ title }}</h3>
<div class="flex gap-x-3"> <div class="flex gap-x-3">
@if (hasToken()) { @if (hasToken()) {
<a (click)="logout()" class="whitespace-nowrap">log out</a> <a (click)="logout()" class="whitespace-nowrap">log out</a>

8
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/page-content/page-content.component.scss
View File

@ -14,11 +14,3 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
.page-content {
.title {
font-size: 18px;
font-weight: 600;
font-family: Roboto Slab;
}
}

8
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html
View File

@ -25,7 +25,7 @@
<ng-template #pgListing let-pg> <ng-template #pgListing let-pg>
<ul> <ul>
<li> <li>
<h4> <h4 class="primary-color">
<b>{{ pg.name }}</b> <b>{{ pg.name }}</b>
</h4> </h4>
@if (parameterReferenceMap.get(pg.id); as references) { @if (parameterReferenceMap.get(pg.id); as references) {
@ -53,7 +53,7 @@
<ng-template #processor let-references> <ng-template #processor let-references>
@if (references.length > 0) { @if (references.length > 0) {
<li> <li>
<h4><span class="accent-color font-medium">Processors</span> ({{ references.length }})</h4> <h4 class="accent-color">Processors ({{ references.length }})</h4>
<div class="references"> <div class="references">
@for (reference of references; track reference) { @for (reference of references; track reference) {
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2">
@ -88,7 +88,7 @@
<ng-template #service let-references> <ng-template #service let-references>
@if (references.length > 0) { @if (references.length > 0) {
<li> <li>
<h4><span class="accent-color font-medium">Controller Services</span> ({{ references.length }})</h4> <h4 class="accent-color">Controller Services ({{ references.length }})</h4>
<div class="references"> <div class="references">
@for (service of references; track service) { @for (service of references; track service) {
<div class="flex flex-col"> <div class="flex flex-col">
@ -124,7 +124,7 @@
<ng-template #unauthorized let-references> <ng-template #unauthorized let-references>
@if (references.length > 0) { @if (references.length > 0) {
<li> <li>
<h4><span class="accent-color font-medium">Unauthorized</span> ({{ references.length }})</h4> <h4 class="accent-color">Unauthorized ({{ references.length }})</h4>
<div class="references"> <div class="references">
@for (reference of references; track reference) { @for (reference of references; track reference) {
<div class="flex"> <div class="flex">

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

@ -187,7 +187,7 @@
</div> </div>
<div class="w-full flex flex-col gap-y-3"> <div class="w-full flex flex-col gap-y-3">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="event-header primary-color"> <div class="event-header font-bold primary-color">
Parent FlowFiles ({{ request.event.parentUuids.length }}) Parent FlowFiles ({{ request.event.parentUuids.length }})
</div> </div>
<ng-container <ng-container
@ -197,7 +197,7 @@
"></ng-container> "></ng-container>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="event-header primary-color"> <div class="event-header font-bold primary-color">
Child FlowFiles ({{ request.event.childUuids.length }}) Child FlowFiles ({{ request.event.childUuids.length }})
</div> </div>
<ng-container <ng-container
@ -224,7 +224,7 @@
<div class="tab-content py-4"> <div class="tab-content py-4">
<div class="absolute inset-0 flex flex-col gap-y-4"> <div class="absolute inset-0 flex flex-col gap-y-4">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="event-header primary-color">Attribute Values</div> <div class="event-header font-bold primary-color">Attribute Values</div>
<div class="flex items-center gap-x-1"> <div class="flex items-center gap-x-1">
<mat-checkbox color="primary" [(ngModel)]="onlyShowModifiedAttributes"></mat-checkbox> <mat-checkbox color="primary" [(ngModel)]="onlyShowModifiedAttributes"></mat-checkbox>
<div>Show modified attributes only</div> <div>Show modified attributes only</div>
@ -257,7 +257,7 @@
<div class="absolute inset-0 flex flex-col gap-y-4"> <div class="absolute inset-0 flex flex-col gap-y-4">
<div class="flex gap-x-4"> <div class="flex gap-x-4">
<div class="w-full"> <div class="w-full">
<div class="event-header primary-color">Input Claim</div> <div class="event-header font-bold primary-color">Input Claim</div>
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
<div> <div>
<div>Container</div> <div>Container</div>
@ -323,7 +323,7 @@
</div> </div>
</div> </div>
<div class="w-full"> <div class="w-full">
<div class="event-header primary-color">Output Claim</div> <div class="event-header font-bold primary-color">Output Claim</div>
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
<div> <div>
<div>Container</div> <div>Container</div>
@ -390,7 +390,7 @@
</div> </div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="event-header primary-color">Replay</div> <div class="event-header font-bold primary-color">Replay</div>
<div <div
*ngIf="request.event.replayAvailable; else replayNotAvailable" *ngIf="request.event.replayAvailable; else replayNotAvailable"
class="flex flex-col gap-y-3"> class="flex flex-col gap-y-3">

3
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.scss
View File

@ -31,9 +31,6 @@
.event-header { .event-header {
font-size: 15px; font-size: 15px;
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold;
} }
} }
} }

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

@ -27,7 +27,9 @@
<div class="inset-0 flex gap-y-4"> <div class="inset-0 flex gap-y-4">
<div class="flex flex-col flex-1 gap-y-4"> <div class="flex flex-col flex-1 gap-y-4">
<section> <section>
<div class="section-header">Heap ({{ systemDiagnostics.heapUtilization }})</div> <div class="section-header font-bold">
Heap ({{ systemDiagnostics.heapUtilization }})
</div>
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
<div class="flex flex-col"> <div class="flex flex-col">
<div>Max</div> <div>Max</div>
@ -56,7 +58,7 @@
</div> </div>
</section> </section>
<section> <section>
<div class="section-header primary-color">Garbage Collection</div> <div class="section-header font-bold primary-color">Garbage Collection</div>
@if (sortedGarbageCollections) { @if (sortedGarbageCollections) {
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
@for (gc of sortedGarbageCollections; track gc) { @for (gc of sortedGarbageCollections; track gc) {
@ -73,7 +75,7 @@
</div> </div>
<div class="flex flex-col flex-1 gap-y-4"> <div class="flex flex-col flex-1 gap-y-4">
<section> <section>
<div class="section-header">Non Heap</div> <div class="section-header font-bold">Non Heap</div>
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
<div class="flex flex-col"> <div class="flex flex-col">
<div>Max</div> <div>Max</div>
@ -102,7 +104,7 @@
</div> </div>
</section> </section>
<section> <section>
<div class="section-header">Runtime</div> <div class="section-header font-bold">Runtime</div>
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
<div class="flex flex-col"> <div class="flex flex-col">
<div>Uptime</div> <div>Uptime</div>
@ -148,7 +150,7 @@
</div> </div>
</div> </div>
<section class="flex flex-col pr-4"> <section class="flex flex-col pr-4">
<div class="section-header">FlowFile Repository Usage</div> <div class="section-header font-bold">FlowFile Repository Usage</div>
<div> <div>
<div class="capitalize">Usage:</div> <div class="capitalize">Usage:</div>
<mat-progress-bar <mat-progress-bar
@ -168,7 +170,7 @@
</div> </div>
</section> </section>
<section class="flex flex-col pr-4"> <section class="flex flex-col pr-4">
<div class="section-header">Content Repository Usage</div> <div class="section-header font-bold">Content Repository Usage</div>
<div class="repository-storage-container flex flex-col gap-y-2"> <div class="repository-storage-container flex flex-col gap-y-2">
@for (repo of systemDiagnostics.contentRepositoryStorageUsage; track repo) { @for (repo of systemDiagnostics.contentRepositoryStorageUsage; track repo) {
<div> <div>
@ -185,7 +187,7 @@
</div> </div>
</section> </section>
<section class="flex flex-col pr-4"> <section class="flex flex-col pr-4">
<div class="section-header">Provenance Repository Usage</div> <div class="section-header font-bold">Provenance Repository Usage</div>
<div class="repository-storage-container flex flex-col gap-y-2"> <div class="repository-storage-container flex flex-col gap-y-2">
@for (repo of systemDiagnostics.provenanceRepositoryStorageUsage; track repo) { @for (repo of systemDiagnostics.provenanceRepositoryStorageUsage; track repo) {
<div> <div>
@ -207,37 +209,37 @@
<div class="tab-content py-4 h-full w-full"> <div class="tab-content py-4 h-full w-full">
<div class="inset-0 flex flex-col gap-y-4"> <div class="inset-0 flex flex-col gap-y-4">
<section> <section>
<div class="section-header">NiFi</div> <div class="section-header font-bold">NiFi</div>
<dl class="setting-attributes-list"> <dl class="setting-attributes-list">
<dt>NiFi Version</dt> <dt class="font-bold">NiFi Version</dt>
<dd>{{ systemDiagnostics.versionInfo.niFiVersion }}</dd> <dd>{{ systemDiagnostics.versionInfo.niFiVersion }}</dd>
<dt>Tag</dt> <dt class="font-bold">Tag</dt>
<dd>{{ systemDiagnostics.versionInfo.buildTag }}</dd> <dd>{{ systemDiagnostics.versionInfo.buildTag }}</dd>
<dt>Build Date/Time</dt> <dt class="font-bold">Build Date/Time</dt>
<dd>{{ systemDiagnostics.versionInfo.buildTimestamp }}</dd> <dd>{{ systemDiagnostics.versionInfo.buildTimestamp }}</dd>
<dt>Branch</dt> <dt class="font-bold">Branch</dt>
<dd>{{ systemDiagnostics.versionInfo.buildBranch }}</dd> <dd>{{ systemDiagnostics.versionInfo.buildBranch }}</dd>
<dt>Revision</dt> <dt class="font-bold">Revision</dt>
<dd>{{ systemDiagnostics.versionInfo.buildRevision }}</dd> <dd>{{ systemDiagnostics.versionInfo.buildRevision }}</dd>
</dl> </dl>
</section> </section>
<section> <section>
<div class="section-header">Java</div> <div class="section-header font-bold">Java</div>
<dl class="setting-attributes-list"> <dl class="setting-attributes-list">
<dt>Version</dt> <dt class="font-bold">Version</dt>
<dd>{{ systemDiagnostics.versionInfo.javaVersion }}</dd> <dd>{{ systemDiagnostics.versionInfo.javaVersion }}</dd>
<dt>Vendor</dt> <dt class="font-bold">Vendor</dt>
<dd>{{ systemDiagnostics.versionInfo.javaVendor }}</dd> <dd>{{ systemDiagnostics.versionInfo.javaVendor }}</dd>
</dl> </dl>
</section> </section>
<section> <section>
<div class="section-header">Operating System</div> <div class="section-header font-bold">Operating System</div>
<dl class="setting-attributes-list"> <dl class="setting-attributes-list">
<dt>Name</dt> <dt class="font-bold">Name</dt>
<dd>{{ systemDiagnostics.versionInfo.osName }}</dd> <dd>{{ systemDiagnostics.versionInfo.osName }}</dd>
<dt>Version</dt> <dt class="font-bold">Version</dt>
<dd>{{ systemDiagnostics.versionInfo.osVersion }}</dd> <dd>{{ systemDiagnostics.versionInfo.osVersion }}</dd>
<dt>Architecture</dt> <dt class="font-bold">Architecture</dt>
<dd>{{ systemDiagnostics.versionInfo.osArchitecture }}</dd> <dd>{{ systemDiagnostics.versionInfo.osArchitecture }}</dd>
</dl> </dl>
</section> </section>

4
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.scss
View File

@ -26,9 +26,6 @@
.section-header { .section-header {
font-size: 15px; font-size: 15px;
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold;
} }
} }
@ -37,7 +34,6 @@
float: left; float: left;
clear: left; clear: left;
padding: 0 0.5em 0.2em 0; padding: 0 0.5em 0.2em 0;
font-weight: bold;
} }
dd { dd {
margin-left: 9em; margin-left: 9em;

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/el-function-tip/el-function-tip.component.html
View File

@ -18,7 +18,7 @@
<div class="el-function-tooltip tooltip" [style.left.px]="left" [style.bottom.px]="bottom"> <div class="el-function-tooltip tooltip" [style.left.px]="left" [style.bottom.px]="bottom">
@if (data?.elFunction; as elFunction) { @if (data?.elFunction; as elFunction) {
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
<div class="el-name">{{ elFunction.name }}</div> <div class="el-name font-bold">{{ elFunction.name }}</div>
@if (hasDescription(elFunction)) { @if (hasDescription(elFunction)) {
<div>{{ elFunction.description }}</div> <div>{{ elFunction.description }}</div>
} }

5
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/el-function-tip/el-function-tip.component.scss
View File

@ -20,16 +20,11 @@
width: 400px; width: 400px;
.el-name { .el-name {
font-weight: bold;
font-family: monospace; font-family: monospace;
font-size: 16px; font-size: 16px;
margin-bottom: 10px; margin-bottom: 10px;
} }
div.el-header {
font-weight: bold;
}
ul.el-arguments { ul.el-arguments {
list-style-type: disc; list-style-type: disc;
list-style-position: inside; list-style-position: inside;

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/parameter-tip/parameter-tip.component.html
View File

@ -18,7 +18,7 @@
<div class="tooltip parameter-tip" [style.left.px]="left" [style.bottom.px]="bottom"> <div class="tooltip parameter-tip" [style.left.px]="left" [style.bottom.px]="bottom">
@if (data?.parameter; as parameter) { @if (data?.parameter; as parameter) {
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
<div class="parameter-name">{{ parameter.name }}</div> <div class="parameter-name font-bold">{{ parameter.name }}</div>
@if (hasDescription(parameter)) { @if (hasDescription(parameter)) {
<div>{{ parameter.description }}</div> <div>{{ parameter.description }}</div>
} @else { } @else {

1
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/parameter-tip/parameter-tip.component.scss
View File

@ -20,7 +20,6 @@
width: 400px; width: 400px;
.parameter-name { .parameter-name {
font-weight: 700;
font-family: monospace; font-family: monospace;
font-size: 16px; font-size: 16px;
margin-bottom: 10px; margin-bottom: 10px;

9
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/property-hint-tip/property-hint-tip.component.html
View File

@ -23,7 +23,7 @@
<div class="flex items-baseline gap-x-3"> <div class="flex items-baseline gap-x-3">
<div class="fa fa-check"></div> <div class="fa fa-check"></div>
<div class="flex flex-col"> <div class="flex flex-col">
<div>Expression Language (EL) supported</div> <div class="font-bold">Expression Language (EL) supported</div>
<div> <div>
After beginning with the start delimiter <span class="hint-pattern">$&#123;</span> use the After beginning with the start delimiter <span class="hint-pattern">$&#123;</span> use the
keystroke <span class="hint-keystroke">control+space</span> to see a list of available keystroke <span class="hint-keystroke">control+space</span> to see a list of available
@ -42,10 +42,11 @@
<div class="flex items-baseline gap-x-3"> <div class="flex items-baseline gap-x-3">
<div class="fa fa-check"></div> <div class="fa fa-check"></div>
<div class="flex flex-col"> <div class="flex flex-col">
<div>Parameters (PARAM) supported</div> <div class="font-bold">Parameters (PARAM) supported</div>
<div> <div>
After beginning with the start delimiter <span class="hint-pattern">#&#123;</span> use the After beginning with the start delimiter
keystroke <span class="hint-keystroke">control+space</span> to see a list of available <span class="hint-pattern font-normal">#&#123;</span> use the keystroke
<span class="hint-keystroke font-light">control+space</span> to see a list of available
parameters. parameters.
</div> </div>
</div> </div>

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/property-hint-tip/property-hint-tip.component.scss
View File

@ -18,10 +18,8 @@
.hint-pattern { .hint-pattern {
padding: 0 2px; padding: 0 2px;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 400;
} }
.hint-keystroke { .hint-keystroke {
font-weight: 300;
font-style: italic; font-style: italic;
} }

30
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
View File

@ -28,15 +28,11 @@
body { body {
margin: 0; margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif;
} }
a { a {
font-size: 13px;
cursor: pointer; cursor: pointer;
font-weight: normal;
display: inline-block; display: inline-block;
font-family: Roboto;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 3px; text-underline-offset: 3px;
} }
@ -47,8 +43,6 @@
border-radius: 2px; border-radius: 2px;
border-width: 1px; border-width: 1px;
font-size: 13px; font-size: 13px;
font-family: Roboto;
font-weight: 400;
word-wrap: break-word; word-wrap: break-word;
white-space: normal; white-space: normal;
@ -60,8 +54,6 @@
.property-editor { .property-editor {
font-size: 13px; font-size: 13px;
font-family: Roboto;
font-weight: 400;
} }
.blank, .blank,
@ -276,6 +268,28 @@
$material-theme-accent-palette-darker, $material-theme-accent-palette-darker,
$material-theme-accent-palette-lighter $material-theme-accent-palette-lighter
)}; )};
//font-family: mat.get-theme-typography($material-theme, body-1, font-family);
}
.mat-h2,
.mat-typography .mat-h2,
.mat-typography h2 {
// Because angular material typography adds bottom margin
margin: unset;
}
.mat-h3,
.mat-typography .mat-h3,
.mat-typography h3 {
// Because angular material typography adds bottom margin
margin: unset;
}
.mat-h4,
.mat-typography .mat-h4,
.mat-typography h4 {
// Because angular material typography adds bottom margin
margin: unset;
} }
.cdk-drop-list { .cdk-drop-list {

33
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
View File

@ -63,7 +63,7 @@ $warn-light-palette: (
600: #ec3030, 600: #ec3030,
700: #ff1507, 700: #ff1507,
800: #ff0000, 800: #ff0000,
900: #ba554a, // g.component rect.border.unauthorized, #connection-full-drop-shadow feFlood, text.restricted, g.connection rect.border.unauthorized, g.connection path.connection-path.full, g.connection path.connection-path.unauthorized, .controller-bulletins.has-bulletins, path.link.selected, g.event circle.selected 900: #ba554a,
contrast: ( contrast: (
50: rgba(#000000, 0.87), 50: rgba(#000000, 0.87),
100: rgba(#000000, 0.87), 100: rgba(#000000, 0.87),
@ -100,6 +100,31 @@ $material-accent-light: mat.define-palette($material-accent-light-palette, 500,
// warn material palette color default hue must have enough contrast on top of the mat-app-background. For light mode this is a minimum of 600 up to 900. // warn material palette color default hue must have enough contrast on top of the mat-app-background. For light mode this is a minimum of 600 up to 900.
$warn-light: mat.define-palette($warn-light-palette, 400, 200, 900); $warn-light: mat.define-palette($warn-light-palette, 400, 200, 900);
@use '@fontsource/roboto/latin.css' as roboto-normal;
@use '@fontsource/roboto/latin-300-italic.css' as roboto-light-italic;
@use '@fontsource/roboto/latin-400-italic.css' as roboto-normal-italic;
//https://m2.material.io/design/typography/the-type-system.html#type-scale
$typography-config: mat.define-typography-config(
$font-family: Roboto,
//h2
$headline-6: mat.define-typography-level(16px, 24px, 400, $letter-spacing: 0.5px),
//h3
$subtitle-1: mat.define-typography-level(20px, 20px, 700),
//h4
$subtitle-2: mat.define-typography-level(14px, 26px, 400, $letter-spacing: 0.4375px),
//body
$body-1: mat.define-typography-level(16px, 24px, 400),
//body2
$body-2: mat.define-typography-level(14px, 14px, 400),
//caption <mat-error> or <mat-hint>
$caption: mat.define-typography-level(12px, 20px, 400, $letter-spacing: 0.4px),
//button
$button: mat.define-typography-level(16px, 24px, 400),
);
@include mat.typography-hierarchy($typography-config);
// Create the theme objects. We can extract the values we need from the theme passed into the mixins. // Create the theme objects. We can extract the values we need from the theme passed into the mixins.
$material-theme-light: mat.define-light-theme( $material-theme-light: mat.define-light-theme(
( (
@ -108,7 +133,7 @@ $material-theme-light: mat.define-light-theme(
accent: $material-accent-light, accent: $material-accent-light,
warn: $warn-light warn: $warn-light
), ),
//typography: mat.define-typography-config(), // TODO: typography typography: $typography-config,
density: -3 density: -3
) )
); );
@ -138,8 +163,8 @@ $material-theme-dark: mat.define-dark-theme(
accent: $material-accent-dark, accent: $material-accent-dark,
warn: $warn-dark warn: $warn-dark
), ),
density: 0, typography: $typography-config,
typography: mat.define-typography-config(), density: 0
) )
); );

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

@ -114,7 +114,6 @@ $nifi-theme-light: mat.define-light-theme(
accent: $success-light-palette, accent: $success-light-palette,
warn: $caution-light-palette warn: $caution-light-palette
), ),
//typography: mat.define-typography-config(), // TODO: typography
density: -3 density: -3
) )
); );
@ -132,7 +131,6 @@ $nifi-theme-dark: mat.define-dark-theme(
accent: $success-dark-palette, accent: $success-dark-palette,
warn: $caution-dark-palette, warn: $caution-dark-palette,
), ),
//typography: mat.define-typography-config(), // TODO: typography
density: -3 density: -3
) )
); );

23
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss
View File

@ -30,6 +30,27 @@ $material-primary-light: mat.define-palette($material-primary-light-palette, 800
$material-accent-light: mat.define-palette($material-accent-light-palette, 600, 50, A700); $material-accent-light: mat.define-palette($material-accent-light-palette, 600, 50, A700);
$warn-light: mat.define-palette($warn-light-palette, 400, 200, 900); $warn-light: mat.define-palette($warn-light-palette, 400, 200, 900);
//https://m2.material.io/design/typography/the-type-system.html#type-scale
$typography-config: mat.define-typography-config(
$font-family: "Comic Sans MS, Tahoma",
//h2
$headline-6: mat.define-typography-level(16px, 24px, 400, $letter-spacing: 0.5px),
//h3
$subtitle-1: mat.define-typography-level(20px, 20px, 700),
//h4
$subtitle-2: mat.define-typography-level(14px, 26px, 400, $letter-spacing: 0.4375px),
//body
$body-1: mat.define-typography-level(16px, 24px, 400),
//body2
$body-2: mat.define-typography-level(14px, 14px, 400),
//caption <mat-error> or <mat-hint>
$caption: mat.define-typography-level(12px, 20px, 400, $letter-spacing: 0.4px),
//button
$button: mat.define-typography-level(16px, 24px, 400),
);
@include mat.typography-hierarchy($typography-config);
// Create the theme objects. We can extract the values we need from the theme passed into the mixins. // Create the theme objects. We can extract the values we need from the theme passed into the mixins.
$material-theme-light: mat.define-light-theme( $material-theme-light: mat.define-light-theme(
( (
@ -38,6 +59,7 @@ $material-theme-light: mat.define-light-theme(
accent: $material-accent-light, accent: $material-accent-light,
warn: $warn-light warn: $warn-light
), ),
typography: $typography-config,
density: -3 density: -3
) )
); );
@ -54,6 +76,7 @@ $material-theme-dark: mat.define-dark-theme(
accent: $material-accent-dark, accent: $material-accent-dark,
warn: $warn-dark warn: $warn-dark
), ),
typography: $typography-config,
density: -3 density: -3
) )
); );

4
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/index.html
View File

@ -22,10 +22,8 @@
<title>NiFi</title> <title>NiFi</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="assets/icons/nifi-drop.svg" /> <link rel="icon" type="image/svg+xml" href="assets/icons/nifi-drop.svg" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head> </head>
<body class="mat-app-background"> <body class="mat-app-background mat-typography">
<nifi></nifi> <nifi></nifi>
</body> </body>
</html> </html>

8
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
View File

@ -42,10 +42,6 @@
@use 'app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component-theme' as processor-status-table; @use 'app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component-theme' as processor-status-table;
// Plus imports for other components in your app. // Plus imports for other components in your app.
@use '@fontsource/roboto/latin.css' as roboto-normal;
@use '@fontsource/roboto/latin-300-italic.css' as roboto-light-italic;
@use '@fontsource/roboto/latin-400-italic.css' as roboto-normal-italic;
@use '@fontsource/roboto-slab/latin.css' as roboto-slab-normal;
@use 'assets/fonts/flowfont/flowfont.css'; @use 'assets/fonts/flowfont/flowfont.css';
@use 'font-awesome/css/font-awesome.min.css'; @use 'font-awesome/css/font-awesome.min.css';
@use 'codemirror/lib/codemirror.css'; @use 'codemirror/lib/codemirror.css';
@ -90,7 +86,7 @@
@include provenance.generate-theme($material-theme-light, $nifi-theme-light); @include provenance.generate-theme($material-theme-light, $nifi-theme-light);
@include lineage.generate-theme($material-theme-light, $nifi-theme-light); @include lineage.generate-theme($material-theme-light, $nifi-theme-light);
@include context-menu.generate-theme($material-theme-light, $nifi-theme-light); @include context-menu.generate-theme($material-theme-light, $nifi-theme-light);
@include navigation.generate-theme($material-theme-light); @include navigation.generate-theme($material-theme-light, $nifi-theme-light);
@include nf-editor.generate-theme($material-theme-light, $nifi-theme-light); @include nf-editor.generate-theme($material-theme-light, $nifi-theme-light);
@include status-history.generate-theme($nifi-theme-light); @include status-history.generate-theme($nifi-theme-light);
@include property-hint-tip.generate-theme($material-theme-light, $nifi-theme-light); @include property-hint-tip.generate-theme($material-theme-light, $nifi-theme-light);
@ -118,7 +114,7 @@
@include provenance.generate-theme($material-theme-dark, $nifi-theme-dark); @include provenance.generate-theme($material-theme-dark, $nifi-theme-dark);
@include lineage.generate-theme($material-theme-dark, $nifi-theme-dark); @include lineage.generate-theme($material-theme-dark, $nifi-theme-dark);
@include context-menu.generate-theme($material-theme-dark, $nifi-theme-dark); @include context-menu.generate-theme($material-theme-dark, $nifi-theme-dark);
@include navigation.generate-theme($material-theme-dark); @include navigation.generate-theme($material-theme-dark, $nifi-theme-dark);
@include nf-editor.generate-theme($material-theme-dark, $nifi-theme-dark); @include nf-editor.generate-theme($material-theme-dark, $nifi-theme-dark);
@include status-history.generate-theme($nifi-theme-dark); @include status-history.generate-theme($nifi-theme-dark);
@include property-hint-tip.generate-theme($material-theme-dark, $nifi-theme-dark); @include property-hint-tip.generate-theme($material-theme-dark, $nifi-theme-dark);