add svg icon for copy + reuse font size

+ simplify copying
openstyles · Feb 14, 2025 · d0c07af · d0c07af
1 parent eb6d6c4
commit d0c07af
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 52 deletions.
diff --git a/src/css/global.css b/src/css/global.css
@@ -9,6 +9,8 @@
 }
 :root {
   --family: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
+  --font-size: 12px;
+  --icon-font-size: 20px;
   --input-height: 24px;
   --cmin: hsl(0, 0%, 00%);
   --c00: hsl(0, 0%, 00%);
@@ -45,7 +47,7 @@
   }
 }
 body {
-  font: normal 12px var(--family);
+  font: normal var(--font-size) var(--family);
   background-color: var(--bg);
   color: var(--fg);
   margin: 0;
@@ -147,7 +149,7 @@ i {
   }
   vertical-align: middle;
   transition: color .1s;
-  font: 20px/1 icons;
+  font: var(--icon-font-size)/1 icons;
   color: var(--c40);
   &:hover {
     color: var(--fg);
@@ -287,8 +289,8 @@ summary {
 
 .hollow-gear {
   cursor: default;
-  height: 20px;
-  font: normal 20px icons;
+  height: var(--icon-font-size);
+  font: normal var(--icon-font-size) icons;
   fill: transparent;
   stroke: currentColor;
   vertical-align: middle;
@@ -503,7 +505,7 @@ body {
 @font-face {
   font-family: 'icons';
   src: url(icons.ttf) format('truetype');
-  unicode-range: /*AUTO-GENERATED-ICON-RANGE*/ U+20,U+2195,U+2197,U+21b2,U+21b6,U+222a,U+2298,U+22c1,U+22ee,U+24d8,U+25bc,U+25f4,U+2611,U+2699,U+26c8,U+270f,U+2713,U+2714,U+2716,U+2795,U+2796,U+27f3,U+d83e;
+  unicode-range: /*AUTO-GENERATED-ICON-RANGE*/ U+20,U+2195,U+2197,U+21b2,U+21b6,U+222a,U+2298,U+22c1,U+22ee,U+2398,U+24d8,U+25bc,U+25f4,U+2611,U+2699,U+26c8,U+270f,U+2713,U+2714,U+2716,U+2795,U+2796,U+27f3,U+d83e;
 }
 
 /*AUTO-GENERATED-ICON*/ .i-check1::after { content: "✓"; }
@@ -512,6 +514,7 @@ body {
 /*AUTO-GENERATED-ICON*/ .i-close::after { content: "✖"; }
 /*AUTO-GENERATED-ICON*/ .i-cloud::after { content: "⛈"; }
 /*AUTO-GENERATED-ICON*/ .i-config::after { content: "⚙"; }
+/*AUTO-GENERATED-ICON*/ .i-copy::after { content: "⎘"; }
 /*AUTO-GENERATED-ICON*/ .i-edit::after { content: "✏"; }
 /*AUTO-GENERATED-ICON*/ .i-empty::after { content: "⊘"; }
 /*AUTO-GENERATED-ICON*/ .i-external::after { content: "↗"; }

diff --git a/src/css/icons.ttf b/src/css/icons.ttf
diff --git a/src/edit/edit.css b/src/edit/edit.css
@@ -408,7 +408,7 @@ i,
   > label::before {
     content: attr(data-index) ":";
     margin-right: 0.25rem;
-    font-size: 12px;
+    font-size: var(--font-size);
   }
 }
 .code-label {
@@ -694,7 +694,7 @@ i,
     margin: 0 0 2px;
   }
   .keymap-list {
-    font-size: 12px;
+    font-size: var(--font-size);
     padding: 0 3px 0 0;
     border-spacing: 0;
     word-break: break-all;

diff --git a/src/icons/copy.svg b/src/icons/copy.svg
diff --git a/src/install-usercss/install-usercss.css b/src/install-usercss/install-usercss.css
@@ -280,8 +280,8 @@ li {
 }
 
 .configure-usercss .i-config {
-  width: 20px;
-  height: 20px;
+  width: var(--icon-font-size);
+  height: var(--icon-font-size);
 }
 #message-box.config-dialog {
   width: 0; /* prevents covering the entire page */

diff --git a/src/js/color/color-picker.css b/src/js/color/color-picker.css
@@ -170,7 +170,7 @@
 
 .colorpicker-sliders {
   position: relative;
-  padding: 10px calc(var(--switcher-width) - 12px) 6px 0;
+  padding: 10px calc(var(--switcher-width) - var(--font-size)) 6px 0;
   border-top: 1px solid transparent;
 }
 

diff --git a/src/manage/manage.css b/src/manage/manage.css
@@ -8,7 +8,7 @@ $iconGapY: 4px;
   --name-padding-left: 20px;
   --name-width: 30ch;
   --size-width: 4ch;
-  --action-size: 20px;
+  --action-size: var(--icon-font-size);
 }
 body {
   /* Fill the entire viewport to enable json import via drag'n'drop */

diff --git a/src/popup/events.js b/src/popup/events.js
@@ -69,16 +69,11 @@ const GlobalRoutes = {
     }
     menuHide();
   },
-  '.copy'(event) {
-    event.preventDefault();
-    const target = document.activeElement;
-    const message = $('.copy-message');
+  '.copy'({target}) {
     navigator.clipboard.writeText(target.textContent);
     target.classList.add('copied');
-    message.classList.add('show-message');
     setTimeout(() => {
       target.classList.remove('copied');
-      message.classList.remove('show-message');
     }, 1000);
   },
 };

diff --git a/src/popup/index.js b/src/popup/index.js
@@ -185,10 +185,12 @@ async function initPopup(frames, ping0, tab, urlSupported) {
     ].filter(Boolean).join('\n');
     const renderToken = s => s[0] === '<'
       ? $create('a.copy', {
-        textContent: s.slice(1, -1),
         tabIndex: 0,
         title: t('copy'),
-      })
+      }, [
+        s.slice(1, -1),
+        $create('i.i-copy'),
+      ])
       : s;
     const renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken));
     const noteNode = $createFragment(note.split('\n').map(renderLine));

diff --git a/src/popup/popup.css b/src/popup/popup.css
@@ -263,7 +263,7 @@ html[style*="border"] .entry:nth-child(-n+10):before {
 }
 
 a.configure[target="_blank"] .i-config {
-  font-size: 20px;
+  font-size: var(--icon-font-size);
   margin-top: 1px;
 }
 
@@ -645,45 +645,26 @@ a:hover i {
     margin: 0;
   }
   .copy {
-    cursor: pointer;
-    transition: all .1s;
-    text-decoration: underline;
-    text-decoration-style: dotted;
+    cursor: copy;
+    hyphens: none;
+    word-break: break-word;
     font-weight: bold;
     &:hover {
       color: var(--fg);
+      text-decoration: underline;
+      &:not(.copied) {
+        text-decoration-style: dotted;
+      }
     }
-    &.copied {
-      background: hsl(170, 40%, 80%);
-      color: var(--fg);
+    i {
+      font-size: var(--icon-font-size);
+      line-height: var(--font-size);
     }
-    &::after {
-      content: '';
-      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURQAAAAAAAKVnuc8AAAABdFJOUwBA5thmAAAAIElEQVQI12NgYGCEAgYgkwEMGBFijEhixDMZkUSRLQAACpYALjrE2uIAAAAASUVORK5CYII=) center no-repeat;
-      height: 10px;
-      width: 10px;
-      display: inline-flex;
-      margin-left: 3px;
+    &.copied {
+      color: var(--accent-1);
     }
   }
 }
-.copy-message {
-  white-space: nowrap;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  font-weight: bold;
-  font-size: 13px;
-  text-align: center;
-  padding: 4px 0;
-  background: hsl(170, 40%, 80%);
-  color: var(--fg);
-  z-index: 10;
-  &:not(.show-message) {
-    display: none;
-  }
-}
 
 /******************************************/
 

diff --git a/src/popup/search.css b/src/popup/search.css
@@ -113,7 +113,7 @@
     margin: -6px 4px -6px 0;
   }
   & span {
-    font-size: 12px;
+    font-size: var(--font-size);
     font-weight: 600;
   }
   .search-result:hover & {