Apache/nifi
1
0
Fork 0
mirror of https://github.com/apache/nifi.git synced 2025-03-04 00:19:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

[NIFI-13153] use ellipsis for long component names in dialogs (#8802)

Browse Source 
* [NIFI-13153] use ellipsis for long component names in dialogs

* use basis-1/2

* overflow-hidden

* remove basis-1/2 and use w-1/2 with padding

This closes #8802
This commit is contained in:
Scott Aslan 2024-05-10 13:40:43 -04:00 committed by GitHub
parent 5f9f5247d6
commit 94a968766f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,7 +23,7 @@
<mat-tab label="Details"> <mat-tab label="Details">
<mat-dialog-content> <mat-dialog-content>
<div class="dialog-tab-content flex gap-x-4"> <div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-1/2 pr-2">
@switch (source.componentType) { @switch (source.componentType) {
@case (ComponentType.Processor) { @case (ComponentType.Processor) {
<source-processor <source-processor
@ -52,7 +52,7 @@
} }
} }
</div> </div>
<div class="w-full"> <div class="w-1/2 pl-2">
@switch (destination.componentType) { @switch (destination.componentType) {
@case (ComponentType.Processor) { @case (ComponentType.Processor) {
<destination-processor <destination-processor

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

@ -22,6 +22,8 @@
</div> </div>
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>Within Group</div> <div>Within Group</div>
<div class="accent-color font-medium">{{ groupName }}</div> <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div> </div>
</div> </div>

8
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-output-port/destination-output-port.component.html
View File

@ -18,10 +18,14 @@
<div class="flex flex-col gap-y-4"> <div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>To Output</div> <div>To Output</div>
<div class="accent-color font-medium">{{ name }}</div> <div [title]="name" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ name }}
</div>
</div> </div>
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>Within Group</div> <div>Within Group</div>
<div class="accent-color font-medium">{{ groupName }}</div> <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div> </div>
</div> </div>

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

@ -50,6 +50,8 @@
} }
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>Within Group</div> <div>Within Group</div>
<div class="accent-color font-medium">{{ groupName }}</div> <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div> </div>
</div> </div>

10
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-processor/destination-processor.component.html
View File

@ -18,10 +18,16 @@
<div class="flex flex-col gap-y-4"> <div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>To Processor</div> <div>To Processor</div>
<div class="accent-color font-medium">{{ processorName }}</div> <div
[title]="processorName"
class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ processorName }}
</div>
</div> </div>
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>Within Group</div> <div>Within Group</div>
<div class="accent-color font-medium">{{ groupName }}</div> <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div> </div>
</div> </div>

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

@ -49,6 +49,8 @@
} }
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>Within Group</div> <div>Within Group</div>
<div class="accent-color font-medium">{{ groupName }}</div> <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div> </div>
</div> </div>

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

@ -25,7 +25,7 @@
<mat-dialog-content> <mat-dialog-content>
@if (breadcrumbs$ | async; as breadcrumbs) { @if (breadcrumbs$ | async; as breadcrumbs) {
<div class="dialog-tab-content flex gap-x-4"> <div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-1/2 pr-2">
@switch (sourceType) { @switch (sourceType) {
@case (ComponentType.Processor) { @case (ComponentType.Processor) {
<source-processor <source-processor
@ -56,7 +56,7 @@
} }
} }
</div> </div>
<div class="w-full"> <div class="w-1/2 pl-2">
@switch (destinationType) { @switch (destinationType) {
@case (ComponentType.Processor) { @case (ComponentType.Processor) {
<destination-processor <destination-processor

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

@ -22,6 +22,8 @@
</div> </div>
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>Within Group</div> <div>Within Group</div>
<div class="accent-color font-medium">{{ groupName }}</div> <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div> </div>
</div> </div>

8
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-input-port/source-input-port.component.html
View File

@ -18,10 +18,14 @@
<div class="flex flex-col gap-y-4"> <div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>From Input</div> <div>From Input</div>
<div class="accent-color font-medium">{{ name }}</div> <div [title]="name" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ name }}
</div>
</div> </div>
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>Within Group</div> <div>Within Group</div>
<div class="accent-color font-medium">{{ groupName }}</div> <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div> </div>
</div> </div>

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

@ -50,6 +50,8 @@
} }
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>Within Group</div> <div>Within Group</div>
<div class="accent-color font-medium">{{ groupName }}</div> <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div> </div>
</div> </div>

8
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-processor/source-processor.component.html
View File

@ -18,11 +18,15 @@
<div class="flex flex-col gap-y-4"> <div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>From Processor</div> <div>From Processor</div>
<div class="accent-color font-medium">{{ name }}</div> <div [title]="name" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ name }}
</div>
</div> </div>
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>Within Group</div> <div>Within Group</div>
<div class="accent-color font-medium">{{ groupName }}</div> <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div>Relationships</div> <div>Relationships</div>

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

@ -49,6 +49,8 @@
} }
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>Within Group</div> <div>Within Group</div>
<div class="accent-color font-medium">{{ groupName }}</div> <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div> </div>
</div> </div>

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

@ -41,7 +41,9 @@
@if (detail.key && detail.value) { @if (detail.key && detail.value) {
<div class="flex flex-col"> <div class="flex flex-col">
<div>{{ detail.key }}</div> <div>{{ detail.key }}</div>
<div class="accent-color font-medium"> <div
[title]="detail.value"
class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ detail.value }} {{ detail.value }}
</div> </div>
</div> </div>