WordPress.org

Make WordPress Core

Ticket #27423: 27423.16.patch

File 27423.16.patch, 14.9 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-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%;
     724        box-sizing: border-box;
    722725}
    723726
    724727.attachment:focus {
     728        outline: none;
     729}
     730
     731.attachment:focus .thumbnail {
    725732        -webkit-box-shadow:
    726733                0 0 0 1px #5b9dd9,
    727734                0 0 2px 2px #5b9dd9;
     
    728735        box-shadow:
    729736                0 0 0 1px #5b9dd9,
    730737                0 0 2px 2px #5b9dd9;
    731         outline: none;
    732738}
    733739
    734 .selected.attachment {
     740.selected.attachment .thumbnail {
    735741        -webkit-box-shadow:
    736742                0 0 0 1px #fff,
    737743                0 0 0 3px #ccc;
     
    740746                0 0 0 3px #ccc;
    741747}
    742748
    743 .selected.attachment:focus {
     749.selected.attachment:focus .thumbnail {
    744750        -webkit-box-shadow:
    745751                0 0 0 1px #fff,
    746752                0 0 0 5px #1e8cbe;
     
    751757
    752758.attachment-preview {
    753759        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;
    764760}
    765761
     762.attachment-preview:before {
     763        content: '';
     764        display: block;
     765        padding-top: 100%;
     766}
     767
    766768.attachment .icon {
    767769        margin: 0 auto;
    768770        overflow: hidden;
    769         padding-top: 20%;
    770771}
    771772
    772773.attachment .thumbnail {
    773         display: block;
     774        overflow: hidden;
    774775        position: absolute;
    775776        top: 0;
     777        right: 0;
     778        bottom: 0;
    776779        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;
    781787}
    782788
    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%;
    789791}
    790792
    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%;
    800795}
    801796
    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 {
    808798        content: '';
    809799        display: block;
    810800        position: absolute;
     
    848838        bottom: 0;
    849839        overflow: hidden;
    850840        max-height: 100%;
    851 
    852841        word-wrap: break-word;
    853842        text-align: center;
    854843        font-weight: bold;
     
    861850        padding: 5px 10px;
    862851}
    863852
    864 .attachment-preview .thumbnail {
    865         width: 199px;
    866         height: 199px;
    867 }
    868 
    869853.attachment .thumbnail img {
    870854        position: absolute;
    871855}
     
    907891        width: 24px;
    908892        position: absolute;
    909893        z-index: 10;
    910         top: -6px;
    911         right: -6px;
     894        top: 0;
     895        right: 0;
    912896        outline: none;
    913897        background: #eee;
    914898        -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
     
    930914        display: block;
    931915}
    932916
    933 .attachment.details,
    934 .media-frame.mode-grid .selected.attachment {
     917.attachment.details .thumbnail,
     918.media-frame.mode-grid .selected.attachment .thumbnail {
    935919        -webkit-box-shadow: 0 0 0 1px #fff,
    936920                                0 0 0 5px #1e8cbe;
    937921        box-shadow: 0 0 0 1px #fff,
     
    971955        position: relative;
    972956        display: block;
    973957        width: 100%;
    974         margin: -1px 0 0;
     958        margin: 0;
    975959        padding: 8px;
    976960        font-size: 12px;
    977961        -webkit-border-radius: 0;
     
    10841068        background: #1e8cbe;
    10851069        -webkit-border-radius: 10px;
    10861070        border-radius: 10px;
    1087         -webkit-transition: width 300ms;
    1088         transition: width 300ms;
     1071        -webkit-transition:         width 300ms;
     1072        transition:         width 300ms;
    10891073}
    10901074
    10911075.media-uploader-status .media-progress-bar {
     
    13811365.media-selection .attachments {
    13821366        display: inline-block;
    13831367        height: 48px;
    1384         margin-top: 5px;
     1368        margin: 6px;
     1369        padding: 0;
    13851370        overflow: hidden;
    13861371        vertical-align: top;
    13871372}
    13881373
     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
    13891385.media-selection .attachment .icon {
    13901386        width: 50%;
    13911387}
    13921388
    1393 .attachment.selection.selected {
     1389.attachment.selection.selected .thumbnail {
    13941390        -webkit-box-shadow: none;
    13951391        box-shadow: none;
    13961392}
    13971393
    1398 .attachment.selection.selected:focus {
     1394.attachment.selection.selected:focus .thumbnail {
    13991395        -webkit-box-shadow:
    14001396                0 0 0 1px #5b9dd9,
    14011397                0 0 2px 2px #5b9dd9;
     
    14051401        outline: none;
    14061402}
    14071403
    1408 .attachment.selection.details {
     1404.attachment.selection.details .thumbnail {
    14091405        -webkit-box-shadow:
    14101406                0 0 0 1px #fff,
    14111407                0 0 0 4px #1e8cbe;
     
    14141410                0 0 0 4px #1e8cbe;
    14151411}
    14161412
    1417 .media-selection .attachment.selection.details {
     1413.media-selection .attachment.selection.details .thumbnail {
    14181414        -webkit-box-shadow:
    14191415                0 0 0 1px #fff,
    14201416                0 0 0 3px #1e8cbe;
     
    29142910                max-width: none !important;
    29152911        }
    29162912}
     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

     
    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' );
     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>
    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&hellip;'); ?>" {{ 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&hellip;'); ?>"
     450                                                <# } else if ( 'audio' === data.type ) { #>
     451                                                        placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
     452                                                <# } else { #>
     453                                                        placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
     454                                                <# } #> {{ maybeReadOnly }} />
     455                                <# }
     456                        } #>
    438457                </div>
    439458                <# if ( data.buttons.check ) { #>
    440459                        <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
    441460                <# } #>
    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&hellip;'); ?>" {{ 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&hellip;'); ?>"
    452                                         <# } else if ( 'audio' === data.type ) { #>
    453                                                 placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
    454                                         <# } else { #>
    455                                                 placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
    456                                         <# } #> {{ maybeReadOnly }} />
    457                         <# }
    458                 } #>
    459461        </script>
    460462
    461463        <script type="text/html" id="tmpl-attachment-details">
     
    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">