diff --git a/view/adminhtml/web/css/system-config/item-appender.less b/view/adminhtml/web/css/system-config/item-appender.less index 27aa89c..516e6a7 100644 --- a/view/adminhtml/web/css/system-config/item-appender.less +++ b/view/adminhtml/web/css/system-config/item-appender.less @@ -9,8 +9,7 @@ .items { padding: 0; transition: transform ease-in-out .2s; - border: 1px solid; - border-color: #e3e3e3; + border: 1px solid #e3e3e3; border-width: 1px 1px 1px 0; display: block !important; height: auto !important; @@ -28,11 +27,15 @@ border: none; margin: 0; padding-left: 30px; - background-color: #fff !important; + background-color: #f1f1f1 !important; &:hover { background-color: #e4e4e4 !important; } + + ._active > & { + background-color: #fff !important; + } } } diff --git a/view/adminhtml/web/js/system-config/item-appender.js b/view/adminhtml/web/js/system-config/item-appender.js index 61dfbff..01408ac 100644 --- a/view/adminhtml/web/js/system-config/item-appender.js +++ b/view/adminhtml/web/js/system-config/item-appender.js @@ -4,7 +4,7 @@ define([ 'use strict'; return function (options, element) { - var $destination; + var $toggler; options = $.extend({ content: '', @@ -13,27 +13,25 @@ define([ togglerClass: 'appended-items-toggler' }, options); - /** - * Toggler click handler - * - * @param {jQuery.event} event - */ - function togglerClick(event) { - event.stopPropagation(); - $(event.target) - .siblings('.' + options.appendedClass) - .toggleClass(options.hiddenClass); - } - - $destination = $(element); $('
') - .appendTo($destination) + .appendTo(element) .addClass(options.appendedClass) .addClass(options.hiddenClass) .append($(options.content).clone()); - $('
') + $toggler = $('
') .addClass(options.togglerClass) - .appendTo($destination) - .click(togglerClick); + .appendTo(element); + + $(document).click(function (event) { + var $appendedContent = $toggler.siblings('.' + options.appendedClass); + + if ($toggler.get(0) === event.target) { + // clicked on toggler + $appendedContent.toggleClass(options.hiddenClass); + } else { + // clicked somewhere else + $appendedContent.addClass(options.hiddenClass); + } + }); }; });