3.7.2

- 🥳 New font: OpenMoji Black (but it's always recommended the Twitter "twemoji") - ⚙️ Improved UI/UX in Settings: for Skin-tone and for Auto-close - ✨ Some other improvements
Sav22999 · Oct 19, 2020 · 7c6e30e · 7c6e30e
2 parents d5e979c + be8542c
commit 7c6e30e
Show file tree

Hide file tree

Showing 5 changed files with 198 additions and 10 deletions.
diff --git a/css/style.css b/css/style.css
@@ -18,6 +18,11 @@
     src: url("../font/openmojicolor.ttf");
 }
 
+@font-face {
+    font-family: openmoji-black;
+    src: url("../font/openmojiblack.ttf");
+}
+
 * {
     scrollbar-color: rgb(10, 132, 255) rgba(150, 150, 150, 0);
     scrollbar-width: thin;
@@ -204,6 +209,10 @@ div#review-message {
     font-family: openmoji-color, sans-serif;
 }
 
+.font-openmojiblack {
+    font-family: openmoji-black, sans-serif;
+}
+
 .font-notocoloremoji {
     font-family: notocoloremoji, sans-serif;
 }
@@ -487,6 +496,11 @@ div {
     font-family: open-sans, sans-serif;
 }
 
+.subsection-settings {
+    position: relative;
+    color: inherit;
+}
+
 .title-subsection-settings {
     font-size: 16px;
     height: 30px;
@@ -503,6 +517,7 @@ div {
     color: #0a84ff;
     font-style: italic;
     font-weight: bold;
+    position: relative;
 }
 
 #subsection-settings-bottom {
@@ -632,4 +647,101 @@ div {
 
 .dark-subsection-settings {
     border-bottom: 1px solid #555555;
+}
+
+#skin-tone-container, #auto-close-container {
+    position: relative;
+    height: 30px;
+    display: inline-block;
+    top: 0px;
+    margin-left: 10px;
+}
+
+#auto-close-container {
+    width: 100px;
+}
+
+.skin-tone-button {
+    border: 0px solid transparent;
+    background: transparent;
+    width: 25px;
+    height: 25px;
+    display: inline-block;
+    opacity: .8;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
+.skin-tone-button:hover {
+    opacity: 1;
+}
+
+.skin-tone-button-selected {
+    border: 2px solid #3399ff;
+}
+
+#skin-standard {
+    background-color: #ffDD00;
+}
+
+#skin-light {
+    background-color: #FFDAE6;
+}
+
+#skin-mlight {
+    background-color: #d4adad;
+}
+
+#skin-medium {
+    background-color: #966a6a;
+}
+
+#skin-mdark {
+    background-color: #603a3a;
+}
+
+#skin-dark {
+    background-color: #372323;
+}
+
+#skin-tone-container {
+    position: absolute;
+    height: 30px;
+    display: inline-block;
+    top: 0px;
+    margin-left: 10px;
+}
+
+.auto-close-button {
+    border: 2px solid #3399ff;
+    background: transparent;
+    width: 50px;
+    height: 30px;
+    display: inline-block;
+    opacity: 1;
+    cursor: pointer;
+    color: inherit;
+    text-align: center;
+}
+
+.auto-close-button-selected {
+    background-color: #3399ff;
+    color: #FFFFFF;
+}
+
+.auto-close-button-left {
+    border-radius: 0px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+.auto-close-button-right {
+    border-radius: 0px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    margin-left: -5px;
+}
+
+.hidden {
+    display: none;
 }
diff --git a/font/openmojiblack.ttf b/font/openmojiblack.ttf
diff --git a/js/script.js b/js/script.js
@@ -20,7 +20,7 @@ var mostUsedEmojis = [];
 var browserOrChromeIndex = 0; //TODO: change manually: {0: Firefox, 1: Microsoft Edge}
 
 var browserAgentSettings = "";
-var font_family = ""; //twemoji (Twitter), notocoloremoji (Google), openmojicolor (OpenMoji)
+var font_family = ""; //twemoji (Twitter), notocoloremoji (Google), openmojicolor (OpenMoji), openmojiblack, default
 
 const linkReview = ["https://addons.mozilla.org/firefox/addon/emoji-sav/", "https://microsoftedge.microsoft.com/addons/detail/emoji/ejcgfbaipbelddlbokgcfajefbnnagfm"];
 const fontFamily = ["twemoji", "notocoloremoji"];
@@ -285,18 +285,54 @@ function setPopUpUI() {
     }
 
     document.getElementById("skin-tone-selected").onchange = function () {
-        if (skin_tone_selected == "" && skin_tones[document.getElementById("skin-tone-selected").selectedIndex] != skin_tone_selected) {
-            document.getElementById("restart-pop-up").style.display = "inline-block";
-        } else {
-            document.getElementById("restart-pop-up").style.display = "none";
-        }
+        selectSkinToneButton(document.getElementById("skin-tone-selected").selectedIndex);
     }
+    selectSkinToneButton(document.getElementById("skin-tone-selected").selectedIndex);
 
     document.getElementById("font-family-selected").onchange = function () {
         checkFontFamily();
     }
     checkFontFamily();
 
+    document.getElementById("close-popup-after-copied-selected").onchange = function () {
+        selectYesNoAutoClose(document.getElementById("close-popup-after-copied-selected").selectedIndex);
+    }
+    selectYesNoAutoClose(document.getElementById("close-popup-after-copied-selected").selectedIndex);
+
+    document.getElementById("skin-standard").onclick = function () {
+        document.getElementById("skin-tone-selected").selectedIndex = 0;
+        selectSkinToneButton(0);
+    }
+    document.getElementById("skin-light").onclick = function () {
+        document.getElementById("skin-tone-selected").selectedIndex = 1;
+        selectSkinToneButton(1);
+    }
+    document.getElementById("skin-mlight").onclick = function () {
+        document.getElementById("skin-tone-selected").selectedIndex = 2;
+        selectSkinToneButton(2);
+    }
+    document.getElementById("skin-medium").onclick = function () {
+        document.getElementById("skin-tone-selected").selectedIndex = 3;
+        selectSkinToneButton(3);
+    }
+    document.getElementById("skin-mdark").onclick = function () {
+        document.getElementById("skin-tone-selected").selectedIndex = 4;
+        selectSkinToneButton(4);
+    }
+    document.getElementById("skin-dark").onclick = function () {
+        document.getElementById("skin-tone-selected").selectedIndex = 5;
+        selectSkinToneButton(5);
+    }
+
+    document.getElementById("auto-close-yes").onclick = function () {
+        document.getElementById("close-popup-after-copied-selected").selectedIndex = 0;
+        selectYesNoAutoClose(0);
+    }
+    document.getElementById("auto-close-no").onclick = function () {
+        document.getElementById("close-popup-after-copied-selected").selectedIndex = 1;
+        selectYesNoAutoClose(1);
+    }
+
     setSkinToneEmojis();
 }
 
