Index: wp-admin/js/post-formats.js =================================================================== --- wp-admin/js/post-formats.js (revision 23669) +++ wp-admin/js/post-formats.js (working copy) @@ -1,17 +1,28 @@ window.wp = window.wp || {}; (function($){ - var imageFrame; + var imageFrame, + postFormatSelection = $('.post-format-selection'); + // Post formats dropdown + postFormatSelection.on('focusin mouseenter', function () { + $(this).addClass('open'); + }).on('focusout mouseleave', function () { + $(this).removeClass('open'); + }); + // Post formats selection - $('.post-format-select a').on( 'click', function(e){ + postFormatSelection.find('a').on( 'click', function(e){ e.preventDefault(); var $this = $(this), format = $this.data('wpFormat'); - $('.post-format-select a.nav-tab-active').removeClass('nav-tab-active'); - $this.addClass('nav-tab-active').blur(); + + postFormatSelection.removeClass('open').find('.selected').removeClass(currentPostFormat).addClass(format); $('#post_format').val(format); $('#post-body-content').attr('class', 'wp-format-' + format ); + $('#title').focus(); + + currentPostFormat = format; }); // Image selection Index: wp-admin/edit-form-advanced.php =================================================================== --- wp-admin/edit-form-advanced.php (revision 23669) +++ wp-admin/edit-form-advanced.php (working copy) @@ -330,34 +330,44 @@ ?>
+
+
> - +
+
+ '; + foreach ( $all_post_formats as $slug => $label ) { + $class = ''; + if ( $post_format == $slug ) { + $class = 'active'; + $active_post_type_slug = $slug; + $active_post_type_label = $label; + } - foreach ( $all_post_formats as $slug => $label ) { - if ( $post_format == $slug ) - $class = 'nav-tab nav-tab-active'; - else - $class = 'nav-tab'; - - echo '' . $label . ''; + $post_format_options .= '' . $label . ''; + } } + ?> +
+
+
+ +
+
+
+ +
+
- echo ''; -} -?> - -
-
> - - -
-
- - +
+ + +
post_title) && '' == $post->post_title) || (isset($_GET['message']) && 2 > $_GET['message']) ) : ?> Index: wp-admin/css/wp-admin.css =================================================================== --- wp-admin/css/wp-admin.css (revision 23669) +++ wp-admin/css/wp-admin.css (working copy) @@ -33,7 +33,7 @@ 16.0 - Themes 16.1 - Custom Header 16.2 - Custom Background - 16.3 - Tabbed Admin Screen Interface + 16.3 - Post Format Selection 17.0 - Plugins 18.0 - Users 19.0 - Tools @@ -2976,9 +2976,14 @@ float: left; } +.title-container { + position: relative; + height: 40px; +} + #titlediv { position: relative; - margin-bottom: 10px; + margin: -1px 0 0; } #titlediv label { @@ -2991,15 +2996,23 @@ #poststuff #titlewrap { border: 0; - padding: 0; + position: absolute; + right: 1px; + left: 0; + padding-left: 40px; + top: 0; } #titlediv #title { - padding: 3px 8px; font-size: 1.7em; - line-height: 100%; + height: 31px; width: 100%; + padding-left: 6px; outline: none; + -webkit-border-top-left-radius: 0; + -webkit-border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } #titlediv #title-prompt-text, @@ -3042,7 +3055,7 @@ #edit-slug-box { line-height: 23px; min-height: 23px; - margin-top: 5px; + margin: 5px 0 10px; padding: 0 10px; } @@ -5303,46 +5316,161 @@ /*------------------------------------------------------------------------------ - 16.3 - Tabbed Admin Screen Interface (Experimental) + 16.3 - Post format selection ------------------------------------------------------------------------------*/ -.nav-tab { - border-style: solid; - border-width: 1px 1px 0; - color: #aaa; - text-shadow: #fff 0 1px 0; - font-size: 12px; - line-height: 16px; - display: inline-block; - padding: 4px 14px 6px; - text-decoration: none; - margin: 0 6px -1px 0; +.post-format-selection { + background: #fefefe; + background-image: -webkit-gradient(linear, left bottom, left top, from(#fefefe), to(#f5f5f5)); + background-image: -webkit-linear-gradient(bottom, #fefefe, #f5f5f5); + background-image: -moz-linear-gradient(bottom, #fefefe, #f5f5f5); + background-image: -o-linear-gradient(bottom, #fefefe, #f5f5f5); + background-image: linear-gradient(to top, #fefefe, #f5f5f5); + border-left: 1px solid #dfdfdf; + border-top: 1px solid #dfdfdf; + border-bottom: 1px solid #dfdfdf; + width: 40px; + height: 29px; -webkit-border-top-left-radius: 3px; - -webkit-border-top-right-radius: 3px; + -webkit-border-bottom-left-radius: 3px; border-top-left-radius: 3px; - border-top-right-radius: 3px; + border-bottom-left-radius: 3px; + margin-top: 1px; + position: absolute; + z-index: 1000; } -.nav-tab-active { - border-width: 1px; - color: #464646; +.post-format-selection.open { + background: #eeeeee; + border-top: 1px solid #c9c9c9; + border-left: 1px solid #c9c9c9; + border-bottom: 1px solid transparent; + -webkit-border-bottom-left-radius: 0; + border-bottom-left-radius: 0; } -h2.nav-tab-wrapper, h3.nav-tab-wrapper { - border-bottom-width: 1px; - border-bottom-style: solid; - padding-bottom: 0; +.post-format-selection.open .post-format-options { + display: block; } -h2 .nav-tab { - padding: 4px 10px 6px; - font-weight: 200; - font-size: 20px; - line-height: 24px; +.post-format-selection .selected { + opacity: 0.6; + padding: 7px 8px 3px; + text-indent: -10000px; +} +.post-format-selection .standard { + background: url(../images/post-formats.png) no-repeat -2px -2px; } +.post-format-selection .image { + background: url(../images/post-formats.png) no-repeat -33px -2px; +} +.post-format-selection .gallery { + background: url(../images/post-formats.png) no-repeat -66px -2px; +} + +.post-format-selection .audio { + background: url(../images/post-formats.png) no-repeat -98px -2px; +} + +.post-format-selection .video { + background: url(../images/post-formats.png) no-repeat -130px -2px; +} + +.post-format-selection .chat { + background: url(../images/post-formats.png) no-repeat -162px -2px; +} + +.post-format-selection .status { + background: url(../images/post-formats.png) no-repeat -194px -2px; +} + +.post-format-selection .aside { + background: url(../images/post-formats.png) no-repeat -226px -2px; +} + +.post-format-selection .quote { + background: url(../images/post-formats.png) no-repeat -258px -2px; +} + +.post-format-selection .link { + background: url(../images/post-formats.png) no-repeat -290px -2px; +} + +.post-format-selection .current-post-format { + background: transparent url(../images/arrows.png) no-repeat 21px 6px; + border-left: 1px solid #fefefe; + border-right: 1px solid #fefefe; + border-top: 1px solid #fefefe; + -webkit-border-top-left-radius: 3px; + -webkit-border-bottom-left-radius: 3px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} + +.post-format-selection.open .current-post-format { + background: #eeeeee url(../images/arrows.png) no-repeat 21px -29px; + border: 1px solid transparent; +} + +.post-format-options { + background: #ffffff; + border-left: 1px solid #cccccc; + border-right: 1px solid #cccccc; + display: none; + position: absolute; + top: 30px; + left: -1px; + width: 150px; + z-index: 100000; + -webkit-border-bottom-left-radius: 3px; + -webkit-border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + box-shadow: 2px 2px 3px rgba(0,0,0,0.1); +} + +.post-format-options a { + border-bottom: 1px solid #eee; + display: block; + padding: 9px 7px 8px 32px; + position: relative; + text-decoration: none; +} + +.post-format-options a:last-child { + border-bottom: 1px solid #cccccc; + -webkit-border-bottom-left-radius: 3px; + -webkit-border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} + +.post-format-options a:focus, +.post-format-options a:hover { + background: #eeeeee; + border-bottom: 1px solid #dddddd; + color: #222222; + outline: none; +} + +.post-format-selection .post-format-options a span { + background-position-y: 0; + height: 24px; + left: 0; + opacity: 0.5; + position: absolute; + top: 0; + width: 24px; +} + +.post-format-selection .post-format-options a:focus span, +.post-format-selection .post-format-options a:hover span { + opacity: 1; +} + /*------------------------------------------------------------------------------ 17.0 - Plugins ------------------------------------------------------------------------------*/