WordPress.org

Make WordPress Core

Changeset 36858


Ignore:
Timestamp:
03/05/16 22:06:57 (20 months ago)
Author:
ocean90
Message:

Themes: Bring the device preview from [31195] to the theme install previewer.

Props celloexpressions.
Fixes #36017.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r36851 r36858  
    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 { 
  • trunk/src/wp-admin/css/themes.css

    r36587 r36858  
    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 
     
    16011716 
    16021717.theme-install-overlay .wp-full-overlay-main { 
    1603     position: relative; 
     1718    position: absolute; 
    16041719    z-index: 0; 
    16051720    background-color: #f1f1f1; 
  • trunk/src/wp-admin/js/theme.js

    r36580 r36858  
    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', 
     
    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 ) ); 
     773 
     774        currentPreviewDevice = this.$el.data( 'current-preview-device' ); 
     775        if ( currentPreviewDevice ) { 
     776            self.tooglePreviewDeviceButtons( currentPreviewDevice ); 
     777        } 
    772778 
    773779        themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } ); 
     
    814820        this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' ); 
    815821        return false; 
     822    }, 
     823 
     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 ); 
    816845    }, 
    817846 
  • trunk/src/wp-admin/theme-install.php

    r36666 r36858  
    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> 
Note: See TracChangeset for help on using the changeset viewer.