WordPress.org
Get WordPress

Make WordPress Core

Ticket #27279: 27279.6.patch

File 27279.6.patch, 13.2 KB (added by iseulde, 10 years ago)

Style :active state, use class instead of #qt_content_fullscreen.

  • src/wp-admin/js/wp-fullscreen.js

     
    438438        });
    439439
    440440        api.refreshButtons = function( fade ) {
     441                $( '#wp-fullscreen-mode-tinymce, #wp-fullscreen-mode-html' ).removeClass( 'active' );
     442                $( '#wp-fullscreen-mode-' + s.mode ).addClass( 'active' );
    441443                if ( s.mode === 'html' ) {
    442444                        $('#wp-fullscreen-mode-bar').removeClass('wp-tmce-mode').addClass('wp-html-mode');
    443445

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

     
    669669                if ( self::$has_tinymce )
    670670                        wp_enqueue_script('editor');
    671671
    672                 if ( self::$has_quicktags )
    673                         wp_enqueue_script('quicktags');
     672                if ( self::$has_quicktags ) {
     673                        wp_enqueue_script( 'quicktags' );
     674                        wp_enqueue_style( 'buttons' );
     675                }
    674676
    675677                if ( in_array('wplink', self::$plugins, true) || in_array('link', self::$qt_buttons, true) ) {
    676678                        wp_enqueue_script('wplink');
    … …  
    11151117                        <div id="wp-fullscreen-close"><a href="#" onclick="wp.editor.fullscreen.off();return false;"><?php _e('Exit fullscreen'); ?></a></div>
    11161118                        <div id="wp-fullscreen-central-toolbar" style="width:<?php echo $width; ?>px;">
    11171119
    1118                         <div id="wp-fullscreen-mode-bar"><div id="wp-fullscreen-modes">
    1119                                 <a href="#" onclick="wp.editor.fullscreen.switchmode('tinymce');return false;"><?php _e( 'Visual' ); ?></a>
    1120                                 <a href="#" onclick="wp.editor.fullscreen.switchmode('html');return false;"><?php _ex( 'Text', 'Name for the Text editor tab (formerly HTML)' ); ?></a>
    1121                         </div></div>
     1120                        <div id="wp-fullscreen-mode-bar">
     1121                                <div id="wp-fullscreen-modes" class="button-group">
     1122                                        <a id="wp-fullscreen-mode-tinymce" class="button" href="#" onclick="wp.editor.fullscreen.switchmode( 'tinymce' ); return false;"><?php _e( 'Visual' ); ?></a>
     1123                                        <a id="wp-fullscreen-mode-html" class="button" href="#" onclick="wp.editor.fullscreen.switchmode( 'html' ); return false;"><?php _ex( 'Text', 'Name for the Text editor tab (formerly HTML)' ); ?></a>
     1124                                </div>
     1125                        </div>
    11221126
    11231127                        <div id="wp-fullscreen-button-bar"><div id="wp-fullscreen-buttons" class="mce-toolbar">
    11241128                <?php

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

     
    144144div.mce-toolbar-grp {
    145145        border-bottom: 1px solid #dedede;
    146146        background: #f5f5f5;
     147        padding: 3px 38px 3px 6px;
     148        position: relative;
    147149}
    148150
    149 .mce-toolbar {
    150         padding: 1px 3px;
     151.mce-toolbar .mce-btn-group {
     152        margin: 0;
    151153}
    152154
    153155div.mce-statusbar {
    … …  
    159161        margin: 0;
    160162}
    161163
    162 .mce-toolbar .mce-btn {
     164.mce-toolbar .mce-btn,
     165.qt-fullscreen {
    163166        border-color: transparent;
    164167        background: transparent;
    165168        -webkit-box-shadow: none;
    166169        box-shadow: none;
    167170        text-shadow: none;
     171        cursor: pointer;
    168172}
    169173
    170174#wp-fullscreen-buttons .mce-btn,
    171 .mce-toolbar .mce-btn-group .mce-btn {
     175.mce-toolbar .mce-btn-group .mce-btn,
     176.qt-fullscreen {
    172177        border: 1px solid transparent;
    173         margin: 0 1px;
    174         -webkit-border-radius: 2px;
    175         border-radius: 2px;
     178        margin: 2px;
     179        background-image: none;
     180        -webkit-border-radius: 3px;
     181        border-radius: 3px;
    176182        -webkit-filter: none;
    177183        filter: none;
    178184}
    179185
    180186#wp-fullscreen-buttons .mce-btn:hover,
    181 .mce-toolbar .mce-btn-group .mce-btn:hover {
    182         -webkit-box-shadow: 0 0 transparent;
    183         box-shadow: 0 0 transparent;
    184         border-color: #bbb;
    185         background: #eee;
    186         background-image: -webkit-gradient(linear, left bottom, left top, from(#e5e5e5), to(#fff));
    187         background-image: -webkit-linear-gradient(bottom, #e5e5e5, #fff);
    188         background-image: linear-gradient(to top, #e5e5e5, #fff);
     187.mce-toolbar .mce-btn-group .mce-btn:hover,
     188#wp-fullscreen-buttons .mce-btn:focus,
     189.mce-toolbar .mce-btn-group .mce-btn:focus,
     190.qt-fullscreen:hover,
     191.qt-fullscreen:focus {
     192        background: #fafafa;
     193        border-color: #999;
     194        color: #222;
     195        -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
     196        box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
    189197}
    190198
    191 .mce-toolbar .mce-btn-group .mce-btn.mce-active {
    192         -webkit-box-shadow: 0 0 transparent;
    193         box-shadow: 0 0 transparent;
    194         border-color: #bbb;
     199.mce-toolbar .mce-btn-group .mce-btn.mce-active,
     200#wp-fullscreen-buttons .mce-btn.mce-active,
     201.mce-toolbar .mce-btn-group .mce-btn:active,
     202#wp-fullscreen-buttons .mce-btn:active {
    195203        background: #eee;
    196         background-image: -webkit-gradient(linear, left bottom, left top, from(#f6f6f6), to(#e3e3e3));
    197         background-image: -webkit-linear-gradient(bottom, #f6f6f6, #e3e3e3);
    198         background-image: linear-gradient(to top, #f6f6f6, #e3e3e3);
     204        border-color: #999;
     205        color: #333;
     206        -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     207        box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    199208}
    200209
    201 .mce-toolbar .mce-btn-group .mce-disabled.mce-btn:hover {
    202         border-color: transparent;
    203         background: transparent;
     210.mce-toolbar .mce-btn-group .mce-btn.mce-disabled:hover,
     211#wp-fullscreen-buttons .mce-btn.mce-disabled:hover,
     212.mce-toolbar .mce-btn-group .mce-btn.mce-disabled:focus,
     213#wp-fullscreen-buttons .mce-btn.mce-disabled:focus {
     214        color: #aaa;
     215        background: none;
     216        border-color: #ddd;
     217        text-shadow: 0 1px 0 #fff;
     218        -webkit-box-shadow: none;
     219        box-shadow: none;
    204220}
    205221
    206222.mce-toolbar .mce-btn-group .mce-first,
    … …  
    208224        border-color: transparent;
    209225}
    210226
    211 .mce-toolbar .mce-btn button {
     227.mce-toolbar .mce-btn button,
     228.qt-fullscreen {
    212229        padding: 2px 3px;
    213230        line-height: normal;
    214231}
    … …  
    217234        text-shadow: none;
    218235}
    219236
    220 .mce-toolbar .mce-btn:focus {
    221         outline: 1px solid #888;
    222 }
    223 
    224237.mce-toolbar .mce-btn-group > div {
    225238        white-space: normal;
    226239}
    … …  
    230243}
    231244
    232245.mce-toolbar .mce-colorbutton .mce-preview {
    233         margin-left: -17px;
     246        margin-left: -16px;
    234247        padding: 0;
    235248        width: 18px;
    236249}
    … …  
    430443        text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
    431444}
    432445
    433 @media screen and ( max-width: 782px ) {
    434         .mce-toolbar .mce-btn button {
    435                 padding: 5px 6px;
    436         }
    437 
    438         #wp-fullscreen-buttons .mce-btn,
    439         .mce-toolbar .mce-btn-group .mce-btn {
    440                 margin: 0 3px;
    441         }
    442 
    443         .mce-toolbar .mce-colorbutton .mce-preview {
    444                 margin-left: -20px;
    445         }
    446 
    447         .mce-window .mce-btn {
    448                 padding: 2px 0;
    449         }
    450 }
    451 
    452446/* Charmap modal */
    453447.mce-charmap {
    454448        margin: 3px;
    … …  
    502496        padding: 0;
    503497}
    504498
    505 .mce-toolbar .mce-btn:hover .mce-ico,
    506 .mce-toolbar .mce-btn.mce-active .mce-ico,
    507 .mce-toolbar .mce-btn:hover .mce-caret,
    508 .mce-toolbar .mce-btn.mce-active .mce-caret {
    509         color: #333;
    510 }
    511 
    512 .mce-toolbar .mce-btn.mce-active .mce-open {
    513         border-left-color: #bdbdbd;
     499.qt-fullscreen {
     500        color: #777;
     501        line-height: 20px;
     502        width: 28px;
     503        height: 26px;
     504        text-align: center;
     505        text-shadow: none;
    514506}
    515507
    516508.mce-toolbar .mce-btn .mce-open {
    517509        line-height: 20px;
    518510}
    519511
     512.mce-toolbar .mce-btn:hover .mce-open,
     513.mce-toolbar .mce-btn:focus .mce-open,
     514.mce-toolbar .mce-btn.mce-active .mce-open {
     515        border-left-color: #999;
     516}
     517
    520518i.mce-i-bold,
    521519i.mce-i-italic,
    522520i.mce-i-bullist,
    … …  
    561559        padding-right: 2px;
    562560}
    563561
     562.qt-fullscreen {
     563        font: normal 20px/1 'dashicons';
     564        vertical-align: top;
     565        speak: none;
     566        -webkit-font-smoothing: antialiased;
     567        -moz-osx-font-smoothing: grayscale;
     568}
     569
    564570i.mce-i-bold:before {
    565571        content: '\f200';
    566572}
    … …  
    614620}
    615621
    616622i.mce-i-fullscreen:before,
    617 i.mce-i-wp_fullscreen:before {
     623i.mce-i-wp_fullscreen:before,
     624.qt-fullscreen:before {
    618625        content: '\f211';
    619626}
    620627
    … …  
    688695}
    689696
    690697.mce-i-wp_code:before {
    691         content: "\e017";
     698        content: '\e017';
    692699}
    693700
    694701/* Editors */
    … …  
    839846.quicktags-toolbar {
    840847        border-bottom-style: solid;
    841848        border-bottom-width: 1px;
    842         padding: 2px 8px 0;
    843         min-height: 29px;
    844 }
    845 
    846 .quicktags-toolbar > div {
    847         padding: 2px 4px 0;
     849        padding: 3px 38px 3px 6px;
     850        position: relative;
    848851}
    849852
    850853.quicktags-toolbar input {
    851         margin: 2px 1px 4px;
    852         line-height: 18px;
    853         display: inline-block;
    854         min-width: 26px;
    855         padding: 2px 4px;
    856         font: 12px/18px "Open Sans", sans-serif;
    857         color: #464646;
    858         cursor: pointer;
    859         border: 1px solid #c3c3c3;
    860         -webkit-border-radius: 3px;
    861         border-radius: 3px;
    862         background: #eee;
    863         background-image: -webkit-gradient(linear, left bottom, left top, from(#e3e3e3), to(#fff));
    864         background-image: -webkit-linear-gradient(bottom, #e3e3e3, #fff);
    865         background-image: linear-gradient(to top, #e3e3e3, #fff);
    866 }
    867 
    868 .quicktags-toolbar input:hover {
    869         border-color: #aaa;
    870         background: #ddd;
    871 }
    872 
    873 .quicktags-toolbar input:focus {
    874         border-color: #777;
    875         outline: 0;
    876 }
    877 
    878 .quicktags-toolbar input:active {
    879         border-color: #aaa;
     854        margin: 2px!important; /* Overrule button.css */
    880855}
    881856
    882857.quicktags-toolbar input[value="link"] {
    … …  
    895870        font-weight: bold;
    896871}
    897872
     873.mce-toolbar .mce-btn-group .mce-btn.mce-wp-fullscreen,
     874.qt-fullscreen {
     875        position: absolute;
     876        top: 0;
     877        right: 0;
     878        margin-top: 5px!important; /* 3 + 2 */
     879        margin-right: 8px!important; /* 6 + 2 */
     880}
     881
     882@media screen and ( max-width: 782px ) {
     883        .mce-toolbar .mce-btn button,
     884        .qt-fullscreen {
     885                padding: 7px 8px;
     886        }
     887
     888        .qt-fullscreen {
     889                width: 38px;
     890                height: 34px;
     891        }
     892
     893        .mce-toolbar .mce-colorbutton .mce-preview {
     894                margin-left: -21px;
     895        }
     896
     897        .mce-window .mce-btn {
     898                padding: 2px 0;
     899        }
     900
     901        div.mce-toolbar-grp,
     902        .quicktags-toolbar {
     903                padding-right: 46px;
     904        }
     905}
     906
     907@media screen and ( min-width: 782px ) {
     908
     909        .quicktags-toolbar input {
     910                /* .button-small is normaly 11px, but a bit too small for these buttons. */
     911                font-size: 12px!important; /* Overrule button.css. */
     912                height: 26px!important; /* Idem. */
     913                line-height: 24px!important; /* Idem. */
     914        }
     915
     916}
     917
    898918#wp_editbtns,
    899919#wp_gallerybtns {
    900920        padding: 2px;
    … …  
    15001520-------------------------------------------------------------- */
    15011521#fullscreen-topbar {
    15021522        background: #f5f5f5;
    1503         border-bottom: 1px solid #fff;
     1523        border-bottom: 1px solid #dedede;
    15041524        height: 45px;
    15051525        position: fixed;
    15061526        left: 0;
    … …  
    15531573        padding: 3px 14px 0 0;
    15541574}
    15551575
    1556 #wp-fullscreen-modes a {
    1557         display: block;
    1558         font-size: 11px;
    1559         text-decoration: none;
    1560         float: left;
    1561         margin: 1px 0 0 0;
    1562         padding: 2px 6px 2px;
    1563         border-width: 1px 1px 1px 0;
    1564         border-style: solid;
    1565         border-color: #bbb;
    1566         color: #777;
    1567         text-shadow: 0 1px 0 #fff;
    1568         background-color: #f4f4f4;
    1569         background: #f4f4f4;
    1570         background-image: -webkit-gradient(linear, left bottom, left top, from(#e4e4e4), to(#f9f9f9));
    1571         background-image: -webkit-linear-gradient(bottom, #e4e4e4, #f9f9f9);
    1572         background-image: linear-gradient(to top, #e4e4e4, #f9f9f9);
    1573 }
    1574 
    1575 #wp-fullscreen-modes a:hover,
    1576 .wp-html-mode #wp-fullscreen-modes a:last-child,
    1577 .wp-tmce-mode #wp-fullscreen-modes a:first-child {
    1578         color: #333;
    1579         border-color: #999;
    1580         background: #eee;
    1581         background-image: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#f9f9f9));
    1582         background-image: -webkit-linear-gradient(top, #e4e4e4, #f9f9f9);
    1583         background-image: linear-gradient(to bottom, #e4e4e4, #f9f9f9);
    1584 }
    1585 
    1586 #wp-fullscreen-modes a:first-child {
    1587         border-width: 1px;
    1588         -webkit-border-top-left-radius: 3px;
    1589         border-top-left-radius: 3px;
    1590         -webkit-border-bottom-left-radius: 3px;
    1591         border-bottom-left-radius: 3px;
    1592 }
    1593 
    1594 #wp-fullscreen-modes a:last-child {
    1595         -webkit-border-top-right-radius: 3px;
    1596         border-top-right-radius: 3px;
    1597         -webkit-border-bottom-right-radius: 3px;
    1598         border-bottom-right-radius: 3px;
    1599 }
    1600 
    16011576#wp-fullscreen-buttons .hidden {
    16021577        display: none;
    16031578}

  • src/wp-includes/js/quicktags.js

     
    406406        };
    407407        qt.Button.prototype.html = function(idPrefix) {
    408408                var access = this.access ? ' accesskey="' + this.access + '"' : '';
    409                 return '<input type="button" id="' + idPrefix + this.id + '"' + access + ' class="ed_button" title="' + this.title + '" value="' + this.display + '" />';
     409                if ( this.id === 'fullscreen' ) {
     410                        return '<button type="button" id="' + idPrefix + this.id + '"' + access + ' class="ed_button qt-fullscreen" title="' + this.title + '"></button>';
     411                }
     412                return '<input type="button" id="' + idPrefix + this.id + '"' + access + ' class="ed_button button button-small" title="' + this.title + '" value="' + this.display + '" />';
    410413        };
    411414        qt.Button.prototype.callback = function(){};
    412415

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

     
    5757                cmd: 'WP_Adv',
    5858                onPostRender: function() {
    5959                        wpAdvButton = this;
     60                        wpAdvButton.active( getUserSetting( 'hidetb' ) === '1' ? true : false );
    6061                }
    6162        });
    6263

  • src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js

     
    9191        editor.addButton( 'wp_fullscreen', {
    9292                tooltip: 'Distraction Free Writing',
    9393                shortcut: 'Alt+Shift+W',
    94                 onclick: toggleFullscreen
     94                onclick: toggleFullscreen,
     95                classes: 'wp-fullscreen btn widget' // This overwrites all classes!
    9596        });
    9697
    9798        editor.addMenuItem( 'wp_fullscreen', {