Web: Files: Tiles: Added quick buttons, refactoring

products/ASC.Files/Client/src/HOCs/withBadges.js

@@ -122,6 +122,7 @@ export default function withBadges(WrappedComponent) {
         isAdmin,
         isDesktopClient,
         sectionWidth,
+        viewAs,
       } = this.props;
       const { fileStatus, access } = item;
 
@@ -150,6 +151,7 @@ export default function withBadges(WrappedComponent) {
           onBadgeClick={this.onBadgeClick}
           setConvertDialogVisible={this.setConvertDialogVisible}
           onFilesClick={onFilesClick}
+          viewAs={viewAs}
         />
       );
 

products/ASC.Files/Client/src/components/Badges.js

@@ -25,6 +25,7 @@ const Badges = ({
   onShowVersionHistory,
   onBadgeClick,
   setConvertDialogVisible,
+  viewAs,
 }) => {
   const { id, locked, fileStatus, version, versionGroup, fileExst } = item;
 
@@ -48,9 +49,10 @@ const Badges = ({
   const contentNewItems = newItems > 999 ? "999+" : newItems;
 
   const tabletViewBadge =
-    (sectionWidth > 500 && sectionWidth <= 1024) || isTablet;
+    viewAs !== "tile" &&
+    ((sectionWidth > 500 && sectionWidth <= 1024) || isTablet);
 
-  const sizeBadge = tabletViewBadge ? "medium" : "small";
+  const sizeBadge = viewAs === "tile" || tabletViewBadge ? "medium" : "small";
 
   const lineHeightBadge = tabletViewBadge ? "1.46" : "1.34";
 
@@ -97,7 +99,7 @@ const Badges = ({
       )}
       {version > 1 && (
         <Badge
-          className="badge-version tablet-badge icons-group"
+          className="badge-version badge-version-current tablet-badge icons-group"
           backgroundColor="#A3A9AE"
           borderRadius="11px"
           color="#FFFFFF"

products/ASC.Files/Client/src/components/QuickButtons.js

@@ -39,7 +39,8 @@ const QuickButtons = ({
     : "/static/images/favorite.react.svg";
 
   const tabletViewQuickButton =
-    (sectionWidth > 500 && sectionWidth <= 1024) || isTablet;
+    viewAs !== "tile" &&
+    ((sectionWidth > 500 && sectionWidth <= 1024) || isTablet);
   const sizeQuickButton = tabletViewQuickButton ? "medium" : "small";
 
   const displayShare = viewAs === "row" && (isMobile || sectionWidth <= 500);

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js

@@ -11,10 +11,10 @@ import withFileActions from "../../../../../HOCs/withFileActions";
 import withContextOptions from "../../../../../HOCs/withContextOptions";
 import withQuickButtons from "../../../../../HOCs/withQuickButtons";
 import ItemIcon from "../../../../../components/ItemIcon";
+import withBadges from "../../../../../HOCs/withBadges";
 
-const FilesTile = (props) => {
+const FileTile = (props) => {
   const {
-    t,
     item,
     sectionWidth,
     dragging,
@@ -27,17 +27,15 @@ const FilesTile = (props) => {
     value,
     displayShareButton,
     isPrivacy,
-    //sharedButton,
     contextOptionsProps,
     checkedProps,
-    //element,
     getIcon,
     onFilesClick,
     onMouseClick,
-    showShare,
     isActive,
     isEdit,
     quickButtonsComponent,
+    badgesComponent,
   } = props;
 
   const temporaryExtension =
@@ -92,6 +90,7 @@ const FilesTile = (props) => {
             sectionWidth={sectionWidth}
             onFilesClick={onFilesClick}
           />
+          {badgesComponent}
         </Tile>
       </DragAndDrop>
     </div>
@@ -102,9 +101,11 @@ export default inject(({ formatsStore }) => {
   const { getIcon } = formatsStore.iconFormatsStore;
   return { getIcon };
 })(
-  withTranslation("Home")(
+  withTranslation(["Home", "VersionBadge"])(
     withFileActions(
-      withContextOptions(withRouter(withQuickButtons(observer(FilesTile))))
+      withContextOptions(
+        withRouter(withBadges(withQuickButtons(observer(FileTile))))
+      )
     )
   )
 );

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js

@@ -71,12 +71,7 @@ const SimpleFilesTileContent = styled(TileContent)`
   }
 `;
 
-const FilesTileContent = ({
-  item,
-  titleWithoutExt,
-  linkStyles,
-  badgesComponent,
-}) => {
+const FilesTileContent = ({ item, titleWithoutExt, linkStyles }) => {
   const { fileExst, title } = item;
 
   return (
@@ -96,8 +91,6 @@ const FilesTileContent = ({
         >
           {titleWithoutExt}
         </Link>
-
-        <div className="badges">{badgesComponent}</div>
       </SimpleFilesTileContent>
     </>
   );

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -150,7 +150,7 @@ const StyledFileTileTop = styled.div`
   .temporary-icon > .injected-svg {
     position: absolute;
     width: 100%;
-    top: 25%;
+    bottom: 16px;
   }
 `;
 
@@ -211,6 +211,105 @@ const StyledOptionButton = styled.div`
   }
 `;
 
+const badgesPosition = css`
+  position: absolute;
+  top: 14px;
+  left: 16px;
+
+  .badges {
+    display: grid;
+    grid-template-columns: repeat(3, fit-content(50px));
+    grid-gap: 20px;
+
+    .badge-new-version {
+      order: 1;
+    }
+
+    .badge-version-current {
+      order: 2;
+    }
+
+    .is-editing,
+    .can-convert {
+      order: 3;
+      top: 2px;
+    }
+  }
+`;
+
+const quickButtonsPosition = css`
+  position: absolute;
+  right: 20px;
+  top: 16px;
+
+  .badges {
+    display: grid;
+    grid-template-rows: repeat(3, 32px);
+    grid-gap: 4px;
+  }
+`;
+
+const badgeOutlineStyles = ({ top, right, left, width }) => css`
+  position: relative;
+  overflow: visible;
+
+  &::before {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    top: ${top};
+    ${right && `right: ${right}`};
+    ${left && `left: ${left}`};
+    height: 32px;
+    width: ${width};
+    border-radius: 4px;
+    background: white;
+  }
+
+  // this fixes hover
+  &::after {
+    content: "";
+    position: absolute;
+    top: ${top};
+    ${right && `right: ${right}`};
+    ${left && `left: ${left}`};
+    height: 32px;
+    width: ${width};
+  }
+`;
+
+const StyledIcons = styled.div`
+  ${(props) => props.isBadges && badgesPosition}
+  ${(props) => props.isQuickButtons && quickButtonsPosition}
+  filter: drop-shadow(0px 12px 40px rgba(4, 15, 27, 0.12));
+
+  .badge {
+    ${badgeOutlineStyles({
+      top: "-8px",
+      left: "-8px",
+      width: "32px",
+    })}
+
+    svg {
+      height: 16px;
+      width: 16px;
+    }
+  }
+
+  .badge-version {
+    ${badgeOutlineStyles({
+      top: "-7px",
+      left: "-9px",
+      width: "calc(100% + 18px)",
+    })}
+
+    p {
+      font-size: 11px;
+      line-height: 16px;
+    }
+  }
+`;
+
 class Tile extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -278,6 +377,7 @@ class Tile extends React.PureComponent {
       isActive,
       inProgress,
       isEdit,
+      contentElement,
     } = this.props;
     const { isFolder, id, fileExst } = item;
 
@@ -291,6 +391,11 @@ class Tile extends React.PureComponent {
       "element"
     );
 
+    const renderContentElement = Object.prototype.hasOwnProperty.call(
+      this.props,
+      "contentElement"
+    );
+
     const renderContext =
       Object.prototype.hasOwnProperty.call(this.props, "contextOptions") &&
       contextOptions.length > 0;
@@ -309,6 +414,9 @@ class Tile extends React.PureComponent {
     };
 
     const icon = this.getIconFile();
+    const FilesTileContent = children[0];
+    const badges = children[1];
+    const quickButtons = contentElement;
 
     return (
       <StyledTile
@@ -355,7 +463,7 @@ class Tile extends React.PureComponent {
             <StyledContent
               isFolder={(isFolder && !fileExst) || (!fileExst && id === -1)}
             >
-              {children}
+              {FilesTileContent}
             </StyledContent>
             <StyledOptionButton spacerWidth={contextButtonSpacerWidth}>
               {renderContext ? (
@@ -379,6 +487,13 @@ class Tile extends React.PureComponent {
             <StyledFileTileTop checked={checked} isActive={isActive}>
               {icon}
             </StyledFileTileTop>
+
+            <StyledIcons isBadges>{badges}</StyledIcons>
+
+            {renderContentElement && (
+              <StyledIcons isQuickButtons>{quickButtons}</StyledIcons>
+            )}
+
             <StyledFileTileBottom>
               {id !== -1 && !isEdit && (
                 <>
@@ -406,7 +521,7 @@ class Tile extends React.PureComponent {
               <StyledContent
                 isFolder={(isFolder && !fileExst) || (!fileExst && id === -1)}
               >
-                {children}
+                {FilesTileContent}
               </StyledContent>
               <StyledOptionButton spacerWidth={contextButtonSpacerWidth}>
                 {renderContext ? (
@@ -434,7 +549,10 @@ class Tile extends React.PureComponent {
 
 Tile.propTypes = {
   checked: PropTypes.bool,
-  children: PropTypes.element,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.element,
+  ]),
   className: PropTypes.string,
   contextButtonSpacerWidth: PropTypes.string,
   contextOptions: PropTypes.array,
@@ -447,6 +565,7 @@ Tile.propTypes = {
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   viewAs: PropTypes.string,
   tileContextClick: PropTypes.func,
+  contentElement: PropTypes.element,
 };
 
 Tile.defaultProps = {

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContent.js

@@ -37,33 +37,6 @@ const MainContainer = styled.div`
   }
 `;
 
-const MainIcons = styled.div`
-  align-self: center;
-  white-space: nowrap;
-
-  .badges {
-    margin: 8px;
-  }
-
-  .additional-badges {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: row;
-    filter: drop-shadow(0px 12px 40px rgba(4, 15, 27, 0.12));
-
-    .icons-group {
-      margin-right: 4px;
-      background: #ffffff;
-      border-radius: 4px;
-      padding: 8px;
-      height: 16px;
-      border: none; // removes transparent border on version badge
-    }
-  }
-`;
-
 const TileContent = (props) => {
   const { children, id, className, style, onClick } = props;
 
@@ -75,14 +48,9 @@ const TileContent = (props) => {
       onClick={onClick}
     >
       <MainContainerWrapper
-        mainContainerWidth={
-          children[0].props && children[0].props.containerWidth
-        }
+        mainContainerWidth={children.props && children.props.containerWidth}
       >
-        <MainContainer className="row-main-container">
-          {children[0]}
-        </MainContainer>
-        <MainIcons className="main-icons">{children[1]}</MainIcons>
+        <MainContainer className="row-main-container">{children}</MainContainer>
       </MainContainerWrapper>
     </StyledTileContent>
   );