Skip to content

Labs/applab design mode workspace rebrand #73932

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

Open
wilkie wants to merge 13 commits into
base: staging
Choose a base branch
from
Open

Labs/applab design mode workspace rebrand #73932

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
61d2b59
Updates design toolbox to use icons instead of images and upgrades to…
wilkie Jul 16, 2026
4e898ca
Updates the ThemeDropdown to a CustomDropdown and fixes design toolbo…
wilkie Jul 16, 2026
eeaa620
Converts ThemeDropdown to TypeScript and adds typed locale.
wilkie Jul 16, 2026
c76d65e
Updates CustomDropdown to support an image as the selection and to th…
wilkie Jul 16, 2026
ad6703c
Removes !important with double class naming.
wilkie Jul 16, 2026
a64b91d
Updates the description in the applab design properties to mui.
wilkie Jul 17, 2026
be51e51
Starts to convert the design properties button view to mui buttons.
wilkie Jul 17, 2026
48ac940
Styles the different property rows with DSCO fields and labels.
wilkie Jul 17, 2026
678705d
Adds the depth/zorder buttons and the copy element menu button.
wilkie Jul 17, 2026
0bd85ad
Updates events tab in applab design mode.
wilkie Jul 17, 2026
6d1e4d7
Updates the image picker property row.
wilkie Jul 17, 2026
9e2f264
Fixes the test issues and adds error messages.
wilkie Jul 17, 2026
8a00407
Removes unused stylesheets.
wilkie Jul 17, 2026
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
177 changes: 93 additions & 84 deletions apps/src/applab/DesignToolbox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {Box, Typography as MuiTypography} from '@mui/material';
import PropTypes from 'prop-types';
import React from 'react';

Expand All @@ -6,8 +7,6 @@ import applabMsg from '@cdo/applab/locale';
import ThemeDropdown from './designElements/ThemeDropdown';
import DesignToolboxElement from './DesignToolboxElement';

const IMAGE_BASE_URL = '/blockly/media/applab/design_toolbox/';

