feat(fe/layouts): introduce segments layout, controls, refactor breadcrumb

public/static/css/white.css

@@ -88,14 +88,20 @@
 }
 
 .theme-default #breadcrumb {
-  padding: 1rem 0;
   width: 100%;
 }
 
+.theme-default #breadcrumb .location-item {
+  margin: 0 0.5rem 0 0;
+  display: inline-block;
+  line-height: 3rem;
+}
+
 .theme-default #breadcrumb .item {
-  color: #697384;
-  margin-right: 1rem;
+  margin: 0 0.5rem 0 0;
   max-width: 6rem;
+  display: inline-block;
+  line-height: 3rem;
 }
 
 .theme-default #breadcrumb .content {
@@ -106,9 +112,10 @@
   display: block;
 }
 
-.theme-default #breadcrumb .item {
-  color: #697384;
-  margin-right: 1rem;
+.theme-default #space-used {
+  text-align: right;
+  line-height: 3rem;
+  font-size: 1.4rem;
 }
 
 .container {

src/client/web/src/common/controls.ts

@@ -0,0 +1,7 @@
+export const settingsTabsCtrl = "settingsTabs";
+export const settingsDialogCtrl = "settingsDialog";
+export const sharingCtrl = "sharingCtrl";
+export const filesViewCtrl = "filesView";
+export const ctrlHidden = "hidden";
+export const ctrlOn = "on";
+export const ctrlOff = "off";

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

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { List } from "immutable";
+
+export interface Props {
+  id?: string;
+  children: List<React.ReactNode>;
+  ratios: List<number>;
+  dir: boolean; // true=left, false=right
+  className?: string;
+}
+
+export const Segments = (props: Props) => {
+  let sum = 0;
+  props.ratios.forEach((ratio) => {
+    sum += Math.trunc(ratio);
+  });
+  if (sum > 100) {
+    throw `segments: ratio sum(${sum}) > 100`;
+  } else if (props.children.size !== props.ratios.size) {
+    throw `segments: children size(${props.children.size}) != ratio size(${props.ratios.size})`;
+  }
+
+  const children = props.children.map(
+    (child: React.ReactNode, i: number): React.ReactNode => {
+      const width = `${props.ratios.get(i, 0)}%`;
+      return (
+        <div
+          key={`seg-${i}`}
+          style={{ float: props.dir ? "left" : "right", width: width }}
+        >
+          {child}
+        </div>
+      );
+    }
+  );
+
+  return (
+    <div id={props.id}>
+      <div className={props.className}>{children}</div>
+      <div style={{ clear: "both" }}></div>
+    </div>
+  );
+};

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

@@ -24,6 +24,7 @@ import { MetadataResp, roleVisitor, roleAdmin } from "../client";
 import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
 import { Table, Cell, Head } from "./layout/table";
+import { Segments } from "./layout/segments";
 import { Rows, Row } from "./layout/rows";
 import { Up } from "../worker/upload_mgr";
 import { UploadEntry, UploadState } from "../worker/interface";
@@ -734,15 +735,19 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     const breadcrumb = this.props.filesInfo.dirPath.map(
       (pathPart: string, key: number) => {
         return (
-          <button
-            key={pathPart}
-            onClick={() =>
-              this.chdir(this.props.filesInfo.dirPath.slice(0, key + 1))
-            }
-            className="item"
-          >
-            <span className="content">{pathPart}</span>
-          </button>
+          <span key={pathPart}>
+            <a
+              onClick={() =>
+                this.chdir(this.props.filesInfo.dirPath.slice(0, key + 1))
+              }
+              className="item clickable"
+            >
+              <span className="content">{pathPart}</span>
+            </a>
+            <span className="item">
+              <span className="content">{"/"}</span>
+            </span>
+          </span>
         );
       }
     );
@@ -902,38 +907,30 @@ export class FilesPanel extends React.Component<Props, State, {}> {
             />
           </div>
 
-          <Flexbox
+          <Segments
+            id="breadcrumb"
             children={List([
-              <span id="breadcrumb">
-                <Flexbox
-                  children={List([
-                    <RiArchiveDrawerFill
-                      size="3rem"
-                      id="icon-home"
-                      className="clickable"
-                      onClick={this.goHome}
-                    />,
-                    <Flexbox children={breadcrumb} />,
-                  ])}
-                  childrenStyles={List([
-                    { flex: "0 0 auto" },
-                    { flex: "0 0 auto" },
-                  ])}
-                />
-              </span>,
-
-              <span>
-                <span
-                  id="space-used"
-                  className="desc-m grey0-font"
-                >{`${this.props.msg.pkg.get(
-                  "browser.used"
-                )} ${usedSpace} / ${spaceLimit}`}</span>
-              </span>,
+              <div>
+                <span className="location-item">
+                  <span className="content">
+                    {`${this.props.msg.pkg.get("breadcrumb.loc")}:`}
+                  </span>
+                </span>
+                {breadcrumb}
+              </div>,
+              <div
+                id="space-used"
+                className="grey0-font"
+              >{`${this.props.msg.pkg.get(
+                "browser.used"
+              )} ${usedSpace} / ${spaceLimit}`}</div>,
             ])}
-            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            ratios={List([60, 40])}
+            dir={true}
           />
 
+          <div className="hr grey0-bg"></div>
+
           {view}
         </Container>
       </div>

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

@@ -131,4 +131,5 @@ export const msgs: Map<string, string> = Map({
   "op.truncate": "Truncate",
   "op.submit": "Submit",
   "term.time": "Time",
+  "breadcrumb.loc": "Location",
 });

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

@@ -128,4 +128,5 @@ export const msgs: Map<string, string> = Map({
   "op.truncate": "清空",
   "op.submit": "提交",
   "term.time": "时间",
+  "breadcrumb.loc": "位置",
 });