From 809b4f2ef83675bfd0942e03923426e29353d85c Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Mon, 8 Aug 2016 18:26:18 +0200 Subject: [PATCH 1/5] Theming: Add preview for login screen --- apps/theming/css/settings-admin.css | 14 ++++++++++++ apps/theming/js/settings-admin.js | 19 +++++++++++---- apps/theming/lib/Settings/Admin.php | 4 ++++ apps/theming/lib/ThemingDefaults.php | 28 +++++++++++++++++++++++ apps/theming/templates/settings-admin.php | 5 +++- apps/theming/tests/Settings/AdminTest.php | 8 +++++++ 6 files changed, 73 insertions(+), 5 deletions(-) diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css index 53214b245c639..4afa91f21eb05 100644 --- a/apps/theming/css/settings-admin.css +++ b/apps/theming/css/settings-admin.css @@ -32,3 +32,17 @@ 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; +} \ No newline at end of file diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index 01ff9123842c3..a18874941e84f 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 d0a9f554084d6..f251af34ce4e3 100644 --- a/apps/theming/lib/Settings/Admin.php +++ b/apps/theming/lib/Settings/Admin.php @@ -72,6 +72,10 @@ public function getForm() { '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/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php index 7b846919db358..63351214abf64 100644 --- a/apps/theming/lib/ThemingDefaults.php +++ b/apps/theming/lib/ThemingDefaults.php @@ -113,6 +113,34 @@ public function getMailHeaderColor() { return $this->config->getAppValue('theming', 'color', $this->color); } + /** + * Themed logo url + * + * @return string + */ + public function getLogo() { + $logo = $this->config->getAppValue('theming', 'logoMime'); + $pathToLogo = $this->config->getSystemValue('datadirectory', \OC::$SERVERROOT . '/data/') . '/themedinstancelogo'; + if(!$logo || !file_exists($pathToLogo)) { + return $this->urlGenerator->imagePath('core','logo.svg'); + } else { + return $this->urlGenerator->linkToRoute('theming.Theming.getLogo'); + } + } + /** + * Themed background image url + * + * @return string + */ + public function getBackground() { + $backgroundLogo = $this->config->getAppValue('theming', 'backgroundMime'); + $pathToLogo = $this->config->getSystemValue('datadirectory', \OC::$SERVERROOT . '/data/') . '/themedbackgroundlogo'; + if(!$backgroundLogo || !file_exists($pathToLogo)) { + return $this->urlGenerator->imagePath('core','background.jpg'); + } else { + return $this->urlGenerator->linkToRoute('theming.Theming.getLoginBackground'); + } + } /** * Increases the cache buster key */ diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php index 50c4a8fb5ecba..66288d37656dd 100644 --- a/apps/theming/templates/settings-admin.php +++ b/apps/theming/templates/settings-admin.php @@ -73,6 +73,9 @@ -

+

+
+ +
diff --git a/apps/theming/tests/Settings/AdminTest.php b/apps/theming/tests/Settings/AdminTest.php index 18c2064e8cec4..73339cf86b734 100644 --- a/apps/theming/tests/Settings/AdminTest.php +++ b/apps/theming/tests/Settings/AdminTest.php @@ -93,6 +93,10 @@ public function testGetFormNoErrors() { '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 @@ public function testGetFormWithErrors() { 'slogan' => 'MySlogan', 'color' => '#fff', 'uploadLogoRoute' => '/my/route', + 'logo' => null, + 'logoMime' => null, + 'background' => null, + 'backgroundMime' => null, ]; $expected = new TemplateResponse('theming', 'settings-admin', $params, ''); From 119dbf6b16d5821cb6af92f452e4ebcbe61b9fc0 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Mon, 8 Aug 2016 18:28:49 +0200 Subject: [PATCH 2/5] Theming: Hide undo button on default values --- apps/theming/js/settings-admin.js | 31 ++++++++++++++++++++++- apps/theming/templates/settings-admin.php | 4 ++- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index a18874941e84f..5f1f7385de147 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,15 @@ $(document).ready(function () { $('html > head').append($('')); + $('#theming .theme-undo').each(function(index) { + var setting = $(this).data('setting'); + if(setting === 'logoMime' || setting == 'backgroundMime') { + var value = $('#current-'+setting).val(); + } else { + var value = $('#theming-'+setting).val(); + } + hideUndoButton(setting, value); + }); var uploadParamsLogo = { pasteZone: null, dropZone: null, @@ -192,11 +220,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 66288d37656dd..b6c970402308f 100644 --- a/apps/theming/templates/settings-admin.php +++ b/apps/theming/templates/settings-admin.php @@ -60,14 +60,16 @@

+ - +

+ From c103b4eb5be70c6b504576f71577efd56ff94345 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Tue, 9 Aug 2016 18:00:15 +0200 Subject: [PATCH 3/5] Add unit tests ans small js fixes --- apps/theming/js/settings-admin.js | 7 ++-- apps/theming/tests/ThemingDefaultsTest.php | 40 ++++++++++++++++++++++ 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index 5f1f7385de147..77777d2dde933 100644 --- a/apps/theming/js/settings-admin.js +++ b/apps/theming/js/settings-admin.js @@ -136,12 +136,11 @@ $(document).ready(function () { $('html > head').append($('')); - $('#theming .theme-undo').each(function(index) { + $('#theming .theme-undo').each(function() { var setting = $(this).data('setting'); - if(setting === 'logoMime' || setting == 'backgroundMime') { + var value = $('#theming-'+setting).val(); + if(setting === 'logoMime' || setting === 'backgroundMime') { var value = $('#current-'+setting).val(); - } else { - var value = $('#theming-'+setting).val(); } hideUndoButton(setting, value); }); diff --git a/apps/theming/tests/ThemingDefaultsTest.php b/apps/theming/tests/ThemingDefaultsTest.php index 6ef7deea152b9..c253f6cfa28b9 100644 --- a/apps/theming/tests/ThemingDefaultsTest.php +++ b/apps/theming/tests/ThemingDefaultsTest.php @@ -368,4 +368,44 @@ public function testUndoDefaultAction() { $this->assertSame('', $this->template->undo('defaultitem')); } + + public function testGetBackgroundDefault() { + $this->config + ->expects($this->once()) + ->method('getAppValue') + ->with('theming', 'backgroundMime') + ->willReturn(''); + $expected = $this->urlGenerator->imagePath('core','background.jpg'); + $this->assertEquals($expected, $this->template->getBackground()); + } + + public function testGetBackgroundCustom() { + $this->config + ->expects($this->once()) + ->method('getAppValue') + ->with('theming', 'backgroundMime') + ->willReturn('image/svg+xml'); + $expected = $this->urlGenerator->linkToRoute('theming.Theming.getLoginBackground'); + $this->assertEquals($expected, $this->template->getBackground()); + } + + public function testGetLogoDefault() { + $this->config + ->expects($this->once()) + ->method('getAppValue') + ->with('theming', 'logoMime') + ->willReturn(''); + $expected = $this->urlGenerator->imagePath('core','logo.svg'); + $this->assertEquals($expected, $this->template->getLogo()); + } + + public function testGetLogoCustom() { + $this->config + ->expects($this->once()) + ->method('getAppValue') + ->with('theming', 'logoMime') + ->willReturn('image/svg+xml'); + $expected = $this->urlGenerator->linkToRoute('theming.Theming.getLogo'); + $this->assertEquals($expected, $this->template->getLogo()); + } } From 338c7dfc8bfdcadc1c0f5d1db6f9abfea4eb4bea Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Wed, 10 Aug 2016 13:34:16 +0200 Subject: [PATCH 4/5] Use IRootFolder for checking image existence --- apps/theming/lib/ThemingDefaults.php | 14 +++++++++----- apps/theming/tests/ThemingDefaultsTest.php | 7 ++++++- lib/private/Server.php | 3 ++- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php index 63351214abf64..19b6004dcc3e9 100644 --- a/apps/theming/lib/ThemingDefaults.php +++ b/apps/theming/lib/ThemingDefaults.php @@ -28,6 +28,7 @@ use OCP\IConfig; use OCP\IL10N; use OCP\IURLGenerator; +use OCP\Files\IRootFolder; class ThemingDefaults extends \OC_Defaults { @@ -46,6 +47,8 @@ class ThemingDefaults extends \OC_Defaults { private $slogan; /** @var string */ private $color; + /** @var IRootFolder */ + private $rootFolder; /** * ThemingDefaults constructor. @@ -54,16 +57,19 @@ class ThemingDefaults extends \OC_Defaults { * @param IL10N $l * @param IURLGenerator $urlGenerator * @param \OC_Defaults $defaults + * @param IRootFolder $rootFolder */ public function __construct(IConfig $config, IL10N $l, IURLGenerator $urlGenerator, - \OC_Defaults $defaults + \OC_Defaults $defaults, + IRootFolder $rootFolder ) { parent::__construct(); $this->config = $config; $this->l = $l; $this->urlGenerator = $urlGenerator; + $this->rootFolder = $rootFolder; $this->name = $defaults->getName(); $this->url = $defaults->getBaseUrl(); @@ -120,8 +126,7 @@ public function getMailHeaderColor() { */ public function getLogo() { $logo = $this->config->getAppValue('theming', 'logoMime'); - $pathToLogo = $this->config->getSystemValue('datadirectory', \OC::$SERVERROOT . '/data/') . '/themedinstancelogo'; - if(!$logo || !file_exists($pathToLogo)) { + if(!$logo || !$this->rootFolder->nodeExists('themedinstancelogo')) { return $this->urlGenerator->imagePath('core','logo.svg'); } else { return $this->urlGenerator->linkToRoute('theming.Theming.getLogo'); @@ -134,8 +139,7 @@ public function getLogo() { */ public function getBackground() { $backgroundLogo = $this->config->getAppValue('theming', 'backgroundMime'); - $pathToLogo = $this->config->getSystemValue('datadirectory', \OC::$SERVERROOT . '/data/') . '/themedbackgroundlogo'; - if(!$backgroundLogo || !file_exists($pathToLogo)) { + if(!$backgroundLogo || !$this->rootFolder->nodeExists('themedbackgroundlogo')) { return $this->urlGenerator->imagePath('core','background.jpg'); } else { return $this->urlGenerator->linkToRoute('theming.Theming.getLoginBackground'); diff --git a/apps/theming/tests/ThemingDefaultsTest.php b/apps/theming/tests/ThemingDefaultsTest.php index c253f6cfa28b9..6d51b23ced078 100644 --- a/apps/theming/tests/ThemingDefaultsTest.php +++ b/apps/theming/tests/ThemingDefaultsTest.php @@ -27,6 +27,7 @@ use OCP\IConfig; use OCP\IL10N; use OCP\IURLGenerator; +use OCP\Files\IRootFolder; use Test\TestCase; class ThemingDefaultsTest extends TestCase { @@ -40,11 +41,14 @@ class ThemingDefaultsTest extends TestCase { private $defaults; /** @var ThemingDefaults */ private $template; + /** @var IRootFolder */ + private $rootFolder; public function setUp() { $this->config = $this->getMock('\\OCP\\IConfig'); $this->l10n = $this->getMock('\\OCP\\IL10N'); $this->urlGenerator = $this->getMock('\\OCP\\IURLGenerator'); + $this->rootFolder = $this->getMock('\\OCP\\Files\\IRootFolder'); $this->defaults = $this->getMockBuilder('\\OC_Defaults') ->disableOriginalConstructor() ->getMock(); @@ -68,7 +72,8 @@ public function setUp() { $this->config, $this->l10n, $this->urlGenerator, - $this->defaults + $this->defaults, + $this->rootFolder ); return parent::setUp(); diff --git a/lib/private/Server.php b/lib/private/Server.php index 86eee54be7076..1d512129c71b5 100644 --- a/lib/private/Server.php +++ b/lib/private/Server.php @@ -655,7 +655,8 @@ public function __construct($webRoot, \OC\Config $config) { $this->getConfig(), $this->getL10N('theming'), $this->getURLGenerator(), - new \OC_Defaults() + new \OC_Defaults(), + $this->getRootFolder() ); } return new \OC_Defaults(); From 086b6ab6c290fd5e688accec09a813364224a93c Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Thu, 11 Aug 2016 13:41:06 +0200 Subject: [PATCH 5/5] Fix CSS code style --- apps/theming/css/settings-admin.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css index 4afa91f21eb05..8746a5ed98101 100644 --- a/apps/theming/css/settings-admin.css +++ b/apps/theming/css/settings-admin.css @@ -34,15 +34,15 @@ div#theming_settings_msg { } #theming-preview { - width:230px; - height:140px; + width: 230px; + height: 140px; background-size: cover; background-position: center center; text-align: center; - margin-left:93px; + margin-left: 93px; } #theming-preview img { - max-width:20%; - max-height:20%; - margin-top:20px; + max-width: 20%; + max-height: 20%; + margin-top: 20px; } \ No newline at end of file