Ticket #24716: 24716.7.diff

src/wp-includes/css/media-views.css

@@ -924 +924 @@
         height: 50px;
 }
 
+.attachments-browser.hide-sidebar .media-toolbar {
+        right: 0;
+}
+
 .attachments-browser .media-toolbar-primary > .media-button,
 .attachments-browser .media-toolbar-primary > .media-button-group,
 .attachments-browser .media-toolbar-secondary > .media-button,
@@ -942 +946 @@
         outline: none;
 }
 
+.attachment .edit-media {
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+        opacity: 0;
+        position: absolute;
+        top: 35%;
+        right: 25%;
+        left: 25%;
+        background: #222;
+        background: rgba(0,0,0,0.7);
+        color: #fff;
+        font-size: 15px;
+        text-shadow: 0 1px 0 rgba(0,0,0,0.6);
+        -webkit-font-smoothing: antialiased;
+        font-weight: 600;
+        padding: 15px 12px;
+        text-align: center;
+        -webkit-border-radius: 3px;
+        border-radius: 3px;
+        -webkit-transition: opacity 0.1s ease-in-out;
+        transition: opacity 0.1s ease-in-out;
+}
+
+.attachment:hover .edit-media {
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+        opacity: 1;
+}
+
+.attachments-browser.hide-sidebar .attachments {
+        right: 0;
+}
+
 .attachments-browser .instructions {
         display: inline-block;
         margin-top: 16px;

src/wp-includes/js/media-views.js

@@ -1758 +1758 @@
                         _.defaults( this.options, {
                                 title:    '',
                                 modal:    true,
-                                uploader: true
+                                uploader: true,
+                                mode:     ['select']
                         });
 
                         // Ensure core UI is enabled.
@@ -1981 +1982 @@
                                 library:   {},
                                 multiple:  false,
                                 state:     'library',
-                                uploader:  true
+                                uploader:  true,
+                                mode:      [ 'grid', 'edit' ]
                         });
 
                         // Ensure core and media grid view UI is enabled.
@@ -2088 +2090 @@
                                 display:    state.get('displaySettings'),
                                 dragInfo:   state.get('dragInfo'),
                                 bulkEdit:   true,
+                                sidebar:    false,
 
                                 suggestedWidth:  state.get('suggestedWidth'),
                                 suggestedHeight: state.get('suggestedHeight'),
@@ -4711 +4714 @@
                                         compat:        false,
                                         alt:           '',
                                         description:   ''
-                                });
+                                }, this.options );
 
                         options.buttons  = this.buttons;
                         options.describe = this.controller.state().get('describe');
@@ -4772 +4775 @@
                                 method = 'toggle';
                         }
 
+                        if ( this.controller )
                         this.toggleSelection({
                                 method: method
                         });
@@ -5296 +5300 @@
                  */
                 createAttachmentView: function( attachment ) {
                         var view = new this.options.AttachmentView({
-                                controller: this.controller,
-                                model:      attachment,
-                                collection: this.collection,
-                                selection:  this.options.selection
+                                controller:           this.controller,
+                                model:                attachment,
+                                collection:           this.collection,
+                                selection:            this.options.selection,
+                                showAttachmentFields: this.options.showAttachmentFields
                         });
 
                         return this._viewsByCid[ attachment.cid ] = view;
@@ -5612 +5617 @@
                                 filters: false,
                                 search:  true,
                                 display: false,
-
+                                sidebar: true,
+                                showAttachmentFields: getUserSetting( 'showAttachmentFields', [ 'title', 'uploadedTo', 'dateFormatted', 'filetype' ] ),
                                 AttachmentView: media.view.Attachment.Library
                         });
 
                         this.createToolbar();
                         this.updateContent();
-                        this.createSidebar();
+                        if ( this.options.sidebar ) {
+                                this.createSidebar();
+                        } else {
+                                this.$el.addClass( 'hide-sidebar' );
+                        }
+
 
                         this.collection.on( 'add remove reset', this.updateContent, this );
                 },
@@ -5732 +5743 @@
                         this.removeContent();
 
                         this.attachments = new media.view.Attachments({
-                                controller: this.controller,
-                                collection: this.collection,
-                                selection:  this.options.selection,
-                                model:      this.model,
-                                sortable:   this.options.sortable,
+                                controller:           this.controller,
+                                collection:           this.collection,
+                                selection:            this.options.selection,
+                                model:                this.model,
+                                sortable:             this.options.sortable,
+                                showAttachmentFields: this.options.showAttachmentFields,
 
                                 // The single `Attachment` view to be used in the `Attachments` view.
                                 AttachmentView: this.options.AttachmentView

src/wp-includes/media-template.php

@@ -257 +257 @@
                                         <div>{{ data.filename }}</div>
                                 </div>
                         <# } #>
-
+                        <span class="edit-media">Edit Media</span>
                         <# if ( data.buttons.close ) { #>
                                 <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
                         <# } #>
@@ -283 +283 @@
                                         <# } #> {{ maybeReadOnly }} />
                         <# } #>
                 <# } #>
+                <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
+                        <# _.each( data.showAttachmentFields, function( field ) { #>
+                                <div>{{ data[field] }}</div>
+                        <# }); #>
+                <# } #>
+
         </script>
 
         <script type="text/html" id="tmpl-attachment-details">