From eba07e76a3a12fbf0d7feda7824cbcb43c449572 Mon Sep 17 00:00:00 2001 From: ccd0 Date: Mon, 13 Apr 2020 21:00:45 -0700 Subject: [PATCH] Stop clipping to bounding boxes and use icons at original size. #2395 --- src/Icons/angle_down.svg | 2 +- src/Icons/bolt.svg | 2 +- src/Icons/book.svg | 2 +- src/Icons/clock_o.svg | 2 +- src/Icons/close.svg | 2 +- src/Icons/comment_o.svg | 2 +- src/Icons/compress.svg | 2 +- src/Icons/download.svg | 2 +- src/Icons/edit.svg | 2 +- src/Icons/expand.svg | 2 +- src/Icons/eye.svg | 2 +- src/Icons/heart.svg | 2 +- src/Icons/link.svg | 2 +- src/Icons/minus_square.svg | 2 +- src/Icons/minus_square_o.svg | 2 +- src/Icons/picture_o.svg | 2 +- src/Icons/plus_square.svg | 2 +- src/Icons/plus_square_o.svg | 2 +- src/Icons/refresh.svg | 2 +- src/Icons/times_circle.svg | 2 +- src/Icons/wrench.svg | 2 +- src/css/style.css | 50 +++++------------------------------- tools/icons.js | 15 +++++------ 23 files changed, 34 insertions(+), 73 deletions(-) diff --git a/src/Icons/angle_down.svg b/src/Icons/angle_down.svg index 29ea05f6ef..6e95549bd7 100644 --- a/src/Icons/angle_down.svg +++ b/src/Icons/angle_down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/bolt.svg b/src/Icons/bolt.svg index 2609133698..7b49e42fd1 100644 --- a/src/Icons/bolt.svg +++ b/src/Icons/bolt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/book.svg b/src/Icons/book.svg index 652bda76cc..e0770f8a87 100644 --- a/src/Icons/book.svg +++ b/src/Icons/book.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/clock_o.svg b/src/Icons/clock_o.svg index 0b9ba1c4f1..071d71a6a9 100644 --- a/src/Icons/clock_o.svg +++ b/src/Icons/clock_o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/close.svg b/src/Icons/close.svg index 2763b806b0..f836affed8 100644 --- a/src/Icons/close.svg +++ b/src/Icons/close.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/comment_o.svg b/src/Icons/comment_o.svg index e9b98a844c..865fea73a3 100644 --- a/src/Icons/comment_o.svg +++ b/src/Icons/comment_o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/compress.svg b/src/Icons/compress.svg index bd1e0fbb8a..3f42d66543 100644 --- a/src/Icons/compress.svg +++ b/src/Icons/compress.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/download.svg b/src/Icons/download.svg index 447b132263..09314514a3 100644 --- a/src/Icons/download.svg +++ b/src/Icons/download.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/edit.svg b/src/Icons/edit.svg index 4f4a9cc3c7..f4300556dc 100644 --- a/src/Icons/edit.svg +++ b/src/Icons/edit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/expand.svg b/src/Icons/expand.svg index 7c919d8135..5e75b083d1 100644 --- a/src/Icons/expand.svg +++ b/src/Icons/expand.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/eye.svg b/src/Icons/eye.svg index df64a96d9a..68314a8c9a 100644 --- a/src/Icons/eye.svg +++ b/src/Icons/eye.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/heart.svg b/src/Icons/heart.svg index 10fb2bf1f6..389141807f 100644 --- a/src/Icons/heart.svg +++ b/src/Icons/heart.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/link.svg b/src/Icons/link.svg index d04ac70900..fa0d6c0edf 100644 --- a/src/Icons/link.svg +++ b/src/Icons/link.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/minus_square.svg b/src/Icons/minus_square.svg index de4509ac22..f398964242 100644 --- a/src/Icons/minus_square.svg +++ b/src/Icons/minus_square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/minus_square_o.svg b/src/Icons/minus_square_o.svg index 43c2f9b9eb..08219d3a4d 100644 --- a/src/Icons/minus_square_o.svg +++ b/src/Icons/minus_square_o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/picture_o.svg b/src/Icons/picture_o.svg index f1a65cfcf0..c9ceb4ddf7 100644 --- a/src/Icons/picture_o.svg +++ b/src/Icons/picture_o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/plus_square.svg b/src/Icons/plus_square.svg index 10ac95602d..9d0e168949 100644 --- a/src/Icons/plus_square.svg +++ b/src/Icons/plus_square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/plus_square_o.svg b/src/Icons/plus_square_o.svg index 40b2b2ddf5..01fab9a032 100644 --- a/src/Icons/plus_square_o.svg +++ b/src/Icons/plus_square_o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/refresh.svg b/src/Icons/refresh.svg index 479adb88f3..32cc00850a 100644 --- a/src/Icons/refresh.svg +++ b/src/Icons/refresh.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/times_circle.svg b/src/Icons/times_circle.svg index 56b5945ce9..4df76e7189 100644 --- a/src/Icons/times_circle.svg +++ b/src/Icons/times_circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/wrench.svg b/src/Icons/wrench.svg index e7e1cc96db..9a3ab2042e 100644 --- a/src/Icons/wrench.svg +++ b/src/Icons/wrench.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css index 3a27d37631..961471721e 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -75,50 +75,19 @@ body.hasDropDownNav{ } /* Icons */ -.fourchan-x--icon { - display: -webkit-inline-flex; - display: inline-flex; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - align-items: center; - width: 13px; - height: 13px; -} -.fourchan-x--icon.icon--small { - width: 11px; - height: 11px; -} -.fourchan-x--icon.icon--large { - width: 14px; +.fourchan-x--icon > .inline-svg--fa { height: 14px; + margin: -11px 0 -3px; } -.fourchan-x--icon .inline-svg--fa { - height: 100%; - width: 100%; -} -:root.shortcut-icons #shortcuts .fourchan-x--icon { - position: relative; - top: 1px; -} -:root.shortcut-icons #shortcuts .icon--alt-text { - display: none; -} -:root:not(.shortcut-icons) #shortcuts .fourchan-x--icon { - height: auto; - width: auto; -} -:root:not(.shortcut-icons) #shortcuts .fourchan-x--icon .inline-svg--fa { +:root.shortcut-icons #shortcuts .icon--alt-text, +:root:not(.shortcut-icons) #shortcuts .fourchan-x--icon > .inline-svg--fa { display: none; } :root.shortcut-icons .shortcut.brackets-wrap::before, :root.shortcut-icons .shortcut.brackets-wrap::after { display: none; } -.download-button { - vertical-align: text-bottom; -} -.fa-spin { +.fa-spin > .inline-svg--fa { -webkit-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; @@ -973,9 +942,6 @@ div[data-checked="false"] > .suboption-list { vertical-align: text-top; padding-left: 2px; } -.catalog-stats > .menu-button { - width: 8px; -} .catalog-stats { font-size: 10px; font-weight: 700; @@ -1280,7 +1246,7 @@ textarea.copy-text-element { .watch-thread-link { opacity: 0.2; position: relative; - top: 2px; + top: -2px; } .watch-thread-link.watched { opacity: 1; @@ -2076,7 +2042,7 @@ input[type="checkbox"]:checked ~ .checkbox-letter { color: #e00; padding: 1px; } -.remove .fourchan-x--icon { +.remove > .fourchan-x--icon > .inline-svg--fa { -webkit-filter: drop-shadow(0 0 2px #000); filter: drop-shadow(0 0 2px #000); } @@ -2145,8 +2111,6 @@ a:only-of-type > .remove { #thread-watcher .menu-button, .stub > .menu-button { margin: 0 3px; - height: 8px; - width: 8px; } #menu { position: fixed; diff --git a/tools/icons.js b/tools/icons.js index 59e46d2da1..43565b4baa 100644 --- a/tools/icons.js +++ b/tools/icons.js @@ -1,7 +1,6 @@ var fs = require('fs'); var path = require('path'); var parser = require('sax').parser(true); -var BoundingHelper = require('svg-boundings'); var svgo = new (require('svgo'))(); var variables = require.resolve('font-awesome/less/variables.less'); @@ -20,21 +19,19 @@ for (var line of lines) { var glyphs = new Map(); var parser = require('sax').parser(true); parser.onopentag = function(x) { - if (x.name == 'glyph' && x.attributes.unicode && x.attributes.d) { - glyphs.set(x.attributes.unicode, x.attributes.d); + var a = x.attributes; + if (x.name == 'glyph' && a.unicode && a.d) { + glyphs.set(a.unicode, a); } }; parser.write(fs.readFileSync(font)).close(); async function generate(name) { - var path = glyphs.get(characters.get(name)); - if (!path) { + var glyph = glyphs.get(characters.get(name)); + if (!glyph) { throw new Error('Icon not found'); } - var bounds = BoundingHelper.path({type: 'path', d: path}, true); - var translateX = -Math.floor(bounds.left); - var translateY = Math.ceil(bounds.bottom); - var svg = ``; + var svg = ``; svg = (await svgo.optimize(svg)).data; return svg; }