filippodb/LocalCDN-Firefox-Chrome-Brave
1
0
Fork 0
mirror of https://codeberg.org/nobody/LocalCDN.git synced 2024-12-23 08:30:38 +01:00
Code Issues Projects Releases Wiki Activity

Added: Thumbnails to symbol selection (#93)

Browse Source
This commit is contained in:
nobody 2020-08-31 08:18:58 +02:00
parent 910bbb51a2
commit e3edf7ad19
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
3 changed files with 50 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
pages/options/options.css
View File

@ -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;

27
pages/options/options.html
View File

@ -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>

17
pages/options/options.js
View File

@ -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 () {