From 50e7fa5933e5a734c5deb672eaf5af5d7a1c87b0 Mon Sep 17 00:00:00 2001
From: sienori <iilll7d6f@yahoo.co.jp>
Date: Sat, 2 Jun 2018 22:14:43 +0900
Subject: [PATCH] Replace setting icon with svg

---
 simple-translate/icons/setting.png | Bin 4341 -> 0 bytes
 simple-translate/popup/popup.css   |  36 +++++++++++++++++++++++++----
 simple-translate/popup/popup.html  |  36 ++++++++++++++++++++++++++---
 simple-translate/popup/popup.js    |   5 ++++
 4 files changed, 69 insertions(+), 8 deletions(-)
 delete mode 100644 simple-translate/icons/setting.png

diff --git a/simple-translate/icons/setting.png b/simple-translate/icons/setting.png
deleted file mode 100644
index 25b339d38c79d2f792d5e468a626ddb9cea3c515..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4341
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

diff --git a/simple-translate/popup/popup.css b/simple-translate/popup/popup.css
index 6f86c73..6b26662 100644
--- a/simple-translate/popup/popup.css
+++ b/simple-translate/popup/popup.css
@@ -22,6 +22,14 @@ body {
     flex-direction: column;
 }
 
+.hidden {
+    display: none;
+}
+
+svg {
+    pointer-events: none;
+}
+
 #header {
     padding: 10px;
     background-color: var(--line);
@@ -41,15 +49,33 @@ body {
     cursor: default;
 }
 
+#header .rightButtons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+}
+
 #setting {
-    height: 17px;
-    width: 17px;
-    background-image: url("/icons/setting.png");
-    background-size: 17px;
-    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
     cursor: pointer;
 }
 
+#setting svg {
+    flex-shrink: 0;
+    height: 18px;
+    width: 18px;
+    fill: var(--sub-text);
+    transform: rotate(180deg);
+    transition: fill 100ms, transform 300ms ease;
+}
+
+#setting:hover svg {
+    fill: var(--highlight);
+    transform: rotate(270deg);
+}
+
 #main {
     padding: 10px;
 }
diff --git a/simple-translate/popup/popup.html b/simple-translate/popup/popup.html
index 8978ad2..b5a8c23 100644
--- a/simple-translate/popup/popup.html
+++ b/simple-translate/popup/popup.html
@@ -8,11 +8,41 @@
 </head>
 
 <body>
+    <svg class=hidden>
+        <defs>
+            <symbol id="settingSvg" viewBox="0 0 512 512">
+                <path class="st0" d="M499.453,210.004l-55.851-2.58c-5.102-0.23-9.608-3.395-11.546-8.103l-11.508-27.695
+                                             c-1.937-4.728-0.997-10.145,2.455-13.914l37.668-41.332c4.718-5.188,4.546-13.205-0.421-18.182l-46.434-46.443
+                                             c-4.986-4.967-13.003-5.159-18.2-0.412l-41.312,37.668c-3.778,3.443-9.206,4.402-13.924,2.436l-27.694-11.488
+                                             c-4.718-1.946-7.864-6.454-8.094-11.565l-2.589-55.831C301.675,5.534,295.883,0,288.864,0h-65.708
+                                             c-7.02,0-12.831,5.534-13.156,12.562l-2.571,55.831c-0.23,5.111-3.376,9.618-8.094,11.565L171.64,91.447
+                                             c-4.737,1.966-10.165,1.007-13.924-2.436l-41.331-37.668c-5.198-4.746-13.215-4.564-18.201,0.412L51.769,98.198
+                                             c-4.986,4.977-5.158,12.994-0.422,18.182l37.668,41.332c3.452,3.769,4.373,9.186,2.416,13.914l-11.469,27.695
+                                             c-1.956,4.708-6.444,7.873-11.564,8.103l-55.832,2.58c-7.019,0.316-12.562,6.118-12.562,13.147v65.699
+                                             c0,7.019,5.543,12.83,12.562,13.148l55.832,2.579c5.12,0.229,9.608,3.394,11.564,8.103l11.469,27.694
+                                             c1.957,4.728,1.036,10.146-2.416,13.914l-37.668,41.313c-4.756,5.217-4.564,13.224,0.403,18.201l46.471,46.443
+                                             c4.967,4.977,12.965,5.15,18.182,0.422l41.312-37.677c3.759-3.443,9.207-4.392,13.924-2.435l27.694,11.478
+                                             c4.719,1.956,7.864,6.464,8.094,11.575l2.571,55.831c0.325,7.02,6.136,12.562,13.156,12.562h65.708
+                                             c7.02,0,12.812-5.542,13.138-12.562l2.589-55.831c0.23-5.111,3.376-9.619,8.094-11.575l27.694-11.478
+                                             c4.718-1.957,10.146-1.008,13.924,2.435l41.312,37.677c5.198,4.728,13.215,4.555,18.2-0.422l46.434-46.443
+                                             c4.967-4.977,5.139-12.984,0.421-18.201l-37.668-41.313c-3.452-3.768-4.412-9.186-2.455-13.914l11.508-27.694
+                                             c1.937-4.709,6.444-7.874,11.546-8.103l55.851-2.579c7.019-0.318,12.542-6.129,12.542-13.148v-65.699
+                                             C511.995,216.122,506.472,210.32,499.453,210.004z M256.01,339.618c-46.164,0-83.622-37.438-83.622-83.612
+                                             c0-46.184,37.458-83.622,83.622-83.622s83.602,37.438,83.602,83.622C339.612,302.179,302.174,339.618,256.01,339.618z"></path>
+            </symbol>
+        </defs>
+    </svg>
     <div id=header>
         <div id=title>Simple Translate</div>
-        <a href="../options/options.html" target="_blank">
-            <div id=setting></div>
-        </a>
+        <div class="rightButtons">
+            <a href="../options/options.html" target="_blank">
+                <div id="setting" title="Setting">
+                    <svg>
+                        <use xlink:href="#settingSvg"></use>
+                    </svg>
+                </div>
+            </a>
+        </div>
     </div>
     <div id=main>
         <textarea id=textarea spellcheck=false contenteditable=true autofocus></textarea>
diff --git a/simple-translate/popup/popup.js b/simple-translate/popup/popup.js
index b4b3e13..279149b 100644
--- a/simple-translate/popup/popup.js
+++ b/simple-translate/popup/popup.js
@@ -48,6 +48,11 @@ function setLangList() {
     langList.innerHTML = langListHtml;
 }
 
+setTitles();
+function setTitles(){
+    document.getElementById("setting").title = browser.i18n.getMessage('settingsLabel');
+}
+
 function alphabeticallySort(a, b) {
     if (a[1].toString() > b[1].toString()) {
         return 1;