add live preview of settings
This commit is contained in:
parent
3703791a28
commit
c8536ae264
|
@ -51,3 +51,16 @@
|
||||||
.side-menu-display.is-active {
|
.side-menu-display.is-active {
|
||||||
border: 2px solid #91cb7f;
|
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
28
src/admin.js
|
@ -92,10 +92,30 @@ jQuery(document).ready(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
jQuery('.side-menu-display').on('click', (event) => {
|
jQuery('.side-menu-display').on('click', (event) => {
|
||||||
jQuery('.side-menu-display').removeClass('is-active')
|
var target = jQuery(event.target)
|
||||||
jQuery(event.target).addClass('is-active')
|
|
||||||
|
|
||||||
jQuery('#side-menu-always-displayed').val(jQuery(event.target).attr('data-alwaysdiplayed'))
|
jQuery('.side-menu-display').removeClass('is-active')
|
||||||
jQuery('#side-menu-big-menu').val(jQuery(event.target).attr('data-bigmenu'))
|
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)
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
|
@ -37,6 +37,8 @@ $choicesSizes = [
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>
|
<h2>
|
||||||
<?php p($l->t('Colors')); ?>
|
<?php p($l->t('Colors')); ?>
|
||||||
|
|
||||||
|
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
@ -49,13 +51,13 @@ $choicesSizes = [
|
||||||
id="side-menu-background-color"
|
id="side-menu-background-color"
|
||||||
name="background-color"
|
name="background-color"
|
||||||
type="color"
|
type="color"
|
||||||
class="side-menu-setting"
|
class="side-menu-setting side-menu-setting-live"
|
||||||
value="<?php print_unescaped($_['background-color']); ?>">
|
value="<?php print_unescaped($_['background-color']); ?>">
|
||||||
<input
|
<input
|
||||||
id="side-menu-background-color-to"
|
id="side-menu-background-color-to"
|
||||||
name="background-color-to"
|
name="background-color-to"
|
||||||
type="color"
|
type="color"
|
||||||
class="side-menu-setting"
|
class="side-menu-setting side-menu-setting-live"
|
||||||
value="<?php print_unescaped($_['background-color-to']); ?>">
|
value="<?php print_unescaped($_['background-color-to']); ?>">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -69,7 +71,7 @@ $choicesSizes = [
|
||||||
id="side-menu-current-app-background-color"
|
id="side-menu-current-app-background-color"
|
||||||
name="current-app-background-color"
|
name="current-app-background-color"
|
||||||
type="color"
|
type="color"
|
||||||
class="side-menu-setting"
|
class="side-menu-setting side-menu-setting-live"
|
||||||
value="<?php print_unescaped($_['current-app-background-color']); ?>">
|
value="<?php print_unescaped($_['current-app-background-color']); ?>">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -83,7 +85,7 @@ $choicesSizes = [
|
||||||
id="side-menu-text-color"
|
id="side-menu-text-color"
|
||||||
name="text-color"
|
name="text-color"
|
||||||
type="color"
|
type="color"
|
||||||
class="side-menu-setting"
|
class="side-menu-setting side-menu-setting-live"
|
||||||
value="<?php print_unescaped($_['text-color']); ?>">
|
value="<?php print_unescaped($_['text-color']); ?>">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -117,7 +119,7 @@ $choicesSizes = [
|
||||||
min="0" max="100"
|
min="0" max="100"
|
||||||
id="side-menu-icon-invert-filter"
|
id="side-menu-icon-invert-filter"
|
||||||
name="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'] ?>"
|
value="<?php echo $_['icon-invert-filter'] ?>"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
@ -136,7 +138,7 @@ $choicesSizes = [
|
||||||
min="0" max="100"
|
min="0" max="100"
|
||||||
id="side-menu-icon-opacity"
|
id="side-menu-icon-opacity"
|
||||||
name="icon-opacity"
|
name="icon-opacity"
|
||||||
class="side-menu-setting"
|
class="side-menu-setting side-menu-setting-live"
|
||||||
value="<?php echo $_['icon-opacity'] ?>"
|
value="<?php echo $_['icon-opacity'] ?>"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
@ -165,11 +167,13 @@ $choicesSizes = [
|
||||||
<div>
|
<div>
|
||||||
<label for="side-menu-opener">
|
<label for="side-menu-opener">
|
||||||
<?php p($l->t('Icon')); ?>
|
<?php p($l->t('Icon')); ?>
|
||||||
|
|
||||||
|
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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): ?>
|
<?php foreach ($choices as $label => $value): ?>
|
||||||
<option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
|
<option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
|
||||||
<?php echo $l->t($label); ?>
|
<?php echo $l->t($label); ?>
|
||||||
|
|
Loading…
Reference in a new issue