some small control sidebar fixes

- fixed content height calculation with overlapping control sidebar
- fixed collapse/show functions (functions was swapped)

build/js/ControlSidebar.js

@@ -69,7 +69,7 @@ const ControlSidebar = (($) => {
 
     // Public
 
-    show() {
+    collapse() {
       // Show the control sidebar
       if (this._config.controlsidebarSlide) {
         $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
@@ -82,11 +82,11 @@ const ControlSidebar = (($) => {
         $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN)
       }
 
-      const expandedEvent = $.Event(Event.EXPANDED)
-      $(this._element).trigger(expandedEvent)
+      const collapsedEvent = $.Event(Event.COLLAPSED)
+      $(this._element).trigger(collapsedEvent)
     }
 
-    collapse() {
+    show() {
       // Collapse the control sidebar
       if (this._config.controlsidebarSlide) {
         $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
@@ -101,19 +101,19 @@ const ControlSidebar = (($) => {
         $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN)
       }
 
-      const collapsedEvent = $.Event(Event.COLLAPSED)
-      $(this._element).trigger(collapsedEvent)
+      const expandedEvent = $.Event(Event.EXPANDED)
+      $(this._element).trigger(expandedEvent)
     }
 
     toggle() {
-      const shouldOpen = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body')
+      const shouldClose = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body')
         .hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)
-      if (shouldOpen) {
-        // Open the control sidebar
-        this.show()
-      } else {
+      if (shouldClose) {
         // Close the control sidebar
         this.collapse()
+      } else {
+        // Open the control sidebar
+        this.show()
       }
     }
 
@@ -289,3 +289,4 @@ const ControlSidebar = (($) => {
 })(jQuery)
 
 export default ControlSidebar
+  

build/js/Layout.js

@@ -29,6 +29,8 @@ const Layout = (($) => {
     CONTENT_HEADER : '.content-header',
     WRAPPER        : '.wrapper',
     CONTROL_SIDEBAR: '.control-sidebar',
+    CONTROL_SIDEBAR_CONTENT: '.control-sidebar-content',
+    CONTROL_SIDEBAR_BTN: '[data-widget="control-sidebar"]',
     LAYOUT_FIXED   : '.layout-fixed',
     FOOTER         : '.main-footer',
     PUSHMENU_BTN   : '[data-widget="pushmenu"]',
@@ -46,6 +48,8 @@ const Layout = (($) => {
     FOOTER_FIXED   : 'layout-footer-fixed',
     LOGIN_PAGE     : 'login-page',
     REGISTER_PAGE  : 'register-page',
+    CONTROL_SIDEBAR_SLIDE_OPEN: 'control-sidebar-slide-open',
+    CONTROL_SIDEBAR_OPEN: 'control-sidebar-open',
   }
 
   const Default = {
@@ -68,17 +72,26 @@ const Layout = (($) => {
 
     // Public
 
-    fixLayoutHeight() {
+    fixLayoutHeight(extra = null) {
+      let control_sidebar = 0
+
+      if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || extra == 'control_sidebar') {
+        control_sidebar = $(Selector.CONTROL_SIDEBAR_CONTENT).height()
+      }
+
       const heights = {
         window: $(window).height(),
         header: $(Selector.HEADER).length !== 0 ? $(Selector.HEADER).outerHeight() : 0,
         footer: $(Selector.FOOTER).length !== 0 ? $(Selector.FOOTER).outerHeight() : 0,
         sidebar: $(Selector.SIDEBAR).length !== 0 ? $(Selector.SIDEBAR).height() : 0,
+        control_sidebar: control_sidebar,
       }
 
       const max = this._max(heights)
 
-      if (max == heights.window) {
+      if (max == heights.control_sidebar) {
+        $(Selector.CONTENT).css('min-height', max)
+      } else if (max == heights.window) {
         $(Selector.CONTENT).css('min-height', max - heights.header - heights.footer)
       } else {
         $(Selector.CONTENT).css('min-height', max - heights.header)
@@ -115,6 +128,14 @@ const Layout = (($) => {
           this.fixLayoutHeight()
         })
 
+      $(Selector.CONTROL_SIDEBAR_BTN)
+        .on('collapsed.lte.controlsidebar', () => {
+          this.fixLayoutHeight()
+        })
+        .on('expanded.lte.controlsidebar', () => {
+          this.fixLayoutHeight('control_sidebar')
+        })
+
       $(window).resize(() => {
         this.fixLayoutHeight()
       })

dist/js/adminlte.js

@@ -75,7 +75,7 @@
 
       var _proto = ControlSidebar.prototype;
 
-      _proto.show = function show() {
+      _proto.collapse = function collapse() {
         // Show the control sidebar
         if (this._config.controlsidebarSlide) {
           $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE);
@@ -88,11 +88,11 @@
           $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN);
         }
 
-        var expandedEvent = $.Event(Event.EXPANDED);
-        $(this._element).trigger(expandedEvent);
+        var collapsedEvent = $.Event(Event.COLLAPSED);
+        $(this._element).trigger(collapsedEvent);
       };
 
-      _proto.collapse = function collapse() {
+      _proto.show = function show() {
         // Collapse the control sidebar
         if (this._config.controlsidebarSlide) {
           $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE);
@@ -107,19 +107,19 @@
           $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN);
         }
 
-        var collapsedEvent = $.Event(Event.COLLAPSED);
-        $(this._element).trigger(collapsedEvent);
+        var expandedEvent = $.Event(Event.EXPANDED);
+        $(this._element).trigger(expandedEvent);
       };
 
       _proto.toggle = function toggle() {
-        var shouldOpen = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE);
+        var shouldClose = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE);
 
-        if (shouldOpen) {
-          // Open the control sidebar
-          this.show();
-        } else {
+        if (shouldClose) {
           // Close the control sidebar
           this.collapse();
+        } else {
+          // Open the control sidebar
+          this.show();
         }
       } // Private
       ;
@@ -303,6 +303,8 @@
       CONTENT_HEADER: '.content-header',
       WRAPPER: '.wrapper',
       CONTROL_SIDEBAR: '.control-sidebar',
+      CONTROL_SIDEBAR_CONTENT: '.control-sidebar-content',
+      CONTROL_SIDEBAR_BTN: '[data-widget="control-sidebar"]',
       LAYOUT_FIXED: '.layout-fixed',
       FOOTER: '.main-footer',
       PUSHMENU_BTN: '[data-widget="pushmenu"]',
@@ -318,7 +320,9 @@
       NAVBAR_FIXED: 'layout-navbar-fixed',
       FOOTER_FIXED: 'layout-footer-fixed',
       LOGIN_PAGE: 'login-page',
-      REGISTER_PAGE: 'register-page'
+      REGISTER_PAGE: 'register-page',
+      CONTROL_SIDEBAR_SLIDE_OPEN: 'control-sidebar-slide-open',
+      CONTROL_SIDEBAR_OPEN: 'control-sidebar-open'
     };
     var Default = {
       scrollbarTheme: 'os-theme-light',
@@ -342,17 +346,30 @@
 
       var _proto = Layout.prototype;
 
-      _proto.fixLayoutHeight = function fixLayoutHeight() {
+      _proto.fixLayoutHeight = function fixLayoutHeight(extra) {
+        if (extra === void 0) {
+          extra = null;
+        }
+
+        var control_sidebar = 0;
+
+        if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || extra == 'control_sidebar') {
+          control_sidebar = $(Selector.CONTROL_SIDEBAR_CONTENT).height();
+        }
+
         var heights = {
           window: $(window).height(),
           header: $(Selector.HEADER).length !== 0 ? $(Selector.HEADER).outerHeight() : 0,
           footer: $(Selector.FOOTER).length !== 0 ? $(Selector.FOOTER).outerHeight() : 0,
-          sidebar: $(Selector.SIDEBAR).length !== 0 ? $(Selector.SIDEBAR).height() : 0
+          sidebar: $(Selector.SIDEBAR).length !== 0 ? $(Selector.SIDEBAR).height() : 0,
+          control_sidebar: control_sidebar
         };
 
         var max = this._max(heights);
 
-        if (max == heights.window) {
+        if (max == heights.control_sidebar) {
+          $(Selector.CONTENT).css('min-height', max);
+        } else if (max == heights.window) {
           $(Selector.CONTENT).css('min-height', max - heights.header - heights.footer);
         } else {
           $(Selector.CONTENT).css('min-height', max - heights.header);
@@ -386,6 +403,11 @@
         $(Selector.PUSHMENU_BTN).on('collapsed.lte.pushmenu shown.lte.pushmenu', function () {
           _this.fixLayoutHeight();
         });
+        $(Selector.CONTROL_SIDEBAR_BTN).on('collapsed.lte.controlsidebar', function () {
+          _this.fixLayoutHeight();
+        }).on('expanded.lte.controlsidebar', function () {
+          _this.fixLayoutHeight('control_sidebar');
+        });
         $(window).resize(function () {
           _this.fixLayoutHeight();
         });