From 50dc78580991a72709816f2d94dff4f252392e27 Mon Sep 17 00:00:00 2001 From: Katarzyna Stachura Date: Wed, 19 Jan 2022 22:51:45 +0100 Subject: [PATCH] Add a keyboard shortcut to toggle hidden event visibility when labs are enabled. Notes: The keyboard shortcut is control (or cmd) shift h. Signed-off-by: Katarzyna Stachura --- src/KeyBindingsDefaults.ts | 20 +++++++++++++ src/KeyBindingsManager.ts | 11 +++++++ src/accessibility/KeyboardShortcuts.ts | 14 +++++++++ src/components/structures/LoggedInView.tsx | 30 ++++++++++++++++++- .../tabs/user/KeyboardUserSettingsTab.tsx | 7 ++++- src/i18n/strings/en_EN.json | 3 +- 6 files changed, 82 insertions(+), 3 deletions(-) diff --git a/src/KeyBindingsDefaults.ts b/src/KeyBindingsDefaults.ts index 468d9989520..f3d44ea318c 100644 --- a/src/KeyBindingsDefaults.ts +++ b/src/KeyBindingsDefaults.ts @@ -22,9 +22,11 @@ import { NavigationAction, RoomAction, RoomListAction, + LabsAction, } from "./KeyBindingsManager"; import { isMac, Key } from "./Keyboard"; import SettingsStore from "./settings/SettingsStore"; +import SdkConfig from "./SdkConfig"; const messageComposerBindings = (): KeyBinding[] => { const bindings: KeyBinding[] = [ @@ -411,10 +413,28 @@ const navigationBindings = (): KeyBinding[] => { ]; }; +const labsBindings = (): KeyBinding[] => { + if (!SdkConfig.get()['showLabsSettings']) { + return []; + } + + return [ + { + action: LabsAction.ToggleHiddenEventVisibility, + keyCombo: { + key: Key.H, + ctrlOrCmd: true, + shiftKey: true, + }, + }, + ]; +}; + export const defaultBindingsProvider: IKeyBindingsProvider = { getMessageComposerBindings: messageComposerBindings, getAutocompleteBindings: autocompleteBindings, getRoomListBindings: roomListBindings, getRoomBindings: roomBindings, getNavigationBindings: navigationBindings, + getLabsBindings: labsBindings, }; diff --git a/src/KeyBindingsManager.ts b/src/KeyBindingsManager.ts index 047e0b74c24..37142baedd2 100644 --- a/src/KeyBindingsManager.ts +++ b/src/KeyBindingsManager.ts @@ -125,6 +125,12 @@ export enum NavigationAction { SelectNextUnreadRoom = 'SelectNextUnreadRoom', } +/** Actions only available when labs are enabled */ +export enum LabsAction { + /** Toggle visibility of hidden events */ + ToggleHiddenEventVisibility = 'ToggleHiddenEventVisibility', +} + /** * Represent a key combination. * @@ -213,6 +219,7 @@ export interface IKeyBindingsProvider { getRoomListBindings: KeyBindingGetter; getRoomBindings: KeyBindingGetter; getNavigationBindings: KeyBindingGetter; + getLabsBindings: KeyBindingGetter; } export class KeyBindingsManager { @@ -264,6 +271,10 @@ export class KeyBindingsManager { getNavigationAction(ev: KeyboardEvent | React.KeyboardEvent): NavigationAction | undefined { return this.getAction(this.bindingsProviders.map(it => it.getNavigationBindings), ev); } + + getLabsAction(ev: KeyboardEvent | React.KeyboardEvent): LabsAction | undefined { + return this.getAction(this.bindingsProviders.map(it => it.getLabsBindings), ev); + } } const manager = new KeyBindingsManager(); diff --git a/src/accessibility/KeyboardShortcuts.ts b/src/accessibility/KeyboardShortcuts.ts index 4659a4258c2..884d69d8268 100644 --- a/src/accessibility/KeyboardShortcuts.ts +++ b/src/accessibility/KeyboardShortcuts.ts @@ -31,6 +31,7 @@ export enum CategoryName { ROOM_LIST = "Room List", ROOM = "Room", AUTOCOMPLETE = "Autocomplete", + LABS = "Labs", } // Meta-key representing the digits [0-9] often found at the top of standard keyboard layouts @@ -125,6 +126,11 @@ export const CATEGORIES: Record = { "KeyBinding.nextOptionInAutoComplete", "KeyBinding.previousOptionInAutoComplete", ], + }, [CategoryName.LABS]: { + categoryLabel: _td("Labs"), + settingNames: [ + "KeyBinding.toggleHiddenEventVisibility", + ], }, }; @@ -402,6 +408,14 @@ export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = { }, displayName: _td("Toggle space panel"), }, + "KeyBinding.toggleHiddenEventVisibility": { + default: { + ctrlOrCmdKey: true, + shiftKey: true, + key: Key.H, + }, + displayName: _td("Toggle hidden event visibility"), + }, }; export const registerShortcut = (shortcutName: string, categoryName: CategoryName, shortcut: ISetting): void => { diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index ee25d585895..14d1e53ab65 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -29,6 +29,7 @@ import { fixupColorFonts } from '../../utils/FontManager'; import dis from '../../dispatcher/dispatcher'; import { IMatrixClientCreds } from '../../MatrixClientPeg'; import SettingsStore from "../../settings/SettingsStore"; +import { SettingLevel } from "../../settings/SettingLevel"; import ResizeHandle from '../views/elements/ResizeHandle'; import { CollapseDistributor, Resizer } from '../../resizer'; import MatrixClientContext from "../../contexts/MatrixClientContext"; @@ -47,7 +48,7 @@ import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore"; import Modal from "../../Modal"; import { ICollapseConfig } from "../../resizer/distributors/collapse"; import HostSignupContainer from '../views/host_signup/HostSignupContainer'; -import { getKeyBindingsManager, NavigationAction, RoomAction } from '../../KeyBindingsManager'; +import { getKeyBindingsManager, NavigationAction, RoomAction, LabsAction } from '../../KeyBindingsManager'; import { IOpts } from "../../createRoom"; import SpacePanel from "../views/spaces/SpacePanel"; import { replaceableComponent } from "../../utils/replaceableComponent"; @@ -531,6 +532,33 @@ class LoggedInView extends React.Component { // if we do not have a handler for it, pass it to the platform which might handled = PlatformPeg.get().onKeyDown(ev); } + + // Handle labs actions here, as they apply within the same scope + if (!handled) { + const labsAction = getKeyBindingsManager().getLabsAction(ev); + switch (labsAction) { + case LabsAction.ToggleHiddenEventVisibility: { + const hiddenEventVisibility = SettingsStore.getValueAt( + SettingLevel.DEVICE, + 'showHiddenEventsInTimeline', + undefined, + false, + ); + SettingsStore.setValue( + 'showHiddenEventsInTimeline', + undefined, + SettingLevel.DEVICE, + !hiddenEventVisibility, + ); + handled = true; + break; + } + default: + // if we do not have a handler for it, pass it to the platform which might + handled = PlatformPeg.get().onKeyDown(ev); + } + } + if (handled) { ev.stopPropagation(); ev.preventDefault(); diff --git a/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx b/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx index 8759a04a5cb..2950bd77624 100644 --- a/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx @@ -25,6 +25,7 @@ import { CATEGORIES, CategoryName, } from "../../../../../accessibility/KeyboardShortcuts"; +import SdkConfig from "../../../../../SdkConfig"; import { isMac, Key } from "../../../../../Keyboard"; import { _t } from "../../../../../languageHandler"; @@ -76,6 +77,10 @@ interface IKeyboardShortcutRowProps { name: string; } +// Filter out the labs section if labs aren't enabled. +const visibleCategories = Object.entries(CATEGORIES).filter(([categoryName]) => + categoryName !== CategoryName.LABS || SdkConfig.get()['showLabsSettings']); + const KeyboardShortcutRow: React.FC = ({ name }) => { return
{ KEYBOARD_SHORTCUTS[name].displayName } @@ -100,7 +105,7 @@ const KeyboardShortcutSection: React.FC = ({ cate const KeyboardUserSettingsTab: React.FC = () => { return
{ _t("Keyboard") }
- { Object.entries(CATEGORIES).map(([categoryName, category]: [CategoryName, ICategory]) => { + { visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => { return ; }) }
; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index bc8f8a60d41..28e754c257b 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3414,5 +3414,6 @@ "Cancel autocomplete": "Cancel autocomplete", "Next autocomplete suggestion": "Next autocomplete suggestion", "Previous autocomplete suggestion": "Previous autocomplete suggestion", - "Toggle space panel": "Toggle space panel" + "Toggle space panel": "Toggle space panel", + "Toggle hidden event visibility": "Toggle hidden event visibility" }