UI improvements (#1963)

* Update sortableTable.html

* Update custom.css
This commit is contained in:
Tara Rostami 2024-03-02 01:43:04 +03:30 committed by GitHub
parent 1c97593360
commit 3a46c3302b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 45 additions and 24 deletions

View file

@ -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;
}

View file

@ -50,9 +50,7 @@
}
},
render: function (createElement) {
return createElement(
'a-table',
{
return createElement('a-table', {
class: {
'ant-table-is-sorting': this.isDragging(),
},
@ -66,9 +64,7 @@
drop: (e) => this.dropHandler(e),
},
scopedSlots: this.$scopedSlots,
},
this.$slots.default,
)
}, 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}}