diff --git a/packages/client/src/components/ItemIcon.js b/packages/client/src/components/ItemIcon.js
index 0147b23b6f..dfd8bdd091 100644
--- a/packages/client/src/components/ItemIcon.js
+++ b/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 (
<>
@@ -142,45 +105,15 @@ const ItemIcon = ({
imgClassName={imgClassName || "react-svg-icon"}
imgSrc={isRoom ? logo?.medium : icon}
badgeUrl={badgeUrl ? badgeUrl : ""}
+ withEditing={withEditing}
+ model={model}
/>
- {withEditing && (
-
-
-
- shareEmail(activeLink[0])}
- />
-
-
-
- )}
{isPrivacy && fileExst && }
>
);
};
-export default inject(({ treeFoldersStore, dialogsStore }) => {
- return {
- isPrivacy: treeFoldersStore.isPrivacyFolder,
- setRoomLogoCoverDialogVisible: dialogsStore.setRoomLogoCoverDialogVisible,
- };
+export default inject(({ treeFoldersStore }) => {
+ return { isPrivacy: treeFoldersStore.isPrivacyFolder };
})(observer(ItemIcon));
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js
index 17a72203da..7c19e61d51 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js
+++ b/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 = (
);
@@ -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,
};
},
)(
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js
index 8731e1039b..3037ac8b67 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js
+++ b/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}
/>
diff --git a/packages/shared/components/room-icon/RoomIcon.styled.ts b/packages/shared/components/room-icon/RoomIcon.styled.ts
index 9df8c0734d..7b3dfa5db5 100644
--- a/packages/shared/components/room-icon/RoomIcon.styled.ts
+++ b/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 };
diff --git a/packages/shared/components/room-icon/RoomIcon.types.ts b/packages/shared/components/room-icon/RoomIcon.types.ts
index 493be2c4fb..214317ddc6 100644
--- a/packages/shared/components/room-icon/RoomIcon.types.ts
+++ b/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 = {
diff --git a/packages/shared/components/room-icon/index.tsx b/packages/shared/components/room-icon/index.tsx
index c4d618d592..143570feb5 100644
--- a/packages/shared/components/room-icon/index.tsx
+++ b/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 ? (
<>
-
+
{roomTitle}
>
) : (
)}
+ {hoverSrc && (
+
+ )}
{badgeUrl && (
@@ -102,6 +114,7 @@ const RoomIcon = ({
/>
)}
+ {withEditing && }
);
};
diff --git a/packages/shared/components/room-icon/sub-components/EditIcon.tsx b/packages/shared/components/room-icon/sub-components/EditIcon.tsx
new file mode 100644
index 0000000000..a8aaffe05b
--- /dev/null
+++ b/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(false);
+
+ const onToggleOpenEditLogo = () => setOpenLogoEdit(!openEditLogo);
+ return (
+
+
+ setOpenLogoEdit(false)}
+ withBackdrop={false}
+ isDefaultMode={false}
+ >
+ {model?.map((option, i) => {
+ const optionOnClickAction = () => {
+ setOpenLogoEdit(false);
+ option.onClick();
+ };
+ return (
+
+ );
+ })}
+
+
+ );
+};
+
+export default EditIcon;