Theming: Preview for colorized checkboxes
This commit is contained in:
parent
b1830b74fe
commit
5c12c8cb02
|
@ -51,24 +51,35 @@ function preview(setting, value) {
|
||||||
var headerClass = document.getElementById('header');
|
var headerClass = document.getElementById('header');
|
||||||
var expandDisplayNameClass = document.getElementById('expandDisplayName');
|
var expandDisplayNameClass = document.getElementById('expandDisplayName');
|
||||||
var headerAppName = headerClass.getElementsByClassName('header-appname')[0];
|
var headerAppName = headerClass.getElementsByClassName('header-appname')[0];
|
||||||
var textColor, icon;
|
var textColor, elementColor, icon;
|
||||||
|
|
||||||
if (calculateLuminance(value) > 0.5) {
|
var luminance = calculateLuminance(value);
|
||||||
|
var elementColor = value;
|
||||||
|
|
||||||
|
if (luminance > 0.5) {
|
||||||
textColor = "#000000";
|
textColor = "#000000";
|
||||||
icon = 'caret-dark';
|
icon = 'caret-dark';
|
||||||
} else {
|
} else {
|
||||||
textColor = "#ffffff";
|
textColor = "#ffffff";
|
||||||
icon = 'caret';
|
icon = 'caret';
|
||||||
}
|
}
|
||||||
|
if (luminance>0.8) {
|
||||||
|
elementColor = '#969696';
|
||||||
|
}
|
||||||
|
|
||||||
headerClass.style.background = value;
|
headerClass.style.background = value;
|
||||||
headerClass.style.backgroundImage = '../img/logo-icon.svg';
|
headerClass.style.backgroundImage = '../img/logo-icon.svg';
|
||||||
expandDisplayNameClass.style.color = textColor;
|
expandDisplayNameClass.style.color = textColor;
|
||||||
headerAppName.style.color = textColor;
|
headerAppName.style.color = textColor;
|
||||||
|
|
||||||
$(headerClass).find('.icon-caret').each(function() {
|
$('#previewStyles').html(
|
||||||
$(this).css('background-image', "url('" + OC.getRootPath() + '/core/img/actions/' + icon + ".svg')");
|
'#header .icon-caret { background-image: url(\'' + OC.getRootPath() + '/core/img/actions/' + icon + '.svg\') }' +
|
||||||
});
|
'input[type="checkbox"].checkbox:checked + label:before {' +
|
||||||
|
'background-image: url(\'' + OC.getRootPath() + '/core/img/actions/checkmark-white.svg\');' +
|
||||||
|
'background-color: ' + elementColor + ';' +
|
||||||
|
'background-position: center center; background-size:contain;' +
|
||||||
|
'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px; }'
|
||||||
|
);
|
||||||
}
|
}
|
||||||
if (setting === 'logoMime') {
|
if (setting === 'logoMime') {
|
||||||
console.log(setting);
|
console.log(setting);
|
||||||
|
@ -87,6 +98,8 @@ function preview(setting, value) {
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$('#theming [data-toggle="tooltip"]').tooltip();
|
$('#theming [data-toggle="tooltip"]').tooltip();
|
||||||
|
|
||||||
|
$('html > head').append($('<style type="text/css" id="previewStyles"></style>'));
|
||||||
|
|
||||||
var uploadParamsLogo = {
|
var uploadParamsLogo = {
|
||||||
pasteZone: null,
|
pasteZone: null,
|
||||||
dropZone: null,
|
dropZone: null,
|
||||||
|
|
Loading…
Reference in New Issue