Feature/JS-4924: Shortcuts

electron/js/menu.js

@@ -168,7 +168,7 @@ class MenuManager {
 					{ label: Util.translate('electronMenuZoomOut'), accelerator: 'CmdOrCtrl+-', click: () => Api.setZoom(this.win, this.win.webContents.getZoomLevel() - 1) },
 					{ label: Util.translate('electronMenuZoomDefault'), accelerator: 'CmdOrCtrl+0', click: () => Api.setZoom(this.win, 0) },
 					{
-						label: Util.translate('electronMenuFullscreen'), accelerator: (is.macos ? 'Cmd+Ctrl+F' : 'Ctrl+Alt+F'), type: 'checkbox', checked: this.win.isFullScreen(),
+						label: Util.translate('electronMenuFullscreen'), accelerator: 'CmdOrCtrl+Shift+F', type: 'checkbox', checked: this.win.isFullScreen(),
 						click: () => this.win.setFullScreen(!this.win.isFullScreen())
 					},
 					{ label: Util.translate('electronMenuReload'), accelerator: 'CmdOrCtrl+R', click: () => this.win.reload() }
@@ -183,7 +183,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,

src/json/index.ts

@@ -9,7 +9,7 @@ import Lang from './lang';
 import Relation from './relation';
 import Menu from './menu';
 import Size from './size';
-import Shortcut from './shortcut';
+import * as Shortcut from './shortcut';
 
 const Emoji = require('./emoji.json');
 const Latex = require('./latex.json');

src/json/text.json

@@ -1187,96 +1187,114 @@
 
 	"popupIndexComponentNotFound": "Component %s not found",
 
-	"popupShortcutMain": "Main",
-	"popupShortcutNavigation": "Navigation",
-	"popupShortcutMarkdown": "Markdown",
-	"popupShortcutCommand": "Commands",
+	"popupShortcutKeyboard": "Keyboard Shortcuts",
+	"popupShortcutResetKey": "Conflicts with %s. It has been set to blank.",
+	"popupShortcutConflict": "Conflicts with %s",
 
 	"popupShortcutBasics": "Basics",
-	"popupShortcutMainBasics1": "Create new Object",
+	"popupShortcutInterface": "Interface",
+	"popupShortcutMainBasics1": "Create New Object",
 	"popupShortcutMainBasics2": "New Anytype window",
-	"popupShortcutMainBasics4": "Opens Object in new window from search interface",
-	"popupShortcutMainBasics5": "Toggle fullscreen",
+	"popupShortcutMainBasics5": "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",
+	"popupShortcutMainBasics11": "Version History",
+	"popupShortcutMainBasics12": "Open in a modal window",
+	"popupShortcutMainBasics13": "Open in a new window",
+	"popupShortcutMainBasics14": "View shortcuts",
+	"popupShortcutMainBasics15": "Show / Hide Sidebar",
 	"popupShortcutMainBasics16": "Zoom in",
 	"popupShortcutMainBasics17": "Zoom out",
 	"popupShortcutMainBasics18": "Default zoom",
-	"popupShortcutMainBasics19": "Open the Quick Capture menu",
-	"popupShortcutMainBasics20": "Switch to the next/previous Space",
+	"popupShortcutMainBasics19": "Select Type and Create Object",
+	"popupShortcutMainBasics20": "Next 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",
+	"popupShortcutMainBasics22": "Lock Anytype",
+	"popupShortcutMainBasics23": "Previous Space",
+	"popupShortcutMainBasics24": "Lock / Unlock Object",
+
 	"popupShortcutMainTextStyle": "Text style",
 	"popupShortcutMainTextStyle1": "Bold",
 	"popupShortcutMainTextStyle2": "Italic",
 	"popupShortcutMainTextStyle3": "Underline",
 	"popupShortcutMainTextStyle4": "Strikethrough",
 	"popupShortcutMainTextStyle5": "Add a link",
-	"popupShortcutMainTextStyle6": "Convert to Inline code",
+	"popupShortcutMainTextStyle6": "Convert to inline code",
 	"popupShortcutMainTextStyle7": "Apply previously selected font color",
 	"popupShortcutMainTextStyle8": "Apply previously selected highlight",
 
+	"popupShortcutMainStructuring1": "New text block",
+	"popupShortcutMainStructuring2": "Line break",
+	"popupShortcutMainStructuring3": "Merge block with the one above",
+	"popupShortcutMainStructuring4": "Indent",
+	"popupShortcutMainStructuring5": "Outdent",
+
+	"popupShortcutMainSelection1": "Select word",
+	"popupShortcutMainSelection2": "Select an Entire Block",
+	"popupShortcutMainSelection3": "Select all blocks",
+	"popupShortcutMainSelection4": "Expand Selection Up",
+	"popupShortcutMainSelection5": "Select / Deselect an entire block",
+	"popupShortcutMainSelection6": "Select block and all blocks in between",
+	"popupShortcutMainSelection7": "Expand Selection Down",
+	"popupShortcutMainSelectionDblClick": "Double Click",
+	"popupShortcutMainSelectionTplClick": "Triple Click",
+
+	"popupShortcutMainActions1": "Command menu",
+	"popupShortcutMainActions2": "Action menu",
+	"popupShortcutMainActions7": "Duplicate selected blocks",
+	"popupShortcutMainActions8": "Emoji picker",
+
+	"popupShortcutChat": "Chat",
+	"popupShortcutChat1": "Attach an object",
+	"popupShortcutChat2": "Pick Emoji",
+	"popupShortcutChat3": "Mention",
+
+	"popupShortcutNavigation": "Navigation",
+	"popupShortcutObject": "Object Actions",
+	"popupShortcutEditor": "Editor",
 	"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",
+	"popupShortcutNavigationBasics7": "Go back",
+	"popupShortcutNavigationBasics8": "Go forward",
+	"popupShortcutNavigationBasics9": "Open in a modal window",
+	"popupShortcutNavigationBasics10": "Open in a new window",
+	"popupShortcutNavigationBasics11": "Open Bin",
+	"popupShortcutNavigationPage9": "Open Relations",
+
+	"popupShortcutNavigationMenu": "Menu, Search",
+	"popupShortcutNavigationMenu1": "Go to 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",
+	"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",
+	"popupShortcutNavigationPage6": "Go to the top of the Object",
 	"popupShortcutNavigationPage7": "Go to the end of the Object",
-	"popupShortcutNavigationPage8": "Move selected block(s) around",
-	"popupShortcutNavigationPage9": "Open relations view",
+	"popupShortcutNavigationPage8": "Move selected block(s) up",
 	"popupShortcutNavigationPage10": "Check / Uncheck Checkbox",
-
+	"popupShortcutNavigationPage11": "Move selected block(s) down",
+
+	"popupShortcutMarkdown": "Markdown",
+
 	"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",
+
+	"popupShortcutMarkdownBeginningOfLine": "At the beginning of a new line",
 	"popupShortcutMarkdownBeginningOfLine1": "Create an H1 heading",
 	"popupShortcutMarkdownBeginningOfLine2": "Create an H2 heading",
 	"popupShortcutMarkdownBeginningOfLine3": "Create an H3 heading",
@@ -1288,20 +1306,18 @@
 	"popupShortcutMarkdownBeginningOfLine9": "Create a code block",
 	"popupShortcutMarkdownBeginningOfLine10": "Create line divider",
 	"popupShortcutMarkdownBeginningOfLine11": "Create dots divider",
+	"popupShortcutMarkdownBeginningOfLineKey": "%s + Space",
 
-	"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.",
+	"popupShortcutCommand": "Commands",
 
 	"popupShortcutCommandText": "Text",
 	"popupShortcutCommandText1": "Text block",
 	"popupShortcutCommandText2": "Large heading",
 	"popupShortcutCommandText3": "Medium-sized heading",
 	"popupShortcutCommandText4": "Small heading",
-	"popupShortcutCommandText5": "Highlighted block of larger text",
+	"popupShortcutCommandText5": "Highlighted block",
+	"popupShortcutCommandText6": "Callout",
+	"popupShortcutCommandText7": "Code snippet",
 
 	"popupShortcutCommandLists": "Lists",
 	"popupShortcutCommandLists1": "To-do list with checkboxes",
@@ -1310,13 +1326,17 @@
 	"popupShortcutCommandLists4": "Toggle list",
 
 	"popupShortcutCommandObjects": "Objects",
-	"popupShortcutCommandObjects1": "Create an Object with a relative date. Also available: @three days ago, @last month, @2016-05-12",
+	"popupShortcutCommandObjects1": "Create an Object with a relative date",
 	"popupShortcutCommandObjects2": "Object",
 	"popupShortcutCommandObjects3": "File",
 	"popupShortcutCommandObjects4": "Image",
 	"popupShortcutCommandObjects5": "Video",
 	"popupShortcutCommandObjects6": "Bookmark",
 	"popupShortcutCommandObjects7": "Link to Object",
+	"popupShortcutCommandObjects8": "Also available",
+	"popupShortcutCommandObjects9": "Audio",
+	"popupShortcutCommandObjects10": "Table",
+	"popupShortcutCommandObjects11": "Inline set",
 
 	"popupShortcutCommandOther": "Other",
 	"popupShortcutCommandOther1": "Line divider",

src/scss/popup/shortcut.scss

@@ -1,55 +1,66 @@
 @import "~scss/_mixins";
 
 .popups {
-	.popup.popupShortcut * { user-select: text !important; }
+	.popup.popupShortcut * { user-select: text !important; user-select: none; }
 	.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 0px 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: 12px 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; border-radius: 6px; gap: 0px 8px; cursor: default; min-height: 36px; 	}
+				.item.canEdit:not(.isEditing) {
+					&:hover, &.hover { background: var(--color-shape-highlight-light); }
 				}
-			}
+				.item.isEditing { box-shadow: 0px 0px 0px 2px var(--color-system-accent-100) inset; }
+				.item.hasError { box-shadow: 0px 0px 0px 2px var(--color-red) inset; }
+
+				.item {
+					.flex { flex-direction: row; align-items: center; }
+					.name { flex-grow: 1; }
+					.error { margin: 0.5em 0px 0px 0px; @include text-small; }
 
-			.section > .descr { padding-bottom: 12px; border-bottom: 1px solid var(--color-shape-secondary); }
+					.label { @include text-small; font-weight: 500; }
+					.label.text { text-align: right; }
 
-			.section.separator { padding-top: 27px; margin-bottom: 41px; }
-			.section.separator > .descr { border: 0px; }
+					.symbols { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: 0px 4px; }
+					.symbols {
+						.label { 
+							background: var(--color-shape-tertiary); border-radius: 4px; height: 24px; padding: 0px 4px; min-width: 24px;
+							display: flex; flex-direction: row; align-items: center; justify-content: center;
+						}
+					}
+				}
+			}
 		}
 	}
