fix: fix menu height in explore (#66)

vesoft-inc · Dec 28, 2021 · 081cdc7 · 081cdc7
1 parent e19daae
commit 081cdc7
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 47 deletions.
diff --git a/app/assets/App.less b/app/assets/App.less
@@ -1,3 +1,5 @@
+@import '~#assets/common.less';
+
 html body {
 	height: 100%;
 	padding: 0;
@@ -58,7 +60,7 @@ p {
 	background: #d2d5da;
 
 	.github-star {
-		height: 64px;
+		height: @navHeight;
 		display: flex;
 		align-items: center;
 		margin-right: 8px;
@@ -103,6 +105,7 @@ p {
 		display: flex;
 		z-index: 9;
 		padding-left: 18px;
+		height: @navHeight;
 
 		.studio-logo img {
 			width: 126px;

diff --git a/app/assets/common.less b/app/assets/common.less
@@ -0,0 +1,2 @@
+@navHeight: 64px;
+@controlHeight: 65px;
diff --git a/app/assets/components/DisplayPanel/index.less b/app/assets/components/DisplayPanel/index.less
@@ -1,10 +1,12 @@
+@import '~#assets/common.less';
+
 .display-drawer {
-	top: 129px;
+	position: absolute;
+	top: 0;
 	height: 100%;
 	z-index: 0;
 
 	.ant-drawer-content-wrapper {
-		height: calc(100% - 129px);
 		border-right: 1px solid #d9d9d9;
 		box-shadow: none !important;
 	}

diff --git a/app/assets/components/Expand/index.less b/app/assets/components/Expand/index.less
@@ -1,9 +1,11 @@
+@import '~#assets/common.less';
+
 .expand-drawer {
-	top: 129px;
+	top: 0;
 	z-index: 0;
+	position: absolute;
 
 	> .ant-drawer-content-wrapper {
-		height: calc(100% - 129px);
 		border-left: 1px solid #d9d9d9;
 		box-shadow: none !important;
 	}

diff --git a/app/assets/modules/Explore/Control/index.less b/app/assets/modules/Explore/Control/index.less
@@ -1,7 +1,9 @@
+@import '~#assets/common.less';
+
 .nebula-explore .control {
 	position: relative;
 	z-index: 1;
-	height: 65px;
+	height: @controlHeight;
 	padding: 12px;
 	display: flex;
 	border-bottom: 1px solid #eee;

diff --git a/app/assets/modules/Explore/NebulaGraph/Menu/index.tsx b/app/assets/modules/Explore/NebulaGraph/Menu/index.tsx
@@ -17,6 +17,44 @@ interface IProps {
   width: number;
   height: number;
 }
+const menuConfig = [
+  {
+    component: <ExpandBtn showTitle={true} />,
+  },
+  {
+    component: <UnExpandBtn showTitle={true} />,
+  },
+  {
+    component: <ZoomBtn type="zoom-in" showTitle={true} />,
+  },
+  {
+    component: <ZoomBtn type="zoom-out" showTitle={true} />,
+  },
+  {
+    component: <VertexStyleSetBtn showTitle={true} />,
+  },
+  {
+    component: <PropsDisplayBtn showTitle={true} />,
+  },
+  {
+    component: <Unlock showTitle={true} />,
+  },
+  {
+    component: <Lock showTitle={true} />,
+  },
+  {
+    component: <RollbackBtn showTitle={true} />,
+  },
+  {
+    component: <DeleteBtn showTitle={true} />,
+  },
+  {
+    component: <SearchBtn showTitle={true} />,
+  },
+];
+
+const DEFAULT_MENU_HEIGHT = menuConfig.length * 43;
+
 class Menu extends React.PureComponent<IProps> {
   componentDidMount() {
     const self = this;
@@ -26,11 +64,15 @@ class Menu extends React.PureComponent<IProps> {
         d3.event.preventDefault();
       })
       .on('click', () => {
-        d3.select('.d3-click-right-menu').style('visibility', 'hidden');
+        d3.select('.d3-click-right-menu')
+          .style('visibility', 'hidden')
+          .style('height', `${DEFAULT_MENU_HEIGHT}px`);
       });
 
     d3.selectAll('.panel-btn-item').on('click', () => {
-      d3.select('.d3-click-right-menu').style('visibility', 'hidden');
+      d3.select('.d3-click-right-menu')
+        .style('visibility', 'hidden')
+        .style('height', `${DEFAULT_MENU_HEIGHT}px`);
     });
   }
 
@@ -50,51 +92,34 @@ class Menu extends React.PureComponent<IProps> {
         left = left - menuWidth;
       }
       if (menuHeight + top > height) {
-        top = top - menuHeight;
+        if (height - top > top) {
+          $rightMenu
+            .style('height', `${height - top - 30}px`)
+            .style('overflow', 'auto');
+        } else {
+          top =
+            top - menuHeight < 0
+              ? height - event.offsetY - 10
+              : top - menuHeight;
+          let _menuHeight = DEFAULT_MENU_HEIGHT;
+          if (top < 0) {
+            _menuHeight = height - event.offsetY - 10;
+          } else if (_menuHeight + top > height) {
+            _menuHeight = height - top - 30;
+          }
+          $rightMenu
+            .style('height', `${_menuHeight}px`)
+            .style('overflow', 'auto');
+        }
       }
       $rightMenu
-        .style('left', left + 'px')
-        .style('top', top + 'px')
+        .style('left', `${left}px`)
+        .style('top', `${top}px`)
         .style('visibility', 'visible');
     }
   };
 
   render() {
-    const menuConfig = [
-      {
-        component: <ExpandBtn showTitle={true} />,
-      },
-      {
-        component: <UnExpandBtn showTitle={true} />,
-      },
-      {
-        component: <ZoomBtn type="zoom-in" showTitle={true} />,
-      },
-      {
-        component: <ZoomBtn type="zoom-out" showTitle={true} />,
-      },
-      {
-        component: <VertexStyleSetBtn showTitle={true} />,
-      },
-      {
-        component: <PropsDisplayBtn showTitle={true} />,
-      },
-      {
-        component: <Unlock showTitle={true} />,
-      },
-      {
-        component: <Lock showTitle={true} />,
-      },
-      {
-        component: <RollbackBtn showTitle={true} />,
-      },
-      {
-        component: <DeleteBtn showTitle={true} />,
-      },
-      {
-        component: <SearchBtn showTitle={true} />,
-      },
-    ];
     return (
       <div className="d3-click-right-menu">
         {menuConfig.map((item, index) => (

diff --git a/app/assets/modules/Explore/NebulaGraph/Panel/index.less b/app/assets/modules/Explore/NebulaGraph/Panel/index.less
@@ -1,6 +1,8 @@
+@import '~#assets/common.less';
+
 .graph-wrap {
 	position: relative;
-	height: calc(100% - 65px);
+	height: calc(100% - @controlHeight);
 	overflow: hidden;
 
 	> .panel {