WordPress.org

Make WordPress Core

Changeset 32951


Ignore:
Timestamp:
06/26/2015 04:39:11 AM (5 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:
1 deleted
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-editor.php

    r32935 r32951  
    10191019
    10201020            // WordPress strings
    1021             'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ),
    10221021            'Toolbar Toggle' => __( 'Toolbar Toggle' ),
    10231022            'Insert Read More tag' => __( 'Insert Read More tag' ),
     1023            'Insert Page Break tag' => __( 'Insert Page Break tag' ),
    10241024            'Read more...' => __( 'Read more...' ), // Title on the placeholder inside the editor
    10251025            'Distraction-free writing mode' => __( 'Distraction-free writing mode' ),
     
    10271027            'Remove' => __( 'Remove' ), // Tooltip for the 'remove' button in the image toolbar
    10281028            'Edit ' => __( 'Edit' ), // Tooltip for the 'edit' button in the image toolbar
     1029
     1030            // Shortcuts help modal
     1031            'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ),
     1032            'Default shortcuts,' => __( 'Default shortcuts,' ),
     1033            'Additional shortcuts,' => __( 'Additional shortcuts,' ),
     1034            'Focus shortcuts:' => __( 'Focus shortcuts:' ),
     1035            'Inline toolbar (when an image, link or preview is selected)' => __( 'Inline toolbar (when an image, link or preview is selected)' ),
     1036            'Editor menu (when enabled)' => __( 'Editor menu (when enabled)' ),
     1037            'Editor toolbar' => __( 'Editor toolbar' ),
     1038            'Elements path' => __( 'Elements path' ),
     1039            'Ctrl + Alt + letter:' => __( 'Ctrl + Alt + letter:' ),
     1040            'Shift + Alt + letter:' => __( 'Shift + Alt + letter:' ),
     1041            'Cmd + letter:' => __( 'Cmd + letter:' ),
     1042            'Ctrl + letter:' => __( 'Ctrl + letter:' ),
     1043            'Letter' => __( 'Letter' ),
     1044            'Action' => __( 'Action' ),
    10291045        );
    10301046
  • trunk/src/wp-includes/css/editor.css

    r32937 r32951  
    8080}
    8181
    82 .mce-wp-help .mce-window-head {
    83     border-bottom: none;
     82.mce-window .mce-foot {
     83    border-top: 1px solid #dfdfdf;
    8484}
    8585
     
    103103    -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
    104104    box-shadow: 0 0 2px rgba(30,140,190,0.8);
     105}
     106
     107.mce-window .mce-wp-help {
     108    height: 320px;
     109    width: 360px;
     110    overflow: auto;
     111}
     112
     113.mce-window .mce-wp-help * {
     114    -webkit-box-sizing: border-box;
     115    -moz-box-sizing: border-box;
     116    box-sizing: border-box;
     117}
     118
     119.mce-window .mce-wp-help .mce-container-body.mce-undefined {
     120    width: auto !important;
     121}
     122
     123.mce-window .wp-editor-help {
     124    width: 340px;
     125    padding: 10px 15px 0;
     126}
     127
     128.mce-window .wp-editor-help p {
     129    margin: 7px 0;
     130}
     131
     132.mce-window .wp-editor-help table {
     133    width: 320px;
     134    margin-bottom: 20px;
     135}
     136
     137.mce-window .wp-editor-help td,
     138.mce-window .wp-editor-help th {
     139    font-size: 13px;
     140    vertical-align: middle;
     141   
     142}
     143
     144.mce-window .wp-editor-help td {
     145    padding: 5px;
     146    word-wrap: break-word;
     147    white-space: normal;
     148}
     149
     150.mce-window .wp-editor-help th {
     151    font-weight: bold;
     152    padding: 5px 0 0;
     153    text-align: center;
     154}
     155
     156.mce-window .wp-editor-help kbd {
     157    font-family: monospace;
     158    padding: 2px 7px;
     159    font-weight: bold;
     160    margin: 0 1px;
     161    background: #eaeaea;
     162    background: rgba(0,0,0,0.08);
     163}
     164
     165.mce-window .wp-help-header td {
     166    font-weight: bold;
     167    padding: 0 5px;
    105168}
    106169
  • trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

    r32899 r32951  
    202202
    203203    editor.addCommand( 'WP_Help', function() {
    204         editor.windowManager.open({
    205             url: tinymce.baseURL + '/wp-mce-help.php',
     204        var access = tinymce.Env.mac ? __( 'Ctrl + Alt + letter:' ) : __( 'Shift + Alt + letter:' ),
     205            meta = tinymce.Env.mac ? __( 'Cmd + letter:' ) : __( 'Ctrl + letter:' ),
     206            table1 = [],
     207            table2 = [],
     208            header;
     209
     210        each( [
     211            { c: 'Copy',      x: 'Cut'              },
     212            { v: 'Paste',     a: 'Select all'       },
     213            { z: 'Undo',      y: 'Redo'             },
     214            { b: 'Bold',      i: 'Italic'           },
     215            { u: 'Underline', k: 'Insert/edit link' }
     216        ], function( row ) {
     217            table1.push( tr( row ) );
     218        } );
     219
     220        each( [
     221            { 1: 'Heading 1',             2: 'Heading 2'                     },
     222            { 3: 'Heading 3',             4: 'Heading 4'                     },
     223            { 5: 'Heading 5',             6: 'Heading 6'                     },
     224            { l: 'Align left',            c: 'Align center'                  },
     225            { r: 'Align right',           j: 'Justify'                       },
     226            { d: 'Strikethrough',         q: 'Blockquote'                    },
     227            { u: 'Bullet list',           o: 'Numbered list'                 },
     228            { a: 'Insert/edit link',      s: 'Remove link'                   },
     229            { m: 'Insert/edit image',     t: 'Insert Read More tag'          },
     230            { h: 'Keyboard Shortcuts',    x: 'Code'                          },
     231            { p: 'Insert Page Break tag', w: 'Distraction-free writing mode' }
     232        ], function( row ) {
     233            table2.push( tr( row ) );
     234        } );
     235
     236        function tr( row ) {
     237            var out = '<tr>';
     238
     239            each( row, function( text, key ) {
     240                if ( ! text ) {
     241                    out += '<th></th><td></td>';
     242                } else {
     243                    out += '<th><kbd>' + key + '</kbd></th><td>' + __( text ) + '</td>';
     244                }
     245            });
     246
     247            return out + '</tr>';
     248        }
     249
     250        header = [ __( 'Letter' ), __( 'Action' ), __( 'Letter' ), __( 'Action' ) ];
     251        header = '<tr class="wp-help-header"><td>' + header.join( '</td><td>' ) + '</td></tr>';
     252
     253        editor.windowManager.open( {
    206254            title: 'Keyboard Shortcuts',
    207             width: 450,
    208             height: 420,
    209             classes: 'wp-help',
    210             buttons: { text: 'Close', onclick: 'close' }
    211         });
    212     });
     255            items: {
     256                type: 'container',
     257                classes: 'wp-help',
     258                html: (
     259                    '<div class="wp-editor-help">' +
     260                    '<p>' + __( 'Default shortcuts,' ) + ' ' + meta + '</p>' +
     261                    '<table>' +
     262                        header +
     263                        table1.join('') +
     264                    '</table>' +
     265                    '<p>' + __( 'Additional shortcuts,' ) + ' ' + access + '</p>' +
     266                    '<table>' +
     267                        header +
     268                        table2.join('') +
     269                    '</table>' +
     270                    '<p>' + __( 'Focus shortcuts:' ) + '</p>' +
     271                    '<table>' +
     272                        tr({ 'Alt + F8':  'Inline toolbar (when an image, link or preview is selected)' }) +
     273                        tr({ 'Alt + F9':  'Editor menu (when enabled)' }) +
     274                        tr({ 'Alt + F10': 'Editor toolbar' }) +
     275                        tr({ 'Alt + F11': 'Elements path' }) +
     276                    '</table></div>'
     277                )
     278            },
     279            buttons: {
     280                text: 'Close',
     281                onclick: 'close'
     282            }
     283        } );
     284    } );
    213285
    214286    editor.addCommand( 'WP_Medialib', function() {
Note: See TracChangeset for help on using the changeset viewer.