-}
 
-html.platformWindows {
-	.popups {
-		.popup.popupShortcut {
-			.body { overflow-y: overlay; }
-		}
+	.popup.popupShortcut.show {
+		.innerWrap { opacity: 1; transform: translate3d(0px,0px,0px); }
 	}
 }

src/ts/component/block/chat/buttons.tsx

@@ -199,6 +199,7 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St
 		const { getMarksAndRange } = this.props;
 		const { marks, range } = getMarksAndRange();
 		const cmd = keyboard.cmdSymbol();
+		const shift = keyboard.shiftSymbol();
 		const colorMark = Mark.getInRange(marks, I.MarkType.Color, range) || {};
 		const bgMark = Mark.getInRange(marks, I.MarkType.BgColor, range) || {};
 
@@ -210,14 +211,14 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St
 		);
 
 		return [
-			{ 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.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` },
-			//{ type: I.MarkType.Color, icon: 'color', name: translate('commonColor'), caption: `${cmd} + Shift + C`, inner: color },
-			//{ type: I.MarkType.BgColor, icon: 'color', name: translate('commonBackground'), caption: `${cmd} + Shift + H`, inner: background },
+			{ type: I.MarkType.Bold, icon: 'bold', name: translate('commonBold'), caption: keyboard.getCaption('textBold') },
+			{ type: I.MarkType.Italic, icon: 'italic', name: translate('commonItalic'), caption: keyboard.getCaption('textItalic') },
+			{ type: I.MarkType.Strike, icon: 'strike', name: translate('commonStrikethrough'), caption: keyboard.getCaption('textStrike') },
+			{ type: I.MarkType.Underline, icon: 'underline', name: translate('commonUnderline'), caption: keyboard.getCaption('textUnderlined') },
+			{ type: I.MarkType.Link, icon: 'link', name: translate('commonLink'), caption: keyboard.getCaption('textLink') },
+			{ type: I.MarkType.Code, icon: 'kbd', name: translate('commonCode'), caption: keyboard.getCaption('textCode') },
+			//{ type: I.MarkType.Color, icon: 'color', name: translate('commonColor'), caption: keyboard.getCaption('textColor'), inner: color },
+			//{ type: I.MarkType.BgColor, icon: 'color', name: translate('commonBackground'), caption: keyboard.getCaption('textBackground'), inner: background },
 		].map((it: any) => {
 			it.isActive = false;
 			if (it.type == I.MarkType.Link) {

src/ts/component/block/dataview/controls.tsx

@@ -153,7 +153,7 @@ const Controls = observer(class Controls extends React.Component<Props> {
 							placeholder={translate('blockDataviewSearch')} 
 							icon="search withBackground"
 							tooltip={translate('commonSearch')}
-							tooltipCaption={`${cmd} + F`}
+							tooltipCaption={keyboard.getCaption('searchText')}
 							onChange={onFilterChange}
 							onIconClick={this.onFilterShow}
 						/>