export default class DesignToolbox extends React.Component {
static propTypes = {
handleDragStart: PropTypes.func.isRequired,
Expand All @@ -29,9 +28,6 @@ export default class DesignToolbox extends React.Component {
borderLeft: this.props.isRtl ? '1px solid gray' : '',
overflowY: 'auto',
padding: 10,
// setting this to 0 allows 2 columns with the potential scrollbar on Windows
paddingRight: this.props.isRtl ? 10 : 0,
paddingLeft: this.props.isRtl ? 0 : 10,
};

return (
Expand All @@ -43,85 +39,98 @@ export default class DesignToolbox extends React.Component {
description={applabMsg.designElementTheme()}
key={this.props.themeValue}
/>
<p>{applabMsg.designToolboxDescription()}</p>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'button.png'}
desc={applabMsg.designElement_button()}
elementType={'BUTTON'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'input.png'}
desc={applabMsg.designElement_textInput()}
elementType={'TEXT_INPUT'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'label.png'}
desc={applabMsg.designElement_label()}
elementType={'LABEL'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'dropdown.png'}
desc={applabMsg.designElement_dropdown()}
elementType={'DROPDOWN'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'radio.png'}
desc={applabMsg.designElement_radioButton()}
elementType={'RADIO_BUTTON'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'checkbox.png'}
desc={applabMsg.designElement_checkbox()}
elementType={'CHECKBOX'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'image.png'}
desc={applabMsg.designElement_image()}
elementType={'IMAGE'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'canvas.png'}
desc={applabMsg.designElement_canvas()}
elementType={'CANVAS'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'screen.png'}
desc={applabMsg.designElement_screen()}
elementType={'SCREEN'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'textarea.png'}
desc={applabMsg.designElement_textArea()}
elementType={'TEXT_AREA'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'chart.png'}
desc={applabMsg.designElement_chart()}
elementType={'CHART'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'slider.png'}
desc={applabMsg.designElement_slider()}
elementType={'SLIDER'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
imageUrl={IMAGE_BASE_URL + 'camera.png'}
desc={applabMsg.designElement_photoSelect()}
elementType={'PHOTO_SELECT'}
handleDragStart={this.props.handleDragStart}
/>
<MuiTypography variant="body3">
{applabMsg.designToolboxDescription()}
</MuiTypography>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
gap: 1,
justifyContent: 'space-between',
padding: 2,
}}
>
<DesignToolboxElement
icon="hand-pointer"
desc={applabMsg.designElement_button()}
elementType={'BUTTON'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="i-cursor"
desc={applabMsg.designElement_textInput()}
elementType={'TEXT_INPUT'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="font"
desc={applabMsg.designElement_label()}
elementType={'LABEL'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="square-caret-down"
desc={applabMsg.designElement_dropdown()}
elementType={'DROPDOWN'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="circle-dot"
desc={applabMsg.designElement_radioButton()}
elementType={'RADIO_BUTTON'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="square-check"
desc={applabMsg.designElement_checkbox()}
elementType={'CHECKBOX'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="image"
desc={applabMsg.designElement_image()}
elementType={'IMAGE'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="paintbrush"
desc={applabMsg.designElement_canvas()}
elementType={'CANVAS'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="mobile-screen"
desc={applabMsg.designElement_screen()}
elementType={'SCREEN'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="align-left"
desc={applabMsg.designElement_textArea()}
elementType={'TEXT_AREA'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="chart-column"
desc={applabMsg.designElement_chart()}
elementType={'CHART'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="sliders"
desc={applabMsg.designElement_slider()}
elementType={'SLIDER'}
handleDragStart={this.props.handleDragStart}
/>
<DesignToolboxElement
icon="camera"
desc={applabMsg.designElement_photoSelect()}
elementType={'PHOTO_SELECT'}
handleDragStart={this.props.handleDragStart}
/>
</Box>
</div>
);
}
Expand Down
28 changes: 18 additions & 10 deletions apps/src/applab/DesignToolboxElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import FontAwesomeV6Icon from '@code-dot-org/component-library/fontAwesomeV6Icon';
import {Typography as MuiTypography} from '@mui/material';
import $ from 'jquery';
import PropTypes from 'prop-types';
import React from 'react';
Expand All @@ -7,7 +9,7 @@ import library from './designElements/library';

export default class DesignToolboxElement extends React.Component {
static propTypes = {
imageUrl: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
desc: PropTypes.string.isRequired,
elementType: PropTypes.string.isRequired,
handleDragStart: PropTypes.func.isRequired,
Expand All @@ -16,8 +18,7 @@ export default class DesignToolboxElement extends React.Component {
render() {
const styles = {
outerContainer: {
// The icon images are 120px wide and depend on this width for scaling.
width: 120,
width: '6rem',
display: 'inline-block',
textAlign: 'center',
paddingBottom: 15,
Expand All @@ -38,13 +39,20 @@ export default class DesignToolboxElement extends React.Component {
data-element-type={this.props.elementType}
className="new-design-element"
>
<img
src={this.props.imageUrl}
className="design-element-image"
style={styles.image}
alt={this.props.desc}
/>
<div>{this.props.desc}</div>
<MuiTypography
variant="body1"
sx={{
color: 'var(--text-brand-purple-primary)',
fontSize: '2rem',
}}
>
<FontAwesomeV6Icon
iconName={this.props.icon}
iconStyle="solid"
alt={this.props.desc}
/>
</MuiTypography>
<MuiTypography variant="body3">{this.props.desc}</MuiTypography>
</div>
</div>
);
Expand Down
36 changes: 0 additions & 36 deletions apps/src/applab/ElementSelect.jsx
View file
Open in desktop

This file was deleted.

25 changes: 12 additions & 13 deletions apps/src/applab/designElements/BooleanPropertyRow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import FontAwesomeV6Icon from '@code-dot-org/component-library/fontAwesomeV6Icon';
import Checkbox from '@code-dot-org/component-library/checkbox';
import {Box} from '@mui/material';
import PropTypes from 'prop-types';
import React from 'react';

Expand All @@ -23,18 +24,16 @@ export default class BooleanPropertyRow extends React.Component {

render() {
return (
<div style={rowStyle.container}>
<div style={rowStyle.description}>{this.props.desc}</div>
<div>
<FontAwesomeV6Icon
iconName={this.state.isChecked ? 'square-check' : 'square'}
iconStyle="regular"
className="custom-checkbox"
style={rowStyle.checkbox}
onClick={this.handleClick}
/>
</div>
</div>
<Box style={rowStyle.container}>
<Checkbox
checked={this.state.isChecked}
name={''}
size="s"
label={this.props.desc}
onChange={this.handleClick}
textThickness="thick"
/>
</Box>
);
}
}
Loading
Loading