Theming: Preview for colorized checkboxes

This commit is contained in:
Julius Haertl 2016-07-19 13:53:47 +02:00
parent b1830b74fe
commit 5c12c8cb02
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
1 changed files with 18 additions and 5 deletions

View File

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