Skip to content

Commit

Permalink
chore(web): Story block edit Panel layout (#810)
Browse files Browse the repository at this point in the history 
Co-authored-by: KaWaite <[email protected]>
  • Loading branch information
@mkumbobeaty @KaWaite
mkumbobeaty and KaWaite authored Nov 16, 2023
1 parent ccf3c25 commit 67a0d61
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 58 deletions.
1 change: 1 addition & 0 deletions web/src/beta/components/fields/CameraField/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ const InputWrapper = styled.div<{ disabled?: boolean }>`
display: flex;
gap: 10px;
height: 28px;
flex-wrap: wrap;
opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
`;

Expand Down
68 changes: 39 additions & 29 deletions web/src/beta/lib/core/StoryPanel/Block/builtin/Camera/Editor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,16 +71,39 @@ const CameraBlockEditor: React.FC<Props> = ({

return (
<EditorWrapper>
<ListField
name={t("Buttons List")}
items={listItems}
addItem={handleItemAdd}
removeItem={handleItemRemove}
onItemDrop={handleItemMove}
selected={selected}
onSelect={setSelected}
atLeastOneItem
/>
<GroupWrapper>
<ListField
name={t("Buttons List")}
items={listItems}
addItem={handleItemAdd}
removeItem={handleItemRemove}
onItemDrop={handleItemMove}
selected={selected}
onSelect={setSelected}
atLeastOneItem
/>
<FieldGroup disabled={!editorProperties}>
<TextField
name={editorProperties?.title?.title}
description={editorProperties?.title?.description}
value={editorProperties?.title?.value}
onChange={value => debounceOnUpdate(selected, "title", "string", value)}
/>
<ColorField
name={editorProperties?.color?.title}
description={editorProperties?.color?.description}
value={editorProperties?.color?.value}
onChange={value => debounceOnUpdate(selected, "color", "string", value)}
/>
<ColorField
name={editorProperties?.bgColor?.title}
description={editorProperties?.bgColor?.description}
value={editorProperties?.bgColor?.value}
onChange={value => debounceOnUpdate(selected, "bgColor", "string", value)}
/>
</FieldGroup>
</GroupWrapper>

<FieldGroup disabled={!editorProperties}>
<CameraField
name={editorProperties?.cameraPosition?.title}
Expand All @@ -96,24 +119,6 @@ const CameraBlockEditor: React.FC<Props> = ({
value={editorProperties?.cameraDuration?.value}
onChange={value => handleUpdate(selected, "cameraDuration", "number", value || 0)}
/>
<TextField
name={editorProperties?.title?.title}
description={editorProperties?.title?.description}
value={editorProperties?.title?.value}
onChange={value => debounceOnUpdate(selected, "title", "string", value)}
/>
<ColorField
name={editorProperties?.color?.title}
description={editorProperties?.color?.description}
value={editorProperties?.color?.value}
onChange={value => debounceOnUpdate(selected, "color", "string", value)}
/>
<ColorField
name={editorProperties?.bgColor?.title}
description={editorProperties?.bgColor?.description}
value={editorProperties?.bgColor?.value}
onChange={value => debounceOnUpdate(selected, "bgColor", "string", value)}
/>
</FieldGroup>
</EditorWrapper>
);
Expand All @@ -125,11 +130,16 @@ const EditorWrapper = styled.div`
background: ${({ theme }) => theme.bg[1]};
`;

const GroupWrapper = styled.div`
display: grid;
grid-template-columns: 55% 42%;
grid-gap: 10px;
`;

const FieldGroup = styled.div<{ disabled: boolean }>`
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
cursor: ${({ disabled }) => (disabled ? "not-allowed" : "inherit")};
pointer-events: ${({ disabled }) => (disabled ? "none" : "inherit")};
Expand Down
68 changes: 39 additions & 29 deletions web/src/beta/lib/core/StoryPanel/Block/builtin/Layer/Editor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,35 +67,40 @@ const CameraBlockEditor: React.FC<Props> = ({

return (
<EditorWrapper>
<ListField
name={t("Buttons List")}
items={listItems}
addItem={handleItemAdd}
removeItem={handleItemRemove}
onItemDrop={handleItemMove}
selected={selected}
onSelect={setSelected}
atLeastOneItem
/>
<FieldGroup disabled={!editorProperties}>
<TextField
name={editorProperties?.title?.title}
description={editorProperties?.title?.description}
value={editorProperties?.title?.value}
onChange={value => debounceOnUpdate(selected, "title", "string", value)}
/>
<ColorField
name={editorProperties?.color?.title}
description={editorProperties?.color?.description}
value={editorProperties?.color?.value}
onChange={value => debounceOnUpdate(selected, "color", "string", value)}
/>
<ColorField
name={editorProperties?.bgColor?.title}
description={editorProperties?.bgColor?.description}
value={editorProperties?.bgColor?.value}
onChange={value => debounceOnUpdate(selected, "bgColor", "string", value)}
<GroupWrapper>
<ListField
name={t("Buttons List")}
items={listItems}
addItem={handleItemAdd}
removeItem={handleItemRemove}
onItemDrop={handleItemMove}
selected={selected}
onSelect={setSelected}
atLeastOneItem
/>
<FieldGroup disabled={!editorProperties}>
<TextField
name={editorProperties?.title?.title}
description={editorProperties?.title?.description}
value={editorProperties?.title?.value}
onChange={value => debounceOnUpdate(selected, "title", "string", value)}
/>
<ColorField
name={editorProperties?.color?.title}
description={editorProperties?.color?.description}
value={editorProperties?.color?.value}
onChange={value => debounceOnUpdate(selected, "color", "string", value)}
/>
<ColorField
name={editorProperties?.bgColor?.title}
description={editorProperties?.bgColor?.description}
value={editorProperties?.bgColor?.value}
onChange={value => debounceOnUpdate(selected, "bgColor", "string", value)}
/>
</FieldGroup>
</GroupWrapper>

<FieldGroup disabled={!editorProperties}>
<SelectField
name={editorProperties?.showLayers?.title}
description={editorProperties?.showLayers?.description}
Expand All @@ -115,11 +120,16 @@ const EditorWrapper = styled.div`
background: ${({ theme }) => theme.bg[1]};
`;

const GroupWrapper = styled.div`
display: grid;
grid-template-columns: 55% 42%;
grid-gap: 10px;
`;

const FieldGroup = styled.div<{ disabled: boolean }>`
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
cursor: ${({ disabled }) => (disabled ? "not-allowed" : "inherit")};
pointer-events: ${({ disabled }) => (disabled ? "none" : "inherit")};
Expand Down

0 comments on commit 67a0d61

Please sign in to comment.