chore(react): improve drag source styles

alibaba · Aug 25, 2021 · bf6466a · bf6466a
1 parent 0ae3cef
commit bf6466a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/packages/react/src/widgets/DragSourceWidget/index.tsx b/packages/react/src/widgets/DragSourceWidget/index.tsx
@@ -37,7 +37,9 @@ export const DragSourceWidget: React.FC<IDragSourceWidgetProps> = observer(
               style={{ margin: '10px 0', width: 150, height: 40 }}
             />
           )}
-          <TextWidget>{node?.designerProps?.title}</TextWidget>
+          <span className={prefix + '-item-text'}>
+            <TextWidget>{node?.designerProps?.title}</TextWidget>
+          </span>
         </div>
       )
     }

diff --git a/packages/react/src/widgets/DragSourceWidget/styles.less b/packages/react/src/widgets/DragSourceWidget/styles.less
@@ -41,7 +41,11 @@
 
   &.expand {
     .@{prefix-cls}-drag-source-content {
-      display: flex;
+      display: grid;
+      grid-template-columns: repeat(3, 33.3333%);
+      grid-gap: 1px;
+      background-color: var(--dn-panel-border-color);
+      border-bottom: 1px solid var(--dn-panel-border-color);
     }
 
     .@{prefix-cls}-drag-source-header {
@@ -54,29 +58,27 @@
   }
 
   &-item {
+    position: relative;
     user-select: none;
     padding: 8px 10px;
-    width: calc(50% + 1px);
+    background: #fff;
     min-height: 40px;
-    margin: -1px;
-    margin-bottom: 0;
-    border: 1px solid var(--dn-panel-border-color);
     color: var(--dn-drag-source-item-color);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    font-size: 13px;
     cursor: grab;
     transition: color 0.1s ease-out;
 
     &:hover {
       color: var(--dn-drag-source-item-hover-color);
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      z-index: 1;
     }
-
-    &:nth-child(2n) {
-      margin-left: 0;
+    &-text {
+      text-align: center;
+      font-size: 12px;
     }
   }
 }