Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2025-10-31 12:22:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

UI improvements (#1963)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
web/assets/css/custom.css
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;
}

59
web/html/xui/component/sortableTable.html
View file

@ -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}}
{{end}}