1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-08 18:30:53 +00:00

fix menu position (#6611)

This commit is contained in:
Michael An
2024-08-23 17:44:12 +08:00
committed by GitHub
parent b32b3fe904
commit 18a96ed607
3 changed files with 13 additions and 12 deletions

View File

@@ -14,6 +14,8 @@ const propTypes = {
getMenuContainerSize: PropTypes.func, getMenuContainerSize: PropTypes.func,
}; };
const MENU_BORDER_INDENT = 10;
class ContextMenu extends React.Component { class ContextMenu extends React.Component {
constructor(props) { constructor(props) {
@@ -155,8 +157,12 @@ class ContextMenu extends React.Component {
innerHeight = parseFloat(containerSize.height); innerHeight = parseFloat(containerSize.height);
} }
if (y + rect.height > innerHeight) { if (y + rect.height > innerHeight - MENU_BORDER_INDENT) {
menuStyles.top -= rect.height; menuStyles.top = innerHeight - rect.height - MENU_BORDER_INDENT;
}
if (x + rect.width > innerWidth - MENU_BORDER_INDENT) {
menuStyles.left = innerWidth - rect.width - MENU_BORDER_INDENT;
} }
if (menuStyles.left < 0) { if (menuStyles.left < 0) {
@@ -167,10 +173,6 @@ class ContextMenu extends React.Component {
menuStyles.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0; menuStyles.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
} }
if (menuStyles.left + rect.width > innerWidth) {
menuStyles.left = innerWidth - rect.width;
}
return menuStyles; return menuStyles;
}; };

View File

@@ -129,7 +129,8 @@ class DirColumnView extends React.Component {
}; };
getMenuContainerSize = () => { getMenuContainerSize = () => {
return window.getComputedStyle(this.viewModeContainer.current); const { innerWidth, innerHeight } = window;
return { width: innerWidth, height: innerHeight };
}; };
render() { render() {

View File

@@ -612,14 +612,12 @@ class Records extends Component {
renderRecordsBody = ({ containerWidth }) => { renderRecordsBody = ({ containerWidth }) => {
const { isGroupView, recordGetterByIndex } = this.props; const { isGroupView, recordGetterByIndex } = this.props;
const { recordMetrics, columnMetrics, colOverScanStartIdx, colOverScanEndIdx } = this.state; const { recordMetrics, columnMetrics, colOverScanStartIdx, colOverScanEndIdx } = this.state;
const { const { columns, allColumns, totalWidth, lastFrozenColumnKey, frozenColumnsWidth } = columnMetrics;
columns, allColumns, totalWidth, lastFrozenColumnKey, frozenColumnsWidth,
} = columnMetrics;
const contextMenu = (<ContextMenu isGroupView={isGroupView} recordGetterByIndex={recordGetterByIndex} />);
const commonProps = { const commonProps = {
...this.props, ...this.props,
columns, allColumns, totalWidth, lastFrozenColumnKey, frozenColumnsWidth, columns, allColumns, totalWidth, lastFrozenColumnKey, frozenColumnsWidth,
recordMetrics, colOverScanStartIdx, colOverScanEndIdx, contextMenu, recordMetrics, colOverScanStartIdx, colOverScanEndIdx,
contextMenu: (<ContextMenu isGroupView={isGroupView} recordGetterByIndex={recordGetterByIndex} />),
hasSelectedRecord: this.hasSelectedRecord(), hasSelectedRecord: this.hasSelectedRecord(),
getScrollLeft: this.getScrollLeft, getScrollLeft: this.getScrollLeft,
getScrollTop: this.getScrollTop, getScrollTop: this.getScrollTop,