feat: Add path and icon into properties dialog

nocpiun · Oct 30, 2022 · 038569f · 038569f · github-actions · Oct 30, 2022
1 parent be0fbb7
commit 038569f
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 33 deletions.
diff --git a/src/client/components/Properties.tsx b/src/client/components/Properties.tsx
@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+
+import Utils from "../../Utils";
+import Emitter from "../utils/emitter";
+import { DirectoryItem, PropertiesProps } from "../types";
+
+import FileIcon from "../../icons/file.svg";
+import FolderIcon from "../../icons/folder_rate.svg";
+
+const Properties: React.FC<PropertiesProps> = (props) => {
+    const [content, setContent] = useState<DirectoryItem | null>(null);
+
+    useEffect(() => {
+        Emitter.get().on("openProperties", (info: DirectoryItem) => {
+            setContent(info);
+        });
+    }, []);
+
+    return (
+        <div className="properties-dialog">
+            <ul>
+                <li>
+                    <b>{Utils.$("page.explorer.list.properties.name")}:</b>
+                    <span>{content?.fullName}</span>
+                </li>
+                <li>
+                    <b>{Utils.$("page.explorer.list.properties.format")}:</b>
+                    <span>
+                        {
+                            content?.isFile
+                            ? content.format +" "+ Utils.$("page.explorer.list.file")
+                            : Utils.$("page.explorer.list.folder")
+                        }
+                    </span>
+                </li>
+                <li>
+                    <b>{Utils.$("page.explorer.list.properties.path")}:</b>
+                    <span>{props.path +"/"+ content?.fullName}</span>
+                </li>
+                {
+                    content?.isFile && content.size
+                    ? <li>
+                        <b>{Utils.$("page.explorer.list.properties.size")}:</b>
+                        <span>{Utils.formatFloat(content.size / 1024, 1) +"KB"}</span>
+                    </li>
+                    : null
+                }
+            </ul>
+            <div className="properties-icon">
+                <img src={content?.isFile ? FileIcon : FolderIcon} alt=""/>
+            </div>
+        </div>
+    );
+}
+
+export default Properties;
diff --git a/src/client/pages/Explorer.tsx b/src/client/pages/Explorer.tsx
@@ -10,6 +10,7 @@ import ListItem from "../components/ListItem";
 import StarredItem from "../components/StarredItem";
 import Easter from "../components/Easter";
 import DialogBox from "../components/DialogBox";
+import Properties from "../components/Properties";
 
 // containers
 import Header from "../containers/explorer/Header";
@@ -106,8 +107,7 @@ export default class Explorer extends Component<ExplorerProps, ExplorerState> {
             itemSelected: [],
             itemList: null,
             starredList: null,
-            direcotryItems: [],
-            propertiesContent: null
+            direcotryItems: []
         };
         this.path = Explorer.root + this.props.path;
 
@@ -328,8 +328,6 @@ export default class Explorer extends Component<ExplorerProps, ExplorerState> {
     }
 
     public render(): ReactElement {
-        const propertiesContent = this.state.propertiesContent;
-
         return (
             <div className="explorer">
                 <Easter />
@@ -375,32 +373,7 @@ export default class Explorer extends Component<ExplorerProps, ExplorerState> {
 
                 {DialogBox.createDialog("properties",
                     <DialogBox ref={this.propertiesDialogRef} id="properties" title={Utils.$("page.explorer.list.properties")}>
-                        <div className="properties-dialog">
-                            <ul>
-                                <li>
-                                    <b>{Utils.$("page.explorer.list.properties.name")}:</b>
-                                    <span>{propertiesContent?.fullName}</span>
-                                </li>
-                                <li>
-                                    <b>{Utils.$("page.explorer.list.properties.format")}:</b>
-                                    <span>
-                                        {
-                                            propertiesContent?.isFile
-                                            ? propertiesContent.format +" "+ Utils.$("page.explorer.list.file")
-                                            : Utils.$("page.explorer.list.folder")
-                                        }
-                                    </span>
-                                </li>
-                                {
-                                    propertiesContent?.isFile && propertiesContent.size
-                                    ? <li>
-                                        <b>{Utils.$("page.explorer.list.properties.size")}:</b>
-                                        <span>{Utils.formatFloat(propertiesContent.size / 1024, 1) +"KB"}</span>
-                                    </li>
-                                    : null
-                                }
-                            </ul>
-                        </div>
+                        <Properties path={this.path}/>
                     </DialogBox>
                 )}
             </div>
@@ -422,8 +395,7 @@ export default class Explorer extends Component<ExplorerProps, ExplorerState> {
         // document.addEventListener("fileListUpdate", () => this.refreshItemList());
         Emitter.get().on("fileListUpdate", () => this.refreshItemList());
 
-        Emitter.get().on("openProperties", (info: DirectoryItem) => {
-            this.setState({ propertiesContent: info });
+        Emitter.get().on("openProperties", () => {
             this.propertiesDialogRef.current?.setOpen(true);
         });
 

diff --git a/src/client/style/dialogs/properties.less b/src/client/style/dialogs/properties.less
@@ -1,5 +1,9 @@
 .properties-dialog {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
     ul {
+        flex: 3;
         padding-top: 10px;
         padding-left: 25px;
         li {
@@ -13,4 +17,13 @@
             }
         }
     }
+    .properties-icon {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        img {
+            width: 100%;
+        }
+    }
 }
diff --git a/src/client/types.tsx b/src/client/types.tsx
@@ -110,7 +110,6 @@ export interface ExplorerState {
     itemList: ReactElement | null
     starredList: ReactElement | null
     direcotryItems: DirectoryItem[]
-    propertiesContent: DirectoryItem | null
 }
 
 export interface ExplorerHeaderProps {
@@ -300,6 +299,12 @@ export interface SashProps {
     onResize: OPC<number, void>;
 }
 
+// Properties Component
+
+export interface PropertiesProps {
+    path: string
+}
+
 // Plugin
 
 export interface ViewerProps extends PageProps {

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -26,6 +26,7 @@
     "page.explorer.list.properties": "Properties",
     "page.explorer.list.properties.name": "Item Name",
     "page.explorer.list.properties.format": "Format",
+    "page.explorer.list.properties.path": "Path",
     "page.explorer.list.properties.size": "Size",
     "page.explorer.left.title": "Star list",
     "page.explorer.right.license": "License",

diff --git a/src/lang/zh-CN.json b/src/lang/zh-CN.json
@@ -26,6 +26,7 @@
     "page.explorer.list.properties": "属性",
     "page.explorer.list.properties.name": "项目名称",
     "page.explorer.list.properties.format": "格式",
+    "page.explorer.list.properties.path": "路径",
     "page.explorer.list.properties.size": "大小",
     "page.explorer.left.title": "收藏夹",
     "page.explorer.right.license": "许可",

diff --git a/src/lang/zh-TW.json b/src/lang/zh-TW.json
@@ -26,6 +26,7 @@
     "page.explorer.list.properties": "屬性",
     "page.explorer.list.properties.name": "項目名稱",
     "page.explorer.list.properties.format": "類型",
+    "page.explorer.list.properties.path": "路徑",
     "page.explorer.list.properties.size": "大小",
     "page.explorer.left.title": "收藏夾",
     "page.explorer.right.license": "許可",