Implemented: Customize badge colors (#109)
This commit is contained in:
nobody
parent
15b1037a4b
commit
46f5ffac76
|
|
@ -78,7 +78,9 @@ const Setting = {
|
|||
'INTERNAL_STATISTICS': 'internalStatistics',
|
||||
'INTERNAL_STATISTICS_DATA': 'internalStatisticsData',
|
||||
'ALLOWED_DOMAINS_GOOGLE_FONTS': 'allowedDomainsGoogleFonts',
|
||||
'STORAGE_TYPE': 'storageType'
|
||||
'STORAGE_TYPE': 'storageType',
|
||||
'BADGE_COLOR': 'badgeColor',
|
||||
'BADGE_TEXT_COLOR': 'badgeTextColor'
|
||||
};
|
||||
|
||||
const SettingDefaults = {
|
||||
|
|
|
|||
|
|
@ -100,11 +100,3 @@ main._showReleaseNotes = function (details) {
|
|||
*/
|
||||
chrome.runtime.onInstalled.addListener(main._showReleaseNotes);
|
||||
main._initializeSettings();
|
||||
|
||||
wrappers.setBadgeBackgroundColor({
|
||||
'color': [74, 130, 108, 255]
|
||||
});
|
||||
|
||||
wrappers.setBadgeTextColor({
|
||||
'color': [255, 255, 255, 255]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
/**
|
||||
* Internal API Wrapper Module
|
||||
* Belongs to Decentraleyes.
|
||||
* Belongs to LocalCDN.
|
||||
*
|
||||
* @author Thomas Rientjes
|
||||
* @since 2017-12-03
|
||||
|
||||
* @author nobody
|
||||
* @since 2020-07-09
|
||||
|
||||
* @license MPL 2.0
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
|
|
@ -26,6 +30,10 @@ var wrappers = {};
|
|||
wrappers.setBadgeBackgroundColor = function (details) {
|
||||
if (chrome.browserAction.setBadgeBackgroundColor !== undefined) {
|
||||
chrome.browserAction.setBadgeBackgroundColor(details);
|
||||
|
||||
storageManager.type.set({
|
||||
[Setting.BADGE_COLOR]: details.color
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -38,6 +46,10 @@ wrappers.setBadgeText = function (details) {
|
|||
wrappers.setBadgeTextColor = function (details) {
|
||||
if (chrome.browserAction.setBadgeTextColor !== undefined) {
|
||||
chrome.browserAction.setBadgeTextColor(details);
|
||||
|
||||
storageManager.type.set({
|
||||
[Setting.BADGE_TEXT_COLOR]: details.color
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -49,3 +61,11 @@ wrappers.setIcon = function (details, type) {
|
|||
}
|
||||
chrome.browserAction.setIcon(details);
|
||||
};
|
||||
|
||||
storageManager.type.get([Setting.BADGE_COLOR, Setting.BADGE_TEXT_COLOR], function (items) {
|
||||
wrappers.textColor = items.badgeTextColor || '#FFFFFF';
|
||||
wrappers.backgroundColor = items.badgeColor || '#4A826C';
|
||||
|
||||
wrappers.setBadgeTextColor({color: wrappers.textColor});
|
||||
wrappers.setBadgeBackgroundColor({color: wrappers.backgroundColor});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -77,7 +77,9 @@ body {
|
|||
}
|
||||
|
||||
.div-selected-icon {
|
||||
padding-top: 10px
|
||||
margin-top: 10px;
|
||||
padding-right: 25px;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.div-selected-icon > label {
|
||||
|
|
@ -205,15 +207,47 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#import-data, #export-data, #cdn, #framework {
|
||||
padding: 5px;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
.div-icons-badge-colors {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
.div-badge {
|
||||
margin-top: 10px;
|
||||
padding-left: 25px;
|
||||
border-left: 1px solid #bbb;
|
||||
}
|
||||
|
||||
#badge-preview-top {
|
||||
position: relative;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
#counter-preview-badge {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
color: white;
|
||||
background: black;
|
||||
padding: 1px 6px;
|
||||
font-size: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#pre-badged-background-color, #pre-badged-text-color {
|
||||
width: 30px;
|
||||
height: auto;
|
||||
margin: 10px 5px 0px 0px;
|
||||
}
|
||||
|
||||
.colorpicker {
|
||||
display: flex;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.import-export > input[type="button"] {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Miscellaneous
|
||||
|
|
@ -371,6 +405,17 @@ body[dir="rtl"] .input-text {
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 435px) {
|
||||
.div-icons-badge-colors {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.div-badge {
|
||||
border: none;
|
||||
padding-left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #202023;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,14 @@
|
|||
<title>LocalCDN Options</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="../../modules/internal/color-picker/color-picker.min.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="options.css">
|
||||
<link rel="stylesheet" type="text/css" href="../base.css">
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../modules/internal/color-picker/color-picker.min.js"></script>
|
||||
|
||||
<script src="../../core/constants.js"></script>
|
||||
<script src="../../core/storage-manager.js"></script>
|
||||
<script src="../../modules/internal/helpers.js"></script>
|
||||
|
|
@ -195,25 +199,45 @@
|
|||
<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 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 class="div-icons-badge-colors">
|
||||
<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>
|
||||
<div class="div-badge">
|
||||
<div id="badge-preview-top">
|
||||
<div>
|
||||
<img id="icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="Default" class="icons">
|
||||
<div id="counter-preview-badge"><span>17</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="badge-preview-bottom">
|
||||
<div class="colorpicker">
|
||||
<div id="pre-badged-background-color"></div>
|
||||
<input id="badged-background-color" class="input-text"><br>
|
||||
</div>
|
||||
<div class="colorpicker">
|
||||
<div id="pre-badged-text-color"></div>
|
||||
<input id="badged-text-color" class="input-text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -116,6 +116,8 @@ options._renderOptionsPanel = function () {
|
|||
document.getElementById('icon-light').checked = true;
|
||||
}
|
||||
|
||||
let url = chrome.runtime.getURL('icons/action/' + options._optionValues.selectedIcon.toLowerCase() + '/icon38-default.png');
|
||||
document.getElementById('icon-badge-preview').src = url;
|
||||
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); });
|
||||
|
|
@ -331,6 +333,33 @@ options._createList = function (type) {
|
|||
});
|
||||
};
|
||||
|
||||
options._colorPicker = function () {
|
||||
|
||||
storageManager.type.get([Setting.BADGE_COLOR, Setting.BADGE_TEXT_COLOR], function (items) {
|
||||
options._textColor = items.badgeTextColor || '#FFFFFF';
|
||||
options._backgroundColor = items.badgeColor || '#4A826C';
|
||||
|
||||
let badgeBackgroundColor = new CP(document.getElementById('badged-background-color'));
|
||||
badgeBackgroundColor.on('change', function(r, g, b) {
|
||||
options._backgroundColor = this.color(r, g, b);
|
||||
this.source.value = options._backgroundColor
|
||||
wrappers.setBadgeBackgroundColor({color: options._backgroundColor});
|
||||
document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
|
||||
document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
|
||||
});
|
||||
|
||||
let badgeTextColor = new CP(document.getElementById('badged-text-color'));
|
||||
badgeTextColor.on('change', function(r, g, b) {
|
||||
options._textColor = this.color(r, g, b);
|
||||
this.source.value = options._textColor
|
||||
wrappers.setBadgeTextColor({color: options._textColor});
|
||||
document.getElementById('counter-preview-badge').style.color = options._textColor;
|
||||
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Event Handlers
|
||||
*/
|
||||
|
|
@ -341,6 +370,7 @@ options._onDocumentLoaded = function () {
|
|||
options._optionElements = options._getOptionElements();
|
||||
options._languageSupported = helpers.languageIsFullySupported(language);
|
||||
options._scriptDirection = helpers.determineScriptDirection(language);
|
||||
options._colorPicker();
|
||||
|
||||
options._renderContents();
|
||||
};
|
||||
|
|
@ -393,6 +423,8 @@ options._onOptionChanged = function ({ target }) {
|
|||
|
||||
if (optionKey === Setting.SELECTED_ICON) {
|
||||
wrappers.setIcon({ path: optionValue }, 'Enabled');
|
||||
let url = chrome.runtime.getURL('icons/action/' + optionValue.toLowerCase() + '/icon38-default.png');
|
||||
document.getElementById('icon-badge-preview').src = url;
|
||||
}
|
||||
storageManager.type.set({
|
||||
[optionKey]: optionValue,
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
<li>Added: InstantSearch.js v3.7.0 and v4.8.1 (<a href="https://codeberg.org/nobody/LocalCDN/issues/117">#117</a>)</li>
|
||||
<li>Added: algoliasearch v3 in cdn.jsdelivr.net (<a href="https://codeberg.org/nobody/LocalCDN/issues/117">#117</a>)</li>
|
||||
<li>Added: autocomplete.js in cdn.jsdelivr.net (<a href="https://codeberg.org/nobody/LocalCDN/issues/117">#117</a>)</li>
|
||||
<li>Implemented: Customize badge colors (<a href="https://codeberg.org/nobody/LocalCDN/issues/109">#109</a>)</li>
|
||||
</ul>
|
||||
<div id="generator-section">
|
||||
<div class="topic-label">
|
||||
|
|
|
|||
Loading…
Reference in New Issue