jenkins-bot has submitted this change and it was merged. Change subject: Keyboard shortcuts dialog ......................................................................
Keyboard shortcuts dialog Provides a keyboard shortcuts help screen triggered by CTRL+/ (?). Currently we can only register commands per surface, so the command won't trigger when other dialogs are open. Bug: 52844 Change-Id: I806343b42c5fc63d82cfa64277841790984a9757 --- M .docs/eg-iframe.html M build/modules.json M demos/ve/index.html M modules/ve/i18n/en.json M modules/ve/i18n/qqq.json M modules/ve/init/ve.init.Target.js M modules/ve/test/index.html A modules/ve/ui/dialogs/ve.ui.CommandHelpDialog.js A modules/ve/ui/styles/ve.ui.Dialog.css M modules/ve/ui/tools/ve.ui.DialogTool.js M modules/ve/ui/ve.ui.CommandRegistry.js M modules/ve/ui/ve.ui.TriggerRegistry.js 12 files changed, 219 insertions(+), 0 deletions(-) Approvals: Catrope: Looks good to me, approved jenkins-bot: Verified diff --git a/.docs/eg-iframe.html b/.docs/eg-iframe.html index b8860bd..aa57154 100644 --- a/.docs/eg-iframe.html +++ b/.docs/eg-iframe.html @@ -24,6 +24,7 @@ <link rel=stylesheet href="../modules/ve/ce/styles/ve.ce.Node.css"> <link rel=stylesheet href="../modules/ve/ce/styles/ve.ce.Surface.css"> <link rel=stylesheet href="../modules/ve/ui/styles/ve.ui.Context.css"> + <link rel=stylesheet href="../modules/ve/ui/styles/ve.ui.Dialog.css"> <link rel=stylesheet href="../modules/ve/ui/styles/ve.ui.Inspector.css"> <link rel=stylesheet href="../modules/ve/ui/styles/ve.ui.Surface.css"> <link rel=stylesheet href="../modules/ve/ui/styles/ve.ui.Tool.css"> @@ -235,6 +236,7 @@ <script src="../modules/ve/ui/actions/ve.ui.IndentationAction.js"></script> <script src="../modules/ve/ui/actions/ve.ui.InspectorAction.js"></script> <script src="../modules/ve/ui/actions/ve.ui.ListAction.js"></script> + <script src="../modules/ve/ui/dialogs/ve.ui.CommandHelpDialog.js"></script> <script src="../modules/ve/ui/widgets/ve.ui.SurfaceWidget.js"></script> <script src="../modules/ve/ui/widgets/ve.ui.LinkTargetInputWidget.js"></script> <script src="../modules/ve/ui/tools/ve.ui.AnnotationTool.js"></script> diff --git a/build/modules.json b/build/modules.json index cfbd854..95c124c 100644 --- a/build/modules.json +++ b/build/modules.json @@ -233,6 +233,7 @@ "modules/ve/ui/actions/ve.ui.IndentationAction.js", "modules/ve/ui/actions/ve.ui.InspectorAction.js", "modules/ve/ui/actions/ve.ui.ListAction.js", + "modules/ve/ui/dialogs/ve.ui.CommandHelpDialog.js", "modules/ve/ui/widgets/ve.ui.SurfaceWidget.js", "modules/ve/ui/widgets/ve.ui.LinkTargetInputWidget.js", "modules/ve/ui/tools/ve.ui.AnnotationTool.js", @@ -255,6 +256,7 @@ "modules/ve/ce/styles/ve.ce.Node.css", "modules/ve/ce/styles/ve.ce.Surface.css", "modules/ve/ui/styles/ve.ui.Context.css", + "modules/ve/ui/styles/ve.ui.Dialog.css", "modules/ve/ui/styles/ve.ui.Inspector.css", "modules/ve/ui/styles/ve.ui.Surface.css", "modules/ve/ui/styles/ve.ui.Tool.css", diff --git a/demos/ve/index.html b/demos/ve/index.html index 0b10d78..20230ea 100644 --- a/demos/ve/index.html +++ b/demos/ve/index.html @@ -32,6 +32,7 @@ <link rel=stylesheet href="../../modules/ve/ce/styles/ve.ce.Node.css"> <link rel=stylesheet href="../../modules/ve/ce/styles/ve.ce.Surface.css"> <link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Context.css"> + <link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Dialog.css"> <link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Inspector.css"> <link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Surface.css"> <link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Tool.css"> @@ -265,6 +266,7 @@ <script src="../../modules/ve/ui/actions/ve.ui.IndentationAction.js"></script> <script src="../../modules/ve/ui/actions/ve.ui.InspectorAction.js"></script> <script src="../../modules/ve/ui/actions/ve.ui.ListAction.js"></script> + <script src="../../modules/ve/ui/dialogs/ve.ui.CommandHelpDialog.js"></script> <script src="../../modules/ve/ui/widgets/ve.ui.SurfaceWidget.js"></script> <script src="../../modules/ve/ui/widgets/ve.ui.LinkTargetInputWidget.js"></script> <script src="../../modules/ve/ui/tools/ve.ui.AnnotationTool.js"></script> diff --git a/modules/ve/i18n/en.json b/modules/ve/i18n/en.json index 166bfa2..d9bea05 100644 --- a/modules/ve/i18n/en.json +++ b/modules/ve/i18n/en.json @@ -28,9 +28,15 @@ "visualeditor-annotationbutton-superscript-tooltip": "Superscript", "visualeditor-annotationbutton-underline-tooltip": "Underline", "visualeditor-clearbutton-tooltip": "Clear formatting", + "visualeditor-clipboard-copy": "Copy", + "visualeditor-clipboard-cut": "Cut", + "visualeditor-clipboard-paste": "Paste", + "visualeditor-clipboard-paste-special": "Paste as plain text", "visualeditor-dialog-action-apply": "Apply changes", "visualeditor-dialog-action-cancel": "Cancel", "visualeditor-dialog-action-goback": "Go back", + "visualeditor-dialog-command-help-title": "Keyboard shortcuts", + "visualeditor-formatdropdown-format-heading-label": "Heading (1-6)", "visualeditor-formatdropdown-format-heading1": "Heading 1", "visualeditor-formatdropdown-format-heading2": "Heading 2", "visualeditor-formatdropdown-format-heading3": "Heading 3", @@ -56,6 +62,11 @@ "visualeditor-linkinspector-title": "Hyperlink", "visualeditor-listbutton-bullet-tooltip": "Bullet list", "visualeditor-listbutton-number-tooltip": "Numbered list", + "visualeditor-shortcuts-clipboard": "Clipboard", + "visualeditor-shortcuts-formatting": "Paragraph formatting", + "visualeditor-shortcuts-history": "History", + "visualeditor-shortcuts-other": "Other", + "visualeditor-shortcuts-text-style": "Text formatting", "visualeditor-specialcharacter-button-tooltip": "Special character", "visualeditor-specialcharacterinspector-title": "Special character", "visualeditor-specialcharinspector-characterlist-insert": "{\n\t\"symbols\": {\n\t\t\"−\": \"−\",\n\t\t\"—\": \"—\",\n\t\t\"°\": \"°\",\n\t\t\"″\": \"″\",\n\t\t\"′\": \"′\",\n\t\t\"←\": \"←\",\n\t\t\"→\": \"→\",\n\t\t\"·\": \"·\",\n\t\t\"§\": \"§\"\n\t},\n\t\"accents\": {\n\t\t\"à\": \"à\",\n\t\t\"á\": \"á\",\n\t\t\"â\": \"â\",\n\t\t\"ä\": \"ä\",\n\t\t\"ç\": \"ç\",\n\t\t\"è\": \"è\",\n\t\t\"é\": \"é\",\n\t\t\"ê\": \"ê\",\n\t\t\"ë\": \"ë\",\n\t\t\"ì\": \"ì\",\n\t\t\"í\": \"í\",\n\t\t\"î\": \"î\",\n\t\t\"ï\": \"ï\",\n\t\t\"ò\": \"ò\",\n\t\t\"ó\": \"ó\",\n\t\t\"ô\": \"ô\",\n\t\t\"ö\": \"ö\",\n\t\t\"ø\": \"ø\",\n\t\t\"ù\": \"ù\",\n\t\t\"ú\": \"ú\",\n\t\t\"û\": \"û\",\n\t\t\"ü\": \"ü\"\n\t},\n\t\"math\": {\n\t\t\"−\": \"−\",\n\t\t\"×\": \"×\",\n\t\t\"÷\": \"÷\",\n\t\t\"≈\": \"≈\",\n\t\t\"≠\": \"≠\",\n\t\t\"≤\": \"≤\",\n\t\t\"≥\": \"≥\",\n\t\t\"±\": \"±\"\n\t}\n}", diff --git a/modules/ve/i18n/qqq.json b/modules/ve/i18n/qqq.json index 61e5979..b71c960 100644 --- a/modules/ve/i18n/qqq.json +++ b/modules/ve/i18n/qqq.json @@ -31,9 +31,15 @@ "visualeditor-annotationbutton-superscript-tooltip": "Tooltip text for superscript button.\n\nSee also:\n* {{msg-mw|Visualeditor-annotationbutton-subscript-tooltip}}\n{{Identical|Superscript}}", "visualeditor-annotationbutton-underline-tooltip": "Tooltip text for underline button.\n{{Identical|Underline}}", "visualeditor-clearbutton-tooltip": "Tooltip text for the clear formatting button", + "visualeditor-clipboard-copy": "Label for copy command", + "visualeditor-clipboard-cut": "Label for cut command", + "visualeditor-clipboard-paste": "Label for paste command", + "visualeditor-clipboard-paste-special": "Label for paste as plain text command", "visualeditor-dialog-action-apply": "Label text for button to apply changes made in dialog.\n\nSee also:\n* {{msg-mw|Visualeditor-dialog-action-cancel}}\n* {{msg-mw|Visualeditor-dialog-action-goback}}\n{{Identical|Apply change}}", "visualeditor-dialog-action-cancel": "Label text for button to exit from dialog without making changes.\n\nSee also:\n* {{msg-mw|Visualeditor-dialog-action-apply}}\n* {{msg-mw|Visualeditor-dialog-action-goback}}\n{{Identical|Cancel}}", "visualeditor-dialog-action-goback": "Label text for button to go back in a dialog.\n\nSee also:\n* {{msg-mw|Visualeditor-dialog-action-apply}}\n* {{msg-mw|Visualeditor-dialog-action-cancel}}\n{{Identical|Go back}}", + "visualeditor-dialog-command-help-title": "Title for keyboard shortcuts help dialog", + "visualeditor-formatdropdown-format-heading-label": "Label for heading level commands", "visualeditor-formatdropdown-format-heading1": "Item in the generic formatting dropdown for a level 1 heading.\n{{Identical|Heading}}", "visualeditor-formatdropdown-format-heading2": "Item in the generic formatting dropdown for a level 2 heading.\n{{Identical|Heading}}", "visualeditor-formatdropdown-format-heading3": "Item in the generic formatting dropdown for a level 3 heading.\n{{Identical|Heading}}", @@ -59,6 +65,11 @@ "visualeditor-linkinspector-title": "Title of the link inspector dialog.\n{{Identical|Hyperlink}}", "visualeditor-listbutton-bullet-tooltip": "Tooltip text for the bullet list button", "visualeditor-listbutton-number-tooltip": "Tooltip text for the numbered list button", + "visualeditor-shortcuts-clipboard": "Heading for clipboard shortcuts", + "visualeditor-shortcuts-formatting": "Heading for paragraph formatting shortcuts", + "visualeditor-shortcuts-history": "Heading for history shortcuts", + "visualeditor-shortcuts-other": "Heading for other shortcuts", + "visualeditor-shortcuts-text-style": "Heading for text formatting shortcuts", "visualeditor-specialcharacter-button-tooltip": "Tooltip text for the insert character button.\n{{Identical|Special character}}", "visualeditor-specialcharacterinspector-title": "Used as title for special character inspector.\n{{Identical|Special character}}", "visualeditor-specialcharinspector-characterlist-insert": "This is a JSON string defining the special characters that can be inserted using the special character insertion tool.\n{{doc-important|Please make sure it is a valid JSON string.}}\n{{Optional}}", diff --git a/modules/ve/init/ve.init.Target.js b/modules/ve/init/ve.init.Target.js index 8c25aa3..540700a 100644 --- a/modules/ve/init/ve.init.Target.js +++ b/modules/ve/init/ve.init.Target.js @@ -118,6 +118,7 @@ 'superscript', 'indent', 'outdent', + 'commandHelp', 'paragraph', 'heading1', 'heading2', diff --git a/modules/ve/test/index.html b/modules/ve/test/index.html index ebdb79d..b8eb69e 100644 --- a/modules/ve/test/index.html +++ b/modules/ve/test/index.html @@ -209,6 +209,7 @@ <script src="../../../modules/ve/ui/actions/ve.ui.IndentationAction.js"></script> <script src="../../../modules/ve/ui/actions/ve.ui.InspectorAction.js"></script> <script src="../../../modules/ve/ui/actions/ve.ui.ListAction.js"></script> + <script src="../../../modules/ve/ui/dialogs/ve.ui.CommandHelpDialog.js"></script> <script src="../../../modules/ve/ui/widgets/ve.ui.SurfaceWidget.js"></script> <script src="../../../modules/ve/ui/widgets/ve.ui.LinkTargetInputWidget.js"></script> <script src="../../../modules/ve/ui/tools/ve.ui.AnnotationTool.js"></script> diff --git a/modules/ve/ui/dialogs/ve.ui.CommandHelpDialog.js b/modules/ve/ui/dialogs/ve.ui.CommandHelpDialog.js new file mode 100644 index 0000000..18081e8 --- /dev/null +++ b/modules/ve/ui/dialogs/ve.ui.CommandHelpDialog.js @@ -0,0 +1,120 @@ +/*! + * VisualEditor UserInterface CommandHelpDialog class. + * + * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + +/** + * Dialog listing all command keyboard shortcuts. + * + * @class + * @extends ve.ui.Dialog + * + * @constructor + * @param {ve.ui.WindowSet} windowSet Window set this dialog is part of + * @param {Object} [config] Configuration options + */ +ve.ui.CommandHelpDialog = function VeUiCommandHelpDialog( windowSet, config ) { + // Parent constructor + ve.ui.Dialog.call( this, windowSet, config ); +}; + +/* Inheritance */ + +OO.inheritClass( ve.ui.CommandHelpDialog, ve.ui.Dialog ); + +/* Static Properties */ + +ve.ui.CommandHelpDialog.static.name = 'commandHelp'; + +ve.ui.CommandHelpDialog.static.titleMessage = 'visualeditor-dialog-command-help-title'; + +ve.ui.CommandHelpDialog.static.icon = 'help'; + +/* Methods */ + +/** + * @inheritdoc + */ +ve.ui.CommandHelpDialog.prototype.initialize = function () { + // Parent method + ve.ui.Dialog.prototype.initialize.call( this ); + + var i, iLen, j, jLen, shortcut, commands, + $list, + commandGroups = [ + { + 'title': 'visualeditor-shortcuts-text-style', + 'commands': [ + { 'name': 'bold', 'msg': 'visualeditor-annotationbutton-bold-tooltip' }, + { 'name': 'italic', 'msg': 'visualeditor-annotationbutton-italic-tooltip' }, + { 'name': 'link', 'msg': 'visualeditor-annotationbutton-link-tooltip' }, + { 'name': 'subscript', 'msg': 'visualeditor-annotationbutton-subscript-tooltip' }, + { 'name': 'superscript', 'msg': 'visualeditor-annotationbutton-superscript-tooltip' }, + { 'name': 'underline', 'msg': 'visualeditor-annotationbutton-underline-tooltip' }, + { 'name': 'clear', 'msg': 'visualeditor-clearbutton-tooltip' } + ] + }, + { + 'title': 'visualeditor-shortcuts-formatting', + 'commands': [ + { 'name': 'paragraph', 'msg': 'visualeditor-formatdropdown-format-paragraph' }, + { 'shortcut': 'CTRL+(1-6)', 'msg': 'visualeditor-formatdropdown-format-heading-label' }, + { 'name': 'preformatted', 'msg': 'visualeditor-formatdropdown-format-preformatted' }, + { 'name': 'indent', 'msg': 'visualeditor-indentationbutton-indent-tooltip' }, + { 'name': 'outdent', 'msg': 'visualeditor-indentationbutton-outdent-tooltip' } + ] + }, + { + 'title': 'visualeditor-shortcuts-history', + 'commands': [ + { 'name': 'undo', 'msg': 'visualeditor-historybutton-undo-tooltip' }, + { 'name': 'redo', 'msg': 'visualeditor-historybutton-redo-tooltip' } + ] + }, + { + 'title': 'visualeditor-shortcuts-clipboard', + 'commands': [ + { 'shortcut': 'CTRL+X', 'msg': 'visualeditor-clipboard-cut' }, + { 'shortcut': 'CTRL+C', 'msg': 'visualeditor-clipboard-copy' }, + { 'shortcut': 'CTRL+V', 'msg': 'visualeditor-clipboard-paste' }, + { 'name': 'pasteSpecial', 'msg': 'visualeditor-clipboard-paste-special' } + ] + }, + { + 'title': 'visualeditor-shortcuts-other', + 'commands': [ + { 'name': 'commandHelp', 'msg': 'visualeditor-dialog-command-help-title' } + ] + }, + ], + $container = this.$( '<div>' ).addClass( 've-ui-commandHelpDialog-container' ), + triggers = this.surface.getTriggers(); + + for ( i = 0, iLen = commandGroups.length; i < iLen; i++ ) { + commands = commandGroups[i].commands; + $list = this.$( '<dl>' ).addClass( 've-ui-commandHelpDialog-list' ); + for ( j = 0, jLen = commands.length; j < jLen; j++ ) { + shortcut = commands[j].shortcut ? commands[j].shortcut : triggers[commands[j].name].getMessage(); + $list.append( + this.$( '<dt>' ).text( shortcut.replace( /\+/g, ' + ' ) ), + this.$( '<dd>' ).text( ve.msg( commands[j].msg ) ) + ); + } + $container.append( + this.$( '<div>' ) + .addClass( 've-ui-commandHelpDialog-section' ) + .append( + this.$( '<h3>' ).text( ve.msg( commandGroups[i].title ) ), + $list + ) + ); + } + + this.$body.append( $container ); +}; + +/* Registration */ + +ve.ui.dialogFactory.register( ve.ui.CommandHelpDialog ); diff --git a/modules/ve/ui/styles/ve.ui.Dialog.css b/modules/ve/ui/styles/ve.ui.Dialog.css new file mode 100644 index 0000000..bec3415 --- /dev/null +++ b/modules/ve/ui/styles/ve.ui.Dialog.css @@ -0,0 +1,44 @@ +/*! + * VisualEditor UserInterface Dialog styles. + * + * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + +/* ve.ui.CommandHelpDialog */ + +.ve-ui-commandHelpDialog-container { + -ms-column-count: 2; + -moz-column-count: 2; + -webkit-column-count: 2; + column-count: 2; + margin-top: 2em; + margin: 2em 5em; +} + +.ve-ui-commandHelpDialog-section { + /* Prevent column wrapping within a section */ + display: inline-block; + width: 100%; +} + +.ve-ui-commandHelpDialog-section h3 { + margin-bottom: 0; +} + +.ve-ui-commandHelpDialog-list dl { + margin: 1em 0; +} + +.ve-ui-commandHelpDialog-list dd { + line-height: 200%; +} + +.ve-ui-commandHelpDialog-list dt { + float: left; + width: 35%; + text-align: right; + margin-right: 1em; + font-weight: bold; + line-height: 200%; +} diff --git a/modules/ve/ui/tools/ve.ui.DialogTool.js b/modules/ve/ui/tools/ve.ui.DialogTool.js index d3c175d..2f3b286 100644 --- a/modules/ve/ui/tools/ve.ui.DialogTool.js +++ b/modules/ve/ui/tools/ve.ui.DialogTool.js @@ -96,3 +96,22 @@ ); } }; + +/** + * @class + * @extends ve.ui.DialogTool + * @constructor + * @param {OO.ui.ToolGroup} toolGroup + * @param {Object} [config] Configuration options + */ +ve.ui.CommandHelpDialogTool = function VeUiCommandHelpDialogTool( toolGroup, config ) { + ve.ui.DialogTool.call( this, toolGroup, config ); +}; +OO.inheritClass( ve.ui.CommandHelpDialogTool, ve.ui.DialogTool ); +ve.ui.CommandHelpDialogTool.static.name = 'commandHelp'; +ve.ui.CommandHelpDialogTool.static.group = 'dialog'; +ve.ui.CommandHelpDialogTool.static.icon = 'help'; +ve.ui.CommandHelpDialogTool.static.titleMessage = 'visualeditor-dialogbutton-command-help-tooltip'; +ve.ui.CommandHelpDialogTool.static.dialog = 'commandHelp'; +ve.ui.CommandHelpDialogTool.static.autoAdd = false; +ve.ui.toolFactory.register( ve.ui.CommandHelpDialogTool ); diff --git a/modules/ve/ui/ve.ui.CommandRegistry.js b/modules/ve/ui/ve.ui.CommandRegistry.js index 7ef3e54..010e9e9 100644 --- a/modules/ve/ui/ve.ui.CommandRegistry.js +++ b/modules/ve/ui/ve.ui.CommandRegistry.js @@ -81,6 +81,9 @@ new ve.ui.Command( 'outdent', 'indentation', 'decrease' ) ); ve.ui.commandRegistry.register( + new ve.ui.Command( 'commandHelp', 'dialog', 'open', 'commandHelp' ) +); +ve.ui.commandRegistry.register( new ve.ui.Command( 'code', 'annotation', 'toggle', 'textStyle/code' ) ); ve.ui.commandRegistry.register( diff --git a/modules/ve/ui/ve.ui.TriggerRegistry.js b/modules/ve/ui/ve.ui.TriggerRegistry.js index 729ff5d..9fd34c6 100644 --- a/modules/ve/ui/ve.ui.TriggerRegistry.js +++ b/modules/ve/ui/ve.ui.TriggerRegistry.js @@ -96,6 +96,9 @@ ve.ui.triggerRegistry.register( 'outdent', new ve.ui.Trigger( 'shift+tab' ) ); +ve.ui.triggerRegistry.register( + 'commandHelp', { 'mac': new ve.ui.Trigger( 'cmd+/' ), 'pc': new ve.ui.Trigger( 'ctrl+/' ) } +); // Ctrl+0-7 below are not mapped to Cmd+0-7 on Mac because Chrome reserves those for switching tabs ve.ui.triggerRegistry.register( 'paragraph', { 'mac': new ve.ui.Trigger( 'ctrl+0' ), 'pc': new ve.ui.Trigger ( 'ctrl+0' ) } -- To view, visit https://gerrit.wikimedia.org/r/107153 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I806343b42c5fc63d82cfa64277841790984a9757 Gerrit-PatchSet: 5 Gerrit-Project: VisualEditor/VisualEditor Gerrit-Branch: master Gerrit-Owner: Esanders <esand...@wikimedia.org> Gerrit-Reviewer: Catrope <roan.katt...@gmail.com> Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org> Gerrit-Reviewer: Krinkle <krinklem...@gmail.com> Gerrit-Reviewer: Trevor Parscal <tpars...@wikimedia.org> Gerrit-Reviewer: jenkins-bot _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits