fix(root_frame): fix tabs issues in the root_frame

public/static/css/white.css

@@ -78,7 +78,7 @@
   /* padding: 1rem; */
 }
 
-#browser .container {
+.container {
   width: 100%;
   color: #34495e;
   background-color: white;
@@ -175,6 +175,16 @@
   margin: auto 1rem auto auto;
 }
 
+.theme-default .float-l {
+  display: inline-block;
+  margin: auto 1rem auto auto;
+}
+
+.theme-default .float-r {
+  display: inline-block;
+  margin: auto auto 1rem 1rem;
+}
+
 .theme-default .float-input {
   display: inline-block;
   margin: auto 1rem 1rem auto;

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

@@ -37,34 +37,37 @@ export class Tabs extends React.Component<Props, State, {}> {
     if (!updater().setControlOption(targetControl, targetOption)) {
       alertMsg(this.props.msg.pkg.get("op.fail"));
     }
+    this.props.update(updater().updateUI);
   };
 
   render() {
     const displaying = this.props.ui.control.controls.get(
       this.props.targetControl
     );
+
     const options = this.props.ui.control.options.get(this.props.targetControl);
-    const tabs = options.map((option: string, targetControl: string) => {
+    const tabs = options.map((option: string) => {
       const iconProps = this.props.tabIcons.has(option)
         ? this.props.tabIcons.get(option)
         : defaultIconProps;
 
-      // <RiFolder2Fill size="1.6rem" className="margin-r-s cyan0-font" />,
       const icon = getIcon(iconProps.name, iconProps.size, iconProps.color);
 
       return (
         <button
-          key={`${targetControl}-${option}`}
+          key={`${this.props.targetControl}-${option}`}
           onClick={() => {
-            this.setTab(targetControl, option);
+            this.setTab(this.props.targetControl, option);
           }}
-          className="float"
+          className="float-l"
         >
           <Flexbox
             children={List([
               <span className="margin-r-s">{icon}</span>,
               <span>
-                {this.props.msg.pkg.get(`switch.${targetControl}.${option}`)}
+                {this.props.msg.pkg.get(
+                  `control.${this.props.targetControl}.${option}`
+                )}
               </span>,
             ])}
             childrenStyles={List([{ flex: "30%" }, { flex: "70%" }])}

src/client/web/src/components/core_state.ts

@@ -5,6 +5,7 @@ import { UploadEntry } from "../worker/interface";
 import { FilesProps } from "./panel_files";
 import { UploadingsProps } from "./panel_uploadings";
 import { SharingsProps } from "./panel_sharings";
+import { controlName as panelTabs } from "./root_frame";
 import { PanesProps } from "./panes";
 import { LoginProps } from "./pane_login";
 import { AdminProps } from "./pane_admin";
@@ -109,8 +110,16 @@ export function initState(): ICoreState {
         align: "",
       },
       control: {
-        controls: Map<string, string>(),
+        controls: Map<string, string>({
-        options: Map<string, Set<string>>(),
+          [panelTabs]: "filesPanel",
+        }),
+        options: Map<string, Set<string>>({
+          [panelTabs]: Set<string>([
+            "filesPanel",
+            "uploadingsPanel",
+            "sharingsPanel",
+          ]),
+        }),
       },
     },
   };

src/client/web/src/components/pane_admin.tsx

@@ -432,7 +432,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
 
     const roleList = this.props.admin.roles.valueSeq().map((role: string) => {
       return (
-        <div className="role-list-item">
+        <div key={role} className="role-list-item">
           <Flexbox
             children={List([
               <span>{role}</span>,

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

@@ -14,7 +14,7 @@ import { AdminProps } from "./pane_admin";
 import { TopBar } from "./topbar";
 import { roleVisitor } from "../client";
 
-const controlName = "panel-tabs";
+export const controlName = "panelTabs";
 export interface Props {
   filesInfo: FilesProps;
   uploadingsInfo: UploadingsProps;
@@ -59,9 +59,10 @@ export class RootFrame extends React.Component<Props, State, {}> {
         : "";
 
     const displaying = this.props.ui.control.controls.get(controlName);
-    const filesPanelClass = displaying === "files" ? "" : "none";
+    const filesPanelClass = displaying === "filesPanel" ? "" : "hidden";
-    const uploadingsPanelClass = displaying === "uploadings" ? "" : "none";
+    const uploadingsPanelClass =
-    const sharingsPanelClass = displaying === "sharings" ? "" : "none";
+      displaying === "uploadingsPanel" ? "" : "hidden";
+    const sharingsPanelClass = displaying === "sharingsPanel" ? "" : "hidden";
 
     return (
       <div id="root-frame" className={`${theme} ${fontSizeClass}`}>
@@ -91,30 +92,35 @@ export class RootFrame extends React.Component<Props, State, {}> {
               update={this.props.update}
             /> */}
 
-            <Tabs
+            <div className="container">
-              targetControl={controlName}
+              <div className="padding-m">
-              tabIcons={Map<string, IconProps>({
+                <Tabs
-                filesPanel: {
+                  targetControl={controlName}
-                  name: "RiFolder2Fill",
+                  tabIcons={Map<string, IconProps>({
-                  size: "1.6rem",
+                    filesPanel: {
-                  color: "cyan0",
+                      name: "RiFolder2Fill",
-                },
+                      size: "1.6rem",
-                uploadingsPanel: {
+                      color: "cyan0",
-                  name: "RiFolder2Fill",
+                    },
-                  size: "1.6rem",
+                    uploadingsPanel: {
-                  color: "cyan0",
+                      name: "RiUploadCloudFill",
-                },
+                      size: "1.6rem",
-                sharingsPanel: {
+                      color: "blue0",
-                  name: "RiFolder2Fill",
+                    },
-                  size: "1.6rem",
+                    sharingsPanel: {
-                  color: "cyan0",
+                      name: "RiShareBoxLine",
-                },
+                      size: "1.6rem",
-              })}
+                      color: "purple0",
-              login={this.props.login}
+                    },
-              admin={this.props.admin}
+                  })}
-              ui={this.props.ui}
+                  login={this.props.login}
-              msg={this.props.msg}
+                  admin={this.props.admin}
-            />
+                  ui={this.props.ui}
+                  msg={this.props.msg}
+                  update={this.props.update}
+                />
+              </div>
+            </div>
 
             <span className={filesPanelClass}>
               <FilesPanel

src/client/web/src/components/state_updater.ts

@@ -572,8 +572,12 @@ export class Updater {
 
   setControlOption = (controlName: string, option: string): boolean => {
     const controlExists = this.props.ui.control.controls.has(controlName);
+    const optionsExists = this.props.ui.control.options.has(controlName);
     const options = this.props.ui.control.options.get(controlName);
-    if (!controlExists || !options.has(option)) {
+    if (!controlExists || !optionsExists || !options.has(option)) {
+      console.error(
+        `control(${controlName}-${controlExists}) or option(${option}-${optionsExists}) not found`
+      );
       return false;
     }
 

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

@@ -106,4 +106,7 @@ export const msgs: Map<string, string> = Map({
   "settings.lanPackURL": "Language Pack URL",
   "op.fail": "Operation Failed",
   "op.confirm": "Do you confirm to apply the action?",
+  "control.panelTabs.filesPanel": "Files",
+  "control.panelTabs.uploadingsPanel": "Uploadings",
+  "control.panelTabs.sharingsPanel": "Sharings",
 });

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

@@ -105,4 +105,7 @@ export const msgs: Map<string, string> = Map({
   "settings.lanPackURL": "语言包链接",
   "op.fail": "操作失败",
   "op.confirm": "你确定执行此操作吗?",
+  "control.panelTabs.filesPanel": "文件",
+  "control.panelTabs.uploadingsPanel": "上传",
+  "control.panelTabs.sharingsPanel": "共享",
 });