WordPress.org
Get WordPress

Make WordPress Core

Ticket #27423: 27423.15.patch

File 27423.15.patch, 12.8 KB (added by iseulde, 11 years ago)

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

     
    700700 */
    701701.attachments {
    702702        margin: 0;
    703         padding-right: 16px;
     703        padding: 8px;
    704704        -webkit-overflow-scrolling: touch;
    705705}
    706706
    … …  
    711711        position: relative;
    712712        float: left;
    713713        padding: 0;
    714         margin: 0 10px 20px;
     714        margin-bottom: 0;
    715715        color: #464646;
     716        cursor: pointer;
    716717        list-style: none;
    717718        text-align: center;
    718719        -webkit-user-select: none;
    719720        -moz-user-select: none;
    720721        -ms-user-select: none;
    721722        user-select: none;
     723        width: 20%;
    722724}
    723725
    724726.attachment:focus {
     727        outline: none;
     728}
     729
     730.attachment:focus .thumbnail {
    725731        -webkit-box-shadow:
    726732                0 0 0 1px #5b9dd9,
    727733                0 0 2px 2px #5b9dd9;
    728734        box-shadow:
    729735                0 0 0 1px #5b9dd9,
    730736                0 0 2px 2px #5b9dd9;
    731         outline: none;
    732737}
    733738
    734 .selected.attachment {
     739.selected.attachment .thumbnail {
    735740        -webkit-box-shadow:
    736741                0 0 0 1px #fff,
    737742                0 0 0 3px #ccc;
    … …  
    740745                0 0 0 3px #ccc;
    741746}
    742747
    743 .selected.attachment:focus {
     748.selected.attachment:focus .thumbnail {
    744749        -webkit-box-shadow:
    745750                0 0 0 1px #fff,
    746751                0 0 0 5px #1e8cbe;
    … …  
    751756
    752757.attachment-preview {
    753758        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;
     759}
     760
     761.attachment-preview:before {
     762        content: '';
     763        display: block;
     764        padding-top: 100%;
    764765}
    765766
    766767.attachment .icon {
    767768        margin: 0 auto;
    768769        overflow: hidden;
    769         padding-top: 20%;
    770770}
    771771
    772772.attachment .thumbnail {
    773         display: block;
    774         position: absolute;
    775         top: 0;
    776         left: 0;
    777         margin: 0 auto;
    778773        overflow: hidden;
    779         max-width: 100%;
    780         max-height: 100%;
    781 }
    782 
    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%;
     774        position: absolute;
     775        top: 8px;
     776        right: 8px;
     777        bottom: 8px;
     778        left: 8px;
     779        -webkit-box-shadow:
     780                inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
     781                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
     782        box-shadow:
     783                inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
     784                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
     785        background: #eee;
    789786}
    790787
    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;
     788.attachment .portrait img {
     789        max-width: 100%;
    800790}
    801791
    802 .attachment-preview.type-audio .filename,
    803 .attachment-preview.type-video .filename {
    804         z-index: 3;
     792.attachment .landscape img {
     793        max-height: 100%;
    805794}
    806795
    807 .attachment-preview .thumbnail:after {
     796.attachment .thumbnail:after {
    808797        content: '';
    809798        display: block;
    810799        position: absolute;
    … …  
    848837        bottom: 0;
    849838        overflow: hidden;
    850839        max-height: 100%;
    851 
    852840        word-wrap: break-word;
    853841        text-align: center;
    854842        font-weight: bold;
    … …  
    861849        padding: 5px 10px;
    862850}
    863851
    864 .attachment-preview .thumbnail {
    865         width: 199px;
    866         height: 199px;
    867 }
    868 
    869852.attachment .thumbnail img {
    870853        position: absolute;
    871854}
    … …  
    873856.attachment .close {
    874857        display: none;
    875858        position: absolute;
    876         top: 5px;
    877         right: 5px;
     859        top: 12px;
     860        right: 12px;
    878861        height: 22px;
    879862        width: 22px;
    880863        padding: 0;
    … …  
    907890        width: 24px;
    908891        position: absolute;
    909892        z-index: 10;
    910         top: -6px;
    911         right: -6px;
     893        top: 0;
     894        right: 0;
    912895        outline: none;
    913896        background: #eee;
    914897        -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
    … …  
    930913        display: block;
    931914}
    932915
    933 .attachment.details,
    934 .media-frame.mode-grid .selected.attachment {
     916.attachment.details .thumbnail,
     917.media-frame.mode-grid .selected.attachment .thumbnail {
    935918        -webkit-box-shadow: 0 0 0 1px #fff,
    936919                                0 0 0 5px #1e8cbe;
    937920        box-shadow: 0 0 0 1px #fff,
    … …  
    10841067        background: #1e8cbe;
    10851068        -webkit-border-radius: 10px;
    10861069        border-radius: 10px;
    1087         -webkit-transition: width 300ms;
    1088         transition: width 300ms;
     1070        -webkit-transition:         width 300ms;
     1071        transition:         width 300ms;
    10891072}
    10901073
    10911074.media-uploader-status .media-progress-bar {
    … …  
    13811364.media-selection .attachments {
    13821365        display: inline-block;
    13831366        height: 48px;
    1384         margin-top: 5px;
     1367        margin: 6px;
     1368        padding: 0;
    13851369        overflow: hidden;
    13861370        vertical-align: top;
    13871371}
    13881372
     1373.media-selection .attachment {
     1374        width: 48px;
     1375}
     1376
     1377.media-selection .attachment .thumbnail {
     1378        top: 4px;
     1379        right: 4px;
     1380        bottom: 4px;
     1381        left: 4px;
     1382}
     1383
    13891384.media-selection .attachment .icon {
    13901385        width: 50%;
    13911386}
    13921387
    1393 .attachment.selection.selected {
     1388.attachment.selection.selected .thumbnail {
    13941389        -webkit-box-shadow: none;
    13951390        box-shadow: none;
    13961391}
    13971392
    1398 .attachment.selection.selected:focus {
     1393.attachment.selection.selected:focus .thumbnail {
    13991394        -webkit-box-shadow:
    14001395                0 0 0 1px #5b9dd9,
    14011396                0 0 2px 2px #5b9dd9;
    … …  
    14051400        outline: none;
    14061401}
    14071402
    1408 .attachment.selection.details {
     1403.attachment.selection.details .thumbnail {
    14091404        -webkit-box-shadow:
    14101405                0 0 0 1px #fff,
    14111406                0 0 0 4px #1e8cbe;
    … …  
    14141409                0 0 0 4px #1e8cbe;
    14151410}
    14161411
    1417 .media-selection .attachment.selection.details {
     1412.media-selection .attachment.selection.details .thumbnail {
    14181413        -webkit-box-shadow:
    14191414                0 0 0 1px #fff,
    14201415                0 0 0 3px #1e8cbe;
    … …  
    29142909                max-width: none !important;
    29152910        }
    29162911}
     2912
     2913.attachments[data-columns="1"] .attachment {
     2914        width: 100%;
     2915}
     2916
     2917.attachments[data-columns="2"] .attachment {
     2918        width: 50%;
     2919}
     2920
     2921.attachments[data-columns="3"] .attachment {
     2922        width: 33.3%;
     2923}
     2924
     2925.attachments[data-columns="4"] .attachment {
     2926        width: 25%;
     2927}
     2928
     2929.attachments[data-columns="5"] .attachment {
     2930        width: 20%;
     2931}
     2932
     2933.attachments[data-columns="6"] .attachment {
     2934        width: 16.6%;
     2935}
     2936
     2937.attachments[data-columns="7"] .attachment {
     2938        width: 14.2%;
     2939}
     2940
     2941.attachments[data-columns="8"] .attachment {
     2942        width: 12.5%;
     2943}
     2944
     2945.attachments[data-columns="9"] .attachment {
     2946        width: 11.1%;
     2947}
     2948
     2949.attachments[data-columns="10"] .attachment {
     2950        width: 10%;
     2951}
     2952
     2953.attachments[data-columns="11"] .attachment {
     2954        width: 9%;
     2955}
     2956
     2957.attachments[data-columns="12"] .attachment {
     2958        width: 8.3%;
     2959}

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

     
    630630                                }) );
    631631                        }
    632632
    633                         if ( ! this.get('edge') ) {
    634                                 this.set( 'edge', 150 );
    635                         }
    636 
    637                         if ( ! this.get('gutter') ) {
    638                                 this.set( 'gutter', 8 );
    639                         }
    640 
    641633                        this.resetDisplays();
    642634                },
    643635
    … …  
    838830                        describe:        true,
    839831                        displaySettings: true,
    840832                        dragInfo:        true,
    841                         edge:            199,
    842833                        editing:         false,
    843834                        priority:        60,
    844835
    … …  
    991982
    992983                        describe:     true,
    993984                        dragInfo:     true,
    994                         edge:         199,
    995985                        editing:      false,
    996986                        priority:     60,
    997987                        SettingsView: false,
    … …  
    48054795                arrowEvent: function( event ) {
    48064796                        var attachment = $('.attachments-browser .attachment'),
    48074797                                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 ),
    48104800                                totalThumnails = attachment.length,
    48114801                                totalRows = Math.ceil(totalThumnails/thumbnailsPerRow),
    48124802                                thisIndex = attachment.filter( ':focus' ).index(),
    … …  
    52185208                        tabIndex: -1
    52195209                },
    52205210
    5221                 cssTemplate: media.template('attachments-css'),
    5222 
    52235211                initialize: function() {
    52245212                        this.el.id = _.uniqueId('__attachments-view-');
    52255213
    … …  
    52285216                                refreshThreshold:   3,
    52295217                                AttachmentView:     media.view.Attachment,
    52305218                                sortable:           false,
    5231                                 resize:             true
     5219                                resize:             true,
     5220                                idealColumnWidth:   125
    52325221                        });
    52335222
    52345223                        this._viewsByCid = {};
    … …  
    52585247
    52595248                        this.initSortable();
    52605249
    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
    52645252                        if ( this.options.resize ) {
    5265                                 $(window).on( 'resize.attachments', this._resizeCss );
     5253                                $( window ).on( 'resize.attachments', this.setColumns );
    52665254                        }
    52675255
    5268                         // Call this.css() after this view has been rendered in the DOM so
     5256                        // Call this.setColumns() after this view has been rendered in the DOM so
    52695257                        // attachments get proper width applied.
    5270                         _.defer( this.css, this );
     5258                        _.defer( this.setColumns, this );
    52715259                },
    52725260
    52735261                dispose: function() {
    52745262                        this.collection.props.off( null, null, this );
    5275                         $(window).off( 'resize.attachments', this._resizeCss );
     5263                        $( window ).off( 'resize.attachments', this.setColumns );
     5264
    52765265                        /**
    52775266                         * call 'dispose' directly on the parent class
    52785267                         */
    52795268                        media.View.prototype.dispose.apply( this, arguments );
    52805269                },
    52815270
    5282                 css: function() {
    5283                         var $css = $( '#' + this.el.id + '-css' );
    5284 
    5285                         if ( $css.length ) {
    5286                                 $css.remove();
    5287                         }
     5271                setColumns: function() {
     5272                        var prev = this.columns;
    52885273
    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;
     5274                        this.columns = Math.round( this.$el.width() / this.options.idealColumnWidth );
    53015275
    5302                         if ( ! this.$el.is(':visible') ) {
    5303                                 return edge;
     5276                        if ( prev !== this.columns ) {
     5277                                this.$el.attr( 'data-columns', this.columns );
    53045278                        }
    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;
    53115279                },
    53125280
    53135281                initSortable: function() {
    … …  
    54535421                                });
    54545422                        }
    54555423                }
    5456         }, {
    5457                 $head: (function() {
    5458                         var $head;
    5459                         return function() {
    5460                                 return $head = $head || $('head');
    5461                         };
    5462                 }())
    54635424        });
    54645425
    54655426        /**
    … …  
    60035964                                controller: this.controller,
    60045965                                collection: this.collection,
    60055966                                selection:  this.collection,
    6006                                 model:      new Backbone.Model({
    6007                                         edge:   40,
    6008                                         gutter: 5
    6009                                 })
     5967                                model:      new Backbone.Model()
    60105968                        });
    60115969
    60125970                        this.views.set( '.selection-view', this.attachments );

  • src/wp-includes/media-template.php

     
    414414
    415415        <script type="text/html" id="tmpl-attachment">
    416416                <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 ) { #>
    421421                                        <div class="centered">
    422422                                                <img src="{{ data.size.url }}" draggable="false" alt="" />
    423423                                        </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>
    435437                        <# if ( data.buttons.close ) { #>
    436438                                <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
    437439                        <# } #>
    … …  
    822824                </div>
    823825        </script>
    824826
    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 
    854827        <script type="text/html" id="tmpl-image-details">
    855828                <div class="media-embed">
    856829                        <div class="embed-media-settings">