Skip to content

Commit

Permalink
revert toolbar refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@jenny-s51
jenny-s51 committed Aug 6, 2024
1 parent 861398f commit 2770525
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 110 deletions.
126 changes: 71 additions & 55 deletions packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import {
Button,
Flex,
FlexItem,
MenuToggle,
MenuToggleElement,
Select,
Expand Down Expand Up @@ -225,65 +227,79 @@ const OptionsContextBar: React.FC = observer(() => {
};

return (
<>
<ToolbarItem variant="label">Nodes:</ToolbarItem>
<Flex>
<ToolbarItem>
<TextInput
aria-label="nodes"
type="number"
value={numNodes || ''}
onChange={(_event, val: string) =>
val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null)
}
/>
</ToolbarItem>
<ToolbarItem variant="label">Edges:</ToolbarItem>
<ToolbarItem>
<TextInput
aria-label="edges"
type="number"
value={numEdges === null ? '' : numEdges}
onChange={(_event, val: string) =>
val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null)
}
/>
</ToolbarItem>
<ToolbarItem variant="label">Groups:</ToolbarItem>
<ToolbarItem>
<TextInput
aria-label="groups"
type="number"
value={numGroups === null ? '' : numGroups}
onChange={(_event, val: string) =>
val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null)
}
/>
</ToolbarItem>
<ToolbarItem variant="label">Nesting Depth:</ToolbarItem>
<ToolbarItem>
<TextInput
aria-label="nesting depth"
type="number"
value={nestedLevel === null ? '' : nestedLevel}
onChange={(_event, val: string) =>
val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null)
}
/>
<ToolbarItem>
<Button
variant="link"
isDisabled={numNodes === undefined || numNodes < 1 || numEdges === undefined || numGroups === undefined}
onClick={() => options.setCreationCounts({ numNodes, numEdges, numGroups, nestedLevel })}
>
Apply
</Button>
</ToolbarItem>
<Flex flexWrap={{ default: 'wrap' }} gap={{ default: 'gapMd' }}>
<FlexItem>
<Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
<span>Nodes:</span>
<TextInput
aria-label="nodes"
type="number"
value={numNodes || ''}
onChange={(_event, val: string) =>
val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null)
}
/>
</Flex>
</FlexItem>
<FlexItem>
<Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
<span>Edges:</span>
<TextInput
aria-label="edges"
type="number"
value={numEdges === null ? '' : numEdges}
onChange={(_event, val: string) =>
val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null)
}
/>
</Flex>
</FlexItem>
<FlexItem>
<Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
<span>Groups:</span>
<TextInput
aria-label="groups"
type="number"
value={numGroups === null ? '' : numGroups}
onChange={(_event, val: string) =>
val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null)
}
/>
</Flex>
</FlexItem>
<FlexItem>
<Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
<span>Nesting Depth:</span>
<TextInput
aria-label="nesting depth"
type="number"
value={nestedLevel === null ? '' : nestedLevel}
onChange={(_event, val: string) =>
val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null)
}
/>
</Flex>
</FlexItem>
<FlexItem>
<Button
variant="link"
isDisabled={numNodes === undefined || numNodes < 1 || numEdges === undefined || numGroups === undefined}
onClick={() => options.setCreationCounts({ numNodes, numEdges, numGroups, nestedLevel })}
>
Apply
</Button>
</FlexItem>
</Flex>
</ToolbarItem>
<ToolbarItem>
{renderNodeOptionsDropdown()}
{renderEdgeOptionsDropdown()}
<Flex gap={{ default: 'gapMd' }}>
{renderNodeOptionsDropdown()}
{renderEdgeOptionsDropdown()}
</Flex>
</ToolbarItem>
</>
</Flex>
);
});

Expand Down
120 changes: 65 additions & 55 deletions packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {
Dropdown,
DropdownItem,
DropdownList,
Flex,
FlexItem,
MenuToggle,
MenuToggleElement,
TextInput,
Expand All @@ -26,9 +28,11 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
};

