feat(web): properties for widget areas (#427)

* Add WAS * Add WAS * Add WAS form * Add form mutation * Fix published projects * fix WAS padding, gap, etc in /core * Make prop optional * i18n * Update src/i18n/translations/ja.yml Co-authored-by: rot1024 <[email protected]> * Merge remote-tracking branch 'origin/main' into add-was --------- Co-authored-by: basel.issmail <[email protected]> Co-authored-by: KaWaite <[email protected]> Co-authored-by: KaWaite <[email protected]> Co-authored-by: rot1024 <[email protected]>
reearth · Feb 7, 2023 · e6e805c · e6e805c
1 parent 464d67f
commit e6e805c
Show file tree

Hide file tree

Showing 38 changed files with 954 additions and 25 deletions.
diff --git a/src/components/molecules/EarthEditor/PropertyPane/PropertyItem/index.tsx b/src/components/molecules/EarthEditor/PropertyPane/PropertyItem/index.tsx
@@ -83,6 +83,21 @@ export type Group = {
 
 export type Item = Group | GroupList;
 
+export type WidgetAlignment = "start" | "centered" | "end";
+
+export type WidgetAreaPadding = { top: number; bottom: number; left: number; right: number };
+
+export type WidgetAreaState = {
+  zone: "inner" | "outer";
+  section: "left" | "center" | "right";
+  area: "top" | "middle" | "bottom";
+  align: WidgetAlignment;
+  padding?: WidgetAreaPadding;
+  gap?: number;
+  centered?: boolean;
+  background?: string;
+};
+
 export type Props = {
   className?: string;
   item?: Item;

diff --git a/src/components/molecules/EarthEditor/PropertyPane/WidgetAlignSystemAreaForm/index.tsx b/src/components/molecules/EarthEditor/PropertyPane/WidgetAlignSystemAreaForm/index.tsx
@@ -0,0 +1,205 @@
+import React from "react";
+
+import Flex from "@reearth/components/atoms/Flex";
+import Text from "@reearth/components/atoms/Text";
+import ToggleButton from "@reearth/components/atoms/ToggleButton";
+import { useT } from "@reearth/i18n";
+import { styled } from "@reearth/theme";
+import { metricsSizes } from "@reearth/theme/metrics";
+
+import ColorField from "../PropertyField/ColorField";
+import NumberField from "../PropertyField/NumberField";
+import { WidgetAreaPadding, WidgetAreaState } from "../PropertyItem";
+
+export type Props = {
+  selectedWidgetArea: WidgetAreaState;
+  onAreaStateChange?: (widgetAreaState: WidgetAreaState) => Promise<void> | void;
+};
+
+const WidgetAlignSystemAreaForm: React.FC<Props> = ({ selectedWidgetArea, onAreaStateChange }) => {
+  const t = useT();
+  return (
+    <>
+      <FormItemWrapper>
+        <PaddingTitleWrapper>
+          <Text size="xs" otherProperties={{ userSelect: "none" }}>
+            {t("Padding")}
+          </Text>
+        </PaddingTitleWrapper>
+        <PaddingPropertyFieldsWrapper>
+          <PaddingPropertyFieldsRow style={{ justifyContent: "center" }}>
+            <PaddingFieldWrapper>
+              <NumberField
+                suffix="px"
+                min={0}
+                value={selectedWidgetArea.padding?.top}
+                onChange={(value?: number) =>
+                  onAreaStateChange?.({
+                    ...selectedWidgetArea,
+                    padding: {
+                      ...(selectedWidgetArea.padding as WidgetAreaPadding),
+                      top: value ?? 0,
+                    },
+                  })
+                }
+              />
+            </PaddingFieldWrapper>
+          </PaddingPropertyFieldsRow>
+
+          <PaddingPropertyFieldsRow style={{ justifyContent: "space-between" }}>
+            <PaddingFieldWrapper>
+              <NumberField
+                suffix="px"
+                min={0}
+                value={selectedWidgetArea.padding?.left}
+                onChange={(value?: number) =>
+                  onAreaStateChange?.({
+                    ...selectedWidgetArea,
+                    padding: {
+                      ...(selectedWidgetArea.padding as WidgetAreaPadding),
+                      left: value ?? 0,
+                    },
+                  })
+                }
+              />
+            </PaddingFieldWrapper>
+            <PaddingFieldWrapper>
+              <NumberField
+                suffix="px"
+                min={0}
+                value={selectedWidgetArea.padding?.right}
+                onChange={(value?: number) =>
+                  onAreaStateChange?.({
+                    ...selectedWidgetArea,
+                    padding: {
+                      ...(selectedWidgetArea.padding as WidgetAreaPadding),
+                      right: value ?? 0,
+                    },
+                  })
+                }
+              />
+            </PaddingFieldWrapper>
+          </PaddingPropertyFieldsRow>
+          <PaddingPropertyFieldsRow style={{ justifyContent: "center" }}>
+            <PaddingFieldWrapper>
+              <NumberField
+                suffix="px"
+                min={0}
+                value={selectedWidgetArea.padding?.bottom}
+                onChange={(value?: number) =>
+                  onAreaStateChange?.({
+                    ...selectedWidgetArea,
+                    padding: {
+                      ...(selectedWidgetArea.padding as WidgetAreaPadding),
+                      bottom: value ?? 0,
+                    },
+                  })
+                }
+              />
+            </PaddingFieldWrapper>
+          </PaddingPropertyFieldsRow>
+        </PaddingPropertyFieldsWrapper>
+      </FormItemWrapper>
+      <FormItemWrapper />
+      <FormItemWrapper>
+        <StyledPropertyTitleWrapper>
+          <Text size="xs" otherProperties={{ userSelect: "none" }}>
+            {t("Gap Spacing")}
+          </Text>
+        </StyledPropertyTitleWrapper>
+        <StyledPropertyFieldWrapper>
+          <NumberField
+            suffix="px"
+            min={0}
+            value={selectedWidgetArea.gap}
+            onChange={(value?: number) =>
+              onAreaStateChange?.({
+                ...selectedWidgetArea,
+                gap: value,
+              })
+            }
+          />
+        </StyledPropertyFieldWrapper>
+      </FormItemWrapper>
+      <FormItemWrapper>
+        <StyledPropertyTitleWrapper>
+          <Text size="xs" otherProperties={{ userSelect: "none" }}>
+            {t("Align Center")}
+          </Text>
+        </StyledPropertyTitleWrapper>
+        <StyledPropertyFieldWrapper>
+          <ToggleButton
+            checked={selectedWidgetArea.centered}
+            onChange={(value?: boolean) =>
+              onAreaStateChange?.({
+                ...selectedWidgetArea,
+                centered: value,
+              })
+            }
+          />
+        </StyledPropertyFieldWrapper>
+      </FormItemWrapper>
+      <FormItemWrapper>
+        <StyledPropertyTitleWrapper>
+          <Text size="xs" otherProperties={{ userSelect: "none" }}>
+            {t("Background Color")}
+          </Text>
+        </StyledPropertyTitleWrapper>
+        <StyledPropertyFieldWrapper>
+          <ColorField
+            value={selectedWidgetArea.background}
+            onChange={(value?: string) =>
+              onAreaStateChange?.({
+                ...selectedWidgetArea,
+                background: value,
+              })
+            }
+          />
+        </StyledPropertyFieldWrapper>
+      </FormItemWrapper>
+    </>
+  );
+};
+
+const FormItemWrapper = styled(Flex)`
+  flex-wrap: wrap;
+  margin-bottom: ${metricsSizes.l}px;
+  align-items: center;
+`;
+
+const StyledPropertyTitleWrapper = styled.div`
+  flex: 1;
+  font-size: 12px;
+  margin-right: ${metricsSizes.s}px;
+`;
+
+const StyledPropertyFieldWrapper = styled.div`
+  flex: 2;
+  width: 100%;
+  min-width: 0;
+`;
+
+const PaddingTitleWrapper = styled.div`
+  flex: 1;
+  width: 100%;
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+
+const PaddingPropertyFieldsWrapper = styled.div`
+  border: 1px dashed #4a4a4a;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+`;
+
+const PaddingPropertyFieldsRow = styled.div`
+  flex: 0 0 100%;
+  display: flex;
+`;
+
+const PaddingFieldWrapper = styled.div`
+  width: 52px;
+`;
+
+export default WidgetAlignSystemAreaForm;
diff --git a/src/components/molecules/EarthEditor/PropertyPane/WidgetAlignSystemToggle/index.tsx b/src/components/molecules/EarthEditor/PropertyPane/WidgetAlignSystemToggle/index.tsx
@@ -25,7 +25,7 @@ const WidgetAlignSystemToggle: React.FC<Props> = ({ checked, onChange }) => {
 const ToggleWrapper = styled.div`
   display: flex;
   flex-direction: row;
-  padding: 16px 16px 0 16px;
+  padding: 16px;
   justify-content: space-between;
 `;
 

diff --git a/src/components/molecules/EarthEditor/PropertyPane/index.tsx b/src/components/molecules/EarthEditor/PropertyPane/index.tsx
@@ -25,7 +25,9 @@ import PropertyItem, {
   Layer as LayerType,
   AssetModalProps as AssetModalPropsType,
   Mode as ModeType,
+  WidgetAreaState,
 } from "./PropertyItem";
+import WidgetAlignSystemAreaForm from "./WidgetAlignSystemAreaForm";
 import WidgetAlignSystemToggle from "./WidgetAlignSystemToggle";
 
 export type Item = ItemItem;
@@ -60,7 +62,9 @@ export type Props = {
   onRemovePane?: () => void;
   assetModal?: ComponentType<AssetModalProps>;
   selectedWidget?: Widget;
+  selectedWidgetArea?: WidgetAreaState;
   onWidgetAlignEditorActivate?: (enabled: boolean) => void;
+  onAreaStateChange?: (widgetAreaState: WidgetAreaState) => Promise<void> | void;
   widgetAlignEditorActivated?: boolean;
 } & Pick<
   PropertyItemProps,
@@ -102,8 +106,10 @@ const PropertyPane: React.FC<Props> = ({
   onCreateInfobox,
   onRemovePane,
   selectedWidget,
+  selectedWidgetArea,
   onWidgetAlignEditorActivate,
   widgetAlignEditorActivated,
+  onAreaStateChange,
   onChange,
   onRemove,
   onLink,
@@ -151,6 +157,7 @@ const PropertyPane: React.FC<Props> = ({
   );
   const events = useBind(eventProps, propertyId);
 
+  // TODO: ADD form
   return (
     <>
       {mode === "widgets" && (
@@ -159,6 +166,14 @@ const PropertyPane: React.FC<Props> = ({
           onChange={() => onWidgetAlignEditorActivate?.(!widgetAlignEditorActivated)}
         />
       )}
+      {mode === "widgets" && selectedWidgetArea && (
+        <GroupWrapper className={className} name={t("Container")}>
+          <WidgetAlignSystemAreaForm
+            selectedWidgetArea={selectedWidgetArea}
+            onAreaStateChange={onAreaStateChange}
+          />
+        </GroupWrapper>
+      )}
       {((mode === "widget" && !!selectedWidget?.enabled) ||
         (mode !== "widget" && (propertyId || infoboxCreatable))) && (
         <Wrapper className={className}>