From 12c658330683a07b6f51150510538138f5213977 Mon Sep 17 00:00:00 2001
From: ryan <ryan@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Sat, 7 Oct 2006 18:31:39 +0000
Subject: [PATCH] Inline uploader styling from mdawaffe. fixes #3212

git-svn-id: http://svn.automattic.com/wordpress/trunk@4355 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-admin/admin-functions.php  | 28 +++++++++------
 wp-admin/upload-functions.php | 65 ++++++++++++++++++++---------------
 wp-admin/upload-js.php        | 62 +++++++++++++++++++++------------
 wp-admin/upload.css           | 13 +++----
 wp-admin/wp-admin.css         |  4 +--
 5 files changed, 105 insertions(+), 67 deletions(-)

diff --git a/wp-admin/admin-functions.php b/wp-admin/admin-functions.php
index 083a07a110..fe222adc64 100644
--- a/wp-admin/admin-functions.php
+++ b/wp-admin/admin-functions.php
@@ -1969,27 +1969,35 @@ function the_attachment_links($id = false) {
 		return false;
 
 	$icon = get_attachment_icon($post->ID);
-
+	$attachment_data = get_post_meta( $id, '_wp_attachment_metadata', true );
+	$thumb = isset($attachment_data['thumb']);
 ?>
 <form id="the-attachment-links">
 <table>
+	<col />
+	<col class="widefat" />
 	<tr>
-		<th scope="row"><?php _e('Text linked to file') ?></th>
-		<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo $post->guid ?>" class="attachmentlink"><?php echo basename($post->guid) ?></a></textarea></td>
-	</tr>
-	<tr>
-		<th scope="row"><?php _e('Text linked to subpost') ?></th>
-		<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo get_attachment_link($post->ID) ?>" rel="attachment" id="<?php echo $post->ID ?>"><?php echo $post->post_title ?></a></textarea></td>
+		<th scope="row"><?php _e('URL') ?></th>
+		<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><?php echo $post->guid ?></textarea></td>
 	</tr>
 <?php if ( $icon ) : ?>
 	<tr>
-		<th scope="row"><?php _e('Thumbnail linked to file') ?></th>
-		<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo $post->guid ?>" class="attachmentlink"><?php echo $icon ?></a></textarea></td>
+		<th scope="row"><?php $thumb ? _e('Thumbnail linked to file') : _e('Image linked to file'); ?></th>
+		<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo $post->guid; ?>" id="<?php echo $post->ID ?>"><?php echo $icon ?></a></textarea></td>
 	</tr>
 	<tr>
-		<th scope="row"><?php _e('Thumbnail linked to subpost') ?></th>
+		<th scope="row"><?php $thumb ? _e('Thumbnail linked to page') : _e('Image linked to file'); ?></th>
 		<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo get_attachment_link($post->ID) ?>" rel="attachment" id="<?php echo $post->ID ?>"><?php echo $icon ?></a></textarea></td>
 	</tr>
+<?php else : ?>
+	<tr>
+		<th scope="row"><?php _e('Link to file') ?></th>
+		<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo $post->guid ?>" class="attachmentlink"><?php echo basename($post->guid);  ?></a></textarea></td>
+	</tr>
+	<tr>
+		<th scope="row"><?php _e('Link to page') ?></th>
+		<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo get_attachment_link($post->ID) ?>" rel="attachment" id="<?php echo $post->ID ?>"><?php the_title(); ?></a></textarea></td>
+	</tr>
 <?php endif; ?>
 </table>
 </form>
diff --git a/wp-admin/upload-functions.php b/wp-admin/upload-functions.php
index 927873ff39..d0fb32cdf7 100644
--- a/wp-admin/upload-functions.php
+++ b/wp-admin/upload-functions.php
@@ -16,12 +16,15 @@ function wp_upload_display( $dims = false, $href = '' ) {
 	if ( $image_src = strstr($innerHTML, 'src="') ) {
 		$image_src = explode('"', $image_src);
 		$image_src = $image_src[1];
-		$thumb_src = wp_make_link_relative($image_src);
+		$image_rel = wp_make_link_relative($image_src);
 		$class = 'image';
-		$innerHTML = '&nbsp;' . str_replace($image_src, $thumb_src, $innerHTML);
+		$innerHTML = '&nbsp;' . str_replace($image_src, $image_rel, $innerHTML);
+		$image_base = str_replace($image_rel, '', $image_src);
 	}
 
-	$src = wp_make_link_relative( get_the_guid() );
+	$src_base = get_the_guid();
+	$src = wp_make_link_relative( $src_base );
+	$src_base = str_replace($src, '', $src_base);
 
 	$r = '';
 
@@ -33,9 +36,13 @@ function wp_upload_display( $dims = false, $href = '' ) {
 		$r .= "</a>\n";
 	$r .= "\n\t\t<div class='upload-file-data'>\n\t\t\t<p>\n";
 	$r .= "\t\t\t\t<input type='hidden' name='attachment-url-$id' id='attachment-url-$id' value='$src' />\n";
+	$r .= "\t\t\t\t<input type='hidden' name='attachment-url-base-$id' id='attachment-url-base-$id' value='$src_base' />\n";
 
-	if ( $image_src )
-		$r .= "\t\t\t\t<input type='hidden' name='attachment-thumb-url-$id' id='attachment-thumb-url-$id' value='$thumb_src' />\n";
+	if ( isset($attachment_data['thumb']) ) {
+		$r .= "\t\t\t\t<input type='hidden' name='attachment-thumb-url-$id' id='attachment-thumb-url-$id' value='$image_rel' />\n";
+		$r .= "\t\t\t\t<input type='hidden' name='attachment-thumb-url-base-$id' id='attachment-thumb-url-base-$id' value='$image_base' />\n";
+	} elseif ( $image_rel )
+		$r .= "\t\t\t\t<input type='hidden' name='attachment-is-image-$id' id='attachment-is-image-$id' value='1' />\n";
 	if ( isset($width) ) {
 		$r .= "\t\t\t\t<input type='hidden' name='attachment-width-$id' id='attachment-width-$id' value='$width' />\n";
 		$r .= "\t\t\t\t<input type='hidden' name='attachment-height-$id' id='attachment-height-$id' value='$height' />\n";
@@ -48,16 +55,16 @@ function wp_upload_display( $dims = false, $href = '' ) {
 }
 
 function wp_upload_view() {
-	global $style, $post_id;
+	global $style, $post_id, $style;
 	$id = get_the_ID();
 	$attachment_data = get_post_meta( $id, '_wp_attachment_metadata', true );
 ?>
 	<div id="upload-file">
 		<div id="file-title">
-			<h2><?php if ( !isset($attachment_data['width']) )
+			<h2><?php if ( !isset($attachment_data['width']) && 'inline' != $style )
 					echo "<a href='" . get_the_guid() . "' title='" . __('Direct link to file') . "'>";
 				the_title();
-				if ( !isset($attachment_data['width']) )
+				if ( !isset($attachment_data['width']) && 'inline' != $style )
 					echo '</a>';
 			?></h2>
 			<span><?php
@@ -71,15 +78,15 @@ function wp_upload_view() {
 		</div>
 
 		<div id="upload-file-view" class="alignleft">
-<?php		if ( isset($attachment_data['width']) )
+<?php		if ( isset($attachment_data['width']) && 'inline' != $style )
 			echo "<a href='" . get_the_guid() . "' title='" . __('Direct link to file') . "'>";
 		echo wp_upload_display( array(171, 128) );
-		if ( isset($attachment_data['width']) )
+		if ( isset($attachment_data['width']) && 'inline' != $style )
 			echo '</a>'; ?>
 		</div>
 		<?php the_attachment_links( $id ); ?>
 	</div>
-<?php
+<?php	echo "<form action='' id='browse-form'><input type='hidden' id='nonce-value' value='" . wp_create_nonce( 'inlineuploading' )  . "' /></form>\n";
 }
 
 function wp_upload_form() {
@@ -94,10 +101,10 @@ function wp_upload_form() {
 		$attachment_data = get_post_meta( $id, '_wp_attachment_metadata', true );
 ?>
 		<div id="file-title">
-			<h2><?php if ( !isset($attachment_data['width']) )
+			<h2><?php if ( !isset($attachment_data['width']) && 'inline' != $style )
 					echo "<a href='" . get_the_guid() . "' title='" . __('Direct link to file') . "'>";
 				the_title();
-				if ( !isset($attachment_data['width']) )
+				if ( !isset($attachment_data['width']) && 'inline' != $style )
 					echo '</a>';
 			?></h2>
 			<span><?php
@@ -111,31 +118,38 @@ function wp_upload_form() {
 		</div>
 
 	<div id="upload-file-view" class="alignleft">
-<?php		if ( isset($attachment_data['width']) )
+<?php		if ( isset($attachment_data['width']) && 'inline' != $style )
 			echo "<a href='" . get_the_guid() . "' title='" . __('Direct link to file') . "'>";
 		echo wp_upload_display( array(171, 128) );
-		if ( isset($attachment_data['width']) )
+		if ( isset($attachment_data['width']) && 'inline' != $style )
 			echo '</a>'; ?>
 	</div>
 <?php	endif; ?>
-		<table>
-<?php	if ( !$id ): ?>
+		<table><col /><col class="widefat" />
+<?php	if ( $id ): ?>
 			<tr>
-				<th scope="row"><label for="upload"><?php _e('File:'); ?></label></th>
+				<th scope="row"><label for="url"><?php _e('URL'); ?></label></th>
+				<td><input type="text" id="url" class="readonly" value="<?php the_guid(); ?>" readonly="readonly" /></td>
+			</tr>
+<?php	else : ?>
+			<tr>
+				<th scope="row"><label for="upload"><?php _e('File'); ?></label></th>
 				<td><input type="file" id="upload" name="image" /></td>
 			</tr>
 <?php	endif; ?>
 			<tr>
-				<th scope="row"><label for="post_title"><?php _e('Title:'); ?></label></th>
+				<th scope="row"><label for="post_title"><?php _e('Title'); ?></label></th>
 				<td><input type="text" id="post_title" name="post_title" value="<?php echo $attachment->post_title; ?>" /></td>
 			</tr>
 			<tr>
-				<th scope="row"><label for="post_content"><?php _e('Description:'); ?></label></th>
+				<th scope="row"><label for="post_content"><?php _e('Description'); ?></label></th>
 				<td><textarea name="post_content" id="post_content"><?php echo $attachment->post_content; ?></textarea></td>
 			</tr>
-			<tr id="buttons">
-				<th></th>
-				<td>
+			<tr id="buttons" class="submit">
+				<td colspan='2'>
+<?php	if ( $id ) : ?>
+					<input type="submit" name="delete" id="delete" class="delete alignleft" value="<?php _e('Delete File'); ?>" />
+<?php	endif; ?>
 					<input type="hidden" name="from_tab" value="<?php echo $tab; ?>" />
 					<input type="hidden" name="action" value="<?php echo $id ? 'save' : 'upload'; ?>" />
 <?php	if ( $post_id ) : ?>
@@ -146,9 +160,6 @@ function wp_upload_form() {
 					<?php wp_nonce_field( 'inlineuploading' ); ?>
 					<div class="submit">
 						<input type="submit" value="<?php $id ? _e('Save') : _e('Upload'); ?> &raquo;" />
-<?php	if ( $id ) : ?>
-						<input type="submit" name="delete" class="delete" value="<?php _e('Delete'); ?>" />
-<?php	endif; ?>
 					</div>
 				</td>
 			</tr>
@@ -352,7 +363,7 @@ function wp_upload_admin_head() {
 		echo "<link rel='stylesheet' href='" . get_option('siteurl') . '/wp-admin/upload-rtl.css?version=' . get_bloginfo('version') . "' type='text/css' />\n";
 	if ( 'inline' == @$_GET['style'] ) {
 		echo "<style type='text/css'>\n";
-		echo "\tbody { height: 14em; overflow: hidden; }\n";
+		echo "\tbody { height: 15em; overflow: hidden; }\n";
 		echo "\t#upload-content { overflow-y: auto; }\n";
 		echo "\t#upload-file { position: absolute; }\n";
 		echo "</style>";
diff --git a/wp-admin/upload-js.php b/wp-admin/upload-js.php
index 60d04cd23f..8b01361b3c 100644
--- a/wp-admin/upload-js.php
+++ b/wp-admin/upload-js.php
@@ -37,11 +37,18 @@ addLoadEvent( function() {
 			if ( id == this.currentImage.ID )
 				return;
 			var thumbEl = $('attachment-thumb-url-' + id);
-			if ( thumbEl )
+			this.currentImage.isImage = true;
+			if ( thumbEl ) {
 				this.currentImage.thumb = ( 0 == id ? '' : thumbEl.value );
-			else
+				this.currentImage.thumbBase = ( 0 == id ? '' : $('attachment-thumb-url-base-' + id).value );
+			} else {
 				this.currentImage.thumb = false;
+				var isImageEl = $('attachment-is-image-' + id);
+				if ( !isImageEl )
+					this.currentImage.isImage = false;
+			}
 			this.currentImage.src = ( 0 == id ? '' : $('attachment-url-' + id).value );
+			this.currentImage.srcBase = ( 0 == id ? '' : $('attachment-url-base-' + id).value );
 			this.currentImage.page = ( 0 == id ? '' : $('attachment-page-url-' + id).value );
 			this.currentImage.title = ( 0 == id ? '' : $('attachment-title-' + id).value );
 			this.currentImage.description = ( 0 == id ? '' : $('attachment-description-' + id).value );
@@ -65,13 +72,13 @@ addLoadEvent( function() {
 				var params = $H(this.params);
 				params.ID = '';
 				params.action = '';
-				h += "<a href='" + this.urlData[0] + '?' + params.toQueryString() + "'  title='Browse your files' class='back'>&laquo; Back</a>";
+				h += "<a href='" + this.urlData[0] + '?' + params.toQueryString() + "' title='Browse your files' class='back'>&laquo; Back</a>";
 			} else {
 				h += "<a href='#' onclick='theFileList.cancelView()'  title='Browse your files' class='back'>&laquo; Back</a>";
 			}
 			h += "<div id='file-title'>"
-			if ( !this.currentImage.thumb )
-				h += "<h2><a href='" + this.currentImage.src + "' title='Direct link to file'>" + this.currentImage.title + "</a></h2>";
+			if ( !this.currentImage.isImage )
+				h += "<h2><a href='" + this.currentImage.src + "' onclick='return false;' title='Direct link to file'>" + this.currentImage.title + "</a></h2>";
 			else
 				h += "<h2>" + this.currentImage.title + "</h2>";
 			h += " &#8212; <span>";
@@ -79,9 +86,11 @@ addLoadEvent( function() {
 			h += "</span>";
 			h += '</div>'
 			h += "<div id='upload-file-view' class='alignleft'>";
-			if ( this.currentImage.thumb )
-				h += "<a href='" + this.currentImage.src + "' title='Direct link to file'><img src='" + this.currentImage.thumb + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' /></a>";
-			else
+			if ( this.currentImage.isImage ) {
+				h += "<a href='" + this.currentImage.src + "' onclick='return false;' title='Direct link to file'>";
+				h += "<img src='" + ( this.currentImage.thumb ? this.currentImage.thumb : this.currentImage.src ) + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' />";
+				h += "</a>";
+			} else
 				h += '&nbsp;';
 			h += "</div>";
 
@@ -119,6 +128,7 @@ addLoadEvent( function() {
 			var action = 'upload.php?style=' + this.style + '&amp;tab=upload';
 			if ( this.postID )
 				action += '&amp;post_id=' + this.postID;
+
 			h += "<form id='upload-file' method='post' action='" + action + "'>";
 			if ( this.ID ) {
 				var params = $H(this.params);
@@ -129,8 +139,8 @@ addLoadEvent( function() {
 				h += "<a href='#' onclick='theFileList.cancelView()'  title='Browse your files' class='back'>&laquo; Back</a>";
 			}
 			h += "<div id='file-title'>"
-			if ( !this.currentImage.thumb )
-				h += "<h2><a href='" + this.currentImage.src + "' title='Direct link to file'>" + this.currentImage.title + "</a></h2>";
+			if ( !this.currentImage.isImage )
+				h += "<h2><a href='" + this.currentImage.src + "' onclick='return false;' title='Direct link to file'>" + this.currentImage.title + "</a></h2>";
 			else
 				h += "<h2>" + this.currentImage.title + "</h2>";
 			h += " &#8212; <span>";
@@ -138,26 +148,31 @@ addLoadEvent( function() {
 			h += "</span>";
 			h += '</div>'
 			h += "<div id='upload-file-view' class='alignleft'>";
-			if ( this.currentImage.thumb )
-				h += "<a href='" + this.currentImage.src + "' title='Direct link to file'><img src='" + this.currentImage.thumb + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' /></a>";
-			else
+			if ( this.currentImage.isImage ) {
+				h += "<a href='" + this.currentImage.src + "' onclick='return false;' title='Direct link to file'>";
+				h += "<img src='" + ( this.currentImage.thumb ? this.currentImage.thumb : this.currentImage.src ) + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' />";
+				h += "</a>";
+			} else
 				h += '&nbsp;';
 			h += "</div>";
 
 
-			h += "<table><tr>"
-			h += "<th scope='row'><label for='post_title'>Title:</label></th>";
+			h += "<table><col /><col class='widefat' /><tr>"
+			h += "<th scope='row'><label for='url'>URL</label></th>";
+			h += "<td><input type='text' id='url' class='readonly' value='" + this.currentImage.src + "' readonly='readonly' /></td>";
+			h += "</tr><tr>";
+			h += "<th scope='row'><label for='post_title'>Title</label></th>";
 			h += "<td><input type='text' id='post_title' name='post_title' value='" + this.currentImage.title + "' /></td>";
 			h += "</tr><tr>";
-			h += "<th scope='row'><label for='post_content'>Description:</label></th>";
+			h += "<th scope='row'><label for='post_content'>Description</label></th>";
 			h += "<td><textarea name='post_content' id='post_content'>" + this.currentImage.description + "</textarea></td>";
-			h += "</tr><tr id='buttons'><th><input type='button' name='delete' class='delete button' value='Delete' onclick='theFileList.deleteFile(" + id + ");' /></th><td>";
+			h += "</tr><tr id='buttons' class='submit'><td colspan='2'><input type='button' id='delete' name='delete' class='delete alignleft' value='Delete File' onclick='theFileList.deleteFile(" + id + ");' />";
 			h += "<input type='hidden' name='from_tab' value='" + this.tab + "' />";
 			h += "<input type='hidden' name='action' id='action-value' value='save' />";
 			h += "<input type='hidden' name='ID' value='" + id + "' />";
 			h += "<input type='hidden' name='_wpnonce' value='" + this.nonce + "' />";
-			h += "<div class='submit'><input type='submit' value='Save &raquo;' />";
-			h += "</div></td></tr></table></form>";
+			h += "<div class='submit'><input type='submit' value='Save &raquo;' /></div>";
+			h += "</td></tr></table></form>";
 
 			new Insertion.Top('upload-content', h);
 			if (e) Event.stop(e);
@@ -202,11 +217,13 @@ addLoadEvent( function() {
 			displayEl = $A(document.forms.uploadoptions.elements.display).detect( function(i) { return i.checked; } )
 			if ( displayEl )
 				display = displayEl.value;
+			else if ( this.currentImage.isImage )
+				display = 'full';
 
 			if ( 'none' != link )
-				h += "<a href='" + ( 'file' == link ? this.currentImage.src : this.currentImage.page ) + "' title='" + this.currentImage.title + "'>";
+				h += "<a href='" + ( 'file' == link ? ( this.currentImage.srcBase + this.currentImage.src ) : ( this.currentImage.page + "' rel='attachment" ) ) + "' title='" + this.currentImage.title + "'>";
 			if ( display )
-				h += "<img src='" + ( 'thumb' == display ? this.currentImage.thumb : this.currentImage.src ) + "' alt='" + this.currentImage.title + "' />";
+				h += "<img src='" + ( 'thumb' == display ? ( this.currentImage.thumbBase + this.currentImage.thumb ) : ( this.currentImage.srcBase + this.currentImage.src ) ) + "' alt='" + this.currentImage.title + "' />";
 			else
 				h += this.currentImage.title;
 			if ( 'none' != link )
@@ -220,7 +237,8 @@ addLoadEvent( function() {
 				win.tinyMCE.execCommand('mceInsertContent', false, h);
 			else
 				win.edInsertContent(win.edCanvas, h);
-			this.cancelView();
+			if ( !this.ID )
+				this.cancelView();
 			return false;
 		},
 
diff --git a/wp-admin/upload.css b/wp-admin/upload.css
index 25f1c089a2..3517cee05a 100644
--- a/wp-admin/upload.css
+++ b/wp-admin/upload.css
@@ -57,17 +57,18 @@ body { background: #f9fcfe; }
 	margin: 0 auto;
 	top: 0;
 	left: 0;
-	width: 45em;
+	width: 95%;
 	height: 100%;
 	background: #f9fcfe;
 }
-#upload-file th {
+
+#uupload-file th {
 	width: 8em;
 }
 
 form#upload-file input, form#upload-file textarea, div#upload-content.upload table { width: 100%; }
 
-form#upload-file div.submit input { width: auto; }
+form#upload-file .submit input { width: auto; }
 
 #upload-file-view { padding: 0 0 0 75px; }
 
@@ -134,8 +135,6 @@ h2 {
 
 #upload-files a.file-link img { vertical-align: middle; }
 
-#the-attachment-links { float: right; }
-
 #the-attachment-links textarea {
 	font-size: 10px;
 	overflow: hidden;
@@ -172,4 +171,6 @@ tr, td, th {
 
 #uploadoptions table {
 	width: 300px;
-}
\ No newline at end of file
+}
+
+input.readonly { background-color: #ddd; }
diff --git a/wp-admin/wp-admin.css b/wp-admin/wp-admin.css
index 4dfe69e75f..039fb6ff4d 100644
--- a/wp-admin/wp-admin.css
+++ b/wp-admin/wp-admin.css
@@ -206,7 +206,7 @@ textarea, input, select {
 	border-style: none;
 	padding: 0px;
 	margin-bottom: 16px;
-	height: 16em;
+	height: 17em;
 	width: 100%;
 /*	overflow-y: hidden;*/
 }
@@ -1318,4 +1318,4 @@ a.page-numbers:hover {
 .page-numbers.current {
 	border: 1px solid #999;
 	font-weight: bold;
-}
\ No newline at end of file
+}