diff --git a/static/koboldai.css b/static/koboldai.css index 2a4805bd..ab5cd720 100644 --- a/static/koboldai.css +++ b/static/koboldai.css @@ -2148,6 +2148,42 @@ body { border-radius: var(--radius_settings_button); } +/* Context Menu */ +#context-menu { + position: absolute; + cursor: default; + + /* Nothing should be above the context menu (that I can think of) */ + z-index: 9999999; + + /* TODO: Theme */ + background-color: #222f3a; + border: 1px solid #485e6d; +} + +#context-menu > hr { + /* TODO: Theme */ + border-top: 2px solid #485e6d; + margin: 5px 5px; +} + +.context-menu-item { + padding: 5px; + padding-right: 25px; + min-width: 100px; +} + +.context-menu-item:hover { + /* TODO: Theme */ + background-color: #273b48; +} + +.context-menu-item > .material-icons-outlined { + position: relative; + top: 2px; + font-size: 15px; +} + /*---------------------------------- Global ------------------------------------------------*/ .hidden { display: none; diff --git a/static/koboldai.js b/static/koboldai.js index 470805bf..7f0b520f 100644 --- a/static/koboldai.js +++ b/static/koboldai.js @@ -4290,6 +4290,33 @@ $(document).ready(function(){ debugContainer.addEventListener("click", function(e) { debugContainer.classList.add("hidden"); }); + + // Context menu + const contextMenu = document.getElementById("context-menu"); + + $("#gamescreen").contextmenu(function(event) { + contextMenu.classList.remove("hidden"); + + // Set position to click position + contextMenu.style.left = `${event.originalEvent.x}px`; + contextMenu.style.top = `${event.originalEvent.y}px`; + + // Don't open browser context menu + event.preventDefault(); + + // Don't let the document contextmenu catch us and close our context menu + event.stopPropagation(); + }); + + // When we make a browser context menu, close ours. + $(document).contextmenu(function(event) { + contextMenu.classList.add("hidden"); + }); + + // When we click outside of our context menu, close ours. + $(document).click(function(event) { + contextMenu.classList.add("hidden"); + }); }); document.addEventListener("keydown", function(event) { diff --git a/templates/index_new.html b/templates/index_new.html index 07899e78..4db73e98 100644 --- a/templates/index_new.html +++ b/templates/index_new.html @@ -138,6 +138,55 @@
- +