@@ -597,16 +633,19 @@ function setFontFamily() {
     document.getElementById("emojis").classList.remove("font-twemoji");
     document.getElementById("emojis").classList.remove("font-notocoloremoji");
     document.getElementById("emojis").classList.remove("font-openmojicolor");
+    document.getElementById("emojis").classList.remove("font-openmojiblack");
     document.getElementById("emojis").classList.remove("font-default");
 
     document.getElementById("titles").classList.remove("font-twemoji");
     document.getElementById("titles").classList.remove("font-notocoloremoji");
     document.getElementById("titles").classList.remove("font-openmojicolor");
+    document.getElementById("titles").classList.remove("font-openmojiblack");
     document.getElementById("titles").classList.remove("font-default");
 
     document.getElementById("top-section").classList.remove("font-twemoji");
     document.getElementById("top-section").classList.remove("font-notocoloremoji");
     document.getElementById("top-section").classList.remove("font-openmojicolor");
+    document.getElementById("top-section").classList.remove("font-openmojiblack");
     document.getElementById("top-section").classList.remove("font-default");
 
     document.getElementById("emojis").classList.add("font-" + font_family);
@@ -709,4 +748,28 @@ function finishEditMode() {
     document.getElementById("search-box").style.right = "80px";
 
     deleting = false;
+}
+
+function selectSkinToneButton(index) {
+    document.getElementsByClassName("skin-tone-button")[0].classList.remove("skin-tone-button-selected"); //standard
+    document.getElementsByClassName("skin-tone-button")[1].classList.remove("skin-tone-button-selected"); //light
+    document.getElementsByClassName("skin-tone-button")[2].classList.remove("skin-tone-button-selected"); //medium-light
+    document.getElementsByClassName("skin-tone-button")[3].classList.remove("skin-tone-button-selected"); //medium
+    document.getElementsByClassName("skin-tone-button")[4].classList.remove("skin-tone-button-selected"); //medium-dark
+    document.getElementsByClassName("skin-tone-button")[5].classList.remove("skin-tone-button-selected"); //dark
+
+    if (skin_tone_selected == "" && skin_tones[document.getElementById("skin-tone-selected").selectedIndex] != skin_tone_selected) {
+        document.getElementById("restart-pop-up").style.display = "block";
+    } else {
+        document.getElementById("restart-pop-up").style.display = "none";
+    }
+
+    document.getElementsByClassName("skin-tone-button")[index].classList.add("skin-tone-button-selected");
+}
+
+function selectYesNoAutoClose(index) {
+    document.getElementsByClassName("auto-close-button")[0].classList.remove("auto-close-button-selected"); //yes
+    document.getElementsByClassName("auto-close-button")[1].classList.remove("auto-close-button-selected"); //no
+
+    document.getElementsByClassName("auto-close-button")[index].classList.add("auto-close-button-selected");
 }
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Emoji",
-  "version": "3.7.1",
+  "version": "3.7.2",
   "description": "It permits just with a single click to copy an emoji.",
   "icons": {
     "16": "./img/icon-dark-16.png",

diff --git a/popup.html b/popup.html
@@ -59,29 +59,42 @@ <h1 id="settings-title">Settings</h1>
             </div>
             <div class="subsection-settings">
                 <span class="title-subsection-settings">Close the pop-up after emoji is copied</span>
-                <select class="select select-small" id="close-popup-after-copied-selected">
+                <select class="select select-small hidden" id="close-popup-after-copied-selected">
                     <option>Yes</option>
                     <option>No</option>
                 </select>
+                <div id="auto-close-container">
+                    <button class="auto-close-button auto-close-button-left" id="auto-close-yes">Yes</button>
+                    <button class="auto-close-button auto-close-button-right" id="auto-close-no">No</button>
+                </div>
             </div>
             <div class="subsection-settings">
                 <span class="title-subsection-settings">Skin tone</span>
-                <select class="select select-big" id="skin-tone-selected">
+                <select class="select select-big hidden" id="skin-tone-selected">
                     <option value="nothing">Standard</option>
                     <option value="light">Light</option>
                     <option value="medium-light">Medium-Light</option>
                     <option value="medium">Medium</option>
                     <option value="medium-dark">Medium-Dark</option>
                     <option value="dark">Dark</option>
                 </select>
+                <div id="skin-tone-container">
+                    <button class="skin-tone-button" id="skin-standard"></button>
+                    <button class="skin-tone-button" id="skin-light"></button>
+                    <button class="skin-tone-button" id="skin-mlight"></button>
+                    <button class="skin-tone-button" id="skin-medium"></button>
+                    <button class="skin-tone-button" id="skin-mdark"></button>
+                    <button class="skin-tone-button" id="skin-dark"></button>
+                </div>
                 <span class="description-subsection-settings" id="restart-pop-up">You need to restart the pop-up</span>
             </div>
             <div class="subsection-settings">
                 <span class="title-subsection-settings">Font family</span>
                 <select class="select select-extra-big" id="font-family-selected">
                     <option value="twemoji">Twitter (Recommended)</option>
                     <!--<option value="notocoloremoji">Google</option>-->
-                    <option value="openmojicolor">OpenMoji</option>
+                    <option value="openmojicolor">OpenMoji (Color)</option>
+                    <option value="openmojiblack">OpenMoji (Black)</option>
                     <option value="default">OS emoji font</option>
                 </select>
                 <span class="description-subsection-settings" id="alert-font-pop-up">This font family could be shown not well. Use "Twitter" instead!</span>