Client: ItemIcon: extended the component for room logo cover
This commit is contained in:
parent
969f634a5e
commit
20b8743c47
@ -24,12 +24,20 @@
|
||||
// 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, { useState } from "react";
|
||||
import SecuritySvgUrl from "PUBLIC_DIR/images/security.svg?url";
|
||||
import { inject, observer } from "mobx-react";
|
||||
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) =>
|
||||
@ -60,6 +68,25 @@ const IconWrapper = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const EditWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #eceef1; // add global color
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
|
||||
.open-edit-logo-icon {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
IconWrapper.defaultProps = { theme: Base };
|
||||
|
||||
const EncryptedFileIcon = styled.div`
|
||||
@ -81,9 +108,20 @@ const ItemIcon = ({
|
||||
color,
|
||||
isArchive,
|
||||
badgeUrl,
|
||||
size,
|
||||
withEditing,
|
||||
}) => {
|
||||
const isLoadedRoomIcon = !!logo?.medium;
|
||||
const showDefaultRoomIcon = !isLoadedRoomIcon && isRoom;
|
||||
const [editLogoOpen, setEditLogoOpen] = useState(false);
|
||||
|
||||
const toggleEditLogo = () => {
|
||||
setEditLogoOpen(!editLogoOpen);
|
||||
};
|
||||
|
||||
const closeEditLogo = () => {
|
||||
setEditLogoOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -91,12 +129,42 @@ const ItemIcon = ({
|
||||
<RoomIcon
|
||||
color={color}
|
||||
title={title}
|
||||
size={size}
|
||||
isArchive={isArchive}
|
||||
showDefault={showDefaultRoomIcon}
|
||||
imgClassName="react-svg-icon"
|
||||
imgSrc={isRoom ? logo?.medium : icon}
|
||||
badgeUrl={badgeUrl ? badgeUrl : ""}
|
||||
/>
|
||||
{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={() => shareTwitter(activeLink[0])}
|
||||
/>
|
||||
</DropDown>
|
||||
</EditWrapper>
|
||||
)}
|
||||
</IconWrapper>
|
||||
{isPrivacy && fileExst && <EncryptedFileIcon isEdit={false} />}
|
||||
</>
|
||||
|
Loading…
Reference in New Issue
Block a user