deblan/side_menu
deblan/side_menu
3
6
Fork 5
Code Issues 6 Pull requests 11 Projects Releases 119 Wiki Activity

add live preview of settings

Browse source
This commit is contained in:
Simon Vieille 2020-09-04 16:43:27 +02:00
parent 3703791a28
commit c8536ae264
Signed by: deblan
GPG key ID: 03383D15A1D31745
3 changed files with 48 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
css/admin.css
View file

@ -51,3 +51,16 @@
.side-menu-display.is-active {
border: 2px solid #91cb7f;
}
.info {
margin-top: 8px;
padding: 5px;
background: #91cb7f;
color: #fff;
border-radius: var(--border-radius);
}
#side-menu-section h2 small {
font-size: 11px;
font-weight: normal;
}

28
src/admin.js
View file

@ -92,10 +92,30 @@ jQuery(document).ready(() => {
});
jQuery('.side-menu-display').on('click', (event) => {
jQuery('.side-menu-display').removeClass('is-active')
jQuery(event.target).addClass('is-active')
var target = jQuery(event.target)
jQuery('#side-menu-always-displayed').val(jQuery(event.target).attr('data-alwaysdiplayed'))
jQuery('#side-menu-big-menu').val(jQuery(event.target).attr('data-bigmenu'))
jQuery('.side-menu-display').removeClass('is-active')
target.addClass('is-active')
jQuery('#side-menu-always-displayed').val(target.attr('data-alwaysdiplayed'))
jQuery('#side-menu-big-menu').val(target.attr('data-bigmenu'))
})
jQuery('.side-menu-setting-live').on('change', (event) => {
var target = jQuery(event.target)
var name = target.attr('name')
var value = target.val()
if (name === 'opener') {
var url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
value = `url(${url})`;
}
if (name === 'icon-invert-filter' || name === 'icon-opacity') {
value/=100;
}
document.documentElement.style.setProperty('--side-menu-' + name, value)
})
});

18
templates/settings/admin-form.php
View file

@ -37,6 +37,8 @@ $choicesSizes = [
<div class="section">
<h2>
<?php p($l->t('Colors')); ?>
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
</h2>
<div>
@ -49,13 +51,13 @@ $choicesSizes = [
id="side-menu-background-color"
name="background-color"
type="color"
class="side-menu-setting"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['background-color']); ?>">
<input
id="side-menu-background-color-to"
name="background-color-to"
type="color"
class="side-menu-setting"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['background-color-to']); ?>">
</div>
@ -69,7 +71,7 @@ $choicesSizes = [
id="side-menu-current-app-background-color"
name="current-app-background-color"
type="color"
class="side-menu-setting"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['current-app-background-color']); ?>">
</div>
@ -83,7 +85,7 @@ $choicesSizes = [
id="side-menu-text-color"
name="text-color"
type="color"
class="side-menu-setting"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['text-color']); ?>">
</div>
@ -117,7 +119,7 @@ $choicesSizes = [
min="0" max="100"
id="side-menu-icon-invert-filter"
name="icon-invert-filter"
class="side-menu-setting"
class="side-menu-setting side-menu-setting-live"
value="<?php echo $_['icon-invert-filter'] ?>"
>
@ -136,7 +138,7 @@ $choicesSizes = [
min="0" max="100"
id="side-menu-icon-opacity"
name="icon-opacity"
class="side-menu-setting"
class="side-menu-setting side-menu-setting-live"
value="<?php echo $_['icon-opacity'] ?>"
>
@ -165,11 +167,13 @@ $choicesSizes = [
<div>
<label for="side-menu-opener">
<?php p($l->t('Icon')); ?>
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
</label>
</div>
<div>
<select id="side-menu-opener" name="opener" class="side-menu-setting">
<select id="side-menu-opener" name="opener" class="side-menu-setting side-menu-setting-live">
<?php foreach ($choices as $label => $value): ?>
<option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
<?php echo $l->t($label); ?>