Ticket #27423: 27423.11.patch

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

@@ -89 +89 @@
         display: none;
 }
 
+body.modal-open {
+        overflow: hidden;
+}
+
 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
 .ui-sortable,
 .ui-draggable {
@@ -145 +149 @@
         right: 10px;
         width: 30px;
         height: 30px;
-        z-index: 1000;
+        z-index: 200;
 }
 
 .media-modal-close span.media-modal-icon {
@@ -535 +539 @@
         left: 200px;
         right: 0;
         height: 56px;
-        z-index: 200;
+        z-index: 199;
 }
 
 .media-frame-router {
@@ -683 +687 @@
  */
 .attachments {
         margin: 0;
-        padding-right: 16px;
+        padding: 8px;
         -webkit-overflow-scrolling: touch;
 }
 
@@ -705 +709 @@
 }
 
 .attachment:focus {
+        outline: none;
+}
+
+.attachment:focus .thumbnail {
         -webkit-box-shadow:
                 0 0 0 1px #5b9dd9,
                 0 0 2px 2px #5b9dd9;
         box-shadow:
                 0 0 0 1px #5b9dd9,
                 0 0 2px 2px #5b9dd9;
-        outline: none;
 }
 
-.selected.attachment {
+.selected.attachment .thumbnail {
         -webkit-box-shadow:
                 0 0 0 1px #fff,
                 0 0 0 3px #ccc;
@@ -723 +730 @@
                 0 0 0 3px #ccc;
 }
 
-.attachment-preview {
+.thumbnail {
         position: relative;
-        width: 199px;
-        height: 199px;
         -webkit-box-shadow:
                 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
                 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
@@ -740 +745 @@
 .attachment .icon {
         margin: 0 auto;
         overflow: hidden;
-        padding-top: 20%;
 }
 
 .attachment .thumbnail {
@@ -762 +766 @@
         max-height: 98%;
 }
 
-.media-frame-content .attachment-preview.type-audio .icon,
-.media-frame-content .attachment-preview.type-video .icon {
-        z-index: 2;
-        background: #f1f1f1;
-        position: relative;
-        padding: 0;
-        top: 15%;
-        left: auto;
-        right: auto;
-}
-
 .attachment-preview.type-audio .filename,
 .attachment-preview.type-video .filename {
         z-index: 3;
@@ -835 +828 @@
         padding: 5px 10px;
 }
 
-.attachment-preview .thumbnail {
-        width: 199px;
-        height: 199px;
-}
-
 .attachment .thumbnail img {
         position: absolute;
 }
@@ -881 +869 @@
         width: 24px;
         position: absolute;
         z-index: 10;
-        top: -6px;
-        right: -6px;
+        top: 0;
+        right: 0;
         outline: none;
         background: #eee;
         -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
@@ -904 +892 @@
         display: block;
 }
 
-.attachment.details,
-.media-grid-view .selected.attachment {
+.attachment.details .thumbnail,
+.media-grid-view .selected .thumbnail {
         -webkit-box-shadow: 0 0 0 1px #fff,
                                 0 0 0 5px #1e8cbe;
         box-shadow: 0 0 0 1px #fff,
@@ -1464 +1452 @@
 .media-selection .attachments {
         display: inline-block;
         height: 48px;
-        margin-top: 5px;
         overflow: hidden;
         vertical-align: top;
 }
@@ -1473 +1460 @@
         width: 50%;
 }
 
+.wp-core-ui .show-image-details {
+        display: none;
+}
+
 .attachment.selection.selected {
         -webkit-box-shadow: none;
         box-shadow: none;
@@ -1533 +1524 @@
         margin-top: 14px;
 }
 
-/**
- * Attachment Details
- */
-.attachment-details {
-        position: relative;
-        overflow: auto;
-}
-
-.attachment-details .settings-save-status {
+.media-sidebar .settings-save-status {
+        background: #f5f5f5;
         float: right;
         text-transform: none;
         z-index: 10;
 }
 
-.attachment-details .settings-save-status .spinner {
+.media-sidebar .settings-save-status .spinner {
         margin: 0 5px 0;
 }
 
-.attachment-details .settings-save-status .saved {
+.media-sidebar .settings-save-status .saved {
         float: right;
         display: none;
 }
 
-.attachment-details.save-waiting .settings-save-status .spinner,
-.attachment-details.save-complete .settings-save-status .saved {
+.media-sidebar .save-waiting .settings-save-status .spinner,
+.media-sidebar .save-complete .settings-save-status .saved {
         display: block;
 }
 
+/**
+ * Attachment Details
+ */
+.attachment-details {
+        position: relative;
+        overflow: auto;
+}
+
 .attachment-info {
         overflow: hidden;
         min-height: 60px;
@@ -1652 +1644 @@
         display: block;
 }
 
-.media-modal .delete-attachment,
-.media-modal .trash-attachment {
+.attachment-info .delete-attachment,
+.attachment-info .trash-attachment {
         color: #bc0b0b;
 }
 
-.media-modal .delete-attachment:hover,
-.media-modal .trash-attachment:hover {
+.attachment-info .delete-attachment:hover,
+.attachment-info .trash-attachment:hover {
         color: red;
 }
 
@@ -2249 +2241 @@
                 padding: 3px 6px;
         }
 
-        .media-frame-content .attachment .icon {
-                top: 40%;
-        }
-
         .image-details .media-modal {
                 left: 30px;
                 right: 30px;
@@ -2284 +2272 @@
                 min-width: 120px;
         }
 
-        .media-selection:after {
-                background: none;
-        }
-
+        .media-selection:after,
         .media-selection .attachments {
                 display: none;
         }
@@ -2313 +2298 @@
         }
 }
 
+.switch-to-uploader,
+.wp-core-ui .back-to-library {
+        display: none;
+}
+
 /* Responsive on portrait and landscape */
 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
 
         /* Media tabs on the top */
-        .media-frame-content .media-toolbar .instructions {
+        .media-frame-content .media-toolbar .instructions,
+        .media-frame-router,
+        .media-selection .selection-info {
                 display: none;
         }
 
+        .wp-core-ui .show-image-details {
+                display: inline-block;
+                margin-top: 14px;
+        }
+
         .media-frame-menu {
-                width: auto;
-                bottom: auto;
-                right: 0;
-                height: 60px;
+                top: 30px;
+                left: 0;
+                z-index: inherit;
         }
 
         .media-menu {
-                border-right: none;
+                z-index: inherit;
+                width: 200px;
                 position: relative;
-                border-bottom: 1px solid #dddddd;
-                overflow: hidden;
                 padding: 10px 0 10px 10px;
+                display: none;
+                border: 1px solid #ccc;
         }
 
-        .media-menu a {
-                float: left;
-                width: 42%;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
+        .media-menu.visible {
+                z-index: 2000;
+                display: block;
+                position: fixed;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                width: auto;
+                border: none;
+                padding: 10px 0;
+                overflow: auto;
+        }
+
+        .media-menu > a {
+                padding: 20px;
+                width: auto !important;
+                text-align: center;
+                font-size: 20px;
         }
 
         .media-frame-title {
-                display: none;
+                left: 0;
+        }
+
+        .media-frame-title h1 {
+                display: inline-block;
+                cursor: pointer;
+        }
+
+        .media-frame-title h1:after {
+                display: inline-block;
+                width: 54px;
+                height: 54px;
+                font: normal 20px/54px dashicons;
+                content: '\f140';
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                vertical-align: bottom;
+                z-index: 100;
         }
 
         .image-details .media-frame-title {
@@ -2359 +2386 @@
                 bottom: 0px;
                 left: 0;
                 right: 0;
-                background: #FFF;
-                border-top: 1px solid #DEDEDE;
+                background: #fff;
         }
 
         .media-toolbar {
                 position: relative;
         }
 
+        .media-toolbar .spinner {
+                margin-right: 6px;
+        }
+
         .media-frame {
                 overflow: hidden;
         }
 
         .attachments-browser .attachments {
-                top: 42px;
-        }
-
-        .attachment-details h3 {
-                margin-top: 45px;
+                right: 0;
         }
 
         /* Shorten right-side links so they don't overlap the close button */
@@ -2389 +2415 @@
                 display: none;
         }
 
-        .media-frame-title {
+        .attachment-details {
+                padding: 0 20px;
+        }
+        
+        .attachment-display-settings {
+                padding: 0 20px 20px 20px;
+                width: -webkit-calc(100% - 40px);
+                width: calc(100% - 40px);
+        }
+
+        .attachment-info .thumbnail img {
+                max-width: 100%; /* Display the image bigger, since the screen's smaller. */
+                max-height: 50%;
+        }
+
+        .image-details .media-frame-title {
                 top: 72px;
-                left: auto;
-                height: auto;
         }
 
         .media-frame-title h1 {
@@ -2400 +2439 @@
                 font-size: 18px;
         }
 
-        .media-frame-router {
-                top: 84px;
-                left: 0;
-        }
-
         .media-frame-content {
                 left: 0;
-                top: 118px;
+                top: 54px;
         }
 
         .image-details .media-frame.hide-router .media-frame-content {
                 top: 40px;
         }
 
-        .media-frame .attachments-browser {
-                padding-bottom: 300px;
+        .media-sidebar {
+                position: fixed;
+                top: 0;
+                right: -100%;
+                width: 100%;
+                padding: 0;
+                margin: 0 0 62px 0;
+                z-index: 201;
         }
 
-        .media-sidebar {
-                border-bottom: 1px solid #dddddd;
+        .media-sidebar.active {
+                right: 0;
         }
 
         .media-modal {
                 width: auto;
         }
 
-        .media-toolbar-primary, .media-toolbar-secondary {
+        .media-toolbar-primary,
+        .media-toolbar-secondary {
                 height: auto;
         }
 
+        .attachments-browser .media-toolbar-primary,
+        .attachments-browser .media-toolbar-secondary {
+                width: 50%;
+        }
+
+        .media-frame .media-frame-content .media-toolbar .search,
+        .media-frame .media-frame-content .media-toolbar .attachment-filters {
+                max-width: 200px;
+                width: -webkit-calc(100% - 16px);
+                width: calc(100% - 16px);
+                margin: 11px 0 0 0;
+                height: 28px;
+        }
+
+        .media-frame .media-frame-content .media-toolbar .search {
+                float: right;
+        }
+
         .uploader-inline h3 {
                 margin: 0 0 .8em 0;
         }
@@ -2442 +2501 @@
                 margin: 0;
         }
 
-        .attachments-browser .attachments, .attachments-browser .uploader-inline {
-                position: relative;
-                margin-right: 180px;
-        }
-
         /* Full-bleed modal */
         .media-modal,
         .image-details .media-modal {
@@ -2466 +2520 @@
                 max-width: 100%;
         }
 
-        .attachments-browser .media-toolbar-primary input.search {
-                max-width: 150px;
-        }
-
         .uploader-inline-content {
                 position: relative;
         }
@@ -2505 +2555 @@
                 margin-top: 45px;
         }
 
-}
+        /* Edit-selection mode */
+        .close.media-modal-icon {
+                display: block;
+                height: 100%;
+                width: 100%;
+                margin: 0;
+                padding: 0;
+                position: absolute;
+                top: 0;
+                right: 0;
+                border: none;
+                -webkit-box-shadow: none;
+                box-shadow: none;
+                background: transparent;
+        }
 
-/* Landscape specific header override */
-@media screen and (max-height: 400px) {
-        .media-menu {
-                padding: 0 0 0 10px;
+        .close.media-modal-icon:before {
+                font: normal 60px/1 dashicons;
+                content: "\f335";
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                margin: -30px;
+                color: #000;
+                text-shadow: 0px 0px 5px #fff;
         }
 
-        .media-menu a {
-                float: left;
-                width: 21%;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                padding: 10px inherit;
+        .close.media-modal-icon:hover:before {
+                color: #1e8cbe;
+                text-shadow: 0px 0px 5px #000;
         }
 
-        .media-menu a:nth-child(2),
-        .media-menu a:last-child {
-                width: 21%;
+        .switch-to-uploader {
+                display: list-item;
+                float: none;
+                top: 0;
+        }
+
+        .switch-to-uploader .thumbnail {
+                border: 5px dashed #ddd;
+                -webkit-box-shadow: none;
+                box-shadow: none;
+                background: none;
         }
 
+        .switch-to-uploader .thumbnail:after {
+                -webkit-box-shadow: none;
+                box-shadow: none;
+        }
+
+        .switch-to-uploader .thumbnail:before {
+                display: block;
+                height: 40px;
+                color: #ccc;
+                font: normal 40px/1 dashicons;
+                content: '\f132';
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                position: absolute;
+                padding-top: 50%;
+                top: -20px;
+                right: 0;
+                left: 0;
+        }
+
+        .wp-core-ui .back-to-library {
+                display: inline-block;
+        }
+}
+
+/* Landscape specific header override */
+@media screen and (max-height: 400px) {
         .media-modal-close {
                 top: 2px;
         }
@@ -2536 +2636 @@
         }
 
         .media-frame-content {
-                top: 78px;
-        }
-
-        .attachments-browser .attachments {
-                top: 2px;
+                top: 54px;
         }
 
         /* Prevent unnecessary scrolling on title input */
@@ -2572 +2668 @@
 
         .media-frame .spinner {
                 background-image: url(../images/spinner-2x.gif);
-        }
+        }
 }
 
+.attachments-browser .attachment {
+        position: relative;
+        width: 33.3%;
+        margin: 0;
+}
+
+.attachments-browser .attachment .attachment-preview {
+        position: relative;
+}
+
+.attachments-browser .attachment .attachment-preview:before {
+        content: '';
+        display: block;
+        padding-top: 100%;
+}
+
+.attachments-browser .attachment .attachment-preview .thumbnail {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        bottom: 8px;
+        left: 8px;
+}
+
+.attachments-browser .portrait img {
+        max-width: 100%;
+}
+
+.attachments-browser .landscape img {
+        max-height: 100%;
+}
+
+.media-selection .attachments {
+        padding: 5px;
+}
+
+.media-selection .attachment {
+        margin: 5px;
+        width: 40px;
+}
+
+.media-selection .attachment-preview,
+.media-selection .attachment-preview .thumbnail {
+        width: 40px;
+        height: 40px;
+}
+
+.media-selection .portrait .thumbnail img {
+        max-width: 40px;
+        height: auto;
+}
+
+.media-selection .landscape .thumbnail img {
+        width: auto;
+        max-height: 40px;
+}
+
+@media only screen and ( max-width: 520px ) {
+        .attachments-browser .attachment:first-of-type {
+                margin-left: 33.3%;
+        }
+}
+
+@media only screen and ( min-width: 520px ) and ( max-width: 640px ) {
+        .attachments-browser .attachment {
+                width: 25%;
+        }
+        
+        .attachments-browser .attachment:first-of-type {
+                margin-left: 25%;
+        }
+}
+
+.media-grid-view .attachments-browser .attachment:first-of-type {
+        margin-left: 0;
+}
+
+@media only screen and ( min-width: 640px ) {
+        .attachments-browser .attachment {
+                width: 33.3%;
+        }
+}
+
+@media only screen and ( min-width: 960px ) {
+        .attachments-browser .attachment {
+                width: 25%;
+        }
+}
+
+@media only screen and ( min-width: 1200px ) {
+        .attachments-browser .attachment {
+                width: 20%;
+        }
+}
 
 /**
  * Media Grid
@@ -2587 +2777 @@
 }
 
 /* Regions we don't use at all */
+.media-grid-view .switch-to-uploader,
 .media-grid-view .media-frame-title,
 .media-grid-view .media-frame-toolbar,
 .media-grid-view .media-frame-menu {

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

@@ -1747 +1747 @@
                 template:  media.template('media-frame'),
                 regions:   ['menu','title','content','toolbar','router'],
 
+                events: {
+                        'click h1': 'toggleMenu'
+                },
+
                 /**
                  * @global wp.Uploader
                  */
@@ -1840 +1844 @@
                                 controller: this
                         });
                 },
+
+                toggleMenu: function( event ) {
+                        event.preventDefault();
+                        this.$el.find( '.media-menu' ).toggleClass( 'visible' );
+
+                },
                 /**
                  * @param {Object} toolbar
                  * @this wp.media.controller.Region
@@ -3221 +3231 @@
                                 };
                         }
 
+                        $( 'body' ).addClass( 'modal-open' );
+
                         $el.show().focus();
                         return this.propagate('open');
                 },
@@ -3236 +3248 @@
                                 return this;
                         }
 
+                        $( 'body' ).removeClass( 'modal-open' );
+
                         // Hide modal and remove restricted media modal tab focus once it's closed
                         this.$el.hide().undelegate( 'keydown' );
 
@@ -3655 +3669 @@
                 template:  media.template('uploader-inline'),
 
                 events: {
-                        'click .close': 'hide'
+                        'click .close': 'hide',
+                        'click .back-to-library': 'back'
                 },
 
                 initialize: function() {
@@ -3758 +3773 @@
                 },
                 hide: function() {
                         this.$el.addClass( 'hidden' );
+                },
+                back: function( event ) {
+                        event.preventDefault();
+                        this.controller.content.mode( 'browse' );
                 }
-
         });
 
         /**
@@ -4408 +4426 @@
 
                 click: function() {
                         var state = this.options.state;
+
                         if ( state ) {
                                 this.controller.setState( state );
                         }
@@ -4443 +4462 @@
                 property:  'state',
                 ItemView:  media.view.MenuItem,
                 region:    'menu',
+
+                events: {
+                        'click': '_hide'
+                },
+
+                initialize: function( options ) {
+                        media.view.PriorityList.prototype.initialize.apply( this, arguments );
+                        this.controller = options.controller;
+                        this.listenTo( this.controller, 'deactivate', function() {
+                                this.$el.removeClass( 'visible' );
+                        } );
+                },
+
                 /**
                  * @param {Object} options
                  * @param {string} id
@@ -4524 +4556 @@
                         }
 
                         view.$el.removeClass('hidden');
+                },
+
+                _hide: function() {
+                        this.$el.removeClass( 'visible' );
                 }
         });
 
@@ -4606 +4642 @@
                 tagName:   'li',
                 className: 'attachment',
                 template:  media.template('attachment'),
+                isTouch: false,
 
                 attributes: {
                         tabIndex: 0,
@@ -4614 +4651 @@
 
                 events: {
                         'click .js--select-attachment':   'toggleSelectionHandler',
+                        'touchend .attachment-preview':   'setTouch',
                         'change [data-setting]':          'updateSetting',
                         'change [data-setting] input':    'updateSetting',
                         'change [data-setting] select':   'updateSetting',
@@ -4730 +4768 @@
                                 this.$bar.width( this.model.get('percent') + '%' );
                         }
                 },
+
+                setTouch: function() {
+                        this.isTouch = true;
+                },
+
                 /**
                  * @param {Object} event
                  */
@@ -4752 +4795 @@
                                 method = 'toggle';
                         }
 
+                        if ( this.isTouch ) {
+                                this.isTouch = false;
+                                method = 'add';
+                        }
+
                         this.toggleSelection({
                                 method: method
                         });
@@ -4800 +4848 @@
                                 selection[ this.selected() ? 'remove' : 'add' ]( model );
                                 selection.single( model );
                                 return;
+                        } else if ( 'add' === method ) {
+                                selection.add( model );
+                                selection.single( model );
+                                return;
+
                         }
 
                         // Fixes bug that loses focus when selecting a featured image
@@ -5110 +5163 @@
                         tabIndex: -1
                 },
 
-                cssTemplate: media.template('attachments-css'),
-
                 events: {
-                        'scroll': 'scroll'
+                        'scroll': 'scroll',
+                        'click .switch-to-uploader': 'upload'
                 },
 
                 initialize: function() {
@@ -5123 +5175 @@
                                 refreshSensitivity: 200,
                                 refreshThreshold:   3,
                                 AttachmentView:     media.view.Attachment,
-                                sortable:           false,
-                                resize:             true
+                                sortable:           false
                         });
 
                         this._viewsByCid = {};
@@ -5150 +5201 @@
                         this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
 
                         this.initSortable();
-
-                        _.bindAll( this, 'css' );
-                        this.model.on( 'change:edge change:gutter', this.css, this );
-                        this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
-                        if ( this.options.resize ) {
-                                $(window).on( 'resize.attachments', this._resizeCss );
-                        }
-
-                        // Call this.css() after this view has been rendered in the DOM so
-                        // attachments get proper width applied.
-                        _.defer( this.css, this );
                 },
 
                 dispose: function() {
                         this.collection.props.off( null, null, this );
-                        $(window).off( 'resize.attachments', this._resizeCss );
+
                         /**
                          * call 'dispose' directly on the parent class
                          */
                         media.View.prototype.dispose.apply( this, arguments );
                 },
 
-                css: function() {
-                        var $css = $( '#' + this.el.id + '-css' );
-
-                        if ( $css.length ) {
-                                $css.remove();
-                        }
-
-                        media.view.Attachments.$head().append( this.cssTemplate({
-                                id:     this.el.id,
-                                edge:   this.edge(),
-                                gutter: this.model.get('gutter')
-                        }) );
-                },
-                /**
-                 * @returns {Number}
-                 */
-                edge: function() {
-                        var edge = this.model.get('edge'),
-                                gutter, width, columns;
-
-                        if ( ! this.$el.is(':visible') ) {
-                                return edge;
-                        }
-
-                        gutter  = this.model.get('gutter') * 2;
-                        width   = this.$el.width() - gutter;
-                        columns = Math.ceil( width / ( edge + gutter ) );
-                        edge = Math.floor( ( width - ( columns * gutter ) ) / columns );
-                        return edge;
-                },
-
                 initSortable: function() {
                         var collection = this.collection;
 
@@ -5313 +5322 @@
                         // Trigger the scroll event to check if we're within the
                         // threshold to query for additional attachments.
                         this.scroll();
+
+                        if ( ! this.$( '.switch-to-uploader' ).length ) {
+                                this.$el.append( '<li tabindex="0" role="checkbox" class="attachment save-ready switch-to-uploader"><div class="attachment-preview"><div class="thumbnail"></div></div></li>' );
+                        }
                 },
 
                 scroll: function() {
@@ -5336 +5349 @@
                                         toolbar.get('spinner').hide();
                                 });
                         }
