Web: Files : Home : Added share button at row

products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js

@@ -14,6 +14,7 @@ import {
   Link,
   DragAndDrop,
   Box,
+  Text
 } from "asc-web-components";
 import EmptyFolderContainer from "./EmptyFolderContainer";
 import FilesRowContent from "./FilesRowContent";
@@ -121,6 +122,13 @@ const SimpleFilesRow = styled(Row)`
         width: 0px;
       }
   `}
+
+  .share-button:hover {
+      cursor: pointer;
+      div {
+        color: "#657077"
+      }
+    }
 `;
 
 class SectionBodyContent extends React.Component {
@@ -382,12 +390,10 @@ class SectionBodyContent extends React.Component {
     copy(
       isFile
         ? isMediaOrImage(item.fileExst)
-          ? `${window.location.origin + settings.homepage}/filter?folder=${
+          ? `${window.location.origin + settings.homepage}/filter?folder=${item.folderId
-              item.folderId
           }&preview=${item.id}`
           : item.webUrl
-        : `${window.location.origin + settings.homepage}/filter?folder=${
+        : `${window.location.origin + settings.homepage}/filter?folder=${item.id
-            item.id
         }`
     );
 
@@ -1277,6 +1283,30 @@ class SectionBodyContent extends React.Component {
     });
   };
 
+  getSharedButton = () => {
+    return (
+      <Text
+        className="share-button"
+        as='span'
+        title={"Share"}
+        fontSize='12px'
+        fontWeight={400}
+        color='#A3A9AE'
+        display="inline-flex"
+        onClick={this.onClickShare}
+      >
+        <IconButton
+          className="share-button"
+          color='#a3a9ae'
+          hoverColor="#657077"
+          size={16}
+          iconName='CatalogSharedIcon'
+          style={{ marginRight: "8px" }}
+        />
+        Share
+      </Text>)
+  }
+
   render() {
     const {
       files,
@@ -1473,6 +1503,9 @@ class SectionBodyContent extends React.Component {
                     const element = this.getItemIcon(item, isEdit || item.id <= 0);
                     const classNameProp =
                       isFolder && item.access < 2 ? { className: " dropable" } : {};
+                    const sharedButton = this.getSharedButton();
+                    const displayShareButton = widthProp > 500 ? '96px' : '26px';
+
                     return (
                       <DragAndDrop
                         {...classNameProp}
@@ -1488,12 +1521,14 @@ class SectionBodyContent extends React.Component {
                           key={item.id}
                           data={item}
                           element={element}
+                          contentElement={sharedButton}
                           onSelect={this.onContentRowSelect}
                           editing={editingId}
                           {...checkedProps}
                           {...contextOptionsProps}
                           needForUpdate={this.needForUpdate}
                           selectItem={this.onSelectItem.bind(this, item)}
+                          contextButtonSpacerWidth={displayShareButton}
                         >
                           <FilesRowContent
                             widthProp={widthProp}