Updated to 3.10.4

- Improved UI in Settings
Sav22999 · Apr 6, 2021 · 01ed9a5 · 01ed9a5
2 parents dffb94a + 2b8a67a
commit 01ed9a5
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 32 deletions.
diff --git a/css/style.css b/css/style.css
@@ -84,7 +84,7 @@ body {
     height: 40px;
     color: black;
     border: 0px;
-    border-radius: 3px;
+    border-radius: 5px;
     font-size: 22px;
     /*font-family: twemoji, sans-serif;*/
     margin: 5px;
@@ -112,7 +112,7 @@ body {
 .review-button:active,
 .message-button:active,
 .button:active {
-    box-shadow: 0px 0px 0px 2px #0a84ff, 0px 0px 0px 5px #b1d6fc;
+    box-shadow: 0px 0px 0px 2px #3399ff, 0px 0px 0px 5px #b1d6fc;
     z-index: 9;
 }
 
@@ -195,8 +195,8 @@ body {
     font-size: 16px;
     color: rgb(221, 222, 223);
     z-index: 999;
-    background-color: #0a84ff;
-    border-radius: 3px;
+    background-color: #3399ff;
+    border-radius: 5px;
     padding: 5px;
     margin: 0px;
     border: 0px solid transparent;
@@ -218,8 +218,8 @@ div#top-message {
     font-size: 16px;
     color: rgb(221, 222, 223);
     z-index: 999;
-    background-color: #0a84ff;
-    border-radius: 3px;
+    background-color: #3399ff;
+    border-radius: 5px;
     padding: 5px;
     margin: 0px;
     border: 0px solid transparent;
@@ -299,7 +299,7 @@ div#top-message {
 }
 
 .font-color-lightblue {
-    color: #0a84ff;
+    color: #3399ff;
 }
 
 .font-color-gray {
@@ -315,7 +315,7 @@ div#top-message {
 }
 
 .border-1-lightblue {
-    border: 1px solid #0a84ff;
+    border: 1px solid #3399ff;
 }
 
 .border-1-gray {
@@ -387,7 +387,7 @@ div#review-message-buttons, div#top-message-buttons, div.message-buttons-contain
 }
 
 #search-bar-input {
-    border-radius: 3px;
+    border-radius: 5px;
     padding: 6px;
     padding-left: 30px;
     height: 32px;
@@ -412,8 +412,8 @@ div#review-message-buttons, div#top-message-buttons, div.message-buttons-contain
 }
 
 #search-bar-input:focus {
-    border: 1px solid #0a84ff;
-    box-shadow: 0px 0px 0px 2px #0a84ff, 0px 0px 0px 5px #b1d6fc;
+    border: 1px solid #3399ff;
+    box-shadow: 0px 0px 0px 2px #3399ff, 0px 0px 0px 5px #b1d6fc;
 }
 
 #search-box {
@@ -468,8 +468,8 @@ div#review-message-buttons, div#top-message-buttons, div.message-buttons-contain
 #hide-settings-button {
     background-image: url("../img/close-dark.png");
     background-size: auto 12px;
-    top: 5px;
-    right: 5px;
+    top: 6px;
+    right: 6px;
 }
 
 #no_emojis_found,
@@ -531,7 +531,7 @@ div#settings-section {
     padding-left: 10px;
     padding-right: 10px;
     height: auto;
-    margin: 0px;
+    margin: 2px;
     font-size: 14px;
     font-family: open-sans, sans-serif;
 }
