added modal and added support for the multiple-sort extension

src/extensions/multiple-sort/bootstrap-table-multiple-sort.js

@@ -294,6 +294,53 @@ const bootstrap = {
       multipleSortButton: '<button class="button multi-sort" data-target="%s" title="%s">%s</button>',
       multipleSortSelect: '<select class="%s %s browser-default">'
     }
+  },
+  'bootstrap-table': {
+    icons: {
+      'plus': 'icon-plus',
+      'minus': 'icon-minus',
+      'sort': 'icon-sort-amount-asc'
+    },
+    html: {
+      multipleSortModal: `
+        <div class="modal" id="%s" aria-labelledby="%sLabel" aria-hidden="true">
+          <div class="modal-background"></div>
+          <div class="modal-content" id="%sLabel">
+            <div class="box">
+            <h2>%s</h2>
+              <div class="bootstrap-table">
+                  <div class="fixed-table-toolbar">
+                      <div class="bars">
+                        <div id="toolbar" class="padding-bottom-2">
+                          <button id="add" type="button" class="btn">%s %s</button>
+                          <button id="delete" type="button" class="btn" disabled>%s %s</button>
+                        </div>
+                      </div>
+                  </div>
+                  <div class="fixed-table-container">
+                      <table id="multi-sort" class="table">
+                          <thead>
+                              <tr>
+                                  <th></th>
+                                  <th><div class="th-inner">%s</div></th>
+                                  <th><div class="th-inner">%s</div></th>
+                              </tr>
+                          </thead>
+                          <tbody></tbody>
+                      </table>
+                    </div>
+                </div>
+                <div class="mt-30">
+                    <button type="button" class="btn" data-close>%s</button>
+                    <button type="button" class="btn multi-sort-order-button" data-close>%s</button> 
+                </div>
+            </div>
+          </div>
+        </div>
+      `,
+      multipleSortButton: '<button class="btn multi-sort" data-target="%s" title="%s">%s</button>',
+      multipleSortSelect: '<select class="%s %s browser-default">'
+    }
   }
 }[$.fn.bootstrapTable.theme]
 $.extend($.fn.bootstrapTable.defaults.icons, bootstrap.icons)
@@ -528,6 +575,10 @@ BootstrapTable.prototype.initToolbar = function (...args) {
         this.$toolbar.find('.multi-sort').on('click', () => {
           $(sortModalId).modal()
         })
+      } else if ($.fn.bootstrapTable.theme === 'bootstrap-table') {
+        this.$toolbar.find('.multi-sort').on('click', () => {
+          $(sortModalId).addClass('show')
+        })
       } else if ($.fn.bootstrapTable.theme === 'foundation') {
         this.$toolbar.find('.multi-sort').on('click', () => {
           if (!this.foundationModal) {

src/themes/bootstrap-table/bootstrap-table.js

@@ -23,6 +23,14 @@ $.extend($.fn.bootstrapTable.defaults, {
 })
 
 $.BootstrapTable = class extends $.BootstrapTable {
+  init () {
+    super.init()
+
+    $('.modal').on('click', '[data-close]', (e) => {
+      $(e.delegateTarget).removeClass('show')
+    })
+  }
+
   initConstants () {
     super.initConstants()
 

src/themes/bootstrap-table/bootstrap-table.scss

@@ -246,3 +246,57 @@
     }
   }
 }
+
+.modal {
+  position: fixed;
+  display: none;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  &.show {
+    display: flex;
+  }
+
+  .btn {
+    border-radius: 4px;
+    background-color: $background;
+    border: 1px solid $btn-border;
+    padding: 6px 12px;
+    outline: none;
+    cursor: pointer;
+
+    &.active {
+      border-color: black;
+    }
+  }
+
+  .modal-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 998;
+    background-color: rgba(10,10,10,.86);
+  }
+
+  .modal-content {
+    position: relative;
+    width: 600px;
+    margin: 30px auto;
+    z-index: 999;
+
+    .box {
+      background-color: #fff;
+      border-radius: 6px;
+      display: block;
+      padding: 1.25rem;
+    }
+  }
+}
+
+.mt-30 {
+  margin-top: 30px;
+}

src/themes/bootstrap-table/font.scss

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'bootstrap-table';
-  src:  url('fonts/bootstrap-table.eot?gh2p5u');
-  src:  url('fonts/bootstrap-table.eot?gh2p5u#iefix') format('embedded-opentype'),
-  url('fonts/bootstrap-table.ttf?gh2p5u') format('truetype'),
-  url('fonts/bootstrap-table.woff?gh2p5u') format('woff'),
-  url('fonts/bootstrap-table.svg?gh2p5u#bootstrap-table') format('svg');
+  src:  url('fonts/bootstrap-table.eot?9p6kv0');
+  src:  url('fonts/bootstrap-table.eot?9p6kv0#iefix') format('embedded-opentype'),
+  url('fonts/bootstrap-table.ttf?9p6kv0') format('truetype'),
+  url('fonts/bootstrap-table.woff?9p6kv0') format('woff'),
+  url('fonts/bootstrap-table.svg?9p6kv0#bootstrap-table') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -63,4 +63,7 @@
 }
 .icon-trash-2:before {
   content: "\e906";
+}
+.icon-sort-amount-asc:before {
+  content: "\ea4c";
 }