Browse Source

Added Bulma theme

zhixin 6 years ago
parent
commit
e13f995484

+ 59 - 0
src/themes/bulma/bootstrap-table-bulma.js

@@ -0,0 +1,59 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ * theme: https://github.com/jgthms/bulma/
+ */
+
+($ => {
+  $.extend($.fn.bootstrapTable.defaults, {
+    classes: 'table is-bordered is-hoverable',
+    buttonsPrefix: '',
+    buttonsClass: 'button'
+  })
+
+  $.BootstrapTable = class extends $.BootstrapTable {
+    initConstants () {
+      super.initConstants()
+
+      this.constants.theme = 'bulma'
+
+      this.constants.classes.buttonsGroup = 'buttons has-addons'
+      this.constants.classes.buttonsDropdown = 'button dropdown is-right'
+      this.constants.classes.input = 'input'
+      this.constants.classes.paginationDropdown = 'ui dropdown'
+      this.constants.classes.dropup = 'is-up'
+      this.constants.classes.dropdownActive = 'is-active'
+      this.constants.classes.paginationActive = 'is-current'
+
+      this.constants.html.toobarDropdow = ['<div class="dropdown-menu"><div class="dropdown-content">', '</div></div>']
+      this.constants.html.toobarDropdowItem = '<label class="dropdown-item">%s</label>'
+      this.constants.html.pageDropdown = ['<div class="dropdown-menu"><div class="dropdown-content">', '</div></div>']
+      this.constants.html.pageDropdownItem = '<a class="dropdown-item %s" href="#">%s</a>'
+      this.constants.html.dropdownCaret = '<span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>'
+      this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>'],
+      this.constants.html.paginationItem = '<li><a class="page-item pagination-link%s" href="#">%s</a></li>'
+    }
+
+    initToolbar () {
+      super.initToolbar()
+      this._initDropdown()
+    }
+
+    initPagination () {
+      super.initPagination()
+      this._initDropdown()
+    }
+
+    _initDropdown ($el) {
+      const $dropdowns = this.$container.find('.dropdown:not(.is-hoverable)')
+
+      $dropdowns.off('click').on('click', e => {
+        e.stopPropagation()
+        $(e.currentTarget).toggleClass('is-active')
+      })
+
+      $(document).off('click.bs.dropdown.bulma').on('click.bs.dropdown.bulma', () => {
+        $dropdowns.removeClass('is-active')
+      })
+    }
+  }
+})(jQuery)

+ 69 - 0
src/themes/bulma/bootstrap-table-bulma.scss

@@ -0,0 +1,69 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ * 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 {
+      width: auto;
+    }
+
+    .columns {
+      margin-right: 0;
+    }
+
+    .keep-open.button.dropdown {
+      padding: 0;
+      margin: 0;
+      border: 0;
+
+      .button {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: 4px;
+        border-top-right-radius: 4px;
+        margin-right: 0;
+      }
+
+      .dropdown-content {
+        box-shadow: none;
+        border: 1px solid $border-color;
+      }
+
+      label.dropdown-item {
+        padding: 5px 20px;
+      }
+    }
+  }
+
+  .fixed-table-pagination {
+    .ui.dropdown {
+      vertical-align: middle;
+    }
+
+    .is-up .fa-angle-down:before {
+      content: "\f106";
+    }
+
+    .pagination-link.disabled {
+      background-color: #dbdbdb;
+      border-color: #dbdbdb;
+      box-shadow: none;
+      color: #7a7a7a;
+      opacity: .5;
+      cursor: not-allowed;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+$border-color: #dbdbdb;
+$hover-bg: hsl(0,0%,98%);;
+$dark-border-color: #32383e;