extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-01-05 05:30:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

styled minimap; better secret placeholder (#724)

Browse Source
This commit is contained in:
Michael Quigley 2024-12-20 11:56:00 -05:00
parent bc2e07f3b8
commit afeb8605ea
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui100/src/SecretToggle.tsx
View File

@ -12,6 +12,14 @@ const SecretToggle = ({ secret }: SecretToggleProps) => {
const toggle = () => setShowSecret(!showSecret); const toggle = () => setShowSecret(!showSecret);
const secretString = (s): string => {
let out = "";
for(let i = 0; i < s.length; i++) {
out += " \u2022";
}
return out;
}
if(showSecret) { if(showSecret) {
return ( return (
<Grid2 container sx={{ flexGrow: 1 }} alignItems="center"> <Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
@ -27,7 +35,7 @@ const SecretToggle = ({ secret }: SecretToggleProps) => {
return ( return (
<Grid2 container sx={{ flexGrow: 1 }} alignItems="center"> <Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
<Grid2 display="flex" justifyContent="left"> <Grid2 display="flex" justifyContent="left">
<span>XXXXXXXX</span> <span>{secretString(secret)}</span>
</Grid2> </Grid2>
<Grid2 display="flex" justifyContent="right" sx={{ flexGrow: 1 }}> <Grid2 display="flex" justifyContent="right" sx={{ flexGrow: 1 }}>
<ShowIcon onClick={toggle} sx={{ ml: 1 }} /> <ShowIcon onClick={toggle} sx={{ ml: 1 }} />

13
ui100/src/Visualizer.tsx
View File

@ -64,6 +64,13 @@ const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
} as VisualOverview } as VisualOverview
} }
const nodeColor = (node) => {
if(node.selected) {
return "#9bf316";
}
return "#241775";
}
useEffect(() => { useEffect(() => {
if(vov) { if(vov) {
let laidOut = layout(vov.nodes, vov.edges); let laidOut = layout(vov.nodes, vov.edges);
@ -85,7 +92,11 @@ const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
> >
<Background /> <Background />
<Controls position="bottom-left" orientation="horizontal" showInteractive={false} /> <Controls position="bottom-left" orientation="horizontal" showInteractive={false} />
<MiniMap /> <MiniMap
nodeColor={nodeColor}
maskColor="rgb(36, 23, 117, 0.5)"
pannable={true}
/>
</ReactFlow> </ReactFlow>
); );
} }