Client: moved new logic from ItemIcon to RoomIcon

packages/client/src/components/ItemIcon.js

@@ -31,13 +31,8 @@ import styled, { css } from "styled-components";
 import { Base } from "@docspace/shared/themes";
 import { NoUserSelect } from "@docspace/shared/utils";
 import { RoomIcon } from "@docspace/shared/components/room-icon";
-import { IconButton } from "@docspace/shared/components/icon-button";
-import { DropDown } from "@docspace/shared/components/drop-down";
-import { DropDownItem } from "@docspace/shared/components/drop-down-item";
 
 import EditPenSvgUrl from "PUBLIC_DIR/images/icons/12/pen-edit.react.svg?url";
-import PenSvgUrl from "PUBLIC_DIR/images/pencil.react.svg?url";
-import UploadPenSvgUrl from "PUBLIC_DIR/images/actions.upload.react.svg?url";
 
 const IconWrapper = styled.div`
   ${(props) =>
@@ -68,25 +63,6 @@ const IconWrapper = styled.div`
   }
 `;
 
-const EditWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background-color: ${(props) => props.theme.itemIcon.editIconColor};
-  border-radius: 50%;
-  position: absolute;
-  bottom: -6px;
-  right: -6px;
-
-  .open-edit-logo-icon {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-`;
-
 IconWrapper.defaultProps = { theme: Base };
 
 const EncryptedFileIcon = styled.div`
@@ -110,26 +86,13 @@ const ItemIcon = ({
   badgeUrl,
   size,
   withEditing,
-  setRoomLogoCoverDialogVisible,
   showDefault,
   imgClassName,
+  model,
 }) => {
   const isLoadedRoomIcon = !!logo?.medium;
   const showDefaultRoomIcon = !isLoadedRoomIcon && isRoom;
-  const [editLogoOpen, setEditLogoOpen] = useState(false);
 
-  const toggleEditLogo = () => {
-    setEditLogoOpen(!editLogoOpen);
-  };
-
-  const closeEditLogo = () => {
-    setEditLogoOpen(false);
-  };
-
-  const openCustomizeCover = () => {
-    setRoomLogoCoverDialogVisible(true);
-    closeEditLogo();
-  };
   return (
     <>
       <IconWrapper isRoom={isRoom}>
@@ -142,45 +105,15 @@ const ItemIcon = ({
           imgClassName={imgClassName || "react-svg-icon"}
           imgSrc={isRoom ? logo?.medium : icon}
           badgeUrl={badgeUrl ? badgeUrl : ""}
+          withEditing={withEditing}
+          model={model}
         />
-        {withEditing && (
-          <EditWrapper>
-            <IconButton
-              className="open-edit-logo-icon"
-              size={12}
-              iconName={EditPenSvgUrl}
-              onClick={toggleEditLogo}
-              isFill
-            />
-            <DropDown
-              open={editLogoOpen}
-              clickOutsideAction={closeEditLogo}
-              withBackdrop={false}
-              isDefaultMode={false}
-              fixedDirection={true}
-            >
-              <DropDownItem
-                label={`Upload picture`}
-                icon={UploadPenSvgUrl}
-                //   onClick={() => shareEmail(activeLink[0])}
-              />
-              <DropDownItem
-                label={`Customize cover`}
-                icon={PenSvgUrl}
-                onClick={openCustomizeCover}
-              />
-            </DropDown>
-          </EditWrapper>
-        )}
       </IconWrapper>
       {isPrivacy && fileExst && <EncryptedFileIcon isEdit={false} />}
     </>
   );
 };
 
-export default inject(({ treeFoldersStore, dialogsStore }) => {
+export default inject(({ treeFoldersStore }) => {
-  return {
+  return { isPrivacy: treeFoldersStore.isPrivacyFolder };
-    isPrivacy: treeFoldersStore.isPrivacyFolder,
-    setRoomLogoCoverDialogVisible: dialogsStore.setRoomLogoCoverDialogVisible,
-  };
 })(observer(ItemIcon));

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js

@@ -44,6 +44,9 @@ import { ImageEditor } from "@docspace/shared/components/image-editor";
 import PreviewTile from "@docspace/shared/components/image-editor/PreviewTile";
 import { Text } from "@docspace/shared/components/text";
 
+import PenSvgUrl from "PUBLIC_DIR/images/pencil.react.svg?url";
+import UploadPenSvgUrl from "PUBLIC_DIR/images/actions.upload.react.svg?url";
+
 import ItemIcon from "@docspace/client/src/components/ItemIcon";
 
 import ChangeRoomOwner from "./ChangeRoomOwner";
@@ -131,6 +134,7 @@ const SetRoomParams = ({
   disabledChangeRoomType,
   maxImageUploadSize,
   bufferSelection,
+  setRoomLogoCoverDialogVisible,
 }) => {
   const [previewIcon, setPreviewIcon] = useState(null);
   const [createNewFolderIsChecked, setCreateNewFolderIsChecked] =
@@ -180,6 +184,18 @@ const SetRoomParams = ({
       ...{ createAsNewFolder: !createNewFolderIsChecked },
     });
   };
+  const model = [
+    {
+      label: "UploadPicture",
+      icon: UploadPenSvgUrl,
+      onClick: () => {},
+    },
+    {
+      label: "CustomizeCover",
+      icon: PenSvgUrl,
+      onClick: () => setRoomLogoCoverDialogVisible(true),
+    },
+  ];
 
   const element = (
     <ItemIcon
@@ -191,6 +207,7 @@ const SetRoomParams = ({
       color={bufferSelection.logo?.color}
       size={isMobile() ? "96px" : "64px"}
       withEditing={true}
+      model={model}
     />
   );
 
@@ -324,7 +341,8 @@ export default inject(
 
     const { bufferSelection } = filesStore;
 
-    const { setChangeRoomOwnerIsVisible } = dialogsStore;
+    const { setChangeRoomOwnerIsVisible, setRoomLogoCoverDialogVisible } =
+      dialogsStore;
     const { folderFormValidation, maxImageUploadSize } = settingsStore;
 
     return {
@@ -333,6 +351,7 @@ export default inject(
       setChangeRoomOwnerIsVisible,
       maxImageUploadSize,
       bufferSelection,
+      setRoomLogoCoverDialogVisible,
     };
   },
 )(

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js

@@ -31,6 +31,7 @@ import { Text } from "@docspace/shared/components/text";
 import { inject, observer } from "mobx-react";
 import PersonPlusReactSvgUrl from "PUBLIC_DIR/images/person+.react.svg?url";
 import Planet12ReactSvgUrl from "PUBLIC_DIR/images/icons/12/planet.react.svg?url";
+import Camera10ReactSvgUrl from "PUBLIC_DIR/images/icons/10/cover.camera.react.svg?url";
 import SearchIconReactSvgUrl from "PUBLIC_DIR/images/search.react.svg?url";
 import { IconButton } from "@docspace/shared/components/icon-button";
 import { StyledTitle } from "../../../styles/common";
@@ -113,6 +114,7 @@ const RoomsItemHeader = ({
           imgClassName={`icon ${selection.isRoom && "is-room"}`}
           imgSrc={icon}
           badgeUrl={badgeUrl ? badgeUrl : ""}
+          hoverSrc={Camera10ReactSvgUrl}
         />
       </div>
 

packages/shared/components/room-icon/RoomIcon.styled.ts

@@ -1,12 +1,13 @@
 import styled, { css } from "styled-components";
 import { Base } from "../../themes";
 
-export const StyledIcon = styled.div<{
+const StyledIcon = styled.div<{
   size: string;
   radius: string;
   isArchive?: boolean;
   color?: string;
   wrongImage: boolean;
+  withHover: boolean;
 }>`
   display: flex;
   justify-content: center;
