WordPress.org

Make WordPress Core

Changeset 36858


Ignore:
Timestamp:
03/05/2016 10:06:57 PM (2 years 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.