haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-25 06:33:48 +00:00
Code Issues Releases Wiki Activity

fix column type dropdown menu

Browse Source
This commit is contained in:
zhouwenxuan
2025-03-05 13:59:33 +08:00
parent 2a78a8e8c3
commit 587f709568
5 changed files with 96 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/metadata/components/popover/column-popover/dropdown-menu/index.css Normal file
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;
}

117
frontend/src/metadata/components/popover/column-popover/custom-dropdown-menu.js → frontend/src/metadata/components/popover/column-popover/dropdown-menu/index.js
View File

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

42
frontend/src/metadata/components/popover/column-popover/type/index.css
View File

@@ -1,45 +1,3 @@
.sf-metadata-column-type .dropdown-menu { .sf-metadata-column-type .dropdown-menu {
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)); 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;
}

2
frontend/src/metadata/components/popover/column-popover/type/index.js
View File

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

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

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