Skip to content

fix(scratch-gui): restore missing menu items and Smalruby UI elements #7

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
takaokouji merged 1 commit into from
Jan 22, 2026
+179 −3
Merged

fix(scratch-gui): restore missing menu items and Smalruby UI elements #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
92 changes: 90 additions & 2 deletions packages/scratch-gui/src/components/menu-bar/menu-bar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import ShareButton from './share-button.jsx';
import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
import Divider from '../divider/divider.jsx';
import SaveStatus from './save-status.jsx';
import Spinner from '../spinner/spinner.jsx';
import ProjectWatcher from '../../containers/project-watcher.jsx';
import MenuBarMenu from './menu-bar-menu.jsx';
import {MenuItem, MenuSection} from '../menu/menu.jsx';
Expand Down Expand Up @@ -110,7 +111,7 @@ import styles from './menu-bar.css';

import helpIcon from '../../lib/assets/icon--tutorials.svg';
import mystuffIcon from './icon--mystuff.png';
import profileIcon from './icon--profile.png';
import profileIcon from './profile-hatti.png';
import remixIcon from './icon--remix.svg';
import dropdownCaret from './dropdown-caret.svg';
import aboutIcon from './icon--about.svg';
Expand Down Expand Up @@ -1183,6 +1184,93 @@ class MenuBar extends React.Component {
<SaveStatus />
)}
</div>
{this.props.googleDriveSaveStatus === 'saving' && (
<div className={styles.saveStatus}>
<Spinner
className={styles.saveStatusSpinner}
level="info"
small
/>
<FormattedMessage
defaultMessage="Saving project..."
id="gui.menuBar.savingToGoogleDrive"
/>
</div>
)}
{this.props.googleDriveSaveStatus === 'saved' && (
<div className={styles.saveStatus}>
<FormattedMessage
defaultMessage="Project saved."
id="gui.menuBar.savedToGoogleDrive"
/>
</div>
)}
{this.props.googleDriveFile &&
this.props.googleDriveFile.isGoogleDriveFile &&
this.props.projectChanged &&
this.props.googleDriveSaveDirectStatus !== 'saving' &&
this.props.googleDriveSaveDirectStatus !== 'saved' && (
<div className={styles.saveStatus}>
<Button
className={styles.saveDirectlyButton}
title={this.props.googleDriveSaveDirectStatus === 'auth_error' ?
this.props.intl.formatMessage({
id: 'gui.menuBar.authExpired',
defaultMessage: 'Authentication expired. Click to save.'
}) :
null
}
onClick={this.handleSaveDirectlyToGoogleDrive}
>
<FormattedMessage
defaultMessage="Save directly"
id="gui.menuBar.saveDirectlyButton"
/>
</Button>
</div>
)}
{this.props.googleDriveSaveDirectStatus === 'saving' && (
<div className={styles.saveStatus}>
<Spinner
className={styles.saveStatusSpinner}
level="info"
small
/>
<FormattedMessage
defaultMessage="Saving project..."
id="gui.menuBar.savingToGoogleDrive"
/>
</div>
)}
{this.props.googleDriveSaveDirectStatus === 'saved' && (
<div className={styles.saveStatus}>
<FormattedMessage
defaultMessage="Project saved."
id="gui.menuBar.savedToGoogleDrive"
/>
</div>
)}
{this.props.aiSaveStatus === 'saving' && (
<div className={styles.saveStatus}>
<Spinner
className={styles.saveStatusSpinner}
level="info"
small
/>
<FormattedMessage
defaultMessage="Saving AI..."
id="gui.menuBar.aiSaving"
/>
</div>
)}
{this.props.aiSaveStatus === 'saved' && (
<div className={styles.saveStatus}>
<FormattedMessage
defaultMessage="AI saved."
id="gui.menuBar.aiSaved"
/>
</div>
)}

