add help icon and improve border when filesave is active

JuliaPluto · Aug 1, 2024 · b1dcd91 · b1dcd91
1 parent 4ae5506
commit b1dcd91
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 9 deletions.
diff --git a/js/src/clipboard.js b/js/src/clipboard.js
@@ -172,16 +172,27 @@ function addOptionSpans(CONTAINER) {
   addSingleConfigSpan(CONTAINER, "width");
   addSingleConfigSpan(CONTAINER, "height");
   addSingleConfigSpan(CONTAINER, "scale");
+  addHelpIcon(CONTAINER)
   // Add set/unset
-  CLIPBOARD_HEADER.appendChild(
-    html`<button class="clipboard-span set">Set</button>`
-  );
-  CLIPBOARD_HEADER.appendChild(
-    html`<button class="clipboard-span unset">Unset</button>`
-  );
+  // CLIPBOARD_HEADER.appendChild(
+  //   html`<button class="clipboard-span set">Set</button>`
+  // );
+  // CLIPBOARD_HEADER.appendChild(
+  //   html`<button class="clipboard-span unset">Unset</button>`
+  // );
   addSingleConfigSpan(CONTAINER, "filename");
 }
 
+function addHelpIcon(CONTAINER) {
+  const { html } = CONTAINER.js_deps;
+  const { CLIPBOARD_HEADER } = CONTAINER;
+  CLIPBOARD_HEADER.appendChild(
+    html`<div class='help'>
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M160 164s1.44-33 33.54-59.46C212.6 88.83 235.49 84.28 256 84c18.73-.23 35.47 2.94 45.48 7.82C318.59 100.2 352 120.6 352 164c0 45.67-29.18 66.37-62.35 89.18S248 298.36 248 324" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="40"/><circle cx="248" cy="399.99" r="32"/></svg>
+</div>`
+  )
+}
+
 /**
  * Adds a clipboard header to the given container.
  *

diff --git a/js/src/styles.js b/js/src/styles.js
@@ -76,6 +76,7 @@ export function addClipboardHeaderStyle(element, deps = {}) {
       padding: 5px;
       align-items: center;
       user-select: none;
+      color: var(--pluto-output-color, var(--output-color));
     }
     .popped-out & {
       border-bottom: 3px solid var(--kbd-border-color, var(--border-color));
@@ -96,9 +97,23 @@ export function addClipboardHeaderStyle(element, deps = {}) {
       padding-left: 2px;
       cursor: text;
     }
+    & .help {
+      display: inline-block;
+      position: absolute;
+      right: 0px;
+      padding-right: 3px;
+      --icon-size: 22px;
+      width: var(--icon-size);
+      height: var(--icon-size);
+      background: var(--main-bg-color, var(--bg-color));
+      z-index: 500;
+    }
+    & .help svg {
+      color: var(--pluto-output-color, var(--output-color));
+      fill: var(--pluto-output-color, var(--output-color));
+    }
     & .config-value {
       font-weight: normal;
-      color: var(--pluto-output-color, var(--output-color));
       display: block;
       visibility: hidden;
       position: fixed;
@@ -137,12 +152,19 @@ export function addClipboardHeaderStyle(element, deps = {}) {
     & .clipboard-span.filename {
       flex: 0 0 100%;
       text-align: center;
-      border-top: 3px solid var(--kbd-border-color, var(--border-color));
-      margin-top: 5px;
       display: none;
     }
+    .filesave-extras &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      border-bottom: 3px solid var(--cm-border-color, var(--border-color));
+      margin-top: 2px;
+    }
     .filesave-extras & .clipboard-span.filename {
       display: inline-block;
+      margin-top: 10px;
     }
     & .clipboard-value.filename {
       margin-left: 3px;