diff --git a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss index 6f387380f24..c4e5b5c0aa0 100644 --- a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss +++ b/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss @@ -15,31 +15,26 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_KeyboardUserSettingsTab .mx_SettingsTab_section { - ul { - margin: 0; - padding: 0; - } - - .mx_KeyboardShortcut_shortcutRow, - .mx_KeyboardShortcut { - display: flex; - justify-content: space-between; - align-items: center; - } +.mx_KeyboardShortcut_shortcutList { + margin: 0; + padding: 0; + width: 100%; + display: grid; + grid-gap: $spacing-4; +} - .mx_KeyboardShortcut_shortcutRow { - column-gap: $spacing-8; - margin-bottom: $spacing-4; +.mx_KeyboardShortcut_shortcutRow, +.mx_KeyboardShortcut { + display: flex; + justify-content: space-between; + align-items: center; +} - /* TODO: Use flexbox */ - &:last-of-type { - margin-bottom: 0; - } +.mx_KeyboardShortcut_shortcutRow { + column-gap: $spacing-8; +} - .mx_KeyboardShortcut { - flex-wrap: nowrap; - column-gap: 5px; /* TODO: Use a spacing variable */ - } - } +.mx_KeyboardShortcut { + flex-wrap: nowrap; + column-gap: $spacing-4; } diff --git a/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx b/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx index c08ee2381fc..f64c1ce87b5 100644 --- a/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx @@ -25,6 +25,9 @@ import { getKeyboardShortcutValue, } from "../../../../../accessibility/KeyboardShortcutUtils"; import { KeyboardShortcut } from "../../KeyboardShortcut"; +import SettingsTab from "../SettingsTab"; +import { SettingsSection } from "../../shared/SettingsSection"; +import SettingsSubsection from "../../shared/SettingsSubsection"; interface IKeyboardShortcutRowProps { name: KeyBindingAction; @@ -57,26 +60,27 @@ const KeyboardShortcutSection: React.FC = ({ cate if (!category.categoryLabel) return null; return ( -
-
{_t(category.categoryLabel)}
-
+ ); }; const KeyboardUserSettingsTab: React.FC = () => { return ( -
-
{_t("Keyboard")}
- {visibleCategories.map(([categoryName, category]) => { - return ; - })} -
+ + + {visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => { + return ( + + ); + })} + + ); }; diff --git a/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap index 112497f7bfe..9d0badffdad 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap @@ -3,1023 +3,1091 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
- Keyboard -
-
-
- Composer -
-
    - -
  • - Send message -
    - - - Enter - - -
    -
    • -
  • - New line -
    - - - Shift - - - + - - - Enter - - -
    -
    • -
  • - Toggle Bold -
    - - - Ctrl - - - + - - - b - - -
    -
    • -
  • - Toggle Italics -
    - - - Ctrl - - - + - - - i - - -
    -
    • -
  • - Toggle Quote -
    - - - Ctrl - - - + - - - Shift - - - + - - - > - - -
    -
    • -
  • - Toggle Link -
    - - - Ctrl - - - + - - - Shift - - - + - - - l - - -
    -
    • -
  • - Toggle Code Block -
    - - - Ctrl - - - + - - - e - - -
    -
    • -
  • - Undo edit -
    - - - Ctrl - - - + - - - z - - -
    -
    • -
  • - Redo edit -
    - - - Ctrl - - - + - - - y - - -
    -
    • -
  • - Jump to start of the composer -
    - - - Ctrl - - - + - - - Home - - -
    -
    • -
  • - Jump to end of the composer -
    - - - Ctrl - - - + - - - End - - -
    -
    • -
  • - Cancel replying to a message -
    - - - Esc - - -
    -
    • -
  • - Navigate to next message to edit -
    - - - ↓ - - -
    -
    • -
  • - Navigate to previous message to edit -
    - - - ↑ - - -
    -
    • -
  • - Navigate to next message in composer history -
    - - - Ctrl - - - + - - - Alt - - - + - - - ↓ - - -
    -
    • -
  • - Navigate to previous message in composer history -
    - - - Ctrl - - - + - - - Alt - - - + - - - ↑ - - -
    -
    • -
  • - Send a sticker -
    - - - Ctrl - - - + - - - ; - - -
    -
    • - -
-
-
-
- Calls -
-
    - -
  • - Toggle microphone mute -
    - - - Ctrl - - - + - - - d - - -
    -
    • -
  • - Toggle webcam on/off -
    - - - Ctrl - - - + - - - e - - -
    -
    • - -
-
-
-
- Room -
-
    - -
  • - Search (must be enabled) -
    - - - Ctrl - - - + - - - f - - -
    -
    • -
  • - Upload a file -
    - - - Ctrl - - - + - - - Shift - - - + - - - u - - -
    -
    • -
  • - Dismiss read marker and jump to bottom -
    - - - Esc - - -
    -
    • -
  • - Jump to oldest unread message -
    - - - Shift - - - + - - - Page Up - - -
    -
    • -
  • - Scroll up in the timeline -
    - - - Page Up - - -
    -
    • -
  • - Scroll down in the timeline -
    - - - Page Down - - -
    -
    • -
  • - Jump to first message -
    - - - Ctrl - - - + - - - Home - - -
    -
    • -
  • - Jump to last message -
    - - - Ctrl - - - + - - - End - - -
    -
    • - -
-
-
-
- Room List -
-
    - -
  • - Select room from the room list -
    - - - Enter - - -
    -
    • -
  • - Collapse room list section -
    - - - ← - - -
    -
    • -
  • - Expand room list section -
    - - - → - - -
    -
    • -
  • - Navigate down in the room list -
    - - - ↓ - - -
    -
    • -
  • - Navigate up in the room list -
    - - - ↑ - - -
    -
    • - -
-
-
-
- Accessibility -
-
    - -
  • - Close dialog or context menu -
    - - - Esc - - -
    -
    • -
  • - Activate selected button -
    - - - Enter - - -
    -
    • - -
-
-
- Navigation -
-
    - -
  • - Toggle the top left menu -
    - - - Ctrl - - - + - - - \` - - -
    -
    • -
  • +
    - Toggle right panel
    - - - Ctrl - - - + - - - . - - +
    +

    + Composer +

    +
    +
    +
      +
    • + Send message +
      + + + Enter + + +
      +
      • +
    • + New line +
      + + + Shift + + + + + + + Enter + + +
      +
      • +
    • + Toggle Bold +
      + + + Ctrl + + + + + + + b + + +
      +
      • +
    • + Toggle Italics +
      + + + Ctrl + + + + + + + i + + +
      +
      • +
    • + Toggle Quote +
      + + + Ctrl + + + + + + + Shift + + + + + + + > + + +
      +
      • +
    • + Toggle Link +
      + + + Ctrl + + + + + + + Shift + + + + + + + l + + +
      +
      • +
    • + Toggle Code Block +
      + + + Ctrl + + + + + + + e + + +
      +
      • +
    • + Undo edit +
      + + + Ctrl + + + + + + + z + + +
      +
      • +
    • + Redo edit +
      + + + Ctrl + + + + + + + y + + +
      +
      • +
    • + Jump to start of the composer +
      + + + Ctrl + + + + + + + Home + + +
      +
      • +
    • + Jump to end of the composer +
      + + + Ctrl + + + + + + + End + + +
      +
      • +
    • + Cancel replying to a message +
      + + + Esc + + +
      +
      • +
    • + Navigate to next message to edit +
      + + + ↓ + + +
      +
      • +
    • + Navigate to previous message to edit +
      + + + ↑ + + +
      +
      • +
    • + Navigate to next message in composer history +
      + + + Ctrl + + + + + + + Alt + + + + + + + ↓ + + +
      +
      • +
    • + Navigate to previous message in composer history +
      + + + Ctrl + + + + + + + Alt + + + + + + + ↑ + + +
      +
      • +
    • + Send a sticker +
      + + + Ctrl + + + + + + + ; + + +
      +
      • +
    +
    -
    • -
  • - Toggle space panel
    - - - Ctrl - - - + - - - Shift - - - + - - - d - - +
    +

    + Calls +

    +
    +
    +
      +
    • + Toggle microphone mute +
      + + + Ctrl + + + + + + + d + + +
      +
      • +
    • + Toggle webcam on/off +
      + + + Ctrl + + + + + + + e + + +
      +
      • +
    +
    -
    • -
  • - Open this settings tab
    - - - Ctrl - - - + - - - / - - +
    +

    + Room +

    +
    +
    +
      +
    • + Search (must be enabled) +
      + + + Ctrl + + + + + + + f + + +
      +
      • +
    • + Upload a file +
      + + + Ctrl + + + + + + + Shift + + + + + + + u + + +
      +
      • +
    • + Dismiss read marker and jump to bottom +
      + + + Esc + + +
      +
      • +
    • + Jump to oldest unread message +
      + + + Shift + + + + + + + Page Up + + +
      +
      • +
    • + Scroll up in the timeline +
      + + + Page Up + + +
      +
      • +
    • + Scroll down in the timeline +
      + + + Page Down + + +
      +
      • +
    • + Jump to first message +
      + + + Ctrl + + + + + + + Home + + +
      +
      • +
    • + Jump to last message +
      + + + Ctrl + + + + + + + End + + +
      +
      • +
    +
    -
    • -
  • - Go to Home View
    - - - Ctrl - - - + - - - Alt - - - + - - - h - - +
    +

    + Room List +

    +
    +
    +
      +
    • + Select room from the room list +
      + + + Enter + + +
      +
      • +
    • + Collapse room list section +
      + + + ← + + +
      +
      • +
    • + Expand room list section +
      + + + → + + +
      +
      • +
    • + Navigate down in the room list +
      + + + ↓ + + +
      +
      • +
    • + Navigate up in the room list +
      + + + ↑ + + +
      +
      • +
    +
    -
    • -
  • - Jump to room search
    - - - Ctrl - - - + - - - k - - +
    +

    + Accessibility +

    +
    +
    +
      +
    • + Close dialog or context menu +
      + + + Esc + + +
      +
      • +
    • + Activate selected button +
      + + + Enter + + +
      +
      • +
    +
    -
    • -
  • - Next unread room or DM
    - - - Alt - - - + - - - Shift - - - + - - - ↓ - - +
    +

    + Navigation +

    +
    +
    +
      +
    • + Toggle the top left menu +
      + + + Ctrl + + + + + + + \` + + +
      +
      • +
    • + Toggle right panel +
      + + + Ctrl + + + + + + + . + + +
      +
      • +
    • + Toggle space panel +
      + + + Ctrl + + + + + + + Shift + + + + + + + d + + +
      +
      • +
    • + Open this settings tab +
      + + + Ctrl + + + + + + + / + + +
      +
      • +
    • + Go to Home View +
      + + + Ctrl + + + + + + + Alt + + + + + + + h + + +
      +
      • +
    • + Jump to room search +
      + + + Ctrl + + + + + + + k + + +
      +
      • +
    • + Next unread room or DM +
      + + + Alt + + + + + + + Shift + + + + + + + ↓ + + +
      +
      • +
    • + Previous unread room or DM +
      + + + Alt + + + + + + + Shift + + + + + + + ↑ + + +
      +
      • +
    • + Next room or DM +
      + + + Alt + + + + + + + ↓ + + +
      +
      • +
    • + Previous room or DM +
      + + + Alt + + + + + + + ↑ + + +
      +
      • +
    +
    -
    • -
  • - Previous unread room or DM
    - - - Alt - - - + - - - Shift - - - + - - - ↑ - - +
    +

    + Autocomplete +

    +
    +
    +
      +
    • + Cancel autocomplete +
      + + + Esc + + +
      +
      • +
    • + Next autocomplete suggestion +
      + + + ↓ + + +
      +
      • +
    • + Previous autocomplete suggestion +
      + + + ↑ + + +
      +
      • +
    • + Complete +
      + + + Enter + + +
      +
      • +
    • + Force complete +
      + + + Tab + + +
      +
      • +
    +
    -
    • -
  • - Next room or DM -
    - - - Alt - - - + - - - ↓ - - -
    -
    • -
  • - Previous room or DM -
    - - - Alt - - - + - - - ↑ - - -
    -
    • - -
-
-
-
- Autocomplete +
-
    - -
  • - Cancel autocomplete -
    - - - Esc - - -
    -
    • -
  • - Next autocomplete suggestion -
    - - - ↓ - - -
    -
    • -
  • - Previous autocomplete suggestion -
    - - - ↑ - - -
    -
    • -
  • - Complete -
    - - - Enter - - -
    -
    • -
  • - Force complete -
    - - - Tab - - -
    -
    • - -