fix(fe/panes): refine styles of panes

public/static/css/default.css

@@ -494,3 +494,7 @@
 .full-width {
   width: 100%;
 }
+
+.bold {
+  font-weight: bold;
+}

public/static/css/white.css

@@ -182,6 +182,7 @@
   font-size: 1.4rem;
   line-height: 2rem;
   display: block;
+  overflow-wrap: break-word;
 }
 
 .theme-default #item-rows .hr {
@@ -370,7 +371,7 @@
 
 .theme-default .pane-title {
   color: black;
-  line-height: 4rem;
+  font-size: 1.6rem;
 }
 
 .theme-default #pane-settings {
@@ -382,9 +383,14 @@
 }
 
 .theme-default .user-form {
-  border: dashed 2px #ccc;
-  padding: 1rem;
+  font-size: 1.4rem;
+  padding: 1rem 0;
   margin-top: 1rem;
+  border-bottom: dashed 1px #000;
+}
+
+.theme-default .more {
+  border: dashed 1px #ccc;
 }
 
 .theme-default .role-list-item {

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

@@ -14,7 +14,7 @@ import { colorClass } from "../visual/colors";
 const defaultIconProps: IconProps = {
   name: "RiFolder2Fill",
   size: "1.6rem",
-  color: `${colorClass("1")}-font`,
+  color: `${colorClass("cyan1")}-font`,
 };
 
 export interface Props {

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

@@ -2,6 +2,8 @@ import * as React from "react";
 import { List, Map, Set } from "immutable";
 import FileSize from "filesize";
 
+import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
+
 import { alertMsg, confirmMsg } from "../common/env";
 import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { User, Quota } from "../client";
@@ -39,6 +41,7 @@ export interface UserFormState {
   newPwd2: string;
   role: string;
   quota: Quota;
+  folded: boolean;
 }
 
 export class UserForm extends React.Component<
@@ -59,6 +62,7 @@ export class UserForm extends React.Component<
         uploadSpeedLimit: p.quota.uploadSpeedLimit,
         downloadSpeedLimit: p.quota.downloadSpeedLimit,
       },
+      folded: true,
     };
   }
 
@@ -150,25 +154,40 @@ export class UserForm extends React.Component<
       });
   };
 
+  toggle = () => {
+    this.setState({ folded: !this.state.folded });
+  };
+
   render() {
+    const foldedClass = this.state.folded ? "hidden" : "";
+    const foldIconColor = this.state.folded ? "black-font" : "cyan1-font";
+
     return (
       <div className="user-form">
         <Flexbox
           children={List([
             <div>
-              <div className="key-value">
-                {`${this.props.msg.pkg.get("user.name")}: `}
-                <span className="value">{this.props.name}</span>
-              </div>
-              <div className="key-value">
-                {`${this.props.msg.pkg.get("user.id")}: `}
-                <span className="value">{this.props.id}</span>
-              </div>
+              <span className="bold">{`${this.props.msg.pkg.get(
+                "user.name"
+              )}: `}</span>
+              <span className="margin-r-m">{this.props.name}</span>
+              <span className="bold">{`${this.props.msg.pkg.get(
+                "user.id"
+              )}: `}</span>
+              <span>{this.props.id}</span>
             </div>,
 
+            <span>
+              <RiMore2Fill
+                size="1.2rem"
+                className={`margin-r-m ${foldIconColor}`}
+                onClick={this.toggle}
+              />
+
               <button onClick={this.delUser}>
                 {this.props.msg.pkg.get("delete")}
-            </button>,
+              </button>
+            </span>,
           ])}
           childrenStyles={List([
             { alignItems: "flex-start", flexBasis: "70%" },
@@ -178,9 +197,11 @@ export class UserForm extends React.Component<
           ])}
         />
 
+        <div className={foldedClass}>
           <div className="hr"></div>
 
           <Flexbox
+            className="margin-t-m"
             children={List([
               <div>
                 <span className="float-input">
@@ -261,6 +282,7 @@ export class UserForm extends React.Component<
           <div className="hr"></div>
 
           <Flexbox
+            className="margin-t-m"
             children={List([
               <div>
                 <div className="float-input">
@@ -303,6 +325,7 @@ export class UserForm extends React.Component<
             ])}
           />
         </div>
+      </div>
     );
   }
 }
@@ -343,19 +366,14 @@ export class AdminPane extends React.Component<Props, State, {}> {
   };
 
   addRole = async () => {
-    return updater()
-      .addRole(this.state.newRole)
-      .then((status: string) => {
+    const status = await updater().addRole(this.state.newRole);
     if (status !== "") {
       alertMsg(this.props.msg.pkg.get("add.fail"));
     } else {
       alertMsg(this.props.msg.pkg.get("add.ok"));
-        }
-        return updater().listRoles();
-      })
-      .then(() => {
+      await updater().listRoles();
       this.props.update(updater().updateAdmin);
-      });
+    }
   };
 
   delRole = async (role: string) => {
@@ -363,19 +381,14 @@ export class AdminPane extends React.Component<Props, State, {}> {
       return;
     }
 
-    return updater()
-      .delRole(role)
-      .then((status: string) => {
+    const status = await updater().delRole(role);
     if (status !== "") {
       this.props.msg.pkg.get("delete.fail");
     } else {
       this.props.msg.pkg.get("delete.ok");
-        }
-        return updater().listRoles();
-      })
-      .then(() => {
+      await updater().listRoles();
       this.props.update(updater().updateAdmin);
-      });
+    }
   };
 
   addUser = async () => {
@@ -384,8 +397,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
       return;
     }
 
