mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-18 00:00:00 +00:00
Merge pull request #7560 from haiwen/fix/column_dropdown_menu
fix column type dropdown menu
This commit is contained in:
@@ -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;
|
||||
}
|
@@ -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>
|
||||
);
|
||||
};
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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';
|
||||
|
||||
|
@@ -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]);
|
||||
|
||||
|
Reference in New Issue
Block a user