Web: Files: Tiles: Added wrapper for version and "New" badges, refact…

…oring
ONLYOFFICE · Jan 24, 2022 · c70e174 · c70e174
1 parent 1e7981b
commit c70e174
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 89 deletions.
diff --git a/products/ASC.Files/Client/src/components/Badges.js b/products/ASC.Files/Client/src/components/Badges.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import Badge from "@appserver/components/badge";
 import IconButton from "@appserver/components/icon-button";
@@ -9,6 +9,42 @@ export const StyledIcon = styled(IconButton)`
   ${commonIconsStyles}
 `;
 
+const StyledWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: white;
+  padding: 6px;
+  border-radius: 4px;
+  box-shadow: 0px 2px 4px rgba(4, 15, 27, 0.16);
+`;
+
+const VersionBadgeWrapper = ({ handleClick, isTile, children: badge }) => {
+  if (!isTile) return badge;
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const onMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const onMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const newBadge = React.cloneElement(badge, { isHovered: isHovered });
+
+  return (
+    <StyledWrapper
+      onClick={handleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {newBadge}
+    </StyledWrapper>
+  );
+};
+
 const Badges = ({
   t,
   newItems,
@@ -100,36 +136,40 @@ const Badges = ({
         />
       )}
       {version > 1 && (
-        <Badge
-          className="badge-version badge-version-current tablet-badge icons-group"
-          backgroundColor="#A3A9AE"
-          borderRadius="11px"
-          color="#FFFFFF"
-          fontSize={fontSizeBadge}
-          fontWeight={800}
-          label={t("VersionBadge:Version", { version: countVersions })}
-          maxWidth="50px"
-          onClick={onShowVersionHistory}
-          padding={paddingBadge}
-          lineHeight={lineHeightBadge}
-          data-id={id}
-        />
+        <VersionBadgeWrapper handleClick={onShowVersionHistory} isTile={isTile}>
+          <Badge
+            className="badge-version badge-version-current tablet-badge icons-group"
+            backgroundColor="#A3A9AE"
+            borderRadius="11px"
+            color="#FFFFFF"
+            fontSize={fontSizeBadge}
+            fontWeight={800}
+            label={t("VersionBadge:Version", { version: countVersions })}
+            maxWidth="50px"
+            onClick={onShowVersionHistory}
+            padding={paddingBadge}
+            lineHeight={lineHeightBadge}
+            data-id={id}
+          />
+        </VersionBadgeWrapper>
       )}
       {(showNew || isNewWithFav) && (
-        <Badge
-          className="badge-version badge-new-version tablet-badge icons-group"
-          backgroundColor="#ED7309"
-          borderRadius="11px"
-          color="#FFFFFF"
-          fontSize={fontSizeBadge}
-          fontWeight={800}
-          label={t("New")}
-          maxWidth="50px"
-          onClick={onBadgeClick}
-          padding={paddingBadge}
-          lineHeight={lineHeightBadge}
-          data-id={id}
-        />
+        <VersionBadgeWrapper handleClick={onBadgeClick} isTile={isTile}>
+          <Badge
+            className="badge-version badge-new-version tablet-badge icons-group"
+            backgroundColor="#ED7309"
+            borderRadius="11px"
+            color="#FFFFFF"
+            fontSize={fontSizeBadge}
+            fontWeight={800}
+            label={t("New")}
+            maxWidth="50px"
+            onClick={onBadgeClick}
+            padding={paddingBadge}
+            lineHeight={lineHeightBadge}
+            data-id={id}
+          />
+        </VersionBadgeWrapper>
       )}
     </div>
   ) : (

diff --git a/products/ASC.Files/Client/src/components/QuickButtons.js b/products/ASC.Files/Client/src/components/QuickButtons.js
@@ -42,7 +42,7 @@ const QuickButtons = ({
 
   const tabletViewQuickButton =
     !isTile && ((sectionWidth > 500 && sectionWidth <= 1024) || isTablet);
-  const sizeQuickButton = tabletViewQuickButton ? "medium" : "small";
+  const sizeQuickButton = isTile || tabletViewQuickButton ? "medium" : "small";
 
   const displayShare = viewAs === "row" && (isMobile || sectionWidth <= 500);
   const displayLock = !locked && (isMobile || sectionWidth <= 500);

diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
@@ -196,14 +196,13 @@ const StyledOptionButton = styled.div`
 `;
 
 const badgesPosition = css`
-  position: absolute;
-  top: 14px;
-  left: 16px;
+  left: 9px;
 
   .badges {
     display: grid;
     grid-template-columns: repeat(3, fit-content(50px));
-    grid-gap: 20px;
+    grid-template-rows: 32px;
+    grid-gap: 7px;
 
     .badge-new-version {
       order: 1;
@@ -216,77 +215,36 @@ const badgesPosition = css`
     .is-editing,
     .can-convert {
       order: 3;
-      top: 2px;
     }
   }
 `;
 
 const quickButtonsPosition = css`
-  position: absolute;
-  right: 20px;
-  top: 16px;
+  right: 9px;
 
   .badges {
     display: grid;
+    grid-template-columns: 32px;
     grid-template-rows: repeat(3, 32px);
-    grid-gap: 4px;
+    grid-gap: 7px;
   }
 `;
 
-const badgeOutlineStyles = ({ top, right, left, width }) => {
-  const commonCss = css`
-    content: "";
-    position: absolute;
-    top: ${top};
-    ${right && `right: ${right}`};
-    ${left && `left: ${left}`};
-    height: 32px;
-    width: ${width};
-    border-radius: 4px;
-  `;
-
-  return css`
-    position: relative;
-    overflow: visible;
-
-    &::before {
-      ${commonCss};
-      z-index: -1;
-      border-radius: 4px;
-      background: white;
-    }
-
-    // this fixes hover
-    &::after {
-      ${commonCss};
-      box-shadow: 0px 2px 4px rgba(4, 15, 27, 0.16);
-    }
-  `;
-};
-
 const StyledIcons = styled.div`
+  position: absolute;
+  top: 8px;
+
   ${(props) => props.isBadges && badgesPosition}
   ${(props) => props.isQuickButtons && quickButtonsPosition}
-
+  
   .badge {
-    ${badgeOutlineStyles({
-      top: "-8px",
-      left: "-8px",
-      width: "32px",
-    })}
-
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  }
-
-  .badge-version {
-    ${badgeOutlineStyles({
-      top: "-7px",
-      left: "-9px",
-      width: "calc(100% + 18px)",
-    })}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    background: rgb(255, 255, 255);
+    border-radius: 4px;
+    box-shadow: 0px 2px 4px rgba(4, 15, 27, 0.16);
   }
 `;