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

overall component structure rebuild + some fixes

Browse Source
This commit is contained in:
mushka 2022-07-25 03:31:43 +03:00
parent 80db7bdb0f
commit fc6db0e215
12 changed files with 239 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js
View File

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

6
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/ChooseRoomType/RoomTypeList.js → products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ChooseRoomType/index.js
View File

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

6
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/RoomTypeDropdown.js → products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/RoomTypeDropdown/index.js
View File

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

150
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/ThirpartyComboBox.js Normal file
View File

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

60
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/index.js Normal file
View File

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

0
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/TagList.js → products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/TagList.js
View File

11
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js → products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js
View File

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

39
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js → products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js
View File

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

179
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StorageLocation.js
View File

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

0
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/RoomType.js → products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/RoomType.js
View File

8
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js → products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/StyledDropdown.js
View File

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

0
products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledParam.js → products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/StyledParam.js
View File