-    return updater()
-      .addUser({
+    const status = await updater().addUser({
       id: "", // backend will fill it
       name: this.state.newUserName,
       pwd: this.state.newUserPwd1,
@@ -393,24 +405,21 @@ export class AdminPane extends React.Component<Props, State, {}> {
       quota: undefined,
       usedSpace: "0",
       preferences: undefined,
-      })
-      .then((status: string) => {
+    });
+
     if (status !== "") {
       alertMsg(this.props.msg.pkg.get("add.fail"));
     } else {
       alertMsg(this.props.msg.pkg.get("add.ok"));
-        }
       this.setState({
         newUserName: "",
         newUserPwd1: "",
         newUserPwd2: "",
         newUserRole: "",
       });
-        return updater().listUsers();
-      })
-      .then(() => {
+      await updater().listUsers();
       this.props.update(updater().updateAdmin);
-      });
+    }
   };
 
   render() {
@@ -464,7 +473,9 @@ export class AdminPane extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <h5 className="title">{this.props.msg.pkg.get("user.add")}</h5>,
+              <h5 className="pane-title">
+                {this.props.msg.pkg.get("user.add")}
+              </h5>,
               <button onClick={this.addUser}>
                 {this.props.msg.pkg.get("add")}
               </button>,
@@ -472,6 +483,8 @@ export class AdminPane extends React.Component<Props, State, {}> {
             childrenStyles={List([{}, { justifyContent: "flex-end" }])}
           />
 
+          <div className="hr"></div>
+
           <span className="float-input">
             <div className="label">{this.props.msg.pkg.get("user.name")}</div>
             <input
@@ -520,12 +533,15 @@ export class AdminPane extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <h5 className="title">
+              <h5 className="pane-title">
                 {this.props.msg.pkg.get("admin.users")}
               </h5>,
               <span></span>,
             ])}
           />
+
+          <div className="hr"></div>
+
           {userList}
         </Container>
 
