Added: Thumbnails to symbol selection (#93)
This commit is contained in:
nobody
parent
910bbb51a2
commit
e3edf7ad19
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<select id="selected-icon" data-option="selectedIcon">
|
||||
<option value="Default">Default</option>
|
||||
<option value="Light">Light</option>
|
||||
<option value="Grey">Blue/Grey</option>
|
||||
</select>
|
||||
<div class="div-selected-icon">
|
||||
<label class="b-contain" for="icon-default">
|
||||
<img src="../../icons/action/default/icon32-default.png" alt="Default" class="icons">
|
||||
<img src="../../icons/action/default/icon32-disabled.png" alt="Default" class="icons">
|
||||
<input id="icon-default" name="selected-icon" type="radio" data-option="selectedIcon" value="Default">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
Loading…
Reference in New Issue