Theming app: Add plain background color option

Signed-off-by: Julius Haertl <jus@bitgrid.net>

diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css
index 8cc3f0dfe14f7bc0db425316c7b70f594847becf..e401d77e4b6558cba60860896f00ed3f218c720e 100644 (file)
--- a/apps/theming/css/settings-admin.css
+++ b/apps/theming/css/settings-admin.css
@@ -26,10 +26,20 @@
     display: inline-block;
     visibility: hidden;
 }
-#theming form .theme-undo {
+form.uploadButton {
+    width: 356px;
+}
+#theming form .theme-undo,
+#theming .theme-remove-bg {
+    cursor: pointer;
+    opacity: .3;
+    padding: 7px;
+    vertical-align: top;
+    display: inline-block;
+    float: right;
     position: relative;
     top: 4px;
-    left: 158px;
+    right: 0px;
     visibility: visible;
 }
 #theming input[type='text']:focus + .theme-undo,
@@ -54,7 +64,8 @@
     margin: 2px 0px;
 }
 
-#theming .icon-upload {
+#theming .icon-upload,
+#theming .icon-loading-small {
     padding: 8px 20px;
     width: 20px;
     margin: 2px 0px;

diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 71e0df6735ec6e65a2e1d75355fec27db3ab5ba3..15753439db1af313dc196c9882cea9b3826ecac9 100644 (file)
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -64,4 +64,50 @@ input.primary {
        #body-login input.login {
                background-image: url('../../../core/img/actions/confirm.svg');
        }
+}
+
+// plain background color for login page
+@if $image-login-plain == 'true' {
+       #body-login, #firstrunwizard .firstrunwizard-header, #theming-preview {
+               background-image: none !important;
+               background-color: $color-primary;
+       }
+       #body-login {
+
+               a, label, p {
+                       color: $color-primary-text !important;
+               }
+
+               @if (lightness($color-primary) > 50) {
+                       #submit {
+                               border-color: nc-darken($color-primary, 20%);
+                               background-color: nc-darken($color-primary, 10%);
+                       }
+                       #submit:hover {
+                               border-color: nc-darken($color-primary, 10%);
+                               background-color: nc-darken($color-primary, 3%);
+                       }
+                       input[type='checkbox'].checkbox--white + label:before {
+                               border-color: nc-darken($color-primary, 40%) !important;
+                       }
+                       input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before,
+                       input[type='checkbox'].checkbox--white:focus + label:before {
+                               border-color: nc-darken($color-primary, 30%) !important;
+                       }
+                       input[type='checkbox'].checkbox--white:checked + label:before {
+                               border-color: nc-darken($color-primary, 30%) !important;
+                               background-image: url('../../../core/img/actions/checkbox-mark.svg');
+                               background-color: nc-darken($color-primary, 30%) !important;
+                       }
+               } @else {
+                       #submit {
+                               border-color: nc-lighten($color-primary, 20%);
+                               background-color: nc-lighten($color-primary, 5%);
+                       }
+                       #submit:hover {
+                               border-color: nc-lighten($color-primary, 10%);
+                               background-color: nc-lighten($color-primary, 3%);
+                       }
+               }
+       }
 }
\ No newline at end of file

diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
index 802f6e05c070261c6ec8a578c3e3b1579ca08d5c..5d91892c00717299a8d212c1806b1ba873c4b229 100644 (file)
--- a/apps/theming/js/settings-admin.js
+++ b/apps/theming/js/settings-admin.js
@@ -35,6 +35,7 @@ function setThemingValue(setting, value) {
                OC.msg.finishedSaving('#theming_settings_msg', response);
                $('#theming_settings_loading').hide();
        });
+
 }
 
 function preview(setting, value) {
@@ -74,18 +75,13 @@ function preview(setting, value) {
                        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 + "')";
-               }
-       }
 
        if (setting === 'name') {
                window.document.title = t('core', 'Admin') + " - " + value;
        }
+
+       hideUndoButton(setting, value);
+
 }
 
 function hideUndoButton(setting, value) {
@@ -103,6 +99,14 @@ function hideUndoButton(setting, value) {
        } else {
                $('.theme-undo[data-setting=' + setting + ']').show();
        }
+
+       if(setting === 'backgroundMime' && value !== 'backgroundColor')  {
+               $('.theme-remove-bg').show();
+       }
+       if(setting === 'backgroundMime' && value === 'backgroundColor')  {
+               $('.theme-remove-bg').hide();
+               $('.theme-undo[data-setting=backgroundMime]').show();
+       }
 }
 
 $(document).ready(function () {
@@ -116,6 +120,7 @@ $(document).ready(function () {
                }
                hideUndoButton(setting, value);
        });
+
        var uploadParamsLogo = {
                pasteZone: null,
                dropZone: null,
@@ -208,4 +213,16 @@ $(document).ready(function () {
                        preview(setting, response.data.value);
                });
        });
