Theming: Add preview for login screen

diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css
index 53214b245c639090cb4352c74d635c3ad0c9635f..4139b2f46a3871cabb11634f222caec122829542 100644 (file)
--- 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 01ff9123842c366b9ce14f9e22f52b354ec9bb34..a18874941e84f996b6991159f721648384b0e138 100644 (file)
--- 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 1f79449e658161731a2fb9de521f5db03cc0ccf4..afd74ced2175c0b24396ebd8b4e42dcd5cb6235a 100644 (file)
--- 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 50c4a8fb5ecba08aa373c2f2658fe4f7a9e74288..66288d37656dd7b951d745b5b90c8bc354d53466 100644 (file)
--- a/apps/theming/templates/settings-admin.php
+++ b/apps/theming/templates/settings-admin.php
@@ -73,6 +73,9 @@ style('theming', 'settings-admin');
                        <label for="upload-login-background" class="button icon-upload svg" id="upload-login-background" title="<?php p($l->t("Upload new login background")) ?>"></label>
                        <span data-setting="backgroundMime" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
                </form>
-               </p>
+       </p>
+               <div id="theming-preview" style="background-color:<?php p($_['color']);?>; background-image:url(<?php p($_['background']); ?>);">
+                       <img src="<?php p($_['logo']); ?>" id="theming-preview-logo" />
+               </div>
        <?php } ?>
 </div>

diff --git a/apps/theming/tests/Settings/AdminTest.php b/apps/theming/tests/Settings/AdminTest.php
index 18c2064e8cec441fe50017fe059e4362b231c93c..73339cf86b734add77721a893ea9f329ad4aea94 100644 (file)
--- 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, '');