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>

frontend/src/metadata/components/cell-formatter/file-name.js

@@ -7,7 +7,7 @@ import { siteRoot, thumbnailDefaultSize } from '../../../utils/constants';
 import { getParentDirFromRecord, getFileMTimeFromRecord } from '../../utils/cell';
 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 isDir = useMemo(() => checkIsDir(record), [record]);
   const className = useMemo(() => {
@@ -21,14 +21,14 @@ const FileName = ({ record, className: propsClassName, value, onFileNameClick, .
       return { iconUrl: icon, defaultIconUrl: icon };
     }
     const defaultIconUrl = Utils.getFileIconUrl(value);
-    if (Utils.imageCheck(value)) {
+    if (Utils.imageCheck(value) && showThumbnail) {
       const path = Utils.encodePath(Utils.joinPath(parentDir, value));
       const repoID = window.sfMetadataStore.repoId;
       const thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailDefaultSize}${path}?mtime=${getFileMTimeFromRecord(record)}`;
       return { iconUrl: thumbnail, defaultIconUrl };
     }
     return { iconUrl: defaultIconUrl, defaultIconUrl };
-  }, [isDir, value, parentDir, record]);
+  }, [isDir, value, parentDir, record, showThumbnail]);
 
   return (<FileNameFormatter { ...params } className={className} value={value} onClickName={onFileNameClick} { ...iconUrl } />);
 

frontend/src/metadata/views/card/card-items/card-item/index.css

@@ -1,8 +1,9 @@
 .sf-metadata-card-item {
   width: 300px;
   background: #f9f9f9;
-  border: 1px solid #e2e2e2;
+  border: 1px solid var(--bs-border-secondary-color);
   border-radius: 6px;
+  box-shadow: 0 0 3px #0000001f;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -14,8 +15,7 @@
 }
 
 .sf-metadata-card-item:hover {
-  background: #fff;
-  box-shadow: 0 0 3px #0000002e;
+  box-shadow: 0 0 6px #0000002e;
 }
 
 .sf-metadata-card-item-image-container {
@@ -24,12 +24,23 @@
 
 .sf-metadata-card-item-text-container {
   padding: 10px;
+  background-color: var(--bs-body-bg);
 }
 
 .sf-metadata-card-item-text-container .sf-metadata-file-name {
   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 {
   margin-top: 10px;
 }

frontend/src/metadata/views/card/card-items/card-item/index.js

@@ -19,6 +19,7 @@ const CardItem = ({
   tagsData,
   fileNameColumn,
   mtimeColumn,
+  modifierColumn,
   displayColumns,
   displayEmptyValue,
   displayColumnName,
@@ -30,6 +31,7 @@ const CardItem = ({
 
   const fileNameValue = getCellValueByColumn(record, fileNameColumn);
   const mtimeValue = getCellValueByColumn(record, mtimeColumn);
+  const modifierValue = getCellValueByColumn(record, modifierColumn);
 
   // for the big image
   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="" />
       </div>
       <div className="sf-metadata-card-item-text-container">
-        <Formatter value={fileNameValue} column={fileNameColumn} record={record} onFileNameClick={handleFilenameClick} tagsData={tagsData} />
-        <Formatter value={mtimeValue} format="relativeTime" column={mtimeColumn} record={record} tagsData={tagsData} />
+        <Formatter value={fileNameValue} column={fileNameColumn} record={record} showThumbnail={false} onFileNameClick={handleFilenameClick} 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) => {
           const value = getCellValueByColumn(record, column);
           if (!displayEmptyValue && !isValidCellValue(value)) {
@@ -114,8 +119,13 @@ const CardItem = ({
 CardItem.propTypes = {
   isSelected: PropTypes.bool,
   record: PropTypes.object,
+  tagsData: PropTypes.object,
   fileNameColumn: PropTypes.object,
   mtimeColumn: PropTypes.object,
+  modifierColumn: PropTypes.object,
+  displayColumns: PropTypes.array,
+  displayEmptyValue: PropTypes.bool,
+  displayColumnName: PropTypes.bool,
   onOpenFile: PropTypes.func.isRequired,
   onSelectCard: PropTypes.func.isRequired,
   onContextMenu: PropTypes.func.isRequired,

frontend/src/metadata/views/card/card-items/index.js

@@ -2,7 +2,7 @@ import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react'
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 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 { getRecordIdFromRecord, getFileNameFromRecord, getParentDirFromRecord } from '../../../utils/cell';
 import { openFile } from '../../../utils/file';
@@ -30,11 +30,15 @@ const CardItems = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSetti
   const repoInfo = window.sfMetadataContext.getSetting('repoInfo');
 
   const fileNameColumn = useMemo(() => {
-    return metadata.key_column_map['_name'];
+    return metadata.key_column_map[PRIVATE_COLUMN_KEY.FILE_NAME];
   }, [metadata.key_column_map]);
 
   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]);
 
   const displayColumns = useMemo(() => {
@@ -154,6 +158,7 @@ const CardItems = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSetti
               tagsData={tagsData}
               fileNameColumn={fileNameColumn}
               mtimeColumn={mtimeColumn}
+              modifierColumn={modifierColumn}
               displayColumns={displayColumns}
               displayEmptyValue={displayEmptyValue}
               displayColumnName={displayColumnName}