fix(fe): normalize classnames

public/static/css/default.css

@@ -594,3 +594,7 @@
 .txt-align-r {
   text-align: right;
 }
+
+.work-break-all {
+  word-break: break-all;
+}

public/static/css/white.css

@@ -49,7 +49,6 @@ input:focus {
   box-shadow: 0 0.1rem 1rem rgba(22, 160, 133, 0.1);
 }
 
-
 #root-frame {
   position: fixed;
   left: 0;
@@ -181,31 +180,6 @@ input:focus {
   height: 4rem;
 }
 
-.theme-default #breadcrumb {
-  width: 100%;
-}
-
-.theme-default #breadcrumb .location-item {
-  margin: 0 0.5rem 0 0;
-  display: inline-block;
-  line-height: 3rem;
-}
-
-.theme-default #breadcrumb .item {
-  margin: 0 0.5rem 0 0;
-  max-width: 6rem;
-  display: inline-block;
-  line-height: 3rem;
-}
-
-.theme-default #breadcrumb .content {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-wrap: break-word;
-  display: block;
-}
-
 .theme-default #space-used {
   text-align: right;
   line-height: 3rem;
@@ -273,20 +247,16 @@ input:focus {
   margin-top: 2rem;
 }
 
-.theme-default #item-rows .name,
+/* .theme-default #item-rows .name,
 .theme-default #item-rows .name a {
   color: #34495e;
   font-size: 1.8rem;
   line-height: 2rem;
   display: block;
-  /* margin: 2rem 0; */
   word-break: break-all;
-}
+} */
 
 .theme-default #item-rows .desc {
-  color: #95a5a6;
-  font-size: 1.4rem;
-  line-height: 2rem;
   display: block;
   word-break: break-all;
   padding: 2rem;
@@ -300,27 +270,10 @@ input:focus {
   background-color: #ecf0f1;
 }
 
-.theme-default #item-rows .card {
+/* .theme-default #item-rows .card {
   padding: 0.5rem 0;
   text-align: left;
-}
+} */
-
-.theme-default #item-rows .column {
-  width: 50%;
-  max-width: 100%;
-  float: left;
-}
-
-.theme-default #browser .info {
-  border: dashed 1px #95a5a6;
-  font-size: 1.4rem;
-  padding: 1rem;
-  color: #697384;
-  margin: 1rem 0 0 0;
-  background-color: #ecf0f1;
-  white-space: nowrap;
-  overflow: auto;
-}
 
 .theme-default .qrcode {
   padding: 1rem;
@@ -372,10 +325,6 @@ input:focus {
   border-top: dashed 1px #7f8c8d;
 }
 
-.theme-default #browser .item-op {
-  text-align: right;
-}
-
 .theme-default #icon-home {
   color: black;
   margin-right: 1rem;
@@ -529,12 +478,6 @@ input:focus {
   color: #7f8c8d;
 }
 
-.theme-default .pane-title {
-  color: black;
-  font-size: 1.6rem;
-  line-height: 1.6rem;
-}
-
 .theme-default #pane-settings {
   /* padding: 2rem; */
 }
@@ -568,12 +511,6 @@ input:focus {
   background-color: #ecf0f1;
 }
 
-.theme-default .card {
-  padding: 1rem;
-  text-align: center;
-  border-radius: 0.8rem;
-}
-
 .theme-default .key-value {
   margin-top: 0.5rem;
 }
@@ -674,8 +611,11 @@ input:focus {
 }
 
 .theme-default button {
-  color: #697384;
   font-size: 1.2rem;
+}
+
+.theme-default .button-default {
+  color: #697384;
   background-color: #ecf0f6;
 }
 

public/static/css/white_compact.css

