mirror of https://github.com/apache/nifi.git
[NIFI-13349] align angular material and tailwind typography (#8918)
* [NIFI-13349] align angular material and tailwind typography * override default tailwind fontSize configurations to match up with angular material typography configuration * cleanup duplicate style * add text-3xl tailwind configuration * update primary-node-only to use text-sm * replace .refresh-container with text-sm * add comments for $subtitle-2 material typography config * adjust $subtitle-2 font size and line height This closes #8918
This commit is contained in:
Scott Aslan
GitHub
parent
f5ecb18fef
commit
6206f0f008
|
|
@ -119,7 +119,7 @@
|
|||
</div>
|
||||
}
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,6 @@
|
|||
*/
|
||||
|
||||
.component-access-policies {
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.policy-select {
|
||||
.mat-mdc-form-field {
|
||||
width: 300px;
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@
|
|||
</div>
|
||||
}
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,6 @@
|
|||
*/
|
||||
|
||||
.global-access-policies {
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.resource-select {
|
||||
.mat-mdc-form-field {
|
||||
width: 300px;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,3 @@
|
|||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.link {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
[bulletinBoardItems]="bulletinBoardState.bulletinBoardItems"></bulletin-board-list>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<div class="mr-6">
|
||||
<mat-slide-toggle color="primary" [checked]="autoRefresh" (change)="autoRefreshToggle($event)"
|
||||
>Auto-refresh</mat-slide-toggle
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
</div>
|
||||
|
||||
<div class="flex justify-between align-middle">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="listingStatus() === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<div class="flex flex-col">
|
||||
<div>Node Events</div>
|
||||
@if (node.events && node.events.length > 0) {
|
||||
<div class="accent-color font-medium text-sm">
|
||||
<div class="accent-color font-medium text-base">
|
||||
<ul>
|
||||
@for (event of node.events; track event) {
|
||||
<li>{{ event.timestamp }} - {{ event.message }}</li>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
}
|
||||
<div class="flex justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshCounterListing()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="counterListingState.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@
|
|||
<div class="error-background pt-24 pl-24 h-screen">
|
||||
@if (errorDetail$ | async; as errorDetail) {
|
||||
<page-content [title]="errorDetail.title">
|
||||
<div class="text-sm">{{ errorDetail.message }}</div>
|
||||
<div class="text-base">{{ errorDetail.message }}</div>
|
||||
</page-content>
|
||||
} @else {
|
||||
<page-content title="Error">
|
||||
<div class="text-sm">Please check the logs or navigate home and try again.</div>
|
||||
<div class="text-base">Please check the logs or navigate home and try again.</div>
|
||||
</page-content>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
</div>
|
||||
|
||||
<div class="flex justify-between align-middle mt-2">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="state.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="flex flex-col">
|
||||
<div class="flex gap-x-2 items-center">
|
||||
<div class="logo flex flex-col items-center" [style.background-color]="color">
|
||||
<i class="icon accent-color icon-processor p-2" [style.color]="contrastColor"></i>
|
||||
<i class="text-3xl accent-color icon-processor p-2" [style.color]="contrastColor"></i>
|
||||
</div>
|
||||
<div class="flex flex-col flex-1">
|
||||
<div class="context-name w-full">Processor Name</div>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,3 @@
|
|||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
.preview {
|
||||
.processor {
|
||||
.logo {
|
||||
.icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<div class="flex items-center">
|
||||
<div class="fa fa-compass primary-color"></div>
|
||||
@if (!navigationCollapsed || !shouldDockWhenCollapsed) {
|
||||
<div class="navigation-control-title">Navigation</div>
|
||||
<div class="text-sm">Navigation</div>
|
||||
}
|
||||
</div>
|
||||
@if (!navigationCollapsed || !shouldDockWhenCollapsed) {
|
||||
|
|
|
|||
|
|
@ -31,9 +31,4 @@ div.navigation-control {
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-control-title {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<div class="flex items-center">
|
||||
<div class="fa fa-hand-o-up primary-color"></div>
|
||||
@if (!operationCollapsed || !shouldDockWhenCollapsed) {
|
||||
<div class="operation-control-title">Operation</div>
|
||||
<div class="text-sm">Operation</div>
|
||||
}
|
||||
</div>
|
||||
@if (!operationCollapsed || !shouldDockWhenCollapsed) {
|
||||
|
|
|
|||
|
|
@ -31,9 +31,4 @@ div.operation-control {
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.operation-control-title {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
|
||||
.flow-status {
|
||||
box-sizing: content-box;
|
||||
font-size: 15px;
|
||||
|
||||
.fa,
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@
|
|||
[tooltipDisabled]="dragging"
|
||||
[position]="tooltipPosition"
|
||||
[delayClose]="false">
|
||||
<div class="h-16 w-16 pl-1.5 flex items-center justify-center relative icon" [class]="iconClass"></div>
|
||||
<div class="h-16 w-16 pl-1.5 flex items-center justify-center relative icon text-3xl" [class]="iconClass"></div>
|
||||
<button
|
||||
class="h-16 w-16 pl-1.5 -mt-16 flex items-center justify-center relative icon"
|
||||
class="h-16 w-16 pl-1.5 -mt-16 flex items-center justify-center relative icon text-3xl"
|
||||
[class]="isHovering() ? iconHoverClass + ' hovering' : iconClass"
|
||||
[class.dragging]="dragging"
|
||||
[disabled]="disabled"
|
||||
|
|
|
|||
|
|
@ -23,8 +23,6 @@
|
|||
}
|
||||
|
||||
.icon {
|
||||
font-size: 32px;
|
||||
|
||||
&.hovering {
|
||||
cursor: grab;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
[cdkConnectedOverlayHasBackdrop]="true"
|
||||
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
|
||||
(overlayOutsideClick)="backdropClicked($event)">
|
||||
<div class="search-results mat-elevation-z8 w-96 border p-2 text-sm max-h-96 overflow-y-auto">
|
||||
<div class="search-results mat-elevation-z8 w-96 border p-2 text-base max-h-96 overflow-y-auto">
|
||||
@if (searching) {
|
||||
<div class="unset surface-color italic">Searching</div>
|
||||
} @else {
|
||||
|
|
|
|||
|
|
@ -20,8 +20,6 @@
|
|||
width: 0;
|
||||
height: 32px;
|
||||
outline: none;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
transition: width 400ms ease-in-out;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,10 +24,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.listing-table {
|
||||
table {
|
||||
.mat-column-version {
|
||||
|
|
|
|||
|
|
@ -22,8 +22,4 @@
|
|||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,8 +23,4 @@
|
|||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.upload-flow-definition {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<div>
|
||||
{{ readonly ? 'Processor Details' : 'Edit Processor' }}
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
<div class="text-base">
|
||||
{{ formatType(request.entity) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<h2 mat-dialog-title>No Registry clients available</h2>
|
||||
<mat-dialog-content>
|
||||
<div class="text-sm">
|
||||
<div class="text-base">
|
||||
{{
|
||||
request.controllerPermissions.canRead
|
||||
? 'In order to import a flow a Registry Client must be configured in Controller Settings.'
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
</div>
|
||||
}
|
||||
<div class="flex justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshControllerServiceListing()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -250,7 +250,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshManageRemotePortsListing()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="portsState.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
@if (currentUserState$ | async; as userState) {
|
||||
@if (userState.status === 'success') {
|
||||
<page-content [title]="'Success'">
|
||||
<div class="text-sm">Already logged in. Click home to return to canvas.</div>
|
||||
<div class="text-base">Already logged in. Click home to return to canvas.</div>
|
||||
</page-content>
|
||||
} @else {
|
||||
<login-form></login-form>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
</div>
|
||||
@if (updateStep.failureReason) {
|
||||
<div class="text-xs ml-2">
|
||||
<div class="text-sm ml-2">
|
||||
{{ updateStep.failureReason }}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
(manageAccessPolicies)="navigateToManageComponentPolicies($event)"></parameter-context-table>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshParameterContextListing()">
|
||||
<i
|
||||
class="fa fa-refresh"
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
-->
|
||||
|
||||
@if (status$ | async; as status) {
|
||||
<div class="flex flex-col h-full text-sm">
|
||||
<div class="flex flex-col h-full text-base">
|
||||
<div class="flex-1">
|
||||
@if (provenance$ | async; as provenance) {
|
||||
<provenance-event-table
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshClicked()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="loading"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<div class="flex gap-x-4">
|
||||
<div class="w-full flex flex-col gap-y-3">
|
||||
<div class="flex flex-col">
|
||||
<div class="flowfile-header font-bold primary-color">FlowFile Details</div>
|
||||
<div class="mat-body-strong 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 font-bold primary-color">Content Claim</div>
|
||||
<div class="mat-body-strong primary-color">Content Claim</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col gap-y-3"
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
<div class="dialog-tab-content">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<div class="flex">
|
||||
<div class="flowfile-header font-bold primary-color">Attribute Values</div>
|
||||
<div class="mat-body-strong primary-color">Attribute Values</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div *ngFor="let attribute of request.flowfile.attributes | keyvalue">
|
||||
|
|
|
|||
|
|
@ -19,9 +19,4 @@
|
|||
|
||||
.flowfile {
|
||||
@include mat.button-density(-1);
|
||||
|
||||
.flowfile-header {
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<ngx-skeleton-loader count="3"></ngx-skeleton-loader>
|
||||
}
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="text-sm flex justify-between">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshClicked()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="status === 'loading'"></i>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,6 @@
|
|||
|
||||
<div class="error-background pt-24 pl-24 h-screen">
|
||||
<page-content title="Route Not Found">
|
||||
<div class="text-sm">The URL entered is not recognized as a supported route.</div>
|
||||
<div class="text-base">The URL entered is not recognized as a supported route.</div>
|
||||
</page-content>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<div>
|
||||
{{ readonly ? 'Flow Analysis Rule Details' : 'Edit Flow Analysis Rule' }}
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
<div class="text-base">
|
||||
{{ formatType(request.flowAnalysisRule) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
(deleteFlowAnalysisRule)="deleteFlowAnalysisRule($event)"></flow-analysis-rule-table>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshFlowAnalysisRuleListing()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="flowAnalysisRuleState.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
(deleteControllerService)="deleteControllerService($event)"></controller-service-table>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshControllerServiceListing()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<h2 mat-dialog-title>
|
||||
<div class="flex justify-between items-baseline">
|
||||
<div>Edit Parameter Provider</div>
|
||||
<div class="text-sm">
|
||||
<div class="text-base">
|
||||
{{ formatType(request.parameterProvider) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
(selectParameterProvider)="selectParameterProvider($event)"></parameter-providers-table>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshParameterProvidersListing()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="parameterProvidersState.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<h2 mat-dialog-title>
|
||||
<div class="flex justify-between items-baseline">
|
||||
<div>Edit Registry Client</div>
|
||||
<div class="text-sm">
|
||||
<div class="text-base">
|
||||
{{ formatType(request.registryClient) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
(deleteRegistryClient)="deleteRegistryClient($event)"></registry-client-table>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshRegistryClientListing()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="registryClientState.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<div>
|
||||
{{ readonly ? 'Reporting Task Details' : 'Edit Reporting Task' }}
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
<div class="text-base">
|
||||
{{ formatType(request.reportingTask) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
(startReportingTask)="startReportingTask($event)"></reporting-task-table>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshReportingTaskListing()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="reportingTaskState.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
|
||||
<mat-dialog-actions>
|
||||
<div class="flex justify-between align-middle w-full">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="loading$ | async"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
<div class="flex justify-between align-middle">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh.next()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
<div class="flex justify-between align-middle">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh.next()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -357,7 +357,7 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
<div class="flex justify-between align-middle">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh.next()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
<div class="flex align-middle">
|
||||
@if (item.processorStatusSnapshot.executionNode === 'PRIMARY') {
|
||||
<div
|
||||
class="primary-node-only border surface-contrast mr-1 font-bold"
|
||||
class="primary-node-only border surface-contrast mr-1 text-xs font-bold"
|
||||
title="This component is only scheduled to execute on the Primary Node">
|
||||
P
|
||||
</div>
|
||||
|
|
@ -276,7 +276,7 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
<div class="flex justify-between align-middle">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh.next()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -23,10 +23,9 @@
|
|||
}
|
||||
|
||||
.primary-node-only {
|
||||
font-size: 10px;
|
||||
line-height: 13px;
|
||||
width: 14px;
|
||||
height: 15px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
<div class="flex justify-between align-middle">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh.next()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
</div>
|
||||
}
|
||||
<div class="flex justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshUserListing()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="userListingState.status === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -26,13 +26,13 @@
|
|||
<div class="flex flex-col gap-y-1">
|
||||
<div class="font-bold">{{ about.version }}</div>
|
||||
@if (about.buildTimestamp) {
|
||||
<div class="text-xs ml-2">{{ about.buildTimestamp }}</div>
|
||||
<div class="text-sm ml-2">{{ about.buildTimestamp }}</div>
|
||||
}
|
||||
@if (about.buildTag && about.buildTag !== 'HEAD') {
|
||||
<div class="text-xs ml-2">Tagged {{ about.buildTag }}</div>
|
||||
<div class="text-sm ml-2">Tagged {{ about.buildTag }}</div>
|
||||
}
|
||||
@if (about.buildRevision) {
|
||||
<div class="text-xs ml-2">From {{ about.buildRevision }} on branch {{ about.buildBranch }}</div>
|
||||
<div class="text-sm ml-2">From {{ about.buildRevision }} on branch {{ about.buildBranch }}</div>
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<h2 mat-dialog-title>{{ request.title }}</h2>
|
||||
<mat-dialog-content>
|
||||
<div class="text-sm">{{ request.message }}</div>
|
||||
<div class="text-base">{{ request.message }}</div>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button type="button" (click)="cancelClicked()" mat-button mat-dialog-close>Cancel</button>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<div class="component-context flex flex-col">
|
||||
<div class="flex gap-x-1 items-center">
|
||||
<div class="context-logo flex flex-col">
|
||||
<div class="context-logo text-3xl flex flex-col">
|
||||
<i class="icon accent-color" [class]="componentIconClass"></i>
|
||||
</div>
|
||||
<div class="flex flex-col flex-1">
|
||||
|
|
|
|||
|
|
@ -30,7 +30,9 @@
|
|||
<button class="context-menu-item pl-1 pr-1 pt-2 pb-2" cdkMenuItem [cdkMenuTriggerFor]="subMenu">
|
||||
<div class="flex gap-x-1">
|
||||
<div class="context-menu-item-img" [class]="item.clazz"></div>
|
||||
<div class="context-menu-item-text surface-contrast">{{ item.text }}</div>
|
||||
<div class="context-menu-item-text surface-contrast" [title]="item.text">
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="context-menu-group-item-img fa fa-caret-right"></div>
|
||||
</button>
|
||||
|
|
@ -46,7 +48,9 @@
|
|||
cdkMenuItem>
|
||||
<div class="flex gap-x-1">
|
||||
<div class="context-menu-item-img" [class]="item.clazz"></div>
|
||||
<div class="context-menu-item-text surface-contrast">{{ item.text }}</div>
|
||||
<div class="context-menu-item-text surface-contrast" [title]="item.text">
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
@if (item.shortcut) {
|
||||
<div class="context-menu-item-shortcut surface-contrast justify-end opacity-40">
|
||||
|
|
|
|||
|
|
@ -16,8 +16,6 @@
|
|||
*/
|
||||
|
||||
div.context-menu {
|
||||
font-size: 13px;
|
||||
width: 215px;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -38,8 +36,7 @@ div.context-menu {
|
|||
|
||||
.context-menu-item-img {
|
||||
float: left;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 14px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
|
@ -50,20 +47,17 @@ div.context-menu {
|
|||
left: 2px;
|
||||
}
|
||||
|
||||
.context-menu-item-img.icon {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.context-menu-item-text {
|
||||
margin-left: 4px;
|
||||
line-height: 16px;
|
||||
margin-right: 4px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 258px;
|
||||
}
|
||||
|
||||
.context-menu-group-item-img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-size: cover;
|
||||
font-size: 14px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@
|
|||
disableRequest.error &&
|
||||
disableRequest.error.step == SetEnableStep.StopReferencingComponents
|
||||
) {
|
||||
<div class="text-xs ml-2">
|
||||
<div class="text-sm ml-2">
|
||||
{{ disableRequest.error.error }}
|
||||
</div>
|
||||
}
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
disableRequest.error &&
|
||||
disableRequest.error.step == SetEnableStep.DisableReferencingServices
|
||||
) {
|
||||
<div class="text-xs ml-2">
|
||||
<div class="text-sm ml-2">
|
||||
{{ disableRequest.error.error }}
|
||||
</div>
|
||||
}
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
disableRequest.error &&
|
||||
disableRequest.error.step == SetEnableStep.DisableService
|
||||
) {
|
||||
<div class="text-xs ml-2">
|
||||
<div class="text-sm ml-2">
|
||||
{{ disableRequest.error.error }}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<div>
|
||||
{{ readonly ? 'Controller Service Details' : 'Edit Controller Service' }}
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
<div class="text-base">
|
||||
{{ formatType(request.controllerService) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
@if (
|
||||
enableRequest.error && enableRequest.error.step == SetEnableStep.EnableService
|
||||
) {
|
||||
<div class="text-xs ml-2">
|
||||
<div class="text-sm ml-2">
|
||||
{{ enableRequest.error.error }}
|
||||
</div>
|
||||
}
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
enableRequest.error &&
|
||||
enableRequest.error.step == SetEnableStep.EnableReferencingServices
|
||||
) {
|
||||
<div class="text-xs ml-2">
|
||||
<div class="text-sm ml-2">
|
||||
{{ enableRequest.error.error }}
|
||||
</div>
|
||||
}
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
enableRequest.error &&
|
||||
enableRequest.error.step == SetEnableStep.StartReferencingComponents
|
||||
) {
|
||||
<div class="text-xs ml-2">
|
||||
<div class="text-sm ml-2">
|
||||
{{ enableRequest.error.error }}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,8 +27,4 @@
|
|||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,10 +28,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
mat-selection-list {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@
|
|||
}
|
||||
|
||||
.selected-type-name {
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -45,8 +44,6 @@
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.25px;
|
||||
}
|
||||
|
||||
|
|
@ -55,9 +52,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
height: 50px;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.no-selected-type {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
}
|
||||
|
||||
.current-user {
|
||||
font-size: 12px;
|
||||
max-width: 250px;
|
||||
text-overflow: ellipsis;
|
||||
line-height: normal;
|
||||
|
|
@ -30,7 +29,6 @@
|
|||
}
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,8 +23,4 @@
|
|||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,8 +23,4 @@
|
|||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<h2 mat-dialog-title>{{ request.title }}</h2>
|
||||
<mat-dialog-content>
|
||||
<div class="text-sm">{{ request.message }}</div>
|
||||
<div class="text-base">{{ request.message }}</div>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button mat-dialog-close cdkFocusInitial (click)="okClicked()">Ok</button>
|
||||
|
|
|
|||
|
|
@ -25,9 +25,3 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .combo-panel {
|
||||
.option-text {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,18 +36,18 @@
|
|||
<div class="flex gap-x-1">
|
||||
@switch (result.outcome) {
|
||||
@case (Outcome.SUCCESSFUL) {
|
||||
<div class="fa fa-check success-color text-lg"></div>
|
||||
<div class="fa fa-check success-color text-xl"></div>
|
||||
}
|
||||
@case (Outcome.FAILED) {
|
||||
<div class="fa fa-times warn-color text-lg"></div>
|
||||
<div class="fa fa-times warn-color text-xl"></div>
|
||||
}
|
||||
@case (Outcome.SKIPPED) {
|
||||
<div class="fa fa-exclamation warn-color-lighter text-lg"></div>
|
||||
<div class="fa fa-exclamation warn-color-lighter text-xl"></div>
|
||||
}
|
||||
}
|
||||
<div class="flex flex-col">
|
||||
<div class="font-bold">{{ result.verificationStepName }}</div>
|
||||
<div class="verification-explanation text-xs opacity-80">{{ result.explanation }}</div>
|
||||
<div class="verification-explanation text-sm opacity-80">{{ result.explanation }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@
|
|||
</div>
|
||||
<div class="w-1/2 pl-2 flex flex-col gap-y-3">
|
||||
<div class="flex flex-col">
|
||||
<div class="event-header font-bold primary-color">
|
||||
<div class="mat-body-strong primary-color">
|
||||
Parent FlowFiles ({{ request.event.parentUuids.length }})
|
||||
</div>
|
||||
<ng-container
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
"></ng-container>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="event-header font-bold primary-color">
|
||||
<div class="mat-body-strong primary-color">
|
||||
Child FlowFiles ({{ request.event.childUuids.length }})
|
||||
</div>
|
||||
<ng-container
|
||||
|
|
@ -229,7 +229,7 @@
|
|||
<div class="dialog-tab-content">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<div class="flex justify-between">
|
||||
<div class="event-header font-bold primary-color">Attribute Values</div>
|
||||
<div class="mat-body-strong 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>
|
||||
|
|
@ -264,7 +264,7 @@
|
|||
<div class="flex flex-col gap-y-4">
|
||||
<div class="flex">
|
||||
<div class="w-1/2 pr-2">
|
||||
<div class="event-header font-bold primary-color">Input Claim</div>
|
||||
<div class="mat-body-strong primary-color">Input Claim</div>
|
||||
<div class="flex flex-col gap-y-3">
|
||||
<div>
|
||||
<div>Container</div>
|
||||
|
|
@ -330,7 +330,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="w-1/2 pl-2">
|
||||
<div class="event-header font-bold primary-color">Output Claim</div>
|
||||
<div class="mat-body-strong primary-color">Output Claim</div>
|
||||
<div class="flex flex-col gap-y-3">
|
||||
<div>
|
||||
<div>Container</div>
|
||||
|
|
@ -397,7 +397,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="event-header font-bold primary-color">Replay</div>
|
||||
<div class="mat-body-strong primary-color">Replay</div>
|
||||
<div
|
||||
*ngIf="request.event.replayAvailable; else replayNotAvailable"
|
||||
class="flex flex-col gap-y-3">
|
||||
|
|
|
|||
|
|
@ -20,10 +20,6 @@
|
|||
.provenance-event {
|
||||
@include mat.button-density(-1);
|
||||
|
||||
.event-header {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@
|
|||
<div class="flex w-full">
|
||||
<div class="flex-1">
|
||||
@if (instances.length > 0 && fieldDescriptors.length > 0) {
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refresh()">
|
||||
<i
|
||||
class="fa fa-refresh"
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<div class="flex gap-y-4">
|
||||
<div class="flex flex-col flex-1 gap-y-4">
|
||||
<section>
|
||||
<div class="section-header font-bold">
|
||||
<div class="mat-body-strong primary-color">
|
||||
Heap ({{ systemDiagnostics.heapUtilization }})
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-3">
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="section-header font-bold primary-color">Garbage Collection</div>
|
||||
<div class="mat-body-strong primary-color">Garbage Collection</div>
|
||||
@if (sortedGarbageCollections) {
|
||||
<div class="flex flex-col gap-y-3">
|
||||
@for (gc of sortedGarbageCollections; track gc) {
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
</div>
|
||||
<div class="flex flex-col flex-1 gap-y-4">
|
||||
<section>
|
||||
<div class="section-header font-bold">Non Heap</div>
|
||||
<div class="mat-body-strong primary-color">Non Heap</div>
|
||||
<div class="flex flex-col gap-y-3">
|
||||
<div class="flex flex-col">
|
||||
<div>Max</div>
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="section-header font-bold">Runtime</div>
|
||||
<div class="mat-body-strong primary-color">Runtime</div>
|
||||
<div class="flex flex-col gap-y-3">
|
||||
<div class="flex flex-col">
|
||||
<div>Uptime</div>
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<section class="flex flex-col pr-4">
|
||||
<div class="section-header font-bold">FlowFile Repository Usage</div>
|
||||
<div class="mat-body-strong primary-color">FlowFile Repository Usage</div>
|
||||
<div>
|
||||
<div class="capitalize">Usage:</div>
|
||||
<mat-progress-bar
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="flex flex-col pr-4">
|
||||
<div class="section-header font-bold">Content Repository Usage</div>
|
||||
<div class="mat-body-strong primary-color">Content Repository Usage</div>
|
||||
<div class="repository-storage-container flex flex-col gap-y-2">
|
||||
@for (repo of systemDiagnostics.contentRepositoryStorageUsage; track repo) {
|
||||
<div>
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="flex flex-col pr-4">
|
||||
<div class="section-header font-bold">Provenance Repository Usage</div>
|
||||
<div class="mat-body-strong primary-color">Provenance Repository Usage</div>
|
||||
<div class="repository-storage-container flex flex-col gap-y-2">
|
||||
@for (repo of systemDiagnostics.provenanceRepositoryStorageUsage; track repo) {
|
||||
<div>
|
||||
|
|
@ -212,7 +212,7 @@
|
|||
<div class="dialog-tab-content w-full">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<section>
|
||||
<div class="section-header font-bold">NiFi</div>
|
||||
<div class="mat-body-strong primary-color">NiFi</div>
|
||||
<dl class="setting-attributes-list">
|
||||
<dt class="font-bold">NiFi Version</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.niFiVersion }}</dd>
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
</dl>
|
||||
</section>
|
||||
<section>
|
||||
<div class="section-header font-bold">Java</div>
|
||||
<div class="mat-body-strong primary-color">Java</div>
|
||||
<dl class="setting-attributes-list">
|
||||
<dt class="font-bold">Version</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.javaVersion }}</dd>
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
</dl>
|
||||
</section>
|
||||
<section>
|
||||
<div class="section-header font-bold">Operating System</div>
|
||||
<div class="mat-body-strong primary-color">Operating System</div>
|
||||
<dl class="setting-attributes-list">
|
||||
<dt class="font-bold">Name</dt>
|
||||
<dd>{{ systemDiagnostics.versionInfo.osName }}</dd>
|
||||
|
|
@ -253,7 +253,7 @@
|
|||
</mat-tab-group>
|
||||
<mat-dialog-actions>
|
||||
<div class="flex flex-1 justify-between">
|
||||
<div class="refresh-container flex items-center gap-x-2">
|
||||
<div class="text-sm flex items-center gap-x-2">
|
||||
<button mat-icon-button color="primary" (click)="refreshSystemDiagnostics()">
|
||||
<i class="fa fa-refresh" [class.fa-spin]="(status$ | async) === 'loading'"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -20,10 +20,6 @@
|
|||
.system-diagnostics {
|
||||
@include mat.button-density(-1);
|
||||
|
||||
.section-header {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.setting-attributes-list {
|
||||
dt {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -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 font-bold">{{ elFunction.name }}</div>
|
||||
<div class="el-name text-lg font-bold">{{ elFunction.name }}</div>
|
||||
@if (hasDescription(elFunction)) {
|
||||
<div>{{ elFunction.description }}</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
|
||||
.el-name {
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 font-bold">{{ parameter.name }}</div>
|
||||
<div class="parameter-name text-lg font-bold">{{ parameter.name }}</div>
|
||||
@if (hasDescription(parameter)) {
|
||||
<div>{{ parameter.description }}</div>
|
||||
} @else {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
|
||||
.parameter-name {
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<h2 mat-dialog-title data-qa="yes-no-title">{{ request.title }}</h2>
|
||||
<mat-dialog-content>
|
||||
<div class="text-sm" data-qa="yes-no-message">{{ request.message }}</div>
|
||||
<div class="text-base" data-qa="yes-no-message">{{ request.message }}</div>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button mat-dialog-close (click)="noClicked()">No</button>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
border-width: 1px;
|
||||
font-size: 13px;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
|
||||
|
|
@ -52,10 +51,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.property-editor {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.blank,
|
||||
.empty,
|
||||
.unset,
|
||||
|
|
@ -68,11 +63,6 @@
|
|||
.context-logo {
|
||||
text-align: start;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
|
||||
.icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.context-name {
|
||||
|
|
@ -95,11 +85,6 @@
|
|||
line-height: 12px;
|
||||
}
|
||||
|
||||
.refresh-container {
|
||||
line-height: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -182,7 +167,6 @@
|
|||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
font-size: 13px !important;
|
||||
z-index: 1000 !important;
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,20 +107,20 @@ $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: 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)
|
||||
// All `<h2>` native elements or use: `.text-xl font-bold`, `.mat-h2`, or `.mat-headline-6`
|
||||
$headline-6: mat.define-typography-level(18px, 28px, 700),
|
||||
// All `<h3>` native elements or use: `.text-2xl font-bold`, `.mat-h3`, or `.mat-subtitle-1`
|
||||
$subtitle-1: mat.define-typography-level(20px, 28px, 700),
|
||||
// All <th> native elements or use: `.mat-body-strong` or `.mat-subtitle-2`
|
||||
$subtitle-2: mat.define-typography-level(14px, 20px, 700),
|
||||
// All `<h4>` native elements or use: `.text-base`, `.mat-h4`, or `.mat-body-1`
|
||||
$body-1: mat.define-typography-level(14px, 20px, 400),
|
||||
// Any body text or use: `.mat-body` or `.mat-body-2`
|
||||
$body-2: mat.define-typography-level(14px, 20px, 400),
|
||||
// Smaller body and hint text like <mat-error> or <mat-hint> or use: `.text-sm`, `.mat-small`, or`.mat-caption`
|
||||
$caption: mat.define-typography-level(12px, 16px, 400, $letter-spacing: 0.4px),
|
||||
// Buttons and anchors.
|
||||
$button: mat.define-typography-level(14px, 20px, 400)
|
||||
);
|
||||
|
||||
@include mat.typography-hierarchy($typography-config);
|
||||
|
|
|
|||
|
|
@ -22,7 +22,69 @@ const { join } = require('path');
|
|||
module.exports = {
|
||||
content: [join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)],
|
||||
theme: {
|
||||
extend: {}
|
||||
extend: {
|
||||
fontFamily: {
|
||||
roboto: ['Roboto']
|
||||
},
|
||||
fontSize: {
|
||||
xs: [
|
||||
'10px',
|
||||
{
|
||||
lineHeight: '14px',
|
||||
letterSpacing: '0.4px',
|
||||
fontWeight: '400'
|
||||
}
|
||||
],
|
||||
sm: [
|
||||
'12px',
|
||||
{
|
||||
lineHeight: '16px',
|
||||
letterSpacing: '0.4px',
|
||||
fontWeight: '400'
|
||||
}
|
||||
],
|
||||
base: [
|
||||
'14px',
|
||||
{
|
||||
lineHeight: '20px',
|
||||
letterSpacing: 'normal',
|
||||
fontWeight: '400'
|
||||
}
|
||||
],
|
||||
lg: [
|
||||
'16px',
|
||||
{
|
||||
lineHeight: '24px',
|
||||
letterSpacing: 'normal',
|
||||
fontWeight: '400'
|
||||
}
|
||||
],
|
||||
xl: [
|
||||
'18px',
|
||||
{
|
||||
lineHeight: '28px',
|
||||
letterSpacing: 'normal',
|
||||
fontWeight: '400'
|
||||
}
|
||||
],
|
||||
'2xl': [
|
||||
'20px',
|
||||
{
|
||||
lineHeight: '28px',
|
||||
letterSpacing: 'normal',
|
||||
fontWeight: '400'
|
||||
}
|
||||
],
|
||||
'3xl': [
|
||||
'32px',
|
||||
{
|
||||
lineHeight: '40px',
|
||||
letterSpacing: 'normal',
|
||||
fontWeight: '400'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue