From fa0a4274901731846cb82ebfd0883966bf333784 Mon Sep 17 00:00:00 2001
From: Robin Leber <rleber98@gmail.com>
Date: Sat, 6 Jul 2024 11:02:48 +0200
Subject: [PATCH] Styling context menu
---
src/functions/contextmenu.js | 40 +++++++++++++++++++-----------------
src/style.css | 33 ++++++++++++++++++++++++++---
2 files changed, 51 insertions(+), 22 deletions(-)
diff --git a/src/functions/contextmenu.js b/src/functions/contextmenu.js
index 616fa5f..e16fab2 100644
--- a/src/functions/contextmenu.js
+++ b/src/functions/contextmenu.js
@@ -34,20 +34,21 @@ export const initContextmenu = (instance) => {
event.preventDefault();
window.selectedFilter = $(event.currentTarget).attr("id");
$(
- `<div style='display: flex; flex-direction: column;' class='custom-menu'>
- <button style='border: none; padding: 6px 12px; cursor: pointer;' class='code-filter'>
- Add Implementation
+ `<div style='display: flex; flex-direction: column; text-align: left;' class='custom-menu'>
+ <button class='custom-menu-button' id='code-filter'>
+ <span style='margin-right: 6px;'> Add Implementation </span>
+ <i style='color: red;' class="fa-sharp fa-solid fa-l fa-exclamation"></i>
</button>
- <button style='border: none; padding: 6px 12px; cursor: pointer;' class='name-filter'>
+ <button class='custom-menu-button' id='name-filter'>
Name Filter
</button>
- <button style='border: none; padding: 6px 12px; cursor: pointer;' class='duplicate-filter'>
+ <button class='custom-menu-button' id='duplicate-filter'>
Duplicate Filter
</button>
- <button style='background-color: blue; color: white; border: none; padding: 6px 12px; cursor: pointer;' class='scale-out'>
+ <button class='custom-menu-button' id='scale-out'>
Scale Out
</button>
- <button style='background-color: red; color: white; border: none; padding: 6px 12px; cursor: pointer;' class='delete-filter'>
+ <button class='custom-menu-button' id='delete-filter'>
Delete Filter
</button>
</div>"`
@@ -56,21 +57,21 @@ export const initContextmenu = (instance) => {
.css({ top: event.pageY + "px", left: event.pageX + "px" });
});
- $("body").on("click", ".code-filter", (event) => {
+ $("body").on("click", "#code-filter", (event) => {
codeEditorElement(instance);
});
- $("body").on("click", ".name-filter", (event) => {
+ $("body").on("click", "#name-filter", (event) => {
nameFilter(instance);
});
- $("body").on("click", ".duplicate-filter", (event) => {
+ $("body").on("click", "#duplicate-filter", (event) => {
duplicateFilter(instance);
});
- $("body").on("click", ".scale-out", (event) => {
+ $("body").on("click", "#scale-out", (event) => {
scaleOut(window.selectedFilter);
document.getElementById("Pause").removeAttribute("disabled");
document.getElementById("Deploy").setAttribute("disabled", "disabled");
});
- $("body").on("click", ".delete-filter", (event) => {
+ $("body").on("click", "#delete-filter", (event) => {
instance.remove(window.selectedFilter);
appState.removeConnection(window.selectedFilter);
});
@@ -81,13 +82,14 @@ export const initContextmenu = (instance) => {
window.selectedPipe = $(event.currentTarget).attr("id");
$(
`<div style='display: flex; flex-direction: column;' class='custom-menu'>
- <button style='border: none; padding: 6px 12px; cursor: pointer;' class='name-pipe'>
- Name Pipe
+ <button class='custom-menu-button' id='name-pipe'>
+ <span style='margin-right: 6px;'> Name Pipe </span>
+ <i style='color: red;' class="fa-sharp fa-solid fa-l fa-exclamation"></i>
</button>
- <button style='border: none; padding: 6px 12px; cursor: pointer;' class='duplicate-pipe'>
+ <button class='custom-menu-button' id='duplicate-pipe'>
Duplicate Pipe
</button>
- <button style='background-color: red; color: white; border: none; padding: 6px 12px; cursor: pointer;' class='delete-pipe'>
+ <button class='custom-menu-button' id='delete-pipe'>
Delete Pipe
</button>
</div>`
@@ -96,15 +98,15 @@ export const initContextmenu = (instance) => {
.css({ top: event.pageY + "px", left: event.pageX + "px" });
});
- $("body").on("click", ".delete-pipe", (event) => {
+ $("body").on("click", "#delete-pipe", (event) => {
instance.remove(window.selectedPipe);
appState.removePipe(window.selectedPipe);
appState.removeConnectionValue(window.selectedPipe);
});
- $("body").on("click", ".duplicate-pipe", (event) => {
+ $("body").on("click", "#duplicate-pipe", (event) => {
duplicatePipe(instance);
});
- $("body").on("click", ".name-pipe", (event) => {
+ $("body").on("click", "#name-pipe", (event) => {
namePipe(instance);
});
};
diff --git a/src/style.css b/src/style.css
index 7711216..1bc66da 100644
--- a/src/style.css
+++ b/src/style.css
@@ -78,9 +78,36 @@ body {
.custom-menu {
z-index: 1000;
position: absolute;
- background-color: #c0c0c0;
- border: 1px solid black;
- padding: 2px;
+ background-color: lightgray;
+ border-radius: 6px;
+ padding: 6px;
+}
+
+.custom-menu-button {
+ background-color: inherit;
+ text-align: left;
+ border: none;
+ padding: 6px 12px;
+ cursor: pointer;
+ border-radius: 3px;
+}
+
+.custom-menu-button:hover {
+ background-color: lightblue;
+}
+
+#delete-pipe:hover {
+ background-color: red;
+}
+
+#delete-filter:hover {
+ background-color: red;
+ color: white;
+}
+
+#scale-out:hover {
+ background-color: blue;
+ color: white;
}
.window {
--
GitLab