fix(components): refine tabs component

src/client/web/src/components/control/tabs.tsx

@@ -18,7 +18,7 @@ const defaultIconProps: IconProps = {
 };
 
 export interface Props {
-  targetSwitch: string;
+  targetControl: string;
   tabIcons: Map<string, IconProps>; // option name -> icon name
   login: LoginProps;
   admin: AdminProps;
@@ -33,18 +33,18 @@ export class Tabs extends React.Component<Props, State, {}> {
     super(p);
   }
 
-  setTab = (targetSwitch: string, targetOption: string) => {
+  setTab = (targetControl: string, targetOption: string) => {
-    if (!updater().setControlOption(targetSwitch, targetOption)) {
+    if (!updater().setControlOption(targetControl, targetOption)) {
       alertMsg(this.props.msg.pkg.get("op.fail"));
     }
   };
 
   render() {
     const displaying = this.props.ui.control.controls.get(
-      this.props.targetSwitch
+      this.props.targetControl
     );
-    const options = this.props.ui.control.options.get(this.props.targetSwitch);
+    const options = this.props.ui.control.options.get(this.props.targetControl);
-    const tabs = options.map((option: string, targetSwitch: string) => {
+    const tabs = options.map((option: string, targetControl: string) => {
       const iconProps = this.props.tabIcons.has(option)
         ? this.props.tabIcons.get(option)
         : defaultIconProps;
@@ -54,9 +54,9 @@ export class Tabs extends React.Component<Props, State, {}> {
 
       return (
         <button
-          key={`${targetSwitch}-${option}`}
+          key={`${targetControl}-${option}`}
           onClick={() => {
-            this.setTab(targetSwitch, option);
+            this.setTab(targetControl, option);
           }}
           className="float"
         >
@@ -64,7 +64,7 @@ export class Tabs extends React.Component<Props, State, {}> {
             children={List([
               <span className="margin-r-s">{icon}</span>,
               <span>
-                {this.props.msg.pkg.get(`switch.${targetSwitch}.${option}`)}
+                {this.props.msg.pkg.get(`switch.${targetControl}.${option}`)}
               </span>,
             ])}
             childrenStyles={List([{ flex: "30%" }, { flex: "70%" }])}
@@ -74,7 +74,7 @@ export class Tabs extends React.Component<Props, State, {}> {
     });
 
     return (
-      <div className={`tabs control-${this.props.targetSwitch}`}>{tabs}</div>
+      <div className={`tabs control-${this.props.targetControl}`}>{tabs}</div>
     );
   }
 }

src/client/web/src/components/root_frame.tsx

@@ -1,16 +1,20 @@
 import * as React from "react";
+import { Map } from "immutable";
 
 import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { FilesPanel, FilesProps } from "./panel_files";
 import { UploadingsPanel, UploadingsProps } from "./panel_uploadings";
 import { SharingsPanel, SharingsProps } from "./panel_sharings";
+import { IconProps } from "./visual/icons";
 
+import { Tabs } from "./control/tabs";
 import { LoginProps } from "./pane_login";
 import { Panes, PanesProps } from "./panes";
 import { AdminProps } from "./pane_admin";
 import { TopBar } from "./topbar";
 import { roleVisitor } from "../client";
 
+const controlName = "panel-tabs";
 export interface Props {
   filesInfo: FilesProps;
   uploadingsInfo: UploadingsProps;
@@ -54,6 +58,11 @@ export class RootFrame extends React.Component<Props, State, {}> {
         ? "hidden"
         : "";
 
+    const displaying = this.props.ui.control.controls.get(controlName);
+    const filesPanelClass = displaying === "files" ? "" : "none";
+    const uploadingsPanelClass = displaying === "uploadings" ? "" : "none";
+    const sharingsPanelClass = displaying === "sharings" ? "" : "none";
+
     return (
       <div id="root-frame" className={`${theme} ${fontSizeClass}`}>
         <div id="bg" style={bgStyle}>
@@ -81,6 +90,33 @@ export class RootFrame extends React.Component<Props, State, {}> {
               ui={this.props.ui}
               update={this.props.update}
             /> */}
+
+            <Tabs
+              targetControl={controlName}
+              tabIcons={Map<string, IconProps>({
+                filesPanel: {
+                  name: "RiFolder2Fill",
+                  size: "1.6rem",
+                  color: "cyan0",
+                },
+                uploadingsPanel: {
+                  name: "RiFolder2Fill",
+                  size: "1.6rem",
+                  color: "cyan0",
+                },
+                sharingsPanel: {
+                  name: "RiFolder2Fill",
+                  size: "1.6rem",
+                  color: "cyan0",
+                },
+              })}
+              login={this.props.login}
+              admin={this.props.admin}
+              ui={this.props.ui}
+              msg={this.props.msg}
+            />
+
+            <span className={filesPanelClass}>
               <FilesPanel
                 filesInfo={this.props.filesInfo}
                 msg={this.props.msg}
@@ -88,6 +124,9 @@ export class RootFrame extends React.Component<Props, State, {}> {
                 ui={this.props.ui}
                 update={this.props.update}
               />
+            </span>
+
+            <span className={uploadingsPanelClass}>
               <UploadingsPanel
                 uploadingsInfo={this.props.uploadingsInfo}
                 msg={this.props.msg}
@@ -95,6 +134,9 @@ export class RootFrame extends React.Component<Props, State, {}> {
                 ui={this.props.ui}
                 update={this.props.update}
               />
+            </span>
+
+            <span className={sharingsPanelClass}>
               <SharingsPanel
                 sharingsInfo={this.props.sharingsInfo}
                 msg={this.props.msg}
@@ -102,6 +144,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
                 ui={this.props.ui}
                 update={this.props.update}
               />
+            </span>
           </div>
 
           <div id="tail" className="container-center">

src/client/web/src/components/visual/colors.ts

@@ -1,4 +1,4 @@
-import { Set, Map } from "immutable";
+import { Set } from "immutable";
 
 export const colors = Set<string>([
   "blue0",