Changeset 29376
- Timestamp:
- 08/05/2014 05:19:09 AM (11 years ago)
- Location:
- trunk/src/wp-includes
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-includes/css/media-views.css
r29365 r29376 701 701 .attachments { 702 702 margin: 0; 703 padding -right: 16px;703 padding: 8px; 704 704 -webkit-overflow-scrolling: touch; 705 705 } … … 711 711 position: relative; 712 712 float: left; 713 padding: 0;714 margin: 0 10px 20px;713 padding: 8px; 714 margin: 0; 715 715 color: #464646; 716 cursor: pointer; 716 717 list-style: none; 717 718 text-align: center; … … 720 721 -ms-user-select: none; 721 722 user-select: none; 723 width: 20%; 724 -webkit-box-sizing: border-box; 725 -moz-box-sizing: border-box; 726 box-sizing: border-box; 722 727 } 723 728 724 729 .attachment:focus { 725 730 -webkit-box-shadow: 726 0 0 0 1px #5b9dd9,727 0 0 2px 2px #5b9dd9;731 inset 0 0 0 5px #fff, 732 inset 0 0 1px 7px #5b9dd9; 728 733 box-shadow: 729 0 0 0 1px #5b9dd9,730 0 0 2px 2px #5b9dd9;734 inset 0 0 0 5px #fff, 735 inset 0 0 1px 7px #5b9dd9; 731 736 outline: none; 732 737 } … … 734 739 .selected.attachment { 735 740 -webkit-box-shadow: 736 0 0 0 1px #fff,737 0 0 0 3px #ccc;741 inset 0 0 0 5px #fff, 742 inset 0 0 0 7px #ccc; 738 743 box-shadow: 739 0 0 0 1px #fff, 740 0 0 0 3px #ccc; 741 } 742 743 .selected.attachment:focus { 744 -webkit-box-shadow: 745 0 0 0 1px #fff, 746 0 0 0 5px #1e8cbe; 747 box-shadow: 748 0 0 0 1px #fff, 749 0 0 0 5px #1e8cbe; 744 inset 0 0 0 5px #fff, 745 inset 0 0 0 7px #ccc; 750 746 } 751 747 752 748 .attachment-preview { 753 749 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; 750 } 751 752 .attachment-preview:before { 753 content: ''; 754 display: block; 755 padding-top: 100%; 764 756 } 765 757 … … 767 759 margin: 0 auto; 768 760 overflow: hidden; 769 padding-top: 20%;770 761 } 771 762 772 763 .attachment .thumbnail { 773 display: block;764 overflow: hidden; 774 765 position: absolute; 775 766 top: 0; 767 right: 0; 768 bottom: 0; 776 769 left: 0; 777 margin: 0 auto; 778 overflow: hidden; 770 } 771 772 .attachment .portrait img { 779 773 max-width: 100%; 774 } 775 776 .attachment .landscape img { 780 777 max-height: 100%; 781 778 } 782 779 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 } 790 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; 800 } 801 802 .attachment-preview.type-audio .filename, 803 .attachment-preview.type-video .filename { 804 z-index: 3; 805 } 806 807 .attachment-preview .thumbnail:after { 780 .attachment .thumbnail:after { 808 781 content: ''; 809 782 display: block; … … 832 805 height: 100%; 833 806 -webkit-transform: translate( 50%, 50% ); 834 -ms-transform: translate( 50%, 50% );807 -ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */ 835 808 transform: translate( 50%, 50% ); 836 809 } … … 838 811 .attachment .thumbnail .centered img { 839 812 -webkit-transform: translate( -50%, -50% ); 840 -ms-transform: translate( -50%, -50%);813 -ms-transform: translate(-50%,-50%); 841 814 transform: translate( -50%, -50% ); 842 815 } … … 849 822 overflow: hidden; 850 823 max-height: 100%; 851 852 824 word-wrap: break-word; 853 825 text-align: center; … … 860 832 .attachment .filename div { 861 833 padding: 5px 10px; 862 }863 864 .attachment-preview .thumbnail {865 width: 199px;866 height: 199px;867 834 } 868 835 … … 908 875 position: absolute; 909 876 z-index: 10; 910 top: -6px;911 right: -6px;877 top: 0; 878 right: 0; 912 879 outline: none; 913 880 background: #eee; … … 931 898 } 932 899 900 .selected.attachment:focus, 933 901 .attachment.details, 934 902 .media-frame.mode-grid .selected.attachment { 935 -webkit-box-shadow: 0 0 0 1px #fff, 936 0 0 0 5px #1e8cbe; 937 box-shadow: 0 0 0 1px #fff, 938 0 0 0 5px #1e8cbe; 903 -webkit-box-shadow: 904 inset 0 0 0 3px #fff, 905 inset 0 0 0 7px #1e8cbe; 906 box-shadow: 907 inset 0 0 0 3px #fff, 908 inset 0 0 0 7px #1e8cbe; 939 909 } 940 910 … … 943 913 .media-frame.mode-grid .attachment.selected .check { 944 914 background-color: #1e8cbe; 945 -webkit-box-shadow: 0 0 0 1px #fff, 946 0 0 0 2px #1e8cbe; 947 box-shadow: 0 0 0 1px #fff, 948 0 0 0 2px #1e8cbe; 915 -webkit-box-shadow: 916 0 0 0 1px #fff, 917 0 0 0 2px #1e8cbe; 918 box-shadow: 919 0 0 0 1px #fff, 920 0 0 0 2px #1e8cbe; 949 921 } 950 922 … … 972 944 display: block; 973 945 width: 100%; 974 margin: -1px 00;946 margin: 0; 975 947 padding: 8px; 976 948 font-size: 12px; … … 1219 1191 right: 0; 1220 1192 -webkit-transform: translateY( -50% ); 1221 -ms-transform: translateY( -50%);1193 -ms-transform: translateY(-50%); 1222 1194 transform: translateY( -50% ); 1223 1195 font-size: 40px; … … 1382 1354 display: inline-block; 1383 1355 height: 48px; 1384 margin-top: 5px; 1356 margin: 6px; 1357 padding: 0; 1385 1358 overflow: hidden; 1386 1359 vertical-align: top; 1387 1360 } 1388 1361 1362 .media-selection .attachment { 1363 width: 48px; 1364 padding: 0; 1365 margin: 0; 1366 -webkit-box-shadow: none; 1367 box-shadow: none; 1368 } 1369 1370 .media-selection .attachment .thumbnail { 1371 top: 4px; 1372 right: 4px; 1373 bottom: 4px; 1374 left: 4px; 1375 } 1376 1389 1377 .media-selection .attachment .icon { 1390 1378 width: 50%; 1391 1379 } 1392 1393 .attachment.selection.selected {1380 /* 1381 .attachment.selection.selected .thumbnail { 1394 1382 -webkit-box-shadow: none; 1395 1383 box-shadow: none; … … 1414 1402 0 0 0 4px #1e8cbe; 1415 1403 } 1416 1417 .media-selection .attachment.selection.details {1404 */ 1405 .media-selection .attachment.selection.details .thumbnail { 1418 1406 -webkit-box-shadow: 1419 1407 0 0 0 1px #fff, … … 2057 2045 right: 0; 2058 2046 -webkit-transform: translateY( -50% ); 2059 -ms-transform: translateY( -50%);2047 -ms-transform: translateY(-50%); 2060 2048 transform: translateY( -50% ); 2061 2049 font-size: 3em; … … 2915 2903 } 2916 2904 } 2905 2906 .attachments[data-columns="1"] .attachment { 2907 width: 100%; 2908 } 2909 2910 .attachments[data-columns="2"] .attachment { 2911 width: 50%; 2912 } 2913 2914 .attachments[data-columns="3"] .attachment { 2915 width: 33.3%; 2916 } 2917 2918 .attachments[data-columns="4"] .attachment { 2919 width: 25%; 2920 } 2921 2922 .attachments[data-columns="5"] .attachment { 2923 width: 20%; 2924 } 2925 2926 .attachments[data-columns="6"] .attachment { 2927 width: 16.6%; 2928 } 2929 2930 .attachments[data-columns="7"] .attachment { 2931 width: 14.2%; 2932 } 2933 2934 .attachments[data-columns="8"] .attachment { 2935 width: 12.5%; 2936 } 2937 2938 .attachments[data-columns="9"] .attachment { 2939 width: 11.1%; 2940 } 2941 2942 .attachments[data-columns="10"] .attachment { 2943 width: 10%; 2944 } 2945 2946 .attachments[data-columns="11"] .attachment { 2947 width: 9%; 2948 } 2949 2950 .attachments[data-columns="12"] .attachment { 2951 width: 8.3%; 2952 } -
trunk/src/wp-includes/js/media-views.js
r29364 r29376 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 }, … … 836 828 toolbar: 'gallery-edit', 837 829 838 describe: true,839 displaySettings: true,840 dragInfo: true,841 edge: 199,842 editing: false,843 priority: 60,830 describe: true, 831 displaySettings: true, 832 dragInfo: true, 833 idealColumnWidth: 170, 834 editing: false, 835 priority: 60, 844 836 845 837 // Don't sync the selection, as the Edit Gallery library … … 990 982 content: 'browse', 991 983 992 describe: true,993 dragInfo: true,994 edge: 199,995 editing: false,996 priority: 60,997 SettingsView: false,984 describe: true, 985 dragInfo: true, 986 idealColumnWidth: 170, 987 editing: false, 988 priority: 60, 989 SettingsView: false, 998 990 999 991 // Don't sync the selection, as the Edit {Collection} library … … 2179 2171 dragInfo: state.get('dragInfo'), 2180 2172 2181 suggestedWidth: state.get('suggestedWidth'), 2182 suggestedHeight: state.get('suggestedHeight'), 2173 idealColumnWidth: state.get('idealColumnWidth'), 2174 suggestedWidth: state.get('suggestedWidth'), 2175 suggestedHeight: state.get('suggestedHeight'), 2183 2176 2184 2177 AttachmentView: state.get('AttachmentView') … … 4806 4799 var attachment = $('.attachments-browser .attachment'), 4807 4800 attachmentsWidth = $('.attachments-browser .attachments').width(), 4808 thumbnailWidth = attachment.first(). innerWidth() + 16,4809 thumbnailsPerRow = Math. floor(attachmentsWidth/thumbnailWidth),4801 thumbnailWidth = attachment.first().width(), 4802 thumbnailsPerRow = Math.round( attachmentsWidth / thumbnailWidth ), 4810 4803 totalThumnails = attachment.length, 4811 4804 totalRows = Math.ceil(totalThumnails/thumbnailsPerRow), … … 5219 5212 }, 5220 5213 5221 cssTemplate: media.template('attachments-css'),5222 5223 5214 initialize: function() { 5224 5215 this.el.id = _.uniqueId('__attachments-view-'); … … 5229 5220 AttachmentView: media.view.Attachment, 5230 5221 sortable: false, 5231 resize: true 5222 resize: true, 5223 idealColumnWidth: 150 5232 5224 }); 5233 5225 … … 5259 5251 this.initSortable(); 5260 5252 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 ); 5253 _.bindAll( this, 'setColumns' ); 5254 5264 5255 if ( this.options.resize ) { 5265 $( window).on( 'resize.attachments', this._resizeCss );5266 } 5267 5268 // Call this. css() after this view has been rendered in the DOM so5256 $( window ).on( 'resize.attachments', this.setColumns ); 5257 } 5258 5259 // Call this.setColumns() after this view has been rendered in the DOM so 5269 5260 // attachments get proper width applied. 5270 _.defer( this. css, this );5261 _.defer( this.setColumns, this ); 5271 5262 }, 5272 5263 5273 5264 dispose: function() { 5274 5265 this.collection.props.off( null, null, this ); 5275 $(window).off( 'resize.attachments', this._resizeCss ); 5266 $( window ).off( 'resize.attachments', this.setColumns ); 5267 5276 5268 /** 5277 5269 * call 'dispose' directly on the parent class … … 5280 5272 }, 5281 5273 5282 css: function() { 5283 var $css = $( '#' + this.el.id + '-css' ); 5284 5285 if ( $css.length ) { 5286 $css.remove(); 5287 } 5288 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; 5304 } 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; 5274 setColumns: function() { 5275 var prev = this.columns; 5276 5277 this.columns = Math.round( this.$el.width() / this.options.idealColumnWidth ); 5278 5279 if ( prev !== this.columns ) { 5280 this.$el.attr( 'data-columns', this.columns ); 5281 } 5311 5282 }, 5312 5283 … … 5454 5425 } 5455 5426 } 5456 }, {5457 $head: (function() {5458 var $head;5459 return function() {5460 return $head = $head || $('head');5461 };5462 }())5463 5427 }); 5464 5428 … … 5896 5860 sortable: this.options.sortable, 5897 5861 scrollElement: this.options.scrollElement, 5862 idealColumnWidth: this.options.idealColumnWidth, 5898 5863 5899 5864 // The single `Attachment` view to be used in the `Attachments` view. … … 6004 5969 collection: this.collection, 6005 5970 selection: this.collection, 6006 model: new Backbone.Model({ 6007 edge: 40, 6008 gutter: 5 6009 }) 5971 model: new Backbone.Model() 6010 5972 }); 6011 5973 -
trunk/src/wp-includes/media-template.php
r29373 r29376 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> … … 821 823 <input type="text" class="link-to-custom" data-setting="linkUrl" /> 822 824 </div> 823 </script>824 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 825 </script> 853 826
Note: See TracChangeset
for help on using the changeset viewer.