WordPress.org

Make WordPress Core

Changeset 30694


Ignore:
Timestamp:
12/02/2014 12:25:15 AM (6 years ago)
Author:
azaozz
Message:

TinyMCE: update the wpView toolbar to look the same as the new image toolbar.
Fixes #30561.

Location:
trunk/src/wp-includes/js
Files:
1 added
1 deleted
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/mce-view.js

    r30642 r30694  
    5757                    '<p class="wpview-selection-before">\u00a0</p>' +
    5858                    '<div class="wpview-body" contenteditable="false">' +
    59                         '<div class="toolbar">' +
     59                        '<div class="toolbar mce-arrow-down">' +
    6060                            ( _.isFunction( views[ this.type ].edit ) ? '<div class="dashicons dashicons-edit edit"></div>' : '' ) +
    61                             '<div class="dashicons dashicons-no-alt remove"></div>' +
     61                            '<div class="dashicons dashicons-no remove"></div>' +
    6262                        '</div>' +
    6363                        '<div class="wpview-content wpview-type-' + this.type + '">' +
  • trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

    r29766 r30694  
    116116            dom = editor.dom;
    117117
    118         // Bail if node is already selected.
    119         if ( ! viewNode || viewNode === selected ) {
     118        if ( ! viewNode ) {
     119            return;
     120        }
     121
     122        // Adjust the toolbar position and bail if node is already selected.
     123        if ( viewNode === selected ) {
     124            adjustToolbarPosition( viewNode );
    120125            return;
    121126        }
     
    129134        selected = viewNode;
    130135        dom.setAttrib( viewNode, 'data-mce-selected', 1 );
     136        adjustToolbarPosition( viewNode );
    131137
    132138        clipboard = dom.create( 'div', {
     
    150156        editor.nodeChanged();
    151157        editor.fire( 'wpview-selected', viewNode );
     158    }
     159
     160    function adjustToolbarPosition( viewNode ) {
     161        var delta = 0,
     162            toolbar = editor.$( viewNode ).find( '.toolbar' ),
     163            editorToolbar = tinymce.$( editor.editorContainer ).find( '.mce-toolbar-grp' )[0],
     164            editorToolbarBottom = ( editorToolbar && editorToolbar.getBoundingClientRect().bottom ) || 0;
     165       
     166        if ( toolbar.length && editor.iframeElement ) {
     167            // 48 = 43 for the toolbar + 5 buffer
     168            delta = viewNode.getBoundingClientRect().top + editor.iframeElement.getBoundingClientRect().top - editorToolbarBottom - 48;
     169        }
     170
     171        if ( delta < 0 ) {
     172            toolbar.removeClass( 'mce-arrow-down' ).css({ top: ( -43 + delta * -1 ) });
     173        } else if ( delta > 0 && ! toolbar.hasClass( 'mce-arrow-down' ) ) {
     174            toolbar.addClass( 'mce-arrow-down' ).css({ top: '' });
     175        }
    152176    }
    153177
  • trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

    r30490 r30694  
    225225/* delegate the handling of the selection to the wpview tinymce plugin */
    226226.wpview-wrap,
    227 .wpview-wrap *,
    228 #wp-image-toolbar,
    229 #wp-image-toolbar * {
     227.wpview-wrap * {
    230228    -moz-user-select: none;
    231229    -webkit-user-select: none;
     
    324322.wpview-wrap .toolbar {
    325323    position: absolute;
    326     top: 0;
    327     left: 0;
     324    top: -43px;
     325    left: 45%;
     326    left: calc(50% - 32px);
    328327    display: none;
    329328    z-index: 100;
     329    background-color: #f5f5f5;
     330    border: 1px solid #aaa;
     331    padding: 1px;
     332    cursor: default;
     333    -webkit-border-radius: 2px;
     334    border-radius: 2px;
     335    -webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
     336    box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
     337    -webkit-box-sizing: border-box;
     338    -moz-box-sizing: border-box;
     339    box-sizing: border-box;
     340    margin-bottom: 8px;
    330341}
    331342
    332343.wpview-wrap[data-mce-selected] .toolbar {
    333344    display: block;
     345}
     346
     347.wpview-wrap .toolbar:before,
     348.wpview-wrap .toolbar:after {
     349    position: absolute;
     350    left: 50%;
     351    display: block;
     352    width: 0;
     353    height: 0;
     354    border-style: solid;
     355    border-color: transparent;
     356    border-width: 9px;
     357    margin-left: -9px;
     358    content: '';
     359}
     360
     361.wpview-wrap .toolbar:after {
     362    border-width: 8px;
     363    margin-left: -8px;
     364}
     365
     366.wpview-wrap .toolbar.mce-arrow-down:before {
     367    bottom: -18px;
     368    border-top-color: #aaa;
     369}
     370
     371.wpview-wrap .toolbar.mce-arrow-down:after {
     372    bottom: -16px;
     373    border-top-color: #f5f5f5;
     374}
     375
     376.wpview-wrap .toolbar.mce-arrow-up:before {
     377    top: -18px;
     378    border-bottom-color: #aaa;
     379}
     380
     381.wpview-wrap .toolbar.mce-arrow-up:after {
     382    top: -16px;
     383    border-bottom-color: #f5f5f5;
     384}
     385
     386.wpview-wrap .toolbar div {
     387    margin: 2px;
     388    padding: 2px 3px;
     389    width: 20px;
     390    height: 20px;
     391    color: #777;
     392    cursor: pointer;
     393    font-size: 20px;
     394    border: 1px solid transparent;
     395    border-radius: 2px;
     396}
     397
     398.wpview-wrap .toolbar div:hover {
     399    background-color: #fafafa;
     400    border-color: #999;
     401    color: #222;
     402    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
     403    box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
     404    outline: none;
    334405}
    335406
     
    385456}
    386457
    387 #wp-image-toolbar {
    388     position: absolute;
    389     margin: 0;
    390 }
    391 
    392 .wpview-wrap .toolbar div,
    393 #wp-image-toolbar i {
    394     margin-top: 7px;
    395     margin-left: 7px;
    396     padding: 2px;
    397     width: 30px;
    398     height: 30px;
    399     box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    400     background-color: #000;
    401     background-color: rgba(0,0,0,0.9);
    402     cursor: pointer;
    403     color: white;
    404     font-size: 30px;
    405 }
    406 
    407458.ie8 .wpview-wrap .toolbar div,
    408 .ie7 .wpview-wrap .toolbar div,
    409 .ie8 #wp-image-toolbar i,
    410 .ie7 #wp-image-toolbar i {
     459.ie7 .wpview-wrap .toolbar div {
    411460    display: inline;
    412     padding: 0;
     461    padding: 4px;
    413462}
    414463
     
    418467}
    419468
    420 .ie8 .dashicons-no-alt,
    421 .ie7 .dashicons-no-alt {
    422     background-image: url(images/dashicon-no-alt.png);
     469.ie8 .dashicons-no,
     470.ie7 .dashicons-no {
     471    background-image: url(images/dashicon-no.png);
    423472}
    424473
     
    449498}
    450499
    451 .wpview-wrap .toolbar div:hover,
    452 #wp-image-toolbar i:hover {
    453     box-shadow: 0 1px 3px rgba(0,0,0,0.8);
    454     background-color: #000;
    455     color: #2ea2cc;
    456 }
    457 
    458 /* Audio player is short; therefore let's put the toolbar above */
    459 .wpview-wrap[data-wpview-type="audio"] .toolbar {
    460     top: auto;
    461     bottom: -34px;
    462 }
    463 
    464 .wpview-wrap[data-wpview-type="audio"] .toolbar div {
    465     margin-top: 0;
    466 }
    467 
    468 .wpview-wrap[data-wpview-type="audio"] .toolbar div:first-child {
    469     margin-left: 0;
    470 }
    471 
    472500.wont-play {
    473501    padding: 4px 0;
     
    596624}
    597625
    598 .rtl .wpview-wrap .toolbar {
    599     left: auto;
    600     right: 0;
    601 }
    602 
    603 .rtl .wpview-wrap .toolbar div,
    604 .rtl #wp-image-toolbar i {
    605     margin-left: auto;
    606     margin-right: 7px;
    607 }
    608 
    609626@media print,
    610627    (-o-min-device-pixel-ratio: 5/4),
Note: See TracChangeset for help on using the changeset viewer.