Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
Merge branch 'main' into chore/gql-schema-update
Browse files Browse the repository at this point in the history
  • Loading branch information
rot1024 committed Nov 5, 2021
2 parents af848fc + afa4ba3 commit b47f549
Show file tree
Hide file tree
Showing 7 changed files with 242 additions and 54 deletions.
2 changes: 2 additions & 0 deletions src/components/atoms/Slide/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ const Inner = styled.div<{ pos?: number }>`
const Page = styled.div`
flex: 0 0 100%;
width: 100%;
display: flex;
justify-content: space-between;
`;

export default Slide;
77 changes: 46 additions & 31 deletions src/components/molecules/Visualizer/Infobox/Frame/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const InfoBox: React.FC<Props> = ({
const isSmallWindow = useMedia("(max-width: 624px)");
const ref = useRef<HTMLDivElement>(null);
const ref2 = useRef<HTMLDivElement>(null);
const [open, setOpen] = useState(!isSmallWindow);
const [open, setOpen] = useState(true);
useClickAway(ref, () => onClickAway?.());

const handleOpen = useCallback(() => {
Expand All @@ -67,16 +67,18 @@ const InfoBox: React.FC<Props> = ({
setOpen(false);
}, []);

useEffect(() => {
if (isSmallWindow) setOpen(false);
}, [infoboxKey, isSmallWindow]);

useEffect(() => {
if (!ref2.current) return;
ref2.current.scrollLeft = 0;
ref2.current.scrollTop = 0;
}, [infoboxKey]);

useEffect(() => {
if (!visible) {
setOpen(true);
}
}, [visible]);

const wrapperStyles = useMemo(
() => css`
background-color: ${styles?.bgcolor || publishedTheme?.background};
Expand All @@ -89,27 +91,27 @@ const InfoBox: React.FC<Props> = ({
<StyledFloatedPanel
className={className}
visible={visible}
open={open}
styles={wrapperStyles}
onClick={onClick}
onEnter={onEnter}
onEntered={onEntered}
onExit={onExit}
onExited={onExited}
size={size}
floated>
<Wrapper ref={ref} size={size} open={open}>
<TitleFlex
flex="0 0 auto"
justify={open ? "flex-start" : "space-evenly"}
direction="column"
onClick={handleOpen}>
{isSmallWindow && !noContent && (
<StyledIcon color={publishedTheme.mainIcon} icon="arrowUp" size={24} open={open} />
<Wrapper ref={ref} open={open}>
<TitleFlex flex="0 0 auto" direction="column" onClick={handleOpen}>
{!noContent && (
<IconWrapper align="center" justify="space-around">
<StyledIcon color={publishedTheme.mainIcon} icon="arrowLeft" size={16} open={open} />
<StyledIcon color={publishedTheme.mainIcon} icon="infobox" size={24} open={open} />
</IconWrapper>
)}
<Text size="m" weight="bold" customColor>
<TitleText>{title || " "}</TitleText>
</Text>
{!isSmallWindow && (
<StyledIcon color={publishedTheme.mainIcon} icon="arrowDown" size={24} open={open} />
{!open ? null : (
<Text size="m" weight="bold" customColor>
<TitleText>{title || " "}</TitleText>
</Text>
)}
</TitleFlex>
<CloseBtn
Expand All @@ -129,41 +131,53 @@ const InfoBox: React.FC<Props> = ({

const StyledFloatedPanel = styled(FloatedPanel)<{
floated?: boolean;
open?: boolean;
size?: "small" | "large";
}>`
position: ${props => (props.floated ? "absolute" : "static")};
top: 50px;
right: 10px;
max-height: calc(100% - 85px);
top: 15%;
right: ${({ open }) => (open ? "30px" : "-6px")};
max-height: 70%;
width: ${({ size, open }) => (open ? (size == "large" ? "624px" : "346px") : "80px")};
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: stretch;
z-index: ${props => props.theme.zIndexes.propertyFieldPopup};
z-index: ${({ theme }) => theme.zIndexes.propertyFieldPopup};
transition: all 0.6s;
@media (max-width: 624px) {
left: 16px;
right: 16px;
top: auto;
bottom: 80px;
right: ${({ open }) => (open ? "16px" : "-8px")};
top: 20vh;
bottom: auto;
width: ${({ open }) => (open ? "calc(100% - 33px)" : "70px")};
${({ open }) => !open && "height: 40px;"}
max-height: 60vh;
}
`;

const Wrapper = styled.div<{ size?: "small" | "large"; open?: boolean }>`
const Wrapper = styled.div<{ open?: boolean }>`
overflow: hidden;
width: ${props => (props.size == "large" ? "624px" : "346px")};
max-height: calc(100% - 85px);
display: flex;
flex-direction: column;
min-height: ${({ open }) => (open ? "280px" : "100%")};
@media (max-width: 624px) {
transition: all 0.4s;
width: auto;
}
`;

const TitleFlex = styled(Flex)`
margin: ${metricsSizes["m"]}px auto;
const IconWrapper = styled(Flex)`
width: 52px;
@media (max-width: 624px) {
width: 42px;
}
`;

const TitleFlex = styled(Flex)<{ open?: boolean }>`
margin: ${({ open }) => (!open ? metricsSizes["s"] : metricsSizes["m"]) + "px auto"};
text-align: center;
box-sizing: border-box;
cursor: pointer;
Expand Down Expand Up @@ -194,6 +208,7 @@ const Content = styled.div<{ open?: boolean }>`
flex: auto;
font-size: ${fonts.sizes.s}px;
padding: 10px 0 20px 0;
transition: all 0.2s linear;
-ms-overflow-style: none;
scrollbar-width: none;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,8 @@ const Menu = styled.div<{
border: 1px solid ${props => props.theme.main.text};
top: ${({ area, align }) =>
area === "top" || (area === "middle" && align === "start") ? "60px" : null};
bottom: ${({ area, align }) => (area !== "top" && align !== "start" ? "60px" : null)};
bottom: ${({ area, align }) =>
(area === "middle" && align !== "start") || area !== "top" ? "60px" : null};
}
`;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ type Props = {
pluginProperty?: { [key: string]: any };
pluginBaseUrl?: string;
layoutConstraint?: { [w in string]: WidgetLayoutConstraint };
wrapContent?: boolean;
};

export default function WidgetAreaComponent({
Expand All @@ -33,6 +34,7 @@ export default function WidgetAreaComponent({
isEditable,
isBuilt,
layoutConstraint,
wrapContent,
}: Props) {
const theme = useTheme();
const widgetLayout = useMemo(
Expand All @@ -52,6 +54,7 @@ export default function WidgetAreaComponent({
// reverse={area !== "middle" && section === "right"}
end={section === "right" || area === "bottom"}
align={(area === "middle" || section === "center") && widgets?.length ? align : undefined}
style={{ flexWrap: wrapContent ? "wrap" : undefined }}
editorStyle={{
background: area === "middle" ? theme.alignSystem.blueBg : theme.alignSystem.orangeBg,
border:
Expand Down
135 changes: 135 additions & 0 deletions src/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
import React, { PropsWithChildren, useState, useMemo } from "react";
import { GridSection } from "react-align";

import Icon from "@reearth/components/atoms/Icon";
import Slide from "@reearth/components/atoms/Slide";
import { styled, usePublishTheme, PublishTheme } from "@reearth/theme";

import Area from "./Area";
import type { WidgetZone, WidgetLayoutConstraint } from "./hooks";

export type Props = {
zone?: WidgetZone;
zoneName: "inner" | "outer";
layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
isEditable?: boolean;
isBuilt?: boolean;
sceneProperty?: any;
pluginProperty?: { [key: string]: any };
pluginBaseUrl?: string;
};

const sections = ["left", "center", "right"] as const;
const areas = ["top", "middle", "bottom"] as const;

export default function MobileZone({
zone,
zoneName,
layoutConstraint,
sceneProperty,
pluginProperty,
pluginBaseUrl,
isEditable,
isBuilt,
children,
}: PropsWithChildren<Props>) {
const filteredSections = useMemo(() => {
return sections.filter(s => !!zone?.[s]);
}, [zone]);

const [pos, setPos] = useState(filteredSections.indexOf("center"));
const publishedTheme = usePublishTheme(sceneProperty.theme);

return (
<>
<StyledSlide pos={pos} filteredSections={filteredSections.length > 1}>
{filteredSections.map(s => (
<GridSection key={s} stretch>
{areas.map(a =>
s === "center" && children && a === "middle" ? (
<div key={a} style={{ display: "flex", flex: "1 0 auto" }}>
{children}
</div>
) : (
<Area
key={a}
zone={zoneName}
section={s}
area={a}
widgets={zone?.[s]?.[a]?.widgets}
align={zone?.[s]?.[a]?.align ?? "start"}
layoutConstraint={layoutConstraint}
sceneProperty={sceneProperty}
pluginProperty={pluginProperty}
pluginBaseUrl={pluginBaseUrl}
isEditable={isEditable}
isBuilt={isBuilt}
wrapContent
/>
),
)}
</GridSection>
))}
</StyledSlide>
{filteredSections.length > 1 ? (
<Controls publishedTheme={publishedTheme}>
<Control leftIcon onClick={() => pos > 0 && setPos(pos - 1)}>
{pos > 0 && <Icon icon="arrowLongLeft" size={24} color={publishedTheme.mainIcon} />}
</Control>
<InnerControlWrapper>
{filteredSections.map((_, i) => (
<Control key={i} onClick={() => setPos(i)}>
<PageIcon current={pos === i} publishedTheme={publishedTheme} />
</Control>
))}
</InnerControlWrapper>
<Control rightIcon onClick={() => pos < filteredSections.length - 1 && setPos(pos + 1)}>
{pos < filteredSections.length - 1 && (
<Icon icon="arrowLongRight" size={24} color={publishedTheme.mainIcon} />
)}
</Control>
</Controls>
) : null}
</>
);
}

const StyledSlide = styled(Slide)<{ filteredSections?: boolean }>`
height: calc(100% ${({ filteredSections }) => filteredSections && "- 32px"});
`;

const Controls = styled.div<{ publishedTheme: PublishTheme }>`
position: absolute;
bottom: 0;
height: 32px;
width: 100%;
background: ${({ publishedTheme }) => publishedTheme.background};
display: flex;
align-items: center;
justify-content: center;
`;

const InnerControlWrapper = styled.div`
display: flex;
`;

const Control = styled.div<{ leftIcon?: boolean; rightIcon?: boolean }>`
height: 100%;
flex: 1;
display: flex;
justify-content: ${({ leftIcon, rightIcon }) =>
leftIcon ? "start" : rightIcon ? "end" : undefined};
align-items: center;
cursor: pointer;
pointer-events: auto;
padding: 0 8px;
transition: all 0.2s ease-in-out 0.1s;
`;

const PageIcon = styled.div<{ current?: boolean; publishedTheme?: PublishTheme }>`
border: 1px solid ${({ publishedTheme }) => publishedTheme?.mainIcon};
width: 7px;
height: 7px;
border-radius: 50%;
background: ${({ current, publishedTheme }) => (current ? publishedTheme?.mainIcon : null)};
`;

0 comments on commit b47f549

Please sign in to comment.