{menuOpts.canHaveSession ? (
this.props.username ? (
Expand Down Expand Up @@ -1314,7 +1402,7 @@ class MenuBar extends React.Component {
src={profileIcon}
/>
<span>
{'scratch-cat'}
{'smalruby-hatti'}
</span>
<img
className={styles.dropdownCaretIcon}
Expand Down
21 changes: 20 additions & 1 deletion packages/scratch-gui/src/components/menu-bar/settings-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {connect} from 'react-redux';

import LanguageMenu from './language-menu.jsx';
import MenuBarMenu from './menu-bar-menu.jsx';
import {MenuSection} from '../menu/menu.jsx';
import {MenuSection, MenuItem} from '../menu/menu.jsx';
import PreferenceMenu from './preference-menu.jsx';

import {DEFAULT_MODE, HIGH_CONTRAST_MODE, colorModeMap} from '../../lib/settings/color-mode/index.js';
Expand All @@ -21,6 +21,7 @@ import styles from './settings-menu.css';
import dropdownCaret from './dropdown-caret.svg';
import settingsIcon from './icon--settings.svg';
import themeIcon from '../../lib/assets/icon--theme.svg';
import blockDisplayIcon from './block-display-icon.svg';
import {colorModeMenuOpen, themeMenuOpen, openColorModeMenu, openThemeMenu} from '../../reducers/menus.js';

const enabledColorModes = [DEFAULT_MODE, HIGH_CONTRAST_MODE];
Expand All @@ -37,6 +38,7 @@ const SettingsMenu = ({
onChangeColorMode,
onRequestOpenColorMode,
onRequestOpenTheme,
onOpenBlockDisplayModal,
activeTheme,
onChangeTheme,
onRequestClose,
Expand Down Expand Up @@ -116,6 +118,19 @@ const SettingsMenu = ({
onRequestCloseSettings={onRequestClose}
onRequestOpen={onRequestOpenColorMode}
/>}
<MenuItem onClick={onOpenBlockDisplayModal}>
<div className={styles.option}>
<img
className={styles.icon}
src={blockDisplayIcon}
/>
<FormattedMessage
defaultMessage="Block Display..."
description="Block display settings menu item"
id="gui.menuBar.blockDisplay"
/>
</div>
</MenuItem>
</MenuSection>
</MenuBarMenu>
</div>
Expand All @@ -132,6 +147,7 @@ SettingsMenu.propTypes = {
onChangeColorMode: PropTypes.func,
onRequestOpenColorMode: PropTypes.func,
isColorModeMenuOpen: PropTypes.bool,
onOpenBlockDisplayModal: PropTypes.func,
activeTheme: PropTypes.string,
onChangeTheme: PropTypes.func,
onRequestOpenTheme: PropTypes.func,
Expand All @@ -155,6 +171,9 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
onRequestOpenTheme: () => {
dispatch(openThemeMenu());
},
onOpenBlockDisplayModal: () => {
ownProps.onOpenBlockDisplayModal();
},
onChangeColorMode: colorMode => {
dispatch(setColorMode(colorMode));
ownProps.onRequestClose();
Expand Down
48 changes: 48 additions & 0 deletions packages/scratch-gui/src/components/modal/modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,3 +168,51 @@ $sides: 20rem;
[dir="rtl"] .help-button {
padding-left: 0;
}

/* Header actions (generic) */
.header-item-actions {
padding: 0;
z-index: 1;
}

[dir="ltr"] .header-item-actions {
margin-left: -4.75rem;
}

[dir="rtl"] .header-item-actions {
margin-right: -4.75rem;
}

.box {
position: relative;
}

.progress-bar {
height: 4px;
width: 100%;
background-color: $ui-white-transparent;
overflow: hidden;
position: absolute;
top: $library-header-height;
z-index: 1;
}

.progress-bar-value {
width: 100%;
height: 100%;
background-color: $control-primary;
animation: indeterminate 2s linear infinite;
transform-origin: 0% 50%;
}

@keyframes indeterminate {
0% {
transform: translateX(-100%) scaleX(0.2);
}
50% {
transform: translateX(0%) scaleX(0.5);
}
100% {
transform: translateX(100%) scaleX(0.2);
}
}
18 changes: 18 additions & 0 deletions packages/scratch-gui/src/components/modal/modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const ModalComponent = props => (
onRequestClose={props.onRequestClose}
>
<Box
className={styles.box}
dir={props.isRtl ? 'rtl' : 'ltr'}
direction="column"
grow={1}
Expand Down Expand Up @@ -65,6 +66,16 @@ const ModalComponent = props => (
) : null}
{props.contentLabel}
</div>
{props.headerActions ? (
<div
className={classNames(
styles.headerItem,
styles.headerItemActions
)}
>
{props.headerActions}
</div>
) : null}
<div
className={classNames(
styles.headerItem,
Expand All @@ -91,6 +102,11 @@ const ModalComponent = props => (
)}
</div>
</div>
{props.loading ? (
<div className={styles.progressBar}>
<div className={styles.progressBarValue} />
</div>
) : null}
{props.children}
</Box>
</ReactModal>
Expand All @@ -104,9 +120,11 @@ ModalComponent.propTypes = {
PropTypes.object
]).isRequired,
fullScreen: PropTypes.bool,
headerActions: PropTypes.node,
headerClassName: PropTypes.string,
headerImage: PropTypes.string,
isRtl: PropTypes.bool,
loading: PropTypes.bool,
onHelp: PropTypes.func,
onRequestClose: PropTypes.func
};
Expand Down
3 changes: 3 additions & 0 deletions packages/scratch-gui/src/reducers/gui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import vmReducer, {vmInitialState} from './vm';
import vmStatusReducer, {vmStatusInitialState} from './vm-status';
import workspaceMetricsReducer, {workspaceMetricsInitialState} from './workspace-metrics';
import blockDisplayReducer, {blockDisplayInitialState} from './block-display';
import extensionFilterReducer, {extensionFilterInitialState} from './extension-filter';
import meshV2Reducer, {meshV2InitialState} from './mesh-v2';
import googleDriveFileReducer, {googleDriveFileInitialState} from './google-drive-file';
import koshienFileReducer, {koshienFileInitialState} from './koshien-file';
Expand Down Expand Up @@ -74,6 +75,7 @@ const buildInitialState = (config: GUIConfig) => ({
vmStatus: vmStatusInitialState,
workspaceMetrics: workspaceMetricsInitialState,
blockDisplay: blockDisplayInitialState,
extensionFilter: extensionFilterInitialState,
meshV2: meshV2InitialState,
googleDriveFile: googleDriveFileInitialState,
koshienFile: koshienFileInitialState,
Expand Down Expand Up @@ -188,6 +190,7 @@ const guiReducer = combineReducers({
vmStatus: vmStatusReducer,
workspaceMetrics: workspaceMetricsReducer,
blockDisplay: blockDisplayReducer,
extensionFilter: extensionFilterReducer,
meshV2: meshV2Reducer,
googleDriveFile: googleDriveFileReducer,
koshienFile: koshienFileReducer,
Expand Down