mirror of
https://github.com/openziti/zrok.git
synced 2025-06-21 02:07:44 +02:00
initial layout and design tweaks (#234)
This commit is contained in:
parent
0be4bbc513
commit
f0daa9371e
@ -1,4 +1,4 @@
|
|||||||
import {Container, Nav, Navbar, NavDropdown} from "react-bootstrap";
|
import {Col, Container, Nav, Navbar, NavDropdown, Row} from "react-bootstrap";
|
||||||
import {useEffect, useState} from "react";
|
import {useEffect, useState} from "react";
|
||||||
import Visualizer from "./visualizer/Visualizer";
|
import Visualizer from "./visualizer/Visualizer";
|
||||||
import Enable from "./modals/Enable";
|
import Enable from "./modals/Enable";
|
||||||
@ -64,14 +64,22 @@ const Console = (props) => {
|
|||||||
</Navbar.Collapse>
|
</Navbar.Collapse>
|
||||||
</Container>
|
</Container>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
<Visualizer
|
<Container fluid={"xl"}>
|
||||||
user={props.user}
|
<Row id={"controls-row"}>
|
||||||
overview={overview}
|
<Col>
|
||||||
defaultSelection={defaultSelection}
|
<Visualizer
|
||||||
selection={selection}
|
user={props.user}
|
||||||
setSelection={setSelection}
|
overview={overview}
|
||||||
/>
|
defaultSelection={defaultSelection}
|
||||||
<Detail user={props.user} selection={selection} />
|
selection={selection}
|
||||||
|
setSelection={setSelection}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Detail user={props.user} selection={selection} />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
<Enable show={showEnableModal} onHide={closeEnableModal} token={props.user.token} />
|
<Enable show={showEnableModal} onHide={closeEnableModal} token={props.user.token} />
|
||||||
<Version show={showVersionModal} onHide={closeVersionModal} />
|
<Version show={showVersionModal} onHide={closeVersionModal} />
|
||||||
</Container>
|
</Container>
|
||||||
|
@ -16,20 +16,8 @@ const Network = (props) => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const paintNode = (node, ctx) => {
|
const paintNode = (node, ctx) => {
|
||||||
let nodeColor = "#636363";
|
let nodeColor = node.selected ? "#04adef" : "#9BF316";
|
||||||
let textColor = "#ccc";
|
let textColor = node.selected ? "white" : "black";
|
||||||
switch(node.type) {
|
|
||||||
case "environment":
|
|
||||||
nodeColor = "#444";
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "share": // share
|
|
||||||
nodeColor = "#291A66";
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
//
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.textBaseline = "middle";
|
ctx.textBaseline = "middle";
|
||||||
ctx.textAlign = "center";
|
ctx.textAlign = "center";
|
||||||
@ -41,16 +29,6 @@ const Network = (props) => {
|
|||||||
roundRect(ctx, node.x - (nodeWidth / 2), node.y - 7, nodeWidth, 14, 1.25);
|
roundRect(ctx, node.x - (nodeWidth / 2), node.y - 7, nodeWidth, 14, 1.25);
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
|
|
||||||
if(node.selected) {
|
|
||||||
ctx.strokeStyle = "#c4bdde";
|
|
||||||
ctx.stroke();
|
|
||||||
} else {
|
|
||||||
if(node.type === "share") {
|
|
||||||
ctx.strokeStyle = "#433482";
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.fillStyle = textColor;
|
ctx.fillStyle = textColor;
|
||||||
ctx.fillText(node.label, node.x, node.y);
|
ctx.fillText(node.label, node.x, node.y);
|
||||||
}
|
}
|
||||||
@ -64,12 +42,12 @@ const Network = (props) => {
|
|||||||
ref={targetRef}
|
ref={targetRef}
|
||||||
graphData={props.networkGraph}
|
graphData={props.networkGraph}
|
||||||
width={props.size.width}
|
width={props.size.width}
|
||||||
height={500}
|
height={800}
|
||||||
onNodeClick={nodeClicked}
|
onNodeClick={nodeClicked}
|
||||||
linkOpacity={.75}
|
linkOpacity={.75}
|
||||||
linkWidth={1.5}
|
linkWidth={1.5}
|
||||||
nodeCanvasObject={paintNode}
|
nodeCanvasObject={paintNode}
|
||||||
backgroundColor={"#3b2693"}
|
backgroundColor={"linear-gradient(180deg, #0E0238 0%, #231069 100%);"}
|
||||||
cooldownTicks={300}
|
cooldownTicks={300}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
@ -40,7 +40,7 @@ export const mergeGraph = (oldGraph, user, newOverview) => {
|
|||||||
newGraph.links.push({
|
newGraph.links.push({
|
||||||
target: accountNode.id,
|
target: accountNode.id,
|
||||||
source: envNode.id,
|
source: envNode.id,
|
||||||
color: "#777"
|
color: "#9BF316"
|
||||||
});
|
});
|
||||||
if(env.shares) {
|
if(env.shares) {
|
||||||
env.shares.forEach(shr => {
|
env.shares.forEach(shr => {
|
||||||
@ -59,7 +59,7 @@ export const mergeGraph = (oldGraph, user, newOverview) => {
|
|||||||
newGraph.links.push({
|
newGraph.links.push({
|
||||||
target: envNode.id,
|
target: envNode.id,
|
||||||
source: shrNode.id,
|
source: shrNode.id,
|
||||||
color: "#777"
|
color: "#9BF316"
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -25,7 +25,7 @@ code, pre {
|
|||||||
|
|
||||||
.visualizer-container {
|
.visualizer-container {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #3b2693;
|
background: linear-gradient(180deg, #0E0238 0%, #231069 100%);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
@ -120,4 +120,13 @@ code, pre {
|
|||||||
|
|
||||||
#zrok-tou {
|
#zrok-tou {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls-row {
|
||||||
|
margin-left: -30px;
|
||||||
|
margin-right: -30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar {
|
||||||
|
background: linear-gradient(180deg, #0E0238 0%, #231069 100%);
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user