diff options
| -rw-r--r-- | apps/theming/css/settings-admin.css | 29 | ||||
| -rw-r--r-- | apps/theming/js/settings-admin.js | 69 | ||||
| -rw-r--r-- | apps/theming/lib/Controller/ThemingController.php | 4 | ||||
| -rw-r--r-- | apps/theming/templates/settings-admin.php | 5 |
4 files changed, 62 insertions, 45 deletions
diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css index 60b9c080ad6..8d1e19cc43c 100644 --- a/apps/theming/css/settings-admin.css +++ b/apps/theming/css/settings-admin.css @@ -38,19 +38,39 @@ #theming label span { display: inline-block; - min-width: 90px; + min-width: 120px; padding: 8px 0px; + vertical-align: top; } -#theming .icon-upload, #theming .icon-loading-small { display: inline-flex; padding: 8px; margin: 2px 0px; } +#theming .icon-upload { + padding: 8px 20px; + width: 20px; + margin: 2px 0px; + min-height: 32px; + display: inline-block; +} + +#theming_settings_status { + height: 26px; + margin: 10px; + +} +#theming_settings_loading.icon-loading-small { + float: left; + padding: 0; + margin-right: 10px; +} div#theming_settings_msg { - margin-left: 10px; + margin: 8px; + margin-left:20px; + display: inline-block; } #theming-preview { @@ -59,7 +79,8 @@ div#theming_settings_msg { background-size: cover; background-position: center center; text-align: center; - margin-left: 93px; + margin-left: 123px; + margin-top: 10px; } #theming-preview img { diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index 216463b15e0..709243594ba 100644 --- a/apps/theming/js/settings-admin.js +++ b/apps/theming/js/settings-admin.js @@ -21,15 +21,18 @@ function setThemingValue(setting, value) { OC.msg.startSaving('#theming_settings_msg'); + $('#theming_settings_loading').show(); $.post( OC.generateUrl('/apps/theming/ajax/updateStylesheet'), {'setting' : setting, 'value' : value} ).done(function(response) { - OC.msg.finishedSaving('#theming_settings_msg', response); + //OC.msg.finishedSaving('#theming_settings_msg', response); + OC.msg.startAction('#theming_settings_msg', t('theming', 'Loading preview…')); hideUndoButton(setting, value); + preview(setting, value); }).fail(function(response) { OC.msg.finishedSaving('#theming_settings_msg', response); + $('#theming_settings_loading').hide(); }); - preview(setting, value); } function calculateLuminance(rgb) { @@ -47,47 +50,33 @@ 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 (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; - - $('#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) + '\'); }' - ); - } + var stylesheetsLoaded = 2; + var reloadStylesheets = function(cssFile) { + var queryString = '?reload=' + new Date().getTime(); + var url = OC.generateUrl(cssFile) + queryString; + var old = $('link[href*="' + cssFile.replace("/","\/") + '"]'); + var stylesheet = $("<link/>", { + rel: "stylesheet", + type: "text/css", + href: url + }); + stylesheet.load(function () { + $(old).remove(); + stylesheetsLoaded--; + if(stylesheetsLoaded === 0) { + $('#theming_settings_loading').hide(); + var response = { status: 'success', data: {message: t('theming', 'Saved')}}; + OC.msg.finishedSaving('#theming_settings_msg', response); + } + }); + stylesheet.appendTo("head"); + }; + + reloadStylesheets('/css/core/server.css'); + reloadStylesheets('/apps/theming/styles'); var timestamp = new Date().getTime(); if (setting === 'logoMime') { diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php index b2d603bb68a..ae3060b1b7d 100644 --- a/apps/theming/lib/Controller/ThemingController.php +++ b/apps/theming/lib/Controller/ThemingController.php @@ -163,6 +163,10 @@ class ThemingController extends Controller { } $this->themingDefaults->set($setting, $value); + + // reprocess server scss for preview + $cssCached = $this->scssCacher->process(\OC::$SERVERROOT, '/core/css/server.scss', 'core'); + return new DataResponse( [ 'data' => diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php index f7c8f591fc7..858329eca48 100644 --- a/apps/theming/templates/settings-admin.php +++ b/apps/theming/templates/settings-admin.php @@ -29,7 +29,10 @@ style('theming', 'settings-admin'); <div id="theming" class="section"> <h2 class="inlineblock"><?php p($l->t('Theming')); ?></h2> <p class="settings-hint"><?php p($l->t('Theming makes it possible to easily customize the look and feel of your instance and supported clients. This will be visible for all users.')); ?></p> - <div id="theming_settings_msg" class="msg success inlineblock" style="display: none;">Saved</div> + <div id="theming_settings_status"> + <div id="theming_settings_loading" class="icon-loading-small" style="display: none;"></div> + <span id="theming_settings_msg" class="msg success" style="display: none;">Saved</span> + </div> <?php if ($_['themable'] === false) { ?> <p> <?php p($_['errorMessage']) ?> |