Web: Files: Tiles: Badges redesign

ONLYOFFICE · Dec 23, 2021 · 22e446d · 22e446d
1 parent 37fb1b2
commit 22e446d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/products/ASC.Files/Client/src/components/Badges.js b/products/ASC.Files/Client/src/components/Badges.js
@@ -55,6 +55,21 @@ const Badges = ({
           hoverColor="#3B72A7"
         />
       )}
+      {version > 1 && (
+        <Badge
+          className="badge-version icons-group"
+          backgroundColor="#A3A9AE"
+          borderRadius="11px"
+          color="#FFFFFF"
+          fontSize="10px"
+          fontWeight={800}
+          label={`Ver.${versionGroup}`}
+          maxWidth="50px"
+          onClick={onShowVersionHistory}
+          padding="0 5px"
+          data-id={id}
+        />
+      )}
       {canWebEdit &&
         !isEditing &&
         !isEditingWithFav &&
@@ -99,21 +114,6 @@ const Badges = ({
           onClick={onClickFavorite}
         />
       )}
-      {version > 1 && (
-        <Badge
-          className="badge-version icons-group"
-          backgroundColor="#A3A9AE"
-          borderRadius="11px"
-          color="#FFFFFF"
-          fontSize="10px"
-          fontWeight={800}
-          label={`Ver.${versionGroup}`}
-          maxWidth="50px"
-          onClick={onShowVersionHistory}
-          padding="0 5px"
-          data-id={id}
-        />
-      )}
       {(showNew || isNewWithFav) && (
         <Badge
           className="badge-version icons-group"

diff --git a/...ucts/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContent.js b/...ucts/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContent.js
@@ -50,10 +50,6 @@ const MainContainerWrapper = styled.div`
 const MainContainer = styled.div`
   height: 20px;
 
-  .badge-ext {
-    margin: 0px !important;
-  }
-
   @media (max-width: 1024px) {
     ${truncateCss};
   }
@@ -62,20 +58,26 @@ const MainContainer = styled.div`
 const MainIcons = styled.div`
   align-self: center;
   white-space: nowrap;
+
   .badges {
-    margin-right: 4px;
+    margin: 8px;
   }
 
   .additional-badges {
     position: absolute;
-    top: 1px;
-    right: 2px;
+    top: 0;
+    left: 0;
     display: flex;
     flex-direction: row;
+    filter: drop-shadow(0px 12px 40px rgba(4, 15, 27, 0.12));
 
     .icons-group {
-      margin-top: 10px;
-      margin-right: 3px;
+      margin-right: 4px;
+      background: #ffffff;
+      border-radius: 4px;
+      padding: 8px;
+      height: 16px;
+      border: none; // removes transparent border on version badge
     }
   }
 `;