diff --git a/frontend/src/metadata/components/popover/sort-popover/index.js b/frontend/src/metadata/components/popover/sort-popover/index.js index 920760cb12..7bbbfbac71 100644 --- a/frontend/src/metadata/components/popover/sort-popover/index.js +++ b/frontend/src/metadata/components/popover/sort-popover/index.js @@ -7,7 +7,7 @@ import { gettext } from '../../../../utils/constants'; import { getColumnByKey } from '../../../utils/column'; import { getEventClassName } from '../../../utils/common'; import { - EVENT_BUS_TYPE, COLUMNS_ICON_CONFIG, VIEW_SORT_COLUMN_OPTIONS, VIEW_FIRST_SORT_COLUMN_OPTIONS, SORT_TYPE, VIEW_TYPE, + EVENT_BUS_TYPE, COLUMNS_ICON_CONFIG, VIEW_SORT_COLUMN_RULES, VIEW_FIRST_SORT_COLUMN_RULES, SORT_TYPE, VIEW_TYPE, } from '../../../constants'; import { execSortsOperation, getDisplaySorts, isSortsEmpty, SORT_OPERATION } from './utils'; @@ -45,8 +45,8 @@ class SortPopover extends Component { super(props); const { sorts, columns, type } = this.props; this.sortTypeOptions = this.createSortTypeOptions(); - this.supportFirstSortColumnOptions = VIEW_FIRST_SORT_COLUMN_OPTIONS[type || VIEW_TYPE.TABLE]; - this.supportSortColumnOptions = VIEW_SORT_COLUMN_OPTIONS[type || VIEW_TYPE.TABLE]; + this.checkColumnEnableFirstSortRule = VIEW_FIRST_SORT_COLUMN_RULES[type || VIEW_TYPE.TABLE]; + this.checkColumnEnableSortRule = VIEW_SORT_COLUMN_RULES[type || VIEW_TYPE.TABLE]; this.columnsOptions = this.createColumnsOptions(columns); this.state = { sorts: getDisplaySorts(sorts, columns), @@ -155,7 +155,7 @@ class SortPopover extends Component { }; createColumnsOptions = (columns = []) => { - const sortableColumns = columns.filter(column => this.supportSortColumnOptions.includes(column.type)); + const sortableColumns = columns.filter(column => this.checkColumnEnableSortRule(column)); return sortableColumns.map((column) => { const { type, name } = column; return { @@ -208,7 +208,7 @@ class SortPopover extends Component { let columnsOptions = this.columnsOptions; if (index === 0) { - columnsOptions = columnsOptions.filter(o => this.supportFirstSortColumnOptions.includes(o.value.column.type)); + columnsOptions = columnsOptions.filter(o => this.checkColumnEnableFirstSortRule(o.value.column)); } return ( diff --git a/frontend/src/metadata/constants/sort.js b/frontend/src/metadata/constants/sort.js index 6451b49b21..8fde6b269f 100644 --- a/frontend/src/metadata/constants/sort.js +++ b/frontend/src/metadata/constants/sort.js @@ -1,4 +1,4 @@ -import { CellType } from './column'; +import { CellType, PRIVATE_COLUMN_KEY } from './column'; const SORT_TYPE = { UP: 'up', @@ -39,6 +39,19 @@ const GALLERY_FIRST_SORT_COLUMN_OPTIONS = [ CellType.MTIME, ]; +const GALLERY_SORT_PRIVATE_COLUMN_KEYS = [ + PRIVATE_COLUMN_KEY.CAPTURE_TIME, + PRIVATE_COLUMN_KEY.CTIME, + PRIVATE_COLUMN_KEY.MTIME, + PRIVATE_COLUMN_KEY.FILE_NAME, +]; + +const GALLERY_FIRST_SORT_PRIVATE_COLUMN_KEYS = [ + PRIVATE_COLUMN_KEY.CAPTURE_TIME, + PRIVATE_COLUMN_KEY.CTIME, + PRIVATE_COLUMN_KEY.MTIME, +]; + const TEXT_SORTER_COLUMN_TYPES = [CellType.TEXT]; const NUMBER_SORTER_COLUMN_TYPES = [CellType.NUMBER, CellType.RATE]; @@ -48,6 +61,8 @@ export { SHOW_DISABLED_SORT_COLUMNS, GALLERY_SORT_COLUMN_OPTIONS, GALLERY_FIRST_SORT_COLUMN_OPTIONS, + GALLERY_SORT_PRIVATE_COLUMN_KEYS, + GALLERY_FIRST_SORT_PRIVATE_COLUMN_KEYS, TEXT_SORTER_COLUMN_TYPES, NUMBER_SORTER_COLUMN_TYPES, }; diff --git a/frontend/src/metadata/constants/view.js b/frontend/src/metadata/constants/view.js index 4c61270054..5b3315d8b7 100644 --- a/frontend/src/metadata/constants/view.js +++ b/frontend/src/metadata/constants/view.js @@ -1,6 +1,8 @@ import { PRIVATE_COLUMN_KEY } from './column'; import { FILTER_PREDICATE_TYPE } from './filter'; -import { SORT_COLUMN_OPTIONS, GALLERY_SORT_COLUMN_OPTIONS, GALLERY_FIRST_SORT_COLUMN_OPTIONS, SORT_TYPE } from './sort'; +import { SORT_COLUMN_OPTIONS, GALLERY_SORT_COLUMN_OPTIONS, GALLERY_FIRST_SORT_COLUMN_OPTIONS, SORT_TYPE, + GALLERY_SORT_PRIVATE_COLUMN_KEYS, GALLERY_FIRST_SORT_PRIVATE_COLUMN_KEYS, +} from './sort'; export const VIEW_TYPE = { TABLE: 'table', @@ -39,12 +41,12 @@ export const VIEW_TYPE_DEFAULT_SORTS = { [VIEW_TYPE.GALLERY]: [{ column_key: PRIVATE_COLUMN_KEY.FILE_CTIME, sort_type: SORT_TYPE.DOWN }], }; -export const VIEW_SORT_COLUMN_OPTIONS = { - [VIEW_TYPE.TABLE]: SORT_COLUMN_OPTIONS, - [VIEW_TYPE.GALLERY]: GALLERY_SORT_COLUMN_OPTIONS, +export const VIEW_SORT_COLUMN_RULES = { + [VIEW_TYPE.TABLE]: (column) => SORT_COLUMN_OPTIONS.includes(column.type), + [VIEW_TYPE.GALLERY]: (column) => GALLERY_SORT_COLUMN_OPTIONS.includes(column.type) || GALLERY_SORT_PRIVATE_COLUMN_KEYS.includes(column.key), }; -export const VIEW_FIRST_SORT_COLUMN_OPTIONS = { - [VIEW_TYPE.TABLE]: SORT_COLUMN_OPTIONS, - [VIEW_TYPE.GALLERY]: GALLERY_FIRST_SORT_COLUMN_OPTIONS, +export const VIEW_FIRST_SORT_COLUMN_RULES = { + [VIEW_TYPE.TABLE]: (column) => SORT_COLUMN_OPTIONS.includes(column.type), + [VIEW_TYPE.GALLERY]: (column) => GALLERY_FIRST_SORT_COLUMN_OPTIONS.includes(column.type) || GALLERY_FIRST_SORT_PRIVATE_COLUMN_KEYS.includes(column.key), }; diff --git a/frontend/src/metadata/views/gallery/gallery-main.js b/frontend/src/metadata/views/gallery/gallery-main.js index 502c84d1de..ed4d2c00aa 100644 --- a/frontend/src/metadata/views/gallery/gallery-main.js +++ b/frontend/src/metadata/views/gallery/gallery-main.js @@ -3,6 +3,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import EmptyTip from '../../../components/empty-tip'; import { gettext } from '../../../utils/constants'; +import { GALLERY_DATE_MODE } from '../../constants'; const GalleryMain = ({ groups, @@ -10,6 +11,7 @@ const GalleryMain = ({ columns, size, gap, + mode, selectedImages, setSelectedImages, onImageClick, @@ -113,7 +115,9 @@ const GalleryMain = ({ style={{ height, paddingTop }} > - {childrenStartIndex === 0 && (
{name}
)} + {mode !== GALLERY_DATE_MODE.ALL && childrenStartIndex === 0 && ( +
{name || gettext('Empty')}
+ )}
); - }, [overScan, columns, size, imageHeight, selectedImages, onImageClick, onImageDoubleClick, onImageRightClick]); + }, [overScan, columns, size, imageHeight, mode, selectedImages, onImageClick, onImageDoubleClick, onImageRightClick]); if (!Array.isArray(groups) || groups.length === 0) { return ; @@ -189,6 +193,7 @@ GalleryMain.propTypes = { columns: PropTypes.number.isRequired, size: PropTypes.number.isRequired, gap: PropTypes.number.isRequired, + mode: PropTypes.string, selectedImages: PropTypes.array.isRequired, onImageClick: PropTypes.func.isRequired, onImageDoubleClick: PropTypes.func.isRequired, diff --git a/frontend/src/metadata/views/gallery/index.css b/frontend/src/metadata/views/gallery/index.css index d9ae3515ad..f259d2ca56 100644 --- a/frontend/src/metadata/views/gallery/index.css +++ b/frontend/src/metadata/views/gallery/index.css @@ -10,6 +10,10 @@ overflow-y: auto; } +.sf-metadata-gallery-container-all { + padding-top: 4px; +} + .metadata-gallery-date-group { width: 100%; position: relative; diff --git a/frontend/src/metadata/views/gallery/index.js b/frontend/src/metadata/views/gallery/index.js index 222508d22f..3809a5a22c 100644 --- a/frontend/src/metadata/views/gallery/index.js +++ b/frontend/src/metadata/views/gallery/index.js @@ -246,7 +246,6 @@ const Gallery = () => { setImageIndex((prevState) => (prevState + 1) % imageItemsLength); }; - const closeImagePopup = () => { setIsImagePopupOpen(false); }; @@ -311,7 +310,7 @@ const Gallery = () => { return (
-
+
{!isFirstLoading && ( <> { columns={columns} overScan={overScan} gap={GALLERY_IMAGE_GAP} + mode={mode} selectedImages={selectedImages} setSelectedImages={setSelectedImages} onImageClick={handleClick}