+                },
+
+                upload: function( event ) {
+                        event.preventDefault();
+                        this.controller.content.mode( 'upload' );
                 }
-        }, {
-                $head: (function() {
-                        var $head;
-                        return function() {
-                                return $head = $head || $('head');
-                        };
-                }())
         });
 
         /**
@@ -5775 +5786 @@
                         this.attachmentsNoResults.$el.html( l10n.noMedia );
 
                         this.views.add( this.attachmentsNoResults );
-
-
                 },
 
                 createSidebar: function() {
@@ -5853 +5862 @@
 
                 events: {
                         'click .edit-selection':  'edit',
-                        'click .clear-selection': 'clear'
+                        'click .clear-selection': 'clear',
+                        'click .show-image-details': 'show'
                 },
 
                 initialize: function() {
@@ -5917 +5927 @@
                         new media.view.FocusManager({
                                 el: this.el
                         }).focus();
+                },
+
+                show: function( event ) {
+                        event.preventDefault();
+                        this.$el.parents( '.media-frame' ).find( '.media-sidebar' ).add( $( event.target ) ).toggleClass( 'active' );
                 }
         });
 

src/wp-includes/media-template.php

@@ -219 +219 @@
                                 /** This action is documented in wp-admin/includes/media.php */
                                 do_action( 'post-upload-ui' ); ?>
                         </div>
