Signed-off-by: Julius Haertl <jus@bitgrid.net>tags/v12.0.0beta2
@@ -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; |
@@ -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%); | |||
} | |||
} | |||
} | |||
} |
@@ -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); | |||
}); | |||
}); | |||
}); |
@@ -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)) { |
@@ -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; | |||
} |
@@ -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 } ?> |