fix: update element detail panel style

antvis · Feb 3, 2021 · 1f09dfa · 1f09dfa
1 parent 7725c16
commit 1f09dfa
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 68 deletions.
diff --git a/packages/graphin-graphscope/package.json b/packages/graphin-graphscope/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/graphin-graphscope",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "An Example for GraphScope",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/graphin-graphscope/src/detail.less b/packages/graphin-graphscope/src/detail.less
@@ -1,56 +1,37 @@
-.draggablePanel {
-  z-index: 3;
-  width: 331px;
-  padding: 16px 24px;
-  background-color: #f0f0f0;
-  border-radius: 6px;
-  box-shadow: 0 5px 18px 0 rgba(255, 255, 255, 0.6);
-  transition: height 0.3s ease;
-  .header {
-    display: inline-flex;
-    width: 100%;
-    margin: 0;
+.header {
+  display: inline-flex;
+  width: 100%;
+  margin: 0;
+  cursor: grab;
+  .title {
+    font-weight: 500;
     cursor: grab;
-    .title {
-      font-weight: 500;
-      cursor: grab;
-    }
-    .collapseIcon {
-      right: 0;
-      cursor: pointer;
-    }
   }
-  .contentContainer {
-    height: 45vh;
-    margin-top: 16px;
-    overflow-y: scroll;
-    // :global {
-    //   .ant-table-thead {
-    //     background: #363b40 !important;
-    //     .ant-table-cell {
-    //       background-color: rgba(255, 255, 255, 0.04) !important;
-    //     }
-    //   }
-    //   .ant-table-tbody {
-    //     background: #363b40 !important;
-    //   }
-    // }
+  .collapseIcon {
+    right: 0;
+    cursor: pointer;
   }
+}
+
+.contentContainer {
+  height: 90%;
+  margin-top: 16px;
+  overflow: auto;
+}
 
-  .resizableHandle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    bottom: 50%;
-    left: 0;
-    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
-    background-position: bottom right;
-    padding: 0 3px 3px 0;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    box-sizing: border-box;
-    &:hover {
-      cursor: se-resize;
-    }
+.resizableHandle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 50%;
+  left: 0;
+  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  &:hover {
+    cursor: se-resize;
   }
 }
diff --git a/packages/graphin-graphscope/src/detail.tsx b/packages/graphin-graphscope/src/detail.tsx
@@ -60,10 +60,19 @@ const ElementDetailPanel: React.FC<DetailProps> = ({ close, type, itemId, data =
           width: 331,
           height: 350,
         }}
-        className={styles.draggablePanel}
-        style={{ overflow: 'auto' }}
+        style={{
+          padding: 16,
+          position: 'absolute',
+          top: 40,
+          right: 0,
+          zIndex: 3,
+          backgroundColor: '#f0f0f0',
+          borderRadius: 6,
+          boxShadow: '0 5px 18px 0 rgba(255, 255, 255, 0.6)',
+          transition: 'height 0.3s ease',
+        }}
       >
-        <div style={{ height: '100%' }}>
+        <div style={{ height: '100%', overflow: 'hidden' }}>
           <Row className={classNames(styles.header, 'handle')}>
             <Col span={22} className={styles.title}>
               {`${itemTypeZH}详情`}

diff --git a/packages/graphin-graphscope/src/graph.tsx b/packages/graphin-graphscope/src/graph.tsx
@@ -11,6 +11,7 @@ import ElementDetailPanel from './detail';
 import CustomMenu from './contextmenu';
 
 import '@antv/graphin-icons/dist/index.css';
+
 import ClickElement from './events/click';
 
 const { hexToRgbaToHex } = Utils;
@@ -414,14 +415,12 @@ const GraphScope: React.FC<GraphProps> = ({
         )}
         {hasFishEye && <FishEye options={{ showLabel: false }} visible={visible} handleEscListener={handleClose} />}
         {detailInfo.visible && (
-          <div style={{ position: 'absolute', top: 40, right: 0 }}>
-            <ElementDetailPanel
-              type={detailInfo.type}
-              data={detailInfo.data}
-              close={() => setDetailInfo({ visible: false, data: null, type: '' })}
-              itemId={detailInfo.data.id}
-            />
-          </div>
+          <ElementDetailPanel
+            type={detailInfo.type}
+            data={detailInfo.data}
+            close={() => setDetailInfo({ visible: false, data: null, type: '' })}
+            itemId={detailInfo.data.id}
+          />
         )}
       </Graphin>
     </div>

diff --git a/packages/graphin-graphscope/src/index.css b/packages/graphin-graphscope/src/index.css
@@ -353,9 +353,3 @@ template {
 .graph-core {
   height: 100%;
 }
-
-.elementDetailPanel {
-  position: absolute;
-  top: 40;
-  right: 0;
-}