Cleaned up styling a bit on the editor so it looks polished.

exogee-technology · Feb 21, 2025 · 38615f7 · 38615f7
1 parent eba19ef
commit 38615f7
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 1 deletion.
diff --git a/src/examples/s3-storage/src/frontend/types.generated.ts b/src/examples/s3-storage/src/frontend/types.generated.ts
@@ -72,6 +72,7 @@ export type AdminUiFieldExtensionsMetadata = {
 export type AdminUiFieldMetadata = {
   __typename?: 'AdminUiFieldMetadata';
   attributes?: Maybe<AdminUiFieldAttributeMetadata>;
+  detailPanelInputComponent?: Maybe<DetailPanelInputComponent>;
   extensions?: Maybe<AdminUiFieldExtensionsMetadata>;
   filter?: Maybe<AdminUiFilterMetadata>;
   hideInDetailForm?: Maybe<Scalars['Boolean']['output']>;
@@ -118,6 +119,17 @@ export type DeleteOneFilterInput = {
   id: Scalars['ID']['input'];
 };
 
+export type DetailPanelInputComponent = {
+  __typename?: 'DetailPanelInputComponent';
+  name: DetailPanelInputComponentOption;
+  options?: Maybe<Scalars['JSON']['output']>;
+};
+
+export enum DetailPanelInputComponentOption {
+  RichText = 'RICH_TEXT',
+  Text = 'TEXT'
+}
+
 export type GraphweaverMedia = {
   __typename?: 'GraphweaverMedia';
   filename: Scalars['String']['output'];

diff --git a/src/examples/s3-storage/src/types.generated.ts b/src/examples/s3-storage/src/types.generated.ts
@@ -72,6 +72,7 @@ export type AdminUiFieldExtensionsMetadata = {
 export type AdminUiFieldMetadata = {
   __typename?: 'AdminUiFieldMetadata';
   attributes?: Maybe<AdminUiFieldAttributeMetadata>;
+  detailPanelInputComponent?: Maybe<DetailPanelInputComponent>;
   extensions?: Maybe<AdminUiFieldExtensionsMetadata>;
   filter?: Maybe<AdminUiFilterMetadata>;
   hideInDetailForm?: Maybe<Scalars['Boolean']['output']>;
@@ -118,6 +119,17 @@ export type DeleteOneFilterInput = {
   id: Scalars['ID']['input'];
 };
 
+export type DetailPanelInputComponent = {
+  __typename?: 'DetailPanelInputComponent';
+  name: DetailPanelInputComponentOption;
+  options?: Maybe<Scalars['JSON']['output']>;
+};
+
+export enum DetailPanelInputComponentOption {
+  RichText = 'RICH_TEXT',
+  Text = 'TEXT'
+}
+
 export type GraphweaverMedia = {
   __typename?: 'GraphweaverMedia';
   filename: Scalars['String']['output'];

diff --git a/src/examples/xero/src/frontend/types.generated.ts b/src/examples/xero/src/frontend/types.generated.ts
@@ -204,6 +204,7 @@ export type AdminUiFieldExtensionsMetadata = {
 export type AdminUiFieldMetadata = {
   __typename?: 'AdminUiFieldMetadata';
   attributes?: Maybe<AdminUiFieldAttributeMetadata>;
+  detailPanelInputComponent?: Maybe<DetailPanelInputComponent>;
   extensions?: Maybe<AdminUiFieldExtensionsMetadata>;
   filter?: Maybe<AdminUiFilterMetadata>;
   hideInDetailForm?: Maybe<Scalars['Boolean']['output']>;
@@ -250,6 +251,17 @@ export type DeleteOneFilterInput = {
   id: Scalars['ID']['input'];
 };
 
+export type DetailPanelInputComponent = {
+  __typename?: 'DetailPanelInputComponent';
+  name: DetailPanelInputComponentOption;
+  options?: Maybe<Scalars['JSON']['output']>;
+};
+
+export enum DetailPanelInputComponentOption {
+  RichText = 'RICH_TEXT',
+  Text = 'TEXT'
+}
+
 export type Mutation = {
   __typename?: 'Mutation';
   /** Create a single Account. */

diff --git a/src/examples/xero/src/types.generated.ts b/src/examples/xero/src/types.generated.ts
@@ -204,6 +204,7 @@ export type AdminUiFieldExtensionsMetadata = {
 export type AdminUiFieldMetadata = {
   __typename?: 'AdminUiFieldMetadata';
   attributes?: Maybe<AdminUiFieldAttributeMetadata>;
+  detailPanelInputComponent?: Maybe<DetailPanelInputComponent>;
   extensions?: Maybe<AdminUiFieldExtensionsMetadata>;
   filter?: Maybe<AdminUiFilterMetadata>;
   hideInDetailForm?: Maybe<Scalars['Boolean']['output']>;
@@ -250,6 +251,17 @@ export type DeleteOneFilterInput = {
   id: Scalars['ID']['input'];
 };
 
+export type DetailPanelInputComponent = {
+  __typename?: 'DetailPanelInputComponent';
+  name: DetailPanelInputComponentOption;
+  options?: Maybe<Scalars['JSON']['output']>;
+};
+
+export enum DetailPanelInputComponentOption {
+  RichText = 'RICH_TEXT',
+  Text = 'TEXT'
+}
+
 export type Mutation = {
   __typename?: 'Mutation';
   /** Create a single Account. */

diff --git a/src/packages/admin-ui-components/src/date-picker/styles.module.css b/src/packages/admin-ui-components/src/date-picker/styles.module.css
@@ -74,7 +74,7 @@
 
 .popup {
 	position: absolute;
-	z-index: 2;
+	z-index: 1000;
 	top: 95%;
 	background-color: #1c1725;
 	border: 1px solid var(--detail-border-color);
@@ -110,6 +110,7 @@
 	color: var(--body-copy-color);
 	border-radius: 6px 0px 0px 6px;
 	padding-right: 10px;
+	outline: 1px solid var(--body-copy-color);
 }
 
 /* Styling overrides for react-day-picker */

diff --git a/src/packages/admin-ui-components/src/detail-panel/fields/rich-text-field/component.tsx b/src/packages/admin-ui-components/src/detail-panel/fields/rich-text-field/component.tsx
@@ -48,6 +48,14 @@ export const RichTextField = (props: Props) => {
 					setValue(props.editor.getHTML());
 				}}
 				editable={!isReadOnly}
+				editorContainerProps={{
+					className: styles.editorContainer,
+				}}
+				editorProps={{
+					attributes: {
+						class: styles.editor,
+					},
+				}}
 			/>
 		</div>
 	);

diff --git a/src/packages/admin-ui-components/src/detail-panel/fields/rich-text-field/styles.module.css b/src/packages/admin-ui-components/src/detail-panel/fields/rich-text-field/styles.module.css
@@ -122,3 +122,13 @@
 	white-space: revert;
 	word-wrap: revert;
 }
+
+/* We want the focus rectangle to appear all the way around the editor and toolbar,
+   so hide the outline on the text box and add a border to the richText container. */
+.richText:focus-within {
+	border: 1px solid var(--body-copy-color);
+}
+
+.editor:focus {
+	outline: none;
+}