IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client: moved new logic from ItemIcon to RoomIcon

Browse Source
This commit is contained in:
Dmitry Sychugov 2024-09-02 20:01:54 +05:00
parent e8fb4f81b2
commit 7d70e4892a
7 changed files with 174 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
packages/client/src/components/ItemIcon.js
View File

@ -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 }) => {
return {
isPrivacy: treeFoldersStore.isPrivacyFolder,
setRoomLogoCoverDialogVisible: dialogsStore.setRoomLogoCoverDialogVisible,
};
export default inject(({ treeFoldersStore }) => {
return { isPrivacy: treeFoldersStore.isPrivacyFolder };
})(observer(ItemIcon));

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

@ -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,
};
},
)(

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

@ -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>

56
packages/shared/components/room-icon/RoomIcon.styled.ts
View File

@ -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 };

2
packages/shared/components/room-icon/RoomIcon.types.ts
View File

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

17
packages/shared/components/room-icon/index.tsx
View File

@ -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>
);
};

75
packages/shared/components/room-icon/sub-components/EditIcon.tsx Normal file
View File

@ -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;