Skip to content

Restore focus to menu button after connection / download actions #92

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
microbit-robert wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Restore focus to menu button after connection / download actions #92

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
34 changes: 22 additions & 12 deletions webapp/src/editortoolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ interface EditorToolbarState {

export class EditorToolbar extends data.Component<ISettingsProps, EditorToolbarState> {
protected compileTimeout: number;
private compileBtnDropdown: React.RefObject<sui.DropdownMenu>;
private computerCompileBtn: React.RefObject<sui.DropdownMenu>;
private mobileCompileBtn: React.RefObject<sui.DropdownMenu>;

constructor(props: ISettingsProps) {
super(props);
Expand All @@ -42,7 +43,8 @@ export class EditorToolbar extends data.Component<ISettingsProps, EditorToolbarS
this.toggleCollapsed = this.toggleCollapsed.bind(this);
this.cloudButtonClick = this.cloudButtonClick.bind(this);

this.compileBtnDropdown = React.createRef();
this.computerCompileBtn = React.createRef();
this.mobileCompileBtn = React.createRef();
}

saveProjectName(name: string, view?: string) {
Expand Down Expand Up @@ -198,16 +200,18 @@ export class EditorToolbar extends data.Component<ISettingsProps, EditorToolbarS
this.compile();
}

protected onFileDownloadClick = async () => {
protected onFileDownloadClick = async (returnFocusCallback: () => void) => {
// Matching the tick in the call to compile() above for historical reasons
pxt.tickEvent("editortools.download", { collapsed: this.getCollapsedState() }, { interactiveConsent: true });
pxt.tickEvent("editortools.downloadasfile", { collapsed: this.getCollapsedState() }, { interactiveConsent: true });
(this.props.parent as ProjectView).compile(true);
await (this.props.parent as ProjectView).compile(true);
returnFocusCallback();
}

protected onPairClick = () => {
protected onPairClick = async (returnFocusCallback: () => void) => {
pxt.tickEvent("editortools.pair", undefined, { interactiveConsent: true });
this.props.parent.pairAsync();
await this.props.parent.pairAsync();
returnFocusCallback();
}

protected onCannotPairClick = async () => {
Expand Down Expand Up @@ -247,8 +251,9 @@ export class EditorToolbar extends data.Component<ISettingsProps, EditorToolbarS
});
}

protected onDisconnectClick = () => {
cmds.showDisconnectAsync();
protected onDisconnectClick = async (returnFocusCallback: () => void) => {
await cmds.showDisconnectAsync();
returnFocusCallback()
}

protected onHelpClick = () => {
Expand Down Expand Up @@ -349,17 +354,22 @@ export class EditorToolbar extends data.Component<ISettingsProps, EditorToolbarS

const extMenuItems: sui.ItemProps[] = pxt.commands.getDownloadMenuItems?.() || [];

const getMenuRef = () => view === View.Computer ? this.computerCompileBtn : this.mobileCompileBtn;
const returnFocus = () => {
const ref = getMenuRef();
(ref.current.refs.dropdown as HTMLElement).focus();
}
// Add the ... menu
const usbIcon = pxt.appTarget.appTheme.downloadDialogTheme?.deviceIcon || "usb";
el.push(
<sui.DropdownMenu key="downloadmenu" role="menuitem" icon={`${downloadButtonIcon} horizontal ${hwIconClasses}`} title={lf("Download options")} className={`${hwIconClasses} right attached editortools-btn hw-button button`} dataTooltip={tooltip} displayAbove={true} displayRight={displayRight} closeOnItemClick={true} onShow={
<sui.DropdownMenu ref={getMenuRef()} key="downloadmenu" role="menuitem" icon={`${downloadButtonIcon} horizontal ${hwIconClasses}`} title={lf("Download options")} className={`${hwIconClasses} right attached editortools-btn hw-button button`} dataTooltip={tooltip} displayAbove={true} displayRight={displayRight} closeOnItemClick={true} onShow={
() => this.forceUpdate() // force update to refresh extMenuItems
}>
{webUSBSupported && !packetioConnected && <sui.Item role="menuitem" icon={usbIcon} text={lf("Connect Device")} tabIndex={-1} onClick={this.onPairClick} />}
{webUSBSupported && !packetioConnected && <sui.Item role="menuitem" icon={usbIcon} text={lf("Connect Device")} tabIndex={-1} onClick={() => this.onPairClick(returnFocus)} />}
{showUsbNotSupportedHint && <sui.Item role="menuitem" icon={usbIcon} text={lf("Connect Device")} tabIndex={-1} onClick={this.onCannotPairClick} />}
{webUSBSupported && (packetioConnecting || packetioConnected) && <sui.Item role="menuitem" icon={usbIcon} text={lf("Disconnect")} tabIndex={-1} onClick={this.onDisconnectClick} />}
{webUSBSupported && (packetioConnecting || packetioConnected) && <sui.Item role="menuitem" icon={usbIcon} text={lf("Disconnect")} tabIndex={-1} onClick={() => this.onDisconnectClick(returnFocus)} />}
{boards && <sui.Item role="menuitem" icon="microchip" text={hardwareMenuText} tabIndex={-1} onClick={this.onHwItemClick} />}
{!extMenuItems?.length && <sui.Item role="menuitem" icon="xicon file-download" text={downloadMenuText} tabIndex={-1} onClick={this.onFileDownloadClick} />}
{!extMenuItems?.length && <sui.Item role="menuitem" icon="xicon file-download" text={downloadMenuText} tabIndex={-1} onClick={() => this.onFileDownloadClick(returnFocus)} />}
{extMenuItems.map((props, index) => <sui.Item key={index} role="menuitem" tabIndex={-1} {...props} />)}
{downloadHelp && <sui.Item role="menuitem" icon="help circle" text={lf("Help")} tabIndex={-1} onClick={this.onHelpClick} />}
</sui.DropdownMenu>
Expand Down