feat(ui/layout): add flexbox

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

@@ -9,6 +9,7 @@ import { ICoreState, MsgProps } from "./core_state";
 import { MetadataResp, UploadInfo } from "../client";
 import { Up } from "../worker/upload_mgr";
 import { UploadEntry } from "../worker/interface";
+import { Flexbox } from "./layout/flexbox";
 
 export interface Item {
   name: string;
@@ -556,13 +557,18 @@ export class Browser extends React.Component<Props, State, {}> {
 
           {this.props.browser.uploadings.size === 0 ? null : (
             <div className="container">
-              <div className="flex-list-container bold">
-                <span className="flex-list-item-l">
-                  <span className="dot black-bg"></span>
-                  <span>{this.props.msg.pkg.get("browser.upload.title")}</span>
-                </span>
-                <span className="flex-list-item-r padding-r-m"></span>
-              </div>
+              <Flexbox
+                children={List([
+                  <span>
+                    <span className="dot black-bg"></span>
+                    <span className="bold">
+                      {this.props.msg.pkg.get("browser.upload.title")}
+                    </span>
+                  </span>,
+                  <span></span>,
+                ])}
+              />
+
               {uploadingList}
             </div>
           )}

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

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { List } from "immutable";
+
+export interface Props {
+  children: List<JSX.Element>;
+  childrenStyles?: List<React.CSSProperties>;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const containerStyle = {
+  display: "flex",
+  "flex-direction": "row",
+  "flex-wrap": "nowrap",
+  "align-items": "center",
+  "justify-content": "flex-start",
+};
+
+const childrenStyle = {
+  flex: "50%",
+  display: "flex",
+  "align-items": "flex-start",
+  "justify-content": "flex-start",
+};
+
+export const Flexbox = (props: Props) => {
+  const childrenCount = props.children.size;
+  const children = props.children.map(
+    (child: JSX.Element, i: number): JSX.Element => {
+      return (
+        <div
+          key={`fb-${i}`}
+          style={{
+            ...childrenStyle,
+            flex: `${Math.floor(100 / childrenCount)}%`,
+            ...(props.childrenStyles != null
+              ? props.childrenStyles.get(i)
+              : {}),
+          }}
+        >
+          {child}
+        </div>
+      );
+    }
+  );
+
+  return <div style={{ ...containerStyle, ...props.style }}>{children}</div>;
+};

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

@@ -11,6 +11,7 @@ export const msgs: Map<string, string> = Map({
   "browser.share.del": "Stop sharing",
   "browser.share.add": "Share it",
   "browser.share.title": "Sharings",
+  "browser.upload.title": "Uploadings",
   "browser.folder.name": "Folder name",
   "browser.folder.add": "Add Folder",
   "browser.upload": "Upload",

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

@@ -3,7 +3,6 @@ import { Map } from "immutable";
 export const msgs: Map<string, string> = Map({
   "stateMgr.cap.fail": "获取captcha id失败",
   "browser.upload.del.fail": "删除上传失败",
-  "browser.upload.title": "正在上传",
   "browser.folder.add.fail": "文件夹名不可为空",
   "browser.del.fail": "至少选择一个文件或文件夹",
   "browser.move.fail": "源与目标相同",
@@ -12,6 +11,7 @@ export const msgs: Map<string, string> = Map({
   "browser.share.del": "停止共享",
   "browser.share.add": "开始共享",
   "browser.share.title": "共享列表",
+  "browser.upload.title": "上传列表",
   "browser.folder.name": "文件夹名",
   "browser.folder.add": "添加文件夹",
   "browser.upload": "上传",