fix(fe/panel_sharings): introduce rows layout in sharing panel

public/static/css/white.css

@@ -250,6 +250,14 @@
   padding: 1rem 0 1rem 0;
 }
 
+.theme-default .upload-item .error {
+  font-size: 1.4rem;
+  padding: 1rem;
+  color: #f1c40f;
+  margin: 1rem 0 0 0;
+  background-color: #2c3e50;
+}
+
 .theme-default #sharing-list .desc {
   background-color: #ecf0f1;
   font-size: 1.2rem;

src/client/web/src/components/panel_sharings.tsx

@@ -12,7 +12,7 @@ import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
-import { getIcon } from "./visual/icons";
+import { Rows, Row } from "./layout/rows";
 
 export interface SharingsProps {
   sharings: List<string>;
@@ -35,54 +35,42 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
   }
 
   deleteSharing = async (dirPath: string) => {
-    return updater()
-      .deleteSharing(dirPath)
-      .then((status: string) => {
-        if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
-        } else {
-          updater().setSharing(false);
-          return this.listSharings();
+    try {
+      const deleteStatus = await updater().deleteSharing(dirPath);
+      if (deleteStatus !== "") {
+        throw deleteStatus;
+      }
+      updater().setSharing(false);
+
+      await this.listSharings();
+    } catch (e: any) {
+      alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
     }
-      });
   };
 
   listSharings = async () => {
-    return updater()
-      .listSharings()
-      .then((status: string) => {
+    const status = await updater().listSharings();
     if (status !== "") {
       alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
     }
     this.props.update(updater().updateFilesInfo);
     this.props.update(updater().updateSharingsInfo);
-      });
   };
 
-  render() {
-    const nameWidthClass = `item-name item-name-${
-      this.props.ui.isVertical ? "vertical" : "horizontal"
-    } pointer`;
-
-    const sharingList = this.props.sharingsInfo.sharings.map(
-      (dirPath: string) => {
+  makeRows = (sharings: List<string>): List<Row> => {
+    const sharingRows = sharings.map((dirPath: string) => {
       const sharingURL = `${
         document.location.href.split("?")[0]
       }?dir=${encodeURIComponent(dirPath)}`;
 
-        return (
-          <div className="sharing-item" key={dirPath}>
-            <Flexbox
-              children={List([
+      const row1 = (
         <Flexbox
           children={List([
             <RiFolderSharedFill
               size="3rem"
               className="purple0-font margin-r-m"
             />,
-                    <span className={nameWidthClass}>{dirPath}</span>,
-                  ])}
-                />,
+            <span>{dirPath}</span>,
 
             <button
               onClick={() => {
@@ -93,21 +81,51 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
             </button>,
           ])}
           childrenStyles={List([
-                { alignItems: "center" },
-                { alignItems: "center", justifyContent: "flex-end" },
-                { alignItems: "center", justifyContent: "flex-end" },
+            { flex: "0 0 auto", alignItems: "center" },
+            { alignItems: "center", justifyContent: "flex-start" },
+            {
+              flex: "0 0 auto",
+              alignItems: "center",
+              justifyContent: "flex-end",
+            },
           ])}
         />
+      );
 
+      const elem = (
+        <div className="sharing-item" key={dirPath}>
+          {row1}
           <div className="desc">{sharingURL}</div>
           <div className="hr grey0-bg"></div>
         </div>
       );
-      }
-    );
 
-    const list =
-      this.props.sharingsInfo.sharings.size === 0 ? (
+      return {
+        elem,
+        sortVals: List([dirPath]),
+        val: dirPath,
+      };
+    });
+
+    return sharingRows;
+  };
+
+  updateSharings = (sharings: List<Object>) => {
+    const newSharings = sharings as List<string>;
+    updater().updateSharings(newSharings);
+    this.props.update(updater().updateSharingsInfo);
+  };
+
+  render() {
+    const sharingRows = this.makeRows(this.props.sharingsInfo.sharings);
+    const view = (
+      <Rows
+        rows={sharingRows}
+        sortKeys={List([this.props.msg.pkg.get("item.path")])}
+        updateRows={this.updateSharings}
+      />
+    );
+    const noSharingView = (
       <Container>
         <Flexbox
           children={List([
@@ -127,6 +145,11 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
           ])}
         />
       </Container>
+    );
+
+    const list =
+      this.props.sharingsInfo.sharings.size === 0 ? (
+        noSharingView
       ) : (
         <Container>
           <Flexbox
@@ -151,9 +174,10 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
 
               <span></span>,
             ])}
+            className="margin-b-l"
           />
 
-          {sharingList}
+          {view}
         </Container>
       );
 

src/client/web/src/components/panel_uploadings.tsx

@@ -69,8 +69,6 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
       const fileName = pathParts[pathParts.length - 1];
       const progress = Math.floor((uploading.uploaded / uploading.size) * 100);
 
-      // const title = <Flexbox children={List([])} />;
-
       const op = (
         <div className="item-op">
           <button
@@ -206,7 +204,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <span className="upload-item">
+              <span className="margin-b-l">
                 <Flexbox
                   children={List([
                     <RiUploadCloudFill

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

@@ -267,6 +267,10 @@ export class Updater {
     this.props.uploadingsInfo.uploadings = uploadings;
   };
 
+  updateSharings = (sharings: List<string>) => {
+    this.props.sharingsInfo.sharings = sharings;
+  };
+
   moveHere = async (
     srcDir: string,
     dstDir: string,