forked from KaotoIO/kaoto
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(Canvas): Improve look and feel This commit removes the usage of `DefaultNode` and replaces it with a custom implementation. It makes the nodes wider, and removes the border to make more room for the text. It also adds a floating mini toolbar, aka contextual palette, when hovering over the node. feat(Canvas): Use CustomNode for collapsed groups * hover over toolbar working * centered toolbar for containers * removed phantom-rect * add disable icon within boundaries * add exclamation mark before the label * red-color the exclamation mark and the label * decrease node width * add label background to hide the edge
- Loading branch information
Showing
45 changed files
with
1,337 additions
and
968 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
packages/ui/src/components/Visualization/Canvas/StepToolbar/StepToolbar.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| .step-toolbar { | ||
| --custom-node-BorderColor: var(--pf-v5-global--BorderColor--100); | ||
| --custom-node-BackgroundColor: var(--pf-v5-global--BackgroundColor--100); | ||
| --custom-node-BorderRadius: 10px; | ||
| --custom-node-Shadow: var(--pf-v5-global--BoxShadow--md); | ||
|
|
||
| display: inline-block; | ||
| position: relative; | ||
| border: 2px solid var(--custom-node-BorderColor); | ||
| border-radius: var(--custom-node-BorderRadius); | ||
| box-shadow: var(--custom-node-Shadow); | ||
| background-color: var(--custom-node-BackgroundColor); | ||
| padding: var(--pf-v5-global--spacer--sm); | ||
|
|
||
| &__button { | ||
| margin-right: 1rem; | ||
| } | ||
|
|
||
| &__button:last-of-type { | ||
| margin-right: 0; | ||
| } | ||
| } |
172 changes: 172 additions & 0 deletions
172
packages/ui/src/components/Visualization/Canvas/StepToolbar/StepToolbar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| import { Button } from '@patternfly/react-core'; | ||
| import { | ||
| BanIcon, | ||
| CheckIcon, | ||
| CodeBranchIcon, | ||
| CompressArrowsAltIcon, | ||
| ExpandArrowsAltIcon, | ||
| PlusIcon, | ||
| PowerOffIcon, | ||
| SyncAltIcon, | ||
| TrashIcon, | ||
| } from '@patternfly/react-icons'; | ||
| import clsx from 'clsx'; | ||
| import { FunctionComponent } from 'react'; | ||
| import { AddStepMode, IDataTestID, IVisualizationNode } from '../../../../models'; | ||
| import { useDeleteGroup } from '../../Custom/hooks/delete-group.hook'; | ||
| import { useDeleteStep } from '../../Custom/hooks/delete-step.hook'; | ||
| import { useDisableStep } from '../../Custom/hooks/disable-step.hook'; | ||
| import { useEnableAllSteps } from '../../Custom/hooks/enable-all-steps.hook'; | ||
| import { useInsertStep } from '../../Custom/hooks/insert-step.hook'; | ||
| import { useReplaceStep } from '../../Custom/hooks/replace-step.hook'; | ||
| import './StepToolbar.scss'; | ||
|
|
||
| interface IStepToolbar extends IDataTestID { | ||
| vizNode: IVisualizationNode; | ||
| className?: string; | ||
| isCollapsed?: boolean; | ||
| /** Toggle node collapse / expand */ | ||
| onCollapseToggle?: () => void; | ||
| } | ||
|
|
||
| export const StepToolbar: FunctionComponent<IStepToolbar> = ({ | ||
| vizNode, | ||
| className, | ||
| isCollapsed = false, | ||
| onCollapseToggle, | ||
| 'data-testid': dataTestId, | ||
| }) => { | ||
| const { canHaveChildren, canHaveSpecialChildren, canBeDisabled, canReplaceStep, canRemoveStep, canRemoveFlow } = | ||
| vizNode.getNodeInteraction(); | ||
| const { onInsertStep } = useInsertStep(vizNode); | ||
| const { onInsertStep: onInsertSpecial } = useInsertStep(vizNode, AddStepMode.InsertSpecialChildStep); | ||
| const { onToggleDisableNode, isDisabled } = useDisableStep(vizNode); | ||
| const { areMultipleStepsDisabled, onEnableAllSteps } = useEnableAllSteps(); | ||
| const { onReplaceNode } = useReplaceStep(vizNode); | ||
| const { onDeleteStep } = useDeleteStep(vizNode); | ||
| const { onDeleteGroup } = useDeleteGroup(vizNode); | ||
|
|
||
| return ( | ||
| <div className={clsx(className, 'step-toolbar')} data-testid={dataTestId}> | ||
| {canHaveChildren && ( | ||
| <Button | ||
| className="step-toolbar__button" | ||
| data-testid="step-toolbar-button-add" | ||
| variant="secondary" | ||
| title="Add step" | ||
| onClick={(event) => { | ||
| onInsertStep(); | ||
| event.stopPropagation(); | ||
| }} | ||
| > | ||
| <PlusIcon /> | ||
| </Button> | ||
| )} | ||
|
|
||
| {canHaveSpecialChildren && ( | ||
| <Button | ||
| className="step-toolbar__button" | ||
| data-testid="step-toolbar-button-add-special" | ||
| variant="secondary" | ||
| title="Add branch" | ||
| onClick={(event) => { | ||
| onInsertSpecial(); | ||
| event.stopPropagation(); | ||
| }} | ||
| > | ||
| <CodeBranchIcon /> | ||
| </Button> | ||
| )} | ||
|
|
||
| {canBeDisabled && ( | ||
| <Button | ||
| className="step-toolbar__button" | ||
| data-testid="step-toolbar-button-disable" | ||
| variant="secondary" | ||
| title={isDisabled ? 'Enable step' : 'Disable step'} | ||
| onClick={(event) => { | ||
| onToggleDisableNode(); | ||
| event.stopPropagation(); | ||
| }} | ||
| > | ||
| {isDisabled ? <CheckIcon /> : <BanIcon />} | ||
| </Button> | ||
| )} | ||
|
|
||
| {areMultipleStepsDisabled && ( | ||
| <Button | ||
| className="step-toolbar__button" | ||
| data-testid="step-toolbar-button-enable-all" | ||
| variant="secondary" | ||
| title="Enable all" | ||
| onClick={(event) => { | ||
| onEnableAllSteps(); | ||
| event.stopPropagation(); | ||
| }} | ||
| > | ||
| <PowerOffIcon /> | ||
| </Button> | ||
| )} | ||
|
|
||
| {canReplaceStep && ( | ||
| <Button | ||
| className="step-toolbar__button" | ||
| data-testid="step-toolbar-button-replace" | ||
| variant="secondary" | ||
| title="Replace step" | ||
| onClick={(event) => { | ||
| onReplaceNode(); | ||
| event.stopPropagation(); | ||
| }} | ||
| > | ||
| <SyncAltIcon /> | ||
| </Button> | ||
| )} | ||
|
|
||
| {onCollapseToggle && ( | ||
| <Button | ||
| className="step-toolbar__button" | ||
| data-testid="step-toolbar-button-collapse" | ||
| variant="secondary" | ||
| title={isCollapsed ? 'Expand step' : 'Collapse step'} | ||
| onClick={(event) => { | ||
| onCollapseToggle(); | ||
| event.stopPropagation(); | ||
| }} | ||
| > | ||
| {isCollapsed ? <ExpandArrowsAltIcon /> : <CompressArrowsAltIcon />} | ||
| </Button> | ||
| )} | ||
|
|
||
| {canRemoveStep && ( | ||
| <Button | ||
| className="step-toolbar__button" | ||
| data-testid="step-toolbar-button-delete" | ||
| variant="danger" | ||
| title="Delete step" | ||
| onClick={(event) => { | ||
| onDeleteStep(); | ||
| event.stopPropagation(); | ||
| }} | ||
| > | ||
| <TrashIcon /> | ||
| </Button> | ||
| )} | ||
|
|
||
| {canRemoveFlow && ( | ||
| <Button | ||
| className="step-toolbar__button" | ||
| data-testid="step-toolbar-button-delete-group" | ||
| variant="danger" | ||
| title="Delete group" | ||
| onClick={(event) => { | ||
| onDeleteGroup(); | ||
| event.stopPropagation(); | ||
| }} | ||
| > | ||
| <TrashIcon /> | ||
| </Button> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.