Added: Thumbnails to symbol selection (#93)

pages/options/options.css

@@ -76,6 +76,22 @@ body {
     text-align: center;
 }
 
+.div-selected-icon {
+    padding-top: 10px
+}
+
+.div-selected-icon > label {
+    margin-bottom: 1em;
+}
+
+.div-selected-icon > label > .b-input {
+    margin-top: 8px;
+}
+
+.div-selected-icon > label > img {
+    margin-right: 10px;
+}
+
 /**
  * Fonts
  */
@@ -114,14 +130,6 @@ body {
     font-weight: 600;
 }
 
-.title-option-select {
-    line-height: 1.54;
-    font-size: 12px;
-    font-family: inherit;
-    font-weight: 600;
-    padding-left: 25px;
-}
-
 /**
  * Controls
  */
@@ -134,10 +142,6 @@ body {
     color: #555;
 }
 
-#selected-icon {
-    width: max-content;
-}
-
 /**
  * Icons
  */
@@ -175,14 +179,6 @@ body {
     background: none;
 }
 
-.button:hover {
-    background-color: #fff;
-}
-
-.button:active {
-    background-color: #dedede;
-}
-
 .button-warning {
     background-color: #ea9700;
     border: 1px solid #d88c00;

pages/options/options.html

@@ -113,7 +113,7 @@
                     </div>
                     <div class="description-option" data-i18n-content="blockMissingDescription"></div>
                 </section>
-                <section class="option">
+                <section id="block-google-fonts" class="option">
                     <div class="title-option">
                         <label class="b-contain">
                             <input data-option="blockGoogleFonts" type="checkbox">
@@ -189,12 +189,25 @@
             <div id="icon-style-div" class="option-group">
                 <section id="section-icon-style" class="option">
                     <div class="title-option without-checkbox" data-i18n-content="chooseIconStyle">Choose an icon for this extension</div>
-                    <div>
+                    <div class="div-selected-icon">
-                        <select id="selected-icon" data-option="selectedIcon">
+                        <label class="b-contain" for="icon-default">
-                            <option value="Default">Default</option>
+                            <img src="../../icons/action/default/icon32-default.png" alt="Default" class="icons">
-                            <option value="Light">Light</option>
+                            <img src="../../icons/action/default/icon32-disabled.png" alt="Default" class="icons">
-                            <option value="Grey">Blue/Grey</option>
+                            <input id="icon-default" name="selected-icon" type="radio" data-option="selectedIcon" value="Default">
-                        </select>
+                            <div class="b-input"></div>
+                        </label>
+                        <label class="b-contain" for="icon-grey">
+                            <img src="../../icons/action/grey/icon32-default.png" alt="Blue/Grey" class="icons">
+                            <img src="../../icons/action/grey/icon32-disabled.png" alt="Blue/Grey" class="icons">
+                            <input id="icon-grey" name="selected-icon" type="radio" data-option="selectedIcon" value="Grey">
+                            <div class="b-input"></div>
+                        </label>
+                        <label class="b-contain" for="icon-light">
+                            <img src="../../icons/action/light/icon32-default.png" alt="Light" class="icons">
+                            <img src="../../icons/action/light/icon32-disabled.png" alt="Light" class="icons">
+                            <input id="icon-light" name="selected-icon" type="radio" data-option="selectedIcon" value="Light">
+                            <div class="b-input"></div>
+                        </label>
                     </div>
                 </section>
             </div>

pages/options/options.js

@@ -42,6 +42,7 @@ options._renderContents = function () {
 
     if (BrowserType.CHROMIUM) {
         document.getElementById('html-filter-div').style.display = 'none';
+        document.getElementById('block-google-fonts').style.display = 'none';
     }
 
     if (!chrome.browserAction.setIcon) {
@@ -67,6 +68,8 @@ options._renderOptionsPanel = function () {
     elements = options._optionElements;
     Object.assign(elements, { [Setting.INTERNAL_STATISTICS]: document.getElementById('checkbox-internal-statistics') });
 
+    Object.assign(elements, { [Setting.SELECTED_ICON]: document.getElementsByName('selected-icon') });
+
     elements.showIconBadge.checked = options._optionValues.showIconBadge;
     elements.blockMissing.checked = options._optionValues.blockMissing;
     elements.disablePrefetch.checked = options._optionValues.disablePrefetch;
@@ -77,7 +80,6 @@ options._renderOptionsPanel = function () {
     elements.domainsManipulateDOM.value = domainHtmlFilter;
     elements.negateHtmlFilterList.checked = options._optionValues.negateHtmlFilterList;
     elements.blockGoogleFonts.checked = options._optionValues.blockGoogleFonts;
-    elements.selectedIcon.value = options._optionValues.selectedIcon;
     elements.internalStatistics.checked = options._optionValues.internalStatistics;
     elements.allowedDomainsGoogleFonts.value = domainAllowedGoogleFonts;
     elements.storageType = options._optionValues.storageType;
@@ -105,6 +107,14 @@ options._renderOptionsPanel = function () {
         document.getElementById('storage-type-sync').checked = true;
     }
 
+    if (options._optionValues.selectedIcon === 'Default') {
+        document.getElementById('icon-default').checked = true;
+    } else if (options._optionValues.selectedIcon === 'Grey') {
+        document.getElementById('icon-grey').checked = true;
+    } else if (options._optionValues.selectedIcon === 'Light') {
+        document.getElementById('icon-light').checked = true;
+    }
+
     document.getElementById('last-mapping-update').textContent += ' ' + lastMappingUpdate;
     document.getElementById('negate-html-filter-list-warning').addEventListener('click', function () { options._onLinkClick(Links.CODEBERG_HTML_FILTER); });
     document.getElementById('link-welcome-page').addEventListener('click', function () { options._onLinkClick(Links.WELCOME); });
@@ -153,13 +163,14 @@ options._registerOptionChangedEventListeners = function (elements) {
     elements.domainsManipulateDOM.addEventListener('keyup', options._onOptionChanged);
     elements.negateHtmlFilterList.addEventListener('change', options._onOptionChanged);
     elements.blockGoogleFonts.addEventListener('change', options._onOptionChanged);
-    elements.selectedIcon.addEventListener('change', options._onOptionChanged);
+    elements.selectedIcon[0].addEventListener('change', options._onOptionChanged);
+    elements.selectedIcon[1].addEventListener('change', options._onOptionChanged);
+    elements.selectedIcon[2].addEventListener('change', options._onOptionChanged);
     elements.ruleSets[0].addEventListener('change', ruleGenerator.openRuleSet);
     elements.ruleSets[1].addEventListener('change', ruleGenerator.openRuleSet);
     elements.copyRuleSet.addEventListener('click', ruleGenerator.copyRuleSet);
     elements.internalStatistics.addEventListener('change', options._onOptionChanged);
     elements.allowedDomainsGoogleFonts.addEventListener('keyup', options._onOptionChanged);
-    elements.selectedIcon.addEventListener('change', options._onOptionChanged);
 };
 
 options._registerMiscellaneousEventListeners = function () {