feat(ui/browser): cleanups

src/client/web/src/components/browser.tsx

@@ -9,6 +9,7 @@ import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
 import { RiShareForwardBoxFill } from "@react-icons/all-files/ri/RiShareForwardBoxFill";
 import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill";
 import { RiUploadCloudLine } from "@react-icons/all-files/ri/RiUploadCloudLine";
+import { RiEmotionSadLine } from "@react-icons/all-files/ri/RiEmotionSadLine";
 
 import { alertMsg, comfirmMsg } from "../common/env";
 import { updater } from "./state_updater";
@@ -341,17 +342,12 @@ export class Browser extends React.Component<Props, State, {}> {
               className="black0-font margin-r-m"
               placeholder={this.props.msg.pkg.get("browser.folder.name")}
             />
-            <button
+            <button onClick={this.onMkDir} className="margin-r-m">
-              onClick={this.onMkDir}
-              className="margin-r-m"
-            >
               {this.props.msg.pkg.get("browser.folder.add")}
             </button>
           </span>
           <span className="inline-block margin-t-m margin-b-m">
-            <button
+            <button onClick={this.onClickUpload}>
-              onClick={this.onClickUpload}
-            >
               {this.props.msg.pkg.get("browser.upload")}
             </button>
             <input
@@ -610,7 +606,29 @@ export class Browser extends React.Component<Props, State, {}> {
     const uploadingListPane =
       this.props.browser.tab === "uploading" ? (
         this.props.browser.uploadings.size === 0 ? (
-          <div>No uploading found</div>
+          <div className="container">
+            <Flexbox
+              children={List([
+                <RiEmotionSadLine
+                  size="4rem"
+                  className="margin-r-m red0-font"
+                />,
+                <span>
+                  <h3 className="title-l">
+                    {this.props.msg.pkg.get("upload.404.title")}
+                  </h3>
+                  <span className="desc-l grey0-font">
+                    {this.props.msg.pkg.get("upload.404.desc")}
+                  </span>
+                </span>,
+              ])}
+              childrenStyles={List([
+                { flex: "auto", justifyContent: "flex-end" },
+                { flex: "auto" },
+              ])}
+              className="padding-l"
+            />
+          </div>
         ) : (
           <div className="container">
             <Flexbox
@@ -624,11 +642,11 @@ export class Browser extends React.Component<Props, State, {}> {
                       />,
 
                       <span>
-                        <span className="title-l">
+                        <span className="title-m bold">
                           {this.props.msg.pkg.get("browser.upload.title")}
                         </span>
-                        <span className="desc-l grey0-font">
+                        <span className="desc-m grey0-font">
-                          All files in uploading
+                          {this.props.msg.pkg.get("browser.upload.desc")}
                         </span>
                       </span>,
                     ])}
@@ -685,10 +703,32 @@ export class Browser extends React.Component<Props, State, {}> {
       );
     });
 
-    const sharingingListPane =
+    const sharingListPane =
       this.props.browser.tab === "sharing" ? (
         this.props.browser.sharings.size === 0 ? (
-          <div>No sharing found</div>
+          <div className="container">
+            <Flexbox
+              children={List([
+                <RiEmotionSadLine
+                  size="4rem"
+                  className="margin-r-m red0-font"
+                />,
+                <span>
+                  <h3 className="title-l">
+                    {this.props.msg.pkg.get("share.404.title")}
+                  </h3>
+                  <span className="desc-l grey0-font">
+                    {this.props.msg.pkg.get("share.404.desc")}
+                  </span>
+                </span>,
+              ])}
+              childrenStyles={List([
+                { flex: "auto", justifyContent: "flex-end" },
+                { flex: "auto" },
+              ])}
+              className="padding-l"
+            />
+          </div>
         ) : (
           <div className="container">
             <Flexbox
@@ -702,11 +742,11 @@ export class Browser extends React.Component<Props, State, {}> {
                       />,
 
                       <span>
-                        <span className="title-l">
+                        <span className="title-m bold">
                           {this.props.msg.pkg.get("browser.share.title")}
                         </span>
-                        <span className="desc-l grey0-font">
+                        <span className="desc-m grey0-font">
-                          Sharing Folders
+                          {this.props.msg.pkg.get("browser.share.desc")}
                         </span>
                       </span>,
                     ])}
@@ -784,7 +824,7 @@ export class Browser extends React.Component<Props, State, {}> {
               </button>
             </div>
           </div>
-          {sharingingListPane}
+          {sharingListPane}
           {uploadingListPane}
           {itemListPane}
         </div>

src/client/web/src/components/layout/flexbox.tsx

@@ -43,5 +43,12 @@ export const Flexbox = (props: Props) => {
     }
   );
 
-  return <div style={{ ...containerStyle, ...props.style }}>{children}</div>;
+  return (
+    <div
+      style={{ ...containerStyle, ...props.style }}
+      className={props.className}
+    >
+      {children}
+    </div>
+  );
 };

src/client/web/src/i18n/en_US.ts

@@ -11,7 +11,9 @@ export const msgs: Map<string, string> = Map({
   "browser.share.del": "Stop sharing",
   "browser.share.add": "Share it",
   "browser.share.title": "Sharings",
+  "browser.share.desc": "All folders which are shared",
   "browser.upload.title": "Uploadings",
+  "browser.upload.desc": "All files which are in uploading",
   "browser.folder.name": "Folder name",
   "browser.folder.add": "Add Folder",
   "browser.upload": "Upload",
@@ -67,4 +69,8 @@ export const msgs: Map<string, string> = Map({
   zhCN: "Chinese (simplified)",
   enUS: "English (USA)",
   "move.fail": "Failed to move",
+  "share.404.title": "No folder is in sharing",
+  "share.404.desc": "You can share a folder in the items tab",
+  "upload.404.title": "No uploading is in the progress",
+  "upload.404.desc": "You can upload a file in the items tab",
 });

src/client/web/src/i18n/zh_CN.ts

@@ -11,7 +11,9 @@ export const msgs: Map<string, string> = Map({
   "browser.share.del": "停止共享",
   "browser.share.add": "开始共享",
   "browser.share.title": "共享列表",
+  "browser.share.desc": "所有正在共享的路径",
   "browser.upload.title": "上传列表",
+  "browser.upload.desc": "正在上传的文件列表",
   "browser.folder.name": "文件夹名",
   "browser.folder.add": "添加文件夹",
   "browser.upload": "上传",
@@ -62,7 +64,11 @@ export const msgs: Map<string, string> = Map({
   "role.add": "新增角色",
   "role.name": "角色名字",
   "admin.roles": "角色列表",
-  "zhCN": "中文简体",
+  zhCN: "中文简体",
-  "enUS": "英语美国",
+  enUS: "英语美国",
   "move.fail": "移动失败",
+  "share.404.title": "没有找到正在共享的文件夹",
+  "share.404.desc": "在列表面板可以共享文件夹",
+  "upload.404.title": "没有正在上传的文件",
+  "upload.404.desc": "在列表面板可以上传文件",
 });