yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-31 20:51:26 +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.
*/
import classNames from 'classnames';
import { isUndefined } from 'lodash';
import React, { useEffect, useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';
@ -41,8 +42,7 @@ const DraggableBodyRow = <T extends DraggableUnion>({
return {
isOver: monitor.isOver(),
dropClassName:
dragIndex < (index ?? 0) ? 'drop-over-downward' : 'drop-over-upward',
dropClassName: dragIndex !== index ? 'drop-over-child' : '',
};
},
hover: () => {
@ -56,7 +56,7 @@ const DraggableBodyRow = <T extends DraggableUnion>({
// here we are passing the drag record
const [{ isDragging }, drag] = useDrag({
type: DRAGGABLE_BODY_ROW,
item: { record },
item: { record, index },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
@ -71,7 +71,7 @@ const DraggableBodyRow = <T extends DraggableUnion>({
return (
<tr
className={`${className} ${isOver ? dropClassName : ''}`}
className={classNames(isOver ? dropClassName : '')}
ref={ref}
style={{
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 {
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-upward {
.drop-over-child {
td {
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 {
.ant-table-tbody {
.ant-table-cell {
background: @active-color;
}
tr.ant-table-row:hover > td {
background: @active-color;
.ant-table {
table {
border-collapse: collapse;
.ant-table-tbody {
border: 2px dashed @primary-color;
td {
background: @active-color;
}
}
}
}
}