Ticket #14097: 14097.title-prompt.diff

wp-admin/css/wp-admin.css

@@ -3032 +3032 @@
         margin: 1px 0;
 }
 
-#titlediv #title-prompt-text,
-#wp-fullscreen-title-prompt-text {
-        color: #bbb;
+#wp-fullscreen-title-prompt-text,
+#titlediv #title-prompt-text {
         position: absolute;
+                right: 0;
+        text-indent: 9px;
+        font-weight: 200;
         font-size: 1.7em;
-        padding: 11px 10px;
+        width: 100%;
+        color: #bbb;
+        padding: 12px 0;
+        color: rgba(0,0,0,0.5);
+        -webkit-transition: all 0.3s ease-in-out;
+        -moz-transition: all 0.3s ease-in-out;
+        transition: all 0.3s ease-in-out;
+}
+
+#titlediv #title-prompt-text {
+        top: 0;
 }
 
 #wp-fullscreen-save .fs-saved {
@@ -3046 +3058 @@
         margin-top: 4px;
 }
 
-#wp-fullscreen-title-prompt-text {
-        padding: 11px;
+#wp-fullscreen-title-prompt-text {}
+
+#titlediv #title-prompt-text.active,
+#wp-fullscreen-title-prompt-text.active {
+        width: 160px;
+        color: #efefef;
+        color: rgba(0,0,0,0.2);
+}
+
+#titlediv #title-prompt-text.off,
+#wp-fullscreen-title-prompt-text.off {
+        opacity: 0;
 }
 
 #poststuff .inside-submitbox,

wp-admin/edit-form-advanced.php

@@ -361 +361 @@
 <?php if ( post_type_supports($post_type, 'title') ) { ?>
 <div id="titlediv">
 <div id="titlewrap">
-        <label class="screen-reader-text" id="title-prompt-text" for="title"><?php echo apply_filters( 'enter_title_here', __( 'Enter title here' ), $post ); ?></label>
+        <label id="title-prompt-text" for="title"><?php echo apply_filters( 'enter_title_here', __( 'Enter title here' ), $post ); ?></label>
         <input type="text" name="post_title" size="30" value="<?php echo esc_attr( htmlspecialchars( $post->post_title ) ); ?>" id="title" autocomplete="off" />
 </div>
 <div class="inside">

wp-admin/js/post.js

@@ -770 +770 @@
         }
 
         wptitlehint = function(id) {
-                id = id || 'title';
+                // Hide the label if the title has a value
+                if ( $( '#title, #wp-fullscreen-title' ).val() != '' )
+                        $( '#title-prompt, #wp-fullscreen-title-prompt-text' ).hide();
 
-                var title = $('#' + id), titleprompt = $('#' + id + '-prompt-text');
-
-                if ( title.val() == '' )
-                        titleprompt.removeClass('screen-reader-text');
-
-                titleprompt.click(function(){
-                        $(this).addClass('screen-reader-text');
-                        title.focus();
+                $( '#title, #wp-fullscreen-title' ).keypress( function () {
+                        $( '#title-prompt-text, #wp-fullscreen-title-prompt-text' ).addClass( 'active' );
                 });
 
-                title.blur(function(){
-                        if ( this.value == '' )
-                                titleprompt.removeClass('screen-reader-text');
-                }).focus(function(){
-                        titleprompt.addClass('screen-reader-text');
-                }).keydown(function(e){
-                        titleprompt.addClass('screen-reader-text');
-                        $(this).unbind(e);
+                // Check the text typed and react occordingly
+                $( '#title, #wp-fullscreen-title' ).change( function () {
+                        if ( $( this ).val() == '' ) {
+                                $( '#title-prompt-text, #wp-fullscreen-title-prompt-text' ).removeClass( 'off' ).removeClass( 'active' );
+                        } else {
+                                $( '#title-prompt-text, #wp-fullscreen-title-prompt-text' ).addClass( 'off' );
+                        }
                 });
         }