Merge pull request #2923 from ColorlibHQ/feat/docs-updates-changes

* add additional-styles docs section
* add expandable tables section
* small typo fixes in direct chat section

docs/_config.yml

@@ -67,18 +67,23 @@ navigation:
         url: javascript/toasts.html
       - title: Sidebar Search
         url: javascript/sidebar-search.html
+      - title: Expandable Tables
+        url: javascript/expandable-tables.html
   - title: Browser Support
     url: browser-support.html
     icon: fab fa-chrome
-  - title: Upgrade Guide
-    url: upgrade-guide.html
-    icon: fas fa-hand-point-up
   - title: Implementations
     url: implementations.html
     icon: fas fa-bookmark
+  - title: Additional Styles
+    url: additional-styles.html
+    icon: fas fa-mortar-pestle
+  - title: Upgrade Guide
+    url: upgrade-guide.html
+    icon: fas fa-hand-point-up
   - title: FAQ
     url: faq.html
     icon: fas fa-question-circle
   - title: License
     url: license.html
-    icon: fas fa-file-alt
+    icon: fas fa-file-contract

docs/additional-styles.md

@@ -0,0 +1,67 @@
+---
+layout: page
+title: Additional Styles / Custom Skin
+---
+
+If you want to create additional styles like a company specific color for buttons, the background utility or something else you can simply create your own subversion of AdminLTE with the following SCSS template.
+
+In this example we create a custom button class called `.btn-custom-color` with an extra button style and a custom class called `.my-custom-style`.
+
+```scss
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import '~admin-lte/build/scss/bootstrap-variables';
+
+// Custom Theme Color START
+$custom-color: #00FF00;
+$theme-colors: map-merge((
+    'custom-color': $custom-color,
+), $theme-colors);
+// Custom Theme Color END
+
+// Variables and Mixins
+// ---------------------------------------------------
+@import '~admin-lte/build/scss/variables';
+@import '~admin-lte/build/scss/mixins';
+
+@import '~bootstrap/scss/bootstrap';
+
+@import '~admin-lte/build/scss/parts/core';
+@import '~admin-lte/build/scss/parts/components';
+@import '~admin-lte/build/scss/parts/extra-components';
+@import '~admin-lte/build/scss/parts/pages';
+@import '~admin-lte/build/scss/parts/plugins';
+@import '~admin-lte/build/scss/parts/miscellaneous';
+
+// Custom Style START
+.my-custom-style {
+  background-color: $custom-color;
+  padding: .5rem 0;
+}
+// Custom Style END
+```
+{: .max-height-300}
+
+You can also create a skin on top of AdminLTE with the following SCSS template.
+
+In this example we create a custom class called `.btn-custom-color` with a extra button style.
+
+```scss
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import '~admin-lte/build/scss/bootstrap-variables';
+@import '~bootstrap/scss/mixins';
+
+$custom-color: #00FF00;
+
+.btn-custom-color {
+    @include button-variant($custom-color, $custom-color);
+}
+```
+
+
+> ##### Warning!
+> These examples are only raw SCSS templates, you will still need a SCSS -> CSS build script to compile the SCSS to CSS!
+{: .quote-warning}

docs/javascript/direct-chat.md

@@ -17,7 +17,7 @@ Add `data-widget="chat-pane-toggle"` to a button to activate the plugin.
 
 ###### jQuery
 {: .text-bold }
-The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events. 
+The jQuery API provides more customizable options that allows the developer to toggle the chat contact pane. 
 ```js
 $('#chat-pane-toggle').DirectChat('toggle')
 ```

docs/javascript/expandable-tables.md

@@ -0,0 +1,106 @@
+---
+layout: page
+title: Expandable Table Plugin
+---
+
+The expandable table plugin provides simple functionality to create expandable tables. 
+
+##### Example Code
+```html
+<table class="table table-bordered table-hover">
+  <tbody>
+    <tr data-widget="expandable-table" aria-expanded="false">
+      <td>183</td>
+    </tr>
+    <tr class="expandable-body">
+      <td>
+        <p>
+          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
+        </p>
+      </td>
+    </tr>
+    <tr data-widget="expandable-table" aria-expanded="true">
+      <td>219</td>
+    </tr>
+    <tr class="expandable-body">
+      <td>
+        <p>
+          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
+        </p>
+      </td>
+    </tr>
+    <tr data-widget="expandable-table" aria-expanded="true">
+      <td>657</td>
+    </tr>
+    <tr class="expandable-body">
+      <td>
+        <p>
+          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
+        </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+{: .max-height-300}
+
+
+> ##### Tip!
+> You can control the default visibility with ` aria-expanded="false"`/` aria-expanded="true"` via the expandable table header.
+{: .quote-info}
+
+
+##### Usage
+This plugin can be activated as a jQuery plugin or using the data api. 
+
+###### Data API
+{: .text-bold }
+Add `data-widget="expandable-table"` to a table row to activate the plugin and place a new table row below with the `.expandable-body`-class.
+```html
+<tr data-widget="expandable-table" aria-expanded="true">
+  <td>657</td>
+</tr>
+<tr class="expandable-body">
+  <td>
+    <p>
+    </p>
+  </td>
+</tr>
+``` 
+
+> ##### Tip!
+> To get the correct slide up/down animation place a `div` or `p`-tag inside your expandable table body.
+{: .quote-info}
+
+
+###### jQuery
+{: .text-bold }
+The jQuery API provides more customizable options that allows the developer to toggle the visibilty state of one table row. 
+```js
+$('#expandable-table-header-row').ExpandableTable('toggleRow')
+```
+
+
+##### Methods
+{: .mt-4}
+
+|---
+| Method | Description
+|-|-
+|toggleRow | Toggles the state of the expandable table body between hidden and visible.
+{: .table .table-bordered .bg-light}
+
+Example: `$('#expandable-table-header-row').ExpandableTable('toggleRow')`
+
+
+##### Events
+{: .mt-4}
+
+|---
+| Event Type | Description
+|-|-
+|expanded.lte.expandableTable | Triggered after a expandable table body is expanded.
+|collapsed.lte.expandableTable | Triggered after a expandable table body is collapsed.
+{: .table .table-bordered .bg-light}
+
+Example: `$('#expandable-table-header-row').on('expanded.lte.expandableTable', handleToggledEvent)`