@@ -533,11 +549,15 @@ export class AdminPane extends React.Component<Props, State, {}> {
           <div>
             <Flexbox
               children={List([
-                <h5 className="title">{this.props.msg.pkg.get("role.add")}</h5>,
+                <h5 className="pane-title">
+                  {this.props.msg.pkg.get("role.add")}
+                </h5>,
                 <span></span>,
               ])}
             />
 
+            <div className="hr"></div>
+
             <Flexbox
               children={List([
                 <input
@@ -553,17 +573,20 @@ export class AdminPane extends React.Component<Props, State, {}> {
               childrenStyles={List([{}, { justifyContent: "flex-end" }])}
             />
           </div>
+        </Container>
 
-          <div className="hr"></div>
-
+        <Container>
           <Flexbox
             children={List([
-              <h5 className="title">
+              <h5 className="pane-title">
                 {this.props.msg.pkg.get("admin.roles")}
               </h5>,
               <span></span>,
             ])}
           />
+
+          <div className="hr"></div>
+
           {roleList}
         </Container>
       </div>
@@ -698,7 +721,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
       <div>
         <Flexbox
           children={List([
-            <h5 className="title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
+            <h5 className="pane-title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
 
             <span>
               <button onClick={this.resetClientCfg} className="margin-r-m">
@@ -712,6 +735,8 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
           childrenStyles={List([{}, { justifyContent: "flex-end" }])}
         />
 
+        <div className="hr"></div>
+
         <div>
           <div className="float-input">
             <div className="label">{this.props.msg.pkg.get("cfg.bg.url")}</div>

src/client/web/src/components/pane_settings.tsx

@@ -177,10 +177,9 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               />
             </div>
           </div>
+        </Container>
 
-          <div className="hr"></div>
-
-          <div>
+        <Container>
           <Flexbox
             children={List([
               <h5 className="pane-title">
@@ -193,6 +192,8 @@ export class PaneSettings extends React.Component<Props, State, {}> {
             childrenStyles={List([{}, { justifyContent: "flex-end" }])}
           />
 
+          <div className="hr"></div>
+
           <span className="float-input">
             <div className="label">
               {this.props.msg.pkg.get("settings.pwd.old")}
@@ -231,11 +232,9 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
             />
           </span>
-          </div>
+        </Container>
 
-          <div className="hr"></div>
-
-          <div>
+        <Container>
           <Flexbox
             children={List([
               <h5 className="pane-title">
@@ -244,6 +243,9 @@ export class PaneSettings extends React.Component<Props, State, {}> {
             ])}
             childrenStyles={List([{}, { justifyContent: "flex-end" }])}
           />
+
+          <div className="hr"></div>
+
           <div>
             <button
               onClick={() => {
@@ -262,11 +264,9 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               {this.props.msg.pkg.get("zhCN")}
             </button>
           </div>
-          </div>
+        </Container>
 
-          <div className="hr"></div>
-
-          <div>
+        <Container>
           <Flexbox
             children={List([
               <h5 className="pane-title">
@@ -282,6 +282,8 @@ export class PaneSettings extends React.Component<Props, State, {}> {
             childrenStyles={List([{}, { justifyContent: "flex-end" }])}
           />
 
+          <div className="hr"></div>
+
           <div className="float-input">
             <div className="label">
               {this.props.msg.pkg.get("settings.lanPackURL")}
@@ -295,14 +297,14 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
             />
           </div>
-          </div>
+        </Container>
 
-          <div className="hr"></div>
-
-          <div>
+        <Container>
           <Flexbox
             children={List([
-                <h5 className="pane-title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
+              <h5 className="pane-title">
+                {this.props.msg.pkg.get("cfg.bg")}
+              </h5>,
 
               <button onClick={this.syncPreferences}>
                 {this.props.msg.pkg.get("update")}
@@ -311,6 +313,8 @@ export class PaneSettings extends React.Component<Props, State, {}> {
             childrenStyles={List([{}, { justifyContent: "flex-end" }])}
           />
 
+          <div className="hr"></div>
+
           <div>
             <div className="float-input">
               <div className="label">
@@ -364,7 +368,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               />
             </div>
           </div>
-          </div>
+        </Container>
 
         {/* <div className="hr"></div>
           <div>
@@ -400,7 +404,6 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               ])}
             />
           </div> */}
-        </Container>
       </div>
     );
   }