Skip to content

Rename accessible blocks and only show option for project with blocks #55

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

Closed
microbit-grace wants to merge 2 commits into from
Closed

Rename accessible blocks and only show option for project with blocks #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c4691b9
Rename "accessible blocks" -> "keyboard controls"
microbit-grace May 28, 2025
28e7bcc
Only show keyboard controls option for project with blocks
microbit-grace May 28, 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
6 changes: 3 additions & 3 deletions webapp/src/auth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ export const LOGGED_IN = `${MODULE}:${FIELD_LOGGED_IN}`;
const USER_PREF_MODULE = "user-pref";
const FIELD_USER_PREFERENCES = "preferences";
const FIELD_HIGHCONTRAST = "high-contrast";
const FIELD_ACCESSIBLE_BLOCKS = "accessible-blocks";
const FIELD_KEYBOARD_CONTROLS = "keyboard-controls";
const FIELD_COLOR_THEME_IDS = "colorThemeIds";
const FIELD_LANGUAGE = "language";
const FIELD_READER = "reader";
export const USER_PREFERENCES = `${USER_PREF_MODULE}:${FIELD_USER_PREFERENCES}`
export const HIGHCONTRAST = `${USER_PREF_MODULE}:${FIELD_HIGHCONTRAST}`
export const ACCESSIBLE_BLOCKS = `${USER_PREF_MODULE}:${FIELD_ACCESSIBLE_BLOCKS}`
export const ACCESSIBLE_BLOCKS = `${USER_PREF_MODULE}:${FIELD_KEYBOARD_CONTROLS}`
export const COLOR_THEME_IDS = `${USER_PREF_MODULE}:${FIELD_COLOR_THEME_IDS}`
export const LANGUAGE = `${USER_PREF_MODULE}:${FIELD_LANGUAGE}`
export const READER = `${USER_PREF_MODULE}:${FIELD_READER}`
Expand Down Expand Up @@ -134,7 +134,7 @@ class AuthClient extends pxt.auth.AuthClient {
switch (field) {
case FIELD_USER_PREFERENCES: return { ...state.preferences };
case FIELD_HIGHCONTRAST: return state.preferences?.highContrast ?? pxt.auth.DEFAULT_USER_PREFERENCES().highContrast;
case FIELD_ACCESSIBLE_BLOCKS: return state.preferences?.accessibleBlocks ?? pxt.auth.DEFAULT_USER_PREFERENCES().accessibleBlocks;
case FIELD_KEYBOARD_CONTROLS: return state.preferences?.accessibleBlocks ?? pxt.auth.DEFAULT_USER_PREFERENCES().accessibleBlocks;
case FIELD_COLOR_THEME_IDS: return state.preferences?.colorThemeIds ?? pxt.auth.DEFAULT_USER_PREFERENCES().colorThemeIds;
case FIELD_LANGUAGE: return state.preferences?.language ?? pxt.auth.DEFAULT_USER_PREFERENCES().language;
case FIELD_READER: return state.preferences?.reader ?? pxt.auth.DEFAULT_USER_PREFERENCES().reader;
Expand Down
14 changes: 11 additions & 3 deletions webapp/src/container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,14 +82,22 @@ interface DocsMenuProps extends ISettingsProps {
editor: DocsMenuEditorName;
}

export class DocsMenu extends data.PureComponent<DocsMenuProps, {}> {
function showKeyboardControls() {
const languageRestriction = pkg.mainPkg?.config?.languageRestriction;
const pyOnly = languageRestriction === pxt.editor.LanguageRestriction.PythonOnly;
const noBlocks = languageRestriction === pxt.editor.LanguageRestriction.NoBlocks;
const tsOnly = languageRestriction === pxt.editor.LanguageRestriction.JavaScriptOnly;
return !pyOnly && !tsOnly && !noBlocks && !!pkg.mainEditorPkg().files[pxt.MAIN_BLOCKS];
Comment on lines +86 to +90
Copy link
Collaborator Author

@microbit-grace microbit-grace May 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logic is taken from https://github.com/microbit-matt-hillsdon/pxt/blob/blockly-12/webapp/src/container.tsx#L541 so that when the blocks toggle is visible, the keyboard controls would be visible. Not sure if this is the best way of doing it, suggestions welcomed!

}

export class DocsMenu extends data.PureComponent<DocsMenuProps & { hasMainBlocksFile: boolean }, {}> {
renderCore() {
const parent = this.props.parent;
const targetTheme = pxt.appTarget.appTheme;
const accessibleBlocksEnabled = data.getData<boolean>(auth.ACCESSIBLE_BLOCKS);
return <sui.DropdownMenu role="menuitem" icon="help circle large"
className="item mobile hide help-dropdown-menuitem" textClass={"landscape only"} title={lf("Help")} >
{accessibleBlocksEnabled && getKeyboardNavHelpItem(parent)}
{this.props.hasMainBlocksFile && showKeyboardControls() && accessibleBlocksEnabled && getKeyboardNavHelpItem(parent)}
{targetTheme.tours?.editor && getTourItem(parent)}
{renderDocItems(parent, targetTheme.docMenu)}
{getDocsLanguageItem(this.props.editor, parent)}
Expand Down Expand Up @@ -369,7 +377,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
<div className="ui divider"></div>
{targetTheme.selectLanguage ? <sui.Item icon='xicon globe' role="menuitem" text={lf("Language")} onClick={this.showLanguagePicker} /> : undefined}
<sui.Item role="menuitem" icon="paint brush" text={lf("Theme")} onClick={this.showThemePicker} />
<sui.Item role="menuitem" text={accessibleBlocks ? lf("Accessible Blocks Off") : lf("Accessible Blocks On")} onClick={this.toggleAccessibleBlocks} />
{showKeyboardControls() && (<sui.Item role="menuitem" text={accessibleBlocks ? lf("Keyboard Controls Off") : lf("Keyboard Controls On")} onClick={this.toggleAccessibleBlocks} />)}
{showGreenScreen ? <sui.Item role="menuitem" text={greenScreen ? lf("Green Screen Off") : lf("Green Screen On")} onClick={this.toggleGreenScreen} /> : undefined}
{docItems && renderDocItems(this.props.parent, docItems, "setting-docs-item mobile only inherit")}
{githubUser ? <div className="ui divider"></div> : undefined}
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/headerbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ export class HeaderBar extends data.Component<ISettingsProps, {}> {
{this.getExitButtons(targetTheme, view, tutorialOptions)}
{showHomeButton && <sui.Item className={`icon openproject ${hasIdentity ? "mobile hide" : ""}`} role="menuitem" title={lf("Home")} icon="home large" ariaLabel={lf("Home screen")} onClick={this.goHome} />}
{showShareButton && <sui.Item className="icon shareproject mobile hide" role="menuitem" title={lf("Publish your game to create a shareable link")} icon="share alternate large" ariaLabel={lf("Share Project")} onClick={this.showShareDialog} />}
{showHelpButton && <container.DocsMenu parent={this.props.parent} editor={activeEditor} />}
{showHelpButton && <container.DocsMenu parent={this.props.parent} editor={activeEditor} hasMainBlocksFile={!!pkg.mainEditorPkg().files[pxt.MAIN_BLOCKS]}/>}
{this.getSettingsMenu(view)}
{hasIdentity && (view === "home" || view === "editor" || view === "tutorial-tab") && <identity.UserMenu parent={this.props.parent} />}
</div>
Expand Down