Changeset 32951

Timestamp:

06/26/2015 04:39:11 AM (11 years ago)

Author:

azaozz

Message:

TinyMCE: update the Keyboard Shortcuts help modal, use the TinyMCE UI API instead of an iframe.
Props iseulde, azaozz. Fixes #31913.

Location:

trunk/src/wp-includes

Files:

• class-wp-editor.php (modified) (2 diffs)
• css/editor.css (modified) (2 diffs)
• js/tinymce/plugins/wordpress/plugin.js (modified) (1 diff)
• js/tinymce/wp-mce-help.php (deleted)

trunk/src/wp-includes/class-wp-editor.php

@@ -1019 +1019 @@
 
                         // WordPress strings
-                        'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ),
                         'Toolbar Toggle' => __( 'Toolbar Toggle' ),
                         'Insert Read More tag' => __( 'Insert Read More tag' ),
+                        'Insert Page Break tag' => __( 'Insert Page Break tag' ),
                         'Read more...' => __( 'Read more...' ), // Title on the placeholder inside the editor
                         'Distraction-free writing mode' => __( 'Distraction-free writing mode' ),
@@ -1027 +1027 @@
                         'Remove' => __( 'Remove' ), // Tooltip for the 'remove' button in the image toolbar
                         'Edit ' => __( 'Edit' ), // Tooltip for the 'edit' button in the image toolbar
+
+                        // Shortcuts help modal
+                        'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ),
+                        'Default shortcuts,' => __( 'Default shortcuts,' ),
+                        'Additional shortcuts,' => __( 'Additional shortcuts,' ),
+                        'Focus shortcuts:' => __( 'Focus shortcuts:' ),
+                        'Inline toolbar (when an image, link or preview is selected)' => __( 'Inline toolbar (when an image, link or preview is selected)' ),
+                        'Editor menu (when enabled)' => __( 'Editor menu (when enabled)' ),
+                        'Editor toolbar' => __( 'Editor toolbar' ),
+                        'Elements path' => __( 'Elements path' ),
+                        'Ctrl + Alt + letter:' => __( 'Ctrl + Alt + letter:' ),
+                        'Shift + Alt + letter:' => __( 'Shift + Alt + letter:' ),
+                        'Cmd + letter:' => __( 'Cmd + letter:' ),
+                        'Ctrl + letter:' => __( 'Ctrl + letter:' ),
+                        'Letter' => __( 'Letter' ),
+                        'Action' => __( 'Action' ),
                 );
 

trunk/src/wp-includes/css/editor.css

@@ -80 +80 @@
 }
 
-.mce-wp-help .mce-window-head {
-        border-bottom: none;
+.mce-window .mce-foot {
+        border-top: 1px solid #dfdfdf;
 }
 
@@ -103 +103 @@
         -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
         box-shadow: 0 0 2px rgba(30,140,190,0.8);
+}
+
+.mce-window .mce-wp-help {
+        height: 320px;
+        width: 360px;
+        overflow: auto;
+}
+
+.mce-window .mce-wp-help * {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+}
+
+.mce-window .mce-wp-help .mce-container-body.mce-undefined {
+        width: auto !important;
+}
+
+.mce-window .wp-editor-help {
+        width: 340px;
+        padding: 10px 15px 0;
+}
+
+.mce-window .wp-editor-help p {
+        margin: 7px 0;
+}
+
+.mce-window .wp-editor-help table {
+        width: 320px;
+        margin-bottom: 20px;
+}
+
+.mce-window .wp-editor-help td,
+.mce-window .wp-editor-help th {
+        font-size: 13px;
+        vertical-align: middle;
+        
+}
+
+.mce-window .wp-editor-help td {
+        padding: 5px;
+        word-wrap: break-word;
+        white-space: normal;
+}
+
+.mce-window .wp-editor-help th {
+        font-weight: bold;
+        padding: 5px 0 0;
+        text-align: center;
+}
+
+.mce-window .wp-editor-help kbd {
+        font-family: monospace;
+        padding: 2px 7px;
+        font-weight: bold;
+        margin: 0 1px;
+        background: #eaeaea;
+        background: rgba(0,0,0,0.08);
+}
+
+.mce-window .wp-help-header td {
+        font-weight: bold;
+        padding: 0 5px;
 }
 

trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -202 +202 @@
 
         editor.addCommand( 'WP_Help', function() {
-                editor.windowManager.open({
-                        url: tinymce.baseURL + '/wp-mce-help.php',
+                var access = tinymce.Env.mac ? __( 'Ctrl + Alt + letter:' ) : __( 'Shift + Alt + letter:' ),
+                        meta = tinymce.Env.mac ? __( 'Cmd + letter:' ) : __( 'Ctrl + letter:' ),
+                        table1 = [],
+                        table2 = [],
+                        header;
+
+                each( [
+                        { c: 'Copy',      x: 'Cut'              },
+                        { v: 'Paste',     a: 'Select all'       },
+                        { z: 'Undo',      y: 'Redo'             },
+                        { b: 'Bold',      i: 'Italic'           },
+                        { u: 'Underline', k: 'Insert/edit link' }
+                ], function( row ) {
+                        table1.push( tr( row ) );
+                } );
+
+                each( [
+                        { 1: 'Heading 1',             2: 'Heading 2'                     },
+                        { 3: 'Heading 3',             4: 'Heading 4'                     },
+                        { 5: 'Heading 5',             6: 'Heading 6'                     },
+                        { l: 'Align left',            c: 'Align center'                  },
+                        { r: 'Align right',           j: 'Justify'                       },
+                        { d: 'Strikethrough',         q: 'Blockquote'                    },
+                        { u: 'Bullet list',           o: 'Numbered list'                 },
+                        { a: 'Insert/edit link',      s: 'Remove link'                   },
+                        { m: 'Insert/edit image',     t: 'Insert Read More tag'          },
+                        { h: 'Keyboard Shortcuts',    x: 'Code'                          },
+                        { p: 'Insert Page Break tag', w: 'Distraction-free writing mode' }
+                ], function( row ) {
+                        table2.push( tr( row ) );
+                } );
+
+                function tr( row ) {
+                        var out = '<tr>';
+
+                        each( row, function( text, key ) {
+                                if ( ! text ) {
+                                        out += '<th></th><td></td>';
+                                } else {
+                                        out += '<th><kbd>' + key + '</kbd></th><td>' + __( text ) + '</td>';
+                                }
+                        });
+
+                        return out + '</tr>';
+                }
+
+                header = [ __( 'Letter' ), __( 'Action' ), __( 'Letter' ), __( 'Action' ) ];
+                header = '<tr class="wp-help-header"><td>' + header.join( '</td><td>' ) + '</td></tr>';
+
+                editor.windowManager.open( {
                         title: 'Keyboard Shortcuts',
-                        width: 450,
-                        height: 420,
-                        classes: 'wp-help',
-                        buttons: { text: 'Close', onclick: 'close' }
-                });
-        });
+                        items: {
+                                type: 'container',
+                                classes: 'wp-help',
+                                html: (
+                                        '<div class="wp-editor-help">' +
+                                        '<p>' + __( 'Default shortcuts,' ) + ' ' + meta + '</p>' +
+                                        '<table>' +
+                                                header +
+                                                table1.join('') +
+                                        '</table>' +
+                                        '<p>' + __( 'Additional shortcuts,' ) + ' ' + access + '</p>' +
+                                        '<table>' +
+                                                header +
+                                                table2.join('') +
+                                        '</table>' +
+                                        '<p>' + __( 'Focus shortcuts:' ) + '</p>' +
+                                        '<table>' +
+                                                tr({ 'Alt + F8':  'Inline toolbar (when an image, link or preview is selected)' }) +
+                                                tr({ 'Alt + F9':  'Editor menu (when enabled)' }) +
+                                                tr({ 'Alt + F10': 'Editor toolbar' }) +
+                                                tr({ 'Alt + F11': 'Elements path' }) +
+                                        '</table></div>'
+                                )
+                        },
+                        buttons: {
+                                text: 'Close',
+                                onclick: 'close'
+                        }
+                } );
+        } );
 
         editor.addCommand( 'WP_Medialib', function() {