+                        <a href="#" class="button back-to-library"><?php _e( 'Back' ); ?></a>
                 <?php endif; ?>
                 </div>
         </script>
@@ -398 +399 @@
 
         <script type="text/html" id="tmpl-attachment">
                 <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
-                        <# if ( data.uploading ) { #>
-                                <div class="media-progress-bar"><div></div></div>
-                        <# } else if ( 'image' === data.type ) { #>
-                                <div class="thumbnail">
+                        <div class="thumbnail">
+                                <# if ( data.uploading ) { #>
+                                        <div class="media-progress-bar"><div>
+                                <# } else if ( 'image' === data.type ) { #>
                                         <div class="centered">
                                                 <img src="{{ data.size.url }}" draggable="false" alt="" />
                                         </div>
-                                </div>
-                        <# } else {
-                                if ( data.thumb && data.thumb.src && data.thumb.src !== data.icon ) {
-                                #><img src="{{ data.thumb.src }}" class="thumbnail" draggable="false" /><#
-                                } else {
-                                #><img src="{{ data.icon }}" class="icon" draggable="false" /><#
-                                } #>
-                                <div class="filename">
-                                        <div>{{ data.filename }}</div>
-                                </div>
-                        <# } #>
+                                <# } else { #>
+                                        <div class="centered">
+                                                <# if ( data.thumb && data.thumb.src && data.thumb.src !== data.icon ) { #>
+                                                        <img src="{{ data.thumb.src }}" class="thumbnail" draggable="false" />
+                                                <# } else { #>
+                                                        <img src="{{ data.icon }}" class="icon" draggable="false" />
+                                                <# } #>
+                                        </div>
+                                        <div class="filename">
+                                                <div>{{ data.filename }}</div>
+                                        </div>
+-                               <# } #>
+                        </div>
                         <# if ( data.buttons.close ) { #>
                                 <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
                         <# } #>
