diff --git a/js/src/clipboard.js b/js/src/clipboard.js
index f0c14e1..d86b928 100644
--- 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``
- );
- CLIPBOARD_HEADER.appendChild(
- html``
- );
+ // CLIPBOARD_HEADER.appendChild(
+ // html``
+ // );
+ // CLIPBOARD_HEADER.appendChild(
+ // html``
+ // );
addSingleConfigSpan(CONTAINER, "filename");
}
+function addHelpIcon(CONTAINER) {
+ const { html } = CONTAINER.js_deps;
+ const { CLIPBOARD_HEADER } = CONTAINER;
+ CLIPBOARD_HEADER.appendChild(
+ html`
`
+ )
+}
+
/**
* Adds a clipboard header to the given container.
*
diff --git a/js/src/styles.js b/js/src/styles.js
index dc15f7d..070cf05 100644
--- 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;