Improve styling and behavior of AMP preview button

ampproject · Dec 7, 2017 · 5c5074e · 5c5074e
1 parent 1134bb1
commit 5c5074e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 12 deletions.
diff --git a/assets/css/amp-post-meta-box.css b/assets/css/amp-post-meta-box.css
@@ -5,26 +5,22 @@
 */
 
 /* Core preview button */
-#post-preview.without-amp {
+.wp-core-ui #preview-action.has-amp-preview #post-preview {
 	border-top-right-radius: 0;
 	border-bottom-right-radius: 0;
 	float: none;
 }
 
 /* AMP preview button */
-#amp-post-preview {
+.wp-core-ui #amp-post-preview.preview {
 	border-top-left-radius: 0;
 	border-bottom-left-radius: 0;
 	text-indent: -9999px;
 	width: 30px;
-	background-image: url( '../images/amp-icon.svg' );
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: 14px;
+	background: no-repeat center url( '../images/amp-icon.svg' ) !important; /* Important needed due to .disabled rule in buttons.css */
+	background-size: 14px !important;
 }
-
-#amp-post-preview.amp-disabled {
-	box-shadow: none;
+.wp-core-ui #amp-post-preview.preview.disabled {
 	opacity: 0.7;
 }
 

diff --git a/assets/js/amp-post-meta-box.js b/assets/js/amp-post-meta-box.js
@@ -83,7 +83,7 @@ var ampPostMetaBox = ( function( $ ) {
 		} );
 
 		$( '#submitpost input[type="submit"]' ).on( 'click', function() {
-			$( component.ampPreviewBtnSelector ).addClass( 'amp-disabled' );
+			$( component.ampPreviewBtnSelector ).addClass( 'disabled' );
 		} );
 	};
 
@@ -104,8 +104,7 @@ var ampPostMetaBox = ( function( $ ) {
 			} )
 			.text( component.data.l10n.ampPreviewBtnLabel )
 			.parent()
-			.addClass( 'has-next-sibling' );
-		previewBtn.addClass( 'without-amp' );
+			.addClass( 'has-amp-preview' );
 	};
 
 	/**