diff --git a/css/admin.css b/css/admin.css index 03793b0..aa40b92 100644 --- a/css/admin.css +++ b/css/admin.css @@ -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; +} diff --git a/src/admin.js b/src/admin.js index f009720..259e533 100644 --- a/src/admin.js +++ b/src/admin.js @@ -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) }) }); diff --git a/templates/settings/admin-form.php b/templates/settings/admin-form.php index d69d698..8ad4264 100644 --- a/templates/settings/admin-form.php +++ b/templates/settings/admin-form.php @@ -37,6 +37,8 @@ $choicesSizes = [