Refresh Support Parrot admin UI/UX

inc/css/parrot.css

@@ -1,3 +1,198 @@
+/* Support Parrot admin screen */
+.ti-parrot-wrap {
+	max-width: 900px;
+}
+
+.ti-parrot-header {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	margin: 10px 0 20px;
+}
+
+.ti-parrot-header h1 {
+	margin: 0;
+	padding: 0;
+	font-size: 23px;
+	font-weight: 600;
+	line-height: 1.3;
+}
+
+.ti-parrot-logo {
+	width: auto;
+	height: 32px;
+	display: block;
+}
+
+.ti-parrot-header-sep {
+	width: 1px;
+	height: 26px;
+	background: #c3c4c7;
+}
+
+.ti-parrot-notice {
+	max-width: 720px;
+	margin: 0 0 16px;
+}
+
+.ti-parrot-status {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 14px;
+	margin-bottom: 16px;
+	border: 1px solid;
+	border-radius: 6px;
+	font-size: 14px;
+}
+
+.ti-parrot-status .dashicons {
+	width: 20px;
+	height: 20px;
+	font-size: 20px;
+	flex: 0 0 auto;
+}
+
+.ti-parrot-status--active {
+	background: #edfaef;
+	border-color: #b8e6c1;
+	color: #135e96;
+}
+
+.ti-parrot-status--active .dashicons {
+	color: #00a32a;
+}
+
+.ti-parrot-status--inactive {
+	background: #f6f7f7;
+	border-color: #dcdcde;
+	color: #50575e;
+}
+
+.ti-parrot-status--inactive .dashicons {
+	color: #8c8f94;
+}
+
+.ti-parrot-card {
+	background: #fff;
+	border: 1px solid #c3c4c7;
+	border-radius: 6px;
+	padding: 16px 20px;
+	margin-bottom: 16px;
+	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.04 );
+}
+
+.ti-parrot-intro p {
+	margin: 0 0 6px;
+	font-size: 14px;
+	line-height: 1.6;
+	color: #3c434a;
+}
+
+.ti-parrot-intro p:last-child {
+	margin-bottom: 0;
+}
+
+.ti-parrot-intro-hint {
+	color: #646970;
+	font-size: 13px;
+	font-weight: 600;
+}
+
+.ti-parrot-details-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	margin-bottom: 4px;
+}
+
+.ti-parrot-details-title {
+	font-size: 14px;
+	font-weight: 600;
+	color: #1d2327;
+}
+
+.ti-parrot-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 10px 0;
+	border-top: 1px solid #f0f0f1;
+}
+
+.ti-parrot-row-label {
+	flex: 0 0 150px;
+	font-size: 13px;
+	color: #646970;
+}
+
+.ti-parrot-row-value {
+	flex: 1;
+	text-align: right;
+	font-size: 13px;
+	color: #1d2327;
+	word-break: break-all;
+}
+
+.ti-parrot-mono {
+	font-family: Consolas, Monaco, monospace;
+}
+
+.ti-parrot-copy .dashicons {
+	width: 18px;
+	height: 18px;
+	font-size: 18px;
+	vertical-align: text-bottom;
+}
+
+.ti-parrot-copy-label {
+	margin-left: 4px;
+}
+
+.ti-parrot-copy.ti-parrot-copied {
+	border-color: #00a32a;
+	color: #00a32a;
+}
+
+.ti-parrot-copy.button-primary.ti-parrot-copied {
+	background: #00a32a;
+	border-color: #00a32a;
+	color: #fff;
+}
+
+.ti-parrot-copy.button-primary.ti-parrot-copied:hover,
+.ti-parrot-copy.button-primary.ti-parrot-copied:focus {
+	background: #00a32a;
+	border-color: #00a32a;
+	color: #fff;
+}
+
+.ti-parrot-expiry {
+	margin: 12px 0 0;
+	font-size: 12px;
+	color: #646970;
+}
+
+.ti-parrot-actions {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.ti-parrot-actions .ti-parrot-release {
+	color: #b32d2e;
+	border-color: #b32d2e;
+	background: #fff;
+}
+
+.ti-parrot-actions .ti-parrot-release:hover,
+.ti-parrot-actions .ti-parrot-release:focus {
+	color: #fff;
+	background: #b32d2e;
+	border-color: #b32d2e;
+}
+
 #pp-log-console .pp-log {
 	overflow: hidden;
 }

inc/js/parrot.js

@@ -7,6 +7,19 @@
 	);
 
 	function init() {
+		$( document ).on(
+			"click", ".ti-parrot-copy", function( e ){
+				e.preventDefault();
+				var button = this;
+				var text   = button.getAttribute( "data-clipboard-text" ) || "";
+				copyText( text ).then(
+					function(){
+						showCopied( button );
+					}
+				).catch( function(){} );
+			}
+		);
+
         $( '#pp-flush' ).on(
 			"click", function(e){
 				e.preventDefault();
@@ -83,6 +96,62 @@
 		);
 	}
 
+	function copyText( text ) {
+		if ( navigator.clipboard && navigator.clipboard.writeText ) {
+			return navigator.clipboard.writeText( text ).catch( function(){
+				return legacyCopy( text );
+			} );
+		}
+		return legacyCopy( text );
+	}
+
+	function legacyCopy( text ) {
+		return new Promise(
+			function( resolve, reject ){
+				var area            = document.createElement( "textarea" );
+				var ok              = false;
+				area.value          = text;
+				area.style.position = "fixed";
+				area.style.opacity  = "0";
+				document.body.appendChild( area );
+				area.focus();
+				area.select();
+				try {
+					ok = document.execCommand( "copy" );
+				} catch ( err ) {}
+				document.body.removeChild( area );
+				if ( ok ) {
+					resolve();
+				} else {
+					reject( new Error( "copy_failed" ) );
+				}
+			}
+		);
+	}
+
+	function showCopied( button ) {
+		var $button = $( button );
+		var $icon   = $button.find( ".dashicons" );
+		var $label  = $button.find( ".ti-parrot-copy-label" );
+		var prev    = $label.length ? $label.text() : "";
+
+		$button.addClass( "ti-parrot-copied" );
+		$icon.removeClass( "dashicons-clipboard" ).addClass( "dashicons-yes" );
+		if ( $label.length ) {
+			$label.text( ( typeof pp !== "undefined" && pp.copied ) ? pp.copied : "Copied!" );
+		}
+
+		setTimeout(
+			function(){
+				$button.removeClass( "ti-parrot-copied" );
+				$icon.removeClass( "dashicons-yes" ).addClass( "dashicons-clipboard" );
+				if ( $label.length ) {
+					$label.text( prev );
+				}
+			}, 1600
+		);
+	}
+
 	function showSpinner() {
 		$( '#pp-spinner' ).css( 'visibility', 'visible' ).attr( 'aria-hidden', 'false' ).show();
 	}