Style everything to be nicer

- Uses floating-ui for a proper popover for the clipboard - Sort out the menu to look much better
jupyterhub · Feb 3, 2024 · d4c9223 · d4c9223
1 parent 0d9747e
commit d4c9223
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 43 deletions.
diff --git a/js/index.css b/js/index.css
@@ -14,6 +14,9 @@ html {
   --jupyter-grey: #9e9e9e;
 
   --topbar-height: 32px;
+
+  /* Use Jupyter Brand fonts */
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 body {
@@ -26,11 +29,10 @@ body {
 #top-bar {
   background-color: var(--jupyter-dark-grey);
   color: white;
-  font: 12px Helvetica;
   border-bottom: 1px white;
   display: flex;
   align-items: center;
-  height: var(--topbar-height);
+  padding: 4px 0px;
 }
 
 #logo {
@@ -44,9 +46,26 @@ body {
 #menu {
   display: flex;
   font-weight: bold;
+  margin-left: auto;
+  font-size: 12px;
 }
 
 #menu li {
+  border-right: 1px white solid;
+  padding: 8px 8px;
+}
+
+#menu li:last-child {
+  border-right: 0;
+}
+
+#menu a {
+  color: white;
+  text-decoration: none;
+}
+
+#status-label {
+  font-weight: normal;
 }
 
 #status {
@@ -65,37 +84,37 @@ body {
 }
 
 /* Clipboard */
-#clipboard-area {
-  position: fixed;
-  top: var(--topbar-height);
-  left: 0px;
-  padding: 4px;
-}
-
-#clipboard-button {
-  cursor: pointer;
-}
-
-#clipboard-button img {
-  height: 24px;
-  vertical-align: middle;
-}
-
-#clipboard-button .label {
-  padding: 5px 5px 4px 0px;
-}
-
-#clipboard-area {
-  /* Full screen, minus padding and left and right margins */
+#clipboard-content {
   display: flex;
   flex-direction: column;
-  background-color: white;
-  border-bottom-right-radius: 4px;
-  border: 1px solid var(--jupyter-medium-grey);
+  padding: 4px;
+  gap: 4px;
 }
 
 #clipboard-text {
   min-width: 500px;
   max-width: 100%;
-  border: 1px solid var(--jupyter-medium-grey);
+}
+
+.tooltip-container {
+  display: none;
+  overflow: visible; /* Needed for the arrow to show up */
+  width: max-content;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: white;
+  color: var(--jupyter-dark-grey);
+  padding: 6px;
+  border-radius: 4px;
+  font-size: 90%;
+  box-shadow: 4px 4px 4px 0px var(--jupyter-grey);
+}
+
+.arrow {
+  position: absolute;
+  background: white;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
 }
diff --git a/js/index.js b/js/index.js
@@ -9,9 +9,11 @@ import "./index.css";
 // RFB holds the API to connect and communicate with a VNC server
 import RFB from "@novnc/novnc/core/rfb";
 
+import { setupTooltip } from "./setupTooltip";
+
 // When this function is called we have successfully connected to a server
 function connectedToServer() {
-  status("Connected!");
+  status("Connected");
 }
 
 // This function is called when we are disconnected
@@ -50,12 +52,6 @@ rfb.scaleViewport = true;
 rfb.background = "var(--jupyter-medium-dark-grey)";
 
 // Clipboard
-function toggleClipboardPanel() {
-  document.getElementById("clipboard-area").classList.toggle("hidden");
-}
-document
-  .getElementById("clipboard-button")
-  .addEventListener("click", toggleClipboardPanel);
 
 function clipboardReceive(e) {
   document.getElementById("clipboard-text").value = e.detail.text;
@@ -69,3 +65,8 @@ function clipboardSend() {
 document
   .getElementById("clipboard-text")
   .addEventListener("change", clipboardSend);
+
+setupTooltip(
+  document.getElementById("clipboard-button"),
+  document.getElementById("clipboard-container"),
+);
diff --git a/js/setupTooltip.js b/js/setupTooltip.js
@@ -0,0 +1,63 @@
+import { computePosition, flip, shift, offset, arrow } from "@floating-ui/dom";
+
+/**
+ *
+ * @param {Element} button
+ * @param {Element} tooltip
+ */
+export function setupTooltip(button, tooltip) {
+  const arrowElement = document.querySelector(".arrow");
+  function updatePosition() {
+    computePosition(button, tooltip, {
+      placement: "bottom",
+      middleware: [
+        offset(6),
+        flip(),
+        shift({ padding: 5 }),
+        arrow({ element: arrowElement }),
+      ],
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+
+      // Accessing the data
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+
+      const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+      }[placement.split("-")[0]];
+
+      Object.assign(arrowElement.style, {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide]: "-4px",
+      });
+    });
+  }
+  function toggleTooltip() {
+    if (tooltip.style.display === "block") {
+      tooltip.style.display = "none";
+    } else {
+      tooltip.style.display = "block";
+    }
+    updatePosition();
+  }
+
+  function hideTooltip() {
+    tooltip.style.display = "";
+  }
+
+  [
+    ["click", toggleTooltip],
+    ["blur", hideTooltip],
+  ].forEach(([event, listener]) => {
+    button.addEventListener(event, listener);
+  });
+}
diff --git a/jupyter_remote_desktop_proxy/static/index.html b/jupyter_remote_desktop_proxy/static/index.html
@@ -21,10 +21,13 @@
       <a href=".." id="logo">
         <img src="./jupyter-logo.svg" />
       </a>
-      <span id="status">Connecting...</span>
       <ul id="menu">
+        <li>
+          <span id="status-label">Status:</span>
+          <span id="status">Connecting...</span>
+        </li>
         <li id="clipboard-button">
-          <span class="label">Clipboard</span>
+          <a class="label" href="#"> Clipboard </a>
         </li>
       </ul>
     </div>
@@ -33,12 +36,15 @@
     </div>
 
     <!-- Clipboard -->
-    <div id="clipboard-area" class="hidden">
-      <span
-        >Contents of this text box are synced with the clipboard on the remote
-        desktop</span
-      >
-      <textarea id="clipboard-text" rows="5"></textarea>
+    <div id="clipboard-container" class="tooltip-container" popover>
+      <div class="arrow"></div>
+      <div id="clipboard-content">
+        <p>
+          Contents of this text box are synced with the clipboard on the remote
+          desktop
+        </p>
+        <textarea id="clipboard-text" rows="5"></textarea>
+      </div>
     </div>
 
     <script src="./dist/viewer.js"></script>

diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@floating-ui/dom": "^1.6.1",
     "@novnc/novnc": "^1.4.0",
     "reset-css": "^5.0.2"
   },