ソースを参照

Added Foundation theme

zhixin 6 年 前
コミット
8c04b5afeb

+ 71 - 0
src/themes/foundation/bootstrap-table-foundation.js

@@ -0,0 +1,71 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ * https://github.com/wenzhixin/bootstrap-table/
+ * theme: https://github.com/zurb/foundation-sites
+ */
+
+($ => {
+  $.extend($.fn.bootstrapTable.defaults, {
+    classes: 'table hover',
+    buttonsPrefix: '',
+    buttonsClass: 'button'
+  })
+
+  $.BootstrapTable = class extends $.BootstrapTable {
+    initConstants () {
+      super.initConstants()
+
+      this.constants.theme = 'foundation'
+
+      this.constants.classes.buttonsGroup = 'button-group'
+      this.constants.classes.buttonsDropdown = 'button dropdown-container'
+      this.constants.classes.paginationDropdown = ''
+      this.constants.classes.dropdownActive = 'is-active'
+      this.constants.classes.paginationActive = 'current'
+
+      this.constants.html.toobarDropdow = ['<ul class="dropdown-pane" id="toolbar-dropdown" data-dropdown><ul class="vertical menu">', '</ul></div>']
+      this.constants.html.toobarDropdowItem = '<li><label class="dropdown-item">%s</label></li>'
+      this.constants.html.pageDropdown = ['<ul class="dropdown-pane" id="page-list-dropdown" data-dropdown><ul class="vertical menu">', '</ul></ul>']
+      this.constants.html.pageDropdownItem = '<li class="dropdown-item %s"><a href="#">%s</a></li>'
+      this.constants.html.dropdownCaret = '<i class="fa fa-angle-down"></i>'
+      this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>'],
+      this.constants.html.paginationItem = '<li><a class="page-item%s" href="#">%s</a></li>'
+    }
+
+    initToolbar () {
+      super.initToolbar()
+
+      this.$toolbar.find('.keep-open')
+        .attr('data-toggle', 'toolbar-dropdown')
+      const $pane = this.$toolbar.find('.dropdown-pane')
+        .attr('data-position', 'bottom')
+        .attr('data-alignment', 'right')
+      new window.Foundation.Dropdown($pane)
+      this._initDropdown()
+    }
+
+    initPagination () {
+      super.initPagination()
+
+      this.$pagination.find('.dropdown-toggle')
+        .attr('data-toggle', 'page-list-dropdown')
+      const $pane = this.$pagination.find('.dropdown-pane')
+        .attr('data-position', 'top')
+        .attr('data-alignment', 'left')
+      new window.Foundation.Dropdown($pane)
+    }
+
+    _initDropdown ($el) {
+      const $dropdowns = this.$container.find('.dropdown-container')
+
+      $dropdowns.off('click').on('click', e => {
+        e.stopPropagation()
+        $dropdowns.find('.dropdown-pane').foundation('toggle')
+      })
+
+      $(document).off('click.bs.dropdown.foundation').on('click.bs.dropdown.foundation', () => {
+        $dropdowns.find('.dropdown-pane').foundation('close')
+      })
+    }
+  }
+})(jQuery)

+ 68 - 0
src/themes/foundation/bootstrap-table-foundation.scss

@@ -0,0 +1,68 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ * https://github.com/wenzhixin/bootstrap-table/
+ * theme: https://github.com/jgthms/bulma/
+ */
+
+ @import './variables.scss';
+ @import '../bootstrap-table.scss';
+
+.bootstrap-table {
+  .float-left {
+    float: left;
+  }
+
+  .float-right {
+    float: right;
+  }
+
+  .fixed-table-toolbar {
+    .search input {
+      height: 2.5293rem;
+    }
+
+    .keep-open.button {
+      .button {
+        &:hover .menu {
+          background: #fff;
+        }
+
+        padding: 0;
+        border: none;
+        margin: 0;
+        vertical-align: top;
+      }
+
+      .menu {
+        li {
+          padding: 5px 0;
+
+          label {
+            white-space: nowrap;
+            text-align: left;
+          }
+        }
+      }
+    }
+
+    input,
+    .button {
+      margin-bottom: 0;
+    }
+  }
+
+  .fixed-table-pagination {
+    .button {
+      margin-bottom: 0;
+    }
+
+    .dropup .fa-angle-down:before {
+      content: "\f106";
+    }
+  }
+
+  .dropdown-pane {
+    width: auto;
+    padding: 0.5rem;
+  }
+}

+ 3 - 0
src/themes/foundation/variables.scss

@@ -0,0 +1,3 @@
+$border-color: #f1f1f1;
+$hover-bg: #f9f9f9;
+$dark-border-color: #32383e;