WordPress.org

Make WordPress Core

Ticket #36017: 36017.diff

File 36017.diff, 8.3 KB (added by celloexpressions, 5 years ago)
  • src/wp-admin/css/customize-controls.css

     
    13341334        color: #00a0d2;
    13351335}
    13361336
    1337 /* Device/preview size toggles */
    1338 
    1339 .wp-full-overlay {
    1340         background: #191e23;
    1341 }
    1342 
    1343 #customize-preview.wp-full-overlay-main {
    1344         background-color: #f1f1f1;
    1345 }
    1346 
    1347 .expanded #customize-footer-actions {
    1348         position: fixed;
    1349         bottom: 0;
    1350         left: 0;
    1351         width: 300px;
    1352         height: 45px;
    1353         border-top: 1px solid #ddd;
    1354 }
    1355 
    1356 #customize-footer-actions .devices {
    1357         float: right;
    1358 }
    1359 
    1360 #customize-footer-actions .devices button {
    1361         cursor: pointer;
    1362         background: transparent;
    1363         border: none;
    1364         height: 45px;
    1365         padding: 0 3px;
    1366         margin: 0 0 0 -4px;
    1367         -webkit-box-shadow: none;
    1368         box-shadow: none;
    1369         border-top: 1px solid transparent;
    1370         border-bottom: 4px solid transparent;
    1371         -webkit-transition: background .1s ease-in-out;
    1372         transition: background .1s ease-in-out;
    1373 }
    1374 
    1375 #customize-footer-actions .devices button:focus {
    1376         -webkit-box-shadow: none;
    1377         box-shadow: none;
    1378         outline: none;
    1379 }
    1380 
    1381 #customize-footer-actions .devices button:before {
    1382         display: inline-block;
    1383         -webkit-font-smoothing: antialiased;
    1384         font: normal 20px/30px "dashicons";
    1385         vertical-align: top;
    1386         margin: 3px 0;
    1387         padding: 4px 8px;
    1388         color: #656a6f;
    1389 }
    1390 
    1391 #customize-footer-actions .devices button.active {
    1392         border-bottom-color: #191e23;
    1393 }
    1394 
    1395 #customize-footer-actions .devices button:hover,
    1396 #customize-footer-actions .devices button:focus {
    1397         background-color: #fff;
    1398 }
    1399 
    1400 #customize-footer-actions .devices button:focus {
    1401         background-color: #fff;
    1402         border-bottom-color: #0073aa;
    1403 }
    1404 
    1405 #customize-footer-actions .devices button.active:before,
    1406 #customize-footer-actions .devices button:hover:before,
    1407 #customize-footer-actions .devices button:focus:before {
    1408         color: #191e23;
    1409 }
    1410 
    1411 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
    1412 .wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
    1413         color: #191e23;
    1414 }
    1415 
    1416 #customize-footer-actions .devices .preview-desktop:before {
    1417         content: "\f472";
    1418 }
    1419 
    1420 #customize-footer-actions .devices .preview-tablet:before {
    1421         content: "\f471";
    1422 }
    1423 
    1424 #customize-footer-actions .devices .preview-mobile:before {
    1425         content: "\f470";
    1426 }
    1427 
    1428 @media screen and (max-width:1024px) {
    1429         #customize-footer-actions .devices {
    1430                 display: none;
    1431         }
    1432 }
    1433 
    1434 .collapsed #customize-footer-actions .devices button:before {
    1435         display: none;
    1436 }
    1437 
    1438 .collapsed #customize-footer-actions .devices .preview-full {
    1439         left: 0;
    1440 }
    1441 
    1442 .preview-mobile #customize-preview {
    1443         margin: auto 0 auto -160px;
    1444         width: 320px;
    1445         height: 480px;
    1446         max-height: 100%;
    1447         max-width: 100%;
    1448         left: 50%;
    1449 }
    1450 
    1451 .preview-tablet #customize-preview {
    1452         margin: auto 0 auto -3in;
    1453         width: 6in;
    1454         height: 9in;
    1455         max-height: 100%;
    1456         max-width: 100%;
    1457         left: 50%;
    1458 }
    1459 
    14601337.widget-reorder-nav span,
    14611338.menu-item-reorder-nav button {
    14621339        position: relative;
  • src/wp-admin/css/themes.css

     
    14801480        transition-duration: 0.2s;
    14811481}
    14821482
     1483/* Device/preview size toggles */
     1484
     1485.wp-full-overlay {
     1486        background: #191e23;
     1487}
     1488
     1489.wp-full-overlay-main {
     1490        background-color: #f1f1f1;
     1491}
     1492
     1493.expanded .wp-full-overlay-footer {
     1494        position: fixed;
     1495        bottom: 0;
     1496        left: 0;
     1497        width: 300px;
     1498        height: 45px;
     1499        border-top: 1px solid #ddd;
     1500}
     1501
     1502.wp-full-overlay-footer .devices {
     1503        float: right;
     1504}
     1505
     1506.wp-full-overlay-footer .devices button {
     1507        cursor: pointer;
     1508        background: transparent;
     1509        border: none;
     1510        height: 45px;
     1511        padding: 0 3px;
     1512        margin: 0 0 0 -4px;
     1513        -webkit-box-shadow: none;
     1514        box-shadow: none;
     1515        border-top: 1px solid transparent;
     1516        border-bottom: 4px solid transparent;
     1517        -webkit-transition: background .1s ease-in-out;
     1518        transition: background .1s ease-in-out;
     1519}
     1520
     1521.wp-full-overlay-footer .devices button:focus {
     1522        -webkit-box-shadow: none;
     1523        box-shadow: none;
     1524        outline: none;
     1525}
     1526
     1527.wp-full-overlay-footer .devices button:before {
     1528        display: inline-block;
     1529        -webkit-font-smoothing: antialiased;
     1530        font: normal 20px/30px "dashicons";
     1531        vertical-align: top;
     1532        margin: 3px 0;
     1533        padding: 4px 8px;
     1534        color: #656a6f;
     1535}
     1536
     1537.wp-full-overlay-footer .devices button.active {
     1538        border-bottom-color: #191e23;
     1539}
     1540
     1541.wp-full-overlay-footer .devices button:hover,
     1542.wp-full-overlay-footer .devices button:focus {
     1543        background-color: #fff;
     1544}
     1545
     1546.wp-full-overlay-footer .devices button:focus {
     1547        background-color: #fff;
     1548        border-bottom-color: #0073aa;
     1549}
     1550
     1551.wp-full-overlay-footer .devices button.active:before,
     1552.wp-full-overlay-footer .devices button:hover:before,
     1553.wp-full-overlay-footer .devices button:focus:before {
     1554        color: #191e23;
     1555}
     1556
     1557.wp-full-overlay-footer .devices .preview-desktop:before {
     1558        content: "\f472";
     1559}
     1560
     1561.wp-full-overlay-footer .devices .preview-tablet:before {
     1562        content: "\f471";
     1563}
     1564
     1565.wp-full-overlay-footer .devices .preview-mobile:before {
     1566        content: "\f470";
     1567}
     1568
     1569@media screen and (max-width:1024px) {
     1570        .wp-full-overlay-footer .devices {
     1571                display: none;
     1572        }
     1573}
     1574
     1575.collapsed .wp-full-overlay-footer .devices button:before {
     1576        display: none;
     1577}
     1578
     1579.collapsed .wp-full-overlay-footer .devices .preview-full {
     1580        left: 0;
     1581}
     1582
     1583.preview-mobile .wp-full-overlay-main {
     1584        margin: auto 0 auto -160px;
     1585        width: 320px;
     1586        height: 480px;
     1587        max-height: 100%;
     1588        max-width: 100%;
     1589        left: 50%;
     1590}
     1591
     1592.preview-tablet .wp-full-overlay-main {
     1593        margin: auto 0 auto -3in;
     1594        width: 6in; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
     1595        height: 9in;
     1596        max-height: 100%;
     1597        max-width: 100%;
     1598        left: 50%;
     1599}
     1600
     1601
    14831602/*------------------------------------------------------------------------------
    14841603  24.0 - Customize Loader
    14851604------------------------------------------------------------------------------*/
     
    16001719}
    16011720
    16021721.theme-install-overlay .wp-full-overlay-main {
    1603         position: relative;
     1722        position: absolute;
    16041723        z-index: 0;
    16051724        background-color: #f1f1f1;
    16061725}
  • src/wp-admin/js/theme.js

     
    756756        events: {
    757757                'click .close-full-overlay': 'close',
    758758                'click .collapse-sidebar': 'collapse',
     759                'click .devices button': 'previewDevice',
    759760                'click .previous-theme': 'previousTheme',
    760761                'click .next-theme': 'nextTheme',
    761762                'keyup': 'keyEvent'
     
    815816                return false;
    816817        },
    817818
     819        previewDevice: function( event ) {
     820                var $button = $( event.currentTarget );
     821                var overlay = $( '.wp-full-overlay' ),
     822                device = $button.data( 'device' );
     823                $( '.wp-full-overlay-footer .devices button' ).removeClass( 'active' )
     824                                                                .attr( 'aria-pressed', false );
     825                overlay.removeClass( 'preview-full preview-desktop preview-tablet preview-mobile' )
     826                   .toggleClass( 'preview-' + device );
     827                $button.addClass( 'active' )
     828                       .attr( 'aria-pressed', true );
     829        },
     830
    818831        keyEvent: function( event ) {
    819832                // The escape key closes the preview
    820833                if ( event.keyCode === 27 ) {
  • src/wp-admin/theme-install.php

     
    277277                        </div>
    278278                </div>
    279279                <div class="wp-full-overlay-footer">
     280                        <div class="devices">
     281                                <button type="button" class="preview-desktop active" aria-pressed="true" data-device="desktop"><span class="screen-reader-text"><?php _e( 'Enter desktop preview mode' ); ?></span></button>
     282                                <button type="button" class="preview-tablet" aria-pressed="false" data-device="tablet"><span class="screen-reader-text"><?php _e( 'Enter tablet preview mode' ); ?></span></button>
     283                                <button type="button" class="preview-mobile" aria-pressed="false" data-device="mobile"><span class="screen-reader-text"><?php _e( 'Enter mobile preview mode' ); ?></span></button>
     284                        </div>
    280285                        <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
    281286                                <span class="collapse-sidebar-arrow"></span>
    282287                                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>