Skip to content

Commit

Permalink
chore(web): ui and ux fixes (#809)
Browse files Browse the repository at this point in the history
  • Loading branch information
KaWaite authored Nov 14, 2023
1 parent 621416a commit 770edb9
Show file tree
Hide file tree
Showing 17 changed files with 455 additions and 330 deletions.
76 changes: 38 additions & 38 deletions server/pkg/builtin/manifest.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2340,7 +2340,7 @@ extensions:
ui: datetime
title: Time
- id: textStoryBlock
name: Text Block
name: Text
type: storyBlock
description: Storytelling Text Block
schema:
Expand All @@ -2362,7 +2362,7 @@ extensions:
title: Content
ui: multiline
- id: mdTextStoryBlock
name: MD Text Block
name: MD Text
type: storyBlock
description: Storytelling MD Text Block
schema:
Expand All @@ -2384,7 +2384,7 @@ extensions:
title: Content
ui: multiline
- id: imageStoryBlock
name: Image Block
name: Image
type: storyBlock
description: Storytelling Image Block
schema:
Expand All @@ -2406,7 +2406,7 @@ extensions:
title: Image
ui: image
- id: videoStoryBlock
name: Video Block
name: Video
type: storyBlock
description: Storytelling Video Block
schema:
Expand Down Expand Up @@ -2501,40 +2501,8 @@ extensions:
- id: url
type: url
title: Link URL
- id: timelineStoryBlock
name: Timeline Block
type: storyBlock
description: Storytelling Timeline Block
schema:
groups:
- id: panel
title: Panel Setting
fields:
- id: padding
type: spacing
title: Padding
ui: padding
min: 0
max: 100
- id: default
title: Timeline Setting
fields:
- id: timelineSetting
type: timeline
ui: datetime
title: Timeline Setting
- id: playMode
type: string
title: Play Mode
description: Specify play mode.
defaultValue: once
choices:
- key: once
label: Once
- key: loop
label: Loop
- id: showLayersStoryBlock
name: Show Layers
name: Show Layers Button
type: storyBlock
description: Storytelling Show Layers
schema:
Expand Down Expand Up @@ -2568,4 +2536,36 @@ extensions:
type: array
title: Show Layers
ui: layer
choices:
choices:
- id: timelineStoryBlock
name: Timeline
type: storyBlock
description: Storytelling Timeline Block
schema:
groups:
- id: panel
title: Panel Setting
fields:
- id: padding
type: spacing
title: Padding
ui: padding
min: 0
max: 100
- id: default
title: Timeline Setting
fields:
- id: timelineSetting
type: timeline
ui: datetime
title: Timeline Setting
- id: playMode
type: string
title: Play Mode
description: Specify play mode.
defaultValue: once
choices:
- key: once
label: Once
- key: loop
label: Loop
5 changes: 3 additions & 2 deletions web/src/beta/components/Icon/Icons/timelineStoryBlock.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions web/src/beta/components/Icon/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ import MdTextStoryBlock from "./Icons/mdTextStoryBlock.svg";
import CameraButtonStoryBlock from "./Icons/cameraButtonStoryBlock.svg";
import ShowLayersStoryBlock from "./Icons/showLayersStoryBlock.svg";
import TimelineStoryBlock from "./Icons/timelineStoryBlock.svg";
import TimelineStoryBlockSolid from "./Icons/timelineStoryBlockSolid.svg";

// Widget tab
import Desktop from "./Icons/desktop.svg";
Expand Down Expand Up @@ -192,6 +193,7 @@ export default {
cameraButtonStoryBlock: CameraButtonStoryBlock,
showLayersStoryBlock: ShowLayersStoryBlock,
timelineStoryBlock: TimelineStoryBlock,
timelineStoryBlockSolid: TimelineStoryBlockSolid,
widget: Widgets,
widgets: Widgets,
menu: WidgetMenu,
Expand Down
2 changes: 1 addition & 1 deletion web/src/beta/components/SidePanelSectionField/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const Content = styled.div`
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
gap: 16px;
`;

export default SidePanelSectionField;
2 changes: 1 addition & 1 deletion web/src/beta/features/Editor/SidePanel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const ActionArea = styled.div`
`;

const Content = styled.div<{ hasActions?: boolean }>`
padding: ${({ hasActions }) => (hasActions ? "0" : "8px 4px")};
padding: ${({ hasActions }) => (hasActions ? "0" : "8px")};
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
overflow-y: auto;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const GroupSectionField: React.FC<GroupSectionFieldProps> = ({
),
)}
</StyledSidePanelSectionField>
<StyledSidePanelSectionField title={t("Layers")} startCollapsed>
<StyledSidePanelSectionField title={t("Layers")}>
<Layers
layers={layers}
selectedLayerId={selectedLayerId}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const Layers: React.FC<LayersProps> = ({

const handleZoomToLayer = () => {
if (selectedLayerId) {
onFlyTo?.(selectedLayerId);
onFlyTo?.(selectedLayerId, { duration: 0 });
}
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,11 @@ const Wrapper = styled.button`
min-height: 28px;
transition: all 0.15s;
border: 1px solid ${({ theme }) => theme.outline.weakest};
background: ${props => props.theme.bg[1]};
border: 1px solid ${({ theme }) => theme.outline.weaker};
:hover {
background: ${props => props.theme.bg[3]};
background: ${props => props.theme.bg[2]};
}
user-select: none;
cursor: pointer;
Expand Down
134 changes: 134 additions & 0 deletions web/src/beta/lib/core/StoryPanel/Block/builtin/Layer/Content.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import { useCallback, useContext, useState } from "react";

import Button from "@reearth/beta/components/Button";
import { useVisualizer } from "@reearth/beta/lib/core/Visualizer";
import { useT } from "@reearth/services/i18n";
import { styled } from "@reearth/services/theme";

import { BlockContext } from "../common/Wrapper";

import LayerEditor, { type LayerBlock as LayerBlockType } from "./Editor";

type Props = {
propertyId?: string;
layerButtons: LayerBlockType[];
isEditable?: boolean;
onPropertyUpdate?: (
propertyId?: string,
schemaItemId?: string,
fieldId?: string,
itemId?: string,
vt?: any,
v?: any,
) => Promise<void>;
onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
onPropertyItemMove?: (
propertyId?: string,
schemaGroupId?: string,
itemId?: string,
index?: number,
) => Promise<void>;
onPropertyItemDelete?: (
propertyId?: string,
schemaGroupId?: string,
itemId?: string,
) => Promise<void>;
};

const Content: React.FC<Props> = ({
propertyId,
layerButtons,
isEditable,
onPropertyUpdate,
onPropertyItemAdd,
onPropertyItemDelete,
onPropertyItemMove,
}) => {
const t = useT();
const context = useContext(BlockContext);
const visualizer = useVisualizer();
const [selected, setSelected] = useState<string>(layerButtons[0]?.id);

const handleClick = useCallback(
(itemId: string) => {
if (isEditable) {
setSelected(itemId);
return;
}
const item = layerButtons.find(i => i.id === itemId);

if (!item?.showLayers?.value) return;

// Hide all layers
const layers = visualizer.current?.layers;

// Show only selected layers
layers?.show(...item.showLayers.value);
const allLayers = layers?.layers() ?? [];

// Hide the rest
layers?.hide(
...allLayers.map(({ id }) => id).filter(id => !item.showLayers?.value?.includes(id)),
);
},
[isEditable, visualizer, layerButtons],
);

return (
<Wrapper>
<ButtonWrapper>
{layerButtons.map(({ title, color, bgColor, id }) => {
return (
<StyledButton
key={id}
color={color?.value}
bgColor={bgColor?.value}
icon="showLayersStoryBlock"
buttonType="primary"
text={title?.value ?? t("New Layers Button")}
size="small"
onClick={() => handleClick(id)}
/>
);
})}
</ButtonWrapper>
{context?.editMode && (
<LayerEditor
items={layerButtons}
propertyId={propertyId}
selected={selected}
setSelected={setSelected}
onPropertyUpdate={onPropertyUpdate}
onPropertyItemAdd={onPropertyItemAdd}
onPropertyItemMove={onPropertyItemMove}
onPropertyItemDelete={onPropertyItemDelete}
/>
)}
</Wrapper>
);
};

export default Content;

const Wrapper = styled.div`
width: 100%;
`;

const ButtonWrapper = styled.div`
width: 100%;
display: flex;
gap: 4px;
max-width: 400px;
flex-wrap: wrap;
`;

const StyledButton = styled(Button)<{ color?: string; bgColor?: string }>`
color: ${({ color }) => color};
background-color: ${({ bgColor }) => bgColor};
border-color: ${({ color }) => color};
&:hover {
color: ${({ bgColor }) => bgColor};
background-color: ${({ color }) => color};
}
`;
Loading

0 comments on commit 770edb9

Please sign in to comment.