fix(fe/panel_files): normalize styles and clean up

public/static/css/default.css

@@ -607,3 +607,23 @@
 .work-break-all {
   word-break: break-all;
 }
+
+.icon-s {
+  height: 2rem;
+  padding: 0.6rem 0;
+}
+
+.icon-m {
+  height: 2.4rem;
+  padding: 0.4rem 0;
+}
+
+.icon-l {
+  height: 3.2rem;
+  padding: 0;
+}
+
+.no-height {
+  height: 0;
+  overflow: hidden;
+}

public/static/css/white.css

@@ -24,11 +24,12 @@
   background-color: #ecf0f6;
 }
 .highlight-bg {
-  color: #16a085;
+  background-color: #16a085;
 }
 .dark-bg {
   background-color: #2c3e50;
 }
+
 button {
   background-color: rgba(0, 0, 0, 0.3);
 }
@@ -249,14 +250,6 @@ input:focus {
   word-break: break-all;
 } */
 
-.theme-default #item-rows .desc {
-  display: block;
-  word-break: break-all;
-  padding: 2rem;
-  margin-top: 1rem;
-  border-radius: 0.8rem;
-}
-
 .theme-default #item-rows .hr {
   height: 1px;
   margin: 2rem 0;

public/static/css/white_compact.css

@@ -111,3 +111,9 @@
   line-height: 3.2rem;
   overflow-wrap: break-word;
 }
+
+.theme-default #item-rows .desc {
+  display: block;
+  word-break: break-all;
+  border-radius: 0.8rem;
+}

src/client/web/src/components/panel_files.tsx

@@ -6,7 +6,7 @@ import FileSize from "filesize";
 import { RiFolder2Fill } from "@react-icons/all-files/ri/RiFolder2Fill";
 import { RiFile2Fill } from "@react-icons/all-files/ri/RiFile2Fill";
 import { RiCheckboxFill } from "@react-icons/all-files/ri/RiCheckboxFill";
-import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
+import { RiMenuUnfoldFill } from "@react-icons/all-files/ri/RiMenuUnfoldFill";
 import { RiRestartFill } from "@react-icons/all-files/ri/RiRestartFill";
 import { RiCheckboxBlankLine } from "@react-icons/all-files/ri/RiCheckboxBlankLine";
 
@@ -529,11 +529,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       );
 
       const op = item.isDir ? (
-        <div className={`txt-align-r ${showOp}`}>{checkIcon}</div>
+        <div className={`txt-align-r icon-s ${showOp}`}>{checkIcon}</div>
       ) : (
-        <div className={`txt-align-r ${showOp}`}>
+        <div className={`txt-align-r icon-s ${showOp}`}>
-          <RiMore2Fill
+          <RiMenuUnfoldFill
-            size="1.8rem"
+            size="2rem"
             className={`${descIconColor} margin-r-m`}
             onClick={() => this.toggleDetail(item.name)}
           />
@@ -546,8 +546,12 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       const modTimeTitle = this.props.msg.pkg.get("item.modTime");
       const sizeTitle = this.props.msg.pkg.get("item.size");
       const itemSize = FileSize(item.size, { round: 0 });
-      const details = (
+
-        <div className="desc light-font light-bg">
+      const descStateClass = this.state.showDetail.has(item.name)
+        ? "margin-t-m padding-m"
+        : "no-height";
+      const desc = (
+        <div className={`${descStateClass} desc light-font light-bg`}>
           <div className="column">
             <div className="card">
               <span className="title-m dark-font">{pathTitle}</span>
@@ -584,19 +588,18 @@ export class FilesPanel extends React.Component<Props, State, {}> {
           </div>
         </div>
       );
-      const desc = this.state.showDetail.has(item.name) ? details : null;
 
       const cells = List<React.ReactNode>([
-        icon,
+        <div className="icon-s">{icon}</div>,
         <div>{name}</div>,
-        <div className="title-m light-font">{itemSize}</div>,
+        <div className="title-m light-font padding-l-s">{itemSize}</div>,
         <div className="txt-align-r">{op}</div>,
       ]);
 
       const tableCols = (
         <Columns
           rows={List([cells])}
-          widths={List(["3rem", "calc(100% - 13rem)", "5rem", "5rem"])}
+          widths={List(["3rem", "calc(100% - 16rem)", "8rem", "5rem"])}
           childrenClassNames={List(["", "", "", ""])}
         />
       );