@@ -546,7 +546,7 @@ div {
     font-size: 14px;
     margin: 0px;
     background-color: inherit;
-    border-top: 1px solid #0a84ff;
+    border-top: 1px solid #3399ff;
     box-sizing: border-box;
     padding: 10px;
     font-family: open-sans, sans-serif;
@@ -575,7 +575,7 @@ div {
     height: 30px;
     font-family: open-sans, sans-serif;
     display: none;
-    color: #0a84ff;
+    color: #3399ff;
     font-style: italic;
     font-weight: bold;
     position: relative;
@@ -595,7 +595,7 @@ div {
     padding-right: 15px;
     color: black;
     border: 0px;
-    border-radius: 3px;
+    border-radius: 5px;
     font-family: open-sans, sans-serif;
     background-image: url("../img/arrow-select.png");
     background-repeat: no-repeat;
@@ -611,6 +611,10 @@ div {
     text-overflow: '';
 }
 
+.select:hover {
+    background-color: rgb(221, 222, 223);
+}
+
 .select-small {
     width: 100px;
     background-position: 70px center;
@@ -670,14 +674,18 @@ div {
     color: #EEEEEE;
 }
 
-.dark-search-bar-input {
+.dark-select:hover {
     background-color: rgb(50, 50, 50);
-    border: 1px solid rgb(70, 70, 70);
+}
+
+.dark-search-bar-input {
+    background-color: rgb(70, 70, 70);
+    border: 1px solid rgb(90, 90, 90);
     color: #EEEEEE;
 }
 
 .dark-search-bar-input:hover {
-    border: 1px solid rgb(90, 90, 90);
+    border: 1px solid rgb(110, 110, 110);
 }
 
 .dark-section-title {
@@ -726,13 +734,18 @@ div {
     width: 25px;
     height: 25px;
     display: inline-block;
-    opacity: .8;
+    opacity: 1;
     cursor: pointer;
     border-radius: 50%;
 }
 
 .skin-tone-button:hover {
-    opacity: 1;
+    opacity: 0.8;
+}
+
+.skin-tone-button:active, .skin-tone-button:focus {
+    box-shadow: 0px 0px 0px 1px #3399ff, 0px 0px 0px 4px #b1d6fc;
+    border: 1px solid #3399ff;
 }
 
 .skin-tone-button-selected {
@@ -782,26 +795,46 @@ div {
     cursor: pointer;
     color: inherit;
     text-align: center;
+    transition: 0.2s;
+    position: relative;
+    z-index: 8;
+}
+
+.button-yes-no:hover {
+    background-color: #3399ff44;
 }
 
 .button-yes-no-selected {
     background-color: #3399ff;
     color: #FFFFFF;
 }
 
+.button-yes-no-selected:hover {
+    background-color: #3399ff;
+}
+
+
 .button-yes {
     border-radius: 0px;
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
 }
 
 .button-no {
     border-radius: 0px;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
     margin-left: -5px;
 }
 
+.button-yes-no:active, .button-yes-no:focus {
+    box-shadow: 0px 0px 0px 0px #3399ff, 0px 0px 0px 3px #b1d6fc;
+    border: 2px solid #3399ff;
+    position: relative;
+    z-index: 9;
+    border-radius: 5px;
+}
+
 .hidden {
     display: none;
 }

diff --git a/js/release_notes.js b/js/release_notes.js
@@ -32,6 +32,12 @@ function releaseNotes(release) {
             release_notes_text += "<li>Now you can change skin-tone without restart pop-up {{emoji}}✌✌🏻✌🏼✌🏽✌🏾✌🏿{{emoji}}</li>";
             release_notes_text += "</ul>";
             break;
+
+        case "3.10.3":
+            release_notes_text = "<ul>";
+            release_notes_text += "<li>As many of you asked, I've added also LiberaPay to <i>Support my work</i> (to buy me a coffee) in Settings {{emoji}}☕{{/emoji}}</li>";
+            release_notes_text += "</ul>";
+            break;
     }
     return release_notes_text;
 }
diff --git a/js/script.js b/js/script.js
@@ -26,7 +26,7 @@ var browserAgentSettings = "";
 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", "https://chrome.google.com/webstore/detail/emoji/kjepehkgbooeigeflhiogplnckadlife?hl=it&authuser=0"];
-const linkDonate = ["https://bit.ly/3aJnnq7", "https://ko-fi.com/saveriomorelli"]; //{paypal, ko-fi}
+const linkDonate = ["https://www.paypal.com/pools/c/8yl6auiU6e", "https://ko-fi.com/saveriomorelli", "https://bit.ly/3eXs7Oy"]; //{paypal, ko-fi, liberapay}
 const linkNeedHelp = ["https://www.saveriomorelli.com/contact-me/"];
 const storeName = ["Firefox Add-ons", "Microsoft Edge Add-ons", "Google Chrome Web Store"];
 const fontFamily = ["twemoji", "notocoloremoji", "notocoloremoji"];
@@ -324,7 +324,7 @@ function setPopUpUI() {
     versionNumberText = versionNumberText.replaceAll("{{*{{store-name}}*}}", storeNameAbbr[browserOrChromeIndex]);
     document.getElementById("version-number").innerHTML = versionNumberText;
 
-    document.getElementById("emojis").style.height = (max_rows * (size_emojis + 10) + 4) + "px";
+    document.getElementById("emojis").style.height = (max_rows * (size_emojis + 10) + 4) + "px"; //10: 5margin * 2, 4: 2margin * 2
     document.getElementById("popup-content").style.height = (max_rows * (size_emojis + 10) + 4 + 36 + (34 + 12)) + "px"; //36 is the height of titles, 34+12 because there is the search-box (and its margin)
 
     let widthToSet = (max_columns * (size_emojis + 10) + 4 + 10); //50 is the height of one row, 4 is the padding of emojis div, 10 is the width of scrollbar (customised), otherwise it would be 18
@@ -501,6 +501,11 @@ function setPopUpUI() {
         browserAgentSettings.tabs.create({url: url_to_use});
         window.close();
     };
+    document.getElementById("donate-liberapay-settings").onclick = function () {
+        let url_to_use = linkDonate[2];
+        browserAgentSettings.tabs.create({url: url_to_use});
+        window.close();
+    };
 
     document.getElementById("columns-selected").onchange = function () {
         saveSettings();
@@ -642,6 +647,11 @@ function showMessageTop(text) {
     document.getElementById("top-message-buttons").append(button_hide_element);
 }
 
+function openLink(url) {
+    browserAgentSettings.tabs.create({url: url});
+    window.close();
+}
+
 function showMessageBottom(text = "Copied ✔", emoji_text = null) {
     let index_to_use = char_copied_n;
     char_copied_n++;
@@ -980,6 +990,7 @@ function setTheme() {
     removeThemeClassId("font-family-selected", "-select");
     removeThemeClassId("donate-paypal-settings", "-btn-settings-button");
     removeThemeClassId("donate-kofi-settings", "-btn-settings-button");
+    removeThemeClassId("donate-liberapay-settings", "-btn-settings-button");
 
     document.getElementById("popup-content").classList.add(theme);
     document.getElementById("search-bar-input").classList.add(theme + "-search-bar-input");
@@ -999,6 +1010,7 @@ function setTheme() {
     document.getElementById("reset-data-settings").classList.add(theme + "-btn-settings-button");
     document.getElementById("donate-paypal-settings").classList.add(theme + "-btn-settings-button");
     document.getElementById("donate-kofi-settings").classList.add(theme + "-btn-settings-button");
+    document.getElementById("donate-liberapay-settings").classList.add(theme + "-btn-settings-button");
 
     for (let n = 0; n < 7; n++) {
         removeThemeClassClass("subsection-settings", n, "-subsection-settings");

diff --git a/manifest.json b/manifest.json
@@ -1,8 +1,8 @@
 {
   "manifest_version": 2,
   "name": "Emoji",
-  "version": "3.10.2",
-  "description": "It permits just with a single click to copy an emoji.",
+  "version": "3.10.4",
+  "description": "It permits just with a single click to copy an emoji. You can also customise the add-on.",
   "icons": {
     "16": "./img/icon-dark-16.png",
     "24": "./img/icon-dark-24.png",

diff --git a/popup.html b/popup.html
@@ -123,9 +123,11 @@ <h1 id="settings-title">Settings</h1>
             <div class="margin-top-20 text-right">
                 <input type="button" value="I need help" class="button button-settings red-button"
                        id="need-help-settings">
-                <input type="button" value="Buy me a coffee on PayPal" class="button button-settings"
+                <input type="button" value="☕ PayPal" class="button button-settings"
                        id="donate-paypal-settings">
-                <input type="button" value="Buy me a coffee on Ko-Fi" class="button button-settings"
+                <input type="button" value="☕ LiberaPay" class="button button-settings"
+                       id="donate-liberapay-settings">
+                <input type="button" value="☕ Ko-Fi" class="button button-settings"
                        id="donate-kofi-settings">
             </div>
             <div class="margin-top-5">