fix: regression - sharing does not work

README.md

@@ -23,7 +23,7 @@
   </a>
 <p>
 
-<image src="./docs/imgs/v0.11.0/newlook.png" title="preview">
+<image src="./docs/imgs/v0.11.0/screenshot.png" title="preview">
 
 
 English | [简体中文](./docs/README_zh-cn.md)

docs/README_zh-cn.md

@@ -23,7 +23,7 @@
   </a>
 <p>
 
-<image src="./imgs/v0.11.0/newlook.png" title="preview">
+<image src="./imgs/v0.11.0/screenshot.png" title="preview">
 
 [English](../README.md) | 简体中文
 

package.json

@@ -5,8 +5,7 @@
   ],
   "scripts": {
     "build:fe": "yarn && bash scripts/copy_js.sh && webpack --config src/client/web/webpack.app.prod.js",
-    "build:fe:dev": "yarn && bash scripts/copy_js_dev.sh && webpack --config src/client/web/webpack.app.dev.js --watch",
-    "build:fe:prod": "yarn && bash scripts/copy_js.sh && webpack --config src/client/web/webpack.app.prod.js --watch",
+    "client:dev": "yarn && bash scripts/copy_js_dev.sh && webpack --config src/client/web/webpack.app.dev.js --watch",
     "start": "yarn build:fe && go run cmd/start/main.go -c `pwd`/configs/dev.yml",
     "server:dev": "go run cmd/start/main.go -c `pwd`/configs/dev.yml",
     "build": "yarn build:fe && bash scripts/build_be.sh",

src/client/web/src/components/layout/container.tsx

@@ -6,7 +6,7 @@ export interface Props {
 
 export const Container = (props: Props) => {
   return (
-    <div className="container">
+    <div className="my-container">
       <div className="container-padding">{props.children}</div>
     </div>
   );

src/client/web/src/components/panel_files.tsx

@@ -589,21 +589,21 @@ export class FilesPanel extends React.Component<Props, State, {}> {
           ? "margin-t-m padding-m"
           : "no-height";
         const desc = (
-          <div className={`${descStateClass} major-font major-bg`}>
+          <div className={`${descStateClass}  major-bg`}>
             <div className="column">
               <div className="card">
-                <span className="title-m minor-font">{pathTitle}</span>
+                <span className="title-m ">{pathTitle}</span>
                 <span className="work-break-all">{absDownloadURL}</span>
               </div>
             </div>
 
             <div className="column">
               <div className="card">
-                <span className="title-m minor-font">{modTimeTitle}</span>
+                <span className="title-m">{modTimeTitle}</span>
                 <span className="work-break-all">{modTimeFormatted}</span>
               </div>
               <div className="card">
-                <span className="title-m minor-font">{sizeTitle}</span>
+                <span className="title-m">{sizeTitle}</span>
                 <span className="work-break-all">{itemSize}</span>
               </div>
             </div>
@@ -612,11 +612,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
               <div className="card">
                 <Flexbox
                   children={List([
-                    <span className="title-m minor-font">SHA1</span>,
+                    <span className="title-m">SHA1</span>,
                     <RiRestartFill
                       onClick={() => this.generateHash(itemPath)}
                       size={"2rem"}
-                      className={`minor-font ${shareModeClass}`}
+                      className={` ${shareModeClass}`}
                     />,
                   ])}
                   childrenStyles={List([{}, { justifyContent: "flex-end" }])}
@@ -907,39 +907,40 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     const viewType = this.props.ui.control.controls.get(filesViewCtrl);
     const view =
       this.props.filesInfo.items.size > 0 ? (
-        <div className={`${showOp}`}>
-          <Flexbox
-            children={List([
-              <div>
-                <span className={`${showOp} mr-8`}>
-                  <button onClick={() => this.selectAll()}>
-                    {this.props.msg.pkg.get("browser.selectAll")}
-                  </button>
-                </span>
-                <span>
-                  {this.state.selectedItems.size > 0 ? (
-                    <span>
-                      <button
-                        type="button"
-                        onClick={() => this.delete()}
-                        className="mr-8"
-                      >
-                        {this.props.msg.pkg.get("browser.delete")}
-                      </button>
-
-                      <button type="button" onClick={() => this.moveHere()}>
-                        {this.props.msg.pkg.get("browser.paste")}
-                      </button>
-                    </span>
-                  ) : null}
-                </span>
-              </div>,
-
-              orderByButtons,
-            ])}
-            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-          />
-
+        <div>
+          <div className={`${showOp}`}>
+            <Flexbox
+              children={List([
+                <div>
+                  <span className={`${showOp} mr-8`}>
+                    <button onClick={() => this.selectAll()}>
+                      {this.props.msg.pkg.get("browser.selectAll")}
+                    </button>
+                  </span>
+                  <span>
+                    {this.state.selectedItems.size > 0 ? (
+                      <span>
+                        <button
+                          type="button"
+                          onClick={() => this.delete()}
+                          className="mr-8"
+                        >
+                          {this.props.msg.pkg.get("browser.delete")}
+                        </button>
+
+                        <button type="button" onClick={() => this.moveHere()}>
+                          {this.props.msg.pkg.get("browser.paste")}
+                        </button>
+                      </span>
+                    ) : null}
+                  </span>
+                </div>,
+
+                orderByButtons,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
+          </div>
           <div className="my-8">
             {this.prepareColumns(this.props.filesInfo.items, showOp)}
           </div>
@@ -1004,34 +1005,32 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         </div>
 
         <Container>
-          <div id="breadcrumb" className="leading-default">
-            <span className="location-item">
-              <span className="content">
-                {this.props.filesInfo.isSharing ? (
-                  <button
-                    type="button"
-                    onClick={() => {
-                      this.deleteSharing(
-                        this.props.filesInfo.dirPath.join("/")
-                      );
-                    }}
-                  >
-                    {this.props.msg.pkg.get("browser.share.del")}
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={this.addSharing}
-                    className="mr-4"
-                  >
-                    {this.props.msg.pkg.get("browser.share.add")}
-                  </button>
-                )}
-                {/* {`${this.props.msg.pkg.get("breadcrumb.loc")}:`} */}
+          {this.props.login.userRole === roleVisitor || (
+            <div id="breadcrumb" className="leading-default">
+              <span className="location-item mr-4">
+                <span className="content">
+                  {this.props.filesInfo.isSharing ? (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        this.deleteSharing(
+                          this.props.filesInfo.dirPath.join("/")
+                        );
+                      }}
+                    >
+                      {`${this.props.msg.pkg.get("browser.share.del")}`}
+                    </button>
+                  ) : (
+                    <button type="button" onClick={this.addSharing}>
+                      {`${this.props.msg.pkg.get("browser.share.add")}`}
+                    </button>
+                  )}
+                  {/* {`${this.props.msg.pkg.get("breadcrumb.loc")}:`} */}
+                </span>
               </span>
-            </span>
-            {breadcrumb}
-          </div>
+              {breadcrumb}
+            </div>
+          )}
           {view}
         </Container>
       </div>

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

@@ -114,7 +114,6 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
                     onClick={() => {
                       this.deleteSharing(dirPath);
                     }}
-                    className="button-default"
                   >
                     {this.props.msg.pkg.get("op.cancel")}
                   </button>,

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

@@ -117,7 +117,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
         uploading.state !== UploadState.Stopped ? (
           <button
             onClick={() => this.stopUploading(uploading.filePath)}
-            className="inline-block button-default margin-r-m margin-b-m"
+            className="inline-block margin-r-m margin-b-m"
           >
             {this.props.msg.pkg.get("browser.stop")}
           </button>
@@ -129,7 +129,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
           {stopButton}
           <button
             onClick={() => this.deleteUpload(uploading.filePath)}
-            className="inline-block button-default"
+            className="inline-block"
           >
             {this.props.msg.pkg.get("browser.delete")}
           </button>

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

@@ -190,7 +190,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
                       color: "focus",
                     },
                     sharingsPanel: {
-                      name: "RiShareBoxLine",
+                      name: "FaSquareShareNodes",
                       size: iconSize("s"),
                       color: "focus",
                     },

src/client/web/src/components/visual/icons.tsx

@@ -30,6 +30,8 @@ import { TbSortAscending2 } from "react-icons/tb";
 import { MdUnfoldMore } from "react-icons/md";
 import { LuUnfoldVertical } from "react-icons/lu";
 import { GoUnfold } from "react-icons/go";
+import { FaSquareShareNodes } from "react-icons/fa6";
+
 
 
 
@@ -70,6 +72,7 @@ const icons = Map<string, IconType>({
   MdUnfoldMore,
   LuUnfoldVertical,
   GoUnfold,
+  FaSquareShareNodes,
 });
 
 export function getIconWithProps(

src/handlers/multiusers/middlewares.go

@@ -92,6 +92,11 @@ func (h *MultiUsersSvc) APIAccessControl() gin.HandlerFunc {
 			}
 		}
 
+		// TODO: listDir and download are exceptions: for sharing
+		if accessPath == "/v2/my/fs/dirs" {
+			matched = true
+		}
+
 		if matched {
 			c.Next()
 			return

static/public/css/dark.css

@@ -15,7 +15,6 @@
 }
 
 .theme-dark #breadcrumb .location-item {
-  margin: 0 0.5rem 0 0;
   display: inline-block;
   line-height: 3.2rem;
 }
@@ -112,7 +111,7 @@
 .theme-dark .container-center {
   margin: 0 auto auto auto;
   width: 96%;
-  max-width: 100rem;
+  max-width: 128rem;
   z-index: 9;
 }
 
@@ -229,7 +228,7 @@
 }
 
 .theme-dark #root-container {
-  max-width: 100rem;
+  max-width: 128rem;
   width: 96%;
   text-align: left;
   margin: 3rem auto auto auto;
@@ -241,12 +240,13 @@
 
 /* +composition */
 
-.theme-dark .container {
+.theme-dark .my-container {
   width: 100%;
   background-color: #242424;
   /* border-radius: 0.8rem; */
   /* box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%); */
   margin: auto auto 1rem auto;
+  min-width: 60rem;
 }
 
 .theme-dark .info {

static/public/css/reset.css

@@ -67,8 +67,6 @@ input {
   line-height: 3.2rem;
   height: 3.2rem;
   padding: 0.8rem 1rem;
-  /* border: solid 1px #95a5a6;
-  border-radius: 0.5rem; */
   transition: opacity 300ms, box-shadow 300ms;
 }
 
@@ -81,10 +79,7 @@ button {
 
   font-size: 1.2rem;
   line-height: 3.2rem;
-  /* padding: 1rem 1rem; */
-  /* font-weight: bold; */
   border: none;
-  border-radius: 0.5rem;
   outline: none;
   height: 3.2rem;