@@ -0,0 +1,68 @@
+.theme-default .card {
+  padding: 1rem;
+  border-radius: 0.8rem;
+}
+
+.theme-default #item-rows .column {
+  width: 50%;
+  max-width: 100%;
+  float: left;
+}
+
+.theme-default #browser .info {
+  border: dashed 1px #95a5a6;
+  font-size: 1.4rem;
+  padding: 1rem;
+  color: #697384;
+  margin: 1rem 0 0 0;
+  background-color: #ecf0f1;
+  white-space: nowrap;
+  overflow: auto;
+}
+
+.theme-default .pane-title {
+  color: black;
+  font-size: 1.6rem;
+  line-height: 1.6rem;
+}
+
+.theme-default #breadcrumb {
+  width: 100%;
+}
+
+.theme-default #breadcrumb .location-item {
+  margin: 0 0.5rem 0 0;
+  display: inline-block;
+  line-height: 3rem;
+}
+
+.theme-default #breadcrumb .item {
+  margin: 0 0.5rem 0 0;
+  max-width: 6rem;
+  display: inline-block;
+  line-height: 3rem;
+}
+
+.theme-default #breadcrumb .content {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}
+
+.theme-default .inline-blocks {
+  display: inline-block;
+  margin: auto 1rem auto auto;
+}
+
+.theme-default .select-btn {
+  width: 8rem;
+  display: inline-block;
+}
+
+.theme-default #space-used {
+  text-align: right;
+  line-height: 3rem;
+  font-size: 1.4rem;
+}

src/client/web/build/template/index.template.dev.html

@@ -16,8 +16,9 @@
     <script src="/static/js/react-dom.development.js?v=16.8.6"></script>
     <script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
     <link rel="stylesheet" href="/static/css/reset.css">
-    <link rel="stylesheet" href="/static/css/white.css">
     <link rel="stylesheet" href="/static/css/default.css">
+    <link rel="stylesheet" href="/static/css/white.css">
+    <link rel="stylesheet" href="/static/css/white_compact.css">
     <!-- <link
       rel="apple-touch-icon"
       sizes="57x57"

src/client/web/build/template/index.template.html

@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="/static/css/reset.css">
     <link rel="stylesheet" href="/static/css/default.css">
     <link rel="stylesheet" href="/static/css/white.css">
+    <link rel="stylesheet" href="/static/css/white_compact.css">
     <!-- <link
       rel="apple-touch-icon"
       sizes="57x57"

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

@@ -5,11 +5,8 @@ import FileSize from "filesize";
 
 import { RiFolder2Fill } from "@react-icons/all-files/ri/RiFolder2Fill";
 import { RiFile2Fill } from "@react-icons/all-files/ri/RiFile2Fill";
-import { RiFileList2Fill } from "@react-icons/all-files/ri/RiFileList2Fill";
 import { RiCheckboxFill } from "@react-icons/all-files/ri/RiCheckboxFill";
 import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
-import { BiTable } from "@react-icons/all-files/bi/BiTable";
-import { BiListUl } from "@react-icons/all-files/bi/BiListUl";
 import { RiRestartFill } from "@react-icons/all-files/ri/RiRestartFill";
 import { RiCheckboxBlankLine } from "@react-icons/all-files/ri/RiCheckboxBlankLine";
 
@@ -22,14 +19,11 @@ import { LoginProps } from "./pane_login";
 import { MetadataResp, roleVisitor, roleAdmin } from "../client";
 import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
-import { Table, Cell, Head } from "./layout/table";
 import { BtnList } from "./control/btn_list";
 import { Segments } from "./layout/segments";
-import { Rows } from "./layout/rows";
 import { Columns } from "./layout/columns";
 import { Up } from "../worker/upload_mgr";
 import { UploadEntry, UploadState } from "../worker/interface";
