Ticket #28844: 28844.3.diff
File 28844.3.diff, 13.9 KB (added by , 10 years ago) |
---|
-
src/wp-includes/css/media-views.css
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 0f57613..6096990 100644
a b video#inline-media-node { 1525 1525 margin-top: 14px; 1526 1526 } 1527 1527 1528 .media-sidebar .settings-save-status { 1529 background: #f5f5f5; 1528 /** 1529 * Attachment Details 1530 */ 1531 .attachment-details { 1532 position: relative; 1533 overflow: auto; 1534 } 1535 1536 .attachment-details .settings-save-status { 1530 1537 float: right; 1531 1538 text-transform: none; 1532 1539 z-index: 10; 1533 1540 } 1534 1541 1535 . media-sidebar.settings-save-status .spinner {1542 .attachment-details .settings-save-status .spinner { 1536 1543 margin: 0 5px 0; 1537 1544 } 1538 1545 1539 . media-sidebar.settings-save-status .saved {1546 .attachment-details .settings-save-status .saved { 1540 1547 float: right; 1541 1548 display: none; 1542 1549 } 1543 1550 1544 . media-sidebar.save-waiting .settings-save-status .spinner,1545 . media-sidebar.save-complete .settings-save-status .saved {1551 .attachment-details.save-waiting .settings-save-status .spinner, 1552 .attachment-details.save-complete .settings-save-status .saved { 1546 1553 display: block; 1547 1554 } 1548 1555 1549 /**1550 * Attachment Details1551 */1552 .attachment-details {1553 position: relative;1554 overflow: auto;1555 }1556 1557 1556 .attachment-info { 1558 1557 overflow: hidden; 1559 1558 min-height: 60px; … … video#inline-media-node { 2677 2676 background-color: transparent; 2678 2677 height: 48px; 2679 2678 width: 54px; 2680 float: left;2679 position: absolute; 2681 2680 text-align: center; 2682 2681 border: 0; 2682 border-bottom: 1px solid #ddd; 2683 2683 border-right: 1px solid #ddd; 2684 2684 } 2685 2685 2686 .edit-attachment-frame .edit-media-header .left { 2687 right: 107px; 2688 } 2689 2690 .edit-attachment-frame .edit-media-header .right { 2691 right: 40px; 2692 } 2693 2694 .edit-attachment-frame .media-frame-title { 2695 left: 0; 2696 } 2697 2686 2698 .edit-attachment-frame .edit-media-header .right:before, 2687 2699 .edit-attachment-frame .edit-media-header .left:before { 2688 2700 font: normal 20px/50px 'dashicons' !important; … … video#inline-media-node { 2729 2741 .edit-attachment-frame .media-frame-content { 2730 2742 border-bottom: none; 2731 2743 bottom: 0; 2744 top: 56px; 2732 2745 } 2733 2746 2734 2747 /* Hiding this for the moment instead of removing it from the template. */ … … video#inline-media-node { 2744 2757 right: 0; 2745 2758 left: 0; 2746 2759 } 2747 2748 .edit-attachment-frame .attachment-info { 2749 border-bottom: 0; 2750 border-right: 1px solid #ddd; 2751 bottom: 0; 2760 .edit-attachment-frame .attachment-media-view { 2752 2761 position: absolute; 2753 2762 top: 0; 2763 bottom: 0; 2754 2764 left: 0; 2755 right: 50%; 2756 margin-bottom: 0; 2757 padding: 2% 4% 0; 2758 height: 98%; /* 100% - padding percentage above */ 2765 right: 35%; 2759 2766 } 2760 2767 2761 2768 .edit-attachment-frame .attachment-info .thumbnail { … … video#inline-media-node { 2774 2781 box-shadow: none; 2775 2782 } 2776 2783 2784 .edit-attachment-frame .attachment-media-view .thumbnail { 2785 text-align: center; 2786 } 2787 2788 .edit-attachment-frame .attachment-media-view img { 2789 max-width: 100%; 2790 } 2791 2777 2792 .edit-attachment-frame .attachment-info .thumbnail img { 2778 2793 max-width: 100%; 2779 2794 max-height: 100%; … … video#inline-media-node { 2787 2802 margin-bottom: 12px; 2788 2803 } 2789 2804 2790 .edit-attachment-frame .attachment- fields{2791 bo ttom: 0;2792 padding: 2% 4%;2805 .edit-attachment-frame .attachment-info { 2806 border-bottom: 0; 2807 border-left: 1px solid #ddd; 2793 2808 position: absolute; 2809 margin-bottom: 0; 2810 height: 98%; /* 100% - padding percentage above */ 2811 padding: 2% 4% 0; 2794 2812 top: 0; 2795 left: 50%; 2813 bottom: 0; 2814 left: 65%; 2796 2815 right: 0; 2797 2816 } 2798 2817 2799 .edit-attachment-frame .attachment- fields.setting {2818 .edit-attachment-frame .attachment-info .setting { 2800 2819 display: block; 2801 2820 float: left; 2802 2821 width: 100%; 2803 2822 margin: 1px 0; 2804 2823 } 2805 2824 2806 .edit-attachment-frame .attachment- fields.setting label {2825 .edit-attachment-frame .attachment-info .setting label { 2807 2826 display: block; 2808 2827 } 2809 2828 2810 .edit-attachment-frame .attachment- fields.setting .link-to-custom {2829 .edit-attachment-frame .attachment-info .setting .link-to-custom { 2811 2830 margin: 3px 0; 2812 2831 } 2813 2832 2814 .edit-attachment-frame .attachment- fields.setting .name {2833 .edit-attachment-frame .attachment-info .setting .name { 2815 2834 min-width: 30%; 2816 2835 margin-right: 4%; 2817 2836 font-size: 12px; 2818 2837 text-align: right; 2819 2838 } 2820 2839 2821 .edit-attachment-frame .attachment- fields.setting select {2840 .edit-attachment-frame .attachment-info .setting select { 2822 2841 max-width: 65%; 2823 2842 } 2824 2843 2825 .edit-attachment-frame .attachment- fields.setting input[type="checkbox"],2826 .edit-attachment-frame .attachment- fields.field input[type="checkbox"] {2844 .edit-attachment-frame .attachment-info .setting input[type="checkbox"], 2845 .edit-attachment-frame .attachment-info .field input[type="checkbox"] { 2827 2846 width: 16px; 2828 2847 float: none; 2829 2848 margin: 8px 3px 0; 2830 2849 padding: 0; 2831 2850 } 2832 2851 2833 .edit-attachment-frame .attachment- fields.setting span {2852 .edit-attachment-frame .attachment-info .setting span { 2834 2853 float: left; 2835 2854 min-height: 22px; 2836 2855 padding-top: 8px; … … video#inline-media-node { 2839 2858 color: #666; 2840 2859 } 2841 2860 2842 .edit-attachment-frame .attachment- fields.setting input[type="text"],2843 .edit-attachment-frame .attachment- fields.setting input[type="password"],2844 .edit-attachment-frame .attachment- fields.setting input[type="number"],2845 .edit-attachment-frame .attachment- fields.setting input[type="search"],2846 .edit-attachment-frame .attachment- fields.setting input[type="email"],2847 .edit-attachment-frame .attachment- fields.setting input[type="url"],2848 .edit-attachment-frame .attachment- fields.setting textarea,2849 .edit-attachment-frame .attachment- fields.setting .value {2861 .edit-attachment-frame .attachment-info .setting input[type="text"], 2862 .edit-attachment-frame .attachment-info .setting input[type="password"], 2863 .edit-attachment-frame .attachment-info .setting input[type="number"], 2864 .edit-attachment-frame .attachment-info .setting input[type="search"], 2865 .edit-attachment-frame .attachment-info .setting input[type="email"], 2866 .edit-attachment-frame .attachment-info .setting input[type="url"], 2867 .edit-attachment-frame .attachment-info .setting textarea, 2868 .edit-attachment-frame .attachment-info .setting .value { 2850 2869 margin: 1px; 2851 2870 width: 65%; 2852 2871 float: right; … … video#inline-media-node { 2856 2875 box-sizing: border-box; 2857 2876 } 2858 2877 2859 .edit-attachment-frame .attachment- fields.setting textarea {2878 .edit-attachment-frame .attachment-info .setting textarea { 2860 2879 height: 62px; 2861 2880 resize: vertical; 2862 2881 } 2863 2882 2864 .edit-attachment-frame .attachment- fieldsselect {2883 .edit-attachment-frame .attachment-info select { 2865 2884 margin-top: 3px; 2866 2885 } 2867 2886 -
src/wp-includes/js/media-grid.js
diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js index 3521bbc..325d9ed 100644
a b 11 11 } 12 12 13 13 /** 14 * A state for editing (cropping, etc.) an image.14 * A state for editing an attachment's metadata. 15 15 * 16 16 * @constructor 17 17 * @augments wp.media.controller.State 18 18 * @augments Backbone.Model 19 19 */ 20 media.controller.Edit ImageNoFrame= media.controller.State.extend({20 media.controller.EditAttachmentMetadata = media.controller.State.extend({ 21 21 defaults: { 22 22 id: 'edit-attachment', 23 23 title: l10n.editImage, 24 24 // Region mode defaults. 25 25 menu: false, 26 router: 'edit-metadata',27 26 content: 'edit-metadata', 28 27 29 28 url: '' … … 36 35 * include the regions expected there. 37 36 */ 38 37 _postActivate: function() { 38 this.frame.on( 'title:render:default', this._renderTitle, this ); 39 40 this._title(); 39 41 this._content(); 40 this._router();41 42 }, 42 43 43 44 /** 44 45 * @access private 45 46 */ 46 _router: function() { 47 var router = this.frame.router, 48 mode = this.get('router'), 49 view; 50 51 this.frame.$el.toggleClass( 'hide-router', ! mode ); 52 if ( ! mode ) { 53 return; 54 } 55 56 this.frame.router.render( mode ); 57 58 view = router.get(); 59 if ( view && view.select ) { 60 view.select( this.frame.content.mode() ); 61 } 47 _title: function() { 48 this.frame.title.render( this.get('titleMode') || 'default' ); 49 }, 50 /** 51 * @access private 52 */ 53 _renderTitle: function( view ) { 54 view.$el.text( this.get('title') || '' ); 62 55 }, 63 56 64 57 _content: function() { … … 286 279 media.view.Attachment.Details.TwoColumn = media.view.Attachment.Details.extend({ 287 280 template: wp.template( 'attachment-details-two-column' ), 288 281 282 events: { 283 'click .edit-image': 'handleEditImageClick' 284 }, 285 289 286 initialize: function() { 290 287 if ( ! this.model ) { 291 288 return; … … 322 319 media.view.Attachment.Details.prototype.deleteAttachment.apply( this, arguments ); 323 320 }, 324 321 322 handleEditImageClick: function( event ) { 323 this.controller.setState( 'edit-image' ); 324 }, 325 325 326 afterDelete: function( model ) { 326 327 if ( ! model.destroyed ) { 327 328 return; … … 405 406 * 406 407 * Requires an attachment model to be passed in the options hash under `model`. 407 408 */ 408 media.view.MediaFrame.EditAttachments = media.view. Frame.extend({409 media.view.MediaFrame.EditAttachments = media.view.MediaFrame.extend({ 409 410 410 411 className: 'edit-attachment-frame', 411 412 template: media.template( 'edit-attachment-frame' ), 412 regions: [ ' router', 'content' ],413 regions: [ 'title', 'content' ], 413 414 414 415 events: { 415 416 'click': 'collapse', … … 440 441 this.on( 'content:render:edit-metadata', this.editMetadataContent, this ); 441 442 this.on( 'content:render:edit-image', this.editImageContentUgh, this ); 442 443 this.on( 'close', this.detach ); 443 this.on( 'router:create', this.createRouter, this ); 444 this.on( 'router:render', this.browseRouter, this ); 444 445 // Bind default title creation. 446 this.on( 'title:create:default', this.createTitle, this ); 447 this.title.mode('default'); 445 448 446 449 this.options.hasPrevious = this.hasPrevious(); 447 450 this.options.hasNext = this.hasNext(); … … 474 477 * Add the default states to the frame. 475 478 */ 476 479 createStates: function() { 480 var editImageState = new media.controller.EditImage( { model: this.model } ); 481 // Noop some methods. 482 editImageState._toolbar = function() {}; 483 editImageState._router = function() {}; 484 editImageState._menu = function() {}; 477 485 this.states.add([ 478 new media.controller.EditImageNoFrame( { model: this.model } ) 479 ]); 480 }, 486 new media.controller.EditAttachmentMetadata( { model: this.model } ), 487 editImageState 481 488 482 /** 483 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining 484 */ 485 render: function() { 486 // Activate the default state if no active state exists. 487 if ( ! this.state() && this.options.state ) { 488 this.setState( this.options.state ); 489 } 490 /** 491 * call 'render' directly on the parent class 492 */ 493 return media.view.Frame.prototype.render.apply( this, arguments ); 489 ]); 494 490 }, 495 491 496 492 /** … … 530 526 view.loadEditor(); 531 527 }, 532 528 533 /**534 * Create the router view.535 *536 * @param {Object} router537 * @this wp.media.controller.Region538 */539 createRouter: function( router ) {540 router.view = new media.view.Router({541 controller: this542 });543 },544 545 /**546 * Router rendering callback.547 *548 * @param media.view.Router view Instantiated in this.createRouter()549 */550 browseRouter: function( view ) {551 view.set({552 'edit-metadata': {553 text: l10n.editMetadata,554 priority: 20555 }556 });557 558 // Only need a tab to Edit Image for images.559 if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {560 view.set({561 'edit-image': {562 text: l10n.editImage,563 priority: 40564 }565 });566 }567 },568 569 529 resetContent: function() { 570 530 this.modal.close(); 571 531 wp.media( { -
src/wp-includes/media-template.php
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index 8764219..a4a3526 100644
a b function wp_print_media_templates() { 258 258 <button class="left dashicons dashicons-no<# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button> 259 259 <button class="right dashicons dashicons-no<# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button> 260 260 </div> 261 <div class="media-frame- router"></div>261 <div class="media-frame-title"></div> 262 262 <div class="media-frame-content"></div> 263 263 </script> 264 264 265 265 <script type="text/html" id="tmpl-attachment-details-two-column"> 266 266 <h3> 267 267 <?php _e('Attachment Details'); ?> 268 269 <span class="settings-save-status">270 <span class="spinner"></span>271 <span class="saved"><?php esc_html_e('Saved.'); ?></span>272 </span>273 268 </h3> 274 <div class="attachment- info">269 <div class="attachment-media-view"> 275 270 <div class="thumbnail thumbnail-{{ data.type }}"> 276 271 <# if ( data.uploading ) { #> 277 272 <div class="media-progress-bar"><div></div></div> … … function wp_print_media_templates() { 296 291 </video> 297 292 </div> 298 293 <# } #> 294 </div> 295 <div class="attachment-info"> 296 <span class="settings-save-status"> 297 <span class="spinner"></span> 298 <span class="saved"><?php esc_html_e('Saved.'); ?></span> 299 </span> 299 300 <div class="details"> 300 301 <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div> 301 302 <div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div> … … function wp_print_media_templates() { 321 322 </div> 322 323 <# } #> 323 324 325 <a href="post.php?post={{ data.id }}&action=edit">Actually edit</a> 326 327 <# if ( 'image' === data.type && ! data.uploading ) { #> 328 <button class="edit-image" href="#"><?php _e( 'Edit Original' ); ?></button> 329 <# } #> 330 324 331 <# if ( ! data.uploading && data.can.remove ) { #> 325 332 <?php if ( MEDIA_TRASH ): ?> 326 333 <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a> 327 334 <?php else: ?> 328 < a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>335 <button class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></button> 329 336 <?php endif; ?> 330 337 <# } #> 331 338 … … function wp_print_media_templates() { 335 342 <# } #> 336 343 </div> 337 344 </div> 338 </div>339 <div class="attachment-fields">340 345 <label class="setting" data-setting="url"> 341 346 <span class="name"><?php _e('URL'); ?></span> 342 347 <input type="text" value="{{ data.url }}" readonly />