WordPress.org
Get WordPress

Make WordPress Core

Changeset 29446


Ignore:
Timestamp:
08/08/2014 03:45:55 AM (10 years ago)
Author:
azaozz
Message:

Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423.

Location:
trunk/src/wp-includes
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/css/editor.css

    r29340 r29446  
    177177}
    178178
    179 .mce-path, 
    180 .mce-path-item, 
    181 .mce-path .mce-divider { 
    182     font-size: 12px; 
    183     line-height: 18px; 
    184 } 
     179.mce-path,
     180.mce-path-item,
     181.mce-path .mce-divider {
     182    font-size: 12px;
     183    line-height: 18px;
     184}
    185185
    186186.mce-toolbar .mce-btn,
    … …  
    935935    top: 0;
    936936    right: 0;
    937     margin-top: 5px;
    938     margin-right: 5px;
     937    margin: 5px 5px 0 0;
    939938}
    940939
    … …  
    942941    .mce-toolbar .mce-btn button,
    943942    .qt-fullscreen {
    944         padding: 7px 8px;
     943        padding: 6px 7px;
     944    }
     945
     946    #wp-fullscreen-buttons .mce-btn,
     947    .mce-toolbar .mce-btn-group .mce-btn {
     948        margin: 1px;
    945949    }
    946950
    947951    .qt-fullscreen {
    948         width: 38px;
     952        width: 36px;
    949953        height: 34px;
    950954    }
    951955
     956    .mce-toolbar .mce-btn-group .mce-btn.mce-wp-fullscreen {
     957        margin: 4px 4px 0 0;
     958    }
     959
    952960    .mce-toolbar .mce-colorbutton .mce-preview {
    953         margin-left: -21px;
     961        left: 8px;
     962        bottom: 6px;
    954963    }
    955964
    … …  
    958967    }
    959968
    960     div.mce-toolbar-grp,
    961     .quicktags-toolbar {
    962         padding-right: 46px;
     969    .has-dfw div.mce-toolbar-grp .mce-toolbar.mce-first,
     970    .has-dfw .quicktags-toolbar {
     971        padding-right: 40px;
    963972    }
    964973}

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

    r29441 r29446  
    1717.media-frame textarea {
    1818    padding: 6px 8px;
    19     line-height: 16px;
    2019}
    2120
    … …  
    145144    right: 0;
    146145    width: 50px;
    147     height: 48px;
     146    height: 50px;
    148147    z-index: 1000;
    149148    color: #777;
    … …  
    632631}
    633632
     633.media-frame-title .dashicons {
     634    display: none;
     635}
     636
    634637.media-frame-title h1 {
    635638    padding: 0 16px;
    … …  
    695698    margin-top: 11px;
    696699    padding: 4px;
    697     line-height: 18px;
    698700    font-size: 13px;
    699701    color: #464646;
    … …  
    731733    -ms-user-select: none;
    732734    user-select: none;
    733     width: 20%;
     735    width: 25%;
    734736    -webkit-box-sizing: border-box;
    735737    -moz-box-sizing: border-box;
    … …  
    17911793}
    17921794
     1795.image-details .embed-media-settings,
     1796.image-details .embed-media-settings div {
     1797    box-sizing: border-box;
     1798}
     1799
    17931800.image-details .column-settings {
    17941801    background: #f3f3f3;
    17951802    border-right: 1px solid #ddd;
    17961803    min-height: 100%;
    1797     width: 52%;
     1804    width: 55%;
    17981805    position: absolute;
    17991806    top: 0;
    … …  
    18081815
    18091816.image-details .column-image {
    1810     width: 48%;
    1811     position: absolute;
    1812     left: 52%;
     1817    width: 45%;
     1818    position: absolute;
     1819    left: 55%;
    18131820    top: 0;
    18141821}
    … …  
    21262133}
    21272134
    2128 @media only screen and (max-width: 960px) {
     2135@media only screen and (max-width: 940px) {
    21292136    .media-frame-content .media-toolbar-primary .search,
    21302137    .media-frame-content .media-toolbar-secondary .attachment-filters {
    2131         max-width: 120px;
     2138        max-width: 134px;
    21322139    }
    21332140}
    … …  
    21372144 */
    21382145@media only screen and (max-width: 900px) {
    2139     .media-frame-menu {
    2140         width: 139px;
    2141     }
    2142 
    2143     .media-menu > a {
    2144         padding: 4px 5px;
    2145     }
    2146 
     2146
     2147    /* Drop-down menu */
    21472148    .media-frame-title,
    21482149    .media-frame-router,
    21492150    .media-frame-content,
    21502151    .media-frame-toolbar {
    2151         left: 140px;
    2152     }
     2152        left: 0;
     2153    }
     2154
     2155    .media-frame-menu {
     2156        position: static;
     2157        width: 0;
     2158    }
     2159
     2160    .media-menu {
     2161        display: none;
     2162    }
     2163
     2164    .media-menu.visible {
     2165        z-index: 2000;
     2166        display: block;
     2167        position: fixed;
     2168        top: 30px;
     2169        left: 30px;
     2170        right: 30px;
     2171        bottom: 30px;
     2172        width: 250px;
     2173        max-width: 100%;
     2174        overflow: auto;
     2175    }
     2176
     2177    .media-menu > a {
     2178        padding: 10px 20px;
     2179        font-size: 16px;
     2180    }
     2181
     2182    .media-frame-title {
     2183        left: 0;
     2184        color: #21759b;
     2185    }
     2186
     2187    .media-frame-title .dashicons {
     2188        display: inline-block;
     2189        line-height: 56px;
     2190    }
     2191
     2192    .media-frame-title h1 {
     2193        line-height: 3;
     2194        font-size: 18px;
     2195        float: left;
     2196        cursor: pointer;
     2197    }
     2198    /* End drop-down menu */
    21532199
    21542200    .media-sidebar {
    2155         width: 159px;
    2156         padding: 0 10px 24px;
     2201        width: 230px;
    21572202    }
    21582203
    … …  
    21602205    .attachments-browser .uploader-inline,
    21612206    .attachments-browser .media-toolbar {
    2162         right: 180px;
     2207        right: 262px;
     2208    }
     2209
     2210    .media-sidebar .setting {
     2211        margin: 6px 0px;
    21632212    }
    21642213
    … …  
    21732222    .compat-item label span {
    21742223        text-align: inherit;
    2175         display: block;
    21762224        min-height: 16px;
    21772225        margin: 0;
    21782226        padding: 8px 2px 0;
     2227    }
     2228
     2229    .media-sidebar .setting .value {
     2230        float: none;
     2231        width: auto;
    21792232    }
    21802233
    … …  
    21902243        width: 98%;
    21912244        max-width: none;
     2245        height: auto;
    21922246    }
    21932247
    … …  
    22002254    .media-frame .search {
    22012255        padding: 3px 6px;
     2256    }
     2257
     2258    .image-details .column-image {
     2259        width: 30%;
     2260        left: 70%;
     2261    }
     2262
     2263    .image-details .column-settings {
     2264        width: 70%;
    22022265    }
    22032266
    … …  
    22452308    }
    22462309
    2247     .media-modal-close {
    2248         right: 10px;
     2310    .media-modal .attachments-browser .media-toolbar-primary,
     2311    .media-modal .attachments-browser .media-toolbar-secondary {
     2312        width: 50%;
     2313    }
     2314
     2315    .media-modal .attachments-browser .media-toolbar .search {
     2316        max-width: 100%;
     2317        height: auto;
     2318        float: right;
     2319    }
     2320
     2321    .media-modal .attachments-browser .media-toolbar .attachment-filters {
     2322        margin: 11px 0 0;
     2323        height: auto;
     2324        max-width: 65%;
     2325        max-width: calc(100% - 38px);
     2326    }
     2327
     2328    .media-modal .attachments-browser .media-toolbar .spinner {
     2329        margin: 14px 8px 0;
    22492330    }
    22502331
    … …  
    22642345/* Responsive on portrait and landscape */
    22652346@media only screen and (max-width: 640px), screen and (max-height: 400px) {
    2266 
    2267     /* Media tabs on the top */
    2268     .media-frame-content .media-toolbar .instructions {
    2269         display: none;
    2270     }
    2271 
    2272     .media-frame-menu {
    2273         width: auto;
    2274         bottom: auto;
    2275         right: 0;
    2276         height: 60px;
    2277     }
    2278 
    2279     .media-menu {
    2280         border-right: none;
    2281         position: relative;
    2282         border-bottom: 1px solid #dddddd;
    2283         overflow: hidden;
    2284         padding: 10px 0 10px 10px;
    2285     }
    2286 
    2287     .media-menu a {
    2288         float: left;
    2289         width: 42%;
    2290         white-space: nowrap;
    2291         text-overflow: ellipsis;
    2292         overflow: hidden;
    2293     }
    2294 
    2295     .media-frame-title {
    2296         display: none;
    2297     }
    2298 
    2299     .image-details .media-frame-title {
    2300         display: block;
    2301         top: 0;
    2302         font-size: 14px;
    2303     }
    2304 
    2305     .media-frame-toolbar {
    2306         position: absolute;
    2307         bottom: 0px;
    2308         left: 0;
    2309         right: 0;
    2310         background: #FFF;
    2311         border-top: 1px solid #DEDEDE;
    2312     }
    2313 
    2314     .media-toolbar {
    2315         position: relative;
    2316     }
    2317 
    2318     .media-frame {
    2319         overflow: hidden;
    2320     }
    2321 
    2322     .attachments-browser .attachments {
    2323         top: 42px;
    2324     }
    2325 
    2326     .attachment-details h3 {
    2327         margin-top: 45px;
    2328     }
    2329 
    2330     /* Shorten right-side links so they don't overlap the close button */
    2331     .media-menu a:nth-child(2),
    2332     .media-menu a:last-child {
    2333         width: 40%;
    2334     }
    2335 
    2336     .media-menu .separator {
    2337         display: none;
    2338     }
    2339 
    2340     .media-frame-title {
    2341         top: 72px;
    2342         left: auto;
    2343         height: auto;
    2344     }
    2345 
    2346     .media-frame-title h1 {
    2347         line-height: 3;
    2348         font-size: 18px;
    2349     }
    2350 
    2351     .media-frame-router {
    2352         top: 84px;
    2353         left: 0;
    2354     }
    2355 
    2356     .media-frame-content {
    2357         left: 0;
    2358         top: 118px;
    2359     }
    2360 
    2361     .image-details .media-frame.hide-router .media-frame-content {
    2362         top: 40px;
    2363     }
    2364 
    2365     .media-frame .attachments-browser {
    2366         padding-bottom: 300px;
    2367     }
    2368 
    2369     .media-sidebar {
    2370         border-bottom: 1px solid #dddddd;
    2371     }
    2372 
    2373     .media-modal {
    2374         width: auto;
    2375     }
    2376 
    2377     .media-toolbar-primary, .media-toolbar-secondary {
    2378         height: auto;
    2379     }
    2380 
    2381     .uploader-inline-content {
    2382         top: auto;
    2383     }
    2384 
    2385     .uploader-inline-content .upload-ui {
    2386         margin: 1em 0;
    2387     }
    2388 
    2389     .uploader-inline-content .post-upload-ui {
    2390         margin-bottom: 1em;
    2391     }
    2392 
    2393     .attachments-browser .attachments,
    2394     .attachments-browser .uploader-inline {
    2395         position: relative;
    2396         margin-right: 180px;
    2397     }
    2398 
    23992347    /* Full-bleed modal */
    24002348    .media-modal,
    2401     .image-details .media-modal {
     2349    .image-details .media-modal,
     2350    .media-menu.visible {
    24022351        position: fixed;
    24032352        top: 0;
    … …  
    24112360    }
    24122361
    2413     .attachments-browser .attachment,
    2414     .attachments-browser .attachment-preview {
    2415         max-width: 100%;
    2416     }
    2417 
    2418     .attachments-browser .media-toolbar-primary input.search {
    2419         max-width: 150px;
    2420     }
    2421 
    2422     .uploader-inline-content {
    2423         position: relative;
    2424     }
    2425 
    2426     /* Image From Link */
    2427     .embed-link-settings,
    2428     .embed-media-settings {
    2429         padding-bottom: 52px;
    2430     }
    2431 
    2432     .image-details .column-settings,
    2433     .image-details .column-image {
    2434         position: relative;
    2435         padding: 10px 0 20px 0;
    2436         left: 0;
    2437         width: 100%;
    2438         min-height: inherit;
    2439     }
    2440 
    2441 
    2442     /* Gallery */
    2443     .media-frame.hide-router .media-frame-content {
    2444         top: 73px;
    2445         border-top: none;
    2446     }
    2447 
    2448     .collection-settings h3 {
    2449         margin-top: 45px;
    2450     }
    2451 
     2362    .media-sidebar {
     2363        display: none;
     2364    }
     2365
     2366    .attachments-browser .attachments,
     2367    .attachments-browser .uploader-inline,
     2368    .attachments-browser .media-toolbar {
     2369        right: 0;
     2370    }
     2371
     2372
     2373
     2374    .image-details .media-frame-title {
     2375        display: block;
     2376        top: 0;
     2377        font-size: 14px;
     2378    }
     2379
     2380    /* Media tabs on the top */
     2381    .media-frame-content .media-toolbar .instructions {
     2382        display: none;
     2383    }
    24522384}
    24532385
    … …  
    24552387@media screen and (max-height: 400px) {
    24562388    .media-menu {
    2457         padding: 0 0 0 10px;
    2458     }
    2459 
    2460     .media-menu a {
    2461         float: left;
    2462         width: 21%;
    2463         white-space: nowrap;
    2464         text-overflow: ellipsis;
    2465         overflow: hidden;
    2466         padding: 10px inherit;
    2467     }
    2468 
    2469     .media-menu a:nth-child(2),
    2470     .media-menu a:last-child {
    2471         width: 21%;
    2472     }
    2473 
    2474     .media-modal-close {
    2475         top: 2px;
     2389        padding: 0;
    24762390    }
    24772391
    … …  
    24852399
    24862400    .attachments-browser .attachments {
    2487         top: 2px;
     2401        top: 40px;
    24882402    }
    24892403
    … …  
    24942408}
    24952409
    2496 @media only screen and (max-width: 680px) {
     2410@media only screen and (max-width: 480px) {
    24972411    .media-frame-content .media-toolbar .search,
    24982412    .media-frame-content .media-toolbar .attachment-filters {
    2499         max-width: 85px;
     2413        max-width: 90px;
    25002414    }
    25012415}
    … …  
    28852799        position: static;
    28862800        width: 100%;
    2887         max-width: none !important;
     2801        max-width: 280px;
    28882802    }
    28892803}

  • trunk/src/wp-includes/js/media-editor.js

    r29369 r29446  
    10491049         */
    10501050        open: function( id, options ) {
    1051             var workflow, focusTrap;
     1051            var workflow, focusTrap, scrollTop;
    10521052
    10531053            if ( 'ontouchend' in document ) {
    10541054                // Close the onscreen keyboard
    10551055                if ( ! focusTrap ) {
    1056                     focusTrap = $( '<input type="text" />' );
    1057                 }
     1056                    focusTrap = $( '<input type="text" style="width: 1px; height: 1px;" />' );
     1057                }
     1058
     1059                // Keep the scroll position
     1060                scrollTop = $( window ).scrollTop();
    10581061
    10591062                $( document.body ).append( focusTrap );
    10601063                focusTrap.focus().blur().remove();
     1064                $( window ).scrollTop( scrollTop );
    10611065            }
    10621066

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

    r29439 r29446  
    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.
    … …  
    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
    … …  
    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 );
    … …  
    19191929            });
    19201930        },
     1931
     1932        toggleMenu: function() {
     1933            this.$el.find( '.media-menu' ).toggleClass( 'visible' );
     1934        },
     1935
    19211936        /**
    19221937         * @param {Object} toolbar
    … …  
    25562571
    25572572            this.content.set( view );
    2558             view.url.focus();
     2573
     2574            if ( ! isTouchDevice ) {
     2575                view.url.focus();
     2576            }
    25592577        },
    25602578
    … …  
    44134431            // When selecting a tab along the left side,
    44144432            // focus should be transferred into the main panel
    4415             $('.media-frame-content input').first().focus();
     4433            if ( ! isTouchDevice ) {
     4434                $('.media-frame-content input').first().focus();
     4435            }
    44164436        },
    44174437
    44184438        click: function() {
    44194439            var state = this.options.state;
     4440
    44204441            if ( state ) {
    44214442                this.controller.setState( state );
     4443                this.views.parent.$el.removeClass( 'visible' ); // TODO: or hide on any click, see below
    44224444            }
    44234445        },
    … …  
    44534475        ItemView:  media.view.MenuItem,
    44544476        region:    'menu',
     4477
     4478        /* TODO: alternatively hide on any click anywhere
     4479        events: {
     4480            'click': 'click'
     4481        },
     4482
     4483        click: function() {
     4484            this.$el.removeClass( 'visible' );
     4485        },
     4486        */
     4487
    44554488        /**
    44564489         * @param {Object} options
    … …  
    46164649        className: 'attachment',
    46174650        template:  media.template('attachment'),
     4651        _isTouch: false,
    46184652
    46194653        attributes: {
    … …  
    46244658        events: {
    46254659            'click .js--select-attachment':   'toggleSelectionHandler',
     4660            'touchend .attachment-preview':   'setTouch',
    46264661            'change [data-setting]':          'updateSetting',
    46274662            'change [data-setting] input':    'updateSetting',
    … …  
    47484783            }
    47494784        },
     4785
     4786        setTouch: function() {
     4787            this._isTouch = true;
     4788        },
     4789
    47504790        /**
    47514791         * @param {Object} event
    … …  
    47844824            } else if ( event.ctrlKey || event.metaKey ) {
    47854825                method = 'toggle';
     4826            }
     4827
     4828            if ( this._isTouch ) {
     4829                this._isTouch = false;
     4830                method = 'add';
    47864831            }
    47874832
    … …  
    48794924
    48804925                // When selecting attachments, focus should be transferred to the right details panel
    4881                 $('.attachment-details input').first().focus();
     4926                if ( ! isTouchDevice ) {
     4927                    $('.attachment-details input').first().focus();
     4928                }
    48824929
    48834930                return;
    … …  
    48894936                selection.single( model );
    48904937
    4891                 if ( this.selected() ) {
     4938                if ( ! isTouchDevice && this.selected() ) {
    48924939                    // When selecting an attachment, focus should be transferred to the right details panel
    48934940                    $('.attachment-details input').first().focus();
    48944941                }
    48954942
     4943                return;
     4944            } else if ( 'add' === method ) {
     4945                selection.add( model );
     4946                selection.single( model );
    48964947                return;
    48974948            }
    … …  
    49495000
    49505001            // When selecting an attachment, focus should be transferred to the right details panel
    4951             $('.attachment-details input').first().focus();
     5002            if ( ! isTouchDevice ) {
     5003                $('.attachment-details input').first().focus();
     5004            }
    49525005        },
    49535006        /**
    … …  
    52165269
    52175270            _.defaults( this.options, {
    5218                 refreshSensitivity: 200,
     5271                refreshSensitivity: isTouchDevice ? 300 : 200,
    52195272                refreshThreshold:   3,
    52205273                AttachmentView:     media.view.Attachment,
    52215274                sortable:           false,
    52225275                resize:             true,
    5223                 idealColumnWidth:   150
     5276                idealColumnWidth:   $( window ).width() < 640 ? 135 : 150
    52245277            });
    52255278
    … …  
    52545307
    52555308            if ( this.options.resize ) {
    5256                 $( window ).on( 'resize.attachments', this.setColumns );
     5309                $( window ).on( 'resize.media-modal-columns', this.setColumns );
     5310                this.controller.on( 'open', this.setColumns );
    52575311            }
    52585312
    … …  
    52645318        dispose: function() {
    52655319            this.collection.props.off( null, null, this );
    5266             $( window ).off( 'resize.attachments', this.setColumns );
     5320            $( window ).off( 'resize.media-modal-columns' );
    52675321
    52685322            /**
    … …  
    52735327
    52745328        setColumns: function() {
    5275             var prev = this.columns;
    5276 
    5277             this.columns = Math.round( this.$el.width() / this.options.idealColumnWidth );
    5278 
    5279             if ( prev !== this.columns ) {
    5280                 this.$el.attr( 'data-columns', this.columns );
     5329            var prev = this.columns,
     5330                width = this.$el.width();
     5331
     5332            if ( width ) {
     5333                this.columns = Math.round( width / this.options.idealColumnWidth ) || 1;
     5334
     5335                if ( ! prev || prev !== this.columns ) {
     5336                    this.$el.attr( 'data-columns', this.columns );
     5337                }
    52815338            }
    52825339        },
    … …  
    52855342            var collection = this.collection;
    52865343
    5287             if ( ! this.options.sortable || ! $.fn.sortable ) {
     5344            if ( isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) {
    52885345                return;
    52895346            }
    … …  
    53485405
    53495406        refreshSortable: function() {
    5350             if ( ! this.options.sortable || ! $.fn.sortable ) {
     5407            if ( isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) {
    53515408                return;
    53525409            }
    … …  
    62746331
    62756332            // If the input is visible, focus and select its contents.
    6276             if ( $input.is(':visible') ) {
     6333            if ( ! isTouchDevice && $input.is(':visible') ) {
    62776334                $input.focus()[0].select();
    62786335            }
    … …  
    66346691
    66356692        ready: function() {
    6636             this.focus();
     6693            if ( ! isTouchDevice ) {
     6694                this.focus();
     6695            }
    66376696        },
    66386697
Note: See TracChangeset for help on using the changeset viewer.