Changeset 32951

Timestamp:

06/26/2015 04:39:11 AM (8 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() {