feat: Infobox padding (#158)

* Add infobox padding * provide padding to info box and text block * resolve notes * move padding to content component * zero if undefined * fix padding declaration * Update src/components/molecules/Visualizer/Infobox/Frame/index.tsx Co-authored-by: rot1024 <aayhrot@gmail.com> Co-authored-by: basel.issmail <basel.issmail@gmail.com> Co-authored-by: rot1024 <aayhrot@gmail.com>
reearth · Jan 21, 2022 · 90084f7 · 90084f7
1 parent 4584027
commit 90084f7
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ __screenshots__
 /cypress/screenshots
 /.env*
 /reearth-config.json
+.idea/*
diff --git a/src/components/molecules/Visualizer/Block/Text/index.tsx b/src/components/molecules/Visualizer/Block/Text/index.tsx
@@ -16,6 +16,10 @@ export type Props = BlockProps<Property>;
 export type Property = {
   default?: {
     text?: string;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
     title?: string;
     markdown?: boolean;
     typography?: Typography;
@@ -32,8 +36,16 @@ const TextBlock: React.FC<Props> = ({
 }) => {
   const intl = useIntl();
   const theme = useTheme();
-  const { text, title, markdown, typography } =
-    (block?.property as Property | undefined)?.default ?? {};
+  const {
+    text,
+    title,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    markdown,
+    typography,
+  } = (block?.property as Property | undefined)?.default ?? {};
   const { bgcolor: bg } = infoboxProperty?.default ?? {};
 
   const ref = useRef<HTMLTextAreaElement>(null);
@@ -94,6 +106,10 @@ const TextBlock: React.FC<Props> = ({
 
   return (
     <Wrapper
+      paddingTop={paddingTop}
+      paddingBottom={paddingBottom}
+      paddingLeft={paddingLeft}
+      paddingRight={paddingRight}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onClick={handleClick}
@@ -137,7 +153,17 @@ const TextBlock: React.FC<Props> = ({
   );
 };
 
-const Wrapper = styled(Border)<{ isTemplate: boolean }>`
+const Wrapper = styled(Border)<{
+  isTemplate: boolean;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+}>`
+  padding-top: ${({ paddingTop }) => (paddingTop ? paddingTop + "px" : "0")};
+  padding-bottom: ${({ paddingBottom }) => (paddingBottom ? paddingBottom + "px" : "0")};
+  padding-left: ${({ paddingLeft }) => (paddingLeft ? paddingLeft + "px" : "0")};
+  padding-right: ${({ paddingRight }) => (paddingRight ? paddingRight + "px" : "0")};
   margin: 0 8px;
   border: 1px solid
     ${({ isSelected, isHovered, isTemplate, isEditable, theme }) =>

diff --git a/src/components/molecules/Visualizer/Infobox/Frame/index.tsx b/src/components/molecules/Visualizer/Infobox/Frame/index.tsx
@@ -15,6 +15,10 @@ import { SceneProperty } from "../../Engine";
 export type InfoboxStyles = {
   typography?: Typography;
   bgcolor?: string;
+  infoboxPaddingTop?: number;
+  infoboxPaddingBottom?: number;
+  infoboxPaddingLeft?: number;
+  infoboxPaddingRight?: number;
 };
 
 export type Props = {
@@ -86,7 +90,6 @@ const InfoBox: React.FC<Props> = ({
     `,
     [publishedTheme, styles?.bgcolor, styles?.typography],
   );
-
   return (
     <StyledFloatedPanel
       className={className}
@@ -121,7 +124,13 @@ const InfoBox: React.FC<Props> = ({
           onClick={handleClose}
           open={open}
         />
-        <Content ref={ref2} open={open}>
+        <Content
+          ref={ref2}
+          open={open}
+          paddingTop={styles?.infoboxPaddingTop}
+          paddingBottom={styles?.infoboxPaddingBottom}
+          paddingLeft={styles?.infoboxPaddingLeft}
+          paddingRight={styles?.infoboxPaddingRight}>
           {children}
         </Content>
       </Wrapper>
@@ -134,7 +143,6 @@ const StyledFloatedPanel = styled(FloatedPanel)<{
   open?: boolean;
   size?: "small" | "large";
 }>`
-  position: ${props => (props.floated ? "absolute" : "static")};
   top: 15%;
   right: ${({ open }) => (open ? "30px" : "-6px")};
   max-height: 70%;
@@ -202,7 +210,13 @@ const CloseBtn = styled(Icon)<{ open?: boolean; color: string }>`
   display: ${({ open }) => (open ? "block" : "none")};
 `;
 
-const Content = styled.div<{ open?: boolean }>`
+const Content = styled.div<{
+  open?: boolean;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+}>`
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   flex: auto;
@@ -222,6 +236,10 @@ const Content = styled.div<{ open?: boolean }>`
 
   max-height: ${({ open }) => (open ? "50vh" : "0")};
   padding: ${({ open }) => (open ? "20px 0" : "0")};
+  padding-top: ${({ paddingTop }) => paddingTop ?`${paddingTop}px` : null};
+  padding-bottom: ${({ paddingBottom }) => paddingBottom ? `${paddingBottom}px` : null};
+  padding-left: ${({ paddingLeft }) => paddingLeft ? `${paddingLeft}px` : null};
+  padding-right: ${({ paddingRight }) => paddingRight ? `${paddingRight}px` : null};
 `;
 
 export default InfoBox;
diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -104,6 +104,10 @@ export type Infobox<BP = any> = {
 export type InfoboxProperty = {
   default?: {
     title?: string;
+    infoboxPaddingTop?: number;
+    infoboxPaddingBottom?: number;
+    infoboxPaddingLeft?: number;
+    infoboxPaddingRight?: number;
     size?: "small" | "large";
     typography?: Typography;
     bgcolor?: string;