Themes: Bring the device preview from [31195] to the theme install previewer.
Props celloexpressions. Fixes #36017. git-svn-id: https://develop.svn.wordpress.org/trunk@36858 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90)
parent
25838b4c23
commit
e5556666cc
|
|
@ -1308,129 +1308,6 @@ body.cheatin p {
|
|||
color: #00a0d2;
|
||||
}
|
||||
|
||||
/* Device/preview size toggles */
|
||||
|
||||
.wp-full-overlay {
|
||||
background: #191e23;
|
||||
}
|
||||
|
||||
#customize-preview.wp-full-overlay-main {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.expanded #customize-footer-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 45px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#customize-footer-actions .devices {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#customize-footer-actions .devices button {
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
height: 45px;
|
||||
padding: 0 3px;
|
||||
margin: 0 0 0 -4px;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
-webkit-transition: background .1s ease-in-out;
|
||||
transition: background .1s ease-in-out;
|
||||
}
|
||||
|
||||
#customize-footer-actions .devices button:focus {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#customize-footer-actions .devices button:before {
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 20px/30px "dashicons";
|
||||
vertical-align: top;
|
||||
margin: 3px 0;
|
||||
padding: 4px 8px;
|
||||
color: #656a6f;
|
||||
}
|
||||
|
||||
#customize-footer-actions .devices button.active {
|
||||
border-bottom-color: #191e23;
|
||||
}
|
||||
|
||||
#customize-footer-actions .devices button:hover,
|
||||
#customize-footer-actions .devices button:focus {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#customize-footer-actions .devices button:focus {
|
||||
background-color: #fff;
|
||||
border-bottom-color: #0073aa;
|
||||
}
|
||||
|
||||
#customize-footer-actions .devices button.active:before,
|
||||
#customize-footer-actions .devices button:hover:before,
|
||||
#customize-footer-actions .devices button:focus:before {
|
||||
color: #191e23;
|
||||
}
|
||||
|
||||
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
|
||||
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
|
||||
color: #191e23;
|
||||
}
|
||||
|
||||
#customize-footer-actions .devices .preview-desktop:before {
|
||||
content: "\f472";
|
||||
}
|
||||
|
||||
#customize-footer-actions .devices .preview-tablet:before {
|
||||
content: "\f471";
|
||||
}
|
||||
|
||||
#customize-footer-actions .devices .preview-mobile:before {
|
||||
content: "\f470";
|
||||
}
|
||||
|
||||
@media screen and (max-width:1024px) {
|
||||
#customize-footer-actions .devices {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsed #customize-footer-actions .devices button:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsed #customize-footer-actions .devices .preview-full {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.preview-mobile #customize-preview {
|
||||
margin: auto 0 auto -160px;
|
||||
width: 320px;
|
||||
height: 480px;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.preview-tablet #customize-preview {
|
||||
margin: auto 0 auto -3in;
|
||||
width: 6in;
|
||||
height: 9in;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.widget-reorder-nav span,
|
||||
.menu-item-reorder-nav button {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1480,6 +1480,121 @@ body.full-overlay-active {
|
|||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
/* Device/preview size toggles */
|
||||
|
||||
.wp-full-overlay {
|
||||
background: #191e23;
|
||||
}
|
||||
|
||||
.wp-full-overlay-main {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.expanded .wp-full-overlay-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 45px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.wp-full-overlay-footer .devices {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wp-full-overlay-footer .devices button {
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
height: 45px;
|
||||
padding: 0 3px;
|
||||
margin: 0 0 0 -4px;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
-webkit-transition: background .1s ease-in-out;
|
||||
transition: background .1s ease-in-out;
|
||||
}
|
||||
|
||||
.wp-full-overlay-footer .devices button:focus {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wp-full-overlay-footer .devices button:before {
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 20px/30px "dashicons";
|
||||
vertical-align: top;
|
||||
margin: 3px 0;
|
||||
padding: 4px 8px;
|
||||
color: #656a6f;
|
||||
}
|
||||
|
||||
.wp-full-overlay-footer .devices button.active {
|
||||
border-bottom-color: #191e23;
|
||||
}
|
||||
|
||||
.wp-full-overlay-footer .devices button:hover,
|
||||
.wp-full-overlay-footer .devices button:focus {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.wp-full-overlay-footer .devices button:focus {
|
||||
background-color: #fff;
|
||||
border-bottom-color: #0073aa;
|
||||
}
|
||||
|
||||
.wp-full-overlay-footer .devices button.active:before,
|
||||
.wp-full-overlay-footer .devices button:hover:before,
|
||||
.wp-full-overlay-footer .devices button:focus:before {
|
||||
color: #191e23;
|
||||
}
|
||||
|
||||
.wp-full-overlay-footer .devices .preview-desktop:before {
|
||||
content: "\f472";
|
||||
}
|
||||
|
||||
.wp-full-overlay-footer .devices .preview-tablet:before {
|
||||
content: "\f471";
|
||||
}
|
||||
|
||||
.wp-full-overlay-footer .devices .preview-mobile:before {
|
||||
content: "\f470";
|
||||
}
|
||||
|
||||
@media screen and (max-width:1024px) {
|
||||
.wp-full-overlay-footer .devices {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsed .wp-full-overlay-footer .devices button:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-mobile .wp-full-overlay-main {
|
||||
margin: auto 0 auto -160px;
|
||||
width: 320px;
|
||||
height: 480px;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.preview-tablet .wp-full-overlay-main {
|
||||
margin: auto 0 auto -3in;
|
||||
width: 6in; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
|
||||
height: 9in;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
24.0 - Customize Loader
|
||||
------------------------------------------------------------------------------*/
|
||||
|
|
@ -1600,7 +1715,7 @@ body.full-overlay-active {
|
|||
}
|
||||
|
||||
.theme-install-overlay .wp-full-overlay-main {
|
||||
position: relative;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -756,6 +756,7 @@ themes.view.Preview = themes.view.Details.extend({
|
|||
events: {
|
||||
'click .close-full-overlay': 'close',
|
||||
'click .collapse-sidebar': 'collapse',
|
||||
'click .devices button': 'previewDevice',
|
||||
'click .previous-theme': 'previousTheme',
|
||||
'click .next-theme': 'nextTheme',
|
||||
'keyup': 'keyEvent'
|
||||
|
|
@ -765,11 +766,16 @@ themes.view.Preview = themes.view.Details.extend({
|
|||
html: themes.template( 'theme-preview' ),
|
||||
|
||||
render: function() {
|
||||
var self = this,
|
||||
var self = this, currentPreviewDevice,
|
||||
data = this.model.toJSON();
|
||||
|
||||
this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) );
|
||||
|
||||
currentPreviewDevice = this.$el.data( 'current-preview-device' );
|
||||
if ( currentPreviewDevice ) {
|
||||
self.tooglePreviewDeviceButtons( currentPreviewDevice );
|
||||
}
|
||||
|
||||
themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
|
||||
|
||||
this.$el.fadeIn( 200, function() {
|
||||
|
|
@ -815,6 +821,29 @@ themes.view.Preview = themes.view.Details.extend({
|
|||
return false;
|
||||
},
|
||||
|
||||
previewDevice: function( event ) {
|
||||
var device = $( event.currentTarget ).data( 'device' );
|
||||
|
||||
this.$el
|
||||
.removeClass( 'preview-desktop preview-tablet preview-mobile' )
|
||||
.addClass( 'preview-' + device )
|
||||
.data( 'current-preview-device', device );
|
||||
|
||||
this.tooglePreviewDeviceButtons( device );
|
||||
},
|
||||
|
||||
tooglePreviewDeviceButtons: function( newDevice ) {
|
||||
var $devices = $( '.wp-full-overlay-footer .devices' );
|
||||
|
||||
$devices.find( 'button' )
|
||||
.removeClass( 'active' )
|
||||
.attr( 'aria-pressed', false );
|
||||
|
||||
$devices.find( 'button.preview-' + newDevice )
|
||||
.addClass( 'active' )
|
||||
.attr( 'aria-pressed', true );
|
||||
},
|
||||
|
||||
keyEvent: function( event ) {
|
||||
// The escape key closes the preview
|
||||
if ( event.keyCode === 27 ) {
|
||||
|
|
|
|||
|
|
@ -277,6 +277,11 @@ if ( $tab ) {
|
|||
</div>
|
||||
</div>
|
||||
<div class="wp-full-overlay-footer">
|
||||
<div class="devices">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
|
||||
<span class="collapse-sidebar-arrow"></span>
|
||||
<span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue