Icons for select, deselect, and window close in the media modal.

Props JerrySarcastic, helenyhou, ocean90, lessbloat
fixes #22610


git-svn-id: http://core.svn.wordpress.org/trunk@22919 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views.css

@@ -721,7 +721,8 @@ a.media-modal-close {
 	margin-top: 10px;
 }
 
-.attachments-browser .attachments {
+.attachments-browser .attachments,
+.attachments-browser .uploader-inline {
 	position: absolute;
 	top: 50px;
 	left: 0;
@@ -926,7 +927,7 @@ a.media-modal-close {
 	display: block;
 }
 
-.region-content.uploader-inline {
+.media-frame .uploader-inline {
 	margin: 20px;
 	padding: 20px;
 	text-align: center;
@@ -1368,6 +1369,7 @@ a.media-modal-close {
 	}
 
 	.attachments-browser .attachments,
+	.attachments-browser .uploader-inline,
 	.attachments-browser .media-toolbar {
 		right: 180px;
 	}

wp-includes/js/media-views.js

@@ -262,6 +262,7 @@
 			describe:   false,
 			toolbar:    'main-attachments',
 			sidebar:    'settings',
+			content:    'browse',
 			searchable: true,
 			filterable: false,
 			uploads:    true
@@ -304,19 +305,11 @@
 
 			selection.on( 'add remove reset', this.refreshSelection, this );
 
-			this._updateEmpty();
-			library.on( 'add remove reset', this._updateEmpty, this );
-			this.on( 'change:empty', this.refresh, this );
 			this.refresh();
-
-
 			this.on( 'insert', this._insertDisplaySettings, this );
 		},
 
 		deactivate: function() {
-			this.off( 'change:empty', this.refresh, this );
-			this.get('library').off( 'add remove reset', this._updateEmpty, this );
-
 			// Unbind all event handlers that use this state as the context
 			// from the selection.
 			this.get('selection').off( null, null, this );
@@ -334,23 +327,7 @@
 			this.resetDisplays();
 		},
 
-		content: function() {
-			var frame = this.frame;
-
-			if ( this.get('empty') ) {
-				// Attempt to fetch any Attachments we don't already have.
-				this.get('library').more();
-
-				// In the meantime, render an inline uploader.
-				frame.content.mode('upload');
-			} else {
-				// Browse our library of attachments.
-				frame.content.mode('browse');
-			}
-		},
-
 		refresh: function() {
-			this.frame.$el.toggleClass( 'hide-toolbar', this.get('empty') );
 			this.content();
 			this.refreshSelection();
 		},
@@ -389,17 +366,6 @@
 			setUserSetting( 'urlbutton', display.link );
 		},
 
-		_updateEmpty: function() {
-			var library = this.get('library'),
-				props = library.props;
-
-			// If we're filtering the library, bail.
-			if ( this.get('filterable') && ( props.get('type') || props.get('parent') ) )
-				return;
-
-			this.set( 'empty', ! library.length && ! library.props.get('search') );
-		},
-
 		refreshSelection: function() {
 			var selection = this.get('selection'),
 				mode = this.frame.content.mode();
@@ -1302,6 +1268,8 @@
 		browseContent: function() {
 			var state = this.state();
 
+			this.$el.removeClass('hide-toolbar');
+
 			// Browse our library of attachments.
 			this.content.view( new media.view.AttachmentsBrowser({
 				controller: this,
@@ -3010,8 +2978,10 @@
 			});
 
 			this.createToolbar();
-			this.createAttachments();
+			this.updateContent();
 			this.createSidebar();
+
+			this.collection.on( 'add remove reset', this.updateContent, this );
 		},
 
 		dispose: function() {
@@ -3059,7 +3029,39 @@
 			}
 		},
 
+		updateContent: function() {
+			var view = this;
+
+			if( ! this.attachments )
+				this.createAttachments();
+
+			if ( ! this.collection.length ) {
+				this.collection.more().done( function() {
+					if ( ! view.collection.length )
+						view.createUploader();
+				});
+			}
+		},
+
+		createUploader: function() {
+			if ( this.attachments ) {
+				this.attachments.remove();
+				delete this.attachments;
+			}
+
+			this.uploader = new media.view.UploaderInline({
+				controller: this.controller
+			});
+
+			this.views.add( this.uploader );
+		},
+
 		createAttachments: function() {
+			if ( this.uploader ) {
+				this.uploader.remove();
+				delete this.uploader;
+			}
+
 			this.attachments = new media.view.Attachments({
 				controller: this.controller,
 				collection: this.collection,