@@ -589 +592 @@
                         <# } #>
                 </div>
                 <div class="selection-view"></div>
+                <a href="#" class="button show-image-details">Edit</a>
         </script>
 
         <script type="text/html" id="tmpl-attachment-display-settings">
@@ -837 +841 @@
                 </div>
         </script>
 
-        <script type="text/html" id="tmpl-attachments-css">
-                <style type="text/css" id="{{ data.id }}-css">
-                        #{{ data.id }} {
-                                padding: 0 {{ data.gutter }}px;
-                        }
-
-                        #{{ data.id }} .attachment {
-                                margin: {{ data.gutter }}px;
-                                width: {{ data.edge }}px;
-                        }
-
-                        #{{ data.id }} .attachment-preview,
-                        #{{ data.id }} .attachment-preview .thumbnail {
-                                width: {{ data.edge }}px;
-                                height: {{ data.edge }}px;
-                        }
-
-                        #{{ data.id }} .portrait .thumbnail img {
-                                max-width: {{ data.edge }}px;
-                                height: auto;
-                        }
-
-                        #{{ data.id }} .landscape .thumbnail img {
-                                width: auto;
-                                max-height: {{ data.edge }}px;
-                        }
-                </style>
-        </script>
-
         <script type="text/html" id="tmpl-image-details">
                 <div class="media-embed">
                         <div class="embed-media-settings">