change context menu style (#6333)

* change menu context style

* change tree view menu context

frontend/src/components/dir-view-mode/dir-column-nav.js

@@ -39,6 +39,7 @@ const propTypes = {
   onItemCopy: PropTypes.func.isRequired,
   selectedDirentList: PropTypes.array.isRequired,
   onItemsMove: PropTypes.func.isRequired,
+  getMenuContainerSize: PropTypes.func,
 };
 
 class DirColumnNav extends React.Component {
@@ -269,6 +270,7 @@ class DirColumnNav extends React.Component {
             selectedDirentList={this.props.selectedDirentList}
             onItemsMove={this.props.onItemsMove}
             repoID={this.props.repoID}
+            getMenuContainerSize={this.props.getMenuContainerSize}
           />
         </TreeSection>
         <DirViews

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -87,6 +87,7 @@ class DirColumnView extends React.Component {
     this.resizeBarRef = React.createRef();
     this.dragHandlerRef = React.createRef();
     this.viewModeContainer = React.createRef();
+    this.dirContentMain = React.createRef();
   }
 
   onResizeMouseUp = () => {
@@ -125,6 +126,10 @@ class DirColumnView extends React.Component {
     this.dragHandlerRef.current.style.top = top + 'px';
   };
 
+  getMenuContainerSize = () => {
+    return window.getComputedStyle(this.viewModeContainer.current);
+  };
+
   render() {
     const { currentMode, isTreePanelShown } = this.props;
     const { navRate, inResizing } = this.state;
@@ -132,7 +137,12 @@ class DirColumnView extends React.Component {
     const select = inResizing ? 'none' : '';
     const mainFlex = '1 0 ' + (1 - navRate) * 100 + '%';
     return (
-      <div className="dir-column-view" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref={this.viewModeContainer}>
+      <div
+        className="dir-column-view"
+        onMouseMove={onResizeMove}
+        onMouseUp={this.onResizeMouseUp}
+        ref={this.viewModeContainer}
+      >
         {isTreePanelShown && (
           <>
             <DirColumnNav
@@ -156,6 +166,7 @@ class DirColumnView extends React.Component {
               onItemCopy={this.props.onItemCopy}
               selectedDirentList={this.props.selectedDirentList}
               onItemsMove={this.props.onItemsMove}
+              getMenuContainerSize={this.getMenuContainerSize}
             />
             <ResizeBar
               resizeBarRef={this.resizeBarRef}
@@ -167,7 +178,11 @@ class DirColumnView extends React.Component {
             />
           </>
         )}
-        <div className="dir-content-main" style={{userSelect: select, flex: mainFlex}} onScroll={this.props.isViewFile ? () => {} : this.props.onItemsScroll}>
+        <div
+          className="dir-content-main" style={{userSelect: select, flex: mainFlex}}
+          onScroll={this.props.isViewFile ? () => {} : this.props.onItemsScroll}
+          ref={this.dirContentMain}
+        >
           {this.props.isViewFile ? (
             <DirColumnFile
               path={this.props.path}
@@ -219,6 +234,7 @@ class DirColumnView extends React.Component {
               repoTags={this.props.repoTags}
               onFileTagChanged={this.props.onFileTagChanged}
               showDirentDetail={this.props.showDirentDetail}
+              getMenuContainerSize={this.getMenuContainerSize}
             /> :
             <DirGridView
               path={this.props.path}
@@ -248,6 +264,7 @@ class DirColumnView extends React.Component {
               isDirentDetailShow={this.props.isDirentDetailShow}
               onItemRename={this.props.onItemRename}
               onFileTagChanged={this.props.onFileTagChanged}
+              getMenuContainerSize={this.getMenuContainerSize}
             />
           )}
         </div>

frontend/src/components/dir-view-mode/dir-list-view.js

@@ -41,6 +41,7 @@ const propTypes = {
   showDirentDetail: PropTypes.func.isRequired,
   loadDirentList: PropTypes.func,
   fullDirentList: PropTypes.array,
+  getMenuContainerSize: PropTypes.func,
 };
 
 class DirListView extends React.Component {
@@ -103,6 +104,7 @@ class DirListView extends React.Component {
           onFileTagChanged={this.props.onFileTagChanged}
           showDirentDetail={this.props.showDirentDetail}
           loadDirentList={this.props.loadDirentList}
+          getMenuContainerSize={this.props.getMenuContainerSize}
         />
       </Fragment>
     );