@@ -35,6 +36,9 @@ export const StyledIcon = styled.div<{
     font-size: 14px;
     font-weight: 700;
     line-height: 16px;
+    transition: all 0.2s ease;
+    opacity: 1;
+    transform: translateY(0);
     color: ${(props) =>
       props.wrongImage && props.theme.isBase ? "#333333" : "#ffffff"};
     position: relative;
@@ -67,6 +71,56 @@ export const StyledIcon = styled.div<{
       }
     }
   }
+
+  .room-icon_hover {
+    position: absolute;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.2s ease;
+  }
+
+  ${(props) =>
+    props.withHover &&
+    css`
+      cursor: pointer;
+
+      &:hover {
+        .hover-class {
+          filter: brightness(80%);
+        }
+
+        .room-icon_hover {
+          opacity: 1;
+          transform: translateY(0px);
+        }
+
+        .room-title {
+          opacity: 0;
+          transform: translateY(-20px);
+        }
+      }
+    `}
 `;
 
 StyledIcon.defaultProps = { theme: Base };
+
+const EditWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background-color: ${(props) => props.theme.itemIcon.editIconColor};
+  border-radius: 50%;
+  position: absolute;
+  bottom: -6px;
+  right: -6px;
+
+  .open-edit-logo-icon {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+`;
+
+export { StyledIcon, EditWrapper };

