WordPress.org

Make WordPress Core

Ticket #27423: 27423.20.patch

File 27423.20.patch, 12.4 KB (added by azaozz, 6 years ago)
  • src/wp-includes/css/media-views.css

     
    1616.media-frame input,
    1717.media-frame textarea {
    1818        padding: 6px 8px;
    19         line-height: 16px;
    2019}
    2120
    2221.media-frame select,
     
    144143        top: 0;
    145144        right: 0;
    146145        width: 50px;
    147         height: 48px;
     146        height: 50px;
    148147        z-index: 1000;
    149148        color: #777;
    150149        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
     
    626625        box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
    627626}
    628627
     628.media-frame-title .dashicons {
     629        display: none;
     630}
     631
    629632.media-frame-title h1 {
    630633        padding: 0 16px;
    631634        font-size: 22px;
     
    18321835        padding: 0;
    18331836}
    18341837
     1838.image-details .embed-media-settings,
     1839.image-details .embed-media-settings div {
     1840        box-sizing: border-box;
     1841}
     1842
    18351843.image-details .column-settings {
    18361844        background: #f3f3f3;
    18371845        border-right: 1px solid #ddd;
    18381846        min-height: 100%;
    1839         width: 52%;
     1847        width: 55%;
    18401848        position: absolute;
    18411849        top: 0;
    18421850        left: 0;
     
    18491857}
    18501858
    18511859.image-details .column-image {
    1852         width: 48%;
     1860        width: 45%;
    18531861        position: absolute;
    1854         left: 52%;
     1862        left: 55%;
    18551863        top: 0;
    18561864}
    18571865
     
    21712179 * Responsive layout
    21722180 */
    21732181@media only screen and (max-width: 900px) {
     2182
     2183        /* Drop-down menu */
     2184        .media-frame-title,
     2185        .media-frame-router,
     2186        .media-frame-content,
     2187        .media-frame-toolbar {
     2188                left: 0;
     2189        }
     2190
    21742191        .media-frame-menu {
    2175                 width: 139px;
     2192                position: static;
     2193                width: 0;
    21762194        }
    21772195
     2196        .media-menu {
     2197                display: none;
     2198        }
     2199
     2200        .media-menu.visible {
     2201                z-index: 2000;
     2202                display: block;
     2203                position: fixed;
     2204                top: 30px;
     2205                left: 30px;
     2206                right: 30px;
     2207                bottom: 30px;
     2208                width: 250px;
     2209                max-width: 100%;
     2210                overflow: auto;
     2211        }
     2212
    21782213        .media-menu > a {
    2179                 padding: 4px 5px;
     2214                padding: 10px 20px;
     2215                font-size: 16px;
    21802216        }
    21812217
    2182         .media-frame-title,
    2183         .media-frame-router,
    2184         .media-frame-content,
    2185         .media-frame-toolbar {
    2186                 left: 140px;
     2218        .media-frame-title {
     2219                left: 0;
     2220                color: #21759b;
    21872221        }
    21882222
     2223        .media-frame-title .dashicons {
     2224                display: inline-block;
     2225                line-height: 56px;
     2226        }
     2227
     2228        .media-frame-title h1 {
     2229                line-height: 3;
     2230                font-size: 18px;
     2231                float: left;
     2232                cursor: pointer;
     2233        }
     2234        /* End drop-down menu */
     2235/*
    21892236        .media-sidebar {
    21902237                width: 159px;
    21912238                padding: 0 10px 24px;
     
    21962243        .attachments-browser .media-toolbar {
    21972244                right: 180px;
    21982245        }
     2246*/
     2247       
     2248        .media-sidebar .setting {
     2249                margin: 6px 0px;
     2250        }
    21992251
    22002252        .media-sidebar .setting input,
    22012253        .media-sidebar .setting textarea,
     
    22072259        .media-sidebar .setting span,
    22082260        .compat-item label span {
    22092261                text-align: inherit;
    2210                 display: block;
    22112262                min-height: 16px;
    22122263                margin: 0;
    22132264                padding: 8px 2px 0;
    22142265        }
     2266       
     2267        .media-sidebar .setting .value {
     2268                float: none;
     2269                width: auto;
     2270        }
    22152271
    2216         .media-sidebar .setting input,
     2272        .media-sidebar .setting input[type="text"],
     2273        .media-sidebar .setting input[type="password"],
     2274        .media-sidebar .setting input[type="number"],
     2275        .media-sidebar .setting input[type="search"],
     2276        .media-sidebar .setting input[type="email"],
     2277        .media-sidebar .setting input[type="url"],
    22172278        .media-sidebar .setting textarea,
    22182279        .media-sidebar .setting select {
    22192280                width: 98%;
    22202281                max-width: none;
     2282                height: auto;
    22212283        }
    22222284
    22232285        .media-sidebar .setting select.columns {
     
    22302292                padding: 3px 6px;
    22312293        }
    22322294
     2295        .image-details .column-image {
     2296                width: 30%;
     2297                left: 70%;
     2298        }
     2299
     2300        .image-details .column-settings {
     2301                width: 70%;
     2302        }
     2303
    22332304        .image-details .media-modal {
    22342305                left: 30px;
    22352306                right: 30px;
     
    22732344                margin: 12px 10px;
    22742345        }
    22752346
    2276         .media-modal-close {
    2277                 right: 10px;
    2278         }
    2279 
    22802347        /* Text inputs need to be 16px, or they force zooming on iOS */
    22812348        .media-frame input[type="text"],
    22822349        .media-frame input[type="password"],
     
    22922359
    22932360/* Responsive on portrait and landscape */
    22942361@media only screen and (max-width: 640px), screen and (max-height: 400px) {
     2362        /* Full-bleed modal */
     2363        .media-modal,
     2364        .image-details .media-modal,
     2365        .media-menu.visible {
     2366                position: fixed;
     2367                top: 0;
     2368                left: 0;
     2369                right: 0;
     2370                bottom: 0;
     2371        }
    22952372
    2296         /* Media tabs on the top */
    2297         .media-frame-content .media-toolbar .instructions {
     2373        .media-modal-backdrop {
     2374                position: fixed;
     2375        }
     2376
     2377        .media-sidebar {
    22982378                display: none;
    22992379        }
    23002380
    2301         .media-frame-menu {
    2302                 width: auto;
    2303                 bottom: auto;
     2381        .attachments-browser .attachments,
     2382        .attachments-browser .uploader-inline,
     2383        .attachments-browser .media-toolbar {
    23042384                right: 0;
    2305                 height: 60px;
    23062385        }
    23072386
    2308         .media-menu {
    2309                 border-right: none;
    2310                 position: relative;
    2311                 border-bottom: 1px solid #dddddd;
    2312                 overflow: hidden;
    2313                 padding: 10px 0 10px 10px;
    2314         }
    23152387
    2316         .media-menu a {
    2317                 float: left;
    2318                 width: 42%;
    2319                 white-space: nowrap;
    2320                 text-overflow: ellipsis;
    2321                 overflow: hidden;
    2322         }
    23232388
    2324         .media-frame-title {
    2325                 display: none;
    2326         }
    2327 
    23282389        .image-details .media-frame-title {
    23292390                display: block;
    23302391                top: 0;
     
    23312392                font-size: 14px;
    23322393        }
    23332394
     2395        /* Media tabs on the top */
     2396        .media-frame-content .media-toolbar .instructions {
     2397                display: none;
     2398        }
     2399
     2400/*
     2401        .image-details .media-frame-menu-toggle {
     2402                display: none;
     2403        }
     2404
    23342405        .media-frame-toolbar {
    23352406                position: absolute;
    23362407                bottom: 0px;
     
    23482419                overflow: hidden;
    23492420        }
    23502421
     2422        .media-frame .attachments-browser {
     2423                overflow: auto;
     2424                padding-bottom: 0;
     2425        }
     2426
    23512427        .attachments-browser .attachments {
    2352                 top: 42px;
     2428                top: 0;
    23532429        }
    23542430
    23552431        .attachment-details h3 {
     
    23572433        }
    23582434
    23592435        /* Shorten right-side links so they don't overlap the close button */
    2360         .media-menu a:nth-child(2),
     2436/*      .media-menu a:nth-child(2),
    23612437        .media-menu a:last-child {
    23622438                width: 40%;
    23632439        }
     
    23662442                display: none;
    23672443        }
    23682444
    2369         .media-frame-title {
     2445        .image-details .media-frame-title {
    23702446                top: 72px;
    2371                 left: auto;
    2372                 height: auto;
    23732447        }
    23742448
    2375         .media-frame-title h1 {
    2376                 line-height: 3;
    2377                 font-size: 18px;
    2378         }
    2379 
    23802449        .media-frame-router {
    2381                 top: 84px;
    23822450                left: 0;
    23832451        }
    23842452
    23852453        .media-frame-content {
    23862454                left: 0;
    2387                 top: 118px;
     2455                overflow: hidden;
    23882456        }
    23892457
    23902458        .image-details .media-frame.hide-router .media-frame-content {
    2391                 top: 40px;
     2459                top: 56px;
     2460                overflow: auto;
    23922461        }
    23932462
    23942463        .media-frame .attachments-browser {
     
    23952464                padding-bottom: 300px;
    23962465        }
    23972466
    2398         .media-sidebar {
    2399                 border-bottom: 1px solid #dddddd;
    2400         }
    2401 
    24022467        .media-modal {
    24032468                width: auto;
    24042469        }
    24052470
    2406         .media-toolbar-primary, .media-toolbar-secondary {
     2471        .media-toolbar-primary,
     2472        .media-toolbar-secondary {
    24072473                height: auto;
    24082474        }
    24092475
     
    24222488        .attachments-browser .attachments,
    24232489        .attachments-browser .uploader-inline {
    24242490                position: relative;
    2425                 margin-right: 180px;
     2491                margin-right: 0;
    24262492        }
    24272493
    2428         /* Full-bleed modal */
    2429         .media-modal,
    2430         .image-details .media-modal {
    2431                 position: fixed;
    2432                 top: 0;
    2433                 left: 0;
    2434                 right: 0;
    2435                 bottom: 0;
    2436         }
    2437 
    2438         .media-modal-backdrop {
    2439                 position: fixed;
    2440         }
    2441 
    24422494        .attachments-browser .attachment,
    24432495        .attachments-browser .attachment-preview {
    24442496                max-width: 100%;
     
    24452497        }
    24462498
    24472499        .attachments-browser .media-toolbar-primary input.search {
    2448                 max-width: 150px;
     2500                max-width: none;
     2501                width: 100%;
    24492502        }
    24502503
    24512504        .uploader-inline-content {
     
    24582511        }
    24592512
    24602513        /* Image From Link */
    2461         .embed-link-settings,
     2514/*      .embed-link-settings,
    24622515        .embed-media-settings {
    24632516                padding-bottom: 52px;
     2517                box-sizing: border-box;
    24642518        }
    24652519
    24662520        .image-details .column-settings,
     
    24742528
    24752529
    24762530        /* Gallery */
    2477         .media-frame.hide-router .media-frame-content {
     2531/*      .media-frame.hide-router .media-frame-content {
    24782532                top: 73px;
    24792533                border-top: none;
    24802534        }
     
    24822536        .collection-settings h3 {
    24832537                margin-top: 45px;
    24842538        }
    2485 
     2539*/
    24862540}
    24872541
    24882542/* Landscape specific header override */
    24892543@media screen and (max-height: 400px) {
    2490         .media-menu {
     2544/*      .media-menu {
    24912545                padding: 0 0 0 10px;
    24922546        }
    24932547
     
    25222576        }
    25232577
    25242578        /* Prevent unnecessary scrolling on title input */
    2525         .embed-link-settings {
     2579/*      .embed-link-settings {
    25262580                overflow: visible;
    2527         }
     2581        }*/
    25282582}
    25292583
    25302584@media only screen and (max-width: 680px) {
    25312585        .media-frame-content .media-toolbar .search,
    25322586        .media-frame-content .media-toolbar .attachment-filters {
    2533                 max-width: 85px;
     2587                max-width: none;
     2588                width: 100%;
    25342589        }
    25352590}
    25362591
  • src/wp-includes/js/media-views.js

     
    11/* global _wpMediaViewsL10n, confirm, getUserSetting, setUserSetting */
    2 (function($, _){
    3         var media = wp.media, l10n;
     2( function( $, _ ) {
     3        var l10n,
     4                media = wp.media,
     5                isTouchDevice = ( 'ontouchend' in document );
    46
    57        // Link any localized strings.
    68        l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;
     
    18341836                template:  media.template('media-frame'),
    18351837                regions:   ['menu','title','content','toolbar','router'],
    18361838
     1839                events: {
     1840                        'click div.media-frame-title h1': 'toggleMenu'
     1841                },
     1842
    18371843                /**
    18381844                 * @global wp.Uploader
    18391845                 */
     
    18831889                        this.on( 'title:create:default', this.createTitle, this );
    18841890                        this.title.mode('default');
    18851891
     1892                        this.on( 'title:render', function( view ) {
     1893                                view.$el.append( '<span class="dashicons dashicons-arrow-down"></span>' );
     1894                        });
     1895
    18861896                        // Bind default menu.
    18871897                        this.on( 'menu:create:default', this.createMenu, this );
    18881898                },
     
    19181928                                controller: this
    19191929                        });
    19201930                },
     1931
     1932                toggleMenu: function() {
     1933                        this.$el.find( '.media-menu' ).toggleClass( 'visible' );
     1934                },
     1935
    19211936                /**
    19221937                 * @param {Object} toolbar
    19231938                 * @this wp.media.controller.Region
     
    44124427
    44134428                        // When selecting a tab along the left side,
    44144429                        // focus should be transferred into the main panel
    4415                         $('.media-frame-content input').first().focus();
     4430                        if ( ! isTouchDevice ) {
     4431                                $('.media-frame-content input').first().focus();
     4432                        }
    44164433                },
    44174434
    44184435                click: function() {
    44194436                        var state = this.options.state;
     4437
    44204438                        if ( state ) {
    44214439                                this.controller.setState( state );
     4440                                this.views.parent.$el.removeClass( 'visible' ); // TODO: or hide on any click, see below
    44224441                        }
    44234442                },
    44244443                /**
     
    44524471                property:  'state',
    44534472                ItemView:  media.view.MenuItem,
    44544473                region:    'menu',
     4474
     4475                /* TODO: alternatively hide on any click anywhere
     4476                events: {
     4477                        'click': 'click'
     4478                },
     4479
     4480                click: function() {
     4481                        this.$el.removeClass( 'visible' );
     4482                },
     4483                */
     4484
    44554485                /**
    44564486                 * @param {Object} options
    44574487                 * @param {string} id
     
    46154645                tagName:   'li',
    46164646                className: 'attachment',
    46174647                template:  media.template('attachment'),
     4648                _isTouch: false,
    46184649
    46194650                attributes: {
    46204651                        tabIndex: 0,
     
    46234654
    46244655                events: {
    46254656                        'click .js--select-attachment':   'toggleSelectionHandler',
     4657                        'touchend .attachment-preview':   'setTouch',
    46264658                        'change [data-setting]':          'updateSetting',
    46274659                        'change [data-setting] input':    'updateSetting',
    46284660                        'change [data-setting] select':   'updateSetting',
     
    47474779                                this.$bar.width( this.model.get('percent') + '%' );
    47484780                        }
    47494781                },
     4782
     4783                setTouch: function() {
     4784                        this._isTouch = true;
     4785                },
     4786
    47504787                /**
    47514788                 * @param {Object} event
    47524789                 */
     
    47854822                                method = 'toggle';
    47864823                        }
    47874824
     4825                        if ( this._isTouch ) {
     4826                                this._isTouch = false;
     4827                                method = 'add';
     4828                        }
     4829
    47884830                        this.toggleSelection({
    47894831                                method: method
    47904832                        });
     
    48944936                                }
    48954937
    48964938                                return;
     4939                        } else if ( 'add' === method ) {
     4940                                selection.add( model );
     4941                                selection.single( model );
     4942                                return;
    48974943                        }
    48984944
    48994945                        // Fixes bug that loses focus when selecting a featured image
     
    52155261                        this.el.id = _.uniqueId('__attachments-view-');
    52165262
    52175263                        _.defaults( this.options, {
    5218                                 refreshSensitivity: 200,
     5264                                refreshSensitivity: isTouchDevice ? 300 : 200,
    52195265                                refreshThreshold:   3,
    52205266                                AttachmentView:     media.view.Attachment,
    52215267                                sortable:           false,
    52225268                                resize:             true,
    5223                                 idealColumnWidth:   150
     5269                                idealColumnWidth:   $( window ).width() < 640 ? 130 : 150
    52245270                        });
    52255271
    52265272                        this._viewsByCid = {};
     
    52415287                        }, this );
    52425288
    52435289                        this.collection.on( 'reset', this.render, this );
    5244 
     5290// TODO: fix for mobile?
    52455291                        // Throttle the scroll handler and bind this.
    52465292                        this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
    52475293
     
    52845330                initSortable: function() {
    52855331                        var collection = this.collection;
    52865332
    5287                         if ( ! this.options.sortable || ! $.fn.sortable ) {
     5333                        if ( isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) {
    52885334                                return;
    52895335                        }
    52905336
     
    53475393                },
    53485394
    53495395                refreshSortable: function() {
    5350                         if ( ! this.options.sortable || ! $.fn.sortable ) {
     5396                        if ( isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) {
    53515397                                return;
    53525398                        }
    53535399