diff options
Diffstat (limited to 'apps/theming/js/settings-admin.js')
| -rw-r--r-- | apps/theming/js/settings-admin.js | 27 |
1 files changed, 23 insertions, 4 deletions
diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index 941ec5c711b..01ff9123842 100644 --- a/apps/theming/js/settings-admin.js +++ b/apps/theming/js/settings-admin.js @@ -46,29 +46,46 @@ function calculateLuminance(rgb) { return (0.299*r + 0.587*g + 0.114*b)/255; } +function generateRadioButton(color) { + var radioButton = '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">' + + '<path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="' + color + '"/></svg>'; + return btoa(radioButton); +} + function preview(setting, value) { if (setting === 'color') { var headerClass = document.getElementById('header'); var expandDisplayNameClass = document.getElementById('expandDisplayName'); var headerAppName = headerClass.getElementsByClassName('header-appname')[0]; var textColor, icon; + var luminance = calculateLuminance(value); + var elementColor = value; - if (calculateLuminance(value) > 0.5) { + if (luminance > 0.5) { textColor = "#000000"; icon = 'caret-dark'; } else { textColor = "#ffffff"; icon = 'caret'; } + if (luminance>0.8) { + elementColor = '#555555'; + } headerClass.style.background = value; headerClass.style.backgroundImage = '../img/logo-icon.svg'; expandDisplayNameClass.style.color = textColor; headerAppName.style.color = textColor; - $(headerClass).find('.icon-caret').each(function() { - $(this).css('background-image', "url('" + OC.getRootPath() + '/core/img/actions/' + icon + ".svg')"); - }); + $('#previewStyles').html( + '#header .icon-caret { background-image: url(\'' + OC.getRootPath() + '/core/img/actions/' + icon + '.svg\') }' + + 'input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + 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:2px 6px 6px 2px; border-radius:1px;}' + + 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' + + 'background-image: url(\'data:image/svg+xml;base64,' + generateRadioButton(elementColor) + '\'); }' + ); } if (setting === 'logoMime') { console.log(setting); @@ -87,6 +104,8 @@ function preview(setting, value) { $(document).ready(function () { $('#theming [data-toggle="tooltip"]').tooltip(); + $('html > head').append($('<style type="text/css" id="previewStyles"></style>')); + var uploadParamsLogo = { pasteZone: null, dropZone: null, |