mirror of https://github.com/apache/nifi.git
[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
GitHub
parent
2711f9d8cf
commit
b87e9c8d9d
File diff suppressed because it is too large
Load Diff
|
|
@ -28,7 +28,6 @@
|
|||
"@angular/router": "^17.1.3",
|
||||
"@ctrl/ngx-codemirror": "^7.0.0",
|
||||
"@fontsource/roboto": "^5.0.12",
|
||||
"@fontsource/roboto-slab": "^5.0.19",
|
||||
"@ngrx/effects": "^17.1.0",
|
||||
"@ngrx/router-store": "^17.1.0",
|
||||
"@ngrx/store": "^17.1.0",
|
||||
|
|
@ -41,7 +40,6 @@
|
|||
"ngx-skeleton-loader": "^8.1.0",
|
||||
"rxjs": "~7.8.1",
|
||||
"tslib": "^2.6.2",
|
||||
"webfontloader": "^1.6.28",
|
||||
"zone.js": "0.14.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -64,7 +62,6 @@
|
|||
"@types/d3": "^7.4.3",
|
||||
"@types/humanize-duration": "^3.27.3",
|
||||
"@types/jest": "^29.5.12",
|
||||
"@types/webfontloader": "^1.6.38",
|
||||
"@typescript-eslint/eslint-plugin": "6.21.0",
|
||||
"@typescript-eslint/parser": "6.21.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
|
|
|
|||
|
|
@ -23,6 +23,4 @@
|
|||
</div>
|
||||
}
|
||||
|
||||
<div class="mat-app-background">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<navigation></navigation>
|
||||
</header>
|
||||
<div class="px-5">
|
||||
<h3 class="text-xl bold primary-color">Access Policies</h3>
|
||||
<h3 class="primary-color">Access Policies</h3>
|
||||
</div>
|
||||
<div class="px-5 flex-1">
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<navigation></navigation>
|
||||
</header>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<navigation></navigation>
|
||||
</header>
|
||||
<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>
|
||||
@if (getTabLinks(); as tabs) {
|
||||
<!-- Don't show the tab bar if there is only 1 tab to show -->
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<navigation></navigation>
|
||||
</header>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<navigation></navigation>
|
||||
</header>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
|
||||
import { Injectable } from '@angular/core';
|
||||
import * as d3 from 'd3';
|
||||
import * as WebFont from 'webfontloader';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { CanvasState } from '../state';
|
||||
import { refreshBirdseyeView, transformComplete } from '../state/transform/transform.actions';
|
||||
|
|
@ -67,23 +66,6 @@ export class CanvasView {
|
|||
) {}
|
||||
|
||||
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.canvas = canvas;
|
||||
|
||||
|
|
|
|||
|
|
@ -90,6 +90,11 @@
|
|||
/*
|
||||
All components
|
||||
*/
|
||||
|
||||
g.component {
|
||||
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
|
||||
}
|
||||
|
||||
.transparent {
|
||||
fill: transparent;
|
||||
}
|
||||
|
|
@ -146,6 +151,7 @@
|
|||
|
||||
text.stats-label {
|
||||
@extend .surface-contrast;
|
||||
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
|
||||
}
|
||||
|
||||
text.stats-value {
|
||||
|
|
@ -256,6 +262,10 @@
|
|||
Connection
|
||||
*/
|
||||
|
||||
g.connection {
|
||||
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
|
||||
}
|
||||
|
||||
g.connection rect.body {
|
||||
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
|
||||
}
|
||||
|
|
@ -427,6 +437,7 @@
|
|||
|
||||
text.process-group-contents-count {
|
||||
fill: $material-theme-accent-palette-default;
|
||||
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
|
||||
}
|
||||
|
||||
g.process-group.drop rect.border {
|
||||
|
|
|
|||
|
|
@ -43,10 +43,6 @@
|
|||
All components
|
||||
*/
|
||||
|
||||
g.component {
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
g.component rect.border.unauthorized {
|
||||
stroke-width: 3;
|
||||
stroke-dasharray: 4;
|
||||
|
|
@ -63,7 +59,6 @@
|
|||
|
||||
text.stats-label {
|
||||
font-size: 12px;
|
||||
font-family: Roboto Slab;
|
||||
}
|
||||
|
||||
text.stats-value {
|
||||
|
|
@ -206,10 +201,6 @@
|
|||
Connection
|
||||
*/
|
||||
|
||||
g.connection {
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
g.connection rect.border.unauthorized {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: 3, 3;
|
||||
|
|
@ -372,7 +363,6 @@
|
|||
text.process-group-contents-count {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
g.process-group.drop rect.border {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ div.navigation-control {
|
|||
|
||||
.navigation-control-title {
|
||||
font-size: 12px;
|
||||
font-family: 'Roboto Slab';
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ div.operation-control {
|
|||
|
||||
.operation-control-title {
|
||||
font-size: 12px;
|
||||
font-family: 'Roboto Slab';
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,12 +24,6 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.controller-bulletins {
|
||||
cursor: default;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,10 @@
|
|||
[title]="getVersionControlTooltip(breadcrumb)"></div>
|
||||
}
|
||||
@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) }}
|
||||
</a>
|
||||
} @else {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
}
|
||||
|
||||
a.current-process-group {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<navigation></navigation>
|
||||
</header>
|
||||
<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 (isInitialLoading(serviceState)) {
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<navigation></navigation>
|
||||
</header>
|
||||
<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) {
|
||||
<div class="grid-container grid grid-cols-2">
|
||||
<div class="col-span-1 pr-5">
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<div class="login-form w-96 flex flex-col gap-y-5">
|
||||
<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">
|
||||
@if (hasToken()) {
|
||||
<a (click)="logout()">log out</a>
|
||||
|
|
|
|||
|
|
@ -16,12 +16,6 @@
|
|||
*/
|
||||
|
||||
.login-form {
|
||||
.login-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-family: Roboto Slab;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<navigation></navigation>
|
||||
</header>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<ul>
|
||||
@if (authorizedProcessGroupReferences.length > 0) {
|
||||
<li>
|
||||
<h4>
|
||||
<h4 class="primary-color">
|
||||
<b>Process Groups ({{ authorizedProcessGroupReferences.length }})</b>
|
||||
</h4>
|
||||
<ul class="nested">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
@if (unauthorizedProcessGroupReferences.length > 0) {
|
||||
<li>
|
||||
<h4>
|
||||
<h4 class="primary-color">
|
||||
<b>Unauthorized ({{ unauthorizedProcessGroupReferences.length }})</b>
|
||||
</h4>
|
||||
<ul class="nested">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<header class="nifi-header">
|
||||
<navigation></navigation>
|
||||
</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">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,12 @@
|
|||
svg {
|
||||
text.event-type {
|
||||
@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 {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@
|
|||
}
|
||||
|
||||
text.event-type {
|
||||
font-family: Roboto;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
|
|
@ -39,7 +38,6 @@
|
|||
text.event-type.expand-parents,
|
||||
text.event-type.expand-children {
|
||||
font-weight: 500;
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<div class="absolute inset-0 flex gap-x-4">
|
||||
<div class="w-full flex flex-col gap-y-3">
|
||||
<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 class="flex flex-col">
|
||||
<div>UUID</div>
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
</div>
|
||||
<div class="w-full flex flex-col gap-y-3">
|
||||
<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
|
||||
class="flex flex-col gap-y-3"
|
||||
|
|
@ -181,7 +181,7 @@
|
|||
<div class="tab-content py-4">
|
||||
<div class="absolute inset-0 flex flex-col gap-y-4">
|
||||
<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 class="flex flex-col">
|
||||
<div *ngFor="let attribute of request.flowfile.attributes | keyvalue">
|
||||
|
|
|
|||
|
|
@ -31,9 +31,7 @@
|
|||
|
||||
.flowfile-header {
|
||||
font-size: 15px;
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
-->
|
||||
|
||||
<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>
|
||||
<div class="flex justify-between">
|
||||
<div class="accent-color font-medium">
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<navigation></navigation>
|
||||
</header>
|
||||
<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">
|
||||
<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
|
||||
@for (tab of tabLinks; track tab) {
|
||||
|
|
|
|||
|
|
@ -42,9 +42,7 @@
|
|||
<ng-template #parameterContexts let-references let-label="label">
|
||||
@if (references.length > 0) {
|
||||
<li>
|
||||
<h4>
|
||||
<span class="accent-color font-medium">{{ label }}</span> ({{ references.length }})
|
||||
</h4>
|
||||
<h4 class="accent-color">{{ label }} ({{ references.length }})</h4>
|
||||
<div class="references">
|
||||
@for (reference of references; track reference) {
|
||||
<div class="flex items-center gap-x-2">
|
||||
|
|
@ -61,9 +59,7 @@
|
|||
<ng-template #unauthorized let-references let-label="label">
|
||||
@if (references.length > 0) {
|
||||
<li>
|
||||
<h4>
|
||||
<span class="accent-color font-medium">{{ label }}</span> ({{ references.length }})
|
||||
</h4>
|
||||
<h4 class="accent-color">{{ label }} ({{ references.length }})</h4>
|
||||
<div class="references">
|
||||
@for (reference of references; track reference) {
|
||||
<div class="flex items-center gap-x-2">
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<navigation></navigation>
|
||||
</header>
|
||||
<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 (selectedNode.id !== 'All') {
|
||||
{{ selectedNode.address }} Summary
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
<div class="flex align-middle">
|
||||
@if (item.processorStatusSnapshot.executionNode === 'PRIMARY') {
|
||||
<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">
|
||||
P
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.processor-status-table {
|
||||
.listing-table {
|
||||
.mat-column-moreDetails {
|
||||
|
|
@ -28,13 +29,12 @@
|
|||
width: 74px;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-node-only {
|
||||
font-family: Roboto;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 13px;
|
||||
width: 14px;
|
||||
height: 15px;
|
||||
border-radius: 8px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<navigation></navigation>
|
||||
</header>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
-->
|
||||
|
||||
<div class="user-access-policies">
|
||||
<h3 mat-dialog-title>User Policies</h3>
|
||||
<h2 mat-dialog-title>User Policies</h2>
|
||||
<mat-dialog-content>
|
||||
<div class="flex flex-col justify-between gap-y-3">
|
||||
<div class="flex flex-col">
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
<ng-template #nonService let-references let-referenceTypeLabel="referenceTypeLabel">
|
||||
@if (references.length > 0) {
|
||||
<li>
|
||||
<h4>
|
||||
<h4 class="primary-color">
|
||||
<span class="accent-color font-medium">{{ referenceTypeLabel }}</span>
|
||||
({{ references.length }})
|
||||
</h4>
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
<ng-template #service let-references>
|
||||
@if (references.length > 0) {
|
||||
<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">
|
||||
@for (service of references; track service) {
|
||||
<div class="flex flex-col">
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
<ng-template #unauthorized let-references>
|
||||
@if (references.length > 0) {
|
||||
<li>
|
||||
<h4><span class="accent-color font-medium">Unauthorized</span> ({{ references.length }})</h4>
|
||||
<h4 class="accent-color">Unauthorized ({{ references.length }})</h4>
|
||||
<div class="references">
|
||||
@for (reference of references; track reference) {
|
||||
<div class="flex">
|
||||
|
|
|
|||
|
|
@ -14,24 +14,23 @@
|
|||
~ See the License for the specific language governing permissions and
|
||||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<section tabindex="0" (keyup)="navigateSelectionList($event)">
|
||||
<div class="extension-creation-dialog p-4 flex flex-col justify-between gap-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-lg">Add {{ componentType }}</h3>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter types</mat-label>
|
||||
<input
|
||||
matInput
|
||||
class="px-1.5 py-1 w-64"
|
||||
type="text"
|
||||
(keyup)="filterTypes($event)"
|
||||
cdkFocusInitial
|
||||
placeholder="Filter types..." />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="extension-creation-dialog" (keyup)="navigateSelectionList($event)">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 mat-dialog-title>Add {{ componentType }}</h2>
|
||||
<div class="pt-5 pr-5">
|
||||
<mat-form-field>
|
||||
<mat-label>Filter types</mat-label>
|
||||
<input
|
||||
matInput
|
||||
class="px-1.5 py-1 w-64"
|
||||
type="text"
|
||||
(keyup)="filterTypes($event)"
|
||||
tabindex="0"
|
||||
placeholder="Filter types..." />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<mat-dialog-content>
|
||||
<div class="listing-table select-none">
|
||||
<div class="h-96 overflow-y-auto overflow-x-hidden">
|
||||
<table
|
||||
|
|
@ -102,10 +101,10 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col pt-3">
|
||||
@if (selectedType) {
|
||||
<div class="flex items-center">
|
||||
<div class="selected-type-name accent-color">
|
||||
<div class="selected-type-name font-medium accent-color">
|
||||
{{ formatType(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>
|
||||
<div class="flex justify-end gap-x-2">
|
||||
<button mat-button mat-dialog-close>Cancel</button>
|
||||
<button
|
||||
[disabled]="selectedType == null || saving"
|
||||
color="primary"
|
||||
(click)="createExtension(selectedType)"
|
||||
mat-button>
|
||||
<span *nifiSpinner="saving">Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button mat-dialog-close>Cancel</button>
|
||||
<button
|
||||
[disabled]="selectedType == null || saving"
|
||||
color="primary"
|
||||
(click)="createExtension(selectedType)"
|
||||
mat-button>
|
||||
<span *nifiSpinner="saving">Add</span>
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@
|
|||
|
||||
.selected-type-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
@use '@angular/material' as mat;
|
||||
@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.
|
||||
$material-theme-color-config: mat.get-color-config($material-theme);
|
||||
|
||||
|
|
@ -55,6 +55,7 @@
|
|||
|
||||
.current-user {
|
||||
@extend .primary-contrast;
|
||||
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -21,9 +21,6 @@
|
|||
}
|
||||
|
||||
.current-user {
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
max-width: 250px;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<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="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">
|
||||
@if (hasToken()) {
|
||||
<a (click)="logout()" class="whitespace-nowrap">log out</a>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,3 @@
|
|||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.page-content {
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-family: Roboto Slab;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<ng-template #pgListing let-pg>
|
||||
<ul>
|
||||
<li>
|
||||
<h4>
|
||||
<h4 class="primary-color">
|
||||
<b>{{ pg.name }}</b>
|
||||
</h4>
|
||||
@if (parameterReferenceMap.get(pg.id); as references) {
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<ng-template #processor let-references>
|
||||
@if (references.length > 0) {
|
||||
<li>
|
||||
<h4><span class="accent-color font-medium">Processors</span> ({{ references.length }})</h4>
|
||||
<h4 class="accent-color">Processors ({{ references.length }})</h4>
|
||||
<div class="references">
|
||||
@for (reference of references; track reference) {
|
||||
<div class="flex items-center gap-x-2">
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
<ng-template #service let-references>
|
||||
@if (references.length > 0) {
|
||||
<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">
|
||||
@for (service of references; track service) {
|
||||
<div class="flex flex-col">
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
<ng-template #unauthorized let-references>
|
||||
@if (references.length > 0) {
|
||||
<li>
|
||||
<h4><span class="accent-color font-medium">Unauthorized</span> ({{ references.length }})</h4>
|
||||
<h4 class="accent-color">Unauthorized ({{ references.length }})</h4>
|
||||
<div class="references">
|
||||
@for (reference of references; track reference) {
|
||||
<div class="flex">
|
||||
|
|
|
|||
|
|
@ -187,7 +187,7 @@
|
|||
</div>
|
||||
<div class="w-full flex flex-col gap-y-3">
|
||||
<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 }})
|
||||
</div>
|
||||
<ng-container
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
"></ng-container>
|
||||
</div>
|
||||
<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 }})
|
||||
</div>
|
||||
<ng-container
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
<div class="tab-content py-4">
|
||||
<div class="absolute inset-0 flex flex-col gap-y-4">
|
||||
<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">
|
||||
<mat-checkbox color="primary" [(ngModel)]="onlyShowModifiedAttributes"></mat-checkbox>
|
||||
<div>Show modified attributes only</div>
|
||||
|
|
@ -257,7 +257,7 @@
|
|||
<div class="absolute inset-0 flex flex-col gap-y-4">
|
||||
<div class="flex gap-x-4">
|
||||
<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>
|
||||
<div>Container</div>
|
||||
|
|
@ -323,7 +323,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div>Container</div>
|
||||
|
|
@ -390,7 +390,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="event-header primary-color">Replay</div>
|
||||
<div class="event-header font-bold primary-color">Replay</div>
|
||||
<div
|
||||
*ngIf="request.event.replayAvailable; else replayNotAvailable"
|
||||
class="flex flex-col gap-y-3">
|
||||
|
|
|
|||
|
|
@ -31,9 +31,6 @@
|
|||
|
||||
.event-header {
|
||||
font-size: 15px;
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,9 @@
|
|||
<div class="inset-0 flex gap-y-4">
|
||||
<div class="flex flex-col flex-1 gap-y-4">
|
||||
<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">
|
||||
<div>Max</div>
|
||||
|
|
@ -56,7 +58,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="section-header primary-color">Garbage Collection</div>
|
||||
<div class="section-header font-bold primary-color">Garbage Collection</div>
|
||||
@if (sortedGarbageCollections) {
|
||||
<div class="flex flex-col gap-y-3">
|
||||
@for (gc of sortedGarbageCollections; track gc) {
|
||||
|
|
@ -73,7 +75,7 @@
|
|||
</div>
|
||||
<div class="flex flex-col flex-1 gap-y-4">
|
||||
<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">
|
||||
<div>Max</div>
|
||||
|
|
@ -102,7 +104,7 @@
|
|||
</div>
|
||||
</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">
|
||||
<div>Uptime</div>
|
||||
|
|
@ -148,7 +150,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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 class="capitalize">Usage:</div>
|
||||
<mat-progress-bar
|
||||
|
|
@ -168,7 +170,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<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">
|
||||
@for (repo of systemDiagnostics.contentRepositoryStorageUsage; track repo) {
|
||||
<div>
|
||||
|
|
@ -185,7 +187,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<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">
|
||||
@for (repo of systemDiagnostics.provenanceRepositoryStorageUsage; track repo) {
|
||||
<div>
|
||||
|
|
@ -207,37 +209,37 @@
|
|||
<div class="tab-content py-4 h-full w-full">
|
||||
<div class="inset-0 flex flex-col gap-y-4">
|
||||
<section>
|
||||
<div class="section-header">NiFi</div>
|
||||
<div class="section-header font-bold">NiFi</div>
|
||||
<dl class="setting-attributes-list">
|
||||
<dt>NiFi Version</dt>
|
||||
<dt class="font-bold">NiFi Version</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.niFiVersion }}</dd>
|
||||
<dt>Tag</dt>
|
||||
<dt class="font-bold">Tag</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.buildTag }}</dd>
|
||||
<dt>Build Date/Time</dt>
|
||||
<dt class="font-bold">Build Date/Time</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.buildTimestamp }}</dd>
|
||||
<dt>Branch</dt>
|
||||
<dt class="font-bold">Branch</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.buildBranch }}</dd>
|
||||
<dt>Revision</dt>
|
||||
<dt class="font-bold">Revision</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.buildRevision }}</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section>
|
||||
<div class="section-header">Java</div>
|
||||
<div class="section-header font-bold">Java</div>
|
||||
<dl class="setting-attributes-list">
|
||||
<dt>Version</dt>
|
||||
<dt class="font-bold">Version</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.javaVersion }}</dd>
|
||||
<dt>Vendor</dt>
|
||||
<dt class="font-bold">Vendor</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.javaVendor }}</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section>
|
||||
<div class="section-header">Operating System</div>
|
||||
<div class="section-header font-bold">Operating System</div>
|
||||
<dl class="setting-attributes-list">
|
||||
<dt>Name</dt>
|
||||
<dt class="font-bold">Name</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.osName }}</dd>
|
||||
<dt>Version</dt>
|
||||
<dt class="font-bold">Version</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.osVersion }}</dd>
|
||||
<dt>Architecture</dt>
|
||||
<dt class="font-bold">Architecture</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.osArchitecture }}</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -26,9 +26,6 @@
|
|||
|
||||
.section-header {
|
||||
font-size: 15px;
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +34,6 @@
|
|||
float: left;
|
||||
clear: left;
|
||||
padding: 0 0.5em 0.2em 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin-left: 9em;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="el-function-tooltip tooltip" [style.left.px]="left" [style.bottom.px]="bottom">
|
||||
@if (data?.elFunction; as elFunction) {
|
||||
<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)) {
|
||||
<div>{{ elFunction.description }}</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,16 +20,11 @@
|
|||
width: 400px;
|
||||
|
||||
.el-name {
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
div.el-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul.el-arguments {
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="tooltip parameter-tip" [style.left.px]="left" [style.bottom.px]="bottom">
|
||||
@if (data?.parameter; as parameter) {
|
||||
<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)) {
|
||||
<div>{{ parameter.description }}</div>
|
||||
} @else {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
width: 400px;
|
||||
|
||||
.parameter-name {
|
||||
font-weight: 700;
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<div class="flex items-baseline gap-x-3">
|
||||
<div class="fa fa-check"></div>
|
||||
<div class="flex flex-col">
|
||||
<div>Expression Language (EL) supported</div>
|
||||
<div class="font-bold">Expression Language (EL) supported</div>
|
||||
<div>
|
||||
After beginning with the start delimiter <span class="hint-pattern">${</span> use the
|
||||
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="fa fa-check"></div>
|
||||
<div class="flex flex-col">
|
||||
<div>Parameters (PARAM) supported</div>
|
||||
<div class="font-bold">Parameters (PARAM) supported</div>
|
||||
<div>
|
||||
After beginning with the start delimiter <span class="hint-pattern">#{</span> use the
|
||||
keystroke <span class="hint-keystroke">control+space</span> to see a list of available
|
||||
After beginning with the start delimiter
|
||||
<span class="hint-pattern font-normal">#{</span> use the keystroke
|
||||
<span class="hint-keystroke font-light">control+space</span> to see a list of available
|
||||
parameters.
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,8 @@
|
|||
.hint-pattern {
|
||||
padding: 0 2px;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.hint-keystroke {
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,15 +28,11 @@
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
font-family: Roboto;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
|
@ -47,8 +43,6 @@
|
|||
border-radius: 2px;
|
||||
border-width: 1px;
|
||||
font-size: 13px;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
|
||||
|
|
@ -60,8 +54,6 @@
|
|||
|
||||
.property-editor {
|
||||
font-size: 13px;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.blank,
|
||||
|
|
@ -276,6 +268,28 @@
|
|||
$material-theme-accent-palette-darker,
|
||||
$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 {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ $warn-light-palette: (
|
|||
600: #ec3030,
|
||||
700: #ff1507,
|
||||
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: (
|
||||
50: 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-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.
|
||||
$material-theme-light: mat.define-light-theme(
|
||||
(
|
||||
|
|
@ -108,7 +133,7 @@ $material-theme-light: mat.define-light-theme(
|
|||
accent: $material-accent-light,
|
||||
warn: $warn-light
|
||||
),
|
||||
//typography: mat.define-typography-config(), // TODO: typography
|
||||
typography: $typography-config,
|
||||
density: -3
|
||||
)
|
||||
);
|
||||
|
|
@ -138,8 +163,8 @@ $material-theme-dark: mat.define-dark-theme(
|
|||
accent: $material-accent-dark,
|
||||
warn: $warn-dark
|
||||
),
|
||||
density: 0,
|
||||
typography: mat.define-typography-config(),
|
||||
typography: $typography-config,
|
||||
density: 0
|
||||
)
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -114,7 +114,6 @@ $nifi-theme-light: mat.define-light-theme(
|
|||
accent: $success-light-palette,
|
||||
warn: $caution-light-palette
|
||||
),
|
||||
//typography: mat.define-typography-config(), // TODO: typography
|
||||
density: -3
|
||||
)
|
||||
);
|
||||
|
|
@ -132,7 +131,6 @@ $nifi-theme-dark: mat.define-dark-theme(
|
|||
accent: $success-dark-palette,
|
||||
warn: $caution-dark-palette,
|
||||
),
|
||||
//typography: mat.define-typography-config(), // TODO: typography
|
||||
density: -3
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
$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.
|
||||
$material-theme-light: mat.define-light-theme(
|
||||
(
|
||||
|
|
@ -38,6 +59,7 @@ $material-theme-light: mat.define-light-theme(
|
|||
accent: $material-accent-light,
|
||||
warn: $warn-light
|
||||
),
|
||||
typography: $typography-config,
|
||||
density: -3
|
||||
)
|
||||
);
|
||||
|
|
@ -54,6 +76,7 @@ $material-theme-dark: mat.define-dark-theme(
|
|||
accent: $material-accent-dark,
|
||||
warn: $warn-dark
|
||||
),
|
||||
typography: $typography-config,
|
||||
density: -3
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -22,10 +22,8 @@
|
|||
<title>NiFi</title>
|
||||
<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="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="mat-app-background">
|
||||
<body class="mat-app-background mat-typography">
|
||||
<nifi></nifi>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -42,10 +42,6 @@
|
|||
@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.
|
||||
@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 'font-awesome/css/font-awesome.min.css';
|
||||
@use 'codemirror/lib/codemirror.css';
|
||||
|
|
@ -90,7 +86,7 @@
|
|||
@include provenance.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 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 status-history.generate-theme($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 lineage.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 status-history.generate-theme($nifi-theme-dark);
|
||||
@include property-hint-tip.generate-theme($material-theme-dark, $nifi-theme-dark);
|
||||
|
|
|
|||
Loading…
Reference in New Issue