Cleanup the menu UI better

- Has a hover state and an active state
jupyterhub · Feb 4, 2024 · 7c28872 · 7c28872
1 parent efecd5e
commit 7c28872
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 18 deletions.
diff --git a/js/index.css b/js/index.css
@@ -32,7 +32,6 @@ body {
   border-bottom: 1px white;
   display: flex;
   align-items: center;
-  padding: 4px 0px;
 }
 
 #logo {
@@ -51,8 +50,8 @@ body {
 }
 
 #menu li {
-  border-right: 1px white solid;
-  padding: 8px 8px;
+  border-right: 1px var(--jupyter-grey) solid;
+  padding: 12px 0px;
 }
 
 #menu li:last-child {
@@ -62,15 +61,20 @@ body {
 #menu a {
   color: white;
   text-decoration: none;
+  padding: 12px 8px;
 }
 
-#status-label {
-  font-weight: normal;
+#menu a:hover,
+#menu a.active {
+  background-color: var(--jupyter-medium-grey);
+}
+
+li#status-container {
+  padding-right: 8px;
 }
 
-#status {
-  text-align: center;
-  flex-grow: 1;
+#status-label {
+  font-weight: normal;
 }
 
 #screen {
@@ -97,7 +101,6 @@ body {
 }
 
 .tooltip-container {
-  display: none;
   overflow: visible; /* Needed for the arrow to show up */
   width: max-content;
   position: absolute;

diff --git a/js/tooltip.js b/js/tooltip.js
@@ -48,11 +48,8 @@ export function setupTooltip(trigger, tooltip) {
   }
 
   trigger.addEventListener("click", (e) => {
-    if (tooltip.style.display === "block") {
-      tooltip.style.display = "none";
-    } else {
-      tooltip.style.display = "block";
-    }
+    tooltip.classList.toggle("hidden");
+    trigger.classList.toggle("active");
     updatePosition();
     e.preventDefault();
   });

diff --git a/jupyter_remote_desktop_proxy/static/index.html b/jupyter_remote_desktop_proxy/static/index.html
@@ -22,12 +22,12 @@
         <img src="./jupyter-logo.svg" />
       </a>
       <ul id="menu">
-        <li>
+        <li id="status-container">
           <span id="status-label">Status:</span>
           <span id="status">Connecting...</span>
         </li>
-        <li id="clipboard-button">
-          <a class="label" href="#"> Clipboard </a>
+        <li>
+          <a id="clipboard-button" href="#">Remote Clipboard</a>
         </li>
       </ul>
     </div>
@@ -36,7 +36,7 @@
     </div>
 
     <!-- Clipboard -->
-    <div id="clipboard-container" class="tooltip-container" popover>
+    <div id="clipboard-container" class="tooltip-container hidden">
       <div class="arrow"></div>
       <div id="clipboard-content">
         <p>