fix sidebar item icon transition (#2775)

* fix sidebar item icon transition

* rename menu-opens to menu-is-opening
pull/2774/head
REJack 2020-06-02 13:37:16 +02:00 committed by GitHub
parent 47e653bfbf
commit bbfcc0639e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 1 deletions

View File

@ -32,6 +32,7 @@ const Treeview = ($ => {
const ClassName = { const ClassName = {
OPEN: 'menu-open', OPEN: 'menu-open',
IS_OPENING: 'menu-is-opening',
SIDEBAR_COLLAPSED: 'sidebar-collapse' SIDEBAR_COLLAPSED: 'sidebar-collapse'
} }
@ -56,6 +57,7 @@ const Treeview = ($ => {
// Public // Public
init() { init() {
$(`${Selector.LI}${Selector.OPEN} ${Selector.TREEVIEW_MENU}`).css('display', 'block')
this._setupListeners() this._setupListeners()
} }
@ -68,6 +70,7 @@ const Treeview = ($ => {
this.collapse(openTreeview, openMenuLi) this.collapse(openTreeview, openMenuLi)
} }
parentLi.addClass(ClassName.IS_OPENING)
treeviewMenu.stop().slideDown(this._config.animationSpeed, () => { treeviewMenu.stop().slideDown(this._config.animationSpeed, () => {
parentLi.addClass(ClassName.OPEN) parentLi.addClass(ClassName.OPEN)
$(this._element).trigger(expandedEvent) $(this._element).trigger(expandedEvent)
@ -81,8 +84,8 @@ const Treeview = ($ => {
collapse(treeviewMenu, parentLi) { collapse(treeviewMenu, parentLi) {
const collapsedEvent = $.Event(Event.COLLAPSED) const collapsedEvent = $.Event(Event.COLLAPSED)
parentLi.removeClass(`${ClassName.IS_OPENING} ${ClassName.OPEN}`)
treeviewMenu.stop().slideUp(this._config.animationSpeed, () => { treeviewMenu.stop().slideUp(this._config.animationSpeed, () => {
parentLi.removeClass(ClassName.OPEN)
$(this._element).trigger(collapsedEvent) $(this._element).trigger(collapsedEvent)
treeviewMenu.find(`${Selector.OPEN} > ${Selector.TREEVIEW_MENU}`).slideUp() treeviewMenu.find(`${Selector.OPEN} > ${Selector.TREEVIEW_MENU}`).slideUp()
treeviewMenu.find(Selector.OPEN).removeClass(ClassName.OPEN) treeviewMenu.find(Selector.OPEN).removeClass(ClassName.OPEN)

View File

@ -98,7 +98,10 @@
> .nav-treeview { > .nav-treeview {
display: block; display: block;
} }
}
.menu-open,
.menu-is-opening {
> .nav-link { > .nav-link {
i.right { i.right {
@include rotate(-90deg); @include rotate(-90deg);