diff --git a/assets/CC-Logo.png b/assets/CC-Logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b1ecd80b8c501654474f0be838d4e0ecfa25fe2
Binary files /dev/null and b/assets/CC-Logo.png differ
diff --git a/src/functions/codeEditor.js b/src/functions/codeEditor.js
index a9efc9383ae21ff12a5919873e549e2a1f9671e4..d1291c9353ff6a814fc02a7d091f5ed9b926798a 100644
--- a/src/functions/codeEditor.js
+++ b/src/functions/codeEditor.js
@@ -125,14 +125,16 @@ export const codeEditorElement = (instance) => {
const submitButton = document.createElement("button");
submitButton.appendChild(document.createTextNode("SUBMIT"));
- submitButton.classList.add("submitButton");
+ submitButton.classList.add("customButton");
+ submitButton.id = "submitButton";
submitButton.addEventListener("click", () =>
handleSubmit(editorContainer, editor.state.doc.toString())
);
const cancelButton = document.createElement("button");
cancelButton.appendChild(document.createTextNode("CANCEL"));
- cancelButton.classList.add("cancelButton");
+ cancelButton.classList.add("customButton");
+ cancelButton.id = "cancelButton";
cancelButton.addEventListener("click", () => handleCancel(editorContainer));
buttonContainer.appendChild(cancelButton);
diff --git a/src/functions/endpoints.js b/src/functions/endpoints.js
index f3faa9fced0aa82f625b3a8dd6f8a306194a55a4..594136937fda8b09376ccf2afe771d1c3add7b76 100644
--- a/src/functions/endpoints.js
+++ b/src/functions/endpoints.js
@@ -1,27 +1,31 @@
const endpointLeft = {
- endpoint: ["Dot", { radius: 5 }],
+ endpoint: ["Dot", { radius: 4 }],
anchor: ["LeftMiddle"],
isTarget: true,
connectionType: "flow",
+ paintStyle: { fill: "black" },
};
const endpointRight = {
- endpoint: ["Dot", { radius: 5 }],
+ endpoint: ["Dot", { radius: 4 }],
anchor: ["RightMiddle"],
isSource: true,
connectionType: "flow",
+ paintStyle: { fill: "black" },
};
const severalEndpointsLeft = {
- endpoint: ["Dot", { radius: 5 }],
+ endpoint: ["Dot", { radius: 4 }],
anchor: ["LeftMiddle"],
isTarget: true,
connectionType: "flow",
+ paintStyle: { fill: "black" },
maxConnections: 5,
};
const severalEndpointsRight = {
- endpoint: ["Dot", { radius: 5 }],
+ endpoint: ["Dot", { radius: 4 }],
anchor: ["RightMiddle"],
isSource: true,
connectionType: "flow",
+ paintStyle: { fill: "black" },
maxConnections: 5,
};
diff --git a/src/functions/visualValidation.js b/src/functions/visualValidation.js
index cad57d66d6fec4a89f647d90740029212c514d3c..b3f25d5fbe995c11042e6c8d7a70af6424b10792 100644
--- a/src/functions/visualValidation.js
+++ b/src/functions/visualValidation.js
@@ -66,10 +66,13 @@ export const showDeployIcon = (id) => {
// };
export const showPause = () => {
+ console.log("HI");
let elementsToHide = document.querySelectorAll("#Diagram .Filter");
elementsToHide.forEach((el) => {
+ console.log(el);
const isVisible = el.childNodes[7].style.visibility === "visible";
if (isVisible) {
+ console.log("Wäre cool");
el.childNodes[7].style.visibility = "hidden";
el.childNodes[9].style.visibility = "visible";
el.style.borderColor = "orange";
diff --git a/src/index.html b/src/index.html
index 1cd077900ff67b28b203e43ef9d3d4f7251948dd..97d8df8c37bbee3291bb9eed75c6d69d9fe8e030 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,12 +17,17 @@
</head>
<body>
<div class="App">
- <div>
- <h1>Prototype for my masters degree</h1>
- </div>
<div class="Body">
<div id="Toolbox">
- <h4>TOOLBOX</h4>
+ <div id="logoContainer">
+ <img
+ src="../assets/CC-Logo.png"
+ alt="Logo der Website"
+ id="logo"
+ width="156px"
+ />
+ </div>
+ <hr />
<div>
<h5>PIPES</h5>
<div class="Pipe" data-type="Distributor" data-pipetype="Queue">
@@ -121,10 +126,12 @@
<div id="Loader"></div>
<i id="Success" class="far fa-check-circle"></i>
<i id="Error" class="far fa-times-circle"></i>
- <button id="ClearModel">Clear Model</button>
- <button id="KillDeployment" disabled="true">Kill Deployment</button>
- <button id="Deploy">Deploy</button>
- <button id="Pause">Pause</button>
+ <button class="customButton" id="ClearModel">Clear Model</button>
+ <button class="customButton" id="KillDeployment" disabled="true">
+ Kill Deployment
+ </button>
+ <button class="customButton" id="Deploy">Deploy</button>
+ <button class="customButton" id="Pause">Pause</button>
</div>
</div>
<div class="iconsLegend">
diff --git a/src/main.js b/src/main.js
index 1c25aa379ca7c36bf93c058b0468dcbdfe36f18a..aca4b2e28c5398db8b4824041fc3e9db97db92b8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,9 +23,8 @@ function App() {
instance.ready(() => {
instance.registerConnectionTypes({
flow: {
- paintStyle: { stroke: "blue", strokeWidth: 2 },
- hoverPaintStyle: { stroke: "blue", strokeWidth: 3 },
- connector: ["Flowchart", { cornerRadius: 25 }],
+ paintStyle: { stroke: "black", strokeWidth: 2 },
+ connector: ["Flowchart", { cornerRadius: 6 }],
},
});
diff --git a/src/style.css b/src/style.css
index 0ac592e2008f40ddf0e6e20b3b4ec48f4068ffac..a63cb6f32043f3117cf09e4f4e3a09b97dc3ced1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,44 +1,49 @@
+body {
+ background-color: rgb(249, 249, 249);
+}
+
.App {
text-align: center;
}
.Body {
display: flex;
+ font-family: "Times New Roman", Times, serif;
}
#Diagram {
- width: 80%;
- height: 85vh;
+ width: 100%;
+ height: 95vh;
margin: 6px;
border: 1px solid black;
position: relative;
}
#Toolbox {
- width: 20%;
- height: 85vh;
+ width: fit-content;
+ height: 95vh;
margin: 6px;
+ padding: 0 24px;
border: 1px solid black;
}
.Filter {
text-align: center;
align-content: center;
position: absolute;
- border: 2px solid black;
+ border: 1px solid black;
border-radius: 4px;
min-width: 84px;
width: fit-content;
height: 66px;
- padding: 6px;
- padding-bottom: 3px;
- padding-top: 3px;
+ padding: 3px 6px;
cursor: grab;
- background-color: ghostwhite;
+ background-color: white;
+ box-shadow: gray 0px 6px 6px -6px;
}
#Toolbox .Filter {
position: relative;
- margin: 12px;
+ margin: 12px auto;
}
.Filter:active {
@@ -49,15 +54,14 @@
text-align: center;
align-content: center;
position: absolute;
- padding: 12px;
- padding-top: 3px;
- padding-bottom: 3px;
+ padding: 3px 12px;
width: fit-content;
height: fit-content;
- border: 2px solid black;
- border-radius: 24px;
+ border: 1px solid black;
+ border-radius: 18px;
cursor: grab;
- background-color: ghostwhite;
+ background-color: white;
+ box-shadow: gray 0px 6px 6px -4px;
}
.Pipe:active {
@@ -66,7 +70,7 @@
#Toolbox .Pipe {
position: relative;
- margin: 12px;
+ margin: 12px auto;
}
.custom-menu {
@@ -97,13 +101,8 @@
.editorContainer {
position: absolute;
- /* top: 120px;
- left: 0px;
- right: 0px;
- margin: auto; */
text-align: left;
width: 80%;
- /* height: 50vh; */
border-radius: 12px;
padding: 12px;
box-shadow: 0px 0px 12px darkgray;
@@ -116,25 +115,13 @@
cursor: grabbing;
}
-.submitButton {
+#submitButton {
background-color: #04aa6d;
- border: 1px black solid;
- border-radius: 4px;
- padding: 12px;
- padding-top: 6px;
- padding-bottom: 6px;
margin: 6px;
- cursor: pointer;
}
-.cancelButton {
- border: 1px darkgray solid;
- border-radius: 4px;
- padding: 12px;
- padding-top: 6px;
- padding-bottom: 6px;
+#cancelButton {
margin: 6px;
- cursor: pointer;
}
.codeEditorButtons {
@@ -153,68 +140,47 @@
font-weight: bold;
}
+.customButton {
+ border: 0px black solid;
+ border-radius: 4px;
+ padding: 8px 12px;
+ cursor: pointer;
+ width: 120px;
+ box-shadow: gray 0px 6px 6px -6px;
+}
+
#Deploy {
position: absolute;
- right: 90px;
+ right: 144px;
top: 24px;
- width: 72px;
background-color: #04aa6d;
- border: 1px black solid;
- border-radius: 4px;
- padding: 12px;
- padding-top: 6px;
- padding-bottom: 6px;
- cursor: pointer;
}
#Pause {
position: absolute;
right: 12px;
top: 24px;
- width: 72px;
- background-color: red;
- border: 1px black solid;
- border-radius: 4px;
- padding: 12px;
- padding-top: 6px;
- padding-bottom: 6px;
- cursor: pointer;
+ background-color: orange;
}
#ClearModel {
position: absolute;
left: 12px;
top: 24px;
- width: 120px;
background-color: lightblue;
- border: 1px black solid;
- border-radius: 4px;
- padding: 12px;
- padding-top: 6px;
- padding-bottom: 6px;
- cursor: pointer;
}
#KillDeployment {
position: absolute;
left: 144px;
top: 24px;
- width: 120px;
- background-color: lightblue;
- border: 1px black solid;
- border-radius: 4px;
- padding: 12px;
- padding-top: 6px;
- padding-bottom: 6px;
- cursor: pointer;
+ background-color: red;
}
-#Pause:disabled {
- cursor: not-allowed;
- background-color: lightgray;
- color: rgba(0, 0, 0, 0.5);
-}
-#Deploy:disabled {
+#Deploy:disabled,
+#Pause:disabled,
+#ClearModel:disabled,
+#KillDeployment:disabled {
cursor: not-allowed;
background-color: lightgray;
color: rgba(0, 0, 0, 0.5);
@@ -262,7 +228,7 @@
top: -24px;
border: 2px black solid;
border-radius: 24px;
- background-color: ghostwhite;
+ background-color: white;
padding: 3px;
}
@@ -342,3 +308,7 @@
display: flex;
justify-content: space-around;
}
+
+#logoContainer {
+ padding-top: 24px;
+}