better copy buttons

skrub-data · Jun 27, 2024 · eefb2b0 · eefb2b0
1 parent f653284
commit eefb2b0
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 20 deletions.
diff --git a/src/skrubview/_data/templates/base.css b/src/skrubview/_data/templates/base.css
@@ -1,4 +1,5 @@
 :root {
+    --skrubview-micro: 0.25rem;
     --skrubview-tiny: 0.5rem;
     --skrubview-small: 1.0rem;
     --skrubview-large: 1.2rem;
@@ -125,18 +126,14 @@
 }
 
 {{ report_id_selector }}.skrubview-report .skrubview-copybutton-grid {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
+    display: flex;
+    flex-direction: column;
     gap: var(--skrubview-tiny);
     padding-block-start: var(--skrubview-tiny);
     padding-block-end: var(--skrubview-tiny);
 }
 
-{{ report_id_selector }}.skrubview-report .skrubview-copybutton-grid > * {
-    margin-block-start: 0;
-    margin-block-end: 0;
-}
+
 
 {{ report_id_selector }}.skrubview-report .skrubview-grid-separator {
     grid-column: 1/-1;
@@ -211,24 +208,50 @@
 }
 
 {{ report_id_selector }}.skrubview-report .skrubview-box {
-    border: 1px solid #555555;
-    padding: var(--skrubview-tiny);
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    border: 1px solid var(--skrubview-darkg);
+    padding: 0;
     min-width: 1rem;
     max-width: 40rem;
     max-height: 10rem;
-    min-height: 1rem;
-    overflow: auto;
+    min-height: 1.8rem;
     white-space: pre;
 }
 
+{{ report_id_selector }}.skrubview-report .skrubview-box pre {
+    overflow-x: auto;
+    padding: var(--skrubview-tiny);
+    flex-grow: 1;
+}
+
 {{ report_id_selector }}.skrubview-report .skrubview-table-value-box {
     max-width: 100%;
 }
 
-{{ report_id_selector }}.skrubview-report .skrubview-box[data-shows-placeholder] {
+{{ report_id_selector }}.skrubview-report *[data-shows-placeholder] {
     color: #777777;
 }
 
+{{ report_id_selector }}.skrubview-report .skrubview-copybutton {
+    display: none;
+    padding: var(--skrubview-micro);
+    border: none;
+    background: rgba(0, 0, 0, 0);
+}
+
+{{ report_id_selector }}.skrubview-report .skrubview-box:hover .skrubview-copybutton {
+                                                                   display: inline;
+                                                               }
+
+{{ report_id_selector }}.skrubview-report .skrubview-copybutton:hover {
+                                                                        display: inline;
+                                                                        background: var(--skrubview-mediumg);
+}
+
+
+
 {{ report_id_selector }}.skrubview-report .skrubview-table-cell {
     cursor: pointer;
 }

diff --git a/src/skrubview/_data/templates/column-summary.html b/src/skrubview/_data/templates/column-summary.html
@@ -52,8 +52,10 @@ <h3 class="skrubview-margin-r-t">
         <div class="skrubview-margin-v-t">
         <strong>Constant value:</strong>
         <div class="skrubview-copybutton-grid">
-        <pre class="skrubview-box" id="{{ val_id }}">{{ column.constant_value }}</pre>
-        <button onclick='copyTextToClipboard("{{ val_id }}")'>📋</button>
+            <div class="skrubview-box">
+        <pre id="{{ val_id }}">{{ column.constant_value }}</pre>
+        <button class="skrubview-copybutton" onclick='copyTextToClipboard("{{ val_id }}")'>📋</button>
+            </div>
         </div>
         </div>
         {% endif %}
@@ -75,27 +77,31 @@ <h3 class="skrubview-margin-r-t">
 
                 {% for value in column.value_counts %}
                 {% set val_id = "{}-freq-value-{}".format(col_id, loop.index0) %}
-                <pre class="skrubview-box"
+                <div class="skrubview-box">
+                <pre
                      id="{{ val_id }}"
                      data-selector-id="{{ selector_id }}"
                      data-content-value="{{ value }}"
                      data-content-repr="{{ value.__repr__() }}"
                      data-content-filter="{{ value | filter_equal_snippet(column.name, summary.dataframe_module) }}"
                  >{{ value }}</pre>
-            <button onclick='copyTextToClipboard("{{ val_id }}")'>📋</button>
+            <button class="skrubview-copybutton" onclick='copyTextToClipboard("{{ val_id }}")'>📋</button>
+                </div>
 
             {% endfor %}
             <span class="skrubview-grid-separator">List:</span>
             {% set val_id = "{}-freq-value-list".format(col_id) %}
 
-            <pre class="skrubview-box"
+            <div class="skrubview-box">
+            <pre
                  id="{{ val_id }}"
                  data-selector-id="{{ selector_id }}"
                  data-content-value="{{ column.value_counts | list }}"
                  data-content-repr="{{ column.value_counts | list }}"
                  data-content-filter="{{ column.value_counts | list | filter_isin_snippet(column.name, summary.dataframe_module) }}"
             >{{ column.value_counts.keys() | list }}</pre>
-            <button onclick='copyTextToClipboard("{{ val_id }}")'>📋</button>
+            <button class="skrubview-copybutton" onclick='copyTextToClipboard("{{ val_id }}")'>📋</button>
+            </div>
             </div>
             </div>
         </details>

diff --git a/src/skrubview/_data/templates/top-bar.html b/src/skrubview/_data/templates/top-bar.html
@@ -16,9 +16,11 @@
 
     </select>
 
-    <pre id="{{ top_bar_display_id }}" class="skrubview-box" data-selector-id="{{ top_bar_select_id }}"></pre>
+    <div class="skrubview-box" >
+        <pre id="{{ top_bar_display_id }}" data-selector-id="{{ top_bar_select_id }}"></pre>
+        <button class="skrubview-copybutton" onclick='copyTextToClipboard("{{ top_bar_display_id }}")'>📋</button>
+    </div>
 
-    <button onclick='copyTextToClipboard("{{ top_bar_display_id }}")'>📋</button>
 </div>
 
 <script>