haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-02 07:47:32 +00:00
Code Issues Releases Wiki Activity

change calendar zIndex (#6943)

Browse Source
This commit is contained in:
Michael An 2024-10-25 15:51:05 +08:00 committed by GitHub
parent 9bc0f2af47
commit 5f17fae12f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 63 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/constants/zIndexes.js
View File

@ -1,9 +1,33 @@
export const RESIZE_BAR = 2;
// 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;
@ -12,3 +36,5 @@ export const SEARCH_CONTAINER = 1046;
export const SEARCH_CONTAINER_SETTINGS = 1047;
export const EXTRA_ATTRIBUTES_DIALOG_MODAL = 1048;
export const DROPDOWN_MENU = 1051;

5
frontend/src/metadata/components/cell-editors/editor-container/normal-editor-container.js
View File

@ -8,7 +8,8 @@ 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, metadataZIndexes, PRIVATE_COLUMN_KEYS } from '../../../constants';
import { EVENT_BUS_TYPE, PRIVATE_COLUMN_KEYS } from '../../../constants';
import { zIndexes } from '../../../../constants';
class NormalEditorContainer extends React.Component {
@ -315,7 +316,7 @@ class NormalEditorContainer extends React.Component {
render() {
const { width, height, left, top } = this.props;
const style = { position: 'absolute', height, width, left, top, zIndex: metadataZIndexes.EDITOR_CONTAINER };
const style = { position: 'absolute', height, width, left, top, zIndex: zIndexes.EDITOR_CONTAINER };
return (
<ClickOutside onClickOutside={this.onClickOutside}>
<div

5
frontend/src/metadata/components/cell-editors/editor-container/popup-editor-container.js
View File

@ -6,7 +6,8 @@ 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, metadataZIndexes, PRIVATE_COLUMN_KEYS } from '../../../constants';
import { CellType, EVENT_BUS_TYPE, PRIVATE_COLUMN_KEYS } from '../../../constants';
import { zIndexes } from '../../../../constants';
const NOT_SUPPORT_EDITOR_COLUMN_TYPES = [
CellType.CTIME, CellType.MTIME, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.FILE_NAME,
@ -27,7 +28,7 @@ class PopupEditorContainer extends React.Component {
isInvalid: false,
style: {
position: 'absolute',
zIndex: metadataZIndexes.EDITOR_CONTAINER,
zIndex: zIndexes.EDITOR_CONTAINER,
left,
top,
...additionalStyles

4
frontend/src/metadata/components/scrollbar/horizontal-scrollbar.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { metadataZIndexes } from '../../constants';
import { zIndexes } from '../../../constants';
const propTypes = {
innerWidth: PropTypes.number,
@ -35,7 +35,7 @@ class HorizontalScrollbar extends React.Component {
};
getContainerStyle = () => {
return { zIndex: metadataZIndexes.SCROLL_BAR };
return { zIndex: zIndexes.SCROLL_BAR };
};
setScrollbarRef = (ref) => {

4
frontend/src/metadata/components/scrollbar/right-scrollbar.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { metadataZIndexes } from '../../constants';
import { zIndexes } 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 = metadataZIndexes.SCROLL_BAR;
style.zIndex = zIndexes.SCROLL_BAR;
}
/* sf-metadata-header have 33px height */

2
frontend/src/metadata/constants/index.js
View File

@ -1,7 +1,6 @@
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';
@ -116,7 +115,6 @@ export const EDITOR_TYPE = {
export {
EVENT_BUS_TYPE,
TRANSFER_TYPES,
metadataZIndexes,
};
export const DATE_TAG_HEIGHT = 44;

135
frontend/src/metadata/constants/z-index.js
View File

@ -1,135 +0,0 @@
// copy from sf-metadata
// Drop Target of top row's z-index is -1.
export const DEFAULT_DROP_TARGET = -1;
// 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;
// GALLERY_MAIN_HEADER, TABLE_MAIN_INTERVAL is 3 to hide first freeze column
export const GALLERY_MAIN_HEADER = 3;
// APP_HEADER is 8 than TABLE_HEADER because Logout Popover need to be at the top
export const APP_HEADER = 8;
// higher than frozen cells(2)
export const GRID_HORIZONTAL_SCROLLBAR = 3;
// In mobile list mode, row name fixed, so upper components z-index is 3
export const SEARCH_ALL_TABLES = 3;
export const MOBILE_TABLES_TABS_CONTAINER = 3;
export const MOBILE_TABLE_TOOLBAR = 3;
export const MOBILE_HEADER = 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;
// frozen column header z-index is 3，row drop target horizontal line shoule appear so z-index is 4
export const ROW_DROP_TARGET = 4;
export const VIEW_SIDEBAR_RESIZE_HANDLER = 4;
// need higher or equal to GRID_HEADER(frozen): 4
export const TABLE_SETTING_PANEL = 4;
// higher than PANE_DIVIDER(4)
export const TABLE_TOOLBAR = 5;
export const TABLE_RIGHT_PANEL = 5;
// higher than TABLE_TOOLBAR(5)
export const TABLES_TABS_CONTAINER = 6;
// higher than TABLES_TABS_CONTAINER(6)
export const TABLE_HEADER = 7;
export const TABLE_COMMENT_CONTAINER = 7;
// higher than TABLE_HEADER(7)
export const PANE_DIVIDER = 8;
// EditorContainer is rendered outside the grid and it higher FROZEN_GROUP_CELL(2) and PANE_DIVIDER(8)
export const EDITOR_CONTAINER = 9;
// APP_LEFT_BAR_COLLAPSE z-index should taller than the APP_HEADER and the PANE_DIVIDER(8)
export const APP_LEFT_BAR_COLLAPSE = 9;
export const EXPAND_ROW_ICON = 99;
export const MOBILE_MASK = 100;
export const ROW_EXPAND_VIEW = 100;
export const APP_NAV_SLIDER = 100;
// LINK_RECORDS z-index should higher than EXPAND_ROW_ICON
export const LINK_RECORDS = 100;
// APP_LEFT_BAR is higher than APP_NAV_SLIDER
export const APP_LEFT_BAR = 101;
export const MOBILE_APP_NAV = 101;
export const STATISTIC_DIALOG_MODAL = 800;
export const STATISTIC_ENLARGE_DIALOG_MODAL = 900;
export const STATISTIC_RECORDS_DIALOG_MODAL = 1000;
export const SEARCH_TABLES_DIALOG_MODAL = 1000;
export const DATE_EDITOR = 1001;
export const NOTIFICATION_LIST_MODAL = 1046;
export const TRIGGER_ROWS_MODAL = 1047;
export const TRIGGER_ROWS_VIEW = 1047;
export const RECORD_DETAILS_DIALOG = 1048;
export const CALENDAR_DIALOG_MODAL = 1048;
export const PRINT_ROW_TYPE_MODAL = 1049;
export const IMAGE_PREVIEW_LIGHTBOX = 1051;
export const DROPDOWN_MENU = 1051;
export const RC_CALENDAR = 1053;
export const EDIT_COLUMN_POPOVER = 1060;
export const LARGE_MAP_EDITOR_DIALOG_MODAL = 1061;
export const TOAST_MANAGER = 999999;
export const LINK_PICKER = 10;

5
frontend/src/metadata/views/table/table-main/records-footer/index.js
View File

@ -5,7 +5,8 @@ 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, metadataZIndexes } from '../../../../constants';
import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL } from '../../../../constants';
import { zIndexes } from '../../../../../constants';
import { addClassName, removeClassName } from '../../utils';
import { getRecordsFromSelectedRange } from '../../utils/selected-cell-utils';
@ -135,7 +136,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: metadataZIndexes.GRID_FOOTER }} ref={ref => this.ref = ref}>
<div className="sf-metadata-result-footer" style={{ zIndex: zIndexes.GRID_FOOTER }} ref={ref => this.ref = ref}>
<div className="rows-record d-flex text-nowrap" style={{ width: recordWidth }}>
<span>{this.getRecord()}</span>
{!isLoadingMore && hasMore &&

7
frontend/src/metadata/views/table/table-main/records-header/index.js
View File

@ -6,7 +6,8 @@ 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, metadataZIndexes } from '../../../../constants';
import { GRID_HEADER_DEFAULT_HEIGHT, GRID_HEADER_DOUBLE_HEIGHT, HEADER_HEIGHT_TYPE, SEQUENCE_COLUMN_WIDTH } from '../../../../constants';
import { zIndexes } from '../../../../../constants';
const RecordsHeader = ({
isGroupView,
@ -39,7 +40,7 @@ const RecordsHeader = ({
return {
width: containerWidth,
minWidth: '100%',
zIndex: metadataZIndexes.GRID_HEADER,
zIndex: zIndexes.GRID_HEADER,
height
};
}, [containerWidth, height]);
@ -55,7 +56,7 @@ const RecordsHeader = ({
position: (isMobile ? 'absolute' : 'fixed'),
marginLeft: '0px',
height,
zIndex: metadataZIndexes.SEQUENCE_COLUMN,
zIndex: zIndexes.SEQUENCE_COLUMN,
};
if ((isGroupView && !isFrozen(columns[0])) || isMobile) {
value.position = 'absolute';

4
frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-container-left.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import GroupHeaderLeft from './group-header-left';
import { metadataZIndexes } from '../../../../../../constants';
import { zIndexes } from '../../../../../../../constants';
class GroupContainerLeft extends Component {
@ -31,7 +31,7 @@ class GroupContainerLeft extends Component {
firstColumnFrozen, lastColumnFrozen, firstColumnKey,
} = this.props;
let containerStyle = {
zIndex: firstColumnFrozen ? metadataZIndexes.GROUP_FROZEN_HEADER : 0,
zIndex: firstColumnFrozen ? zIndexes.GROUP_FROZEN_HEADER : 0,
width: leftPaneWidth,
height,
};

5
frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-header-cell.js
View File

@ -2,7 +2,8 @@ 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, metadataZIndexes } from '../../../../../../constants';
import { GROUP_HEADER_HEIGHT, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
import { zIndexes } from '../../../../../../../constants';
class GroupHeaderCell extends React.PureComponent {
@ -32,7 +33,7 @@ class GroupHeaderCell extends React.PureComponent {
left: offsetLeft
};
if (isFrozen(column)) {
style.zIndex = metadataZIndexes.GROUP_FROZEN_HEADER;
style.zIndex = zIndexes.GROUP_FROZEN_HEADER;
}
return style;
};

5
frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-header-left.js
View File

@ -4,7 +4,8 @@ import classnames from 'classnames';
import { IconBtn } from '@seafile/sf-metadata-ui-component';
import GroupTitle from './group-title';
import { gettext } from '../../../../../../../utils/constants';
import { GROUP_HEADER_HEIGHT, metadataZIndexes } from '../../../../../../constants';
import { zIndexes } from '../../../../../../../constants';
import { GROUP_HEADER_HEIGHT } from '../../../../../../constants';
class GroupHeaderLeft extends Component {
@ -15,7 +16,7 @@ class GroupHeaderLeft extends Component {
} = this.props;
const { column, count, level, cell_value, original_cell_value } = group;
const groupHeaderLeftStyle = {
zIndex: firstColumnFrozen && metadataZIndexes.GROUP_FROZEN_HEADER,
zIndex: firstColumnFrozen && zIndexes.GROUP_FROZEN_HEADER,
height: GROUP_HEADER_HEIGHT,
width,
};

5
frontend/src/metadata/views/table/table-main/records/group-body/group-container/index.js
View File

@ -5,7 +5,8 @@ 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, metadataZIndexes } from '../../../../../../constants';
import { GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
import { zIndexes } from '../../../../../../../constants';
import './index.css';
@ -101,7 +102,7 @@ class GroupContainer extends Component {
let backDropStyle = {
height: backdropHeight,
width: leftPaneWidth + scrollLeft ? GROUP_VIEW_OFFSET : 0,
zIndex: metadataZIndexes.GROUP_BACKDROP
zIndex: zIndexes.GROUP_BACKDROP
};
return (

6
frontend/src/metadata/views/table/table-main/records/record/index.js
View File

@ -4,7 +4,7 @@ import classnames from 'classnames';
import Cell from './cell';
import ActionsCell from './actions-cell';
import { getFrozenColumns } from '../../../../../utils/column';
import { metadataZIndexes } from '../../../../../constants';
import { zIndexes } from '../../../../../../constants';
import './index.css';
@ -191,12 +191,12 @@ class Record extends React.Component {
getFrozenColumnsStyle = () => {
const { isGroupView, lastFrozenColumnKey, height } = this.props;
let style = {
zIndex: metadataZIndexes.SEQUENCE_COLUMN,
zIndex: zIndexes.SEQUENCE_COLUMN,
height: height - 1,
};
if (isGroupView) {
style.height = height;
style.zIndex = metadataZIndexes.FROZEN_GROUP_CELL;
style.zIndex = zIndexes.FROZEN_GROUP_CELL;
if (!lastFrozenColumnKey) {
style.marginLeft = '0px';
}

9
frontend/src/metadata/views/table/utils/selected-cell-utils.js
View File

@ -2,7 +2,8 @@ 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, metadataZIndexes } from '../../../constants';
import { PRIVATE_COLUMN_KEY, SUPPORT_PREVIEW_COLUMN_TYPES } from '../../../constants';
import { zIndexes } from '../../../../constants';
import { getGroupRecordByIndex } from './group-metrics';
const SELECT_DIRECTION = {
@ -86,7 +87,7 @@ export const getSelectedDimensions = ({
} else {
top = getRecordTopFromRecordsBody(rowIdx);
}
const zIndex = frozen ? metadataZIndexes.FROZEN_CELL_MASK : metadataZIndexes.CELL_MASK;
const zIndex = frozen ? zIndexes.FROZEN_CELL_MASK : zIndexes.CELL_MASK;
return { width, left, top, height: rowHeight, zIndex };
}
return defaultDimensions;
@ -122,7 +123,7 @@ export const getSelectedRangeDimensions = ({
}) => {
const { topLeft, bottomRight, startCell, cursorCell } = selectedRange;
if (topLeft.idx < 0) {
return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: metadataZIndexes.CELL_MASK };
return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: zIndexes.CELL_MASK };
}
let { totalWidth, anyColFrozen, left } = getColumnRangeProperties(topLeft.idx, bottomRight.idx, columns);
@ -168,7 +169,7 @@ export const getSelectedRangeDimensions = ({
top = getRecordTopFromRecordsBody(topLeft.rowIdx);
}
const zIndex = anyColFrozen ? metadataZIndexes.FROZEN_CELL_MASK : metadataZIndexes.CELL_MASK;
const zIndex = anyColFrozen ? zIndexes.FROZEN_CELL_MASK : zIndexes.CELL_MASK;
return { width: totalWidth, left, top, height, zIndex };
};