diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css index 5f957cce..4ab6c5a8 100644 --- a/web/assets/css/custom.css +++ b/web/assets/css/custom.css @@ -793,7 +793,6 @@ style attribute { .ant-dropdown-menu-dark .ant-dropdown-menu-item:hover, .dark .ant-select-dropdown-menu-item-selected, -.dark .ant-select-dropdown-menu-item:hover, .dark .ant-calendar-time-picker-select-option-selected { background-color: var(--dark-color-surface-600); } @@ -1249,3 +1248,12 @@ b, strong { .dark .ant-alert-close-icon .anticon-close:hover { color: rgb(255 255 255); } + +.ant-empty-small { + margin: 4px 0; + background-color: transparent !important; +} + +.ant-empty-small .ant-empty-image { + height: 20px; +} diff --git a/web/html/xui/component/sortableTable.html b/web/html/xui/component/sortableTable.html index 4e9af06d..8d14e091 100644 --- a/web/html/xui/component/sortableTable.html +++ b/web/html/xui/component/sortableTable.html @@ -32,7 +32,7 @@ }, props: ['data-source', 'customRow'], inheritAttrs: false, - provide() { + provide() { const sortable = {} Object.defineProperty(sortable, "setSortableIndex", { @@ -50,25 +50,21 @@ } }, render: function (createElement) { - return createElement( - 'a-table', - { - class: { - 'ant-table-is-sorting': this.isDragging(), - }, - props: { - ...this.$attrs, - 'data-source': this.records, - customRow: (record, index) => this.customRowRender(record, index), - }, - on: this.$listeners, - nativeOn: { - drop: (e) => this.dropHandler(e), - }, - scopedSlots: this.$scopedSlots, + return createElement('a-table', { + class: { + 'ant-table-is-sorting': this.isDragging(), }, - this.$slots.default, - ) + props: { + ...this.$attrs, + 'data-source': this.records, + customRow: (record, index) => this.customRowRender(record, index), + }, + on: this.$listeners, + nativeOn: { + drop: (e) => this.dropHandler(e), + }, + scopedSlots: this.$scopedSlots, + }, this.$slots.default, ) }, created() { this.$memoSort = {}; @@ -91,8 +87,15 @@ e.preventDefault(); return; } + const hideDragImage = this.$el.cloneNode(true); + hideDragImage.id = "hideDragImage-hide"; + hideDragImage.style.opacity = 0; + document.body.appendChild(hideDragImage); + e.dataTransfer.setDragImage(hideDragImage, 0, 0); }, dragStopHandler(e, index) { + const hideDragImage = document.getElementById('hideDragImage-hide'); + if (hideDragImage) hideDragImage.remove(); this.resetSortableIndex(e, index); }, dragOverHandler(e, index) { @@ -209,16 +212,26 @@ } } .ant-table-is-sorting .draggable-row td { - background-color: white !important; + background-color: #ffffff !important; } .dark .ant-table-is-sorting .draggable-row td { background-color: var(--dark-color-surface-100) !important; } + .ant-table-is-sorting .dragging td { + background-color: rgb(232 244 242) !important; + color: rgba(0, 0, 0, 0.3); + } + .dark .ant-table-is-sorting .dragging td { + background-color: var(--dark-color-table-hover) !important; + color: rgba(255, 255, 255, 0.3); + } .ant-table-is-sorting .dragging { - opacity: 0.5; + opacity: 1; + box-shadow: 1px -2px 2px #008771; + transition: all 0.2s; } .ant-table-is-sorting .dragging .ant-table-row-index { - opacity: 0; + opacity: 0.3; } </style> -{{end}} \ No newline at end of file +{{end}}