feat(ui): add ui props

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

@@ -17,12 +17,21 @@ export interface MsgProps {
   lan: string;
   pkg: Map<string, string>;
 }
+
+export interface UIProps {
+  // background: url("/static/img/textured_paper.png") repeat fixed center;
+  wallpaper: string;
+  repeat: string;
+  position: string;
+  align: string;
+}
 export interface ICoreState {
   isVertical: boolean;
   browser: BrowserProps;
   panes: PanesProps;
   login: LoginProps;
   admin: AdminProps;
+  ui: UIProps;
   msg: MsgProps;
 }
 
@@ -71,6 +80,12 @@ export function initState(): ICoreState {
       lan: "en_US",
       pkg: MsgPackage.get("en_US"),
     },
+    ui: {
+      wallpaper: "",
+      repeat: "",
+      position: "",
+      align: "",
+    },
   };
 }
 

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ICoreState, MsgProps } from "./core_state";
+import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { Browser, BrowserProps } from "./browser";
 import { LoginProps } from "./pane_login";
 import { Panes, PanesProps } from "./panes";
@@ -13,6 +13,7 @@ export interface Props {
   admin: AdminProps;
   login: LoginProps;
   msg: MsgProps;
+  ui: UIProps;
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
@@ -23,9 +24,16 @@ export class RootFrame extends React.Component<Props, State, {}> {
   }
 
   render() {
+    const wallpaperStyle =
+      this.props.ui.wallpaper !== ""
+        ? {
+            background: `url("${this.props.ui.wallpaper}") ${this.props.ui.repeat} ${this.props.ui.position} ${this.props.ui.align}`,
+          }
+        : {};
+
     return (
       <div className="theme-white desktop">
-        <div id="bg" className="bg bg-img font-m">
+        <div id="bg" className="bg bg-img font-m" style={wallpaperStyle}>
           <Panes
             panes={this.props.panes}
             login={this.props.login}

src/client/web/src/components/state_mgr.tsx

@@ -122,6 +122,7 @@ export class StateMgr extends React.Component<Props, State, {}> {
         panes={this.state.panes}
         login={this.state.login}
         admin={this.state.admin}
+        ui={this.state.ui}
         update={this.update}
       />
     );