Add color hex copy to clipboard button

FelixLuciano · Jul 12, 2024 · 0e6ac2a · 0e6ac2a
1 parent 731c030
commit 0e6ac2a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/public/index.html b/public/index.html
@@ -143,13 +143,18 @@ <h1>picker</h1>
                 </nav>
             </template>
             <nav class="grid">
-                <div x-bind="getDisplayBind('color')" class="s12 l6 field round border ratio-3-1 smooth-color" style="background-color: #FFFFFF;">
+                <div x-bind="getDisplayBind('color')" class="s12 l6 field round border ratio-3-1 smooth-color black-text" style="background-color: #FFFFFF;">
                     <span class="helper font-mono surface">hex</span>
                     <input type="text" value="#FFFFFF" x-ref="colorInput" x-model="hex" class="font-mono text-extra">
-                    <button class="circle large transparent absolute middle right">
-                        <i>colorize</i>
-                        <input type="color" x-model="hex">
-                    </button>
+                    <div class="absolute middle right vertical margin">
+                        <button @click="navigator.clipboard.writeText(color.hex)" data-ui="#snackbar-color-clipboard" class="circle large transparent">
+                            <i>content_copy</i>
+                        </button>
+                        <button class="circle large transparent">
+                            <i>colorize</i>
+                            <input type="color" x-model="hex">
+                        </button>
+                    </div>
                 </div>
                 <div class="s m s12"></div>
                 <nav class="s8 l4 field ratio-2-1 no-space">

diff --git a/public/style.css b/public/style.css
@@ -30,15 +30,9 @@
     font-family: azeret mono, sans-serif !important;
 }
 
-.text-surface-dim {
-    color: var(--on-surface) !important;
-}
-.text-surface-inverse {
-    color: var(--inverse-on-surface) !important;
-}
-.text-surface-inverse ::selection {
+.black-text ::selection {
     background-color: rgba(0, 0, 0, .6);
-    color: #ffffff;
+    color: #FFFFFF;
 }
 
 .text-medium {