Client: RoomLogoCoverDialog: variables are now dependent on the store, added onClose
This commit is contained in:
parent
939de36c72
commit
1116f6a5ed
@ -25,6 +25,7 @@
|
|||||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import {
|
import {
|
||||||
@ -57,13 +58,17 @@ const StyledModalDialog = styled(ModalDialog)`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const RoomLogoCoverDialog = () => {
|
const RoomLogoCoverDialog = ({ setRoomLogoCoverDialogVisible }) => {
|
||||||
const { t } = useTranslation(["Common"]);
|
const { t } = useTranslation(["Common"]);
|
||||||
|
|
||||||
|
const onCloseRoomLogo = () => {
|
||||||
|
setRoomLogoCoverDialogVisible(false);
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<StyledModalDialog
|
<StyledModalDialog
|
||||||
visible
|
visible
|
||||||
autoMaxHeight
|
autoMaxHeight
|
||||||
// onClose={onClose}
|
onClose={onCloseRoomLogo}
|
||||||
displayType={isMobile() ? ModalDialogType.aside : ModalDialogType.modal}
|
displayType={isMobile() ? ModalDialogType.aside : ModalDialogType.modal}
|
||||||
withBodyScroll
|
withBodyScroll
|
||||||
>
|
>
|
||||||
@ -84,7 +89,7 @@ const RoomLogoCoverDialog = () => {
|
|||||||
<Button
|
<Button
|
||||||
scale
|
scale
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
// onClick={onClose}
|
onClick={onCloseRoomLogo}
|
||||||
size={ButtonSize.normal}
|
size={ButtonSize.normal}
|
||||||
label={t("Common:CancelButton")}
|
label={t("Common:CancelButton")}
|
||||||
/>
|
/>
|
||||||
@ -93,4 +98,8 @@ const RoomLogoCoverDialog = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default RoomLogoCoverDialog;
|
export default inject<TStore>(({ dialogsStore }) => {
|
||||||
|
return {
|
||||||
|
setRoomLogoCoverDialogVisible: dialogsStore.setRoomLogoCoverDialogVisible,
|
||||||
|
};
|
||||||
|
})(observer(RoomLogoCoverDialog));
|
||||||
|
@ -84,6 +84,7 @@ export const CustomLogo = ({
|
|||||||
icon,
|
icon,
|
||||||
withoutIcon,
|
withoutIcon,
|
||||||
isBaseTheme,
|
isBaseTheme,
|
||||||
|
roomTitle,
|
||||||
}: CustomLogoProps) => {
|
}: CustomLogoProps) => {
|
||||||
return (
|
return (
|
||||||
<StyledLogo color={color} isBase={isBaseTheme}>
|
<StyledLogo color={color} isBase={isBaseTheme}>
|
||||||
@ -94,7 +95,7 @@ export const CustomLogo = ({
|
|||||||
color="#fff"
|
color="#fff"
|
||||||
fontWeight={700}
|
fontWeight={700}
|
||||||
>
|
>
|
||||||
Aa
|
{roomTitle}
|
||||||
</Text>
|
</Text>
|
||||||
) : (
|
) : (
|
||||||
<ReactSVG className="custom-logo-cover" src={icon} alt="icon" />
|
<ReactSVG className="custom-logo-cover" src={icon} alt="icon" />
|
||||||
|
@ -31,6 +31,8 @@ import styled from "styled-components";
|
|||||||
import { mobile, tablet, isMobile } from "@docspace/shared/utils";
|
import { mobile, tablet, isMobile } from "@docspace/shared/utils";
|
||||||
import { Scrollbar } from "@docspace/shared/components/scrollbar";
|
import { Scrollbar } from "@docspace/shared/components/scrollbar";
|
||||||
|
|
||||||
|
import { getRoomTitle } from "@docspace/shared/components/room-icon/RoomIcon.utils";
|
||||||
|
|
||||||
import { CustomLogo } from "./CustomLogo";
|
import { CustomLogo } from "./CustomLogo";
|
||||||
import { SelectColor } from "./SelectColor/SelectColor";
|
import { SelectColor } from "./SelectColor/SelectColor";
|
||||||
import { SelectIcon } from "./SelectIcon";
|
import { SelectIcon } from "./SelectIcon";
|
||||||
@ -94,11 +96,15 @@ const RoomLogoCoverContainer = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const RoomLogoCover = ({ isBaseTheme }: RoomLogoCoverProps) => {
|
const RoomLogoCover = ({ isBaseTheme, logo, title }: RoomLogoCoverProps) => {
|
||||||
const { t } = useTranslation(["Common", "CreateEditRoomDialog"]);
|
const { t } = useTranslation(["Common", "CreateEditRoomDialog"]);
|
||||||
|
|
||||||
const [color, setColor] = useState<string>(logoColors[3]); // set room icon default color
|
const roomTitle = React.useMemo(() => getRoomTitle(title ?? ""), [title]);
|
||||||
const [icon, setIcon] = useState<string>("Aa");
|
|
||||||
|
const roomColor = logo.color ? `#${logo.color}` : logoColors[0];
|
||||||
|
|
||||||
|
const [color, setColor] = useState<string>(roomColor);
|
||||||
|
const [icon, setIcon] = useState<string>(roomTitle);
|
||||||
const [withoutIcon, setWithoutIcon] = useState<boolean>(true);
|
const [withoutIcon, setWithoutIcon] = useState<boolean>(true);
|
||||||
|
|
||||||
const scrollRef = useRef(null);
|
const scrollRef = useRef(null);
|
||||||
@ -132,6 +138,7 @@ const RoomLogoCover = ({ isBaseTheme }: RoomLogoCoverProps) => {
|
|||||||
icon={icon}
|
icon={icon}
|
||||||
color={color}
|
color={color}
|
||||||
withoutIcon={withoutIcon}
|
withoutIcon={withoutIcon}
|
||||||
|
roomTitle={roomTitle}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="select-container">
|
<div className="select-container">
|
||||||
@ -147,10 +154,13 @@ const RoomLogoCover = ({ isBaseTheme }: RoomLogoCoverProps) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default inject<TStore>(({ settingsStore }) => {
|
export default inject<TStore>(({ settingsStore, filesStore }) => {
|
||||||
const { theme } = settingsStore;
|
const { theme } = settingsStore;
|
||||||
|
const { bufferSelection } = filesStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
isBaseTheme: theme?.isBase,
|
isBaseTheme: theme?.isBase,
|
||||||
|
logo: bufferSelection?.logo,
|
||||||
|
title: bufferSelection?.title,
|
||||||
};
|
};
|
||||||
})(observer(RoomLogoCover));
|
})(observer(RoomLogoCover));
|
||||||
|
Loading…
Reference in New Issue
Block a user