mirror of
https://github.com/haiwen/seahub.git
synced 2025-10-22 11:43:33 +00:00
optimize card ui (#8272)
* optimize card ui * modify thumbnail to type icon in card's file name item --------- Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
@@ -7,7 +7,7 @@ import { siteRoot, thumbnailDefaultSize } from '../../../utils/constants';
|
|||||||
import { getParentDirFromRecord, getFileMTimeFromRecord } from '../../utils/cell';
|
import { getParentDirFromRecord, getFileMTimeFromRecord } from '../../utils/cell';
|
||||||
import { checkIsDir } from '../../utils/row';
|
import { checkIsDir } from '../../utils/row';
|
||||||
|
|
||||||
const FileName = ({ record, className: propsClassName, value, onFileNameClick, ...params }) => {
|
const FileName = ({ record, className: propsClassName, value, showThumbnail = true, onFileNameClick, ...params }) => {
|
||||||
const parentDir = useMemo(() => getParentDirFromRecord(record), [record]);
|
const parentDir = useMemo(() => getParentDirFromRecord(record), [record]);
|
||||||
const isDir = useMemo(() => checkIsDir(record), [record]);
|
const isDir = useMemo(() => checkIsDir(record), [record]);
|
||||||
const className = useMemo(() => {
|
const className = useMemo(() => {
|
||||||
@@ -21,14 +21,14 @@ const FileName = ({ record, className: propsClassName, value, onFileNameClick, .
|
|||||||
return { iconUrl: icon, defaultIconUrl: icon };
|
return { iconUrl: icon, defaultIconUrl: icon };
|
||||||
}
|
}
|
||||||
const defaultIconUrl = Utils.getFileIconUrl(value);
|
const defaultIconUrl = Utils.getFileIconUrl(value);
|
||||||
if (Utils.imageCheck(value)) {
|
if (Utils.imageCheck(value) && showThumbnail) {
|
||||||
const path = Utils.encodePath(Utils.joinPath(parentDir, value));
|
const path = Utils.encodePath(Utils.joinPath(parentDir, value));
|
||||||
const repoID = window.sfMetadataStore.repoId;
|
const repoID = window.sfMetadataStore.repoId;
|
||||||
const thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailDefaultSize}${path}?mtime=${getFileMTimeFromRecord(record)}`;
|
const thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailDefaultSize}${path}?mtime=${getFileMTimeFromRecord(record)}`;
|
||||||
return { iconUrl: thumbnail, defaultIconUrl };
|
return { iconUrl: thumbnail, defaultIconUrl };
|
||||||
}
|
}
|
||||||
return { iconUrl: defaultIconUrl, defaultIconUrl };
|
return { iconUrl: defaultIconUrl, defaultIconUrl };
|
||||||
}, [isDir, value, parentDir, record]);
|
}, [isDir, value, parentDir, record, showThumbnail]);
|
||||||
|
|
||||||
return (<FileNameFormatter { ...params } className={className} value={value} onClickName={onFileNameClick} { ...iconUrl } />);
|
return (<FileNameFormatter { ...params } className={className} value={value} onClickName={onFileNameClick} { ...iconUrl } />);
|
||||||
|
|
||||||
|
@@ -1,8 +1,9 @@
|
|||||||
.sf-metadata-card-item {
|
.sf-metadata-card-item {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
border: 1px solid #e2e2e2;
|
border: 1px solid var(--bs-border-secondary-color);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 0 3px #0000001f;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -14,8 +15,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sf-metadata-card-item:hover {
|
.sf-metadata-card-item:hover {
|
||||||
background: #fff;
|
box-shadow: 0 0 6px #0000002e;
|
||||||
box-shadow: 0 0 3px #0000002e;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sf-metadata-card-item-image-container {
|
.sf-metadata-card-item-image-container {
|
||||||
@@ -24,12 +24,23 @@
|
|||||||
|
|
||||||
.sf-metadata-card-item-text-container {
|
.sf-metadata-card-item-text-container {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
background-color: var(--bs-body-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sf-metadata-card-item-text-container .sf-metadata-file-name {
|
.sf-metadata-card-item-text-container .sf-metadata-file-name {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sf-metadata-card-item-text-container .sf-metadata-card-last-modified-info {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sf-metadata-card-item-text-container .sf-metadata-card-last-modified-info .collaborator-item {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.sf-metadata-card-item .sf-metadata-card-item-field {
|
.sf-metadata-card-item .sf-metadata-card-item-field {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
@@ -19,6 +19,7 @@ const CardItem = ({
|
|||||||
tagsData,
|
tagsData,
|
||||||
fileNameColumn,
|
fileNameColumn,
|
||||||
mtimeColumn,
|
mtimeColumn,
|
||||||
|
modifierColumn,
|
||||||
displayColumns,
|
displayColumns,
|
||||||
displayEmptyValue,
|
displayEmptyValue,
|
||||||
displayColumnName,
|
displayColumnName,
|
||||||
@@ -30,6 +31,7 @@ const CardItem = ({
|
|||||||
|
|
||||||
const fileNameValue = getCellValueByColumn(record, fileNameColumn);
|
const fileNameValue = getCellValueByColumn(record, fileNameColumn);
|
||||||
const mtimeValue = getCellValueByColumn(record, mtimeColumn);
|
const mtimeValue = getCellValueByColumn(record, mtimeColumn);
|
||||||
|
const modifierValue = getCellValueByColumn(record, modifierColumn);
|
||||||
|
|
||||||
// for the big image
|
// for the big image
|
||||||
const parentDir = useMemo(() => getParentDirFromRecord(record), [record]);
|
const parentDir = useMemo(() => getParentDirFromRecord(record), [record]);
|
||||||
@@ -82,8 +84,11 @@ const CardItem = ({
|
|||||||
<img className="mw-100 mh-100" ref={imgRef} src={imageURLs.URL} onError={onLoadError} alt="" />
|
<img className="mw-100 mh-100" ref={imgRef} src={imageURLs.URL} onError={onLoadError} alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div className="sf-metadata-card-item-text-container">
|
<div className="sf-metadata-card-item-text-container">
|
||||||
<Formatter value={fileNameValue} column={fileNameColumn} record={record} onFileNameClick={handleFilenameClick} tagsData={tagsData} />
|
<Formatter value={fileNameValue} column={fileNameColumn} record={record} showThumbnail={false} onFileNameClick={handleFilenameClick} tagsData={tagsData} />
|
||||||
<Formatter value={mtimeValue} format="relativeTime" column={mtimeColumn} record={record} tagsData={tagsData} />
|
<div className="sf-metadata-card-last-modified-info">
|
||||||
|
<Formatter value={modifierValue} column={modifierColumn} record={record} tagsData={tagsData} />
|
||||||
|
<Formatter value={mtimeValue} format="relativeTime" column={mtimeColumn} record={record} tagsData={tagsData} />
|
||||||
|
</div>
|
||||||
{displayColumns.map((column) => {
|
{displayColumns.map((column) => {
|
||||||
const value = getCellValueByColumn(record, column);
|
const value = getCellValueByColumn(record, column);
|
||||||
if (!displayEmptyValue && !isValidCellValue(value)) {
|
if (!displayEmptyValue && !isValidCellValue(value)) {
|
||||||
@@ -114,8 +119,13 @@ const CardItem = ({
|
|||||||
CardItem.propTypes = {
|
CardItem.propTypes = {
|
||||||
isSelected: PropTypes.bool,
|
isSelected: PropTypes.bool,
|
||||||
record: PropTypes.object,
|
record: PropTypes.object,
|
||||||
|
tagsData: PropTypes.object,
|
||||||
fileNameColumn: PropTypes.object,
|
fileNameColumn: PropTypes.object,
|
||||||
mtimeColumn: PropTypes.object,
|
mtimeColumn: PropTypes.object,
|
||||||
|
modifierColumn: PropTypes.object,
|
||||||
|
displayColumns: PropTypes.array,
|
||||||
|
displayEmptyValue: PropTypes.bool,
|
||||||
|
displayColumnName: PropTypes.bool,
|
||||||
onOpenFile: PropTypes.func.isRequired,
|
onOpenFile: PropTypes.func.isRequired,
|
||||||
onSelectCard: PropTypes.func.isRequired,
|
onSelectCard: PropTypes.func.isRequired,
|
||||||
onContextMenu: PropTypes.func.isRequired,
|
onContextMenu: PropTypes.func.isRequired,
|
||||||
|
@@ -2,7 +2,7 @@ import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react'
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { useMetadataView } from '../../../hooks/metadata-view';
|
import { useMetadataView } from '../../../hooks/metadata-view';
|
||||||
import { CARD_SETTINGS_KEYS } from '../../../constants';
|
import { CARD_SETTINGS_KEYS, PRIVATE_COLUMN_KEY } from '../../../constants';
|
||||||
import { gettext } from '../../../../utils/constants';
|
import { gettext } from '../../../../utils/constants';
|
||||||
import { getRecordIdFromRecord, getFileNameFromRecord, getParentDirFromRecord } from '../../../utils/cell';
|
import { getRecordIdFromRecord, getFileNameFromRecord, getParentDirFromRecord } from '../../../utils/cell';
|
||||||
import { openFile } from '../../../utils/file';
|
import { openFile } from '../../../utils/file';
|
||||||
@@ -30,11 +30,15 @@ const CardItems = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSetti
|
|||||||
const repoInfo = window.sfMetadataContext.getSetting('repoInfo');
|
const repoInfo = window.sfMetadataContext.getSetting('repoInfo');
|
||||||
|
|
||||||
const fileNameColumn = useMemo(() => {
|
const fileNameColumn = useMemo(() => {
|
||||||
return metadata.key_column_map['_name'];
|
return metadata.key_column_map[PRIVATE_COLUMN_KEY.FILE_NAME];
|
||||||
}, [metadata.key_column_map]);
|
}, [metadata.key_column_map]);
|
||||||
|
|
||||||
const mtimeColumn = useMemo(() => {
|
const mtimeColumn = useMemo(() => {
|
||||||
return metadata.key_column_map['_file_mtime'];
|
return metadata.key_column_map[PRIVATE_COLUMN_KEY.FILE_MTIME];
|
||||||
|
}, [metadata.key_column_map]);
|
||||||
|
|
||||||
|
const modifierColumn = useMemo(() => {
|
||||||
|
return metadata.key_column_map[PRIVATE_COLUMN_KEY.FILE_MODIFIER];
|
||||||
}, [metadata.key_column_map]);
|
}, [metadata.key_column_map]);
|
||||||
|
|
||||||
const displayColumns = useMemo(() => {
|
const displayColumns = useMemo(() => {
|
||||||
@@ -154,6 +158,7 @@ const CardItems = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSetti
|
|||||||
tagsData={tagsData}
|
tagsData={tagsData}
|
||||||
fileNameColumn={fileNameColumn}
|
fileNameColumn={fileNameColumn}
|
||||||
mtimeColumn={mtimeColumn}
|
mtimeColumn={mtimeColumn}
|
||||||
|
modifierColumn={modifierColumn}
|
||||||
displayColumns={displayColumns}
|
displayColumns={displayColumns}
|
||||||
displayEmptyValue={displayEmptyValue}
|
displayEmptyValue={displayEmptyValue}
|
||||||
displayColumnName={displayColumnName}
|
displayColumnName={displayColumnName}
|
||||||
|
Reference in New Issue
Block a user