filippodb
/
LocalCDN-Firefox-Chrome-Brave
mirror of https://codeberg.org/nobody/LocalCDN.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implemented: Validation of hex colors and other improvements (#109)

This commit is contained in:
nobody 2020-09-25 16:19:34 +02:00
parent 95f4e0bd1b
commit d8a0991085
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
3 changed files with 48 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
pages/options/options.css
View File

@ -79,7 +79,7 @@ body {
.div-selected-icon {
margin-top: 10px;
padding-right: 25px;
min-width: 140px;
min-width: 113px;
}
.div-selected-icon > label {
@ -214,7 +214,7 @@ body {
.div-badge {
margin-top: 10px;
padding-left: 25px;
padding-left: 30px;
border-left: 1px solid #bbb;
}
@ -236,13 +236,33 @@ body {
#pre-badged-background-color, #pre-badged-text-color {
width: 30px;
height: auto;
margin: 10px 5px 0px 0px;
height: 30px;
margin-right: 5px;
}
.colorpicker {
display: flex;
padding-bottom: 5px;
margin-top: 10px;
align-items: center;
}
.colorpicker > input {
margin-top: 0px !important;
}
.color-error {
color: red;
}
#badged-background-color, #badged-text-color {
max-width: 150px;
}
.img-restore-color {
margin-left: 5px;
height: 15px;
cursor: pointer;
}
.import-export > input[type="button"] {

4
pages/options/options.html
View File

@ -230,11 +230,11 @@
<div id="badge-preview-bottom">
<div class="colorpicker">
<div id="pre-badged-background-color"></div>
<input id="badged-background-color" class="input-text"><br>
<input id="badged-background-color" class="input-text" maxlength="7"><img id="restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
</div>
<div class="colorpicker">
<div id="pre-badged-text-color"></div>
<input id="badged-text-color" class="input-text">
<input id="badged-text-color" class="input-text" maxlength="7"><img id="restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
</div>
</div>
</div>

22
pages/options/options.js
View File

@ -140,6 +140,9 @@ options._renderOptionsPanel = function () {
document.getElementById('import-data').addEventListener('click', storageManager.startImportFilePicker);
document.getElementById('import-file-picker').addEventListener('change', storageManager.handleImportFilePicker);
document.getElementById('badged-background-color').addEventListener('keyup', options._onChangedHexColor);
document.getElementById('badged-text-color').addEventListener('keyup', options._onChangedHexColor);
document.getElementById('restore-background-color').addEventListener('click', options._setDefaultColor);
document.getElementById('restore-text-color').addEventListener('click', options._setDefaultColor);
};
@ -509,6 +512,25 @@ options._changeTab = function ({ target }) {
}
};
options._onChangedHexColor = function ({ target }) {
if (/#([a-f0-9]{3}){1,2}\b/i.test(target.value)) {
target.classList.remove('color-error');
if (target.id === 'badged-text-color') {
options._textColor = target.value;
wrappers.setBadgeTextColor({color: options._textColor});
document.getElementById('counter-preview-badge').style.color = options._textColor;
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
} else {
options._backgroundColor = target.value;
wrappers.setBadgeBackgroundColor({color: options._backgroundColor});
document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
}
} else {
target.classList.add('color-error');
}
};
/**
* Updates the domain lists if the options page has no focus.
* document.hasFocus() prevents problems with keyboard input.