overall component structure rebuild + some fixes
This commit is contained in:
parent
80db7bdb0f
commit
fc6db0e215
@ -5,8 +5,8 @@ import { withTranslation } from "react-i18next";
|
||||
|
||||
import ModalDialog from "@appserver/components/modal-dialog";
|
||||
|
||||
import SetRoomParams from "./views/CreateRoom/SetRoomParams";
|
||||
import RoomTypeList from "./views/ChooseRoomType/RoomTypeList";
|
||||
import SetRoomParams from "./sub-components/CreateRoom";
|
||||
import RoomTypeList from "./sub-components/ChooseRoomType";
|
||||
import Button from "@appserver/components/button";
|
||||
import { roomTypes } from "./data";
|
||||
import TagHandler from "./handlers/tagHandler";
|
||||
|
@ -2,7 +2,7 @@ import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { roomTypes } from "../../data";
|
||||
|
||||
import RoomType from "../../sub-components/RoomType";
|
||||
import RoomType from "../common/RoomType";
|
||||
|
||||
const StyledRoomTypeList = styled.div`
|
||||
width: 100%;
|
||||
@ -12,7 +12,7 @@ const StyledRoomTypeList = styled.div`
|
||||
gap: 16px;
|
||||
`;
|
||||
|
||||
const RoomTypeList = ({ t, setRoomType }) => {
|
||||
const ChooseRoomType = ({ t, setRoomType }) => {
|
||||
return (
|
||||
<StyledRoomTypeList>
|
||||
{roomTypes.map((room) => (
|
||||
@ -28,4 +28,4 @@ const RoomTypeList = ({ t, setRoomType }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default RoomTypeList;
|
||||
export default ChooseRoomType;
|
@ -1,12 +1,11 @@
|
||||
import React, { useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import { roomTypes } from "../../data";
|
||||
import RoomType from "../../sub-components/RoomType";
|
||||
import { roomTypes } from "../../../data";
|
||||
import RoomType from "../../common/RoomType";
|
||||
|
||||
const StyledRoomTypeDropdown = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
|
||||
.dropdown-content-wrapper {
|
||||
@ -16,6 +15,7 @@ const StyledRoomTypeDropdown = styled.div`
|
||||
${(props) => !props.isOpen && "display: none"};
|
||||
|
||||
.dropdown-content {
|
||||
margin-top: 4px;
|
||||
background: #ffffff;
|
||||
overflow: visible;
|
||||
z-index: 400;
|
@ -0,0 +1,150 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
import { ReactSVG } from "react-svg";
|
||||
|
||||
import { thirparties } from "../../../data";
|
||||
|
||||
import Text from "@appserver/components/text";
|
||||
import Button from "@appserver/components/button";
|
||||
import DropDownItem from "@appserver/components/drop-down-item";
|
||||
import {
|
||||
StyledDropDown,
|
||||
StyledDropDownWrapper,
|
||||
} from "../../common/StyledDropdown";
|
||||
|
||||
const StyledStorageLocation = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.set_room_params-thirdparty {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
&-combobox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 5px 7px;
|
||||
background: #ffffff;
|
||||
border-radius: 3px;
|
||||
max-height: 32px;
|
||||
|
||||
border: ${(props) => `1px solid ${props.isOpen ? "#2DA7DB" : "#d0d5da"}`};
|
||||
&:hover {
|
||||
border: ${(props) =>
|
||||
`1px solid ${props.isOpen ? "#2DA7DB" : "#a3a9ae"}`};
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
color: ${(props) => (props.isGrayLabel ? "#a3a9ae" : "#333333")};
|
||||
}
|
||||
|
||||
&-expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 6.35px;
|
||||
svg {
|
||||
transform: ${(props) =>
|
||||
props.isOpen ? "rotate(180deg)" : "rotate(0)"};
|
||||
width: 6.35px;
|
||||
height: auto;
|
||||
path {
|
||||
fill: #a3a9ae;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-checkbox {
|
||||
margin-top: 8px;
|
||||
.checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.checkbox-text {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ThirpartyComboBox = ({
|
||||
t,
|
||||
roomParams,
|
||||
setRoomParams,
|
||||
setIsScrollLocked,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const toggleIsOpen = () => {
|
||||
if (isOpen) setIsScrollLocked(false);
|
||||
else setIsScrollLocked(true);
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
|
||||
const [isGrayLabel, setIsGrayLabel] = useState(true);
|
||||
|
||||
const setStorageLocaiton = (thirparty) => {
|
||||
setIsGrayLabel(false);
|
||||
setRoomParams({ ...roomParams, storageLocation: thirparty });
|
||||
toggleIsOpen();
|
||||
setIsScrollLocked(false);
|
||||
};
|
||||
|
||||
const dropdownRef = useRef(null);
|
||||
return (
|
||||
<StyledStorageLocation isGrayLabel={isGrayLabel} isOpen={isOpen}>
|
||||
<div className="set_room_params-thirdparty">
|
||||
<div
|
||||
className="set_room_params-thirdparty-combobox"
|
||||
onClick={toggleIsOpen}
|
||||
>
|
||||
<Text className="set_room_params-thirdparty-combobox-text" noSelect>
|
||||
{roomParams.storageLocation?.title || "Select"}
|
||||
</Text>
|
||||
<ReactSVG
|
||||
className="set_room_params-thirdparty-combobox-expander"
|
||||
src={"/static/images/expander-down.react.svg"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="set_room_params-thirdparty-connect"
|
||||
size="small"
|
||||
label={t("Common:Connect")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<StyledDropDownWrapper
|
||||
className="dropdown-content-wrapper"
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<StyledDropDown
|
||||
className="dropdown-content"
|
||||
open={isOpen}
|
||||
forwardedRef={dropdownRef}
|
||||
clickOutsideAction={toggleIsOpen}
|
||||
maxHeight={158}
|
||||
>
|
||||
{thirparties.map((thirdparty) => (
|
||||
<DropDownItem
|
||||
className="dropdown-item"
|
||||
label={thirdparty.title}
|
||||
key={thirdparty.id}
|
||||
height={32}
|
||||
heightTablet={32}
|
||||
onClick={() => setStorageLocaiton(thirdparty)}
|
||||
/>
|
||||
))}
|
||||
</StyledDropDown>
|
||||
</StyledDropDownWrapper>
|
||||
</StyledStorageLocation>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThirpartyComboBox;
|
@ -0,0 +1,60 @@
|
||||
import React from "react";
|
||||
|
||||
import Text from "@appserver/components/text";
|
||||
|
||||
import Checkbox from "@appserver/components/checkbox";
|
||||
import { StyledParam } from "../../common/StyledParam";
|
||||
import HelpButton from "@appserver/components/help-button";
|
||||
import ThirpartyComboBox from "./ThirpartyComboBox";
|
||||
|
||||
const StorageLocation = ({
|
||||
t,
|
||||
roomParams,
|
||||
setRoomParams,
|
||||
setIsScrollLocked,
|
||||
}) => {
|
||||
const setRememberStorageLocation = () =>
|
||||
setRoomParams({
|
||||
...roomParams,
|
||||
rememberStorageLocation: !roomParams.rememberStorageLocation,
|
||||
});
|
||||
|
||||
return (
|
||||
<StyledParam storageLocation>
|
||||
<div className="set_room_params-info">
|
||||
<div className="set_room_params-info-title">
|
||||
<Text className="set_room_params-info-title-text">
|
||||
{t("StorageLocationTitle")}
|
||||
</Text>
|
||||
<HelpButton
|
||||
displayType="auto"
|
||||
className="set_room_params-info-title-help"
|
||||
iconName="/static/images/info.react.svg"
|
||||
offsetRight={0}
|
||||
tooltipContent={t("StorageLocationDescription")}
|
||||
size={12}
|
||||
/>
|
||||
</div>
|
||||
<div className="set_room_params-info-description">
|
||||
{t("StorageLocationDescription")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ThirpartyComboBox
|
||||
t={t}
|
||||
roomParams={roomParams}
|
||||
setRoomParams={setRoomParams}
|
||||
setIsScrollLocked={setIsScrollLocked}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
className="set_room_params-thirdparty-checkbox"
|
||||
label={t("Remember this choice for new rooms")}
|
||||
isChecked={roomParams.rememberStorageLocation}
|
||||
onChange={setRememberStorageLocation}
|
||||
/>
|
||||
</StyledParam>
|
||||
);
|
||||
};
|
||||
|
||||
export default StorageLocation;
|
@ -3,9 +3,12 @@ import styled from "styled-components";
|
||||
|
||||
import Label from "@appserver/components/label";
|
||||
import TextInput from "@appserver/components/text-input";
|
||||
import TagList from "../views/CreateRoom/TagList";
|
||||
import TagList from "./TagList";
|
||||
import DropDownItem from "@appserver/components/drop-down-item";
|
||||
import { StyledDropDown, StyledDropdownWrapper } from "./StyledDropdown";
|
||||
import {
|
||||
StyledDropDown,
|
||||
StyledDropDownWrapper,
|
||||
} from "../../common/StyledDropdown";
|
||||
|
||||
const StyledTagInput = styled.div`
|
||||
.set_room_params-tag_input {
|
||||
@ -128,7 +131,7 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => {
|
||||
tabIndex={2}
|
||||
/>
|
||||
|
||||
<StyledDropdownWrapper
|
||||
<StyledDropDownWrapper
|
||||
className="dropdown-content-wrapper"
|
||||
ref={dropdownRef}
|
||||
onMouseDown={preventDefault}
|
||||
@ -144,7 +147,7 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => {
|
||||
>
|
||||
{dropdownItems}
|
||||
</StyledDropDown>
|
||||
</StyledDropdownWrapper>
|
||||
</StyledDropDownWrapper>
|
||||
<TagList t={t} tagHandler={tagHandler} />
|
||||
</StyledTagInput>
|
||||
);
|
@ -1,7 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import RoomTypeDropdown from "./RoomTypeDropdown";
|
||||
import StorageLocation from "../../sub-components/StorageLocation";
|
||||
import StorageLocation from "./StorageLocation";
|
||||
|
||||
import TextInput from "@appserver/components/text-input";
|
||||
import Label from "@appserver/components/label";
|
||||
@ -9,8 +9,8 @@ import ToggleButton from "@appserver/components/toggle-button";
|
||||
import HelpButton from "@appserver/components/help-button";
|
||||
import Text from "@appserver/components/text";
|
||||
import AvatarEditor from "@appserver/components/avatar-editor";
|
||||
import TagInput from "../../sub-components/TagInput";
|
||||
import { StyledParam } from "../../sub-components/StyledParam";
|
||||
import TagInput from "./TagInput";
|
||||
import { StyledParam } from "../common/StyledParam";
|
||||
|
||||
const StyledSetRoomParams = styled.div`
|
||||
display: flex;
|
||||
@ -105,33 +105,12 @@ const SetRoomParams = ({
|
||||
/>
|
||||
</StyledParam>
|
||||
|
||||
<StyledParam storageLocation>
|
||||
<div className="set_room_params-info">
|
||||
<div className="set_room_params-info-title">
|
||||
<Text className="set_room_params-info-title-text">
|
||||
{t("StorageLocationTitle")}
|
||||
</Text>
|
||||
<HelpButton
|
||||
displayType="auto"
|
||||
className="set_room_params-info-title-help"
|
||||
iconName="/static/images/info.react.svg"
|
||||
offsetRight={0}
|
||||
tooltipContent={t("StorageLocationDescription")}
|
||||
size={12}
|
||||
/>
|
||||
</div>
|
||||
<div className="set_room_params-info-description">
|
||||
{t("StorageLocationDescription")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StorageLocation
|
||||
t={t}
|
||||
roomParams={roomParams}
|
||||
setRoomParams={setRoomParams}
|
||||
setIsScrollLocked={setIsScrollLocked}
|
||||
/>
|
||||
</StyledParam>
|
||||
<StorageLocation
|
||||
t={t}
|
||||
roomParams={roomParams}
|
||||
setRoomParams={setRoomParams}
|
||||
setIsScrollLocked={setIsScrollLocked}
|
||||
/>
|
||||
|
||||
{/* <StyledIconEditorWrapper>
|
||||
<AvatarEditor useModalDialog={false}></AvatarEditor>
|
@ -1,179 +0,0 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
import { ReactSVG } from "react-svg";
|
||||
|
||||
import Button from "@appserver/components/button";
|
||||
import { thirparties } from "../data";
|
||||
import DropDownItem from "@appserver/components/drop-down-item";
|
||||
import Text from "@appserver/components/text";
|
||||
import { StyledDropDown, StyledDropdownWrapper } from "./StyledDropdown";
|
||||
import Checkbox from "@appserver/components/checkbox";
|
||||
|
||||
const StyledStorageLocation = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.set_room_params-thirdparty {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
&-combobox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 5px 7px;
|
||||
background: #ffffff;
|
||||
border-radius: 3px;
|
||||
max-height: 32px;
|
||||
|
||||
border: ${(props) => `1px solid ${props.isOpen ? "#2DA7DB" : "#d0d5da"}`};
|
||||
&:hover {
|
||||
border: ${(props) =>
|
||||
`1px solid ${props.isOpen ? "#2DA7DB" : "#a3a9ae"}`};
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
color: ${(props) => (props.isGrayLabel ? "#a3a9ae" : "#333333")};
|
||||
}
|
||||
|
||||
&-expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 6.35px;
|
||||
svg {
|
||||
transform: ${(props) =>
|
||||
props.isOpen ? "rotate(180deg)" : "rotate(0)"};
|
||||
width: 6.35px;
|
||||
height: auto;
|
||||
path {
|
||||
fill: #a3a9ae;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-checkbox {
|
||||
margin-top: 8px;
|
||||
.checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.checkbox-text {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StorageLocation = ({
|
||||
t,
|
||||
roomParams,
|
||||
setRoomParams,
|
||||
setIsScrollLocked,
|
||||
}) => {
|
||||
const [isGrayLabel, setIsGrayLabel] = useState(true);
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const toggleIsOpen = () => {
|
||||
if (isOpen) setIsScrollLocked(false);
|
||||
else setIsScrollLocked(true);
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
|
||||
const setStorageLocaiton = (thirparty) => {
|
||||
setIsGrayLabel(false);
|
||||
setRoomParams({ ...roomParams, storageLocation: thirparty });
|
||||
toggleIsOpen();
|
||||
setIsScrollLocked(false);
|
||||
};
|
||||
|
||||
const setRememberStorageLocation = () =>
|
||||
setRoomParams({
|
||||
...roomParams,
|
||||
rememberStorageLocation: !roomParams.rememberStorageLocation,
|
||||
});
|
||||
|
||||
const dropdownRef = useRef(null);
|
||||
return (
|
||||
<StyledParam storageLocation>
|
||||
<div className="set_room_params-info">
|
||||
<div className="set_room_params-info-title">
|
||||
<Text className="set_room_params-info-title-text">
|
||||
{t("StorageLocationTitle")}
|
||||
</Text>
|
||||
<HelpButton
|
||||
displayType="auto"
|
||||
className="set_room_params-info-title-help"
|
||||
iconName="/static/images/info.react.svg"
|
||||
offsetRight={0}
|
||||
tooltipContent={t("StorageLocationDescription")}
|
||||
size={12}
|
||||
/>
|
||||
</div>
|
||||
<div className="set_room_params-info-description">
|
||||
{t("StorageLocationDescription")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StyledStorageLocation isGrayLabel={isGrayLabel} isOpen={isOpen}>
|
||||
<div className="set_room_params-thirdparty">
|
||||
<div
|
||||
className="set_room_params-thirdparty-combobox"
|
||||
onClick={toggleIsOpen}
|
||||
>
|
||||
<Text className="set_room_params-thirdparty-combobox-text" noSelect>
|
||||
{roomParams.storageLocation?.title || "Select"}
|
||||
</Text>
|
||||
<ReactSVG
|
||||
className="set_room_params-thirdparty-combobox-expander"
|
||||
src={"/static/images/expander-down.react.svg"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="set_room_params-thirdparty-connect"
|
||||
size="small"
|
||||
label={t("Common:Connect")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<StyledDropdownWrapper
|
||||
className="dropdown-content-wrapper"
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<StyledDropDown
|
||||
className="dropdown-content"
|
||||
open={isOpen}
|
||||
forwardedRef={dropdownRef}
|
||||
clickOutsideAction={toggleIsOpen}
|
||||
maxHeight={158}
|
||||
>
|
||||
{thirparties.map((thirdparty) => (
|
||||
<DropDownItem
|
||||
className="dropdown-item"
|
||||
label={thirdparty.title}
|
||||
key={thirdparty.id}
|
||||
onClick={() => setStorageLocaiton(thirdparty)}
|
||||
/>
|
||||
))}
|
||||
</StyledDropDown>
|
||||
</StyledDropdownWrapper>
|
||||
|
||||
<Checkbox
|
||||
className="set_room_params-thirdparty-checkbox"
|
||||
label={t("Remember this choice for new rooms")}
|
||||
isChecked={roomParams.rememberStorageLocation}
|
||||
onChange={setRememberStorageLocation}
|
||||
/>
|
||||
</StyledStorageLocation>
|
||||
</StyledParam>
|
||||
);
|
||||
};
|
||||
|
||||
export default StorageLocation;
|
@ -1,8 +1,10 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
import { smallTablet } from "@appserver/components/utils/device";
|
||||
|
||||
import DropDown from "@appserver/components/drop-down";
|
||||
|
||||
const StyledDropdownWrapper = styled.div`
|
||||
const StyledDropDownWrapper = styled.div`
|
||||
width: 100%;
|
||||
position: relative;
|
||||
`;
|
||||
@ -18,7 +20,7 @@ const StyledDropDown = styled(DropDown)`
|
||||
|
||||
.scroll-body {
|
||||
/* height: 158px !important; */
|
||||
margin-bottom: -21px !important;
|
||||
//margin-bottom: -21px !important;
|
||||
}
|
||||
|
||||
width: 446px;
|
||||
@ -57,4 +59,4 @@ const StyledDropDown = styled(DropDown)`
|
||||
}
|
||||
`;
|
||||
|
||||
export { StyledDropdownWrapper, StyledDropDown };
|
||||
export { StyledDropDownWrapper, StyledDropDown };
|
Loading…
Reference in New Issue
Block a user