packages/shared/components/room-icon/RoomIcon.types.ts

@@ -6,6 +6,8 @@ type RoomIconDefault = {
   showDefault: boolean;
   imgClassName?: string;
   className?: string;
+  hoverSrc?: string;
+  withEditing?: boolean;
 };
 
 type RoomIconColor = {

packages/shared/components/room-icon/index.tsx

@@ -27,6 +27,7 @@
 import React, { useMemo } from "react";
 
 import { Text } from "../text";
+import EditIcon from "./sub-components/EditIcon";
 
 import { IconButton } from "../icon-button";
 import { classNames } from "../../utils";
@@ -48,6 +49,9 @@ const RoomIcon = ({
   badgeUrl,
   onBadgeClick,
   className,
+  withEditing,
+  hoverSrc,
+  model,
 }: RoomIconProps) => {
   const [correctImage, setCorrectImage] = React.useState(true);
 
@@ -77,19 +81,27 @@ const RoomIcon = ({
       wrongImage={!correctImage}
       className={className}
       data-testid="room-icon"
+      withHover={!!hoverSrc}
     >
       {showDefault || !correctImage ? (
         <>
-          <div className="room-background" />
+          <div className="room-background hover-class" />
           <Text className="room-title">{roomTitle}</Text>
         </>
       ) : (
         <img
-          className={classNames([imgClassName, "not-selectable"])}
+          className={classNames([
+            imgClassName,
+            "hover-class",
+            "not-selectable",
+          ])}
           src={imgSrc}
           alt="room icon"
         />
       )}
+      {hoverSrc && (
+        <img className="room-icon_hover" src={hoverSrc} alt="room icon" />
+      )}
 
       {badgeUrl && (
         <div className="room-icon_badge">
@@ -102,6 +114,7 @@ const RoomIcon = ({
           />
         </div>
       )}
+      {withEditing && <EditIcon model={model} />}
     </StyledIcon>
   );
 };

packages/shared/components/room-icon/sub-components/EditIcon.tsx

@@ -0,0 +1,75 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import React from "react";
+
+import { DropDown } from "@docspace/shared/components/drop-down";
+import { DropDownItem } from "@docspace/shared/components/drop-down-item";
+
+import EditPenSvgUrl from "PUBLIC_DIR/images/icons/12/pen-edit.react.svg?url";
+
+import { IconButton } from "../../icon-button";
+import { EditWrapper } from "../RoomIcon.styled";
+
+const EditIcon = ({ model }) => {
+  const [openEditLogo, setOpenLogoEdit] = React.useState<boolean>(false);
+
+  const onToggleOpenEditLogo = () => setOpenLogoEdit(!openEditLogo);
+  return (
+    <EditWrapper>
+      <IconButton
+        className="open-edit-logo-icon"
+        size={12}
+        iconName={EditPenSvgUrl}
+        onClick={onToggleOpenEditLogo}
+        isFill
+      />
+      <DropDown
+        open={openEditLogo}
+        clickOutsideAction={() => setOpenLogoEdit(false)}
+        withBackdrop={false}
+        isDefaultMode={false}
+      >
+        {model?.map((option, i) => {
+          const optionOnClickAction = () => {
+            setOpenLogoEdit(false);
+            option.onClick();
+          };
+          return (
+            <DropDownItem
+              key={i}
+              label={option.label}
+              icon={option.icon}
+              onClick={optionOnClickAction}
+            />
+          );
+        })}
+      </DropDown>
+    </EditWrapper>
+  );
+};
+
+export default EditIcon;