dtable-ui-component 7.0.2 → 7.0.4-sia.1

package/lib/CollapsibleSettingLayout/index.js

@@ -27,8 +27,11 @@ const CollapsibleSettingLayout = props => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "collapsible-setting-layout-title",
         children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: "dtable-font dtable-icon-right".concat(isShowSettings ? ' dtable-icon-spin' : '')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "seatable-icon-btn",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "dtable-font dtable-icon-right".concat(isShowSettings ? ' dtable-icon-spin' : '')
+        })
       })]
     }), isShowSettings && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "collapsible-setting-layout-body mt-3 pl-2",

package/lib/DTableFiltersPopover/index.js

@@ -147,28 +147,29 @@ var _jsxRuntime = require("react/jsx-runtime");
           addIconClassName: "popover-add-icon"
         }), isSupportAdvanced && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "add-buttons",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "btn-add-filter mr-4",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, {
+            className: "mr-4",
             onClick: canAddFilter ? () => this.addFilter() : () => {},
-            role: "button",
             tabIndex: 0,
             "aria-label": (0, _lang.getLocale)('Add_filter'),
+            color: "filled",
+            size: "middle",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-add-table popover-add-icon"
+              className: "dtable-font dtable-icon-add-table"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "add-new-option",
               children: (0, _lang.getLocale)('Add_filter')
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "btn-add-filter-group",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, {
             onClick: canAddFilter ? () => this.addFilterGroup() : () => {},
-            role: "button",
+            color: "filled",
+            size: "middle",
             tabIndex: 0,
             "aria-label": (0, _lang.getLocale)('Add_filter_group'),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-add-table popover-add-icon"
+              className: "dtable-font dtable-icon-add-table"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "add-new-option",
               children: (0, _lang.getLocale)('Add_filter_group')

package/lib/DTableFiltersPopover/widgets/filter-group.js

@@ -138,7 +138,7 @@ class FilterGroup extends _react.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('filter-item', 'filter-group', "level-".concat(level)),
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "delete-filter",
+        className: "delete-filter seatable-icon-btn",
         onClick: this.deleteFilterGroup,
         role: "button",
         tabIndex: 0,

package/lib/DTableFiltersPopover/widgets/filter-item.js

@@ -709,7 +709,7 @@ class FilterItem extends _react.default.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "filter-item",
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "delete-filter",
+        className: "delete-filter seatable-icon-btn",
         onClick: this.onDeleteFilter,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
           className: "dtable-font dtable-icon-fork-number"

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -289,8 +289,8 @@
 }
 
 .dtable-ui-filters-list .delete-filter {
-  width: 12px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   margin-right: 14px;
   text-align: center;
 }
@@ -302,7 +302,7 @@
 .dtable-ui-filters-list .delete-filter .dtable-icon-fork-number {
   display: inline-block;
   font-size: 12px;
-  color: #999;
+  color: var(--bs-icon-color);
 }
 
 .dtable-ui-filters-list .multiple-option-name {
@@ -388,7 +388,7 @@
 }
 
 .dtable-ui-filters-list .filter-item .dtable-icon-fork-number:hover {
-  color: #555555;
+  color: var(--bs-icon-color);
 }
 
 .dtable-ui-filters-list .filter-container-readonly .dtable-select .selected-option-show,

package/lib/DTableModalHeader/index.css

@@ -1,22 +1,4 @@
-.modal-header .dtable-modal-close.close {
-  padding: 14px 16px;
-  opacity: 1;
-  margin: -1rem -1rem -1rem auto;
-  background-color: transparent;
-  border: 0;
-  float: right;
-  font-size: 1.40625rem;
+.modal-close-btn {
+  font-size: 16px;
   font-weight: 700;
-  line-height: 1;
-  color: #000;
-}
-
-.modal-header .dtable-modal-close.close:not(:disabled):not(.disabled):hover {
-  opacity: 1;
-}
-
-.modal-header .dtable-modal-close .dtable-modal-close-inner {
-  width: 28px;
-  height: 28px;
-  font-size: 22.5px; /* same with Seafile close icon */
 }

package/lib/DTableModalHeader/index.js

@@ -16,16 +16,11 @@ const _excluded = ["children"];
 const DTableModalHeader = _ref => {
   let children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-    type: "button",
-    className: "close dtable-modal-close",
-    "data-dismiss": "modal",
+  const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    icon: "x",
     "aria-label": "Close",
     onClick: props.toggle,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-      icon: "x",
-      className: "dtable-modal-close-inner"
-    })
+    className: "modal-close-btn"
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     close: customCloseBtn,

package/lib/FieldDisplaySetting/index.js

@@ -63,7 +63,7 @@ function FieldDisplaySetting(_ref) {
         className: "mb-0",
         children: textProperties.titleValue
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
+        className: "seatable-icon-btn dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
       nodeRef: nodeRef,

package/lib/SelectItem/index.js

@@ -37,7 +37,7 @@ const SelectItem = _ref => {
       title: option.name,
       children: option.name
     }), isShowRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "dtable-ui-select-item-remove-btn",
+      className: "dtable-ui-select-item-remove-btn seatable-icon-btn",
       style: removeBtnStyle,
       onClick: onRemove,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.2",
+  "version": "7.0.4sia.1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",