From 3ad110f07877aab46262ca87b786d4e61674af69 Mon Sep 17 00:00:00 2001 From: Ryan Boren Date: Thu, 29 Nov 2012 13:33:57 +0000 Subject: [PATCH] Icons for select, deselect, and window close in the media modal. Props JerrySarcastic, helenyhou, ocean90, lessbloat fixes #22610 git-svn-id: https://develop.svn.wordpress.org/trunk@22919 602fd350-edb4-49c9-b593-d223f7449a82 --- wp-includes/css/media-views.css | 6 +- wp-includes/images/uploader-icons-2x.png | Bin 0 -> 3550 bytes wp-includes/images/uploader-icons.png | Bin 0 -> 1506 bytes wp-includes/js/media-views.js | 74 ++++++++++++----------- 4 files changed, 42 insertions(+), 38 deletions(-) create mode 100644 wp-includes/images/uploader-icons-2x.png create mode 100644 wp-includes/images/uploader-icons.png diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css index a5464b3992..d71e9b9104 100644 --- a/wp-includes/css/media-views.css +++ b/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; } diff --git a/wp-includes/images/uploader-icons-2x.png b/wp-includes/images/uploader-icons-2x.png new file mode 100644 index 0000000000000000000000000000000000000000..69345ae18913d8b5152be7264edbc5a6dcff2afc GIT binary patch literal 3550 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 IM6N<$f?Y1ui2wiq literal 0 HcmV?d00001 diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index e694c476c7..99607cc2cf 100644 --- a/wp-includes/js/media-views.js +++ b/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,