chore: design changes for field preview

Codeinwp · Jul 7, 2023 · 94fbc40 · 94fbc40
1 parent bfa1eb0
commit 94fbc40
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 40 deletions.
diff --git a/src/blocks/blocks/content-generator/edit.js b/src/blocks/blocks/content-generator/edit.js
@@ -31,6 +31,7 @@ import Inspector from './inspector.js';
 import PromptPlaceholder from '../../components/prompt';
 import { parseFormPromptResponseToBlocks } from '../../helpers/prompt';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 const { attributes: defaultAttributes } = metadata;
 
@@ -159,13 +160,16 @@ const ContentGenerator = ({
 					onSuccess={onSuccess}
 				/>
 
-				<Disabled>
-					<InnerBlocks renderAppender={false}/>
-				</Disabled>
-
+				{
+					hasInnerBlocks ? (
+						<Disabled>
+							<InnerBlocks renderAppender={false}/>
+						</Disabled>
+					) : ''
+				}
 
 				{
-					showActionsButton && (
+					showActionsButton ? (
 						<div className="o-actions">
 							<Button
 								variant={ 'primary' }
@@ -193,7 +197,7 @@ const ContentGenerator = ({
 								}}
 							/>
 						</div>
-					)
+					) : ''
 				}
 
 			</div>

diff --git a/src/blocks/components/prompt/editor.scss b/src/blocks/components/prompt/editor.scss
@@ -4,36 +4,34 @@
 		flex-direction: column;
 	}
 
-	.prompt-placeholder__block-generation__container {
-		margin: 10px;
-		display: flex;
-		flex-direction: column;
-		padding: 10px;
-		border-radius: 10px;
-		gap: 10px;
+
+
+	.history-display {
+		padding: 0px 20px;
 		font-size: 1.2em;
+	}
+}
 
-		background-color: #FAA26A;
+.prompt-fields {
+	margin: 10px;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	padding: 10px;
+	border-radius: 10px;
+	gap: 10px;
+	font-size: 13px;
 
-		.prompt-placeholder__block-generation__field {
-			display: flex;
-			flex-direction: row;
-			gap: 10px;
-			align-items: center;
-		}
+	.prompt-column-title {
+		text-transform: uppercase;
+	}
 
-		.prompt-placeholder__block-generation__field__type {
-			padding: 1px 5px;
-			background-color: azure;
-			border-radius: 5px;
-			min-width: 100px;
-			text-align: center;
-		}
+	.prompt-field__label, .prompt-field__type {
+		padding: 12px 16px;
 	}
 
-	.history-display {
-		padding: 0px 20px;
-		font-size: 1.2em;
+	.prompt-field__label {
+		border-radius: 3px;
+		background: rgba(159, 171, 178, 0.20);
 	}
 }
 

diff --git a/src/blocks/components/prompt/index.tsx b/src/blocks/components/prompt/index.tsx
@@ -35,17 +35,23 @@ export const apiKeyName = 'themeisle_open_ai_api_key';
 
 const BlockGenerationArea = ( props: { result?: string }) => {
 	return (
-		<div className="prompt-placeholder__block-generation__container" >
+		<div className="prompt-fields" >
+			<div className="prompt-column-title">
+				{ __( 'Label', 'otter-blocks' ) }
+			</div>
+			<div className="prompt-column-title">
+				{ __( 'Field Type', 'otter-blocks' ) }
+			</div>
 			{ props.result?.length && parseToDisplayPromptResponse( props.result ).map( field => {
 				return (
-					<div className="prompt-placeholder__block-generation__field">
-						<div className="prompt-placeholder__block-generation__field__type">
-							{ field.type }
-						</div>
-						<div className="prompt-placeholder__block-generation__field__label">
+					<Fragment>
+						<div className="prompt-field__label">
 							{ field.label }
 						</div>
-					</div>
+						<div className="prompt-field__type">
+							{ field.type }
+						</div>
+					</Fragment>
 				);
 			}) }
 		</div>
@@ -104,6 +110,7 @@ const PromptResultArea = (
 									variant={'tertiary'}
 									icon={undo}
 									onClick={ props.onPrevResult }
+									disabled={ 1 === props.currentResultIndex }
 								/>
 
 								<div className="prompt-result__actions__navigation__current">
@@ -114,6 +121,7 @@ const PromptResultArea = (
 									variant={'tertiary'}
 									icon={redo}
 									onClick={ props.onNextResult }
+									disabled={ props.totalResults === props.currentResultIndex }
 								/>
 							</Fragment>
 						)
@@ -139,7 +147,7 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 	const [ resultHistory, setResultHistory ] = useState<string[]>([]);
 	const [ resultHistoryIndex, setResultHistoryIndex ] = useState<number>( 0 );
 
-	const [ showResultArea, setShowResultArea ] = useState<boolean>( true );
+	const [ showResultArea, setShowResultArea ] = useState<boolean>( false );
 
 	const onSuccessActions = {
 		clearHistory: () => {
@@ -312,7 +320,7 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 								onSuccess?.( result, onSuccessActions );
 							}
 						}
-						currentResultIndex={ resultHistoryIndex }
+						currentResultIndex={ resultHistoryIndex + 1 }
 						totalResults={ resultHistory.length }
 						onPrevResult={() => {
 							setResultHistoryIndex( resultHistoryIndex - 1 );
@@ -323,7 +331,7 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 						onClose={() => {
 							setShowResultArea( false );
 						}}
-						mainActionName={props.resultAreaTitle}
+						mainActionName={props.resutActionLabel}
 					>
 						<BlockGenerationArea result={ result } />
 					</PromptResultArea>