Merge pull request #208 from ahmadawais/feature/issue-56-post-date-co…

…ntrol Feature/issue 56 Post Date Control Reset UI
xwp · Aug 1, 2016 · ad6751d · ad6751d
2 parents ebf331e + 04efe42
commit ad6751d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/css/customize-posts.css b/css/customize-posts.css
@@ -106,7 +106,7 @@
 	transition: all 0.2s;
 	visibility: hidden;
 }
- 
+
 body.customize-posts-content-editor-pane-resize #customize-preview,
 body.customize-posts-content-editor-pane-resize #customize-posts-content-editor-pane {
 	-webkit-transition: none;
@@ -234,4 +234,15 @@ body.customize-posts-content-editor-pane-resize #customize-preview:before {
 	-webkit-appearance: none;
 	margin: 0;
 }
-
+.wrap-reset-time {
+	font-weight: normal;
+	font-size: 75%;
+}
+.customize-control-post_date .reset-time {
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	border: none;
+    background: none;
+    color: #008ec2;
+    cursor: pointer;
+}
diff --git a/dev-lib b/dev-lib
diff --git a/js/customize-post-date-control.js b/js/customize-post-date-control.js
@@ -33,6 +33,7 @@
 			control.deferred.embedded.done( function() {
 				control.dateInputs = control.container.find( '.date-input' );
 				control.resetTimeButton = control.container.find( '.reset-time' );
+				control.resetTimeWrap = control.container.find( '.wrap-reset-time' );
 				control.scheduledCountdownContainer = control.container.find( '.scheduled-countdown' );
 				control.scheduledCountdownTemplate = wp.template( 'customize-posts-scheduled-countdown' );
 
@@ -119,9 +120,11 @@
 					}
 				} );
 				control.resetTimeButton.hide();
+				control.resetTimeWrap.hide();
 			} else {
 				control.dateInputs.prop( 'placeholder', '' );
 				control.resetTimeButton.show();
+				control.resetTimeWrap.show();
 			}
 		},
 

diff --git a/php/class-wp-customize-post-date-control.php b/php/class-wp-customize-post-date-control.php
@@ -56,7 +56,10 @@ protected function content_template() {
 		_.defaults( data, <?php echo wp_json_encode( $data ) ?> );
 		data.input_id = 'input-' + String( Math.random() );
 		#>
-		<span class="customize-control-title"><label for="{{ data.input_id }}">{{ data.label }}</label></span>
+		<span class="customize-control-title">
+			<label for="{{ data.input_id }}">{{ data.label }}</label>
+			<span class="wrap-reset-time">(<button type="button" class="reset-time"><?php esc_html_e( 'Reset', 'customize-posts' ) ?></button>)</span>
+		</span>
 		<div class="date-inputs">
 			<select id="{{ data.input_id }}" class="date-input month" data-component="month">
 				<# _.each( data.choices, function( choice ) { #>
@@ -94,7 +97,6 @@ protected function content_template() {
 			}
 			?>
 			<span class="timezone-info"><?php echo esc_html( $date_control_description ); ?></span>
-			<button type="button" class="button button-secondary reset-time"><?php esc_html_e( 'Reset to current time', 'customize-posts' ) ?></button>
 		</small>
 		<?php
 	}