Merge pull request #1049 from nextcloud/theming-admin-improvements
Theming admin improvements
This commit is contained in:
Marius Blüm
GitHub
commit
5c73596ce4
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ function preview(setting, value) {
|
|||
textColor = "#ffffff";
|
||||
icon = 'caret';
|
||||
}
|
||||
if (luminance>0.8) {
|
||||
if (luminance > 0.8) {
|
||||
elementColor = '#555555';
|
||||
}
|
||||
|
||||
|
|
@ -87,18 +87,48 @@ 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 + "')";
|
||||
}
|
||||
|
||||
}
|
||||
hideUndoButton(setting, value);
|
||||
}
|
||||
|
||||
function hideUndoButton(setting, value) {
|
||||
var themingDefaults = {
|
||||
name: 'Nextcloud',
|
||||
slogan: t('lib', 'a safe home for all your data'),
|
||||
url: 'https://nextcloud.com',
|
||||
color: '#0082c9',
|
||||
logoMime: '',
|
||||
backgroundMime: ''
|
||||
};
|
||||
|
||||
if (value === themingDefaults[setting] || value === '') {
|
||||
$('.theme-undo[data-setting=' + setting + ']').hide();
|
||||
} else {
|
||||
$('.theme-undo[data-setting=' + setting + ']').show();
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
|
|
@ -106,6 +136,14 @@ $(document).ready(function () {
|
|||
|
||||
$('html > head').append($('<style type="text/css" id="previewStyles"></style>'));
|
||||
|
||||
$('#theming .theme-undo').each(function() {
|
||||
var setting = $(this).data('setting');
|
||||
var value = $('#theming-'+setting).val();
|
||||
if(setting === 'logoMime' || setting === 'backgroundMime') {
|
||||
var value = $('#current-'+setting).val();
|
||||
}
|
||||
hideUndoButton(setting, value);
|
||||
});
|
||||
var uploadParamsLogo = {
|
||||
pasteZone: null,
|
||||
dropZone: null,
|
||||
|
|
@ -181,11 +219,12 @@ $(document).ready(function () {
|
|||
if (setting === 'color') {
|
||||
var colorPicker = document.getElementById('theming-color');
|
||||
colorPicker.style.backgroundColor = response.data.value;
|
||||
colorPicker.value = response.data.value.slice(1);
|
||||
colorPicker.value = response.data.value.slice(1).toUpperCase();
|
||||
} else if (setting !== 'logoMime' && setting !== 'backgroundMime') {
|
||||
var input = document.getElementById('theming-'+setting);
|
||||
input.value = response.data.value;
|
||||
}
|
||||
|
||||
preview(setting, response.data.value);
|
||||
OC.msg.finishedSaving('#theming_settings_msg', response);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -60,19 +60,24 @@ style('theming', 'settings-admin');
|
|||
</p>
|
||||
<p>
|
||||
<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">
|
||||
<input id="uploadlogo" class="upload-logo-field" name="uploadlogo" type="file" />
|
||||
<label for="uploadlogo" class="button icon-upload svg" id="uploadlogo" title="<?php p($l->t('Upload new logo')) ?>"></label>
|
||||
<span data-setting="logoMime" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
|
||||
</form>
|
||||
</p>
|
||||
<p>
|
||||
<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('Log in 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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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, '');
|
||||
|
|
|
|||
Loading…
Reference in New Issue