const layoutDropdown = (
<>
<ToolbarItem variant="label">Layout:</ToolbarItem>
<ToolbarItem>
<Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
<FlexItem>
<label className="pf-v6-u-display-inline-block pf-v6-u-mr-md pf-v6-u-mt-sm">Layout:</label>
</FlexItem>
<FlexItem>
<Dropdown
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle ref={toggleRef} onClick={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>
Expand Down Expand Up @@ -65,8 +69,8 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
</DropdownItem>
</DropdownList>
</Dropdown>
</ToolbarItem>
</>
</FlexItem>
</Flex>
);

const saveModel = () => {
Expand Down Expand Up @@ -130,60 +134,66 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
};

return (
<>
<ToolbarItem>{layoutDropdown}</ToolbarItem>
<ToolbarItem>
<Tooltip content="Layout info saved" trigger="manual" isVisible={modelSaved}>
<Button variant="secondary" onClick={saveModel}>
Save Layout Info
<Flex flexWrap={{ default: 'wrap' }} gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}>
<Flex>
<ToolbarItem>{layoutDropdown}</ToolbarItem>
<ToolbarItem>
<Tooltip content="Layout info saved" trigger="manual" isVisible={modelSaved}>
<Button variant="secondary" onClick={saveModel}>
Save Layout Info
</Button>
</Tooltip>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary" onClick={restoreLayout}>
Restore Layout Info
</Button>
</Tooltip>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary" onClick={restoreLayout}>
Restore Layout Info
</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary" onClick={addNode}>
Add Node
</Button>
</ToolbarItem>
<ToolbarItem variant="label"> Medium Scale:</ToolbarItem>
<ToolbarItem>
<TextInput
aria-labelledby="med-scale"
max={1.0}
min={options.lowScale}
step={0.01}
value={options.medScale}
type="number"
onChange={(_event, val) => {
const newValue = parseFloat(val);
if (!Number.isNaN(newValue) && newValue > options.lowScale && newValue >= 0.01 && newValue <= 1.0) {
options.setMedScale(parseFloat(val));
}
}}
/>
<ToolbarItem variant="label">Low Scale:</ToolbarItem>
</ToolbarItem>
<ToolbarItem>
<TextInput
aria-labelledby="low-scale"
max={options.medScale}
min={0.01}
step={0.01}
value={options.lowScale}
type="number"
onChange={(_event, val) => {
const newValue = parseFloat(val);
if (!Number.isNaN(newValue) && newValue < options.medScale && newValue >= 0.01 && newValue <= 1.0) {
options.setLowScale(parseFloat(val));
}
}}
/>
<Button variant="secondary" onClick={addNode}>
Add Node
</Button>
</ToolbarItem>
</Flex>
<ToolbarItem>
<Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapMd' }}>
<Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
<span id="med-scale">Medium Scale:</span>
<TextInput
aria-labelledby="med-scale"
max={1.0}
min={options.lowScale}
step={0.01}
value={options.medScale}
type="number"
onChange={(_event, val) => {
const newValue = parseFloat(val);
if (!Number.isNaN(newValue) && newValue > options.lowScale && newValue >= 0.01 && newValue <= 1.0) {
options.setMedScale(parseFloat(val));
}
}}
/>
</Flex>
<Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
<span id="low-scale">Low Scale:</span>
<TextInput
aria-labelledby="low-scale"
max={options.medScale}
min={0.01}
step={0.01}
value={options.lowScale}
type="number"
onChange={(_event, val) => {
const newValue = parseFloat(val);
if (!Number.isNaN(newValue) && newValue < options.medScale && newValue >= 0.01 && newValue <= 1.0) {
options.setLowScale(parseFloat(val));
}
}}
/>
</Flex>
</Flex>
</ToolbarItem>
</>
</Flex>
);
});

Expand Down

0 comments on commit 2770525

Please sign in to comment.