From 01b4bdd567eb6330ca7e806282998d1f7e70f4fd Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 27 Jan 2025 15:05:33 +0100 Subject: [PATCH 01/24] JS-4924: Shortcuts initial --- electron/js/menu.js | 2 +- src/json/shortcut.ts | 67 ++++++++--- src/json/text.json | 136 ----------------------- src/scss/popup/shortcut.scss | 65 ++++++----- src/ts/component/block/chat/buttons.tsx | 7 +- src/ts/component/header/main/history.tsx | 3 +- src/ts/component/header/main/object.tsx | 3 +- src/ts/component/menu/block/context.tsx | 7 +- src/ts/component/menu/help.tsx | 2 +- src/ts/component/menu/object.tsx | 5 +- src/ts/component/popup/index.tsx | 23 ++-- src/ts/component/popup/search.tsx | 6 +- src/ts/component/popup/shortcut.tsx | 48 ++++---- src/ts/docs/help/whatsNew.ts | 41 +++---- src/ts/lib/keyboard.ts | 26 ++++- src/ts/store/popup.ts | 2 +- 16 files changed, 185 insertions(+), 258 deletions(-) diff --git a/electron/js/menu.js b/electron/js/menu.js index 5848a4e4ac..a6498fe1d0 100644 --- a/electron/js/menu.js +++ b/electron/js/menu.js @@ -179,7 +179,7 @@ class MenuManager { }, { label: Util.translate('electronMenuShortcuts'), accelerator: 'Ctrl+Space', - click: () => Util.send(this.win, 'popup', 'shortcut', {}) + click: () => Util.send(this.win, 'commandGlobal', 'shortcut') }, Separator, diff --git a/src/json/shortcut.ts b/src/json/shortcut.ts index aada98e594..fa63b6be6a 100644 --- a/src/json/shortcut.ts +++ b/src/json/shortcut.ts @@ -1,9 +1,41 @@ import { U, translate, keyboard } from 'Lib'; export default () => { - const cmd = keyboard.cmdSymbol(); + const cmdSymbol = keyboard.cmdSymbol(); + const cmdKey = keyboard.cmdKey(); const alt = keyboard.altSymbol(); + const shift = keyboard.shiftSymbol(); + return [ + { + id: 'shortcut', + name: 'Keyboard Shortcuts', + children: [ + { + name: 'Basics', children: [ + { name: 'Create New Object', keys: [ cmdKey, 'n' ], symbols: [ cmdSymbol, 'N' ] }, + { name: 'Select Type and Create Object', keys: [ cmdKey, alt, 'n' ], symbols: [ cmdSymbol, alt, 'N' ] }, + ] + }, + ] + }, + + { + id: 'markdown', + name: 'Markdown', + children: [ + ] + }, + + { + id: 'command', + name: 'Command Menu', + children: [ + ] + }, + ]; + + /* return [ { id: 'main', @@ -13,24 +45,24 @@ export default () => { name: translate('popupShortcutBasics'), children: [ { com: `${cmd} + N`, name: translate('popupShortcutMainBasics1') }, { com: `${cmd} + ${alt} + N`, name: translate('popupShortcutMainBasics19') }, - { com: `${cmd} + Shift + N`, name: translate('popupShortcutMainBasics2') }, + { com: `${cmd} + ${shift} + N`, name: translate('popupShortcutMainBasics2') }, { com: `${cmd} + Enter`, name: translate('popupShortcutMainBasics4') }, { mac: `${cmd} + Ctrl + F`, com: `${cmd} + ${alt} + F`, name: translate('popupShortcutMainBasics5') }, { com: `${cmd} + Z`, name: translate('popupShortcutMainBasics6') }, - { com: `${cmd} + Shift + Z`, name: translate('popupShortcutMainBasics7') }, + { com: `${cmd} + ${shift} + Z`, name: translate('popupShortcutMainBasics7') }, { com: `${cmd} + P`, name: translate('popupShortcutMainBasics8') }, { com: `${cmd} + F`, name: translate('popupShortcutMainBasics9') }, { com: `${cmd} + Q`, name: translate('popupShortcutMainBasics10') }, { mac: `${cmd} + Y`, com: 'Ctrl + H', name: translate('popupShortcutMainBasics11') }, - { com: 'Shift + Click', name: translate('popupShortcutMainBasics12') }, + { com: '${shift} + Click', name: translate('popupShortcutMainBasics12') }, { com: `${cmd} + Click`, name: translate('popupShortcutMainBasics13') }, { com: 'Ctrl + Space', name: translate('popupShortcutMainBasics14') }, { com: `${cmd} + \\, ${cmd} + .`, name: translate('popupShortcutMainBasics15') }, { com: `${cmd} + =`, name: translate('popupShortcutMainBasics16') }, { com: `${cmd} + Minus`, name: translate('popupShortcutMainBasics17') }, { com: `${cmd} + 0`, name: translate('popupShortcutMainBasics18') }, - { com: `Ctrl + Tab, Ctrl + Shift + Tab`, name: translate('popupShortcutMainBasics20') }, - { com: `${cmd} + Shift + M`, name: translate('popupShortcutMainBasics21') }, + { com: `Ctrl + Tab, Ctrl + ${shift} + Tab`, name: translate('popupShortcutMainBasics20') }, + { com: `${cmd} + ${shift} + M`, name: translate('popupShortcutMainBasics21') }, { com: `${cmd} + ${alt} + L`, name: translate('popupShortcutMainBasics22') }, ] }, @@ -38,10 +70,10 @@ export default () => { { name: translate('popupShortcutMainStructuring'), children: [ { com: 'Enter', name: translate('popupShortcutMainStructuring1') }, - { com: 'Shift + Enter', name: translate('popupShortcutMainStructuring2') }, + { com: `${shift} + Enter`, name: translate('popupShortcutMainStructuring2') }, { com: 'Delete', name: translate('popupShortcutMainStructuring3') }, { com: 'Tab', name: translate('popupShortcutMainStructuring4') }, - { com: 'Shift + Tab', name: translate('popupShortcutMainStructuring5') }, + { com: `${shift} + Tab`, name: translate('popupShortcutMainStructuring5') }, ] }, @@ -50,9 +82,9 @@ export default () => { { com: 'Double Click', name: translate('popupShortcutMainSelection1') }, { com: 'Triple Click', name: translate('popupShortcutMainSelection2') }, { com: `${cmd} + A`, name: translate('popupShortcutMainSelection3') }, - { com: 'Shift + ↑ or ↓', name: translate('popupShortcutMainSelection4') }, + { com: `${shift} + ↑ or ↓`, name: translate('popupShortcutMainSelection4') }, { com: `${cmd} + Click`, name: translate('popupShortcutMainSelection5') }, - { com: 'Shift + Click', name: translate('popupShortcutMainSelection6') }, + { com: `${shift} + Click`, name: translate('popupShortcutMainSelection6') }, ] }, @@ -74,11 +106,11 @@ export default () => { { com: `${cmd} + B`, name: translate('popupShortcutMainTextStyle1') }, { com: `${cmd} + I`, name: translate('popupShortcutMainTextStyle2') }, { com: `${cmd} + U`, name: translate('popupShortcutMainTextStyle3') }, - { com: `${cmd} + Shift +S`, name: translate('popupShortcutMainTextStyle4') }, + { com: `${cmd} + ${shift} +S`, name: translate('popupShortcutMainTextStyle4') }, { com: `${cmd} + K`, name: translate('popupShortcutMainTextStyle5') }, { com: `${cmd} + L`, name: translate('popupShortcutMainTextStyle6') }, - { com: `${cmd} + Shift + C`, name: translate('popupShortcutMainTextStyle7') }, - { com: `${cmd} + Shift + H`, name: translate('popupShortcutMainTextStyle8') }, + { com: `${cmd} + ${shift} + C`, name: translate('popupShortcutMainTextStyle7') }, + { com: `${cmd} + ${shift} + H`, name: translate('popupShortcutMainTextStyle8') }, ] }, ], @@ -103,7 +135,7 @@ export default () => { { name: translate('popupShortcutNavigationMenu'), children: [ { com: '↓ or Tab', name: translate('popupShortcutNavigationMenu1') }, - { com: '↑ or Shift + Tab', name: translate('popupShortcutNavigationMenu2') }, + { com: '↑ or ${shift} + Tab', name: translate('popupShortcutNavigationMenu2') }, { com: '←', name: translate('popupShortcutNavigationMenu3') }, { com: '→', name: translate('popupShortcutNavigationMenu4') }, { com: 'Enter', name: translate('popupShortcutNavigationMenu5') }, @@ -112,15 +144,15 @@ export default () => { { name: translate('popupShortcutNavigationPage'), children: [ - { com: `${cmd} + Shift + T`, name: translate('popupShortcutNavigationPage1') }, + { com: `${cmd} + ${shift} + T`, name: translate('popupShortcutNavigationPage1') }, { com: '↓', name: translate('popupShortcutNavigationPage2') }, { com: '↑', name: translate('popupShortcutNavigationPage3') }, { com: `${cmd} + ←`, name: translate('popupShortcutNavigationPage4') }, { com: `${cmd} + →`, name: translate('popupShortcutNavigationPage5') }, { com: `${cmd} + ↑`, name: translate('popupShortcutNavigationPage6') }, { com: `${cmd} + ↓`, name: translate('popupShortcutNavigationPage7') }, - { com: `${cmd} + Shift + ↑↓`, name: translate('popupShortcutNavigationPage8') }, - { com: `${cmd} + Shift + R`, name: translate('popupShortcutNavigationPage9') }, + { com: `${cmd} + ${shift} + ↑↓`, name: translate('popupShortcutNavigationPage8') }, + { com: `${cmd} + ${shift} + R`, name: translate('popupShortcutNavigationPage9') }, { com: `${cmd} + Enter`, name: translate('popupShortcutNavigationPage10') }, ] }, @@ -223,4 +255,5 @@ export default () => { ], }, ]; + */ }; \ No newline at end of file diff --git a/src/json/text.json b/src/json/text.json index 47175ecddc..2c435f0334 100644 --- a/src/json/text.json +++ b/src/json/text.json @@ -1169,142 +1169,6 @@ "popupIndexComponentNotFound": "Component %s not found", - "popupShortcutMain": "Main", - "popupShortcutNavigation": "Navigation", - "popupShortcutMarkdown": "Markdown", - "popupShortcutCommand": "Commands", - - "popupShortcutBasics": "Basics", - "popupShortcutMainBasics1": "Create new Object", - "popupShortcutMainBasics2": "New Anytype window", - "popupShortcutMainBasics4": "Opens Object in new window from search interface", - "popupShortcutMainBasics5": "Toggle fullscreen", - "popupShortcutMainBasics6": "Undo", - "popupShortcutMainBasics7": "Redo", - "popupShortcutMainBasics8": "Print", - "popupShortcutMainBasics9": "Search in object", - "popupShortcutMainBasics10": "Close Anytype", - "popupShortcutMainBasics11": "Show object edit history", - "popupShortcutMainBasics12": "In Object link will open it in modal view", - "popupShortcutMainBasics13": "In Object link will open it in new window", - "popupShortcutMainBasics14": "Shortcuts to launch shortcuts view", - "popupShortcutMainBasics15": "Toggle sidebar", - "popupShortcutMainBasics16": "Zoom in", - "popupShortcutMainBasics17": "Zoom out", - "popupShortcutMainBasics18": "Default zoom", - "popupShortcutMainBasics19": "Open the Quick Capture menu", - "popupShortcutMainBasics20": "Switch to the next/previous Space", - "popupShortcutMainBasics21": "Switch color mode (light/dark)", - "popupShortcutMainBasics22": "Lock the app with a PIN code", - "popupShortcutMainStructuring": "Structuring", - "popupShortcutMainStructuring1": "Create a new text block", - "popupShortcutMainStructuring2": "Create a line break within a block of text", - "popupShortcutMainStructuring3": "Merge block with the one above", - "popupShortcutMainStructuring4": "Indent. Сreates a nested block. Moves it to the right", - "popupShortcutMainStructuring5": "Outdent. Move block to the parent block level to the left", - "popupShortcutMainSelection": "Selection", - "popupShortcutMainSelection1": "Select word", - "popupShortcutMainSelection2": "Select an entire block", - "popupShortcutMainSelection3": "Select all blocks in the page", - "popupShortcutMainSelection4": "Expand your selection up or down", - "popupShortcutMainSelection5": "On block will select or de-select an entire block", - "popupShortcutMainSelection6": "Select block and all blocks in between", - "popupShortcutMainActions1": "Activate command menu", - "popupShortcutMainActions2": "Open action menu", - "popupShortcutMainActions3": "Deletes the words left to the cursor", - "popupShortcutMainActions4": "Copy selected block/blocks or text part", - "popupShortcutMainActions5": "Cut selected block/blocks or text part", - "popupShortcutMainActions6": "Paste data outside Anytype, block/blocks or text part", - "popupShortcutMainActions7": "Duplicate selected block/blocks", - "popupShortcutMainActions8": "Show emoji picker", - "popupShortcutMainTextStyle": "Text style", - "popupShortcutMainTextStyle1": "Bold", - "popupShortcutMainTextStyle2": "Italic", - "popupShortcutMainTextStyle3": "Underline", - "popupShortcutMainTextStyle4": "Strikethrough", - "popupShortcutMainTextStyle5": "Add a link", - "popupShortcutMainTextStyle6": "Convert to Inline code", - "popupShortcutMainTextStyle7": "Apply previously selected font color", - "popupShortcutMainTextStyle8": "Apply previously selected highlight", - - "popupShortcutNavigationBasics1": "Open Settings", - "popupShortcutNavigationBasics2": "Open the Flow pane", - "popupShortcutNavigationBasics3": "Open the Graph pane", - "popupShortcutNavigationBasics4": "Open the Search pane", - "popupShortcutNavigationBasics6": "Return to the home screen", - "popupShortcutNavigationBasics7": "Show previous object from History", - "popupShortcutNavigationBasics8": "Show next Object from History", - "popupShortcutNavigationMenu": "Menu, search and navigation pane", - "popupShortcutNavigationMenu1": "Go the next option", - "popupShortcutNavigationMenu2": "Go to the previous option", - "popupShortcutNavigationMenu3": "Go to the left side of navigation. Link from page", - "popupShortcutNavigationMenu4": "Go to the right side of navigation. Link to page", - "popupShortcutNavigationMenu5": "Select option", - "popupShortcutNavigationPage": "Editor navigation", - "popupShortcutNavigationPage1": "Expand / Collapse Toggle", - "popupShortcutNavigationPage2": "Go down one line", - "popupShortcutNavigationPage3": "Go up one line", - "popupShortcutNavigationPage4": "Go to the start of the line", - "popupShortcutNavigationPage5": "Go to the end of the line", - "popupShortcutNavigationPage6": "Go to the start of the Object", - "popupShortcutNavigationPage7": "Go to the end of the Object", - "popupShortcutNavigationPage8": "Move selected block(s) around", - "popupShortcutNavigationPage9": "Open relations view", - "popupShortcutNavigationPage10": "Check / Uncheck Checkbox", - - "popupShortcutMarkdownWhileTyping": "While typing", - "popupShortcutMarkdownWhileTyping1": "Inline code", - "popupShortcutMarkdownWhileTyping2": "Inline bold", - "popupShortcutMarkdownWhileTyping3": "Inline italic", - "popupShortcutMarkdownWhileTyping4": "Inline strikethrough", - "popupShortcutMarkdownWhileTypingInserts": "Inserts %s", - "popupShortcutMarkdownBeginningOfLine": "At the beginning of any new line", - "popupShortcutMarkdownBeginningOfLine1": "Create an H1 heading", - "popupShortcutMarkdownBeginningOfLine2": "Create an H2 heading", - "popupShortcutMarkdownBeginningOfLine3": "Create an H3 heading", - "popupShortcutMarkdownBeginningOfLine4": "Create a highlighted block", - "popupShortcutMarkdownBeginningOfLine5": "Create a bulleted list", - "popupShortcutMarkdownBeginningOfLine6": "Create a to-do checkbox", - "popupShortcutMarkdownBeginningOfLine7": "Create a numbered list", - "popupShortcutMarkdownBeginningOfLine8": "Create a toggle list", - "popupShortcutMarkdownBeginningOfLine9": "Create a code block", - "popupShortcutMarkdownBeginningOfLine10": "Create line divider", - "popupShortcutMarkdownBeginningOfLine11": "Create dots divider", - - "popupShortcutCommandMenu1": "Activate command menu", - "popupShortcutCommandMenu2": "Move in menu", - "popupShortcutCommandMenu3": "Get into & close sub menu", - "popupShortcutCommandMenu4": "Close menu", - - "popupShortcutCommandDescription": "After pressing / start writing the block name to choose the right one without a mouse, change block colors, and activate actions.", - - "popupShortcutCommandText": "Text", - "popupShortcutCommandText1": "Text block", - "popupShortcutCommandText2": "Large heading", - "popupShortcutCommandText3": "Medium-sized heading", - "popupShortcutCommandText4": "Small heading", - "popupShortcutCommandText5": "Highlighted block of larger text", - - "popupShortcutCommandLists": "Lists", - "popupShortcutCommandLists1": "To-do list with checkboxes", - "popupShortcutCommandLists2": "Bulleted list", - "popupShortcutCommandLists3": "Numbered list", - "popupShortcutCommandLists4": "Toggle list", - - "popupShortcutCommandObjects": "Objects", - "popupShortcutCommandObjects1": "Create an Object with a relative date. Also available: @three days ago, @last month, @2016-05-12", - "popupShortcutCommandObjects2": "Object", - "popupShortcutCommandObjects3": "File", - "popupShortcutCommandObjects4": "Image", - "popupShortcutCommandObjects5": "Video", - "popupShortcutCommandObjects6": "Bookmark", - "popupShortcutCommandObjects7": "Link to Object", - - "popupShortcutCommandOther": "Other", - "popupShortcutCommandOther1": "Line divider", - "popupShortcutCommandOther2": "Dots divider", - "popupShortcutCommandOther3": "Code snippet", - "popupMigrationOnboardingTitle": "Congratulations!", "popupMigrationOnboardingText1": "You're now using the new & improved version of Anytype.
It's still encrypted, offline-first and the safest app for your personal information.", "popupMigrationOnboardingText2": "The updated version of Anytype on iOS and Android is also available for download! If you haven't already, please scan this QR code to update your devices:", diff --git a/src/scss/popup/shortcut.scss b/src/scss/popup/shortcut.scss index 499d9d01a3..706b90d89d 100644 --- a/src/scss/popup/shortcut.scss +++ b/src/scss/popup/shortcut.scss @@ -3,53 +3,52 @@ .popups { .popup.popupShortcut * { user-select: text !important; } .popup.popupShortcut { - .innerWrap { width: 1096px; height: calc(100% - 164px); padding: 48px 0px 0px 0px; overflow: visible; } - - @media (max-width: 1128px) { - .innerWrap { width: calc(100% - 32px); left: 16px; margin-left: 0px !important; } + .innerWrap { + width: 336px; height: 100%; overflow: visible; left: auto; top: 0px; right: 0px; border-radius: 0px; + opacity: 1; transform: translate3d(100%,0px,0px); transition-duration: 0.2s; transition-timing-function: ease-in; } + .content { display: flex; flex-direction: column; height: 100%; } - .content { position: relative; padding-top: 38px; height: 100%; } - .wrapper { height: 100%; } - - .head { position: absolute; top: 0px; left: 0px; width: 100%; padding: 0px 48px; } + .head { display: flex; flex-direction: column; gap: 8px 0px; flex-shrink: 0; padding: 16px 16px 8px 16px; } .head { - .tabs { @include text-header2; color: var(--color-control-active); } - .tabs { - .item { margin-right: 24px; display: inline-block; transition: $transitionAllCommon; cursor: default; } - .item:last-child { margin: 0px; } - .item:hover, .item.active { color: var(--color-text-primary); } + .sides { display: flex; flex-direction: row; align-items: center; gap: 0px 16px; } + .side.left { flex-grow: 1; } + .side.right { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: 0px 8px; } + + .icon.withBackground { width: 24px !important; height: 24px !important; } + .icon.more { background-image: url('~img/icon/menu/action/more0.svg'); } + .icon.close { background-image: url('~img/icon/close.svg'); } + + .filter { padding: 0px; } + .filter { + .inner { height: 28px; } } + + .select { border: 0px; padding-left: 0px; cursor: default; @include text-paragraph; font-weight: 600; } + .select:hover, .select.hover { background: none; } } - .body { overflow-y: auto; height: 100%; padding: 24px 48px 48px 48px; } + .body { padding: 4px 8px 16px 8px; flex-grow: 1; overflow: auto; } .body { - .section { margin-bottom: 25px; } - .section:last-child { margin-bottom: 0px; } .section { - .name { @include text-paragraph; font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid var(--color-shape-secondary); } + > .name { padding: 9px 8px; @include text-small; color: var(--color-text-secondary); } - .items { - .item { display: flex; flex-direction: row; padding: 12px 0px; border-bottom: 1px solid var(--color-shape-secondary); } - .item { - .key { flex-basis: 30%; flex-shrink: 0; font-weight: 500; color: var(--color-control-active); } - .descr { flex: 1; padding-left: 14px; } + .item { padding: 6px 8px; display: flex; flex-direction: row; align-items: center; border-radius: 6px; gap: 0px 8px; } + .item:hover, .item.hover { background: var(--color-shape-highlight-medium); } + .item { + .name { flex-grow: 1; } + + .symbols { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: 0px 4px; } + .label { + background: var(--color-shape-tertiary); border-radius: 4px; height: 24px; @include text-small; padding: 0px 4px; min-width: 24px; + display: flex; flex-direction: row; align-items: center; justify-content: center; } } } - - .section > .descr { padding-bottom: 12px; border-bottom: 1px solid var(--color-shape-secondary); } - - .section.separator { padding-top: 27px; margin-bottom: 41px; } - .section.separator > .descr { border: 0px; } } } -} -html.platformWindows { - .popups { - .popup.popupShortcut { - .body { overflow-y: overlay; } - } + .popup.popupShortcut.show { + .innerWrap { opacity: 1; transform: translate3d(0px,0px,0px); } } } \ No newline at end of file diff --git a/src/ts/component/block/chat/buttons.tsx b/src/ts/component/block/chat/buttons.tsx index 5e43e2a24b..23c0b324fe 100644 --- a/src/ts/component/block/chat/buttons.tsx +++ b/src/ts/component/block/chat/buttons.tsx @@ -199,6 +199,7 @@ const ChatButtons = observer(class ChatButtons extends React.Component { it.isActive = false; if (it.type == I.MarkType.Link) { diff --git a/src/ts/component/header/main/history.tsx b/src/ts/component/header/main/history.tsx index c44b0f0f1b..2ca26ef917 100644 --- a/src/ts/component/header/main/history.tsx +++ b/src/ts/component/header/main/history.tsx @@ -12,6 +12,7 @@ const HeaderMainHistory = observer(forwardRef(null); const [ dummyState, setDummyState ] = useState(0); const cmd = keyboard.cmdSymbol(); + const shift = keyboard.shiftSymbol(); const object = S.Detail.get(rootId, rootId, []); const showMenu = !U.Object.isTypeOrRelationLayout(object.layout); @@ -35,7 +36,7 @@ const HeaderMainHistory = observer(forwardRef onRelation({}, { readonly: true })} /> diff --git a/src/ts/component/header/main/object.tsx b/src/ts/component/header/main/object.tsx index f2fb4c2313..5679e2a895 100644 --- a/src/ts/component/header/main/object.tsx +++ b/src/ts/component/header/main/object.tsx @@ -20,6 +20,7 @@ const HeaderMainObject = observer(forwardRef<{}, I.HeaderComponent>((props, ref) const showRelations = !isTypeOrRelation && !isDate && !isDeleted; const showMenu = !isTypeOrRelation && !isDeleted; const cmd = keyboard.cmdSymbol(); + const shift = keyboard.shiftSymbol(); const allowedTemplateSelect = (object.internalFlags || []).includes(I.ObjectFlag.SelectTemplate); const bannerProps = { type: I.BannerType.None, isPopup, object, count: 0 }; @@ -156,7 +157,7 @@ const HeaderMainObject = observer(forwardRef<{}, I.HeaderComponent>((props, ref) diff --git a/src/ts/component/menu/block/context.tsx b/src/ts/component/menu/block/context.tsx index 041cc98648..2042a53aeb 100644 --- a/src/ts/component/menu/block/context.tsx +++ b/src/ts/component/menu/block/context.tsx @@ -34,6 +34,7 @@ const MenuBlockContext = observer(class MenuBlockContext extends React.Component const hasMore = !isInsideTable; const canHaveMarks = block.canHaveMarks(); const cmd = keyboard.cmdSymbol(); + const shift = keyboard.shiftSymbol(); const color = (
@@ -45,7 +46,7 @@ const MenuBlockContext = observer(class MenuBlockContext extends React.Component let markActions = [ { type: I.MarkType.Bold, icon: 'bold', name: translate('commonBold'), caption: `${cmd} + B` }, { type: I.MarkType.Italic, icon: 'italic', name: translate('commonItalic'), caption: `${cmd} + I` }, - { type: I.MarkType.Strike, icon: 'strike', name: translate('commonStrikethrough'), caption: `${cmd} + Shift + S` }, + { type: I.MarkType.Strike, icon: 'strike', name: translate('commonStrikethrough'), caption: `${cmd} + ${shift} + S` }, { type: I.MarkType.Underline, icon: 'underline', name: translate('commonUnderline'), caption: `${cmd} + U` }, { type: I.MarkType.Link, icon: 'link', name: translate('commonLink'), caption: `${cmd} + K` }, { type: I.MarkType.Code, icon: 'kbd', name: translate('commonCode'), caption: `${cmd} + L` }, @@ -111,7 +112,7 @@ const MenuBlockContext = observer(class MenuBlockContext extends React.Component className="color" inner={color} tooltip={translate('commonColor')} - tooltipCaption={`${cmd} + Shift + C`} + tooltipCaption={`${cmd} + ${shift} + C`} tooltipY={I.MenuDirection.Top} onMouseDown={e => this.onMark(e, I.MarkType.Color)} /> @@ -121,7 +122,7 @@ const MenuBlockContext = observer(class MenuBlockContext extends React.Component className="color" inner={background} tooltip={translate('commonBackground')} - tooltipCaption={`${cmd} + Shift + H`} + tooltipCaption={`${cmd} + ${shift} + H`} tooltipY={I.MenuDirection.Top} onMouseDown={e => this.onMark(e, I.MarkType.BgColor)} /> diff --git a/src/ts/component/menu/help.tsx b/src/ts/component/menu/help.tsx index bddd618491..1bead70f7c 100644 --- a/src/ts/component/menu/help.tsx +++ b/src/ts/component/menu/help.tsx @@ -53,7 +53,7 @@ const MenuHelp = forwardRef((props, ref) => { }; case 'shortcut': { - S.Popup.open('shortcut', {}); + keyboard.onShortcut(); break; }; diff --git a/src/ts/component/menu/object.tsx b/src/ts/component/menu/object.tsx index eaeffb0341..72db519415 100644 --- a/src/ts/component/menu/object.tsx +++ b/src/ts/component/menu/object.tsx @@ -94,6 +94,7 @@ class MenuObject extends React.Component { const block = S.Block.getLeaf(rootId, blockId); const object = this.getObject(); const cmd = keyboard.cmdSymbol(); + const shift = keyboard.shiftSymbol(); const isTemplate = U.Object.isTemplate(object.type); const isDate = U.Object.isDateLayout(object.layout); const isChat = U.Object.isChatLayout(object.layout); @@ -144,9 +145,9 @@ class MenuObject extends React.Component { if (block) { if (block.isLocked()) { - pageLock = { id: 'pageUnlock', icon: 'pageUnlock', name: translate('menuObjectUnlockPage'), caption: `Ctrl + Shift + L` }; + pageLock = { id: 'pageUnlock', icon: 'pageUnlock', name: translate('menuObjectUnlockPage'), caption: `Ctrl + ${shift} + L` }; } else { - pageLock = { id: 'pageLock', icon: 'pageLock', name: translate('menuObjectLockPage'), caption: `Ctrl + Shift + L` }; + pageLock = { id: 'pageLock', icon: 'pageLock', name: translate('menuObjectLockPage'), caption: `Ctrl + ${shift} + L` }; }; }; diff --git a/src/ts/component/popup/index.tsx b/src/ts/component/popup/index.tsx index 609ad7cb72..0b30a85f11 100644 --- a/src/ts/component/popup/index.tsx +++ b/src/ts/component/popup/index.tsx @@ -155,25 +155,24 @@ class Popup extends React.Component { }; animate () { - if (this.isAnimating) { - return; - }; - - this.isAnimating = true; - raf(() => { + window.setTimeout(() => { if (!this._isMounted) { return; }; + + if (this.isAnimating) { + return; + }; const node = $(this.node); - const wrap = node.find('.innerWrap'); + this.isAnimating = true; node.addClass('show'); - window.setTimeout(() => { - wrap.css({ transform: 'none' }); - this.isAnimating = false; - }, S.Popup.getTimeout()); - }); + + console.log('ADD CLASS'); + console.trace(); + window.setTimeout(() => { this.isAnimating = false; }, S.Popup.getTimeout()); + }, 50); }; position () { diff --git a/src/ts/component/popup/search.tsx b/src/ts/component/popup/search.tsx index 1ebef99642..07d02e63b2 100644 --- a/src/ts/component/popup/search.tsx +++ b/src/ts/component/popup/search.tsx @@ -55,6 +55,7 @@ const PopupSearch = observer(class PopupSearch extends React.Component { const { highlight, relationKey, ranges } = meta; @@ -144,7 +145,7 @@ const PopupSearch = observer(class PopupSearch extends React.Component this.onBacklink(e, item)} /> @@ -648,6 +649,7 @@ const PopupSearch = observer(class PopupSearch extends React.Component(() => { +const PopupShortcut = forwardRef<{}, I.Popup>((props, ref) => { - const [ page, setPage ] = useState('main'); + const { getId, close } = props; + const [ page, setPage ] = useState(''); const isMac = U.Common.isPlatformMac(); const sections = J.Shortcut(); - const section = sections.find(it => it.id == page); - - const Tab = (item: any) => ( -
setPage(item.id)}> - {item.name} -
- ); + const current = page || sections[0].id; + const section = sections.find(it => it.id == current); + const id = getId(); const Section = (item: any) => { const cn = [ 'section' ]; @@ -36,32 +34,42 @@ const PopupShortcut = forwardRef<{}, I.Popup>(() => { }; const Item = (item: any) => { - const caption = isMac && item.mac ? item.mac : item.com; + //const caption = isMac && item.mac ? item.mac : item.com; + const symbols = item.symbols || []; return (
-
-
{item.name}
+
{item.name}
+
+ {symbols.map((item: any, i: number) =>
); }; return ( -
+ <>
-
- {sections.map((item: any, i: number) => ( - - ))} +
+
+ setPage(id)} />
- + {config.experimental ? : ''} close()} />