WordPress.org

Make WordPress Core

Ticket #27423: 27423.17.patch

File 27423.17.patch, 12.8 KB (added by azaozz, 6 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
     
    710710.attachment {
    711711        position: relative;
    712712        float: left;
    713         padding: 0;
    714         margin: 0 10px 20px;
     713        padding: 8px;
     714        margin: 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%;
     724        box-sizing: border-box;
    722725}
    723726
    724727.attachment:focus {
    725728        -webkit-box-shadow:
    726                 0 0 0 1px #5b9dd9,
    727                 0 0 2px 2px #5b9dd9;
     729                inset 0 0 0 5px #fff,
     730                inset 0 0 1px 7px #5b9dd9;
    728731        box-shadow:
    729                 0 0 0 1px #5b9dd9,
    730                 0 0 2px 2px #5b9dd9;
     732                inset 0 0 0 5px #fff,
     733                inset 0 0 1px 7px #5b9dd9;
    731734        outline: none;
    732735}
    733736
    734737.selected.attachment {
    735738        -webkit-box-shadow:
    736                 0 0 0 1px #fff,
    737                 0 0 0 3px #ccc;
     739                inset 0 0 0 5px #fff,
     740                inset 0 0 0 7px #ccc;
    738741        box-shadow:
    739                 0 0 0 1px #fff,
    740                 0 0 0 3px #ccc;
     742                inset 0 0 0 5px #fff,
     743                inset 0 0 0 7px #ccc;
    741744}
    742745
    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;
    750 }
    751 
    752746.attachment-preview {
    753747        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;
    764748}
    765749
     750.attachment-preview:before {
     751        content: '';
     752        display: block;
     753        padding-top: 100%;
     754}
     755
    766756.attachment .icon {
    767757        margin: 0 auto;
    768758        overflow: hidden;
    769         padding-top: 20%;
    770759}
    771760
    772761.attachment .thumbnail {
    773         display: block;
     762        overflow: hidden;
    774763        position: absolute;
    775764        top: 0;
     765        right: 0;
     766        bottom: 0;
    776767        left: 0;
    777         margin: 0 auto;
    778         overflow: hidden;
    779         max-width: 100%;
    780         max-height: 100%;
    781768}
    782769
    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%;
     770.attachment .portrait img {
     771        max-width: 100%;
    789772}
    790773
    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;
     774.attachment .landscape img {
     775        max-height: 100%;
    800776}
    801777
    802 .attachment-preview.type-audio .filename,
    803 .attachment-preview.type-video .filename {
    804         z-index: 3;
    805 }
    806 
    807 .attachment-preview .thumbnail:after {
     778.attachment .thumbnail:after {
    808779        content: '';
    809780        display: block;
    810781        position: absolute;
     
    848819        bottom: 0;
    849820        overflow: hidden;
    850821        max-height: 100%;
    851 
    852822        word-wrap: break-word;
    853823        text-align: center;
    854824        font-weight: bold;
     
    861831        padding: 5px 10px;
    862832}
    863833
    864 .attachment-preview .thumbnail {
    865         width: 199px;
    866         height: 199px;
    867 }
    868 
    869834.attachment .thumbnail img {
    870835        position: absolute;
    871836}
     
    907872        width: 24px;
    908873        position: absolute;
    909874        z-index: 10;
    910         top: -6px;
    911         right: -6px;
     875        top: 0;
     876        right: 0;
    912877        outline: none;
    913878        background: #eee;
    914879        -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
     
    930895        display: block;
    931896}
    932897
     898.selected.attachment:focus,
    933899.attachment.details,
    934900.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;
     901        -webkit-box-shadow:
     902                inset 0 0 0 3px #fff,
     903                inset 0 0 0 7px #1e8cbe;
     904        box-shadow:
     905                inset 0 0 0 3px #fff,
     906                inset 0 0 0 7px #1e8cbe;
    939907}
    940908
    941909.attachment.details .check,
     
    942910.attachment.selected .check:focus,
    943911.media-frame.mode-grid .attachment.selected .check {
    944912        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;
     913        -webkit-box-shadow:
     914                0 0 0 1px #fff,
     915                0 0 0 2px #1e8cbe;
     916        box-shadow:
     917                0 0 0 1px #fff,
     918                0 0 0 2px #1e8cbe;
    949919}
    950920
    951921.media-frame.mode-grid .attachment .check {
     
    971941        position: relative;
    972942        display: block;
    973943        width: 100%;
    974         margin: -1px 0 0;
     944        margin: 0;
    975945        padding: 8px;
    976946        font-size: 12px;
    977947        -webkit-border-radius: 0;
     
    13811351.media-selection .attachments {
    13821352        display: inline-block;
    13831353        height: 48px;
    1384         margin-top: 5px;
     1354        margin: 6px;
     1355        padding: 0;
    13851356        overflow: hidden;
    13861357        vertical-align: top;
    13871358}
    13881359
     1360.media-selection .attachment {
     1361        width: 48px;
     1362        padding: 0;
     1363        margin: 0;
     1364        box-shadow: none;
     1365}
     1366
     1367.media-selection .attachment .thumbnail {
     1368        top: 4px;
     1369        right: 4px;
     1370        bottom: 4px;
     1371        left: 4px;
     1372}
     1373
    13891374.media-selection .attachment .icon {
    13901375        width: 50%;
    13911376}
    1392 
    1393 .attachment.selection.selected {
     1377/*
     1378.attachment.selection.selected .thumbnail {
    13941379        -webkit-box-shadow: none;
    13951380        box-shadow: none;
    13961381}
     
    14131398                0 0 0 1px #fff,
    14141399                0 0 0 4px #1e8cbe;
    14151400}
    1416 
    1417 .media-selection .attachment.selection.details {
     1401*/
     1402.media-selection .attachment.selection.details .thumbnail {
    14181403        -webkit-box-shadow:
    14191404                0 0 0 1px #fff,
    14201405                0 0 0 3px #1e8cbe;
     
    29142899                max-width: none !important;
    29152900        }
    29162901}
     2902
     2903.attachments[data-columns="1"] .attachment {
     2904        width: 100%;
     2905}
     2906
     2907.attachments[data-columns="2"] .attachment {
     2908        width: 50%;
     2909}
     2910
     2911.attachments[data-columns="3"] .attachment {
     2912        width: 33.3%;
     2913}
     2914
     2915.attachments[data-columns="4"] .attachment {
     2916        width: 25%;
     2917}
     2918
     2919.attachments[data-columns="5"] .attachment {
     2920        width: 20%;
     2921}
     2922
     2923.attachments[data-columns="6"] .attachment {
     2924        width: 16.6%;
     2925}
     2926
     2927.attachments[data-columns="7"] .attachment {
     2928        width: 14.2%;
     2929}
     2930
     2931.attachments[data-columns="8"] .attachment {
     2932        width: 12.5%;
     2933}
     2934
     2935.attachments[data-columns="9"] .attachment {
     2936        width: 11.1%;
     2937}
     2938
     2939.attachments[data-columns="10"] .attachment {
     2940        width: 10%;
     2941}
     2942
     2943.attachments[data-columns="11"] .attachment {
     2944        width: 9%;
     2945}
     2946
     2947.attachments[data-columns="12"] .attachment {
     2948        width: 8.3%;
     2949}
  • 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:   160
    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' );
     5271                setColumns: function() {
     5272                        var prev = this.columns;
    52845273
    5285                         if ( $css.length ) {
    5286                                 $css.remove();
    5287                         }
     5274                        this.columns = Math.round( this.$el.width() / this.options.idealColumnWidth );
    52885275
    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 );
    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">