Skip to content

Changes code to sider, colors #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 1, 2025
Merged

Changes code to sider, colors #138

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d6ecc9b
Changes code to sider, colors
alan412 Jun 30, 2025
a753501
Changed to use constants instead of magic numbers
alan412 Jun 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const FULL_HEIGHT = '100%';
const CODE_PANEL_DEFAULT_SIZE = '25%';

/** Minimum size for code panel. */
const CODE_PANEL_MIN_SIZE = 40;
const CODE_PANEL_MIN_SIZE = 80;

/** Background color for testing layout. */
const LAYOUT_BACKGROUND_COLOR = '#0F0';
Expand All @@ -95,6 +95,8 @@ const App: React.FC = (): React.JSX.Element => {
const [shownPythonToolboxCategories, setShownPythonToolboxCategories] = React.useState<Set<string>>(new Set());
const [triggerPythonRegeneration, setTriggerPythonRegeneration] = React.useState(0);
const [leftCollapsed, setLeftCollapsed] = React.useState(false);
const [rightCollapsed, setRightCollapsed] = React.useState(false);


const blocksEditor = React.useRef<editor.Editor | null>(null);
const generatorContext = React.useRef<GeneratorContext | null>(null);
Expand Down Expand Up @@ -210,11 +212,6 @@ const App: React.FC = (): React.JSX.Element => {
setCurrentModule(module);
};

/** Handles left sidebar collapse state change. */
const handleSiderCollapse = (collapsed: boolean): void => {
setLeftCollapsed(collapsed);
};

/** Handles toolbox settings modal close. */
const handleToolboxSettingsCancel = (): void => {
setToolboxSettingsModalIsOpen(false);
Expand Down Expand Up @@ -337,21 +334,21 @@ const App: React.FC = (): React.JSX.Element => {
}
}, [project]);

const {Sider} = Antd.Layout;
const {Sider,Content} = Antd.Layout;

return (
<Antd.ConfigProvider
theme={{
algorithm: Antd.theme.darkAlgorithm,
components: {
Tree: {
directoryNodeSelectedBg: '#1677ff',
directoryNodeSelectedColor: '#fff',
nodeSelectedBg: '#1677ff',
nodeSelectedColor: '#fff',
nodeHoverBg: '#333',
nodeHoverColor: '#fff',
Layout: {
headerBg: '#000000', // This is only for dark mode
siderBg: '#000000', // This is only for dark mode
triggerBg: '#000000', // This is only for dark mode
},
Menu:{
darkItemBg: '#000000', // This is only for dark mode
}
},
}}
>
Expand All @@ -371,7 +368,7 @@ const App: React.FC = (): React.JSX.Element => {
<Sider
collapsible
collapsed={leftCollapsed}
onCollapse={handleSiderCollapse}
onCollapse={(collapsed: boolean) => setLeftCollapsed(collapsed)}
>
<Menu.Component
storage={storage}
Expand All @@ -394,22 +391,25 @@ const App: React.FC = (): React.JSX.Element => {
setProject={setProject}
storage={storage}
/>
<Antd.Splitter>
<Antd.Splitter.Panel>
<Antd.Layout>
<Content>
<BlocklyComponent ref={blocklyComponent} />
</Antd.Splitter.Panel>
<Antd.Splitter.Panel
min={CODE_PANEL_MIN_SIZE}
defaultSize={CODE_PANEL_DEFAULT_SIZE}
collapsible={true}
</Content>
<Sider
collapsible
reverseArrow={true}
collapsed={rightCollapsed}
collapsedWidth={CODE_PANEL_MIN_SIZE}
width={CODE_PANEL_DEFAULT_SIZE}
onCollapse={(collapsed: boolean) => setRightCollapsed(collapsed)}
>
<CodeDisplay
generatedCode={generatedCode}
messageApi={messageApi}
setAlertErrorMessage={setAlertErrorMessage}
/>
</Antd.Splitter.Panel>
</Antd.Splitter>
</Sider>
</Antd.Layout>
</Antd.Layout>
</Antd.Layout>
</Antd.Layout>
Expand Down