WordPress.org
Get WordPress

Make WordPress Core

Ticket #19570: 19570.8.diff

File 19570.8.diff, 10.9 KB (added by ryelle, 12 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        <?php if ( ! empty( $post_format_options ) ) : ?>
     357        <div class="post-format-selection" tabindex="0" title="<?php _e( 'Select a post format' ); ?>">
     358                <div class="current-post-format">
     359                        <div class="selected <?php echo esc_attr( $active_post_type_slug ); ?>">
     360                                <?php echo esc_html( $active_post_type_label ); ?>
     361                        </div>
     362                </div>
     363                <div class="post-format-options">
     364                        <?php echo $post_format_options; ?>
     365                </div>
     366        </div>
     367        <?php endif; ?>
    348368
    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" />
     369        <div id="titlewrap" <?php if ( ! empty( $post_format_options ) ) echo 'class="with-post-formats"'; ?>>
     370                <label class="screen-reader-text" id="title-prompt-text" for="title"><?php echo apply_filters( 'enter_title_here', __( 'Enter title here' ), $post ); ?></label>
     371                <input type="text" name="post_title" size="30" value="<?php echo esc_attr( htmlspecialchars( $post->post_title ) ); ?>" id="title" autocomplete="off" />
     372        </div>
    361373</div>
    362374<div class="inside">
    363375<?php
    … …  
    528540
    529541<?php if ( (isset($post->post_title) && '' == $post->post_title) || (isset($_GET['message']) && 2 > $_GET['message']) ) : ?>
    530542<script type="text/javascript">
    531 try{document.post.title.focus();}catch(e){}
     543try{document.post.title.focus();}catch(e){};
     544var currentPostFormat = '<?php echo esc_html( $active_post_type_slug ); ?>';
    532545</script>
    533546<?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        top: 0;
    29953003}
    29963004
     3005#poststuff #titlewrap.with-post-formats {
     3006        padding-left: 40px;
     3007}
     3008
    29973009#titlediv #title {
    2998         padding: 3px 8px;
    29993010        font-size: 1.7em;
    3000         line-height: 100%;
     3011        height: 31px;
    30013012        width: 100%;
     3013        padding-left: 6px;
    30023014        outline: none;
     3015        -webkit-border-top-left-radius: 0;
     3016        -webkit-border-bottom-left-radius: 0;
     3017        border-top-left-radius: 0;
     3018        border-bottom-left-radius: 0;
    30033019}
    30043020
    30053021#titlediv #title-prompt-text,
    … …  
    30423058#edit-slug-box {
    30433059        line-height: 23px;
    30443060        min-height: 23px;
    3045         margin-top: 5px;
     3061        margin: 5px 0 10px;
    30463062        padding: 0 10px;
    30473063}
    30483064
    … …  
    53035319
    53045320
    53055321/*------------------------------------------------------------------------------
    5306   16.3 - Tabbed Admin Screen Interface (Experimental)
     5322  16.3 - Post format selection
    53075323------------------------------------------------------------------------------*/
    53085324
    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;
     5325.post-format-selection {
     5326        background: #fefefe;
     5327        background-image: -webkit-gradient(linear, left bottom, left top, from(#fefefe), to(#f5f5f5));
     5328        background-image: -webkit-linear-gradient(bottom, #fefefe, #f5f5f5);
     5329        background-image:    -moz-linear-gradient(bottom, #fefefe, #f5f5f5);
     5330        background-image:      -o-linear-gradient(bottom, #fefefe, #f5f5f5);
     5331        background-image: linear-gradient(to top, #fefefe, #f5f5f5);
     5332        border-left: 1px solid #dfdfdf;
     5333        border-top: 1px solid #dfdfdf;
     5334        border-bottom: 1px solid #dfdfdf;
     5335        width: 40px;
     5336        height: 29px;
    53205337        -webkit-border-top-left-radius: 3px;
    5321         -webkit-border-top-right-radius: 3px;
     5338        -webkit-border-bottom-left-radius: 3px;
    53225339        border-top-left-radius: 3px;
    5323         border-top-right-radius: 3px;
     5340        border-bottom-left-radius: 3px;
     5341        margin-top: 1px;
     5342        position: absolute;
     5343        z-index: 100;
    53245344}
    53255345
    5326 .nav-tab-active {
    5327         border-width: 1px;
    5328         color: #464646;
     5346.post-format-selection.open {
     5347        background: #eeeeee;
     5348        border-top: 1px solid #c9c9c9;
     5349        border-left: 1px solid #c9c9c9;
     5350        border-bottom: 1px solid transparent;
     5351        -webkit-border-bottom-left-radius: 0;
     5352        border-bottom-left-radius: 0;
    53295353}
    53305354
    5331 h2.nav-tab-wrapper, h3.nav-tab-wrapper {
    5332         border-bottom-width: 1px;
    5333         border-bottom-style: solid;
    5334         padding-bottom: 0;
     5355.post-format-selection.open .post-format-options {
     5356        display: block;
    53355357}
    53365358
    5337 h2 .nav-tab {
    5338         padding: 4px 10px 6px;
    5339         font-weight: 200;
    5340         font-size: 20px;
    5341         line-height: 24px;
     5359.post-format-selection .selected {
     5360        opacity: 0.6;
     5361        padding: 7px 8px 3px;
     5362        text-indent: -10000px;
     5363}
    53425364
     5365.post-format-selection .standard {
     5366        background: url(../images/post-formats.png) no-repeat -2px -2px;
    53435367}
    53445368
     5369.post-format-selection .image {
     5370        background: url(../images/post-formats.png) no-repeat -33px -2px;
     5371}
    53455372
     5373.post-format-selection .gallery {
     5374        background: url(../images/post-formats.png) no-repeat -66px -2px;
     5375}
     5376
     5377.post-format-selection .audio {
     5378        background: url(../images/post-formats.png) no-repeat -98px -2px;
     5379}
     5380
     5381.post-format-selection .video {
     5382        background: url(../images/post-formats.png) no-repeat -130px -2px;
     5383}
     5384
     5385.post-format-selection .chat {
     5386        background: url(../images/post-formats.png) no-repeat -162px -2px;
     5387}
     5388
     5389.post-format-selection .status {
     5390        background: url(../images/post-formats.png) no-repeat -194px -2px;
     5391}
     5392
     5393.post-format-selection .aside {
     5394        background: url(../images/post-formats.png) no-repeat -226px -2px;
     5395}
     5396
     5397.post-format-selection .quote {
     5398        background: url(../images/post-formats.png) no-repeat -258px -2px;
     5399}
     5400
     5401.post-format-selection .link {
     5402        background: url(../images/post-formats.png) no-repeat -290px -2px;
     5403}
     5404
     5405.post-format-selection .current-post-format {
     5406        background: transparent url(../images/arrows.png) no-repeat 21px 6px;
     5407        border-left: 1px solid #fefefe;
     5408        border-right: 1px solid #fefefe;
     5409        border-top: 1px solid #fefefe;
     5410        -webkit-border-top-left-radius: 3px;
     5411        -webkit-border-bottom-left-radius: 3px;
     5412        border-top-left-radius: 3px;
     5413        border-bottom-left-radius: 3px;
     5414}
     5415
     5416.post-format-selection.open .current-post-format {
     5417        background: #eeeeee url(../images/arrows.png) no-repeat 21px -29px;
     5418        border: 1px solid transparent;
     5419}
     5420
     5421.post-format-options {
     5422        background: #ffffff;
     5423        border-left: 1px solid #cccccc;
     5424        border-right: 1px solid #cccccc;
     5425        display: none;
     5426        position: absolute;
     5427        top: 30px;
     5428        left: -1px;
     5429        width: 150px;
     5430        z-index: 100000;
     5431        -webkit-border-bottom-left-radius: 3px;
     5432        -webkit-border-bottom-right-radius: 3px;
     5433        border-bottom-left-radius: 3px;
     5434        border-bottom-right-radius: 3px;
     5435        box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
     5436}
     5437
     5438.post-format-options a {
     5439        border-bottom: 1px solid #eee;
     5440        display: block;
     5441        padding: 9px 7px 8px 32px;
     5442        position: relative;
     5443        text-decoration: none;
     5444}
     5445
     5446.post-format-options a:last-child {
     5447        border-bottom: 1px solid #cccccc;
     5448        -webkit-border-bottom-left-radius: 3px;
     5449        -webkit-border-bottom-right-radius: 3px;
     5450        border-bottom-left-radius: 3px;
     5451        border-bottom-right-radius: 3px;
     5452}
     5453
     5454.post-format-options a:focus,
     5455.post-format-options a:hover {
     5456        background: #eeeeee;
     5457        border-bottom: 1px solid #dddddd;
     5458        color: #222222;
     5459        outline: none;
     5460}
     5461
     5462.post-format-selection .post-format-options a span {
     5463        background-position-y: 0;
     5464        height: 24px;
     5465        left: 0;
     5466        opacity: 0.5;
     5467        position: absolute;
     5468        top: 0;
     5469        width: 24px;
     5470}
     5471
     5472.post-format-selection .post-format-options a:focus span,
     5473.post-format-selection .post-format-options a:hover span {
     5474        opacity: 1;
     5475}
     5476
    53465477/*------------------------------------------------------------------------------
    53475478  17.0 - Plugins
    53485479------------------------------------------------------------------------------*/