yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-09-03 22:23:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): revamp dropable ui effect for glossary terms table (#13443)

Browse Source 
* revamp dropable ui effect for glossary terms table

* logic change for getting classname

* supported one drop style
This commit is contained in:
Ashish Gupta 2023-10-08 04:29:58 +05:30 committed by GitHub
parent ec94eb0113
commit e65f9600b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
openmetadata-ui/src/main/resources/ui/src/components/Draggable/DraggableBodyRow.tsx
View File

@ -11,6 +11,7 @@
* limitations under the License. * limitations under the License.
*/ */
import classNames from 'classnames';
import { isUndefined } from 'lodash'; import { isUndefined } from 'lodash';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd'; import { useDrag, useDrop } from 'react-dnd';
@ -41,8 +42,7 @@ const DraggableBodyRow = <T extends DraggableUnion>({
return { return {
isOver: monitor.isOver(), isOver: monitor.isOver(),
dropClassName: dropClassName: dragIndex !== index ? 'drop-over-child' : '',
dragIndex < (index ?? 0) ? 'drop-over-downward' : 'drop-over-upward',
}; };
}, },
hover: () => { hover: () => {
@ -56,7 +56,7 @@ const DraggableBodyRow = <T extends DraggableUnion>({
// here we are passing the drag record // here we are passing the drag record
const [{ isDragging }, drag] = useDrag({ const [{ isDragging }, drag] = useDrag({
type: DRAGGABLE_BODY_ROW, type: DRAGGABLE_BODY_ROW,
item: { record }, item: { record, index },
collect: (monitor) => ({ collect: (monitor) => ({
isDragging: monitor.isDragging(), isDragging: monitor.isDragging(),
}), }),
@ -71,7 +71,7 @@ const DraggableBodyRow = <T extends DraggableUnion>({
return ( return (
<tr <tr
className={`${className} ${isOver ? dropClassName : ''}`} className={classNames(isOver ? dropClassName : '')}
ref={ref} ref={ref}
style={{ style={{
cursor: 'move', cursor: 'move',

2
openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/teams.less
View File

@ -68,7 +68,7 @@
} }
} }
.drop-over-upward { .drop-over-having-child {
td { td {
background: @active-color; background: @active-color;
} }

28
openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
View File

@ -89,21 +89,33 @@
} }
.drop-over-background { .drop-over-background {
.drop-over-upward { .drop-over-child {
td { td {
background: @active-color; background: @active-color;
border-bottom: 2px solid @primary-color; border: 2px dashed @primary-color;
border-left: transparent;
&:first-child {
border-left: 2px dashed @primary-color;
}
&:last-child {
border-right: 2px dashed @primary-color !important;
}
} }
} }
} }
.drop-over-table { .drop-over-table {
.ant-table-tbody { .ant-table {
.ant-table-cell { table {
background: @active-color; border-collapse: collapse;
} .ant-table-tbody {
tr.ant-table-row:hover > td { border: 2px dashed @primary-color;
background: @active-color;
td {
background: @active-color;
}
}
} }
} }
} }