Merge pull request #2133 from REJack/v3-dev

updated plugins part 2 & some enhancements

Author: REJack

.babelrc

@@ -1,14 +1,14 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/preset-env",
       {
         "loose": true,
         "modules": false
       }
     ]
   ],
   "plugins": [
-    "external-helpers"
+    "@babel/plugin-external-helpers"
   ]
 }

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+

build/js/Widget.js

@@ -19,12 +19,15 @@ const Widget = (($) => {
   const Event = {
     EXPANDED : `expanded${EVENT_KEY}`,
     COLLAPSED: `collapsed${EVENT_KEY}`,
+    MAXIMIZED: `maximized${EVENT_KEY}`,
+    MINIMIZED: `minimized${EVENT_KEY}`,
     REMOVED  : `removed${EVENT_KEY}`
   }
 
   const Selector = {
     DATA_REMOVE   : '[data-widget="remove"]',
     DATA_COLLAPSE : '[data-widget="collapse"]',
+    DATA_MAXIMIZE : '[data-widget="maximize"]',
     CARD          : '.card',
     CARD_HEADER   : '.card-header',
     CARD_BODY     : '.card-body',
@@ -36,8 +39,12 @@ const Widget = (($) => {
 
   const ClassName = {
     COLLAPSED     : 'collapsed-card',
+    WAS_COLLAPSED : 'was-collapsed',
+    MAXIMIZED     : 'maximized-card',
     COLLAPSE_ICON : 'fa-minus',
-    EXPAND_ICON   : 'fa-plus'
+    EXPAND_ICON   : 'fa-plus',
+    MAXIMIZE_ICON : 'fa-expand',
+    MINIMIZE_ICON : 'fa-compress',
   }
 
   const Default = {
@@ -99,6 +106,44 @@ const Widget = (($) => {
 
       this.collapse()
     }
+    
+    toggleMaximize() {
+      var button = this._element.find('i')
+
+      if (this._parent.hasClass(ClassName.MAXIMIZED)) {
+        button.addClass(ClassName.MAXIMIZE_ICON).removeClass(ClassName.MINIMIZE_ICON)
+        this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
+          'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
+        ).delay(100).queue(function(){
+          $(this).removeClass(ClassName.MAXIMIZED)
+          $('html').removeClass(ClassName.MAXIMIZED)
+          $(this).trigger(Event.MINIMIZED)
+          $(this).css({
+            'height': 'inherit',
+            'width': 'inherit'
+          })
+          if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
+            $(this).removeClass(ClassName.WAS_COLLAPSED)
+          }
+          $(this).dequeue()
+        })
+      } else {
+        button.addClass(ClassName.MINIMIZE_ICON).removeClass(ClassName.MAXIMIZE_ICON)
+        this._parent.css({
+          'height': this._parent.height(),
+          'width': this._parent.width(),
+          'transition': 'all .15s'
+        }).delay(150).queue(function(){
+          $(this).addClass(ClassName.MAXIMIZED)
+          $('html').addClass(ClassName.MAXIMIZED)
+          $(this).trigger(Event.MAXIMIZED)
+          if ($(this).hasClass(ClassName.COLLAPSED)) {
+            $(this).addClass(ClassName.WAS_COLLAPSED)
+          }
+          $(this).dequeue()
+        })
+      }
+    }
 
     // Private
 
@@ -155,6 +200,14 @@ const Widget = (($) => {
     Widget._jQueryInterface.call($(this), 'remove')
   })
 
+  $(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    Widget._jQueryInterface.call($(this), 'toggleMaximize')
+  })
+
   /**
    * jQuery API
    * ====================================================

build/npm/Plugins.js

@@ -37,6 +37,16 @@ const Plugins = [
     from: 'node_modules/chart.js/dist/',
     to  : 'plugins/chart.js'
   },
+  // jQuery UI
+  {
+    from: 'node_modules/jquery-ui-dist/',
+    to  : 'plugins/jquery-ui'
+  },
+  // Flot
+  {
+    from: 'node_modules/flot/dist/es5/',
+    to  : 'plugins/flot'
+  },
   // Summernote
   {
     from: 'node_modules/summernote/dist/',
@@ -83,7 +93,11 @@ const Plugins = [
     from: 'node_modules/fastclick/lib',
     to  : 'plugins/fastclick'
   },
-
+  // Date Range Picker
+  {
+    from: 'node_modules/daterangepicker/',
+    to  : 'plugins/daterangepicker'
+  },
   // DataTables
   {
     from: 'node_modules/datatables.net/js',
@@ -97,6 +111,93 @@ const Plugins = [
     from: 'node_modules/datatables.net-bs4/css',
     to: 'plugins/datatables'
   },
+  // Fullcalendar
+  {
+    from: 'node_modules/@fullcalendar/core/',
+    to  : 'plugins/fullcalendar'
+  },
+  {
+    from: 'node_modules/@fullcalendar/bootstrap/',
+    to  : 'plugins/fullcalendar-bootstrap'
+  },
+  {
+    from: 'node_modules/@fullcalendar/daygrid/',
+    to  : 'plugins/fullcalendar-daygrid'
+  },
+  {
+    from: 'node_modules/@fullcalendar/timegrid/',
+    to  : 'plugins/fullcalendar-timegrid'
+  },
+  {
+    from: 'node_modules/@fullcalendar/interaction/',
+    to  : 'plugins/fullcalendar-interaction'
+  },
+  // icheck bootstrap
+  {
+    from: 'node_modules/icheck-bootstrap/',
+    to  : 'plugins/icheck-bootstrap'
+  },
+  // inputmask
+  {
+    from: 'node_modules/inputmask/dist/',
+    to  : 'plugins/inputmask'
+  },
+  // ion-rangeslider
+  {
+    from: 'node_modules/ion-rangeslider/',
+    to  : 'plugins/ion-rangeslider'
+  },
+  // JQVMap
+  {
+    from: 'node_modules/jqvmap/dist/',
+    to  : 'plugins/jqvmap'
+  },
+  // jQuery Mapael
+  {
+    from: 'node_modules/jquery-mapael/js/',
+    to  : 'plugins/jquery-mapael'
+  },
+  // Raphael
+  {
+    from: 'node_modules/raphael/',
+    to  : 'plugins/raphael'
+  },
+  // jQuery Mousewheel
+  {
+    from: 'node_modules/jquery-mousewheel/',
+    to  : 'plugins/jquery-mousewheel'
+  },
+  // jQuery Knob
+  {
+    from: 'node_modules/jquery-knob-chif/dist/',
+    to  : 'plugins/jquery-knob'
+  },
+  // pace-progress
+  {
+    from: 'node_modules/@lgaitan/pace-progress/dist/',
+    to  : 'plugins/pace-progress'
+  },
+  // Select2
+  {
+    from: 'node_modules/select2/dist/',
+    to  : 'plugins/select2'
+  },
+  // Sparklines
+  {
+    from: 'node_modules/sparklines/source/',
+    to  : 'plugins/sparklines'
+  },
+  // SweetAlert2
+  {
+    from: 'node_modules/sweetalert2/dist/',
+    to  : 'plugins/sweetalert2'
+  },
+  // Toastr
+  {
+    from: 'node_modules/toastr/build/',
+    to  : 'plugins/toastr'
+  },
+
 
   // // Doc Assets
   // // AdminLTE Dist

build/scss/AdminLTE.scss

@@ -41,6 +41,7 @@
 @import "users-list";
 @import "carousel";
 @import "social-widgets";
+@import "modals";
 // PAGES
 // ---------------------------------------------------
 @import "mailbox";
@@ -51,8 +52,14 @@
 @import "profile";
 // Plugins
 // ---------------------------------------------------
-@import "fullcalendar";
-@import "select2";
+@import "plugins/fullcalendar";
+@import "plugins/select2";
+@import "plugins/bootstrap-slider";
+@import "plugins/icheck-bootstrap";
+@import "plugins/mapael";
+@import "plugins/jqvmap";
+@import "plugins/sweetalert2";
+@import "plugins/toastr";
 // Miscellaneous
 // ---------------------------------------------------
 @import "miscellaneous";

build/scss/_bootstrap-variables.scss

@@ -101,7 +101,7 @@ $yiq-text-light: $white !default;
 $enable-caret:              true !default;
 $enable-rounded:            true !default;
 $enable-shadows:            true !default;
-$enable-gradients:          false !default;
+$enable-gradients:          true !default;
 $enable-transitions:        true !default;
 $enable-hover-media-query:  false !default; // Deprecated, no longer affects any compiled CSS
 $enable-grid-classes:       true !default;

build/scss/_buttons.scss

@@ -34,14 +34,14 @@
 
 // Button color variations
 .btn-default {
-  background-color: #f4f4f4;
-  color: #444;
-  border-color: #ddd;
+  background-color: $button-default-background-color;
+  color: $button-default-color;
+  border-color: $button-default-border-color;
   &:hover,
   &:active,
   &.hover {
-    color: #222;
-    background-color: darken(#f4f4f4, 5%);
+    color: darken($button-default-color, 10%);
+    background-color: darken($button-default-background-color, 5%);
   }
 }
 
@@ -55,8 +55,8 @@
   height: 60px;
   text-align: center;
   color: #666;
-  border: 1px solid #ddd;
-  background-color: #f4f4f4;
+  border: 1px solid $button-default-border-color;
+  background-color: $button-default-background-color;
   font-size: 12px;
   // Icons within the btn
   > .fa,
@@ -70,9 +70,9 @@
   }
 
   &:hover {
-    background: #f4f4f4;
-    color: #444;
-    border-color: #aaa;
+    background: $button-default-background-color;
+    color: $button-default-color;
+    border-color: darken($button-default-border-color, 20%);
   }
 
   &:active,

build/scss/_cards.scss

@@ -14,6 +14,30 @@
     }
   }
 
+  &.maximized-card {
+    z-index: 9999;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    position: fixed;
+    top: 0;
+    left: 0;
+    
+    &.was-collapsed .card-body {
+      display: block !important;
+    }
+
+    [data-widget="collapse"] {
+      display: none;
+    }
+
+    .card-header,
+    .card-footer {
+      @include border-radius(0 !important);
+    }
+  }
+
   // collapsed mode
   &.collapsed-card {
     .card-body,
@@ -49,6 +73,11 @@
   }
 }
 
+// Maximized Card Body Scroll fix
+html.maximized-card {
+  overflow: hidden;
+}
+
 .card,
 .overlay-wrapper {
   // Box overlay for LOADING STATE effect