From 351636cfa70659fd9d9c92041163565d9f01e507 Mon Sep 17 00:00:00 2001 From: Linda Paiste Date: Sun, 6 Aug 2023 16:31:22 -0500 Subject: [PATCH] Convert KeyboardShortcutModal to styled-components. --- .../IDE/components/KeyboardShortcutModal.jsx | 218 ++++++++++-------- .../components/_keyboard-shortcuts.scss | 50 ---- client/styles/main.scss | 1 - translations/locales/en-US/translations.json | 4 +- 4 files changed, 131 insertions(+), 142 deletions(-) delete mode 100644 client/styles/components/_keyboard-shortcuts.scss diff --git a/client/modules/IDE/components/KeyboardShortcutModal.jsx b/client/modules/IDE/components/KeyboardShortcutModal.jsx index 093630498a..d372f20ad5 100644 --- a/client/modules/IDE/components/KeyboardShortcutModal.jsx +++ b/client/modules/IDE/components/KeyboardShortcutModal.jsx @@ -1,17 +1,81 @@ +import PropTypes from 'prop-types'; import React from 'react'; import { useTranslation } from 'react-i18next'; +import styled from 'styled-components'; +import { prop, remSize } from '../../../theme'; import { metaKeyName, metaKey } from '../../../utils/metaKey'; +const Container = styled.div` + margin-right: ${remSize(20)}; + padding: ${remSize(20)}; + padding-top: ${remSize(10)}; + padding-bottom: ${remSize(40)}; + width: ${remSize(450)}; + overflow-y: auto; +`; + +const Command = styled.span` + font-weight: bold; + margin-right: ${remSize(10)}; + padding: ${remSize(3)}; + border: 1px solid ${prop('Button.primary.default.border')}; + border-radius: 3px; +`; + +const ShortcutsList = styled.ul` + &:not(:last-of-type) { + padding-bottom: ${remSize(10)}; + border-bottom: 1px dashed ${prop('Button.primary.default.border')}; + } +`; + +const Item = styled.li` + display: flex; + align-items: baseline; + margin-top: ${remSize(10)}; +`; + +const SectionTitle = styled.h3` + margin: ${remSize(10)} 0; +`; + +const Shortcut = ({ children, keys, meta, shift, alt }) => { + let command = ''; + if (meta) command += `${metaKeyName} + `; + if (alt) command += '⌥ +'; + if (shift) command += '\u21E7 + '; + command += keys; + + return ( + + {command} + {children} + + ); +}; + +Shortcut.propTypes = { + children: PropTypes.string.isRequired, + keys: PropTypes.string.isRequired, + meta: PropTypes.bool, + shift: PropTypes.bool, + alt: PropTypes.bool +}; + +Shortcut.defaultProps = { + meta: false, + shift: false, + alt: false +}; + function KeyboardShortcutModal() { const { t } = useTranslation(); - const replaceCommand = - metaKey === 'Ctrl' ? `${metaKeyName} + H` : `${metaKeyName} + ⌥ + F`; return ( -
-

+ + {t('KeyboardShortcuts.CodeEditing.CodeEditing')} -

-

+ +

{t('KeyboardShortcuts.ShortcutsFollow')}{' '} .

-
    -
  • - - {metaKeyName} + {'\u21E7'} + F - - {t('KeyboardShortcuts.CodeEditing.Tidy')} -
    • -
  • - {metaKeyName} + F - {t('KeyboardShortcuts.CodeEditing.FindText')} -
    • -
  • - {metaKeyName} + G - {t('KeyboardShortcuts.CodeEditing.FindNextTextMatch')} -
    • -
  • - - {metaKeyName} + {'\u21E7'} + G - - - {t('KeyboardShortcuts.CodeEditing.FindPreviousTextMatch')} - -
    • -
  • - {replaceCommand} - {t('KeyboardShortcuts.CodeEditing.ReplaceTextMatch')} -
    • -
  • - {metaKeyName} + [ - {t('KeyboardShortcuts.CodeEditing.IndentCodeLeft')} -
    • -
  • - {metaKeyName} + ] - {t('KeyboardShortcuts.CodeEditing.IndentCodeRight')} -
    • -
  • - {metaKeyName} + / - {t('KeyboardShortcuts.CodeEditing.CommentLine')} -
    • -
  • - {metaKeyName} + . - {t('KeyboardShortcuts.CodeEditing.CommentLine')} -
    • -
  • - {metaKeyName} + K - {t('KeyboardShortcuts.CodeEditing.ColorPicker')} -
    • -
-

General

-
    -
  • - {metaKeyName} + S - {t('Common.Save')} -
    • -
  • - - {metaKeyName} + Enter - - {t('KeyboardShortcuts.General.StartSketch')} -
    • -
  • - - {metaKeyName} + {'\u21E7'} + Enter - - {t('KeyboardShortcuts.General.StopSketch')} -
    • -
  • - - {metaKeyName} + {'\u21E7'} + 1 - - {t('KeyboardShortcuts.General.TurnOnAccessibleOutput')} -
    • -
  • - - {metaKeyName} + {'\u21E7'} + 2 - - {t('KeyboardShortcuts.General.TurnOffAccessibleOutput')} -
    • -
  • - {'\u21E7'} + Right - Go to Reference for Selected Item in Hinter -
    • -
-
+ + + {t('KeyboardShortcuts.CodeEditing.Tidy')} + + + {t('KeyboardShortcuts.CodeEditing.FindText')} + + + {t('KeyboardShortcuts.CodeEditing.FindNextTextMatch')} + + + {t('KeyboardShortcuts.CodeEditing.FindPreviousTextMatch')} + + + {t('KeyboardShortcuts.CodeEditing.ReplaceTextMatch')} + + + {t('KeyboardShortcuts.CodeEditing.IndentCodeLeft')} + + + {t('KeyboardShortcuts.CodeEditing.IndentCodeRight')} + + + {t('KeyboardShortcuts.CodeEditing.CommentLine')} + + + {t('KeyboardShortcuts.CodeEditing.CommentLine')} + + + {t('KeyboardShortcuts.CodeEditing.ColorPicker')} + + + {t('KeyboardShortcuts.General.General')} + + + {t('Common.Save')} + + + {t('KeyboardShortcuts.General.StartSketch')} + + + {t('KeyboardShortcuts.General.StopSketch')} + + + {t('KeyboardShortcuts.General.TurnOnAccessibleOutput')} + + + {t('KeyboardShortcuts.General.TurnOffAccessibleOutput')} + + + {t('KeyboardShortcuts.General.GoToReference')} + + + ); } diff --git a/client/styles/components/_keyboard-shortcuts.scss b/client/styles/components/_keyboard-shortcuts.scss deleted file mode 100644 index 1b621d7b94..0000000000 --- a/client/styles/components/_keyboard-shortcuts.scss +++ /dev/null @@ -1,50 +0,0 @@ -.keyboard-shortcuts { - padding: #{20 / $base-font-size}rem; - margin-right: #{20 / $base-font-size}rem; - padding-bottom: #{40 / $base-font-size}rem; - width: #{450 / $base-font-size}rem; - overflow-y: auto; -} - -.keyboard-shortcuts-note { - text-align: center; - margin-bottom: 24px; -} - -.keyboard-shortcut-item { - display: flex; - & + & { - margin-top: #{10 / $base-font-size}rem; - } - align-items: baseline; -} - -.keyboard-shortcut__command { - font-weight: bold; - text-align: right; - margin-right: #{10 / $base-font-size}rem; - padding: #{3 / $base-font-size}rem; - @include themify { - border: 1px solid getThemifyVariable("button-border-color"); - border-radius: 3px; - } -} - -.keyboard-shortcuts__title { - padding-bottom: #{10 / $base-font-size}rem; -} - -.keyboard-shortcuts__description { - padding-bottom: #{10 / $base-font-size}rem; -} - -.keyboard-shortcuts__list:not(:last-of-type) { - padding-bottom: #{10 / $base-font-size}rem; -} - -.keyboard-shortcuts__title:not(:first-of-type) { - @include themify() { - border-top: 1px dashed getThemifyVariable("button-border-color"); - padding-top: #{10 / $base-font-size}rem; - } -} diff --git a/client/styles/main.scss b/client/styles/main.scss index 9018fe6273..2d2399d35b 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -42,7 +42,6 @@ @import 'components/share'; @import 'components/asset-list'; @import 'components/asset-size'; -@import 'components/keyboard-shortcuts'; @import 'components/copyable-input'; @import 'components/feedback'; @import 'components/console-input'; diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index 0d1b2979b3..b07eb45d56 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -195,10 +195,12 @@ "ColorPicker": "Show Inline Color Picker" }, "General": { + "General": "General", "StartSketch": "Start Sketch", "StopSketch": "Stop Sketch", "TurnOnAccessibleOutput": "Turn On Accessible Output", - "TurnOffAccessibleOutput": "Turn Off Accessible Output" + "TurnOffAccessibleOutput": "Turn Off Accessible Output", + "GoToReference": "Go to Reference for Selected Item in Hinter" } }, "Sidebar": {