From cd37b5882d86d801915327c805e91bd5e6fa8cc1 Mon Sep 17 00:00:00 2001 From: Tony Atkins Date: Tue, 5 Oct 2021 15:48:39 +0200 Subject: [PATCH] C2LC-496: Made actions menu aware of selected action. --- src/ActionsMenu.js | 2 ++ src/ActionsMenu.scss | 2 +- src/ActionsMenuItem.js | 20 +++++++++++++++----- src/ActionsMenuItem.scss | 3 ++- src/App.js | 3 ++- src/messages.json | 2 ++ 6 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/ActionsMenu.js b/src/ActionsMenu.js index 79d63aaf..f12dcdd0 100644 --- a/src/ActionsMenu.js +++ b/src/ActionsMenu.js @@ -19,6 +19,7 @@ type ActionsMenuProps = { // TODO: Flesh this definition out. menuItems: {}, programSequence: ProgramSequence, + selectedAction?: ?string; allowedActions: ActionToggleRegister }; @@ -144,6 +145,7 @@ class ActionsMenu extends React.Component { intl={this.props.intl} isAllowed={isAllowed} isUsed={isUsed} + isSelected={this.props.selectedAction === itemKey} itemKey={itemKey} key={itemKey} onChange={itemChangeHandler} diff --git a/src/ActionsMenu.scss b/src/ActionsMenu.scss index a32b6340..01dc5947 100644 --- a/src/ActionsMenu.scss +++ b/src/ActionsMenu.scss @@ -25,7 +25,7 @@ overflow: visible; position: absolute; top: -0.3rem; - width: 12rem; + width: 14rem; z-index: 4; } diff --git a/src/ActionsMenuItem.js b/src/ActionsMenuItem.js index c4afc077..909dc80a 100644 --- a/src/ActionsMenuItem.js +++ b/src/ActionsMenuItem.js @@ -9,6 +9,7 @@ import './ActionsMenuItem.scss'; type ActionsMenuItemProps = { intl: IntlShape, isAllowed?: boolean, + isSelected?: boolean, isUsed?: boolean, itemKey: string, onChange: (event: Event) => void @@ -20,22 +21,31 @@ export class ActionsMenuItem extends React.Component< ActionsMenuItemProps, {} > const commandName = this.props.intl.formatMessage({ id: `Command.${this.props.itemKey}` }); const commandNameShort = this.props.intl.formatMessage({ id: `Command.short.${this.props.itemKey}` }); - const actionNameKey = this.props.isAllowed ? "ActionsMenu.item.action.show" : "ActionsMenu.item.action.hide"; + const actionNameKey = this.props.isAllowed ? "ActionsMenu.item.action.show" :"ActionsMenu.item.action.hide"; const actionName = this.props.intl.formatMessage({ id: actionNameKey }); - // If we're used, show one message. If we're not, show another that differs based on `isAllowed`. - const showHideLabelKey = this.props.isUsed ? "ActionsMenu.item.usedItemToggleLabel" : "ActionsMenu.item.unusedItemToggleLabel"; + let showHideLabelKey = "ActionsMenu.item.usedItemToggleLabel"; + if (this.props.isSelected) { + showHideLabelKey = "ActionsMenu.item.selectedActionToggleLabel"; + } + else if (!this.props.isUsed) { showHideLabelKey = "ActionsMenu.item.unusedItemToggleLabel"; } const showHideLabel = this.props.intl.formatMessage( { id: showHideLabelKey }, { action: actionName, commandName: commandName } ); - const showHideAriaLabelKey = this.props.isUsed ? "ActionsMenu.item.usedItemToggleAriaLabel" : "ActionsMenu.item.unusedItemToggleAriaLabel"; + let showHideAriaLabelKey = "ActionsMenu.item.unusedItemToggleAriaLabel"; + if (this.props.isSelected) { + showHideAriaLabelKey ="ActionsMenu.item.selectedActionToggleAriaLabel"; + } + else if (this.props.isUsed) { + showHideAriaLabelKey = "ActionsMenu.item.usedItemToggleAriaLabel"; + } + const showHideAriaLabel = this.props.intl.formatMessage( { id: showHideAriaLabelKey }, { action: actionName, commandName: commandName } ); - return (
diff --git a/src/ActionsMenuItem.scss b/src/ActionsMenuItem.scss index ff553807..4ba84048 100644 --- a/src/ActionsMenuItem.scss +++ b/src/ActionsMenuItem.scss @@ -6,6 +6,7 @@ .ActionsMenuItem__checkbox { margin: auto 0; + margin-right: 0.2rem; } .ActionsMenuItem__option { @@ -15,7 +16,7 @@ float: right; justify-content: space-between; padding: 0.2rem 0; - width: 4rem; + width: 5rem; } .ActionsMenuItem__option-label { diff --git a/src/App.js b/src/App.js index 353f51c1..367822cf 100644 --- a/src/App.js +++ b/src/App.js @@ -928,7 +928,7 @@ export class App extends React.Component { // TODO: Use the function form of setState() as the new state // depends on the current state const currentIsAllowed = this.state.allowedActions[commandName]; - if (this.state.programSequence.usesAction(commandName) && currentIsAllowed) { + if (commandName === this.state.selectedAction || (this.state.programSequence.usesAction(commandName) && currentIsAllowed)) { event.preventDefault(); } else { @@ -1223,6 +1223,7 @@ export class App extends React.Component { changeHandler={this.handleToggleAllowedCommand} editingDisabled={this.editingIsDisabled()} programSequence={this.state.programSequence} + selectedAction={this.state.selectedAction} intl={this.props.intl} />
diff --git a/src/messages.json b/src/messages.json index 51473854..bb787ec4 100644 --- a/src/messages.json +++ b/src/messages.json @@ -7,6 +7,8 @@ "ActionPanel.selectedCommandName": "with selected action {selectedCommandName}", "ActionsMenu.item.action.hide": "Hide", "ActionsMenu.item.action.show": "Show", + "ActionsMenu.item.selectedActionToggleAriaLabel": "{commandName} is currently selected and cannot be disabled", + "ActionsMenu.item.selectedActionToggleLabel": "(Selected)", "ActionsMenu.item.unusedItemToggleAriaLabel": "{action} {commandName}", "ActionsMenu.item.unusedItemToggleLabel": "{action}", "ActionsMenu.item.usedItemToggleAriaLabel": "{commandName} is used in the program and cannot be disabled",