WordPress.org
Get WordPress

Make WordPress Core

Changeset 27857


Ignore:
Timestamp:
03/29/2014 11:57:13 PM (11 years ago)
Author:
azaozz
Message:

Editor:

  • Use standard button styles for the Quicktags buttons.
  • Better style for the TinyMCE buttons (hover/focus/active/disabled).
  • Move the fullscreen (DFW) button to the right.
  • Better style for the Visual/Text buttons in DFW.

Props avryl, see #27279

Location:
trunk/src
Files:
7 edited

Legend:

Unmodified
Added
Removed

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

    r27806 r27857  
    440440    api.refreshButtons = function( fade ) {
    441441        if ( s.mode === 'html' ) {
    442             $('#wp-fullscreen-mode-bar').removeClass('wp-tmce-mode').addClass('wp-html-mode');
     442            $('#wp-fullscreen-mode-bar').removeClass('wp-tmce-mode').addClass('wp-html-mode')
     443                .find('a').removeClass( 'active' ).filter('.wp-fullscreen-mode-html').addClass( 'active' );
    443444
    444445            if ( fade ) {
    … …  
    450451            }
    451452        } else if ( s.mode === 'tinymce' ) {
    452             $('#wp-fullscreen-mode-bar').removeClass('wp-html-mode').addClass('wp-tmce-mode');
     453            $('#wp-fullscreen-mode-bar').removeClass('wp-html-mode').addClass('wp-tmce-mode')
     454                .find('a').removeClass( 'active' ).filter('.wp-fullscreen-mode-tinymce').addClass( 'active' );
    453455
    454456            if ( fade ) {

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

    r27828 r27857  
    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) ) {
    … …  
    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 class="button wp-fullscreen-mode-tinymce" href="#" onclick="wp.editor.fullscreen.switchmode( 'tinymce' ); return false;"><?php _e( 'Visual' ); ?></a>
     1123                    <a class="button wp-fullscreen-mode-html" 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">

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

    r27831 r27857  
    145145    border-bottom: 1px solid #dedede;
    146146    background: #f5f5f5;
    147 }
    148 
    149 .mce-toolbar {
    150     padding: 1px 3px;
     147    padding: 3px 35px 3px 3px;
     148    position: relative;
     149}
     150
     151.mce-toolbar .mce-btn-group {
     152    margin: 0;
    151153}
    152154
    … …  
    160162}
    161163
    162 .mce-toolbar .mce-btn {
     164.mce-toolbar .mce-btn,
     165.qt-fullscreen {
    163166    border-color: transparent;
    164167    background: transparent;
    … …  
    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;
    … …  
    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;
     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 );
     197}
     198
     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 {
    185203    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);
    189 }
    190 
    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;
    195     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);
    199 }
    200 
    201 .mce-toolbar .mce-btn-group .mce-disabled.mce-btn:hover {
    202     border-color: transparent;
    203     background: transparent;
     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 );
     208}
     209
     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
    … …  
    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;
    … …  
    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;
    … …  
    231244
    232245.mce-toolbar .mce-colorbutton .mce-preview {
    233     margin-left: -17px;
     246    margin-left: -16px;
    234247    padding: 0;
    235248    width: 18px;
    … …  
    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 {
    … …  
    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;
     510}
     511
     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;
    518516}
    519517
    … …  
    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';
    … …  
    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}
    … …  
    689696
    690697.mce-i-wp_code:before {
    691     content: "\e017";
     698    content: '\e017';
    692699}
    693700
    … …  
    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;
    848 }
    849 
    850 .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;
     849    padding: 3px 35px 3px 3px;
     850    position: relative;
     851}
     852
     853.wp-core-ui .quicktags-toolbar input.button.button-small {
     854    margin: 2px;
    880855}
    881856
    … …  
    894869.quicktags-toolbar input[value="b"] {
    895870    font-weight: bold;
     871}
     872
     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;
     879    margin-right: 5px;
     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    .wp-core-ui .quicktags-toolbar input.button.button-small {
     909        /* .button-small is normaly 11px, but a bit too small for these buttons. */
     910        font-size: 12px;
     911        height: 26px;
     912        line-height: 24px;
     913    }
    896914}
    897915
    … …  
    14251443-------------------------------------------------------------- */
    14261444
     1445#wp-fullscreen-body,
     1446.mce-fullscreen {
     1447    z-index: 100010;
     1448}
     1449
    14271450#wp-fullscreen-body {
    1428     z-index: 100010;
    14291451    display: none;
    14301452}
    … …  
    14391461    top: 60px;
    14401462    z-index: 100015;
    1441 
    14421463}
    14431464
    … …  
    15011522#fullscreen-topbar {
    15021523    background: #f5f5f5;
    1503     border-bottom: 1px solid #fff;
     1524    border-bottom: 1px solid #dedede;
    15041525    height: 45px;
    15051526    position: fixed;
    … …  
    15521573#wp-fullscreen-mode-bar {
    15531574    padding: 3px 14px 0 0;
    1554 }
    1555 
    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;
    15991575}
    16001576

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

    r27729 r27857  
    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(){};

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

    r27783 r27857  
    5858        onPostRender: function() {
    5959            wpAdvButton = this;
     60            wpAdvButton.active( getUserSetting( 'hidetb' ) === '1' ? true : false );
    6061        }
    6162    });

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

    r27513 r27857  
    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 on the container!
    9596    });
    9697

  • trunk/src/wp-includes/version.php

    r27851 r27857  
    55 * @global string $wp_version
    66 */
    7 $wp_version = '3.9-beta3-27851-src';
     7$wp_version = '3.9-beta3-27857-src';
    88
    99/**
Note: See TracChangeset for help on using the changeset viewer.