fix(core_state): reorg ui related state

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

@@ -25,6 +25,7 @@ describe("Browser", () => {
       browser: coreState.browser,
       msg: coreState.msg,
       login: coreState.login,
+      ui: coreState.ui,
       update: (updater: (prevState: ICoreState) => ICoreState) => {},
     });
 

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

@@ -14,7 +14,7 @@ import { RiEmotionSadLine } from "@react-icons/all-files/ri/RiEmotionSadLine";
 
 import { alertMsg, comfirmMsg } from "../common/env";
 import { updater } from "./state_updater";
-import { ICoreState, MsgProps } from "./core_state";
+import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { MetadataResp, roleVisitor } from "../client";
 import { Up } from "../worker/upload_mgr";
@@ -40,7 +40,6 @@ export interface BrowserProps {
   uploadFiles: List<File>;
   uploadValue: string;
 
-  isVertical: boolean;
   tab: string;
 }
 
@@ -48,6 +47,7 @@ export interface Props {
   browser: BrowserProps;
   msg: MsgProps;
   login: LoginProps;
+  ui: UIProps;
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
@@ -350,14 +350,8 @@ export class Browser extends React.Component<Props, State, {}> {
     );
 
     const nameCellClass = `item-name item-name-${
-      this.props.browser.isVertical ? "vertical" : "horizontal"
+      this.props.ui.isVertical ? "vertical" : "horizontal"
     } pointer`;
-    const sizeCellClass = this.props.browser.isVertical
-      ? `hidden margin-s`
-      : ``;
-    const modTimeCellClass = this.props.browser.isVertical
-      ? `hidden margin-s`
-      : ``;
 
     const ops = (
       <div>

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

@@ -19,13 +19,15 @@ export interface MsgProps {
 }
 
 export interface UIProps {
-  wallpaper: string;
+  isVertical: boolean;
-  repeat: string;
+  bg: {
-  position: string;
+    url: string;
-  align: string;
+    repeat: string;
+    position: string;
+    align: string;
+  };
 }
 export interface ICoreState {
-  isVertical: boolean;
   browser: BrowserProps;
   panes: PanesProps;
   login: LoginProps;
@@ -48,9 +50,7 @@ export function newState(): ICoreState {
 
 export function initState(): ICoreState {
   return {
-    isVertical: isVertical(),
     browser: {
-      isVertical: isVertical(),
       dirPath: List<string>(["."]),
       items: List<MetadataResp>([]),
       sharings: List<string>([]),
@@ -61,7 +61,9 @@ export function initState(): ICoreState {
       tab: "",
     },
     panes: {
+      // which pane is displaying
       displaying: "browser",
+      // which panes can be displayed
       paneNames: Set<string>([]), // "settings", "login", "admin"
     },
     login: {
@@ -86,10 +88,13 @@ export function initState(): ICoreState {
       pkg: MsgPackage.get("en_US"),
     },
     ui: {
-      wallpaper: "",
+      isVertical: isVertical(),
-      repeat: "",
+      bg: {
-      position: "",
+        url: "",
-      align: "",
+        repeat: "",
+        position: "",
+        align: "",
+      },
     },
   };
 }

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

@@ -8,7 +8,6 @@ import { AdminProps } from "./pane_admin";
 import { TopBar } from "./topbar";
 import { roleVisitor } from "../client";
 
-
 export interface Props {
   browser: BrowserProps;
   panes: PanesProps;
@@ -19,25 +18,28 @@ export interface Props {
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
-export interface State { }
+export interface State {}
 export class RootFrame extends React.Component<Props, State, {}> {
   constructor(p: Props) {
     super(p);
   }
 
   render() {
-    const wallpaperStyle =
+    const bgStyle =
-      this.props.ui.wallpaper !== ""
+      this.props.ui.bg.url !== ""
         ? {
-          background: `url("${this.props.ui.wallpaper}") ${this.props.ui.repeat} ${this.props.ui.position} ${this.props.ui.align}`,
+            background: `url("${this.props.ui.bg.url}") ${this.props.ui.bg.repeat} ${this.props.ui.bg.position} ${this.props.ui.bg.align}`,
-        }
+          }
         : {};
 
-    const showBrowser = this.props.login.userRole === roleVisitor && !this.props.browser.isSharing ? "hidden" : "";
+    const showBrowser =
+      this.props.login.userRole === roleVisitor && !this.props.browser.isSharing
+        ? "hidden"
+        : "";
 
     return (
       <div className="theme-white desktop">
-        <div id="bg" className="bg bg-img font-m" style={wallpaperStyle}>
+        <div id="bg" className="bg bg-img font-m" style={bgStyle}>
           <Panes
             panes={this.props.panes}
             login={this.props.login}
@@ -58,6 +60,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
               browser={this.props.browser}
               msg={this.props.msg}
               login={this.props.login}
+              ui={this.props.ui}
               update={this.props.update}
             />
           </div>