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

Merge pull request #7560 from haiwen/fix/column_dropdown_menu

fix column type dropdown menu
This commit is contained in:
Michael An
2025-03-11 18:04:48 +08:00
committed by GitHub
5 changed files with 96 additions and 102 deletions

View File

@@ -0,0 +1,30 @@
.search-column-container {
padding: 8px 16px;
}
.search-column-container .form-control {
height: 2rem;
}
.column-type-item.active {
background: #20a0ff;
}
.column-type-item.active .sf-metadata-icon {
fill: #fff;
}
.column-type-item:not(.active):hover {
color: #212529;
background-color: #f5f5f5;
}
.column-type-item:hover .sf3-font-down {
color: #666;
}
.column-type-item .sf-metadata-icon {
fill: #aaa;
margin-right: 8px;
flex-shrink: 0;
}

View File

@@ -2,10 +2,13 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Input } from 'reactstrap';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Icon from '../../../../components/icon';
import { gettext } from '../../../../utils/constants';
import { CellType, COLUMNS_ICON_CONFIG, DEFAULT_DATE_FORMAT, DEFAULT_RATE_DATA, DEFAULT_SHOOTING_TIME_FORMAT, PRIVATE_COLUMN_KEY } from '../../../constants';
import { getColumnDisplayName } from '../../../utils/column';
import Icon from '../../../../../components/icon';
import { gettext } from '../../../../../utils/constants';
import { CellType, COLUMNS_ICON_CONFIG, DEFAULT_DATE_FORMAT, DEFAULT_RATE_DATA, DEFAULT_SHOOTING_TIME_FORMAT, PRIVATE_COLUMN_KEY } from '../../../../constants';
import { getColumnDisplayName } from '../../../../utils/column';
import ModalPortal from '../../../../../components/modal-portal';
import './index.css';
const COLUMNS = [
{
@@ -186,60 +189,62 @@ const CustomDropdownMenu = ({ column, modifiers, onSelect }) => {
}, [onSelect]);
return (
<DropdownMenu modifiers={modifiers}>
<div className="search-column-container">
<Input onChange={onSearchColumn} placeholder={gettext('Search properties')} value={searchValue} onClick={onSearchClick} ref={inputRef} />
</div>
{displayColumns.length > 0 && predefinedColumns.length > 0 && (
<>
{predefinedColumns.map(item => (
<DropdownItem
key={item.key}
className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
onMouseEnter={() => setCustomPropertiesOpen(false)}
onClick={() => handleSelect(item)}
>
<Icon symbol={item.icon} className="sf-metadata-icon" />
<span>{item.name}</span>
</DropdownItem>
))}
{basicsColumns.length > 0 && (
<>
<DropdownItem className="w-100" divider />
<Dropdown
className="w-100"
direction="end"
isOpen={isCustomPropertiesOpen}
toggle={toggleCustomProperties}
onMouseEnter={() => setCustomPropertiesOpen(true)}
onMouseMove={(e) => {e.stopPropagation();}}
<ModalPortal>
<DropdownMenu className="sf-metadata-column-type-dropdown-menu" modifiers={modifiers}>
<div className="search-column-container">
<Input onChange={onSearchColumn} placeholder={gettext('Search properties')} value={searchValue} onClick={onSearchClick} ref={inputRef} />
</div>
{displayColumns.length > 0 && predefinedColumns.length > 0 && (
<>
{predefinedColumns.map(item => (
<DropdownItem
key={item.key}
className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
onMouseEnter={() => setCustomPropertiesOpen(false)}
onClick={() => handleSelect(item)}
>
<DropdownToggle
tag='span'
className="column-type-item dropdown-item text-truncate"
<Icon symbol={item.icon} className="sf-metadata-icon" />
<span>{item.name}</span>
</DropdownItem>
))}
{basicsColumns.length > 0 && (
<>
<DropdownItem className="w-100" divider />
<Dropdown
className="w-100"
direction="end"
isOpen={isCustomPropertiesOpen}
toggle={toggleCustomProperties}
onMouseEnter={() => setCustomPropertiesOpen(true)}
onMouseMove={(e) => {e.stopPropagation();}}
>
<Icon symbol="edit" className="sf-metadata-icon" />
<span className="mr-auto">{gettext('Custom properties')}</span>
<i className="sf3-font-down sf3-font rotate-270"></i>
</DropdownToggle>
<DropdownMenu>
{basicsColumns.map((item, index) => (
<DropdownItem
key={index}
className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
onClick={() => handleSelect(item)}
>
<Icon symbol={item.icon} className="sf-metadata-icon" />
<span>{item.name}</span>
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
</>
)}
</>
)}
</DropdownMenu>
<DropdownToggle
tag='span'
className="column-type-item dropdown-item text-truncate d-flex align-items-center"
>
<Icon symbol="edit" className="sf-metadata-icon" />
<span className="mr-auto">{gettext('Custom properties')}</span>
<i className="sf3-font-down sf3-font rotate-270"></i>
</DropdownToggle>
<DropdownMenu container="body" style={{ zIndex: 1061 }}>
{basicsColumns.map((item, index) => (
<DropdownItem
key={index}
className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
onClick={() => handleSelect(item)}
>
<Icon symbol={item.icon} className="sf-metadata-icon" />
<span>{item.name}</span>
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
</>
)}
</>
)}
</DropdownMenu>
</ModalPortal>
);
};

View File

@@ -1,45 +1,3 @@
.sf-metadata-column-type .dropdown-menu {
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
}
.sf-metadata-column-type .search-column-container {
padding: 8px 16px;
}
.sf-metadata-column-type .search-column-container .form-control {
height: 2rem;
}
.sf-metadata-column-type .column-type-item {
color: #212529;
cursor: pointer;
padding: 3px 16px;
width: 100%;
height: 30px;
font-size: 14px;
display: flex;
align-items: center;
}
.sf-metadata-column-type .column-type-item.active {
color: #fff;
background: #20a0ff;
}
.sf-metadata-column-type .column-type-item.active .sf-metadata-icon {
fill: #fff;
}
.sf-metadata-column-type .column-type-item:not(.active):hover {
background-color: #f5f5f5;
}
.sf-metadata-column-type .column-type-item:hover .sf3-font-down {
color: #666;
}
.sf-metadata-column-type .column-type-item .sf-metadata-icon {
fill: #aaa;
margin-right: 8px;
flex-shrink: 0;
}

View File

@@ -4,7 +4,7 @@ import Icon from '@/components/icon';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { gettext } from '../../../../../utils/constants';
import CustomDropdownMenu from '../custom-dropdown-menu';
import CustomDropdownMenu from '../dropdown-menu';
import './index.css';

View File

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import ColumnPopover from '../../../../../components/popover/column-popover';
import Icon from '../../../../../../components/icon';
import { getEventClassName } from '../../../../../../utils/dom';
import CustomDropdownMenu from '../../../../../components/popover/column-popover/custom-dropdown-menu';
import CustomDropdownMenu from '../../../../../components/popover/column-popover/dropdown-menu';
import './index.css';
@@ -26,7 +26,6 @@ const InsertColumn = ({ lastColumn, height, groupOffsetLeft, insertColumn: inser
};
}, [lastColumn, height, groupOffsetLeft]);
const toggleAddColumn = useCallback(() => {
setColumnMenuOpen(!isColumnMenuOpen);
}, [isColumnMenuOpen]);
@@ -54,7 +53,9 @@ const InsertColumn = ({ lastColumn, height, groupOffsetLeft, insertColumn: inser
const className = getEventClassName(event);
if (className.indexOf('column-type-item') > -1) return;
const popover = document.querySelector('.sf-metadata-column-popover');
if ((popover && popover.contains(event.target))) return;
if (popover && popover.contains(event.target)) return;
const dropdownMenu = document.querySelector('.sf-metadata-column-type-dropdown-menu');
if (dropdownMenu && event.target.closest('.sf-metadata-column-type-dropdown-menu')) return;
setColumnPopoverShow(false);
}, [isColumnPopoverShow]);