WordPress.org

Make WordPress Core

Ticket #19570: 19570.7.diff

File 19570.7.diff, 10.7 KB (added by lessbloat, 9 years ago)
  • wp-admin/js/post-formats.js

     
    11window.wp = window.wp || {};
    22
    33(function($){
    4         var imageFrame;
     4        var imageFrame,
     5                postFormatSelection = $('.post-format-selection');
    56
     7        // Post formats dropdown
     8        postFormatSelection.on('focusin mouseenter', function () {
     9                $(this).addClass('open');
     10        }).on('focusout mouseleave', function () {
     11                $(this).removeClass('open');
     12        });
     13
    614        // Post formats selection
    7         $('.post-format-select a').on( 'click', function(e){
     15        postFormatSelection.find('a').on( 'click', function(e){
    816                e.preventDefault();
    917                var $this = $(this),
    1018                        format = $this.data('wpFormat');
    11                 $('.post-format-select a.nav-tab-active').removeClass('nav-tab-active');
    12                 $this.addClass('nav-tab-active').blur();
     19
     20                postFormatSelection.removeClass('open').find('.selected').removeClass(currentPostFormat).addClass(format);
    1321                $('#post_format').val(format);
    1422                $('#post-body-content').attr('class', 'wp-format-' + format );
     23                $('#title').focus();
     24
     25                currentPostFormat = format;
    1526        });
    1627
    1728        // Image selection
  • wp-admin/edit-form-advanced.php

     
    330330?>
    331331
    332332<div id="poststuff">
     333<div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
     334<div id="post-body-content"<?php echo $format_class; ?>>
    333335
    334 <?php
    335 if ( post_type_supports( $post_type, 'post-formats' ) ) {
    336         $all_post_formats = get_post_format_strings();
     336<?php if ( post_type_supports($post_type, 'title') ) { ?>
     337<div id="titlediv">
     338<div class="title-container">
     339        <?php
     340        if ( post_type_supports( $post_type, 'post-formats' ) ) {
     341                $all_post_formats = get_post_format_strings();
     342                $post_format_options = '';
    337343
    338         echo '<h2 class="nav-tab-wrapper post-format-select">';
     344                foreach ( $all_post_formats as $slug => $label ) {
     345                        $class = '';
     346                        if ( $post_format == $slug ) {
     347                                $class = 'active';
     348                                $active_post_type_slug = $slug;
     349                                $active_post_type_label = $label;
     350                        }
    339351
    340         foreach ( $all_post_formats as $slug => $label ) {
    341                 if ( $post_format == $slug )
    342                         $class = 'nav-tab nav-tab-active';
    343                 else
    344                         $class = 'nav-tab';
    345 
    346                 echo '<a class="' . $class . '" href="?format=' . $slug . '" data-wp-format="' . $slug . '">' . $label . '</a>';
     352                        $post_format_options .= '<a class="' . $class . '" href="?format=' . $slug . '" data-wp-format="' . $slug . '" title="' . sprintf( __( '%s format' ), $slug ) . '"><span class="' . $slug . '"></span>' . $label . '</a>';
     353                }
    347354        }
     355        ?>
     356        <div class="post-format-selection" tabindex="0" title="<?php _e( 'Select a post format' ); ?>">
     357                <div class="current-post-format">
     358                        <div class="selected <?php echo esc_attr( $active_post_type_slug ); ?>">
     359                                <?php echo esc_html( $active_post_type_label ); ?>
     360                        </div>
     361                </div>
     362                <div class="post-format-options">
     363                        <?php echo $post_format_options; ?>
     364                </div>
     365        </div>
    348366
    349         echo '</h2>';
    350 }
    351 ?>
    352 
    353 <div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
    354 <div id="post-body-content"<?php echo $format_class; ?>>
    355 
    356 <?php if ( post_type_supports($post_type, 'title') ) { ?>
    357 <div id="titlediv">
    358 <div id="titlewrap">
    359         <label class="screen-reader-text" id="title-prompt-text" for="title"><?php echo apply_filters( 'enter_title_here', __( 'Enter title here' ), $post ); ?></label>
    360         <input type="text" name="post_title" size="30" value="<?php echo esc_attr( htmlspecialchars( $post->post_title ) ); ?>" id="title" autocomplete="off" />
     367        <div id="titlewrap">
     368                <label class="screen-reader-text" id="title-prompt-text" for="title"><?php echo apply_filters( 'enter_title_here', __( 'Enter title here' ), $post ); ?></label>
     369                <input type="text" name="post_title" size="30" value="<?php echo esc_attr( htmlspecialchars( $post->post_title ) ); ?>" id="title" autocomplete="off" />
     370        </div>
    361371</div>
    362372<div class="inside">
    363373<?php
     
    528538
    529539<?php if ( (isset($post->post_title) && '' == $post->post_title) || (isset($_GET['message']) && 2 > $_GET['message']) ) : ?>
    530540<script type="text/javascript">
    531 try{document.post.title.focus();}catch(e){}
     541try{document.post.title.focus();}catch(e){};
     542var currentPostFormat = '<?php echo esc_html( $active_post_type_slug ); ?>';
    532543</script>
    533544<?php endif; ?>
  • wp-admin/css/wp-admin.css

     
    333316.0 - Themes
    3434        16.1 - Custom Header
    3535        16.2 - Custom Background
    36         16.3 - Tabbed Admin Screen Interface
     36        16.3 - Post Format Selection
    373717.0 - Plugins
    383818.0 - Users
    393919.0 - Tools
     
    29762976        float: left;
    29772977}
    29782978
     2979.title-container {
     2980        position: relative;
     2981        height: 40px;
     2982}
     2983
    29792984#titlediv {
    29802985        position: relative;
    2981         margin-bottom: 10px;
     2986        margin: -1px 0 0;
    29822987}
    29832988
    29842989#titlediv label {
     
    29912996
    29922997#poststuff #titlewrap {
    29932998        border: 0;
    2994         padding: 0;
     2999        position: absolute;
     3000        right: 1px;
     3001        left: 0;
     3002        padding-left: 40px;
     3003        top: 0;
    29953004}
    29963005
    29973006#titlediv #title {
    2998         padding: 3px 8px;
    29993007        font-size: 1.7em;
    3000         line-height: 100%;
     3008        height: 31px;
    30013009        width: 100%;
     3010        padding-left: 6px;
    30023011        outline: none;
     3012        -webkit-border-top-left-radius: 0;
     3013        -webkit-border-bottom-left-radius: 0;
     3014        border-top-left-radius: 0;
     3015        border-bottom-left-radius: 0;
    30033016}
    30043017
    30053018#titlediv #title-prompt-text,
     
    30423055#edit-slug-box {
    30433056        line-height: 23px;
    30443057        min-height: 23px;
    3045         margin-top: 5px;
     3058        margin: 5px 0 10px;
    30463059        padding: 0 10px;
    30473060}
    30483061
     
    53035316
    53045317
    53055318/*------------------------------------------------------------------------------
    5306   16.3 - Tabbed Admin Screen Interface (Experimental)
     5319  16.3 - Post format selection
    53075320------------------------------------------------------------------------------*/
    53085321
    5309 .nav-tab {
    5310         border-style: solid;
    5311         border-width: 1px 1px 0;
    5312         color: #aaa;
    5313         text-shadow: #fff 0 1px 0;
    5314         font-size: 12px;
    5315         line-height: 16px;
    5316         display: inline-block;
    5317         padding: 4px 14px 6px;
    5318         text-decoration: none;
    5319         margin: 0 6px -1px 0;
     5322.post-format-selection {
     5323        background: #fefefe;
     5324        background-image: -webkit-gradient(linear, left bottom, left top, from(#fefefe), to(#f5f5f5));
     5325        background-image: -webkit-linear-gradient(bottom, #fefefe, #f5f5f5);
     5326        background-image:    -moz-linear-gradient(bottom, #fefefe, #f5f5f5);
     5327        background-image:      -o-linear-gradient(bottom, #fefefe, #f5f5f5);
     5328        background-image: linear-gradient(to top, #fefefe, #f5f5f5);
     5329        border-left: 1px solid #dfdfdf;
     5330        border-top: 1px solid #dfdfdf;
     5331        border-bottom: 1px solid #dfdfdf;
     5332        width: 40px;
     5333        height: 29px;
    53205334        -webkit-border-top-left-radius: 3px;
    5321         -webkit-border-top-right-radius: 3px;
     5335        -webkit-border-bottom-left-radius: 3px;
    53225336        border-top-left-radius: 3px;
    5323         border-top-right-radius: 3px;
     5337        border-bottom-left-radius: 3px;
     5338        margin-top: 1px;
     5339        position: absolute;
     5340        z-index: 1000;
    53245341}
    53255342
    5326 .nav-tab-active {
    5327         border-width: 1px;
    5328         color: #464646;
     5343.post-format-selection.open {
     5344        background: #eeeeee;
     5345        border-top: 1px solid #c9c9c9;
     5346        border-left: 1px solid #c9c9c9;
     5347        border-bottom: 1px solid transparent;
     5348        -webkit-border-bottom-left-radius: 0;
     5349        border-bottom-left-radius: 0;
    53295350}
    53305351
    5331 h2.nav-tab-wrapper, h3.nav-tab-wrapper {
    5332         border-bottom-width: 1px;
    5333         border-bottom-style: solid;
    5334         padding-bottom: 0;
     5352.post-format-selection.open .post-format-options {
     5353        display: block;
    53355354}
    53365355
    5337 h2 .nav-tab {
    5338         padding: 4px 10px 6px;
    5339         font-weight: 200;
    5340         font-size: 20px;
    5341         line-height: 24px;
     5356.post-format-selection .selected {
     5357        opacity: 0.6;
     5358        padding: 7px 8px 3px;
     5359        text-indent: -10000px;
     5360}
    53425361
     5362.post-format-selection .standard {
     5363        background: url(../images/post-formats.png) no-repeat -2px -2px;
    53435364}
    53445365
     5366.post-format-selection .image {
     5367        background: url(../images/post-formats.png) no-repeat -33px -2px;
     5368}
    53455369
     5370.post-format-selection .gallery {
     5371        background: url(../images/post-formats.png) no-repeat -66px -2px;
     5372}
     5373
     5374.post-format-selection .audio {
     5375        background: url(../images/post-formats.png) no-repeat -98px -2px;
     5376}
     5377
     5378.post-format-selection .video {
     5379        background: url(../images/post-formats.png) no-repeat -130px -2px;
     5380}
     5381
     5382.post-format-selection .chat {
     5383        background: url(../images/post-formats.png) no-repeat -162px -2px;
     5384}
     5385
     5386.post-format-selection .status {
     5387        background: url(../images/post-formats.png) no-repeat -194px -2px;
     5388}
     5389
     5390.post-format-selection .aside {
     5391        background: url(../images/post-formats.png) no-repeat -226px -2px;
     5392}
     5393
     5394.post-format-selection .quote {
     5395        background: url(../images/post-formats.png) no-repeat -258px -2px;
     5396}
     5397
     5398.post-format-selection .link {
     5399        background: url(../images/post-formats.png) no-repeat -290px -2px;
     5400}
     5401
     5402.post-format-selection .current-post-format {
     5403        background: transparent url(../images/arrows.png) no-repeat 21px 6px;
     5404        border-left: 1px solid #fefefe;
     5405        border-right: 1px solid #fefefe;
     5406        border-top: 1px solid #fefefe;
     5407        -webkit-border-top-left-radius: 3px;
     5408        -webkit-border-bottom-left-radius: 3px;
     5409        border-top-left-radius: 3px;
     5410        border-bottom-left-radius: 3px;
     5411}
     5412
     5413.post-format-selection.open .current-post-format {
     5414        background: #eeeeee url(../images/arrows.png) no-repeat 21px -29px;
     5415        border: 1px solid transparent;
     5416}
     5417
     5418.post-format-options {
     5419        background: #ffffff;
     5420        border-left: 1px solid #cccccc;
     5421        border-right: 1px solid #cccccc;
     5422        display: none;
     5423        position: absolute;
     5424        top: 30px;
     5425        left: -1px;
     5426        width: 150px;
     5427        z-index: 100000;
     5428        -webkit-border-bottom-left-radius: 3px;
     5429        -webkit-border-bottom-right-radius: 3px;
     5430        border-bottom-left-radius: 3px;
     5431        border-bottom-right-radius: 3px;
     5432        box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
     5433}
     5434
     5435.post-format-options a {
     5436        border-bottom: 1px solid #eee;
     5437        display: block;
     5438        padding: 9px 7px 8px 32px;
     5439        position: relative;
     5440        text-decoration: none;
     5441}
     5442
     5443.post-format-options a:last-child {
     5444        border-bottom: 1px solid #cccccc;
     5445        -webkit-border-bottom-left-radius: 3px;
     5446        -webkit-border-bottom-right-radius: 3px;
     5447        border-bottom-left-radius: 3px;
     5448        border-bottom-right-radius: 3px;
     5449}
     5450
     5451.post-format-options a:focus,
     5452.post-format-options a:hover {
     5453        background: #eeeeee;
     5454        border-bottom: 1px solid #dddddd;
     5455        color: #222222;
     5456        outline: none;
     5457}
     5458
     5459.post-format-selection .post-format-options a span {
     5460        background-position-y: 0;
     5461        height: 24px;
     5462        left: 0;
     5463        opacity: 0.5;
     5464        position: absolute;
     5465        top: 0;
     5466        width: 24px;
     5467}
     5468
     5469.post-format-selection .post-format-options a:focus span,
     5470.post-format-selection .post-format-options a:hover span {
     5471        opacity: 1;
     5472}
     5473
    53465474/*------------------------------------------------------------------------------
    53475475  17.0 - Plugins
    53485476------------------------------------------------------------------------------*/