From 6743f29ae2c00a199e47ddf53e8172ef9e2a025a Mon Sep 17 00:00:00 2001
From: Marius Balteanu <marius.balteanu@zitec.com>
Date: Sat, 7 Sep 2024 11:22:51 +0000
Subject: [PATCH] Replaces background images for JS toolbar buttons with SVG
 icons except for inline code and preformattted code which are now text
 (#23980).

git-svn-id: https://svn.redmine.org/redmine/trunk@23033 e93f8b46-1217-0410-a6f0-8f06a7374b81
---
 app/assets/images/jstoolbar/bold.svg          |  1 +
 app/assets/images/jstoolbar/checklist.svg     |  1 +
 app/assets/images/jstoolbar/code_blocks.svg   |  1 +
 app/assets/images/jstoolbar/h1.svg            |  1 +
 app/assets/images/jstoolbar/h2.svg            |  1 +
 app/assets/images/jstoolbar/h3.svg            |  1 +
 app/assets/images/jstoolbar/help.svg          |  1 +
 app/assets/images/jstoolbar/image.svg         |  1 +
 .../images/jstoolbar/indent_decrease.svg      |  1 +
 .../images/jstoolbar/indent_increase.svg      |  1 +
 app/assets/images/jstoolbar/italic.svg        |  1 +
 app/assets/images/jstoolbar/list_bulleted.svg |  1 +
 app/assets/images/jstoolbar/list_numbered.svg |  1 +
 app/assets/images/jstoolbar/strikethrough.svg |  1 +
 app/assets/images/jstoolbar/table.svg         |  1 +
 app/assets/images/jstoolbar/underlined.svg    |  1 +
 app/assets/images/jstoolbar/wiki_link.svg     |  4 ++
 app/assets/stylesheets/jstoolbar.css          | 50 +++++++++++--------
 18 files changed, 48 insertions(+), 22 deletions(-)
 create mode 100644 app/assets/images/jstoolbar/bold.svg
 create mode 100644 app/assets/images/jstoolbar/checklist.svg
 create mode 100644 app/assets/images/jstoolbar/code_blocks.svg
 create mode 100644 app/assets/images/jstoolbar/h1.svg
 create mode 100644 app/assets/images/jstoolbar/h2.svg
 create mode 100644 app/assets/images/jstoolbar/h3.svg
 create mode 100644 app/assets/images/jstoolbar/help.svg
 create mode 100644 app/assets/images/jstoolbar/image.svg
 create mode 100644 app/assets/images/jstoolbar/indent_decrease.svg
 create mode 100644 app/assets/images/jstoolbar/indent_increase.svg
 create mode 100644 app/assets/images/jstoolbar/italic.svg
 create mode 100644 app/assets/images/jstoolbar/list_bulleted.svg
 create mode 100644 app/assets/images/jstoolbar/list_numbered.svg
 create mode 100644 app/assets/images/jstoolbar/strikethrough.svg
 create mode 100644 app/assets/images/jstoolbar/table.svg
 create mode 100644 app/assets/images/jstoolbar/underlined.svg
 create mode 100644 app/assets/images/jstoolbar/wiki_link.svg

diff --git a/app/assets/images/jstoolbar/bold.svg b/app/assets/images/jstoolbar/bold.svg
new file mode 100644
index 000000000..69752c492
--- /dev/null
+++ b/app/assets/images/jstoolbar/bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M272-200v-560h221q65 0 120 40t55 111q0 51-23 78.5T602-491q25 11 55.5 41t30.5 90q0 89-65 124.5T501-200H272Zm121-112h104q48 0 58.5-24.5T566-372q0-11-10.5-35.5T494-432H393v120Zm0-228h93q33 0 48-17t15-38q0-24-17-39t-44-15h-95v109Z"/></svg>
diff --git a/app/assets/images/jstoolbar/checklist.svg b/app/assets/images/jstoolbar/checklist.svg
new file mode 100644
index 000000000..a31e61514
--- /dev/null
+++ b/app/assets/images/jstoolbar/checklist.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M232-216 96-352l51-51 84 85 170-170 52 51-221 221Zm0-312L96-664l51-51 85 85 169-170 52 51-221 221Zm296 240v-72h336v72H528Zm0-312v-72h336v72H528Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/code_blocks.svg b/app/assets/images/jstoolbar/code_blocks.svg
new file mode 100644
index 000000000..3878e6182
--- /dev/null
+++ b/app/assets/images/jstoolbar/code_blocks.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="m384-360 51-51-69-69 69-69-51-51-120 120 120 120Zm192 0 120-120-120-120-51 51 69 69-69 69 51 51ZM216-144q-29.7 0-50.85-21.15Q144-186.3 144-216v-528q0-29.7 21.15-50.85Q186.3-816 216-816h528q29.7 0 50.85 21.15Q816-773.7 816-744v528q0 29.7-21.15 50.85Q773.7-144 744-144H216Zm0-72h528v-528H216v528Zm0-528v528-528Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/h1.svg b/app/assets/images/jstoolbar/h1.svg
new file mode 100644
index 000000000..5fe40c237
--- /dev/null
+++ b/app/assets/images/jstoolbar/h1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M192-288v-384h72v156h168v-156h72v384h-72v-156H264v156h-72Zm504 0v-312h-96v-72h168v384h-72Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/h2.svg b/app/assets/images/jstoolbar/h2.svg
new file mode 100644
index 000000000..5b94e8806
--- /dev/null
+++ b/app/assets/images/jstoolbar/h2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M144-288v-384h72v156h168v-156h72v384h-72v-156H216v156h-72Zm384 0v-156q0-29.7 21.15-50.85Q570.3-516 600-516h144v-84H528v-72h216.26Q774-672 795-650.85q21 21.15 21 50.85v84q0 29.7-21.15 50.85Q773.7-444 744-444H600v84h216v72H528Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/h3.svg b/app/assets/images/jstoolbar/h3.svg
new file mode 100644
index 000000000..856202909
--- /dev/null
+++ b/app/assets/images/jstoolbar/h3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M144-288v-384h72v156h168v-156h72v384h-72v-156H216v156h-72Zm384 0v-72h216v-84H576v-72h168v-84H528v-72h216.26Q774-672 795-650.85q21 21.15 21 50.85v240q0 29.7-21.15 50.85Q773.7-288 744-288H528Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/help.svg b/app/assets/images/jstoolbar/help.svg
new file mode 100644
index 000000000..b5377a554
--- /dev/null
+++ b/app/assets/images/jstoolbar/help.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M480-240q20 0 34-14t14-34q0-20-14-34t-34-14q-20 0-34 14t-14 34q0 20 14 34t34 14Zm-36-153h73q0-37 6.5-52.5T555-485q35-34 48.5-58t13.5-53q0-55-37.5-89.5T484-720q-51 0-88.5 27T343-620l65 27q9-28 28.5-43.5T482-652q28 0 46 16t18 42q0 23-15.5 41T496-518q-35 32-43.5 52.5T444-393Zm36 297q-79 0-149-30t-122.5-82.5Q156-261 126-331T96-480q0-80 30-149.5t82.5-122Q261-804 331-834t149-30q80 0 149.5 30t122 82.5Q804-699 834-629.5T864-480q0 79-30 149t-82.5 122.5Q699-156 629.5-126T480-96Zm0-72q130 0 221-91t91-221q0-130-91-221t-221-91q-130 0-221 91t-91 221q0 130 91 221t221 91Zm0-312Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/image.svg b/app/assets/images/jstoolbar/image.svg
new file mode 100644
index 000000000..95109ccce
--- /dev/null
+++ b/app/assets/images/jstoolbar/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M216-144q-29.7 0-50.85-21.5Q144-187 144-216v-528q0-29 21.15-50.5T216-816h528q29.7 0 50.85 21.5Q816-773 816-744v528q0 29-21.15 50.5T744-144H216Zm0-72h528v-528H216v528Zm48-72h432L552-480 444-336l-72-96-108 144Zm-48 72v-528 528Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/indent_decrease.svg b/app/assets/images/jstoolbar/indent_decrease.svg
new file mode 100644
index 000000000..f60f03221
--- /dev/null
+++ b/app/assets/images/jstoolbar/indent_decrease.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M144-144v-72h672v72H144Zm288-150v-72h384v72H432Zm0-150v-72h384v72H432Zm0-150v-72h384v72H432ZM144-744v-72h672v72H144Zm144 408L144-480l144-144v288Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/indent_increase.svg b/app/assets/images/jstoolbar/indent_increase.svg
new file mode 100644
index 000000000..2bdc78b8a
--- /dev/null
+++ b/app/assets/images/jstoolbar/indent_increase.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M144-144v-72h672v72H144Zm288-150v-72h384v72H432Zm0-150v-72h384v72H432Zm0-150v-72h384v72H432ZM144-744v-72h672v72H144Zm0 408v-288l144 144-144 144Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/italic.svg b/app/assets/images/jstoolbar/italic.svg
new file mode 100644
index 000000000..47c4f60d9
--- /dev/null
+++ b/app/assets/images/jstoolbar/italic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M216-192v-96h160l124-384H336v-96h408v96H596L472-288h152v96H216Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/list_bulleted.svg b/app/assets/images/jstoolbar/list_bulleted.svg
new file mode 100644
index 000000000..dbc230a34
--- /dev/null
+++ b/app/assets/images/jstoolbar/list_bulleted.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M360-240v-72h456v72H360Zm0-204v-72h456v72H360Zm0-204v-72h456v72H360ZM215.79-204Q186-204 165-225.21t-21-51Q144-306 165.21-327t51-21Q246-348 267-326.79t21 51Q288-246 266.79-225t-51 21Zm0-204Q186-408 165-429.21t-21-51Q144-510 165.21-531t51-21Q246-552 267-530.79t21 51Q288-450 266.79-429t-51 21Zm0-204Q186-612 165-633.21t-21-51Q144-714 165.21-735t51-21Q246-756 267-734.79t21 51Q288-654 266.79-633t-51 21Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/list_numbered.svg b/app/assets/images/jstoolbar/list_numbered.svg
new file mode 100644
index 000000000..17bbeadd7
--- /dev/null
+++ b/app/assets/images/jstoolbar/list_numbered.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M144-144v-48h96v-24h-48v-48h48v-24h-96v-48h120q10.2 0 17.1 6.9 6.9 6.9 6.9 17.1v48q0 10.2-6.9 17.1-6.9 6.9-17.1 6.9 10.2 0 17.1 6.9 6.9 6.9 6.9 17.1v48q0 10.2-6.9 17.1-6.9 6.9-17.1 6.9H144Zm0-240v-96q0-10.2 6.9-17.1 6.9-6.9 17.1-6.9h72v-24h-96v-48h120q10.2 0 17.1 6.9 6.9 6.9 6.9 17.1v72q0 10.2-6.9 17.1-6.9 6.9-17.1 6.9h-72v24h96v48H144Zm48-240v-144h-48v-48h96v192h-48Zm168 384v-72h456v72H360Zm0-204v-72h456v72H360Zm0-204v-72h456v72H360Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/strikethrough.svg b/app/assets/images/jstoolbar/strikethrough.svg
new file mode 100644
index 000000000..c34e64bea
--- /dev/null
+++ b/app/assets/images/jstoolbar/strikethrough.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M96-408v-72h768v72H96Zm336-144v-120H240v-96h480v96H528v120h-96Zm0 360v-144h96v144h-96Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/table.svg b/app/assets/images/jstoolbar/table.svg
new file mode 100644
index 000000000..27755e5c5
--- /dev/null
+++ b/app/assets/images/jstoolbar/table.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M144-216v-528q0-29.7 21.15-50.85Q186.3-816 216-816h528q29.7 0 50.85 21.15Q816-773.7 816-744v528q0 29.7-21.15 50.85Q773.7-144 744-144H216q-29.7 0-50.85-21.15Q144-186.3 144-216Zm72-387h528v-141H216v141Zm200 194h128v-122H416v122Zm0 193h128v-121H416v121ZM216-409h128v-122H216v122Zm400 0h128v-122H616v122ZM216-216h128v-121H216v121Zm400 0h128v-121H616v121Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/underlined.svg b/app/assets/images/jstoolbar/underlined.svg
new file mode 100644
index 000000000..6a31acabb
--- /dev/null
+++ b/app/assets/images/jstoolbar/underlined.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#333"><path d="M240-144v-72h480v72H240Zm240-144q-96 0-148.5-59.4T279-504.86V-816h97.21v317.09q0 52.85 26.43 85.88Q429.07-380 480.03-380q50.97 0 77.39-33.03 26.41-33.03 26.41-85.88V-816H681v311.14q0 98.06-52.5 157.46Q576-288 480-288Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/jstoolbar/wiki_link.svg b/app/assets/images/jstoolbar/wiki_link.svg
new file mode 100644
index 000000000..61f5978df
--- /dev/null
+++ b/app/assets/images/jstoolbar/wiki_link.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.05 19H10.25C9.6275 19 9.09688 18.7563 8.65812 18.2688C8.21937 17.7813 8 17.1917 8 16.5C8 15.8083 8.21937 15.2188 8.65812 14.7312C9.09688 14.2437 9.6275 14 10.25 14H12.05V15H10.25C9.875 15 9.55625 15.1458 9.29375 15.4375C9.03125 15.7292 8.9 16.0833 8.9 16.5C8.9 16.9167 9.03125 17.2708 9.29375 17.5625C9.55625 17.8542 9.875 18 10.25 18H12.05V19ZM10.7 17V16H14.3V17H10.7ZM12.95 19V18H14.75C15.125 18 15.4438 17.8542 15.7063 17.5625C15.9688 17.2708 16.1 16.9167 16.1 16.5C16.1 16.0833 15.9688 15.7292 15.7063 15.4375C15.4438 15.1458 15.125 15 14.75 15H12.95V14H14.75C15.3725 14 15.9031 14.2437 16.3419 14.7312C16.7806 15.2188 17 15.8083 17 16.5C17 17.1917 16.7806 17.7813 16.3419 18.2688C15.9031 18.7563 15.3725 19 14.75 19H12.95Z" fill="#333333"/>
+<path d="M6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H14L20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 9V4H6V20H18V9H13Z" fill="#333333"/>
+</svg>
diff --git a/app/assets/stylesheets/jstoolbar.css b/app/assets/stylesheets/jstoolbar.css
index 6870261d7..50f5e2774 100644
--- a/app/assets/stylesheets/jstoolbar.css
+++ b/app/assets/stylesheets/jstoolbar.css
@@ -36,7 +36,7 @@
     display: inline-block;
     vertical-align: bottom;
     line-height: 19px;
-  border-bottom: 1px solid transparent;
+    border-bottom: 1px solid transparent;
 }
 .jstElements {
     display: inline-block;
@@ -105,59 +105,65 @@
 /* Buttons
 -------------------------------------------------------- */
 .jstb_strong {
-    background-image: url(/jstoolbar/bt_strong.png);
+    background-image: url(/jstoolbar/bold.svg);
 }
 .jstb_em {
-    background-image: url(/jstoolbar/bt_em.png);
+    background-image: url(/jstoolbar/italic.svg);
 }
 .jstb_ins {
-    background-image: url(/jstoolbar/bt_ins.png);
+    background-image: url(/jstoolbar/underlined.svg);
 }
 .jstb_del {
-    background-image: url(/jstoolbar/bt_del.png);
+    background-image: url(/jstoolbar/strikethrough.svg);
 }
-.jstb_code {
-    background-image: url(/jstoolbar/bt_code.png);
+.jstb_code::before {
+    content: "C";
+    font-size: 14px;
+    color: #333;
+    font-weight: 700
 }
 .jstb_h1 {
-    background-image: url(/jstoolbar/bt_h1.png);
+    background-image: url(/jstoolbar/h1.svg);
 }
 .jstb_h2 {
-    background-image: url(/jstoolbar/bt_h2.png);
+    background-image: url(/jstoolbar/h2.svg);
 }
 .jstb_h3 {
-    background-image: url(/jstoolbar/bt_h3.png);
+    background-image: url(/jstoolbar/h3.svg);
 }
 .jstb_ul {
-    background-image: url(/jstoolbar/bt_ul.png);
+    background-image: url(/jstoolbar/list_bulleted.svg);
 }
 .jstb_ol {
-    background-image: url(/jstoolbar/bt_ol.png);
+    background-image: url(/jstoolbar/list_numbered.svg);
 }
 .jstb_tl {
-    background-image: url(/jstoolbar/bt_tl.png);
+    background-image: url(/jstoolbar/checklist.svg);
 }
 .jstb_bq {
-    background-image: url(/jstoolbar/bt_bq.png);
+    background-image: url(/jstoolbar/indent_increase.svg);
 }
 .jstb_unbq {
-    background-image: url(/jstoolbar/bt_bq_remove.png);
+    background-image: url(/jstoolbar/indent_decrease.svg);
 }
-.jstb_pre {
-    background-image: url(/jstoolbar/bt_pre.png);
+.jstb_pre::before {
+    content: "pre";
+    font-size: 10px;
+    color: #333;
+    font-weight: 700
 }
 .jstb_precode {
-    background-image: url(/jstoolbar/bt_precode.png);
+    background-image: url(/jstoolbar/code_blocks.svg);
 }
 .jstb_link {
-    background-image: url(/jstoolbar/bt_link.png);
+    background-image: url(/jstoolbar/wiki_link.svg);
 }
 .jstb_img {
-    background-image: url(/jstoolbar/bt_img.png);
+    background-image: url(/jstoolbar/image.svg);
 }
 .jstb_table {
-    background-image: url(/jstoolbar/bt_table.png);
+    background-image: url(/jstoolbar/table.svg);
 }
 .jstb_help {
-    background-image: url(/help.png);
+    background-image: url(/jstoolbar/help.svg);
 }