fix: search zindex (#6947)

* fix: search zindex * feat: update ui version --------- Co-authored-by: 杨国璇 <ygx@Hello-word.local>
2025-09-05 00:43:53 +00:00 · 2024-10-26 09:27:19 +08:00
parent 0a8ba80d42
commit 2f13b4cfa7
18 changed files with 70 additions and 70 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,7 +19,7 @@
        "@seafile/sdoc-editor": "1.0.112",
        "@seafile/seafile-calendar": "0.0.28",
        "@seafile/seafile-editor": "^1.0.122",
-        "@seafile/sf-metadata-ui-component": "^0.0.47",
+        "@seafile/sf-metadata-ui-component": "^0.0.48",
        "@uiw/codemirror-extensions-langs": "^4.19.4",
        "@uiw/codemirror-themes": "^4.23.5",
        "@uiw/react-codemirror": "^4.19.4",
@@ -5038,9 +5038,9 @@
      }
    },
    "node_modules/@seafile/sf-metadata-ui-component": {
-      "version": "0.0.47",
-      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.47.tgz",
-      "integrity": "sha512-3EO6NwU+PDBRsvv8UsIRAETf4QPw3spRwbusKTa2ls86sIxTmB/tbTt2Z2FiUpQH9ITrahy1OlCuAZZBnte2rA==",
+      "version": "0.0.48",
+      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.48.tgz",
+      "integrity": "sha512-5/kWI4ABMwvRL5C3+PeEnd/yXX/x+vgguvS/+okEiJbiuOLw85i4FURWg1pHPh7MuVPsn0iinyxdPcIMYS8URg==",
      "dependencies": {
        "@seafile/seafile-calendar": "0.0.28",
        "@seafile/seafile-editor": "^1.0.122",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
    "@seafile/sdoc-editor": "1.0.112",
    "@seafile/seafile-calendar": "0.0.28",
    "@seafile/seafile-editor": "^1.0.122",
-    "@seafile/sf-metadata-ui-component": "^0.0.47",
+    "@seafile/sf-metadata-ui-component": "^0.0.48",
    "@uiw/codemirror-extensions-langs": "^4.19.4",
    "@uiw/codemirror-themes": "^4.23.5",
    "@uiw/react-codemirror": "^4.19.4",
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -721,13 +721,13 @@ class Search extends Component {
    let width = this.state.width !== 'default' ? this.state.width : '';
    let style = {'width': width};
    const { isMaskShow } = this.state;
-    const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + k )`}`;
+    const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + k)`}`;
    return (
      <Fragment>
        <MediaQuery query="(min-width: 768px)">
          <div className="search">
-            <div className={`search-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler} style={{ zIndex: SEARCH_MASK }}></div>
-            <div className={`search-container ${isMaskShow ? 'show' : ''}`} style={{ zIndex: SEARCH_CONTAINER }}>
+            <div className={`search-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler} style={isMaskShow ? { zIndex: SEARCH_MASK } : {}}></div>
+            <div className={`search-container ${isMaskShow ? 'show' : ''}`} style={isMaskShow ? { zIndex: SEARCH_CONTAINER } : {}}>
              <div className={`input-icon ${isMaskShow ? 'mb-1' : ''}`}>
                <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
                <input
--- a/frontend/src/constants/zIndexes.js
+++ b/frontend/src/constants/zIndexes.js
@@ -1,33 +1,9 @@
-// CellMasks should render in front of the cells
-// Unfrozen cells do not have a zIndex specifed
-export const CELL_MASK = 1;
-export const TABLE_MAIN_INTERVAL = 1;
-export const RESIZE_HANDLE = 1;
-export const SEQUENCE_COLUMN = 1;
-
-// higher than unfrozen header cell(0), RESIZE_HANDLE
-export const FROZEN_HEADER_CELL = 2;
-export const GROUP_FROZEN_HEADER = 2;
-export const SCROLL_BAR = 2;
-// In front of CELL_MASK/non-frozen cell(1)、back of the frozen cells (2)
-export const GROUP_BACKDROP = 2;
-export const MOBILE_RECORDS_COLUMN_NAMES = 2;
-export const FROZEN_GROUP_CELL = 2;
 export const RESIZE_BAR = 2;
+
 export const FOLDED_SIDE_NAV_FILES = 2;

-// Frozen cells have a zIndex value of 2 so CELL_MASK should have a higher value
-export const FROZEN_CELL_MASK = 3;
 export const FOLDED_SIDE_NAV = 3;

-// need higher than the doms(etc. cell, cell_mask) which behind of the grid header
-export const GRID_HEADER = 4;
-export const GRID_FOOTER = 4;
-export const UPLOAD_PROGRESS = 4;
-
-// EditorContainer is rendered outside the grid and it higher FROZEN_GROUP_CELL(2)
-export const EDITOR_CONTAINER = 9;
-
 // search mask should higher than file tags (20) but lower than modal mask (1050)
 export const SEARCH_MASK = 1045;

@@ -37,4 +13,3 @@ export const SEARCH_CONTAINER_SETTINGS = 1047;

 export const EXTRA_ATTRIBUTES_DIALOG_MODAL = 1048;

-export const DROPDOWN_MENU = 1051;
--- a/frontend/src/metadata/components/cell-editors/editor-container/normal-editor-container.js
+++ b/frontend/src/metadata/components/cell-editors/editor-container/normal-editor-container.js
@@ -8,8 +8,7 @@ import { getEventClassName } from '../../../utils/common';
 import { isCellValueChanged, getCellValueByColumn } from '../../../utils/cell';
 import { canEditCell } from '../../../utils/column';
 import { isCtrlKeyHeldDown, isKeyPrintable } from '../../../utils/keyboard-utils';
-import { EVENT_BUS_TYPE, PRIVATE_COLUMN_KEYS } from '../../../constants';
-import { zIndexes } from '../../../../constants';
+import { EVENT_BUS_TYPE, PRIVATE_COLUMN_KEYS, metadataZIndexes } from '../../../constants';

 class NormalEditorContainer extends React.Component {

@@ -316,7 +315,7 @@ class NormalEditorContainer extends React.Component {

  render() {
    const { width, height, left, top } = this.props;
-    const style = { position: 'absolute', height, width, left, top, zIndex: zIndexes.EDITOR_CONTAINER };
+    const style = { position: 'absolute', height, width, left, top, zIndex: metadataZIndexes.EDITOR_CONTAINER };
    return (
      <ClickOutside onClickOutside={this.onClickOutside}>
        <div
--- a/frontend/src/metadata/components/cell-editors/editor-container/popup-editor-container.js
+++ b/frontend/src/metadata/components/cell-editors/editor-container/popup-editor-container.js
@@ -6,8 +6,7 @@ import Editor from '../editor';
 import { Utils } from '../../../../utils/utils';
 import { isCellValueChanged, getCellValueByColumn, getColumnOptionNameById, getColumnOptionNamesByIds } from '../../../utils/cell';
 import { canEditCell, getColumnOriginName } from '../../../utils/column';
-import { CellType, EVENT_BUS_TYPE, PRIVATE_COLUMN_KEYS } from '../../../constants';
-import { zIndexes } from '../../../../constants';
+import { CellType, metadataZIndexes, EVENT_BUS_TYPE, PRIVATE_COLUMN_KEYS } from '../../../constants';

 const NOT_SUPPORT_EDITOR_COLUMN_TYPES = [
  CellType.CTIME, CellType.MTIME, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.FILE_NAME,
@@ -28,7 +27,7 @@ class PopupEditorContainer extends React.Component {
      isInvalid: false,
      style: {
        position: 'absolute',
-        zIndex: zIndexes.EDITOR_CONTAINER,
+        zIndex: metadataZIndexes.EDITOR_CONTAINER,
        left,
        top,
        ...additionalStyles
--- a/frontend/src/metadata/components/scrollbar/horizontal-scrollbar.js
+++ b/frontend/src/metadata/components/scrollbar/horizontal-scrollbar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { zIndexes } from '../../../constants';
+import { metadataZIndexes } from '../../constants';

 const propTypes = {
  innerWidth: PropTypes.number,
@@ -35,7 +35,7 @@ class HorizontalScrollbar extends React.Component {
  };

  getContainerStyle = () => {
-    return { zIndex: zIndexes.SCROLL_BAR };
+    return { zIndex: metadataZIndexes.SCROLL_BAR };
  };

  setScrollbarRef = (ref) => {
--- a/frontend/src/metadata/components/scrollbar/right-scrollbar.js
+++ b/frontend/src/metadata/components/scrollbar/right-scrollbar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { zIndexes } from '../../../constants';
+import { metadataZIndexes } from '../../constants';

 const propTypes = {
  onScrollbarScroll: PropTypes.func.isRequired,
@@ -49,7 +49,7 @@ class RightScrollbar extends React.Component {
    const component = window.sfMetadataBody;
    if (component && component.resultContentRef) {
      style.height = component.resultContentRef.clientHeight;
-      style.zIndex = zIndexes.SCROLL_BAR;
+      style.zIndex = metadataZIndexes.SCROLL_BAR;
    }

    /* sf-metadata-header have 33px height */
--- a/frontend/src/metadata/constants/index.js
+++ b/frontend/src/metadata/constants/index.js
@@ -1,6 +1,7 @@
 import CellType from './column/type';
 import { EVENT_BUS_TYPE } from './event-bus-type';
 import TRANSFER_TYPES from './TransferTypes';
+import * as metadataZIndexes from './z-index';

 export * from './column';
 export * from './filter';
@@ -115,6 +116,7 @@ export const EDITOR_TYPE = {
 export {
  EVENT_BUS_TYPE,
  TRANSFER_TYPES,
+  metadataZIndexes,
 };

 export const DATE_TAG_HEIGHT = 44;
--- a/frontend/src/metadata/constants/z-index.js
+++ b/frontend/src/metadata/constants/z-index.js
@@ -0,0 +1,29 @@
+// CellMasks should render in front of the cells
+// Unfrozen cells do not have a zIndex specifed
+export const CELL_MASK = 1;
+export const TABLE_MAIN_INTERVAL = 1;
+export const RESIZE_HANDLE = 1;
+export const SEQUENCE_COLUMN = 1;
+
+//  higher than unfrozen header cell(0), RESIZE_HANDLE
+export const FROZEN_HEADER_CELL = 2;
+export const GROUP_FROZEN_HEADER = 2;
+export const SCROLL_BAR = 2;
+
+// In front of CELL_MASK/non-frozen cell(1)、back of the frozen cells (2)
+export const GROUP_BACKDROP = 2;
+export const MOBILE_RECORDS_COLUMN_NAMES = 2;
+export const FROZEN_GROUP_CELL = 2;
+
+// Frozen cells have a zIndex value of 2 so CELL_MASK should have a higher value
+export const FROZEN_CELL_MASK = 3;
+
+// need higher than the doms(etc. cell, cell_mask) which behind of the grid header
+export const GRID_HEADER = 4;
+export const GRID_FOOTER = 4;
+export const UPLOAD_PROGRESS = 4;
+
+// EditorContainer is rendered outside the grid and it higher FROZEN_GROUP_CELL(2)
+export const EDITOR_CONTAINER = 9;
+
+export const DROPDOWN_MENU = 1051;
--- a/frontend/src/metadata/views/table/table-main/records-footer/index.js
+++ b/frontend/src/metadata/views/table/table-main/records-footer/index.js
@@ -5,8 +5,7 @@ import toaster from '../../../../../components/toast';
 import LoadAllTip from '../load-all-tip';
 import RecordMetrics from '../../utils/record-metrics';
 import { gettext } from '../../../../../utils/constants';
-import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL } from '../../../../constants';
-import { zIndexes } from '../../../../../constants';
+import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL, metadataZIndexes } from '../../../../constants';
 import { addClassName, removeClassName } from '../../utils';
 import { getRecordsFromSelectedRange } from '../../utils/selected-cell-utils';

@@ -136,7 +135,7 @@ class RecordsFooter extends React.Component {
    const recordWidth = (isLoadingMore || hasMore ? SEQUENCE_COLUMN_WIDTH + columns[0].width : SEQUENCE_COLUMN_WIDTH) + groupOffsetLeft;

    return (
-      <div className="sf-metadata-result-footer" style={{ zIndex: zIndexes.GRID_FOOTER }} ref={ref => this.ref = ref}>
+      <div className="sf-metadata-result-footer" style={{ zIndex: metadataZIndexes.GRID_FOOTER }} ref={ref => this.ref = ref}>
        <div className="rows-record d-flex text-nowrap" style={{ width: recordWidth }}>
          <span>{this.getRecord()}</span>
          {!isLoadingMore && hasMore &&
--- a/frontend/src/metadata/views/table/table-main/records-header/index.js
+++ b/frontend/src/metadata/views/table/table-main/records-header/index.js
@@ -6,8 +6,9 @@ import InsertColumn from './insert-column';
 import { isMobile } from '../../../../../utils/utils';
 import { isFrozen, recalculateColumnMetricsByResizeColumn, getFrozenColumns } from '../../../../utils/column';
 import { isEmptyObject } from '../../../../utils/common';
-import { GRID_HEADER_DEFAULT_HEIGHT, GRID_HEADER_DOUBLE_HEIGHT, HEADER_HEIGHT_TYPE, SEQUENCE_COLUMN_WIDTH } from '../../../../constants';
-import { zIndexes } from '../../../../../constants';
+import { GRID_HEADER_DEFAULT_HEIGHT, GRID_HEADER_DOUBLE_HEIGHT, HEADER_HEIGHT_TYPE, SEQUENCE_COLUMN_WIDTH,
+  metadataZIndexes,
+} from '../../../../constants';

 const RecordsHeader = ({
  isGroupView,
@@ -40,7 +41,7 @@ const RecordsHeader = ({
    return {
      width: containerWidth,
      minWidth: '100%',
-      zIndex: zIndexes.GRID_HEADER,
+      zIndex: metadataZIndexes.GRID_HEADER,
      height
    };
  }, [containerWidth, height]);
@@ -56,7 +57,7 @@ const RecordsHeader = ({
      position: (isMobile ? 'absolute' : 'fixed'),
      marginLeft: '0px',
      height,
-      zIndex: zIndexes.SEQUENCE_COLUMN,
+      zIndex: metadataZIndexes.SEQUENCE_COLUMN,
    };
    if ((isGroupView && !isFrozen(columns[0])) || isMobile) {
      value.position = 'absolute';
--- a/frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-container-left.js
+++ b/frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-container-left.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import GroupHeaderLeft from './group-header-left';
-import { zIndexes } from '../../../../../../../constants';
+import { metadataZIndexes } from '../../../../../../constants';

 class GroupContainerLeft extends Component {

@@ -31,7 +31,7 @@ class GroupContainerLeft extends Component {
      firstColumnFrozen, lastColumnFrozen, firstColumnKey,
    } = this.props;
    let containerStyle = {
-      zIndex: firstColumnFrozen ? zIndexes.GROUP_FROZEN_HEADER : 0,
+      zIndex: firstColumnFrozen ? metadataZIndexes.GROUP_FROZEN_HEADER : 0,
      width: leftPaneWidth,
      height,
    };
--- a/frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-header-cell.js
+++ b/frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-header-cell.js
@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { isFrozen } from '../../../../../../utils/column';
-import { GROUP_HEADER_HEIGHT, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
-import { zIndexes } from '../../../../../../../constants';
+import { GROUP_HEADER_HEIGHT, SEQUENCE_COLUMN_WIDTH, metadataZIndexes } from '../../../../../../constants';

 class GroupHeaderCell extends React.PureComponent {

@@ -33,7 +32,7 @@ class GroupHeaderCell extends React.PureComponent {
      left: offsetLeft
    };
    if (isFrozen(column)) {
-      style.zIndex = zIndexes.GROUP_FROZEN_HEADER;
+      style.zIndex = metadataZIndexes.GROUP_FROZEN_HEADER;
    }
    return style;
  };
--- a/frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-header-left.js
+++ b/frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-header-left.js
@@ -4,8 +4,7 @@ import classnames from 'classnames';
 import { IconBtn } from '@seafile/sf-metadata-ui-component';
 import GroupTitle from './group-title';
 import { gettext } from '../../../../../../../utils/constants';
-import { zIndexes } from '../../../../../../../constants';
-import { GROUP_HEADER_HEIGHT } from '../../../../../../constants';
+import { GROUP_HEADER_HEIGHT, metadataZIndexes } from '../../../../../../constants';

 class GroupHeaderLeft extends Component {

@@ -16,7 +15,7 @@ class GroupHeaderLeft extends Component {
    } = this.props;
    const { column, count, level, cell_value, original_cell_value } = group;
    const groupHeaderLeftStyle = {
-      zIndex: firstColumnFrozen && zIndexes.GROUP_FROZEN_HEADER,
+      zIndex: firstColumnFrozen && metadataZIndexes.GROUP_FROZEN_HEADER,
      height: GROUP_HEADER_HEIGHT,
      width,
    };
--- a/frontend/src/metadata/views/table/table-main/records/group-body/group-container/index.js
+++ b/frontend/src/metadata/views/table/table-main/records/group-body/group-container/index.js
@@ -5,8 +5,7 @@ import GroupContainerLeft from './group-container-left';
 import GroupContainerRight from './group-container-right';
 import { isMobile } from '../../../../../../../utils/utils';
 import { isFrozen } from '../../../../../../utils/column';
-import { GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
-import { zIndexes } from '../../../../../../../constants';
+import { GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH, metadataZIndexes } from '../../../../../../constants';

 import './index.css';

@@ -102,7 +101,7 @@ class GroupContainer extends Component {
    let backDropStyle = {
      height: backdropHeight,
      width: leftPaneWidth + scrollLeft ? GROUP_VIEW_OFFSET : 0,
-      zIndex: zIndexes.GROUP_BACKDROP
+      zIndex: metadataZIndexes.GROUP_BACKDROP
    };

    return (
--- a/frontend/src/metadata/views/table/table-main/records/record/index.js
+++ b/frontend/src/metadata/views/table/table-main/records/record/index.js
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import Cell from './cell';
 import ActionsCell from './actions-cell';
 import { getFrozenColumns } from '../../../../../utils/column';
-import { zIndexes } from '../../../../../../constants';
+import { metadataZIndexes } from '../../../../../constants';

 import './index.css';

@@ -191,12 +191,12 @@ class Record extends React.Component {
  getFrozenColumnsStyle = () => {
    const { isGroupView, lastFrozenColumnKey, height } = this.props;
    let style = {
-      zIndex: zIndexes.SEQUENCE_COLUMN,
+      zIndex: metadataZIndexes.SEQUENCE_COLUMN,
      height: height - 1,
    };
    if (isGroupView) {
      style.height = height;
-      style.zIndex = zIndexes.FROZEN_GROUP_CELL;
+      style.zIndex = metadataZIndexes.FROZEN_GROUP_CELL;
      if (!lastFrozenColumnKey) {
        style.marginLeft = '0px';
      }
--- a/frontend/src/metadata/views/table/utils/selected-cell-utils.js
+++ b/frontend/src/metadata/views/table/utils/selected-cell-utils.js
@@ -2,8 +2,7 @@ import { Utils } from '../../../../utils/utils';
 import { getCellValueByColumn, getFileNameFromRecord } from '../../../utils/cell';
 import { getGroupByPath } from '../../../utils/view';
 import { getColumnByIndex, canEditCell } from '../../../utils/column';
-import { PRIVATE_COLUMN_KEY, SUPPORT_PREVIEW_COLUMN_TYPES } from '../../../constants';
-import { zIndexes } from '../../../../constants';
+import { PRIVATE_COLUMN_KEY, SUPPORT_PREVIEW_COLUMN_TYPES, metadataZIndexes } from '../../../constants';
 import { getGroupRecordByIndex } from './group-metrics';

 const SELECT_DIRECTION = {
@@ -87,7 +86,7 @@ export const getSelectedDimensions = ({
    } else {
      top = getRecordTopFromRecordsBody(rowIdx);
    }
-    const zIndex = frozen ? zIndexes.FROZEN_CELL_MASK : zIndexes.CELL_MASK;
+    const zIndex = frozen ? metadataZIndexes.FROZEN_CELL_MASK : metadataZIndexes.CELL_MASK;
    return { width, left, top, height: rowHeight, zIndex };
  }
  return defaultDimensions;
@@ -123,7 +122,7 @@ export const getSelectedRangeDimensions = ({
 }) => {
  const { topLeft, bottomRight, startCell, cursorCell } = selectedRange;
  if (topLeft.idx < 0) {
-    return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: zIndexes.CELL_MASK };
+    return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: metadataZIndexes.CELL_MASK };
  }

  let { totalWidth, anyColFrozen, left } = getColumnRangeProperties(topLeft.idx, bottomRight.idx, columns);
@@ -169,7 +168,7 @@ export const getSelectedRangeDimensions = ({
    top = getRecordTopFromRecordsBody(topLeft.rowIdx);
  }

-  const zIndex = anyColFrozen ? zIndexes.FROZEN_CELL_MASK : zIndexes.CELL_MASK;
+  const zIndex = anyColFrozen ? metadataZIndexes.FROZEN_CELL_MASK : metadataZIndexes.CELL_MASK;
  return { width: totalWidth, left, top, height, zIndex };
 };