WordPress.org

Make WordPress Core

Ticket #27423: 27423.10.patch

File 27423.10.patch, 21.8 KB (added by celloexpressions, 6 years ago)

Re-style the edit-selection mode to work better with touch.

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

     
    8989        display: none;
    9090}
    9191
     92body.in-modal {
     93        overflow: hidden;
     94}
     95
    9296/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
    9397.ui-sortable,
    9498.ui-draggable {
     
    529533        z-index: 150;
    530534}
    531535
     536.media-frame .media-frame-menu-toggle {
     537        position: absolute;
     538        top: 0;
     539        left: 0;
     540        z-index: 200;
     541        display: none;
     542        text-decoration: none;
     543        font-size: 16px;
     544        padding: 16px;
     545}
     546
     547.media-frame .media-frame-menu-toggle:hover {
     548        position: absolute;
     549}
     550
    532551.media-frame-title {
    533552        position: absolute;
    534553        top: 0;
     
    683702 */
    684703.attachments {
    685704        margin: 0;
    686         padding-right: 16px;
     705        padding: 8px;
    687706        -webkit-overflow-scrolling: touch;
    688707}
    689708
     
    705724}
    706725
    707726.attachment:focus {
     727        outline: none;
     728}
     729
     730.attachment:focus .attachment-preview {
    708731        -webkit-box-shadow:
    709732                0 0 0 1px #5b9dd9,
    710733                0 0 2px 2px #5b9dd9;
     
    711734        box-shadow:
    712735                0 0 0 1px #5b9dd9,
    713736                0 0 2px 2px #5b9dd9;
    714         outline: none;
    715737}
    716738
    717 .selected.attachment {
     739.selected.attachment .attachment-preview {
    718740        -webkit-box-shadow:
    719741                0 0 0 1px #fff,
    720742                0 0 0 3px #ccc;
     
    725747
    726748.attachment-preview {
    727749        position: relative;
    728         width: 199px;
    729         height: 199px;
    730750        -webkit-box-shadow:
    731751                inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
    732752                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
     
    904924        display: block;
    905925}
    906926
    907 .attachment.details,
     927.attachment.details .attachment-preview,
    908928.media-grid-view .selected.attachment {
    909929        -webkit-box-shadow: 0 0 0 1px #fff,
    910930                                0 0 0 5px #1e8cbe;
     
    14561476.media-selection .attachments {
    14571477        display: inline-block;
    14581478        height: 48px;
    1459         margin-top: 5px;
    14601479        overflow: hidden;
    14611480        vertical-align: top;
    14621481}
     
    15251544        margin-top: 14px;
    15261545}
    15271546
    1528 /**
    1529  * Attachment Details
    1530  */
    1531 .attachment-details {
    1532         position: relative;
    1533         overflow: auto;
    1534 }
    1535 
    1536 .attachment-details .settings-save-status {
     1547.media-sidebar .settings-save-status {
     1548        background: #f5f5f5;
    15371549        float: right;
    15381550        text-transform: none;
    15391551        z-index: 10;
    15401552}
    15411553
    1542 .attachment-details .settings-save-status .spinner {
     1554.media-sidebar .settings-save-status .spinner {
    15431555        margin: 0 5px 0;
    15441556}
    15451557
    1546 .attachment-details .settings-save-status .saved {
     1558.media-sidebar .settings-save-status .saved {
    15471559        float: right;
    15481560        display: none;
    15491561}
    15501562
    1551 .attachment-details.save-waiting .settings-save-status .spinner,
    1552 .attachment-details.save-complete .settings-save-status .saved {
     1563.media-sidebar .save-waiting .settings-save-status .spinner,
     1564.media-sidebar .save-complete .settings-save-status .saved {
    15531565        display: block;
    15541566}
    15551567
     1568/**
     1569 * Attachment Details
     1570 */
     1571.attachment-details {
     1572        position: relative;
     1573        overflow: auto;
     1574}
     1575
    15561576.attachment-info {
    15571577        overflow: hidden;
    15581578        min-height: 60px;
     
    16441664        display: block;
    16451665}
    16461666
    1647 .media-modal .delete-attachment,
    1648 .media-modal .trash-attachment {
     1667.attachment-info .delete-attachment,
     1668.attachment-info .trash-attachment {
    16491669        color: #bc0b0b;
    16501670}
    16511671
    1652 .media-modal .delete-attachment:hover,
    1653 .media-modal .trash-attachment:hover {
     1672.attachment-info .delete-attachment:hover,
     1673.attachment-info .trash-attachment:hover {
    16541674        color: red;
    16551675}
    16561676
     
    23092329@media only screen and (max-width: 640px), screen and (max-height: 400px) {
    23102330
    23112331        /* Media tabs on the top */
    2312         .media-frame-content .media-toolbar .instructions {
     2332        .media-frame-content .media-toolbar .instructions,
     2333        .media-frame-router {
    23132334                display: none;
    23142335        }
    23152336
    23162337        .media-frame-menu {
    2317                 width: auto;
    2318                 bottom: auto;
    2319                 right: 0;
    2320                 height: 60px;
     2338                top: 30px;
     2339                left: 0;
     2340                z-index: inherit;
    23212341        }
    23222342
     2343        .media-frame .media-frame-menu-toggle {
     2344                display: block;
     2345                font-size: 22px;
     2346                font-weight: 600;
     2347                color: #444;
     2348                padding: 12px 16px;
     2349                transition: color .1s ease-in;
     2350        }
     2351
     2352        .media-frame .media-frame-menu-toggle:after {
     2353                display: inline-block;
     2354                width: 20px;
     2355                height: 20px;
     2356                font: normal 20px/1 dashicons;
     2357                content: "\f140";
     2358                -webkit-font-smoothing: antialiased;
     2359                -moz-osx-font-smoothing: grayscale;
     2360        }
     2361
     2362        .media-frame .media-frame-menu-toggle:hover,
     2363        .media-frame .media-frame-menu-toggle:focus {
     2364                color: #2ea2cc;
     2365        }
     2366
    23232367        .media-menu {
    2324                 border-right: none;
     2368                z-index: inherit;
     2369                width: 200px;
    23252370                position: relative;
    2326                 border-bottom: 1px solid #dddddd;
    2327                 overflow: hidden;
    23282371                padding: 10px 0 10px 10px;
     2372                display: none;
     2373                border: 1px solid #ccc;
    23292374        }
    23302375
    2331         .media-menu a {
    2332                 float: left;
    2333                 width: 42%;
    2334                 white-space: nowrap;
    2335                 text-overflow: ellipsis;
    2336                 overflow: hidden;
     2376        .media-menu.visible {
     2377                z-index: 2000;
     2378                display: block;
     2379                position: fixed;
     2380                top: 0;
     2381                bottom: 0;
     2382                left: 0;
     2383                right: 0;
     2384                width: auto;
     2385                border: none;
     2386                padding: 10px 0;
    23372387        }
    23382388
     2389        .media-menu > a {
     2390                padding: 20px;
     2391                width: auto !important;
     2392                text-align: center;
     2393                font-size: 20px;
     2394        }
     2395
    23392396        .media-frame-title {
    23402397                display: none;
    23412398        }
     
    23462403                font-size: 14px;
    23472404        }
    23482405
     2406        .image-details .media-frame-menu-toggle {
     2407                display: none;
     2408        }
     2409
    23492410        .media-frame-toolbar {
    23502411                position: absolute;
    23512412                bottom: 0px;
    23522413                left: 0;
    23532414                right: 0;
    2354                 background: #FFF;
    2355                 border-top: 1px solid #DEDEDE;
     2415                background: #fff;
    23562416        }
    23572417
    23582418        .media-toolbar {
     
    23592419                position: relative;
    23602420        }
    23612421
     2422        .media-toolbar .spinner {
     2423                margin-right: 6px;
     2424        }
     2425
    23622426        .media-frame {
    23632427                overflow: hidden;
    23642428        }
    23652429
    2366         .attachments-browser .attachments {
    2367                 top: 42px;
     2430        .media-frame .attachments-browser {
     2431                overflow: auto;
    23682432        }
    23692433
    2370         .attachment-details h3 {
    2371                 margin-top: 45px;
     2434        .attachments-browser .attachments {
     2435                top: 0;
     2436                right: 0;
    23722437        }
    23732438
    23742439        /* Shorten right-side links so they don't overlap the close button */
     
    23812446                display: none;
    23822447        }
    23832448
    2384         .media-frame-title {
     2449        .attachment-details {
     2450                padding: 0 20px;
     2451        }
     2452       
     2453        .attachment-display-settings {
     2454                padding: 0 20px 20px 20px;
     2455                width: -webkit-calc(100% - 40px);
     2456                width: calc(100% - 40px);
     2457        }
     2458
     2459        .attachment-info .thumbnail img {
     2460                max-width: 100%; /* Display the image bigger, since the screen's smaller. */
     2461                max-height: 50%;
     2462        }
     2463
     2464        .image-details .media-frame-title {
    23852465                top: 72px;
    2386                 left: auto;
    2387                 height: auto;
    23882466        }
    23892467
    23902468        .media-frame-title h1 {
     
    23932471        }
    23942472
    23952473        .media-frame-router {
    2396                 top: 84px;
    23972474                left: 0;
    23982475        }
    23992476
    24002477        .media-frame-content {
    24012478                left: 0;
    2402                 top: 118px;
     2479                top: 48px;
    24032480        }
    24042481
    24052482        .image-details .media-frame.hide-router .media-frame-content {
     
    24062483                top: 40px;
    24072484        }
    24082485
    2409         .media-frame .attachments-browser {
    2410                 padding-bottom: 300px;
     2486        .media-sidebar {
     2487                position: fixed;
     2488                top: 0;
     2489                right: -100%;
     2490                width: 100%;
     2491                padding: 0;
     2492                margin: 0 0 62px 0;
     2493                z-index: 201;
     2494                transition: .18s right ease-in-out;
    24112495        }
    24122496
    2413         .media-sidebar {
    2414                 border-bottom: 1px solid #dddddd;
     2497        .media-sidebar.active {
     2498                right: 0;
    24152499        }
    24162500
    24172501        .media-modal {
     
    24182502                width: auto;
    24192503        }
    24202504
    2421         .media-toolbar-primary, .media-toolbar-secondary {
     2505        .media-toolbar-primary,
     2506        .media-toolbar-secondary {
    24222507                height: auto;
    24232508        }
    24242509
     2510        .attachments-browser .media-toolbar-primary,
     2511        .attachments-browser .media-toolbar-secondary {
     2512                width: 50%;
     2513        }
     2514
     2515        .media-frame .media-frame-content .media-toolbar .search,
     2516        .media-frame .media-frame-content .media-toolbar .attachment-filters {
     2517                max-width: 200px;
     2518                width: -webkit-calc(100% - 32px);
     2519                width: calc(100% - 32px);
     2520                margin: 11px 0 0 0;
     2521                height: 28px;
     2522        }
     2523
    24252524        .uploader-inline h3 {
    24262525                margin: 0 0 .8em 0;
    24272526        }
     
    24342533                margin: 0;
    24352534        }
    24362535
    2437         .attachments-browser .attachments, .attachments-browser .uploader-inline {
     2536        .attachments-browser .attachments,
     2537        .attachments-browser .uploader-inline {
    24382538                position: relative;
    2439                 margin-right: 180px;
     2539                margin-right: 0;
    24402540        }
    24412541
    24422542        /* Full-bleed modal */
     
    24582558                max-width: 100%;
    24592559        }
    24602560
    2461         .attachments-browser .media-toolbar-primary input.search {
    2462                 max-width: 150px;
    2463         }
    2464 
    24652561        .uploader-inline-content {
    24662562                position: relative;
    24672563        }
     
    24972593                margin-top: 45px;
    24982594        }
    24992595
     2596        /* Edit-selection mode */
     2597        .close.media-modal-icon {
     2598                display: block;
     2599                height: 100%;
     2600                width: 100%;
     2601                margin: 0;
     2602                padding: 0;
     2603                position: absolute;
     2604                top: 0;
     2605                right: 0;
     2606                border: none;
     2607                -webkit-box-shadow: none;
     2608                box-shadow: none;
     2609                background: transparent;
     2610        }
     2611
     2612        .close.media-modal-icon:before {
     2613                font: normal 60px/1 dashicons;
     2614                content: "\f335";
     2615                position: absolute;
     2616                top: 50%;
     2617                left: 50%;
     2618                margin: -30px;
     2619                color: #000;
     2620                text-shadow: 0px 0px 5px #fff;
     2621        }
     2622
     2623        .close.media-modal-icon:hover:before {
     2624                color: #1e8cbe;
     2625                text-shadow: 0px 0px 5px #000;
     2626        }
    25002627}
    25012628
    25022629/* Landscape specific header override */
     
    25642691
    25652692        .media-frame .spinner {
    25662693                background-image: url(../images/spinner-2x.gif);
    2567         }
     2694        }
    25682695}
    25692696
     2697.attachments-browser .attachment {
     2698        position: relative;
     2699        width: 20%;
     2700        margin: 0;
     2701}
    25702702
     2703.attachments-browser .attachment:before {
     2704        content: '';
     2705        display: block;
     2706        padding-top: 100%;
     2707}
     2708
     2709.attachments-browser .attachment .attachment-preview {
     2710        position: absolute;
     2711        top: 8px;
     2712        right: 8px;
     2713        bottom: 8px;
     2714        left: 8px;
     2715}
     2716
     2717.attachments-browser .portrait img {
     2718        max-width: 100%;
     2719}
     2720
     2721.attachments-browser .landscape img {
     2722        max-height: 100%;
     2723}
     2724
     2725/**/
     2726
     2727.media-selection .attachments {
     2728        padding: 5px;
     2729}
     2730
     2731.media-selection .attachment {
     2732        margin: 5px;
     2733        width: 40px;
     2734}
     2735
     2736.media-selection .attachment-preview,
     2737.media-selection .attachment-preview .thumbnail {
     2738        width: 40px;
     2739        height: 40px;
     2740}
     2741
     2742.media-selection .portrait .thumbnail img {
     2743        max-width: 40px;
     2744        height: auto;
     2745}
     2746
     2747.media-selection .landscape .thumbnail img {
     2748        width: auto;
     2749        max-height: 40px;
     2750}
     2751
     2752@media only screen and ( max-width: 400px ) {
     2753        .attachments-browser .attachment {
     2754                width: 50%;
     2755        }
     2756}
     2757
     2758@media only screen and ( min-width: 400px ) {
     2759        .attachments-browser .attachment {
     2760                width: 33.3%;
     2761        }
     2762}
     2763
     2764@media only screen and ( min-width: 520px ) {
     2765        .attachments-browser .attachment {
     2766                width: 25%;
     2767        }
     2768}
     2769
     2770@media only screen and ( min-width: 640px ) {
     2771        .attachments-browser .attachment {
     2772                width: 33.3%;
     2773        }
     2774}
     2775
     2776@media only screen and ( min-width: 960px ) {
     2777        .attachments-browser .attachment {
     2778                width: 25%;
     2779        }
     2780}
     2781
     2782@media only screen and ( min-width: 1200px ) {
     2783        .attachments-browser .attachment {
     2784                width: 20%;
     2785        }
     2786}
     2787
    25712788/**
    25722789 * Media Grid
    25732790 */
     
    26692886 *
    26702887 * This should be OOCSS'd so both use a shared selector.
    26712888 */
    2672 .edit-attachment-frame .edit-media-header {
    2673         overflow: hidden;
    2674 }
    2675 
    2676 .upload-php .media-modal-close .media-modal-icon:before {
    2677         content: '\f335';
    2678         font-size: 30px;
    2679 }
    2680 
    2681 .upload-php .media-modal-close:hover .media-modal-icon:before,
    2682 .upload-php .media-modal-close:focus .media-modal-icon:before {
    2683         color: #fff;
    2684 }
    2685 
    2686 .upload-php .media-modal-close .media-modal-icon {
    2687         margin-top: 13px;
    2688         width: 30px;
    2689         height: 30px;
    2690 }
    2691 
    2692 .upload-php .media-modal-close,
    26932889.edit-attachment-frame .edit-media-header .left,
    26942890.edit-attachment-frame .edit-media-header .right {
    26952891        cursor: pointer;
    26962892        color: #777;
    26972893        background-color: transparent;
    2698         height: 56px;
    2699         width: 56px;
    2700         padding: 0;
    2701         position: absolute;
     2894        height: 48px;
     2895        width: 54px;
     2896        float: left;
    27022897        text-align: center;
    27032898        border: 0;
    2704         border-left: 1px solid #ddd;
     2899        border-right: 1px solid #ddd;
    27052900}
    27062901
    2707 .upload-php .media-modal-close {
    2708         top: 0;
    2709         right: 0;
    2710 }
    2711 
    2712 .edit-attachment-frame .edit-media-header .left {
    2713         right: 112px;
    2714 }
    2715 
    2716 .edit-attachment-frame .edit-media-header .right {
    2717         right: 56px;
    2718 }
    2719 
    2720 .edit-attachment-frame .media-frame-title {
    2721         left: 0;
    2722         right: 170px; /* leave space for prev/next/close */
    2723 }
    2724 
    27252902.edit-attachment-frame .edit-media-header .right:before,
    27262903.edit-attachment-frame .edit-media-header .left:before {
    27272904        font: normal 20px/50px 'dashicons' !important;
     
    27502927        cursor: inherit;
    27512928}
    27522929
    2753 .upload-php .media-modal-close:hover,
     2930.edit-attachment-frame .edit-media-header .close:hover,
    27542931.edit-attachment-frame .edit-media-header .right:hover,
    27552932.edit-attachment-frame .edit-media-header .left:hover,
    2756 .upload-php .media-modal-close:focus,
     2933.edit-attachment-frame .edit-media-header .close:focus,
    27572934.edit-attachment-frame .edit-media-header .right:focus,
    27582935.edit-attachment-frame .edit-media-header .left:focus {
    27592936        background: #0074a2;
     
    27682945.edit-attachment-frame .media-frame-content {
    27692946        border-bottom: none;
    27702947        bottom: 0;
    2771         top: 56px;
    27722948}
    27732949
    27742950/* Hiding this for the moment instead of removing it from the template. */
     
    27832959        bottom: 0;
    27842960        right: 0;
    27852961        left: 0;
    2786         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    2787         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    27882962}
    2789 .edit-attachment-frame .attachment-media-view {
    2790         float: left;
    2791         width: 65%;
    2792         height: 100%;
     2963
     2964.edit-attachment-frame .attachment-info {
     2965        border-bottom: 0;
     2966        border-right: 1px solid #ddd;
     2967        bottom: 0;
     2968        position: absolute;
     2969        top: 0;
     2970        left: 0;
     2971        right: 50%;
     2972        margin-bottom: 0;
     2973        padding: 2% 4% 0;
     2974        height: 98%; /* 100% - padding percentage above */
    27932975}
    27942976
    2795 .edit-attachment-frame .attachment-media-view .thumbnail {
    2796         -webkit-box-sizing: border-box;
    2797         -moz-box-sizing: border-box;
    2798         box-sizing: border-box;
    2799         padding: 16px;
    2800         height: 100%;
     2977.edit-attachment-frame .attachment-info .thumbnail {
     2978        float: none;
     2979        max-width: none;
     2980        max-height: 70%;
     2981        margin-right: 0;
    28012982}
    28022983
    2803 .edit-attachment-frame .attachment-media-view img {
    2804         display: block;
    2805         margin-bottom: 16px;
     2984.edit-attachment-frame .attachment-info .thumbnail-image img {
     2985        margin: 0;
     2986}
     2987
     2988.edit-attachment-frame .attachment-info .thumbnail-image:after {
     2989        -webkit-box-shadow: none;
     2990                box-shadow: none;
     2991}
     2992
     2993.edit-attachment-frame .attachment-info .thumbnail img {
    28062994        max-width: 100%;
    2807         max-height: -webkit-calc( 100% - 42px );
    2808         max-height: calc( 100% - 42px ); /* leave space for actions underneath */
     2995        max-height: 100%;
    28092996}
    28102997
    2811 .edit-attachment-frame .delete-attachment {
    2812         float: right;
    2813         margin-top: 7px;
     2998.edit-attachment-frame .attachment-info .details {
     2999        float: none;
    28143000}
    28153001
    28163002.edit-attachment-frame .wp-media-wrapper {
     
    28173003        margin-bottom: 12px;
    28183004}
    28193005
    2820 .edit-attachment-frame .attachment-info {
    2821         overflow: auto;
    2822         -webkit-box-sizing: border-box;
    2823         -moz-box-sizing: border-box;
    2824         box-sizing: border-box;
    2825         margin-bottom: 0;
    2826         padding: 12px 16px 0;
    2827         width: 35%;
    2828         height: 100%;
    2829         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    2830         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    2831         border-bottom: 0;
    2832         border-left: 1px solid #ddd;
    2833         background: #f3f3f3;
     3006.edit-attachment-frame .attachment-fields {
     3007        bottom: 0;
     3008        padding: 2% 4%;
     3009        position: absolute;
     3010        top: 0;
     3011        left: 50%;
     3012        right: 0;
    28343013}
    28353014
    2836 .edit-attachment-frame .attachment-info .details,
    2837 .edit-attachment-frame .attachment-info .settings {
    2838         overflow: hidden;
    2839         float: none;
    2840         margin-bottom: 15px;
    2841         padding-bottom: 15px;
    2842         border-bottom: 1px solid #ddd;
    2843 }
    2844 
    2845 .edit-attachment-frame .attachment-info .setting {
     3015.edit-attachment-frame .attachment-fields .setting {
    28463016        display: block;
    28473017        float: left;
    28483018        width: 100%;
     
    28493019        margin: 1px 0;
    28503020}
    28513021
    2852 .edit-attachment-frame .attachment-info .setting label {
     3022.edit-attachment-frame .attachment-fields .setting label {
    28533023        display: block;
    28543024}
    28553025
    2856 .edit-attachment-frame .attachment-info .setting .link-to-custom {
     3026.edit-attachment-frame .attachment-fields .setting .link-to-custom {
    28573027        margin: 3px 0;
    28583028}
    28593029
    2860 .edit-attachment-frame .attachment-info .setting .name {
     3030.edit-attachment-frame .attachment-fields .setting .name {
    28613031        min-width: 30%;
    28623032        margin-right: 4%;
    28633033        font-size: 12px;
     
    28643034        text-align: right;
    28653035}
    28663036
    2867 .edit-attachment-frame .attachment-info .setting select {
     3037.edit-attachment-frame .attachment-fields .setting select {
    28683038        max-width: 65%;
    28693039}
    28703040
    2871 .edit-attachment-frame .attachment-info .setting input[type="checkbox"],
    2872 .edit-attachment-frame .attachment-info .field input[type="checkbox"] {
     3041.edit-attachment-frame .attachment-fields .setting input[type="checkbox"],
     3042.edit-attachment-frame .attachment-fields .field input[type="checkbox"] {
    28733043        width: 16px;
    28743044        float: none;
    28753045        margin: 8px 3px 0;
     
    28763046        padding: 0;
    28773047}
    28783048
    2879 .edit-attachment-frame .attachment-info .setting span {
     3049.edit-attachment-frame .attachment-fields .setting span {
    28803050        float: left;
    28813051        min-height: 22px;
    28823052        padding-top: 8px;
     
    28853055        color: #666;
    28863056}
    28873057
    2888 .edit-attachment-frame .attachment-info .setting input[type="text"],
    2889 .edit-attachment-frame .attachment-info .setting input[type="password"],
    2890 .edit-attachment-frame .attachment-info .setting input[type="number"],
    2891 .edit-attachment-frame .attachment-info .setting input[type="search"],
    2892 .edit-attachment-frame .attachment-info .setting input[type="email"],
    2893 .edit-attachment-frame .attachment-info .setting input[type="url"],
    2894 .edit-attachment-frame .attachment-info .setting textarea,
    2895 .edit-attachment-frame .attachment-info .setting .value {
     3058.edit-attachment-frame .attachment-fields .setting input[type="text"],
     3059.edit-attachment-frame .attachment-fields .setting input[type="password"],
     3060.edit-attachment-frame .attachment-fields .setting input[type="number"],
     3061.edit-attachment-frame .attachment-fields .setting input[type="search"],
     3062.edit-attachment-frame .attachment-fields .setting input[type="email"],
     3063.edit-attachment-frame .attachment-fields .setting input[type="url"],
     3064.edit-attachment-frame .attachment-fields .setting textarea,
     3065.edit-attachment-frame .attachment-fields .setting .value {
    28963066        margin: 1px;
    28973067        width: 65%;
    28983068        float: right;
     
    29023072        box-sizing: border-box;
    29033073}
    29043074
    2905 .edit-attachment-frame .attachment-info .setting textarea {
     3075.edit-attachment-frame .attachment-fields .setting textarea {
    29063076        height: 62px;
    29073077        resize: vertical;
    29083078}
    29093079
    2910 .edit-attachment-frame .attachment-info select {
     3080.edit-attachment-frame .attachment-fields select {
    29113081        margin-top: 3px;
    29123082}
    29133083
  • src/wp-includes/js/media-views.js

     
    17471747                template:  media.template('media-frame'),
    17481748                regions:   ['menu','title','content','toolbar','router'],
    17491749
     1750                events: {
     1751                        'click a.media-frame-menu-toggle': 'toggleMenu'
     1752                },
     1753
    17501754                /**
    17511755                 * @global wp.Uploader
    17521756                 */
     
    18401844                                controller: this
    18411845                        });
    18421846                },
     1847
     1848                toggleMenu: function( event ) {
     1849                        console.log( 'clicked' );
     1850                        event.preventDefault();
     1851                        this.$el.find( '.media-menu' ).toggleClass( 'visible' );
     1852
     1853                },
    18431854                /**
    18441855                 * @param {Object} toolbar
    18451856                 * @this wp.media.controller.Region
     
    32213232                                };
    32223233                        }
    32233234
     3235                        $( 'body' ).addClass( 'in-modal' );
    32243236                        $el.show().focus();
    32253237                        return this.propagate('open');
    32263238                },
     
    32363248                                return this;
    32373249                        }
    32383250
     3251                        $( 'body' ).removeClass( 'in-modal' );
     3252
    32393253                        // Hide modal and remove restricted media modal tab focus once it's closed
    32403254                        this.$el.hide().undelegate( 'keydown' );
    32413255
     
    44294443        });
    44304444
    44314445        /**
    4432          * wp.media.view.Menu
    4433          *
    4434          * @constructor
    4435          * @augments wp.media.view.PriorityList
    4436          * @augments wp.media.View
    4437          * @augments wp.Backbone.View
    4438          * @augments Backbone.View
    4439          */
     4446        * wp.media.view.Menu
     4447        *
     4448        * @constructor
     4449        * @augments wp.media.view.PriorityList
     4450        * @augments wp.media.View
     4451        * @augments wp.Backbone.View
     4452        * @augments Backbone.View
     4453        */
    44404454        media.view.Menu = media.view.PriorityList.extend({
    44414455                tagName:   'div',
    44424456                className: 'media-menu',
     
    44434457                property:  'state',
    44444458                ItemView:  media.view.MenuItem,
    44454459                region:    'menu',
     4460
     4461                initialize: function( options ) {
     4462                        media.view.PriorityList.prototype.initialize.apply( this, arguments );
     4463                        this.controller = options.controller;
     4464                        this.listenTo( this.controller, 'deactivate', function() {
     4465                                this.$el.removeClass( 'visible' );
     4466                        } );
     4467                },
     4468
    44464469                /**
    44474470                 * @param {Object} options
    44484471                 * @param {string} id
     
    46064629                tagName:   'li',
    46074630                className: 'attachment',
    46084631                template:  media.template('attachment'),
     4632                isTouch: false,
    46094633
    46104634                attributes: {
    46114635                        tabIndex: 0,
     
    46144638
    46154639                events: {
    46164640                        'click .js--select-attachment':   'toggleSelectionHandler',
     4641                        'touchend .attachment-preview':   'setTouch',
    46174642                        'change [data-setting]':          'updateSetting',
    46184643                        'change [data-setting] input':    'updateSetting',
    46194644                        'change [data-setting] select':   'updateSetting',
     
    47304755                                this.$bar.width( this.model.get('percent') + '%' );
    47314756                        }
    47324757                },
     4758
     4759                setTouch: function() {
     4760                        this.isTouch = true;
     4761                },
     4762
    47334763                /**
    47344764                 * @param {Object} event
    47354765                 */
     
    47524782                                method = 'toggle';
    47534783                        }
    47544784
     4785                        if ( this.isTouch ) {
     4786                                this.isTouch = false;
     4787                                method = 'add';
     4788                        }
     4789
    47554790                        this.toggleSelection({
    47564791                                method: method
    47574792                        });
     
    48004835                                selection[ this.selected() ? 'remove' : 'add' ]( model );
    48014836                                selection.single( model );
    48024837                                return;
     4838                        } else if ( 'add' === method ) {
     4839                                selection.add( model );
     4840                                selection.single( model );
     4841                                return;
     4842
    48034843                        }
    48044844
    48054845                        // Fixes bug that loses focus when selecting a featured image
     
    51495189
    51505190                        this.initSortable();
    51515191
    5152                         _.bindAll( this, 'css' );
     5192                        /*_.bindAll( this, 'css' );
    51535193                        this.model.on( 'change:edge change:gutter', this.css, this );
    51545194                        this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
    51555195                        if ( this.options.resize ) {
     
    51585198
    51595199                        // Call this.css() after this view has been rendered in the DOM so
    51605200                        // attachments get proper width applied.
    5161                         _.defer( this.css, this );
     5201                        _.defer( this.css, this );*/
    51625202                },
    51635203
    51645204                dispose: function() {
  • src/wp-includes/media-template.php

     
    130130        </style>
    131131        <![endif]-->
    132132        <script type="text/html" id="tmpl-media-frame">
     133                <a class="media-frame-menu-toggle" href="#">Insert Media<!-- Change this dynamically. --></a>
    133134                <div class="media-frame-menu"></div>
    134135                <div class="media-frame-title"></div>
    135136                <div class="media-frame-router"></div>