Web: Files: Templates: added navigation badge

packages/client/public/locales/en/Files.json

@@ -205,5 +205,6 @@
   "AddAdminByNameOrEmail": "Add admin by name or email",
   "RoomTemplate": "Room template",
   "RoomTemplateDescription": "Use this template to quickly create a new room.",
-  "TemplateOwner": "Template owner"
+  "TemplateOwner": "Template owner",
+  "Template": "Template"
 }

packages/client/src/pages/Home/Section/Header/index.js

@@ -987,6 +987,8 @@ const SectionHeaderContent = (props) => {
     ? t("Files:ShareRoom")
     : null;
 
+  const badgeLabel = isTemplatesFolder ? t("Files:Template") : "";
+
   return (
     <Consumer key="header">
       {(context) => (
@@ -1054,6 +1056,7 @@ const SectionHeaderContent = (props) => {
                 onNavigationButtonClick={onNavigationButtonClick}
                 tariffBar={<TariffBar />}
                 showNavigationButton={!!showNavigationButton}
+                badgeLabel={badgeLabel}
               />
             </div>
           )}

packages/shared/components/navigation/Navigation.styled.ts

@@ -248,6 +248,14 @@ const StyledContainer = styled.div<{
     grid-template-columns: ${(props) =>
       props.isRootFolder ? "auto 1fr" : "29px auto 1fr"};
   }
+
+  .title-block-badge {
+    margin-left: 8px;
+
+    div {
+      background-color: ${(props) => props.theme.catalog.header.iconFill};
+    }
+  }
 `;
 
 const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)<{
@@ -482,6 +490,14 @@ const StyledTextContainer = styled.div<{
       overflow: hidden;
       text-overflow: ellipsis;
     `};
+
+  .title-block-badge {
+    div {
+      ${(props) =>
+        props.isRootFolderTitle &&
+        `background-color: ${props.theme.navigation.rootFolderTitleColor}`};
+    }
+  }
 `;
 
 const StyledHeading = styled(Heading)<{ isRootFolderTitle: boolean }>`

packages/shared/components/navigation/Navigation.tsx

@@ -82,6 +82,7 @@ const Navigation = ({
   onNavigationButtonClick,
   tariffBar,
   showNavigationButton,
+  badgeLabel,
   ...rest
 }: INavigationProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -177,6 +178,7 @@ const Navigation = ({
         isRootFolder={isRootFolder}
         onClick={toggleDropBox}
         isRootFolderTitle={false}
+        badgeLabel={!showRootFolderNavigation ? badgeLabel : ""}
       />
     </div>
   );
@@ -197,6 +199,7 @@ const Navigation = ({
         isRootFolder={isRootFolder}
         isRootFolderTitle
         onClick={onTextClick}
+        badgeLabel={badgeLabel}
       />
 
       {navigationTitleNode}

packages/shared/components/navigation/Navigation.types.ts

@@ -104,6 +104,7 @@ export interface ITextProps {
   isRootFolderTitle: boolean;
   onClick: () => void;
   className?: string;
+  badgeLabel?: string;
 }
 
 export interface INavigationLogoProps {
@@ -201,4 +202,5 @@ export interface INavigationProps {
   onNavigationButtonClick?: () => void;
   tariffBar: React.ReactElement;
   showNavigationButton: boolean;
+  badgeLabel?: string;
 }

packages/shared/components/navigation/sub-components/Text.tsx

@@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
+import { Badge } from "../../badge";
 
 import {
   StyledArrowIcon,
@@ -42,6 +43,7 @@ const Text = ({
   isOpen,
   isRootFolderTitle,
   onClick,
+  badgeLabel,
   ...rest
 }: ITextProps) => {
   return (
@@ -58,9 +60,19 @@ const Text = ({
       >
         {title}
       </StyledHeading>
-
+      {badgeLabel && (
+        <Badge
+          className="title-block-badge"
+          label={badgeLabel}
+          fontSize="9px"
+          padding="2px 5px"
+          fontWeight={700}
+          borderRadius="50px"
+          noHover
+          isHovered={false}
+        />
+      )}
       {isRootFolderTitle && <StyledArrowIcon />}
-
       {!isRootFolderTitle && !isRootFolder ? (
         isOpen ? (
           <StyledExpanderDownIconRotate />