From d95aec2ed2a8a6f9afe169e828d1bbeb0a316618 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Wed, 24 Aug 2016 11:33:54 +0200 Subject: [PATCH 1/2] Theming: Add preview for login screen --- apps/theming/css/settings-admin.css | 15 +++++++++++++++ apps/theming/js/settings-admin.js | 19 +++++++++++++++---- apps/theming/lib/Settings/Admin.php | 4 ++++ apps/theming/templates/settings-admin.php | 5 ++++- apps/theming/tests/Settings/AdminTest.php | 8 ++++++++ 5 files changed, 46 insertions(+), 5 deletions(-) diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css index 53214b245c..4139b2f46a 100644 --- a/apps/theming/css/settings-admin.css +++ b/apps/theming/css/settings-admin.css @@ -32,3 +32,18 @@ div#theming_settings_msg { margin-left: 10px; } + +#theming-preview { + width: 230px; + height: 140px; + background-size: cover; + background-position: center center; + text-align: center; + margin-left: 93px; +} + +#theming-preview img { + max-width: 20%; + max-height: 20%; + margin-top: 20px; +} diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index 01ff912384..a18874941e 100644 --- a/apps/theming/js/settings-admin.js +++ b/apps/theming/js/settings-admin.js @@ -68,7 +68,7 @@ function preview(setting, value) { textColor = "#ffffff"; icon = 'caret'; } - if (luminance>0.8) { + if (luminance > 0.8) { elementColor = '#555555'; } @@ -87,16 +87,27 @@ function preview(setting, value) { 'background-image: url(\'data:image/svg+xml;base64,' + generateRadioButton(elementColor) + '\'); }' ); } + + var timestamp = new Date().getTime(); if (setting === 'logoMime') { - console.log(setting); var logos = document.getElementsByClassName('logo-icon'); - var timestamp = new Date().getTime(); + var previewImageLogo = document.getElementById('theming-preview-logo'); if (value !== '') { logos[0].style.backgroundImage = "url('" + OC.generateUrl('/apps/theming/logo') + "?v" + timestamp + "')"; logos[0].style.backgroundSize = "contain"; + previewImageLogo.src = OC.generateUrl('/apps/theming/logo') + "?v" + timestamp; } else { - logos[0].style.backgroundImage = "url('" + OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp +"')"; + logos[0].style.backgroundImage = "url('" + OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp + "')"; logos[0].style.backgroundSize = "contain"; + previewImageLogo.src = OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp; + } + } + if (setting === 'backgroundMime') { + var previewImage = document.getElementById('theming-preview'); + if (value !== '') { + previewImage.style.backgroundImage = "url('" + OC.generateUrl('/apps/theming/loginbackground') + "?v" + timestamp + "')"; + } else { + previewImage.style.backgroundImage = "url('" + OC.getRootPath() + '/core/img/background.jpg?v' + timestamp + "')"; } } } diff --git a/apps/theming/lib/Settings/Admin.php b/apps/theming/lib/Settings/Admin.php index 1f79449e65..afd74ced21 100644 --- a/apps/theming/lib/Settings/Admin.php +++ b/apps/theming/lib/Settings/Admin.php @@ -71,6 +71,10 @@ class Admin implements ISettings { 'url' => $this->themingDefaults->getBaseUrl(), 'slogan' => $this->themingDefaults->getSlogan(), 'color' => $this->themingDefaults->getMailHeaderColor(), + 'logo' => $this->themingDefaults->getLogo(), + 'logoMime' => $this->config->getAppValue('theming', 'logoMime', ''), + 'background' => $this->themingDefaults->getBackground(), + 'backgroundMime' => $this->config->getAppValue('theming', 'backgroundMime', ''), 'uploadLogoRoute' => $path, ]; diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php index 50c4a8fb5e..66288d3765 100644 --- a/apps/theming/templates/settings-admin.php +++ b/apps/theming/templates/settings-admin.php @@ -73,6 +73,9 @@ style('theming', 'settings-admin'); -

+

+
+ +
diff --git a/apps/theming/tests/Settings/AdminTest.php b/apps/theming/tests/Settings/AdminTest.php index 18c2064e8c..73339cf86b 100644 --- a/apps/theming/tests/Settings/AdminTest.php +++ b/apps/theming/tests/Settings/AdminTest.php @@ -93,6 +93,10 @@ class AdminTest extends TestCase { 'slogan' => 'MySlogan', 'color' => '#fff', 'uploadLogoRoute' => '/my/route', + 'logo' => null, + 'logoMime' => null, + 'background' => null, + 'backgroundMime' => null, ]; $expected = new TemplateResponse('theming', 'settings-admin', $params, ''); @@ -139,6 +143,10 @@ class AdminTest extends TestCase { 'slogan' => 'MySlogan', 'color' => '#fff', 'uploadLogoRoute' => '/my/route', + 'logo' => null, + 'logoMime' => null, + 'background' => null, + 'backgroundMime' => null, ]; $expected = new TemplateResponse('theming', 'settings-admin', $params, ''); From 3d38cb95709e735483a644e26bd8c444b07c3317 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Wed, 24 Aug 2016 11:34:45 +0200 Subject: [PATCH 2/2] Theming: Hide undo button on default values --- apps/theming/js/settings-admin.js | 30 ++++++++++++++++++++++- apps/theming/templates/settings-admin.php | 4 ++- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index a18874941e..77777d2dde 100644 --- a/apps/theming/js/settings-admin.js +++ b/apps/theming/js/settings-admin.js @@ -109,6 +109,25 @@ function preview(setting, value) { } else { previewImage.style.backgroundImage = "url('" + OC.getRootPath() + '/core/img/background.jpg?v' + timestamp + "')"; } + + } + hideUndoButton(setting, value); +} + +function hideUndoButton(setting, value) { + var themingDefaults = { + name: 'Nextcloud', + slogan: t('lib', 'a safe home for all your data'), + url: 'https://nextcloud.com', + color: '#0082c9', + logoMime: '', + backgroundMime: '' + }; + + if (value === themingDefaults[setting] || value === '') { + $('.theme-undo[data-setting=' + setting + ']').hide(); + } else { + $('.theme-undo[data-setting=' + setting + ']').show(); } } @@ -117,6 +136,14 @@ $(document).ready(function () { $('html > head').append($('')); + $('#theming .theme-undo').each(function() { + var setting = $(this).data('setting'); + var value = $('#theming-'+setting).val(); + if(setting === 'logoMime' || setting === 'backgroundMime') { + var value = $('#current-'+setting).val(); + } + hideUndoButton(setting, value); + }); var uploadParamsLogo = { pasteZone: null, dropZone: null, @@ -192,11 +219,12 @@ $(document).ready(function () { if (setting === 'color') { var colorPicker = document.getElementById('theming-color'); colorPicker.style.backgroundColor = response.data.value; - colorPicker.value = response.data.value.slice(1); + colorPicker.value = response.data.value.slice(1).toUpperCase(); } else if (setting !== 'logoMime' && setting !== 'backgroundMime') { var input = document.getElementById('theming-'+setting); input.value = response.data.value; } + preview(setting, response.data.value); OC.msg.finishedSaving('#theming_settings_msg', response); }); diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php index 66288d3765..b6c9704023 100644 --- a/apps/theming/templates/settings-admin.php +++ b/apps/theming/templates/settings-admin.php @@ -60,14 +60,16 @@ style('theming', 'settings-admin');

+ - +

+