tweak buckets files list UI (#166)

lihsai0 · web-flow · commit bf3c2f364b25 · 2023-10-26T11:08:32.000+08:00
* add upload hint when files table is empty

* tweak the ui of bucket tooltip

* tweak batch generate links when bucket protect
diff --git a/src/renderer/components/empty-holder/index.tsx b/src/renderer/components/empty-holder/index.tsx
@@ -5,11 +5,15 @@ import {useI18n} from "@renderer/modules/i18n";
 import LoadingHolder from "../loading-holder";
 
 interface EmptyHolderProps {
+  icon?: React.ReactElement,
+  subtitle?: React.ReactElement,
   loading?: boolean,
   col?: number,
 }
 
 const EmptyHolder: React.FC<EmptyHolderProps> = ({
+  icon = null,
+  subtitle = null,
   loading,
   col,
 }) => {
@@ -24,14 +28,22 @@ const EmptyHolder: React.FC<EmptyHolderProps> = ({
   if (col) {
     return (
       <tr>
-        <td className="text-center text-muted" colSpan={col}>{translate("common.empty")}</td>
+        <td className="text-center text-body text-opacity-25" colSpan={col}>
+          <div className="d-flex flex-column justify-content-center align-items-center">
+            {icon}
+            <span>{translate("common.empty")}</span>
+            {subtitle}
+          </div>
+        </td>
       </tr>
     );
   }
 
   return (
-    <div className="d-flex justify-content-center align-items-center text-muted w-100 h-100">
-      {translate("common.empty")}
+    <div className="d-flex flex-column justify-content-center align-items-center text-body text-opacity-25 w-100 h-100">
+      {icon}
+      <span>{translate("common.empty")}</span>
+      {subtitle}
     </div>
   );
 };
diff --git a/src/renderer/components/modals/file/generate-file-links/index.tsx b/src/renderer/components/modals/file/generate-file-links/index.tsx
@@ -376,8 +376,7 @@ const GenerateFileLinks: React.FC<ModalProps & GenerateFileLinksProps> = (props)
       <Modal.Footer>
         {
           !memoFileItems.length ||
-          batchProgressState.status === BatchTaskStatus.Ended ||
-          domain?.protected
+          batchProgressState.status === BatchTaskStatus.Ended
             ? null
             : <span ref={submitButtonRef}/>
         }
diff --git a/src/renderer/modules/hooks/use-is-overflow.ts b/src/renderer/modules/hooks/use-is-overflow.ts
@@ -0,0 +1,47 @@
+import {useCallback, useEffect, useState} from "react";
+
+const useIsOverflow = () => {
+  const [element, setElement] = useState<HTMLElement>();
+  const [isOverflow, setIsOverflow] = useState(false);
+
+  const ref = useCallback((node: HTMLElement | null) => {
+    if (!node) {
+      return;
+    }
+
+    setElement(node);
+  }, []);
+
+  useEffect(() => {
+    if (!element) {
+      return;
+    }
+
+    const checkOverflow = () => {
+      if (
+        element.clientWidth < element.scrollWidth ||
+        element.clientHeight < element.scrollHeight
+      ) {
+        setIsOverflow(true);
+      } else {
+        setIsOverflow(false);
+      }
+    };
+
+    checkOverflow();
+
+    const observer = new ResizeObserver(checkOverflow);
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [element]);
+
+  return {
+    ref,
+    isOverflow,
+  };
+};
+
+export default useIsOverflow;
diff --git a/src/renderer/modules/i18n/lang/dict.ts b/src/renderer/modules/i18n/lang/dict.ts
@@ -172,6 +172,7 @@ export default interface Dictionary {
       fileStorageClass: string,
       fileModifyDate: string,
       fileOperation: string,
+      emptyHint: string,
       loadMore: string,
       loadMoreFailed: string,
     },
diff --git a/src/renderer/modules/i18n/lang/en-us.ts b/src/renderer/modules/i18n/lang/en-us.ts
@@ -168,6 +168,7 @@ const dict: Dictionary = {
       fileStorageClass: "Storage Class",
       fileModifyDate: "Last Modify Date",
       fileOperation: "Actions",
+      emptyHint: "Drop local files or directors to here to upload",
       loadMore: "Load more",
       loadMoreFailed: "Load more failed. ",
     },
@@ -202,8 +203,8 @@ const dict: Dictionary = {
     },
     upload: {
       dropZone: {
-        enter: "Drag here to upload",
-        over: "Release to upload",
+        enter: "Drag to here to upload",
+        over: "Drop to upload",
       },
       dialog: {
         title: "Select upload files",
diff --git a/src/renderer/modules/i18n/lang/ja-jp.ts b/src/renderer/modules/i18n/lang/ja-jp.ts
@@ -167,6 +167,7 @@ const dict: Dictionary = {
             fileStorageClass: "保管タイプ",
             fileModifyDate: "最終更新日",
             fileOperation: "アクション",
+            emptyHint: "ここにファイルやフォルダをドラッグ＆ドロップしてアップロード",
             loadMore: "もっと読み込む...",
             loadMoreFailed: "読み込みが失敗しました，"
         },
@@ -201,8 +202,8 @@ const dict: Dictionary = {
         },
         upload: {
             dropZone: {
-                enter: "Drag here to upload",
-                over: "Release to upload",
+                enter: "ここにドラッグしてアップロード",
+                over: "ドロップしてアップロード",
             },
             dialog: {
                 title: "[ファイルのアップロード] を選択",
diff --git a/src/renderer/modules/i18n/lang/zh-cn.ts b/src/renderer/modules/i18n/lang/zh-cn.ts
@@ -167,6 +167,7 @@ const dict: Dictionary = {
       fileStorageClass: "存储类型",
       fileModifyDate: "最后修改时间",
       fileOperation: "操作",
+      emptyHint: "拖拽本地文件或目录至此处即可上传",
       loadMore: "加载更多",
       loadMoreFailed: "加载更多失败，",
     },
diff --git a/src/renderer/pages/browse/buckets/bucket-table-row.tsx b/src/renderer/pages/browse/buckets/bucket-table-row.tsx
@@ -4,43 +4,11 @@ import classNames from "classnames";
 import moment from "moment";
 
 import {BucketItem} from "@renderer/modules/qiniu-client";
-import TooltipText from "@renderer/components/tooltip-text";
 import {useI18n} from "@renderer/modules/i18n";
+import useIsOverflow from "@renderer/modules/hooks/use-is-overflow";
+import TooltipText from "@renderer/components/tooltip-text";
 import Duration from "@common/const/duration";
 
-interface BucketNameTooltipProps {
-  bucket: BucketItem
-}
-
-const BucketNameTooltip: React.FC<BucketNameTooltipProps> = ({
-  bucket,
-}) => {
-  const {translate} = useI18n();
-
-  // granted permission text
-  let grantedPermissionTip: string | null = null
-  if (bucket.grantedPermission === "readonly") {
-    grantedPermissionTip = translate("browse.bucketTable.bucketGrantedReadOnly");
-  } else if (bucket.grantedPermission === "readwrite") {
-    grantedPermissionTip = translate("browse.bucketTable.bucketGrantedReadWrite");
-  }
-
-  return (
-    <>
-      <div className="text-start">
-        {bucket.name}
-        {
-          grantedPermissionTip &&
-          <span className="text-info">（{grantedPermissionTip}）</span>
-        }
-      </div>
-      <div className="text-start">
-        <small className="text-secondary">{bucket.remark}</small>
-      </div>
-    </>
-  );
-};
-
 interface BucketTableRowProps {
   data: BucketItem,
   isSelected: boolean,
@@ -54,6 +22,8 @@ const BucketTableRow: React.FC<BucketTableRowProps> = ({
   onClickRow,
   onClickBucket,
 }) => {
+  const {translate} = useI18n();
+
   // icon class name
   let iconClassName = "bi bi-database-fill me-1 text-brown";
   if (bucket.grantedPermission === "readonly") {
@@ -62,6 +32,24 @@ const BucketTableRow: React.FC<BucketTableRowProps> = ({
     iconClassName = "bic bic-database-fill-pencil me-1 text-slate";
   }
 
+  // granted permission text
+  let grantedPermissionTip: string | null = null
+  if (bucket.grantedPermission === "readonly") {
+    grantedPermissionTip = translate("browse.bucketTable.bucketGrantedReadOnly");
+  } else if (bucket.grantedPermission === "readwrite") {
+    grantedPermissionTip = translate("browse.bucketTable.bucketGrantedReadWrite");
+  }
+
+  // is overflow
+  const {
+    ref: bucketRemarkRef,
+    isOverflow: bucketRemarkIsOverflow,
+  } = useIsOverflow();
+  const {
+    ref: bucketNameRef,
+    isOverflow: bucketNameIsOverflow,
+  } = useIsOverflow();
+
   // render
   return (
     <tr
@@ -77,24 +65,38 @@ const BucketTableRow: React.FC<BucketTableRowProps> = ({
           }}
         />
       </td>
-      <td>
-        <TooltipText
-          tooltipPlacement="right"
-          delay={{
-            show: Duration.Second,
-            hide: 0,
-          }}
-          tooltipContent={<BucketNameTooltip bucket={bucket}/>}
-        >
-          <div
-            className="d-inline-flex flex-column"
+      {/* The `line height: 0` fixes height incorrect of row causing by `overflow-ellipsis-inline` */}
+      <td style={{lineHeight: 0}}>
+        <div>
+          <TooltipText
+            disabled={!bucket.grantedPermission && !bucketNameIsOverflow}
+            tooltipPlacement="right"
+            delay={{
+              show: Duration.Second,
+              hide: 0,
+            }}
+            tooltipContent={
+              <div className="text-start">
+                {
+                  bucketNameIsOverflow &&
+                  <div className="text-break-all">
+                    {bucket.name}
+                  </div>
+                }
+                <div className="text-info">
+                  {grantedPermissionTip}
+                </div>
+              </div>
+            }
           >
             <span
               tabIndex={0}
-              className="text-link overflow-ellipsis"
+              className="text-link overflow-ellipsis-inline"
               style={{
                 ["--line-num" as any]: bucket.remark ? 1 : 2,
+                lineHeight: "var(--bs-body-line-height)",
               }}
+              ref={bucketNameRef}
               onKeyUp={e => {
                 if (e.code === "Space") {
                   e.stopPropagation();
@@ -109,16 +111,26 @@ const BucketTableRow: React.FC<BucketTableRowProps> = ({
               <i className={iconClassName}/>
               {bucket.name}
             </span>
-            {
-              bucket.remark &&
+          </TooltipText>
+        </div>
+        {
+          bucket.remark &&
+          <div>
+            <TooltipText
+              disabled={!bucketRemarkIsOverflow}
+              tooltipPlacement="right"
+              tooltipContent={<div className="text-start">{bucket.remark}</div>}
+            >
               <small
-                className="text-secondary overflow-ellipsis"
+                ref={bucketRemarkRef}
+                className="text-secondary overflow-ellipsis-inline"
+                style={{lineHeight: "var(--bs-body-line-height)"}}
               >
                 {bucket.remark}
               </small>
-            }
+            </TooltipText>
           </div>
-        </TooltipText>
+        }
       </td>
       {/* may empty string, so use `||` instead of `??` */}
       <td className="align-middle">{bucket.regionName || bucket.regionId}</td>
diff --git a/src/renderer/pages/browse/buckets/bucket-table.tsx b/src/renderer/pages/browse/buckets/bucket-table.tsx
@@ -50,7 +50,7 @@ const BucketTable: React.FC<BucketTableProps> = ({
       >
         <colgroup>
           <col style={{width: "2rem"}}/>
-          <col/>
+          <col style={{width: "40rem"}}/>
           <col style={{minWidth: "12rem"}}/>
           <col style={{minWidth: "14rem"}}/>
         </colgroup>
diff --git a/src/renderer/pages/browse/files/file-grid/index.tsx b/src/renderer/pages/browse/files/file-grid/index.tsx
@@ -6,6 +6,7 @@ import StorageClass from "@common/models/storage-class";
 
 import {FileItem} from "@renderer/modules/qiniu-client";
 
+import {useI18n} from "@renderer/modules/i18n";
 import EmptyHolder from "@renderer/components/empty-holder";
 import BaseGrid from "@renderer/components/base-grid";
 
@@ -40,6 +41,8 @@ const FileGrid: React.FC<FileGridProps> = ({
   onSelectFiles,
   onDoubleClickFile,
 }) => {
+  const {translate} = useI18n();
+
   const filesData: FileRowData[] = useMemo(() =>
     data.map(item => ({
         ...item,
@@ -80,7 +83,27 @@ const FileGrid: React.FC<FileGridProps> = ({
               rowHeight={GRID_CELL_HEIGHT}
               endReachedThreshold={LOAD_MORE_THRESHOLD}
               onEndReached={handleEndReached}
-              emptyRender={<EmptyHolder loading={loading}/>}
+              emptyRender={
+                <EmptyHolder
+                  icon={
+                    <i
+                      className="bi bi-inbox"
+                      style={{
+                        fontSize: '4rem',
+                        lineHeight: 1,
+                      }}
+                    />
+                  }
+                  subtitle={
+                    <span
+                      className="text-body mt-2"
+                    >
+                      {translate("browse.fileTable.emptyHint")}
+                    </span>
+                  }
+                  loading={loading}
+                />
+              }
               overlayRender={
                 <OverlayHolder
                   loadingMore={loadingMore}
diff --git a/src/renderer/pages/browse/files/file-table/index.tsx b/src/renderer/pages/browse/files/file-table/index.tsx
diff --git a/src/renderer/pages/browse/files/file-tool-bar.tsx b/src/renderer/pages/browse/files/file-tool-bar.tsx
diff --git a/src/renderer/styles/utils/text.scss b/src/renderer/styles/utils/text.scss

Original file line number	Diff line number	Diff line change
`@@ -376,8 +376,7 @@ const GenerateFileLinks: React.FC<ModalProps & GenerateFileLinksProps> = (props)`
`376`	`376`	`<Modal.Footer>`
`377`	`377`	`{`
`378`	`378`	`!memoFileItems.length \|\|`
`379`		`- batchProgressState.status === BatchTaskStatus.Ended \|\|`
`380`		`- domain?.protected`
	`379`	`+ batchProgressState.status === BatchTaskStatus.Ended`
`381`	`380`	`? null`
`382`	`381`	`: <span ref={submitButtonRef}/>`
`383`	`382`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@ const BucketTable: React.FC<BucketTableProps> = ({`
`50`	`50`	`>`
`51`	`51`	`<colgroup>`
`52`	`52`	`<col style={{width: "2rem"}}/>`
`53`		`- <col/>`
	`53`	`+ <col style={{width: "40rem"}}/>`
`54`	`54`	`<col style={{minWidth: "12rem"}}/>`
`55`	`55`	`<col style={{minWidth: "14rem"}}/>`
`56`	`56`	`</colgroup>`