diff options
author | Julius Haertl <jus@bitgrid.net> | 2016-10-12 17:45:07 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2017-05-08 11:16:29 +0300 |
commit | 4199a569127699cc893416bf47ece5a8d28a18a3 (patch) | |
tree | 1a31e0b2d6e753fcda28a4038ce2b3ae7d9f5c5a | |
parent | 4d7a96bc85b9a114daf9fb027a483daf26905b25 (diff) |
Theming app: Add plain background color option
Signed-off-by: Julius Haertl <jus@bitgrid.net>
-rw-r--r-- | apps/theming/css/settings-admin.css | 17 | ||||
-rw-r--r-- | apps/theming/css/theming.scss | 46 | ||||
-rw-r--r-- | apps/theming/js/settings-admin.js | 33 | ||||
-rw-r--r-- | apps/theming/lib/Controller/ThemingController.php | 14 | ||||
-rw-r--r-- | apps/theming/lib/ThemingDefaults.php | 5 | ||||
-rw-r--r-- | apps/theming/templates/settings-admin.php | 8 |
6 files changed, 108 insertions, 15 deletions
diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css index 8cc3f0dfe14..e401d77e4b6 100644 --- 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 71e0df6735e..15753439db1 100644 --- 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 802f6e05c07..5d91892c007 100644 --- 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 faaff1f2174..1b3420f3cb7 100644 --- 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 39547af4916..9509fc11077 100644 --- 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 858329eca48..858b916c932 100644 --- 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 } ?> |