fix(ui/browser): move breadcrumb to item list

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

@@ -298,21 +298,18 @@ export class Browser extends React.Component<Props, State, {}> {
   };
 
   render() {
-    const breadcrumb = this.props.browser.dirPath.map(
+    let breadcrumb = this.props.browser.dirPath.map(
       (pathPart: string, key: number) => {
         return (
-          <span key={pathPart}>
           <button
-              type="button"
+            key={pathPart}
             onClick={() =>
               this.chdir(this.props.browser.dirPath.slice(0, key + 1))
             }
-              className="white-font margin-r-m"
+            className="grey3-bg grey4-font margin-r-m"
-              style={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
           >
             {pathPart}
           </button>
-          </span>
         );
       }
     );
@@ -662,22 +659,6 @@ export class Browser extends React.Component<Props, State, {}> {
             </div>
           )}
 
-          <div className="breadcrumb margin-b-l">
-            <span
-              className="white-font margin-r-m"
-              style={{
-                backgroundColor: "rgba(0, 0, 0, 0.7)",
-                padding: "0.8rem 1rem",
-                fontWeight: "bold",
-                borderRadius: "0.5rem",
-              }}
-            >
-              <RiFolder2Fill size="1.2rem" />
-              {/* {this.props.msg.pkg.get("browser.location")} */}
-            </span>
-            {breadcrumb}
-          </div>
-
           <div id="op-bar" className="op-bar">
             <div className="margin-l-m margin-r-m margin-b-m">{ops}</div>
           </div>
@@ -693,15 +674,18 @@ export class Browser extends React.Component<Props, State, {}> {
                         className="margin-r-m black-font"
                       />,
 
-                      <span>
+                      // <span>
-                        <span className="title-l">
+                      //   <span className="title-l">
-                          {this.props.msg.pkg.get("browser.item.title")}
+                      //     {this.props.msg.pkg.get("browser.item.title")}
-                        </span>
+                      //   </span>
-                        <span className="desc-l grey0-font">
+                      //   <span className="desc-l grey0-font">
-                          Files and folders in current path
+                      //     Files and folders in current path
-                        </span>
+                      //   </span>
-                      </span>,
+                      // </span>,
+
+                      <Flexbox children={breadcrumb} />,
                     ])}
+                    // style={{ flex: "column nowrap" }}
                   />
                 </span>,
 

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

@@ -181,7 +181,7 @@ export class UserForm extends React.Component<
           >
             <button
               onClick={this.delUser}
-              className="grey1-bg white-font margin-r-m"
+              className="margin-r-m"
             >
               {this.props.msg.pkg.get("delete")}
             </button>
@@ -251,7 +251,7 @@ export class UserForm extends React.Component<
           <div className="flex-list-item-r">
             <button
               onClick={this.setUser}
-              className="grey1-bg white-font margin-r-m"
+              className="margin-r-m"
             >
               {this.props.msg.pkg.get("update")}
             </button>
@@ -288,7 +288,7 @@ export class UserForm extends React.Component<
           <div className="flex-list-item-r">
             <button
               onClick={this.setPwd}
-              className="grey1-bg white-font margin-r-m"
+              className="margin-r-m"
             >
               {this.props.msg.pkg.get("update")}
             </button>
@@ -437,7 +437,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
               onClick={() => {
                 this.delRole(role);
               }}
-              className="grey1-bg white-font margin-r-m"
+              className="margin-r-m"
             >
               {this.props.msg.pkg.get("delete")}
             </button>
@@ -497,7 +497,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
             <div className="flex-list-item-r">
               <button
                 onClick={this.addUser}
-                className="grey1-bg white-font margin-r-m"
+                className="margin-r-m"
               >
                 {this.props.msg.pkg.get("add")}
               </button>
@@ -542,7 +542,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
             <div className="flex-list-item-r">
               <button
                 onClick={this.addRole}
-                className="grey1-bg white-font margin-r-m"
+                className="margin-r-m"
               >
                 {this.props.msg.pkg.get("add")}
               </button>

src/client/web/src/components/pane_login.tsx

@@ -167,7 +167,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
         </div>
 
         <span style={{ display: this.props.login.authed ? "inherit" : "none" }}>
-          <button onClick={this.logout} className="grey1-bg white-font">
+          <button onClick={this.logout}>
             {this.props.msg.pkg.get("login.logout")}
           </button>
         </span>

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

@@ -80,7 +80,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
                 </h5>
               </div>
               <div className="flex-list-item-r">
-                <button onClick={this.setPwd} className="grey1-bg white-font">
+                <button onClick={this.setPwd}>
                   {this.props.msg.pkg.get("update")}
                 </button>
               </div>
@@ -130,7 +130,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
                   onClick={() => {
                     this.setLan("en_US");
                   }}
-                  className="margin-r-m white-font"
+                  className="margin-r-m"
                 >
                   {this.props.msg.pkg.get("enUS")}
                 </button>
@@ -138,7 +138,6 @@ export class PaneSettings extends React.Component<Props, State, {}> {
                   onClick={() => {
                     this.setLan("zh_CN");
                   }}
-                  className="white-font"
                 >
                   {this.props.msg.pkg.get("zhCN")}
                 </button>

src/client/web/src/components/topbar.tsx

@@ -42,11 +42,12 @@ export class TopBar extends React.Component<Props, State, {}> {
       this.props.login.userRole === "admin" ? (
         <button
           onClick={this.showAdmin}
-          className="grey1-bg white-font margin-r-m"
+          className="grey3-bg grey4-font margin-r-m"
         >
           {this.props.msg.pkg.get("admin")}
         </button>
       ) : null;
+
     return (
       <div
         id="top-bar"
@@ -60,10 +61,16 @@ export class TopBar extends React.Component<Props, State, {}> {
             Quickshare
           </a>
           <span className="flex-23col text-right">
-            <span className="user margin-r-m">{this.props.login.userName}</span>
+            <span className="grey3-font font-s">
+              {this.props.login.userName}
+            </span>
+            &nbsp;-&nbsp;
+            <span className="grey0-font font-s margin-r-m">
+              {this.props.login.userRole}
+            </span>
             <button
               onClick={this.showSettings}
-              className="grey1-bg white-font margin-r-m"
+              className="grey3-bg grey4-font margin-r-m"
             >
               {this.props.msg.pkg.get("settings")}
             </button>

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

@@ -55,7 +55,7 @@ export const msgs: Map<string, string> = Map({
   "user.id": "用户ID",
   "user.add": "新增用户",
   "user.name": "用户名",
-  "user.role": "橘色",
+  "user.role": "角色",
   "user.password": "密码",
   add: "新增",
   "admin.users": "用户列表",