[MIRROR] Add reset keybindings button, fix scaling on tabbed list buttons [MDB IGNORE] (#8740)

* Add reset keybindings button (#61942)

* Add reset keybindings button, fix scaling on tabbed list buttons

Co-authored-by: Mothblocks <35135081+Mothblocks@users.noreply.github.com>
This commit is contained in:
SkyratBot
2021-10-10 15:38:25 +01:00
committed by GitHub
co-authored by Mothblocks
parent 353051bce7
commit a210a8b479
3 changed files with 70 additions and 49 deletions
@@ -3,6 +3,7 @@
/// Middleware to handle keybindings
/datum/preference_middleware/keybindings
action_delegations = list(
"reset_all_keybinds" = .proc/reset_all_keybinds,
"reset_keybinds_to_defaults" = .proc/reset_keybinds_to_defaults,
"set_keybindings" = .proc/set_keybindings,
)
@@ -22,6 +23,13 @@
get_asset_datum(/datum/asset/json/keybindings)
)
/datum/preference_middleware/keybindings/proc/reset_all_keybinds(list/params, mob/user)
preferences.key_bindings = deepCopyList(GLOB.default_hotkeys)
preferences.key_bindings_by_key = preferences.get_key_bindings_by_key(preferences.key_bindings)
preferences.update_static_data(user)
return TRUE
/datum/preference_middleware/keybindings/proc/reset_keybinds_to_defaults(list/params, mob/user)
var/keybind_name = params["keybind_name"]
var/datum/keybinding/keybinding = GLOB.keybindings_by_name[keybind_name]
@@ -374,6 +374,7 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
}
render() {
const { act } = useBackend(this.context);
const keybindings = this.state.keybindings;
if (!keybindings) {
@@ -394,58 +395,70 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
onKeyUp={this.handleKeyUp}
/>
<TabbedMenu
categoryEntries={keybindingEntries.map(
([category, keybindings]) => {
return [category, (
<Stack key={category} vertical fill>
{sortKeybindings(Object.entries(keybindings)).map(
([keybindingId, keybinding]) => {
const keys
<Stack vertical fill>
<Stack.Item grow>
<TabbedMenu
categoryEntries={keybindingEntries.map(
([category, keybindings]) => {
return [category, (
<Stack key={category} vertical fill>
{sortKeybindings(Object.entries(keybindings)).map(
([keybindingId, keybinding]) => {
const keys
= this.state.selectedKeybindings![keybindingId]
|| [];
const name = (
<Stack.Item basis="25%">
<KeybindingName keybinding={keybinding} />
</Stack.Item>
);
return (
<Stack.Item key={keybindingId}>
<Stack fill>
{name}
{range(0, 3).map(key => (
<Stack.Item key={key} grow basis="10%">
<KeybindingButton
currentHotkey={keys[key]}
typingHotkey={this.getTypingHotkey(
keybindingId,
key,
)}
onClick={this.getKeybindingOnClick(
keybindingId,
key,
)}
/>
</Stack.Item>
))}
<Stack.Item shrink>
<ResetToDefaultButton
keybindingId={keybindingId} />
const name = (
<Stack.Item basis="25%">
<KeybindingName keybinding={keybinding} />
</Stack.Item>
</Stack>
</Stack.Item>
);
}
)}
</Stack>
)];
}
)}
/>
);
return (
<Stack.Item key={keybindingId}>
<Stack fill>
{name}
{range(0, 3).map(key => (
<Stack.Item key={key} grow basis="10%">
<KeybindingButton
currentHotkey={keys[key]}
typingHotkey={this.getTypingHotkey(
keybindingId,
key,
)}
onClick={this.getKeybindingOnClick(
keybindingId,
key,
)}
/>
</Stack.Item>
))}
<Stack.Item shrink>
<ResetToDefaultButton
keybindingId={keybindingId} />
</Stack.Item>
</Stack>
</Stack.Item>
);
}
)}
</Stack>
)];
}
)}
/>
</Stack.Item>
<Stack.Item align="center">
<Button.Confirm
content="Reset all keybindings"
onClick={() => act("reset_all_keybinds")}
/>
</Stack.Item>
</Stack>
</>
);
}
@@ -26,7 +26,7 @@ export class TabbedMenu extends Component<TabbedMenuProps> {
<Stack fill px={5}>
{this.props.categoryEntries.map(([category]) => {
return (
<Stack.Item key={category} grow>
<Stack.Item key={category} grow basis="content">
<Button
align="center"
fontSize="1.2em"