Merge pull request #4617 from nextcloud/theming-plain-background
Theming app: Add plain background color option
This commit is contained in:
commit
7cc750fe37
|
@ -26,10 +26,20 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
visibility: hidden;
|
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;
|
position: relative;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
left: 158px;
|
right: 0px;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
#theming input[type='text']:focus + .theme-undo,
|
#theming input[type='text']:focus + .theme-undo,
|
||||||
|
@ -54,7 +64,8 @@
|
||||||
margin: 2px 0px;
|
margin: 2px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theming .icon-upload {
|
#theming .icon-upload,
|
||||||
|
#theming .icon-loading-small {
|
||||||
padding: 8px 20px;
|
padding: 8px 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
margin: 2px 0px;
|
margin: 2px 0px;
|
||||||
|
|
|
@ -65,3 +65,49 @@ input.primary {
|
||||||
background-image: url('../../../core/img/actions/confirm.svg');
|
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, 20%);
|
||||||
|
}
|
||||||
|
#submit:hover {
|
||||||
|
border-color: nc-darken($color-primary, 10%);
|
||||||
|
background-color: nc-darken($color-primary, 10%);
|
||||||
|
}
|
||||||
|
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, 20%);
|
||||||
|
}
|
||||||
|
#submit:hover {
|
||||||
|
border-color: nc-lighten($color-primary, 10%);
|
||||||
|
background-color: nc-lighten($color-primary, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -35,6 +35,7 @@ function setThemingValue(setting, value) {
|
||||||
OC.msg.finishedSaving('#theming_settings_msg', response);
|
OC.msg.finishedSaving('#theming_settings_msg', response);
|
||||||
$('#theming_settings_loading').hide();
|
$('#theming_settings_loading').hide();
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function preview(setting, value) {
|
function preview(setting, value) {
|
||||||
|
@ -74,18 +75,13 @@ function preview(setting, value) {
|
||||||
previewImageLogo.src = OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp;
|
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') {
|
if (setting === 'name') {
|
||||||
window.document.title = t('core', 'Admin') + " - " + value;
|
window.document.title = t('core', 'Admin') + " - " + value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hideUndoButton(setting, value);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideUndoButton(setting, value) {
|
function hideUndoButton(setting, value) {
|
||||||
|
@ -103,6 +99,14 @@ function hideUndoButton(setting, value) {
|
||||||
} else {
|
} else {
|
||||||
$('.theme-undo[data-setting=' + setting + ']').show();
|
$('.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 () {
|
$(document).ready(function () {
|
||||||
|
@ -116,6 +120,7 @@ $(document).ready(function () {
|
||||||
}
|
}
|
||||||
hideUndoButton(setting, value);
|
hideUndoButton(setting, value);
|
||||||
});
|
});
|
||||||
|
|
||||||
var uploadParamsLogo = {
|
var uploadParamsLogo = {
|
||||||
pasteZone: null,
|
pasteZone: null,
|
||||||
dropZone: null,
|
dropZone: null,
|
||||||
|
@ -208,4 +213,16 @@ $(document).ready(function () {
|
||||||
preview(setting, response.data.value);
|
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
|
* @return DataResponse
|
||||||
*/
|
*/
|
||||||
public function updateLogo() {
|
public function updateLogo() {
|
||||||
|
$backgroundColor = $this->request->getParam('backgroundColor', false);
|
||||||
|
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');
|
$newLogo = $this->request->getUploadedFile('uploadlogo');
|
||||||
$newBackgroundLogo = $this->request->getUploadedFile('upload-login-background');
|
$newBackgroundLogo = $this->request->getUploadedFile('upload-login-background');
|
||||||
if (empty($newLogo) && empty($newBackgroundLogo)) {
|
if (empty($newLogo) && empty($newBackgroundLogo)) {
|
||||||
|
|
|
@ -190,6 +190,7 @@ class ThemingDefaults extends \OC_Defaults {
|
||||||
|
|
||||||
$variables['image-logo'] = "'".$this->urlGenerator->getAbsoluteURL($this->getLogo())."'";
|
$variables['image-logo'] = "'".$this->urlGenerator->getAbsoluteURL($this->getLogo())."'";
|
||||||
$variables['image-login-background'] = "'".$this->urlGenerator->getAbsoluteURL($this->getBackground())."'";
|
$variables['image-login-background'] = "'".$this->urlGenerator->getAbsoluteURL($this->getBackground())."'";
|
||||||
|
$variables['image-login-plain'] = 'false';
|
||||||
|
|
||||||
if ($this->config->getAppValue('theming', 'color', null) !== null) {
|
if ($this->config->getAppValue('theming', 'color', null) !== null) {
|
||||||
if ($this->util->invertTextColor($this->getColorPrimary())) {
|
if ($this->util->invertTextColor($this->getColorPrimary())) {
|
||||||
|
@ -200,6 +201,10 @@ class ThemingDefaults extends \OC_Defaults {
|
||||||
$variables['color-primary'] = $this->getColorPrimary();
|
$variables['color-primary'] = $this->getColorPrimary();
|
||||||
$variables['color-primary-text'] = $colorPrimaryText;
|
$variables['color-primary-text'] = $colorPrimaryText;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if ($this->config->getAppValue('theming', 'backgroundMime', null) === 'backgroundColor') {
|
||||||
|
$variables['image-login-plain'] = 'true';
|
||||||
|
}
|
||||||
$cache->set('getScssVariables', $variables);
|
$cache->set('getScssVariables', $variables);
|
||||||
return $variables;
|
return $variables;
|
||||||
}
|
}
|
||||||
|
|
|
@ -67,7 +67,7 @@ style('theming', 'settings-admin');
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<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']); ?>" />
|
<input type="hidden" id="current-logoMime" name="current-logoMime" value="<?php p($_['logoMime']); ?>" />
|
||||||
<label for="uploadlogo"><span><?php p($l->t('Logo')) ?></span></label>
|
<label for="uploadlogo"><span><?php p($l->t('Logo')) ?></span></label>
|
||||||
<input id="uploadlogo" class="upload-logo-field" name="uploadlogo" type="file" />
|
<input id="uploadlogo" class="upload-logo-field" name="uploadlogo" type="file" />
|
||||||
|
@ -76,16 +76,16 @@ style('theming', 'settings-admin');
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<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']); ?>" />
|
<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>
|
<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">
|
<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>
|
<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 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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="theming-preview">
|
||||||
<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" />
|
<img src="<?php p($_['logo']); ?>" id="theming-preview-logo" />
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
|
@ -152,11 +152,16 @@ class ThemingControllerTest extends TestCase {
|
||||||
public function testUpdateLogoNoData() {
|
public function testUpdateLogoNoData() {
|
||||||
$this->request
|
$this->request
|
||||||
->expects($this->at(0))
|
->expects($this->at(0))
|
||||||
|
->method('getParam')
|
||||||
|
->with('backgroundColor')
|
||||||
|
->willReturn(false);
|
||||||
|
$this->request
|
||||||
|
->expects($this->at(1))
|
||||||
->method('getUploadedFile')
|
->method('getUploadedFile')
|
||||||
->with('uploadlogo')
|
->with('uploadlogo')
|
||||||
->willReturn(null);
|
->willReturn(null);
|
||||||
$this->request
|
$this->request
|
||||||
->expects($this->at(1))
|
->expects($this->at(2))
|
||||||
->method('getUploadedFile')
|
->method('getUploadedFile')
|
||||||
->with('upload-login-background')
|
->with('upload-login-background')
|
||||||
->willReturn(null);
|
->willReturn(null);
|
||||||
|
@ -179,6 +184,29 @@ class ThemingControllerTest extends TestCase {
|
||||||
$this->assertEquals($expected, $this->themingController->updateLogo());
|
$this->assertEquals($expected, $this->themingController->updateLogo());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function testUpdateBackgroundColor() {
|
||||||
|
$this->request
|
||||||
|
->expects($this->at(0))
|
||||||
|
->method('getParam')
|
||||||
|
->with('backgroundColor')
|
||||||
|
->willReturn(true);
|
||||||
|
$this->themingDefaults
|
||||||
|
->expects($this->once())
|
||||||
|
->method('set')
|
||||||
|
->with('backgroundMime', 'backgroundColor');
|
||||||
|
$expected = new DataResponse(
|
||||||
|
[
|
||||||
|
'data' =>
|
||||||
|
[
|
||||||
|
'name' => 'backgroundColor',
|
||||||
|
'message' => $this->l10n->t('Saved')
|
||||||
|
],
|
||||||
|
'status' => 'success'
|
||||||
|
]
|
||||||
|
);
|
||||||
|
$this->assertEquals($expected, $this->themingController->updateLogo());
|
||||||
|
}
|
||||||
|
|
||||||
public function dataUpdateImages() {
|
public function dataUpdateImages() {
|
||||||
return [
|
return [
|
||||||
[false],
|
[false],
|
||||||
|
@ -194,6 +222,11 @@ class ThemingControllerTest extends TestCase {
|
||||||
touch($tmpLogo);
|
touch($tmpLogo);
|
||||||
$this->request
|
$this->request
|
||||||
->expects($this->at(0))
|
->expects($this->at(0))
|
||||||
|
->method('getParam')
|
||||||
|
->with('backgroundColor')
|
||||||
|
->willReturn(false);
|
||||||
|
$this->request
|
||||||
|
->expects($this->at(1))
|
||||||
->method('getUploadedFile')
|
->method('getUploadedFile')
|
||||||
->with('uploadlogo')
|
->with('uploadlogo')
|
||||||
->willReturn([
|
->willReturn([
|
||||||
|
@ -202,7 +235,7 @@ class ThemingControllerTest extends TestCase {
|
||||||
'name' => 'logo.svg',
|
'name' => 'logo.svg',
|
||||||
]);
|
]);
|
||||||
$this->request
|
$this->request
|
||||||
->expects($this->at(1))
|
->expects($this->at(2))
|
||||||
->method('getUploadedFile')
|
->method('getUploadedFile')
|
||||||
->with('upload-login-background')
|
->with('upload-login-background')
|
||||||
->willReturn(null);
|
->willReturn(null);
|
||||||
|
@ -259,11 +292,16 @@ class ThemingControllerTest extends TestCase {
|
||||||
file_put_contents($tmpLogo, file_get_contents(__DIR__ . '/../../../../tests/data/desktopapp.png'));
|
file_put_contents($tmpLogo, file_get_contents(__DIR__ . '/../../../../tests/data/desktopapp.png'));
|
||||||
$this->request
|
$this->request
|
||||||
->expects($this->at(0))
|
->expects($this->at(0))
|
||||||
|
->method('getParam')
|
||||||
|
->with('backgroundColor')
|
||||||
|
->willReturn(false);
|
||||||
|
$this->request
|
||||||
|
->expects($this->at(1))
|
||||||
->method('getUploadedFile')
|
->method('getUploadedFile')
|
||||||
->with('uploadlogo')
|
->with('uploadlogo')
|
||||||
->willReturn(null);
|
->willReturn(null);
|
||||||
$this->request
|
$this->request
|
||||||
->expects($this->at(1))
|
->expects($this->at(2))
|
||||||
->method('getUploadedFile')
|
->method('getUploadedFile')
|
||||||
->with('upload-login-background')
|
->with('upload-login-background')
|
||||||
->willReturn([
|
->willReturn([
|
||||||
|
@ -322,11 +360,16 @@ class ThemingControllerTest extends TestCase {
|
||||||
file_put_contents($tmpLogo, file_get_contents(__DIR__ . '/../../../../tests/data/data.zip'));
|
file_put_contents($tmpLogo, file_get_contents(__DIR__ . '/../../../../tests/data/data.zip'));
|
||||||
$this->request
|
$this->request
|
||||||
->expects($this->at(0))
|
->expects($this->at(0))
|
||||||
|
->method('getParam')
|
||||||
|
->with('backgroundColor')
|
||||||
|
->willReturn(false);
|
||||||
|
$this->request
|
||||||
|
->expects($this->at(1))
|
||||||
->method('getUploadedFile')
|
->method('getUploadedFile')
|
||||||
->with('uploadlogo')
|
->with('uploadlogo')
|
||||||
->willReturn(null);
|
->willReturn(null);
|
||||||
$this->request
|
$this->request
|
||||||
->expects($this->at(1))
|
->expects($this->at(2))
|
||||||
->method('getUploadedFile')
|
->method('getUploadedFile')
|
||||||
->with('upload-login-background')
|
->with('upload-login-background')
|
||||||
->willReturn([
|
->willReturn([
|
||||||
|
|
|
@ -525,7 +525,8 @@ class ThemingDefaultsTest extends TestCase {
|
||||||
'image-logo' => "'absolute-custom-logo?v=0'",
|
'image-logo' => "'absolute-custom-logo?v=0'",
|
||||||
'image-login-background' => "'absolute-custom-background?v=0'",
|
'image-login-background' => "'absolute-custom-background?v=0'",
|
||||||
'color-primary' => $this->defaults->getColorPrimary(),
|
'color-primary' => $this->defaults->getColorPrimary(),
|
||||||
'color-primary-text' => '#ffffff'
|
'color-primary-text' => '#ffffff',
|
||||||
|
'image-login-plain' => 'false'
|
||||||
|
|
||||||
];
|
];
|
||||||
$this->assertEquals($expected, $this->template->getScssVariables());
|
$this->assertEquals($expected, $this->template->getScssVariables());
|
||||||
|
|
Loading…
Reference in New Issue