Ticket #27423: 27423.16.patch
File 27423.16.patch, 14.9 KB (added by , 11 years ago) |
---|
-
src/wp-includes/css/media-views.css
700 700 */ 701 701 .attachments { 702 702 margin: 0; 703 padding -right: 16px;703 padding: 8px; 704 704 -webkit-overflow-scrolling: touch; 705 705 } 706 706 … … 710 710 .attachment { 711 711 position: relative; 712 712 float: left; 713 padding: 0;714 margin : 0 10px 20px;713 padding: 8px; 714 margin-bottom: 0; 715 715 color: #464646; 716 cursor: pointer; 716 717 list-style: none; 717 718 text-align: center; 718 719 -webkit-user-select: none; … … 719 720 -moz-user-select: none; 720 721 -ms-user-select: none; 721 722 user-select: none; 723 width: 20%; 724 box-sizing: border-box; 722 725 } 723 726 724 727 .attachment:focus { 728 outline: none; 729 } 730 731 .attachment:focus .thumbnail { 725 732 -webkit-box-shadow: 726 733 0 0 0 1px #5b9dd9, 727 734 0 0 2px 2px #5b9dd9; … … 728 735 box-shadow: 729 736 0 0 0 1px #5b9dd9, 730 737 0 0 2px 2px #5b9dd9; 731 outline: none;732 738 } 733 739 734 .selected.attachment {740 .selected.attachment .thumbnail { 735 741 -webkit-box-shadow: 736 742 0 0 0 1px #fff, 737 743 0 0 0 3px #ccc; … … 740 746 0 0 0 3px #ccc; 741 747 } 742 748 743 .selected.attachment:focus {749 .selected.attachment:focus .thumbnail { 744 750 -webkit-box-shadow: 745 751 0 0 0 1px #fff, 746 752 0 0 0 5px #1e8cbe; … … 751 757 752 758 .attachment-preview { 753 759 position: relative; 754 width: 199px;755 height: 199px;756 -webkit-box-shadow:757 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),758 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );759 box-shadow:760 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),761 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );762 background: #eee;763 cursor: pointer;764 760 } 765 761 762 .attachment-preview:before { 763 content: ''; 764 display: block; 765 padding-top: 100%; 766 } 767 766 768 .attachment .icon { 767 769 margin: 0 auto; 768 770 overflow: hidden; 769 padding-top: 20%;770 771 } 771 772 772 773 .attachment .thumbnail { 773 display: block;774 overflow: hidden; 774 775 position: absolute; 775 776 top: 0; 777 right: 0; 778 bottom: 0; 776 779 left: 0; 777 margin: 0 auto; 778 overflow: hidden; 779 max-width: 100%; 780 max-height: 100%; 780 -webkit-box-shadow: 781 inset 0 0 15px rgba( 0, 0, 0, 0.1 ), 782 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 ); 783 box-shadow: 784 inset 0 0 15px rgba( 0, 0, 0, 0.1 ), 785 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 ); 786 background: #eee; 781 787 } 782 788 783 .attachment-preview.type-audio .thumbnail, 784 .attachment-preview.type-video .thumbnail { 785 z-index: 1; 786 margin: 1%; 787 max-width: 98%; 788 max-height: 98%; 789 .attachment .portrait img { 790 max-width: 100%; 789 791 } 790 792 791 .media-frame-content .attachment-preview.type-audio .icon, 792 .media-frame-content .attachment-preview.type-video .icon { 793 z-index: 2; 794 background: #f1f1f1; 795 position: relative; 796 padding: 0; 797 top: 15%; 798 left: auto; 799 right: auto; 793 .attachment .landscape img { 794 max-height: 100%; 800 795 } 801 796 802 .attachment-preview.type-audio .filename, 803 .attachment-preview.type-video .filename { 804 z-index: 3; 805 } 806 807 .attachment-preview .thumbnail:after { 797 .attachment .thumbnail:after { 808 798 content: ''; 809 799 display: block; 810 800 position: absolute; … … 848 838 bottom: 0; 849 839 overflow: hidden; 850 840 max-height: 100%; 851 852 841 word-wrap: break-word; 853 842 text-align: center; 854 843 font-weight: bold; … … 861 850 padding: 5px 10px; 862 851 } 863 852 864 .attachment-preview .thumbnail {865 width: 199px;866 height: 199px;867 }868 869 853 .attachment .thumbnail img { 870 854 position: absolute; 871 855 } … … 907 891 width: 24px; 908 892 position: absolute; 909 893 z-index: 10; 910 top: -6px;911 right: -6px;894 top: 0; 895 right: 0; 912 896 outline: none; 913 897 background: #eee; 914 898 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 ); … … 930 914 display: block; 931 915 } 932 916 933 .attachment.details ,934 .media-frame.mode-grid .selected.attachment {917 .attachment.details .thumbnail, 918 .media-frame.mode-grid .selected.attachment .thumbnail { 935 919 -webkit-box-shadow: 0 0 0 1px #fff, 936 920 0 0 0 5px #1e8cbe; 937 921 box-shadow: 0 0 0 1px #fff, … … 971 955 position: relative; 972 956 display: block; 973 957 width: 100%; 974 margin: -1px 00;958 margin: 0; 975 959 padding: 8px; 976 960 font-size: 12px; 977 961 -webkit-border-radius: 0; … … 1084 1068 background: #1e8cbe; 1085 1069 -webkit-border-radius: 10px; 1086 1070 border-radius: 10px; 1087 -webkit-transition: width 300ms;1088 transition: width 300ms;1071 -webkit-transition: width 300ms; 1072 transition: width 300ms; 1089 1073 } 1090 1074 1091 1075 .media-uploader-status .media-progress-bar { … … 1381 1365 .media-selection .attachments { 1382 1366 display: inline-block; 1383 1367 height: 48px; 1384 margin-top: 5px; 1368 margin: 6px; 1369 padding: 0; 1385 1370 overflow: hidden; 1386 1371 vertical-align: top; 1387 1372 } 1388 1373 1374 .media-selection .attachment { 1375 width: 48px; 1376 } 1377 1378 .media-selection .attachment .thumbnail { 1379 top: 4px; 1380 right: 4px; 1381 bottom: 4px; 1382 left: 4px; 1383 } 1384 1389 1385 .media-selection .attachment .icon { 1390 1386 width: 50%; 1391 1387 } 1392 1388 1393 .attachment.selection.selected {1389 .attachment.selection.selected .thumbnail { 1394 1390 -webkit-box-shadow: none; 1395 1391 box-shadow: none; 1396 1392 } 1397 1393 1398 .attachment.selection.selected:focus {1394 .attachment.selection.selected:focus .thumbnail { 1399 1395 -webkit-box-shadow: 1400 1396 0 0 0 1px #5b9dd9, 1401 1397 0 0 2px 2px #5b9dd9; … … 1405 1401 outline: none; 1406 1402 } 1407 1403 1408 .attachment.selection.details {1404 .attachment.selection.details .thumbnail { 1409 1405 -webkit-box-shadow: 1410 1406 0 0 0 1px #fff, 1411 1407 0 0 0 4px #1e8cbe; … … 1414 1410 0 0 0 4px #1e8cbe; 1415 1411 } 1416 1412 1417 .media-selection .attachment.selection.details {1413 .media-selection .attachment.selection.details .thumbnail { 1418 1414 -webkit-box-shadow: 1419 1415 0 0 0 1px #fff, 1420 1416 0 0 0 3px #1e8cbe; … … 2914 2910 max-width: none !important; 2915 2911 } 2916 2912 } 2913 2914 .attachments[data-columns="1"] .attachment { 2915 width: 100%; 2916 } 2917 2918 .attachments[data-columns="2"] .attachment { 2919 width: 50%; 2920 } 2921 2922 .attachments[data-columns="3"] .attachment { 2923 width: 33.3%; 2924 } 2925 2926 .attachments[data-columns="4"] .attachment { 2927 width: 25%; 2928 } 2929 2930 .attachments[data-columns="5"] .attachment { 2931 width: 20%; 2932 } 2933 2934 .attachments[data-columns="6"] .attachment { 2935 width: 16.6%; 2936 } 2937 2938 .attachments[data-columns="7"] .attachment { 2939 width: 14.2%; 2940 } 2941 2942 .attachments[data-columns="8"] .attachment { 2943 width: 12.5%; 2944 } 2945 2946 .attachments[data-columns="9"] .attachment { 2947 width: 11.1%; 2948 } 2949 2950 .attachments[data-columns="10"] .attachment { 2951 width: 10%; 2952 } 2953 2954 .attachments[data-columns="11"] .attachment { 2955 width: 9%; 2956 } 2957 2958 .attachments[data-columns="12"] .attachment { 2959 width: 8.3%; 2960 } -
src/wp-includes/js/media-views.js
630 630 }) ); 631 631 } 632 632 633 if ( ! this.get('edge') ) {634 this.set( 'edge', 150 );635 }636 637 if ( ! this.get('gutter') ) {638 this.set( 'gutter', 8 );639 }640 641 633 this.resetDisplays(); 642 634 }, 643 635 … … 838 830 describe: true, 839 831 displaySettings: true, 840 832 dragInfo: true, 841 edge: 199,842 833 editing: false, 843 834 priority: 60, 844 835 … … 991 982 992 983 describe: true, 993 984 dragInfo: true, 994 edge: 199,995 985 editing: false, 996 986 priority: 60, 997 987 SettingsView: false, … … 4805 4795 arrowEvent: function( event ) { 4806 4796 var attachment = $('.attachments-browser .attachment'), 4807 4797 attachmentsWidth = $('.attachments-browser .attachments').width(), 4808 thumbnailWidth = attachment.first(). innerWidth() + 16,4809 thumbnailsPerRow = Math. floor(attachmentsWidth/thumbnailWidth),4798 thumbnailWidth = attachment.first().width(), 4799 thumbnailsPerRow = Math.round( attachmentsWidth / thumbnailWidth ), 4810 4800 totalThumnails = attachment.length, 4811 4801 totalRows = Math.ceil(totalThumnails/thumbnailsPerRow), 4812 4802 thisIndex = attachment.filter( ':focus' ).index(), … … 5218 5208 tabIndex: -1 5219 5209 }, 5220 5210 5221 cssTemplate: media.template('attachments-css'),5222 5223 5211 initialize: function() { 5224 5212 this.el.id = _.uniqueId('__attachments-view-'); 5225 5213 … … 5228 5216 refreshThreshold: 3, 5229 5217 AttachmentView: media.view.Attachment, 5230 5218 sortable: false, 5231 resize: true 5219 resize: true, 5220 idealColumnWidth: 125 5232 5221 }); 5233 5222 5234 5223 this._viewsByCid = {}; … … 5258 5247 5259 5248 this.initSortable(); 5260 5249 5261 _.bindAll( this, 'css' ); 5262 this.model.on( 'change:edge change:gutter', this.css, this ); 5263 this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity ); 5250 _.bindAll( this, 'setColumns' ); 5251 5264 5252 if ( this.options.resize ) { 5265 $( window).on( 'resize.attachments', this._resizeCss );5253 $( window ).on( 'resize.attachments', this.setColumns ); 5266 5254 } 5267 5255 5268 // Call this. css() after this view has been rendered in the DOM so5256 // Call this.setColumns() after this view has been rendered in the DOM so 5269 5257 // attachments get proper width applied. 5270 _.defer( this. css, this );5258 _.defer( this.setColumns, this ); 5271 5259 }, 5272 5260 5273 5261 dispose: function() { 5274 5262 this.collection.props.off( null, null, this ); 5275 $(window).off( 'resize.attachments', this._resizeCss ); 5263 $( window ).off( 'resize.attachments', this.setColumns ); 5264 5276 5265 /** 5277 5266 * call 'dispose' directly on the parent class 5278 5267 */ … … 5279 5268 media.View.prototype.dispose.apply( this, arguments ); 5280 5269 }, 5281 5270 5282 css: function() {5283 var $css = $( '#' + this.el.id + '-css' );5271 setColumns: function() { 5272 var prev = this.columns; 5284 5273 5285 if ( $css.length ) { 5286 $css.remove(); 5287 } 5274 this.columns = Math.round( this.$el.width() / this.options.idealColumnWidth ); 5288 5275 5289 media.view.Attachments.$head().append( this.cssTemplate({ 5290 id: this.el.id, 5291 edge: this.edge(), 5292 gutter: this.model.get('gutter') 5293 }) ); 5294 }, 5295 /** 5296 * @returns {Number} 5297 */ 5298 edge: function() { 5299 var edge = this.model.get('edge'), 5300 gutter, width, columns; 5301 5302 if ( ! this.$el.is(':visible') ) { 5303 return edge; 5276 if ( prev !== this.columns ) { 5277 this.$el.attr( 'data-columns', this.columns ); 5304 5278 } 5305 5306 gutter = this.model.get('gutter') * 2;5307 width = this.$el.width() - gutter;5308 columns = Math.ceil( width / ( edge + gutter ) );5309 edge = Math.floor( ( width - ( columns * gutter ) ) / columns );5310 return edge;5311 5279 }, 5312 5280 5313 5281 initSortable: function() { … … 5453 5421 }); 5454 5422 } 5455 5423 } 5456 }, {5457 $head: (function() {5458 var $head;5459 return function() {5460 return $head = $head || $('head');5461 };5462 }())5463 5424 }); 5464 5425 5465 5426 /** … … 6003 5964 controller: this.controller, 6004 5965 collection: this.collection, 6005 5966 selection: this.collection, 6006 model: new Backbone.Model({ 6007 edge: 40, 6008 gutter: 5 6009 }) 5967 model: new Backbone.Model() 6010 5968 }); 6011 5969 6012 5970 this.views.set( '.selection-view', this.attachments ); -
src/wp-includes/media-template.php
414 414 415 415 <script type="text/html" id="tmpl-attachment"> 416 416 <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}"> 417 < # if ( data.uploading ) { #>418 < div class="media-progress-bar"><div></div></div>419 <# } else if ( 'image' === data.type ) { #>420 < div class="thumbnail">417 <div class="thumbnail"> 418 <# if ( data.uploading ) { #> 419 <div class="media-progress-bar"><div> 420 <# } else if ( 'image' === data.type ) { #> 421 421 <div class="centered"> 422 422 <img src="{{ data.size.url }}" draggable="false" alt="" /> 423 423 </div> 424 </div> 425 <# } else { 426 if ( data.thumb && data.thumb.src && data.thumb.src !== data.icon ) { 427 #><img src="{{ data.thumb.src }}" class="thumbnail" draggable="false" /><# 428 } else { 429 #><img src="{{ data.icon }}" class="icon" draggable="false" /><# 430 } #> 431 <div class="filename"> 432 <div>{{ data.filename }}</div> 433 </div> 434 <# } #> 424 <# } else { #> 425 <div class="centered"> 426 <# if ( data.thumb && data.thumb.src && data.thumb.src !== data.icon ) { #> 427 <img src="{{ data.thumb.src }}" class="thumbnail" draggable="false" /> 428 <# } else { #> 429 <img src="{{ data.icon }}" class="icon" draggable="false" /> 430 <# } #> 431 </div> 432 <div class="filename"> 433 <div>{{ data.filename }}</div> 434 </div> 435 <# } #> 436 </div> 435 437 <# if ( data.buttons.close ) { #> 436 438 <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a> 437 <# } #> 439 <# } 440 441 var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; 442 if ( data.describe ) { 443 if ( 'image' === data.type ) { #> 444 <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption" 445 placeholder="<?php esc_attr_e('Caption this image…'); ?>" {{ maybeReadOnly }} /> 446 <# } else { #> 447 <input type="text" value="{{ data.title }}" class="describe" data-setting="title" 448 <# if ( 'video' === data.type ) { #> 449 placeholder="<?php esc_attr_e('Describe this video…'); ?>" 450 <# } else if ( 'audio' === data.type ) { #> 451 placeholder="<?php esc_attr_e('Describe this audio file…'); ?>" 452 <# } else { #> 453 placeholder="<?php esc_attr_e('Describe this media file…'); ?>" 454 <# } #> {{ maybeReadOnly }} /> 455 <# } 456 } #> 438 457 </div> 439 458 <# if ( data.buttons.check ) { #> 440 459 <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a> 441 460 <# } #> 442 <#443 var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';444 if ( data.describe ) {445 if ( 'image' === data.type ) { #>446 <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"447 placeholder="<?php esc_attr_e('Caption this image…'); ?>" {{ maybeReadOnly }} />448 <# } else { #>449 <input type="text" value="{{ data.title }}" class="describe" data-setting="title"450 <# if ( 'video' === data.type ) { #>451 placeholder="<?php esc_attr_e('Describe this video…'); ?>"452 <# } else if ( 'audio' === data.type ) { #>453 placeholder="<?php esc_attr_e('Describe this audio file…'); ?>"454 <# } else { #>455 placeholder="<?php esc_attr_e('Describe this media file…'); ?>"456 <# } #> {{ maybeReadOnly }} />457 <# }458 } #>459 461 </script> 460 462 461 463 <script type="text/html" id="tmpl-attachment-details"> … … 822 824 </div> 823 825 </script> 824 826 825 <script type="text/html" id="tmpl-attachments-css">826 <style type="text/css" id="{{ data.id }}-css">827 #{{ data.id }} {828 padding: 0 {{ data.gutter }}px;829 }830 831 #{{ data.id }} .attachment {832 margin: {{ data.gutter }}px;833 width: {{ data.edge }}px;834 }835 836 #{{ data.id }} .attachment-preview,837 #{{ data.id }} .attachment-preview .thumbnail {838 width: {{ data.edge }}px;839 height: {{ data.edge }}px;840 }841 842 #{{ data.id }} .portrait .thumbnail img {843 max-width: {{ data.edge }}px;844 height: auto;845 }846 847 #{{ data.id }} .landscape .thumbnail img {848 width: auto;849 max-height: {{ data.edge }}px;850 }851 </style>852 </script>853 854 827 <script type="text/html" id="tmpl-image-details"> 855 828 <div class="media-embed"> 856 829 <div class="embed-media-settings">