Theming: Preview for colorized checkboxes

diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
index 941ec5c711bddc4ce25fc9b711986ce5637cd9bf..bf3571e24385eab36c5974156de3e067767c0fc5 100644 (file)
--- a/apps/theming/js/settings-admin.js
+++ b/apps/theming/js/settings-admin.js
@@ -51,24 +51,35 @@ function preview(setting, value) {
                var headerClass = document.getElementById('header');
                var expandDisplayNameClass = document.getElementById('expandDisplayName');
                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";
                        icon = 'caret-dark';
                } else {
                        textColor = "#ffffff";
                        icon = 'caret';
                }
+               if (luminance>0.8) {
+                       elementColor = '#969696';
+               }
 
                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 + 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') {
                console.log(setting);
@@ -87,6 +98,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,