WordPress.org

Make WordPress Core

Ticket #36017: 36017.2.diff

File 36017.2.diff, 8.9 KB (added by ocean90, 5 years ago)
  • src/wp-admin/css/customize-controls.css

     
    13081308        color: #00a0d2;
    13091309}
    13101310
    1311 /* Device/preview size toggles */
    1312 
    1313 .wp-full-overlay {
    1314         background: #191e23;
    1315 }
    1316 
    1317 #customize-preview.wp-full-overlay-main {
    1318         background-color: #f1f1f1;
    1319 }
    1320 
    1321 .expanded #customize-footer-actions {
    1322         position: fixed;
    1323         bottom: 0;
    1324         left: 0;
    1325         width: 300px;
    1326         height: 45px;
    1327         border-top: 1px solid #ddd;
    1328 }
    1329 
    1330 #customize-footer-actions .devices {
    1331         float: right;
    1332 }
    1333 
    1334 #customize-footer-actions .devices button {
    1335         cursor: pointer;
    1336         background: transparent;
    1337         border: none;
    1338         height: 45px;
    1339         padding: 0 3px;
    1340         margin: 0 0 0 -4px;
    1341         -webkit-box-shadow: none;
    1342         box-shadow: none;
    1343         border-top: 1px solid transparent;
    1344         border-bottom: 4px solid transparent;
    1345         -webkit-transition: background .1s ease-in-out;
    1346         transition: background .1s ease-in-out;
    1347 }
    1348 
    1349 #customize-footer-actions .devices button:focus {
    1350         -webkit-box-shadow: none;
    1351         box-shadow: none;
    1352         outline: none;
    1353 }
    1354 
    1355 #customize-footer-actions .devices button:before {
    1356         display: inline-block;
    1357         -webkit-font-smoothing: antialiased;
    1358         font: normal 20px/30px "dashicons";
    1359         vertical-align: top;
    1360         margin: 3px 0;
    1361         padding: 4px 8px;
    1362         color: #656a6f;
    1363 }
    1364 
    1365 #customize-footer-actions .devices button.active {
    1366         border-bottom-color: #191e23;
    1367 }
    1368 
    1369 #customize-footer-actions .devices button:hover,
    1370 #customize-footer-actions .devices button:focus {
    1371         background-color: #fff;
    1372 }
    1373 
    1374 #customize-footer-actions .devices button:focus {
    1375         background-color: #fff;
    1376         border-bottom-color: #0073aa;
    1377 }
    1378 
    1379 #customize-footer-actions .devices button.active:before,
    1380 #customize-footer-actions .devices button:hover:before,
    1381 #customize-footer-actions .devices button:focus:before {
    1382         color: #191e23;
    1383 }
    1384 
    1385 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
    1386 .wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
    1387         color: #191e23;
    1388 }
    1389 
    1390 #customize-footer-actions .devices .preview-desktop:before {
    1391         content: "\f472";
    1392 }
    1393 
    1394 #customize-footer-actions .devices .preview-tablet:before {
    1395         content: "\f471";
    1396 }
    1397 
    1398 #customize-footer-actions .devices .preview-mobile:before {
    1399         content: "\f470";
    1400 }
    1401 
    1402 @media screen and (max-width:1024px) {
    1403         #customize-footer-actions .devices {
    1404                 display: none;
    1405         }
    1406 }
    1407 
    1408 .collapsed #customize-footer-actions .devices button:before {
    1409         display: none;
    1410 }
    1411 
    1412 .collapsed #customize-footer-actions .devices .preview-full {
    1413         left: 0;
    1414 }
    1415 
    1416 .preview-mobile #customize-preview {
    1417         margin: auto 0 auto -160px;
    1418         width: 320px;
    1419         height: 480px;
    1420         max-height: 100%;
    1421         max-width: 100%;
    1422         left: 50%;
    1423 }
    1424 
    1425 .preview-tablet #customize-preview {
    1426         margin: auto 0 auto -3in;
    1427         width: 6in;
    1428         height: 9in;
    1429         max-height: 100%;
    1430         max-width: 100%;
    1431         left: 50%;
    1432 }
    1433 
    14341311.widget-reorder-nav span,
    14351312.menu-item-reorder-nav button {
    14361313        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.preview-mobile .wp-full-overlay-main {
     1580        margin: auto 0 auto -160px;
     1581        width: 320px;
     1582        height: 480px;
     1583        max-height: 100%;
     1584        max-width: 100%;
     1585        left: 50%;
     1586}
     1587
     1588.preview-tablet .wp-full-overlay-main {
     1589        margin: auto 0 auto -3in;
     1590        width: 6in; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
     1591        height: 9in;
     1592        max-height: 100%;
     1593        max-width: 100%;
     1594        left: 50%;
     1595}
     1596
     1597
    14831598/*------------------------------------------------------------------------------
    14841599  24.0 - Customize Loader
    14851600------------------------------------------------------------------------------*/
     
    16001715}
    16011716
    16021717.theme-install-overlay .wp-full-overlay-main {
    1603         position: relative;
     1718        position: absolute;
    16041719        z-index: 0;
    16051720        background-color: #f1f1f1;
    16061721}
  • 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'
     
    765766        html: themes.template( 'theme-preview' ),
    766767
    767768        render: function() {
    768                 var self = this,
     769                var self = this, currentPreviewDevice,
    769770                        data = this.model.toJSON();
    770771
    771772                this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) );
    772773
     774                currentPreviewDevice = this.$el.data( 'current-preview-device' );
     775                if ( currentPreviewDevice ) {
     776                        self.tooglePreviewDeviceButtons( currentPreviewDevice );
     777                }
     778
    773779                themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
    774780
    775781                this.$el.fadeIn( 200, function() {
     
    815821                return false;
    816822        },
    817823
     824        previewDevice: function( event ) {
     825                var device = $( event.currentTarget ).data( 'device' );
     826
     827                this.$el
     828                        .removeClass( 'preview-desktop preview-tablet preview-mobile' )
     829                        .addClass( 'preview-' + device )
     830                        .data( 'current-preview-device', device );
     831
     832                this.tooglePreviewDeviceButtons( device );
     833        },
     834
     835        tooglePreviewDeviceButtons: function( newDevice ) {
     836                var $devices = $( '.wp-full-overlay-footer .devices' );
     837
     838                $devices.find( 'button' )
     839                        .removeClass( 'active' )
     840                        .attr( 'aria-pressed', false );
     841
     842                $devices.find( 'button.preview-' + newDevice )
     843                        .addClass( 'active' )
     844                        .attr( 'aria-pressed', true );
     845        },
     846
    818847        keyEvent: function( event ) {
    819848                // The escape key closes the preview
    820849                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>