+
+       $('.theme-remove-bg').click(function() {
+               startLoading();
+               $.post(
+                       OC.generateUrl('/apps/theming/ajax/updateLogo'), {'backgroundColor' : true}
+               ).done(function(response) {
+                       preview('backgroundMime', 'backgroundColor');
+               }).fail(function(response) {
+                       OC.msg.finishedSaving('#theming_settings_msg', response);
+               });
+       });
+       
 });

diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php
index faaff1f2174cceb5e57b7aec50526d1d22c2fbbe..1b3420f3cb71d143f525100e2033afbaccc82c35 100644 (file)
--- a/apps/theming/lib/Controller/ThemingController.php
+++ b/apps/theming/lib/Controller/ThemingController.php
@@ -185,6 +185,20 @@ class ThemingController extends Controller {
         * @return DataResponse
         */
        public function updateLogo() {
+               $backgroundColor = $this->request->getParam('backgroundColor');
+               if($backgroundColor) {
+                       $this->themingDefaults->set('backgroundMime', 'backgroundColor');
+                       return new DataResponse(
+                               [
+                                       'data' =>
+                                               [
+                                                       'name' => 'backgroundColor',
+                                                       'message' => $this->l10n->t('Saved')
+                                               ],
+                                       'status' => 'success'
+                               ]
+                       );
+               }
                $newLogo = $this->request->getUploadedFile('uploadlogo');
                $newBackgroundLogo = $this->request->getUploadedFile('upload-login-background');
                if (empty($newLogo) && empty($newBackgroundLogo)) {

diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php
index 39547af49163e963c7348018968d59d6b21fd988..9509fc11077b6ca7b6a2eda8654e24c49463b5ff 100644 (file)
--- a/apps/theming/lib/ThemingDefaults.php
+++ b/apps/theming/lib/ThemingDefaults.php
@@ -190,6 +190,7 @@ class ThemingDefaults extends \OC_Defaults {
 
                $variables['image-logo'] = "'".$this->urlGenerator->getAbsoluteURL($this->getLogo())."'";
                $variables['image-login-background'] = "'".$this->urlGenerator->getAbsoluteURL($this->getBackground())."'";
+               $variables['image-login-plain'] = 'false';
 
                if ($this->config->getAppValue('theming', 'color', null) !== null) {
                        if ($this->util->invertTextColor($this->getColorPrimary())) {
@@ -200,6 +201,10 @@ class ThemingDefaults extends \OC_Defaults {
                        $variables['color-primary'] = $this->getColorPrimary();
                        $variables['color-primary-text'] = $colorPrimaryText;
                }
+
+               if ($this->config->getAppValue('theming', 'backgroundMime', null) === 'backgroundColor') {
+                       $variables['image-login-plain'] = 'true';
+               }
                $cache->set('getScssVariables', $variables);
                return $variables;
        }

diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php
index 858329eca4839fc34e1b7ef523ec205ae8eaa261..858b916c932af22f569823e134c7bc535ab5f99b 100644 (file)
--- a/apps/theming/templates/settings-admin.php
+++ b/apps/theming/templates/settings-admin.php
@@ -67,7 +67,7 @@ style('theming', 'settings-admin');
                </label>
        </div>
        <div>
-               <form class="uploadButton inlineblock" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
+               <form class="uploadButton" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
                        <input type="hidden" id="current-logoMime" name="current-logoMime" value="<?php p($_['logoMime']); ?>" />
                        <label for="uploadlogo"><span><?php p($l->t('Logo')) ?></span></label>
                        <input id="uploadlogo" class="upload-logo-field" name="uploadlogo" type="file" />
@@ -76,16 +76,16 @@ style('theming', 'settings-admin');
                </form>
        </div>
        <div>
-               <form class="uploadButton inlineblock" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
+               <form class="uploadButton" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
                        <input type="hidden" id="current-backgroundMime" name="current-backgroundMime" value="<?php p($_['backgroundMime']); ?>" />
                        <label for="upload-login-background"><span><?php p($l->t('Login image')) ?></span></label>
                        <input id="upload-login-background" class="upload-logo-field" name="upload-login-background" type="file">
                        <label for="upload-login-background" class="button icon-upload svg" id="upload-login-background" title="<?php p($l->t("Upload new login background")) ?>"></label>
                        <div data-setting="backgroundMime" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></div>
+                       <div class="theme-remove-bg icon icon-delete" data-toggle="tooltip" data-original-title="<?php p($l->t('Remove background image')); ?>"></div>
                </form>
        </div>
-
-       <div id="theming-preview" style="background-color:<?php p($_['color']);?>; background-image:url(<?php p($_['background']); ?>);">
+       <div id="theming-preview">
                <img src="<?php p($_['logo']); ?>" id="theming-preview-logo" />
        </div>
        <?php } ?>