Skip to content

Commit d7ee62b

Browse files
softmarshmallowsoftmarshmallow
committed
update editor layout
1 parent 4b6112f commit d7ee62b

39 files changed

Lines changed: 2098 additions & 5715 deletions

‎editor/components/app-runner/app-runner.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ export function AppRunner(props: {
4949
>
5050
<div
5151
style={{
52+
borderRadius: 4,
53+
overflow: "hidden",
5254
width: viewportsize.width || sceneSize.w || "100%",
5355
height: viewportsize.height || sceneSize.h || "100%",
5456
boxShadow: "0px 0px 48px #63636328",
@@ -162,14 +164,7 @@ function ResizableContainer({
162164
};
163165

164166
return (
165-
<Resizable
166-
ref={resizable}
167-
defaultSize={initialSize}
168-
onResize={_onResize}
169-
handleComponent={{
170-
bottomRight: ResizeKnob(),
171-
}}
172-
>
167+
<Resizable ref={resizable} defaultSize={initialSize} onResize={_onResize}>
173168
{children}
174169
</Resizable>
175170
);

‎editor/components/code-editor/monaco.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export function MonacoEditor(props: MonacoEditorProps) {
2626
defaultLanguage={
2727
pollyfill_language(props.defaultLanguage) ?? "typescript"
2828
}
29+
loading={<></>}
2930
defaultValue={props.defaultValue ?? "// no content"}
3031
theme="vs-dark"
3132
options={{ ...props.options }}

editor/components/scene-preview/scene-preview.tsx renamed to editor/components/design-preview/design-preview.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from "react";
22
import { FigmaEmbedCanvas } from "components/canvas";
33

4-
interface ScenePreviewConfig {
4+
interface DesignPreviewConfig {
55
fileid: string;
66
sceneid: string;
77
origin: "figma" | "sketch" | "xd" | "nothing";
88
displayAs: "embed" | "static" | "nothing";
99
}
1010

11-
export function ScenePreview(props: {
12-
config: ScenePreviewConfig;
11+
export function DesignPreview(props: {
12+
config: DesignPreviewConfig;
1313
width: string;
1414
height: string;
1515
}) {

‎editor/components/design-preview/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./design-preview";

‎editor/components/editor/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Primary editor components

‎editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
import styled from "@emotion/styled";
3+
4+
export function AppbarFragmentForCanvas() {
5+
return (
6+
<RootWrapperAppbarFragmentForCanvas>
7+
<MusicAppHomeScreen>@music-app / home-screen</MusicAppHomeScreen>
8+
</RootWrapperAppbarFragmentForCanvas>
9+
);
10+
}
11+
12+
const RootWrapperAppbarFragmentForCanvas = styled.div`
13+
display: flex;
14+
justify-content: center;
15+
flex-direction: row;
16+
align-items: center;
17+
flex: 1;
18+
gap: 10px;
19+
align-self: stretch;
20+
background-color: rgba(37, 37, 38, 1);
21+
box-sizing: border-box;
22+
padding: 10px 24px;
23+
`;
24+
25+
const MusicAppHomeScreen = styled.span`
26+
text-overflow: ellipsis;
27+
font-size: 14px;
28+
color: grey;
29+
font-family: "Helvetica Neue", sans-serif;
30+
font-weight: 400;
31+
text-align: left;
32+
`;

‎editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from "react";
2+
import styled from "@emotion/styled";
3+
4+
export function AppbarFragmentForCodeEditor() {
5+
return (
6+
<RootWrapperAppbarFragmentForCodeEditor>
7+
<Frame354>
8+
<Flutter>Flutter</Flutter>
9+
<IconsAntdSettingOutlined
10+
src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/4056/6ff2/8d18f474998d7ea1972ca5fe08258dd7"
11+
alt="icon"
12+
></IconsAntdSettingOutlined>
13+
</Frame354>
14+
<AppbarActions>
15+
<AppbarIconButton
16+
src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/acff/b783/96b0feffa7116a485371002a54621c73"
17+
alt="icon"
18+
></AppbarIconButton>
19+
<AppbarIconButton_0001
20+
src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/40e6/2dd0/0874244c17bfefb7d2125d3e55860428"
21+
alt="icon"
22+
></AppbarIconButton_0001>
23+
</AppbarActions>
24+
</RootWrapperAppbarFragmentForCodeEditor>
25+
);
26+
}
27+
28+
const RootWrapperAppbarFragmentForCodeEditor = styled.div`
29+
display: flex;
30+
justify-content: center;
31+
flex-direction: row;
32+
align-items: center;
33+
flex: 1;
34+
gap: 10px;
35+
align-self: stretch;
36+
background-color: rgba(30, 30, 30, 1);
37+
box-sizing: border-box;
38+
padding-bottom: 14px;
39+
padding-top: 14px;
40+
padding-left: 12px;
41+
padding-right: 20px;
42+
`;
43+
44+
const Frame354 = styled.div`
45+
display: flex;
46+
justify-content: flex-start;
47+
flex-direction: row;
48+
align-items: center;
49+
flex: 1;
50+
gap: 4px;
51+
align-self: stretch;
52+
box-sizing: border-box;
53+
`;
54+
55+
const Flutter = styled.span`
56+
color: rgba(124, 124, 124, 1);
57+
text-overflow: ellipsis;
58+
font-size: 14px;
59+
font-family: "Helvetica Neue", sans-serif;
60+
font-weight: 400;
61+
text-align: left;
62+
`;
63+
64+
const IconsAntdSettingOutlined = styled.img`
65+
width: 16px;
66+
height: 16px;
67+
object-fit: cover;
68+
`;
69+
70+
const AppbarActions = styled.div`
71+
display: flex;
72+
justify-content: center;
73+
flex-direction: row;
74+
align-items: center;
75+
flex: none;
76+
gap: 14px;
77+
width: 62px;
78+
height: 24px;
79+
box-sizing: border-box;
80+
`;
81+
82+
const AppbarIconButton = styled.img`
83+
width: 24px;
84+
height: 24px;
85+
object-fit: cover;
86+
`;
87+
88+
const AppbarIconButton_0001 = styled.img`
89+
width: 24px;
90+
height: 24px;
91+
object-fit: cover;
92+
`;

‎editor/components/editor/editor-appbar/editor-appbar-fragment-for-sidebar.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from "react";
2+
import styled from "@emotion/styled";
3+
4+
export function AppbarFragmentForSidebar() {
5+
return (
6+
<RootWrapperAppbarFragmentForSidebar>
7+
<IconsMdiMenu
8+
// TODO: replace resource
9+
src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/333b/8550/4bdd6a7ceffe5b23b37bc68c1fb7a4ab"
10+
alt="image of IconsMdiMenu"
11+
></IconsMdiMenu>
12+
</RootWrapperAppbarFragmentForSidebar>
13+
);
14+
}
15+
16+
const RootWrapperAppbarFragmentForSidebar = styled.div`
17+
display: flex;
18+
justify-content: flex-start;
19+
flex-direction: row;
20+
align-items: center;
21+
gap: 10px;
22+
width: 200px;
23+
align-self: stretch;
24+
background-color: rgba(37, 37, 38, 1);
25+
box-sizing: border-box;
26+
padding: 14px 16px;
27+
`;
28+
29+
const IconsMdiMenu = styled.img`
30+
width: 24px;
31+
height: 24px;
32+
object-fit: cover;
33+
`;

‎editor/components/editor/editor-appbar/editor-appbar.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
import styled from "@emotion/styled";
3+
import { AppbarFragmentForSidebar } from "./editor-appbar-fragment-for-sidebar";
4+
import { AppbarFragmentForCanvas } from "./editor-appbar-fragment-for-canvas";
5+
import { AppbarFragmentForCodeEditor } from "./editor-appbar-fragment-for-code-editor";
6+
7+
export function Appbar() {
8+
return (
9+
<AppbarContainer>
10+
<AppbarFragmentForSidebar></AppbarFragmentForSidebar>
11+
<AppbarFragmentForCanvas></AppbarFragmentForCanvas>
12+
<AppbarFragmentForCodeEditor></AppbarFragmentForCodeEditor>
13+
</AppbarContainer>
14+
);
15+
}
16+
17+
const AppbarContainer = styled.div`
18+
display: flex;
19+
justify-content: flex-start;
20+
flex-direction: row;
21+
align-items: start;
22+
flex: 1;
23+
gap: 0;
24+
align-self: stretch;
25+
box-sizing: border-box;
26+
`;

‎editor/components/editor/editor-appbar/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export { Appbar as EditorAppbar } from "./editor-appbar";
2+
3+
import { AppbarFragmentForSidebar } from "./editor-appbar-fragment-for-sidebar";
4+
import { AppbarFragmentForCanvas } from "./editor-appbar-fragment-for-canvas";
5+
import { AppbarFragmentForCodeEditor } from "./editor-appbar-fragment-for-code-editor";
6+
7+
export const EditorAppbarFragments = {
8+
Sidebar: AppbarFragmentForSidebar,
9+
Canvas: AppbarFragmentForCanvas,
10+
CodeEditor: AppbarFragmentForCodeEditor,
11+
};

0 commit comments

Comments
 (0)