-import { getIcon } from "./visual/icons";
 import {
   ctrlOff,
   ctrlOn,
@@ -535,9 +529,9 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       );
 
       const op = item.isDir ? (
-        <div className={`item-op ${showOp}`}>{checkIcon}</div>
+        <div className={`txt-align-r ${showOp}`}>{checkIcon}</div>
       ) : (
-        <div className={`item-op ${showOp}`}>
+        <div className={`txt-align-r ${showOp}`}>
           <RiMore2Fill
             size="1.8rem"
             className={`${descIconColor} margin-r-m`}
@@ -553,22 +547,22 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       const sizeTitle = this.props.msg.pkg.get("item.size");
       const itemSize = FileSize(item.size, { round: 0 });
       const details = (
-        <div className="desc light-bg">
+        <div className="desc light-font light-bg">
           <div className="column">
             <div className="card">
               <span className="title-m dark-font">{pathTitle}</span>
-              <span>{absDownloadURL}</span>
+              <span className="font-s work-break-all">{absDownloadURL}</span>
             </div>
           </div>
 
           <div className="column">
             <div className="card margin-l-m">
               <span className="title-m dark-font">{modTimeTitle}</span>
-              <span>{modTimeFormatted}</span>
+              <span className="font-s work-break-all">{modTimeFormatted}</span>
             </div>
             <div className="card margin-l-m">
               <span className="title-m dark-font">{sizeTitle}</span>
-              <span>{itemSize}</span>
+              <span className="font-s work-break-all">{itemSize}</span>
             </div>
           </div>
 
@@ -650,10 +644,10 @@ export class FilesPanel extends React.Component<Props, State, {}> {
           </h5>
           <div className="hr"></div>
 
-          <button onClick={gotoRoot} className="margin-r-m">
+          <button onClick={gotoRoot} className="button-default margin-r-m">
             {this.props.msg.pkg.get("endpoints.root")}
           </button>
-          <button onClick={this.goHome}>
+          <button onClick={this.goHome} className="button-default">
             {this.props.msg.pkg.get("endpoints.home")}
           </button>
         </Container>
@@ -688,11 +682,14 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     );
 
     const ops = (
-      <div id="upload-op">
+      <div>
         <Flexbox
           children={List([
             <div>
-              <button onClick={this.mkDir} className="float cyan-btn">
+              <button
+                onClick={this.mkDir}
+                className="inline-blocks cyan1-bg white-font"
+              >
                 {this.props.msg.pkg.get("browser.folder.add")}
               </button>
               <input
@@ -700,12 +697,15 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                 onChange={this.onNewFolderNameChange}
                 value={this.state.newFolderName}
                 placeholder={this.props.msg.pkg.get("browser.folder.name")}
-                className="float"
+                className="inline-blocks"
               />
             </div>,
 
             <div>
-              <button onClick={this.onClickUpload} className="cyan-btn">
+              <button
+                onClick={this.onClickUpload}
+                className="cyan1-bg white-font"
+              >
                 {this.props.msg.pkg.get("browser.upload")}
               </button>
               <input
@@ -778,11 +778,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
 
     const rowsViewColorClass =
       this.props.ui.control.controls.get(filesViewCtrl) === "rows"
-        ? "cyan1-font"
+        ? "highlight-font"
         : "black-font";
     const tableViewColorClass =
       this.props.ui.control.controls.get(filesViewCtrl) === "table"
-        ? "cyan1-font"
+        ? "highlight-font"
         : "black-font";
 
     const itemListPane = (
@@ -806,7 +806,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                           this.props.filesInfo.dirPath.join("/")
                         );
                       }}
-                      className="red-btn left"
+                      className="red-btn margin-r-m"
                     >
                       {this.props.msg.pkg.get("browser.share.del")}
                     </button>
@@ -814,7 +814,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                     <button
                       type="button"
                       onClick={this.addSharing}
-                      className="cyan-btn left"
+                      className="highlight-bg white-font margin-r-m"
                     >
                       {this.props.msg.pkg.get("browser.share.add")}
                     </button>
@@ -827,12 +827,16 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                       <button
                         type="button"
                         onClick={() => this.delete()}
-                        className="red-btn left"
+                        className="red-btn margin-r-m"
                       >
                         {this.props.msg.pkg.get("browser.delete")}
                       </button>
 
-                      <button type="button" onClick={() => this.moveHere()}>
+                      <button
+                        type="button"
+                        className="button-default"
+                        onClick={() => this.moveHere()}
+                      >
                         {this.props.msg.pkg.get("browser.paste")}
                       </button>
                     </span>
@@ -859,7 +863,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                     <span className={`${showOp}`}>
                       <button
                         onClick={() => this.selectAll()}
-                        className="select-btn"
+                        className="select-btn button-default"
                       >
                         {this.props.msg.pkg.get("browser.selectAll")}
                       </button>