Web: Files: Templates: InfoPanel: added Details sub-menu

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

@@ -202,5 +202,7 @@
   "AddUsersOrGroupsDescription": "The added administrators will be able to create rooms using this template.",
   "AddUsersOrGroupsInfo": "Only <strong>DocSpace</strong> and <strong>Room admins</strong> are shown here",
   "AddUsersOrGroupsInfoGroups": "Only <strong>DocSpace</strong> and <strong>Room admins</strong> from the selected groups will be able to create rooms using this template.",
-  "AddAdminByNameOrEmail": "Add admin by name or email"
+  "AddAdminByNameOrEmail": "Add admin by name or email",
+  "RoomTemplate": "Room template",
+  "RoomTemplateDescription": "Use this template to quickly create a new room."
 }

packages/client/src/pages/Home/InfoPanel/Body/styles/details.js

@@ -27,6 +27,7 @@
 import styled from "styled-components";
 import { isMobile, isTablet } from "react-device-detect";
 import { Base } from "@docspace/shared/themes";
+import PublicRoomBar from "@docspace/shared/components/public-room-bar";
 
 const StyledThumbnail = styled.div`
   display: flex;
@@ -69,7 +70,24 @@ const StyledNoThumbnail = styled.div`
   }
 `;
 
+const StyledPublicRoomBar = styled(PublicRoomBar)`
+  margin-bottom: -2px;
+
+  .text-container_body {
+    margin-top: 2px;
+
+    .room-template_button {
+      margin-top: 10px;
+    }
+
+    .room-template_text {
+      color: ${({ theme }) => theme.infoPanel.links.primaryColor};
+    }
+  }
+`;
+
 StyledThumbnail.defaultProps = { theme: Base };
 StyledNoThumbnail.defaultProps = { theme: Base };
+StyledPublicRoomBar.defaultProps = { theme: Base };
 
-export { StyledThumbnail, StyledNoThumbnail };
+export { StyledThumbnail, StyledNoThumbnail, StyledPublicRoomBar };

packages/client/src/pages/Home/InfoPanel/Body/views/Details/index.js

@@ -28,12 +28,17 @@ import React, { useState, useEffect, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { inject } from "mobx-react";
 import { withTranslation } from "react-i18next";
-
-import { FileType, FolderType } from "@docspace/shared/enums";
+import FormReactSvgUrl from "PUBLIC_DIR/images/access.form.react.svg?url";
+import { FileType, FolderType, RoomsType } from "@docspace/shared/enums";
 import { Text } from "@docspace/shared/components/text";
+import { Button } from "@docspace/shared/components/button";
 
 import DetailsHelper from "../../helpers/DetailsHelper.js";
-import { StyledNoThumbnail, StyledThumbnail } from "../../styles/details.js";
+import {
+  StyledNoThumbnail,
+  StyledThumbnail,
+  StyledPublicRoomBar,
+} from "../../styles/details.js";
 import { StyledProperties, StyledSubtitle } from "../../styles/common.js";
 import { RoomIcon } from "@docspace/shared/components/room-icon";
 const Details = ({
@@ -49,6 +54,7 @@ const Details = ({
   isArchive,
   isDefaultRoomsQuotaSet,
   setNewInfoPanelSelection,
+  onCreateRoomFromTemplate,
 }) => {
   const [itemProperties, setItemProperties] = useState([]);
 
@@ -85,6 +91,10 @@ const Details = ({
     }
   }, [selection]);
 
+  const onCreateRoom = () => {
+    onCreateRoomFromTemplate(selection);
+  };
+
   useEffect(() => {
     createThumbnailAction();
   }, [selection, createThumbnailAction]);
@@ -99,9 +109,36 @@ const Details = ({
   const isLoadedRoomIcon = !!selection.logo?.large;
   const showDefaultRoomIcon = !isLoadedRoomIcon && selection.isRoom;
 
+  // const isTemplate = selection.roomType === RoomsType.TemplateRoom; //TODO: Templates
+  const isTemplate = true; //TODO: Templates
+
   return (
     <>
-      {selection.thumbnailUrl && !isThumbnailError ? (
+      {isTemplate ? (
+        <StyledPublicRoomBar
+          headerText={t("Files:RoomTemplate")}
+          iconName={FormReactSvgUrl} // #657077 //TODO: Templates
+          bodyText={
+            <>
+              <Text
+                fontSize="12px"
+                fontWeight={400}
+                className="room-template_text"
+              >
+                {t("Files:RoomTemplateDescription")}
+              </Text>
+
+              <Button
+                label={t("Files:CreateRoom")}
+                className="room-template_button"
+                onClick={onCreateRoom}
+                size="extraSmall"
+                primary
+              />
+            </>
+          }
+        />
+      ) : selection.thumbnailUrl && !isThumbnailError ? (
         <StyledThumbnail
           isImageOrMedia={
             selection?.viewAccessibility?.ImageView ||
@@ -135,13 +172,11 @@ const Details = ({
           />
         </StyledNoThumbnail>
       )}
-
       <StyledSubtitle>
         <Text fontWeight="600" fontSize="14px">
           {t("Properties")}
         </Text>
       </StyledSubtitle>
-
       <StyledProperties>
         {itemProperties.map((property) => {
           return (
@@ -179,7 +214,7 @@ export default inject(
     const { culture } = settingsStore;
     const { user } = userStore;
 
-    const { selectTag } = filesActionsStore;
+    const { selectTag, onCreateRoomFromTemplate } = filesActionsStore;
 
     const isVisitor = user.isVisitor;
     const isCollaborator = user.isCollaborator;
@@ -199,6 +234,7 @@ export default inject(
       isArchive,
       isDefaultRoomsQuotaSet,
       setNewInfoPanelSelection,
+      onCreateRoomFromTemplate,
     };
   },
 )(withTranslation(["InfoPanel", "Common", "Translations", "Files"])(Details));

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

@@ -127,6 +127,16 @@ const InfoPanelHeaderContent = (props) => {
 
   const personalSubmenu = [submenuData[1], submenuData[2]];
 
+  const templateSubmenu = [
+    {
+      id: "info_members",
+      name: t("Common:Accesses"),
+      onClick: setMembers,
+      content: null,
+    },
+    submenuData[2],
+  ];
+
   if (selection?.canShare) {
     personalSubmenu.unshift({
       id: "info_share",
@@ -192,6 +202,9 @@ const InfoPanelHeaderContent = (props) => {
     selection?.rootFolderType === FolderType.Rooms ||
     selection?.rootFolderType === FolderType.Archive;
 
+  // const isTemplate = selection?.rootFolderType === FolderType.Templates;
+  const isTemplate = true; //TODO: Templates
+
   return (
     <StyledInfoPanelHeader isTablet={isTablet} withSubmenu={withSubmenu}>
       <div className="main">
@@ -216,7 +229,13 @@ const InfoPanelHeaderContent = (props) => {
 
       {withSubmenu && (
         <div className="submenu">
-          {isRoomsType ? (
+          {isTemplate ? (
+            <Submenu
+              style={{ width: "100%" }}
+              data={templateSubmenu}
+              forsedActiveItemId={roomsView}
+            />
+          ) : isRoomsType ? (
             <Submenu
               style={{ width: "100%" }}
               data={roomsSubmenu}

packages/shared/components/public-room-bar/PublicRoomBar.styled.ts

@@ -46,9 +46,15 @@ const StyledPublicRoomBar = styled.div`
   .header-body {
     display: flex;
     height: fit-content;
+    align-items: center;
     width: 100%;
     gap: 8px;
     font-weight: 600;
+
+    .header-icon {
+      height: 16px;
+      width: 16px;
+    }
   }
 
   .text-container_header {

public/locales/en/Common.json

@@ -243,6 +243,7 @@
   "MeLabel": "Me",
   "Member": "Member",
   "Members": "Members",
+  "Accesses": "Accesses",
   "MobileAndroid": "Get ONLYOFFICE Documents on Google Play",
   "MobileIos": "Download ONLYOFFICE Documents on the App Store",
   "MobileLinux": "Download ONLYOFFICE Desktop Editors for Linux",