From 78e99419b0f3f6bcca8a4b01226786f8791a48df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= Date: Mon, 4 Nov 2024 14:49:15 +0100 Subject: [PATCH 1/5] Update spacing --- packages/compass-crud/src/components/json-editor.tsx | 3 +-- packages/compass-editor/src/actions-container.tsx | 7 ++++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/compass-crud/src/components/json-editor.tsx b/packages/compass-crud/src/components/json-editor.tsx index 2dda284dba4..64075fa77e7 100644 --- a/packages/compass-crud/src/components/json-editor.tsx +++ b/packages/compass-crud/src/components/json-editor.tsx @@ -45,8 +45,7 @@ const editorDarkModeStyles = css({ }); const actionsGroupStyles = css({ - paddingTop: spacing[2], - paddingRight: spacing[2], + padding: spacing[200], }); export type JSONEditorProps = { diff --git a/packages/compass-editor/src/actions-container.tsx b/packages/compass-editor/src/actions-container.tsx index f309f1de438..5c0c0a4f8ed 100644 --- a/packages/compass-editor/src/actions-container.tsx +++ b/packages/compass-editor/src/actions-container.tsx @@ -14,10 +14,11 @@ type ActionsContainerProps = { const actionsContainerStyle = css({ position: 'absolute', - top: spacing[1], - right: spacing[2], + top: spacing[100], + right: spacing[100], + left: spacing[100], display: 'none', - gap: spacing[2], + gap: spacing[200], }); export const ActionsContainer = ({ From fc7e580866261052f6459becf04f02fda7d1d191 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= Date: Mon, 4 Nov 2024 14:58:03 +0100 Subject: [PATCH 2/5] Fix pointer events css --- packages/compass-editor/src/action-button.tsx | 1 + packages/compass-editor/src/actions-container.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/compass-editor/src/action-button.tsx b/packages/compass-editor/src/action-button.tsx index 86ccbbbfcd7..05e7f3787f1 100644 --- a/packages/compass-editor/src/action-button.tsx +++ b/packages/compass-editor/src/action-button.tsx @@ -12,6 +12,7 @@ export type Action = { const actionButtonStyle = css({ flex: 'none', + pointerEvents: 'all', }); const actionButtonContentStyle = css({ diff --git a/packages/compass-editor/src/actions-container.tsx b/packages/compass-editor/src/actions-container.tsx index 5c0c0a4f8ed..da5e0ae225f 100644 --- a/packages/compass-editor/src/actions-container.tsx +++ b/packages/compass-editor/src/actions-container.tsx @@ -19,6 +19,7 @@ const actionsContainerStyle = css({ left: spacing[100], display: 'none', gap: spacing[200], + pointerEvents: 'none', }); export const ActionsContainer = ({ From 0df35afcb7a54a3e9c22687abb7e9bd92c60ffc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= Date: Tue, 5 Nov 2024 09:17:12 +0100 Subject: [PATCH 3/5] Add expand button --- .../src/components/json-editor.tsx | 10 ++++++++++ packages/compass-editor/src/action-button.tsx | 12 ++++++++++-- .../compass-editor/src/actions-container.tsx | 18 ++++++++++++++++++ packages/compass-editor/src/editor.tsx | 8 +++++++- 4 files changed, 45 insertions(+), 3 deletions(-) diff --git a/packages/compass-crud/src/components/json-editor.tsx b/packages/compass-crud/src/components/json-editor.tsx index 64075fa77e7..3c86cff5c68 100644 --- a/packages/compass-crud/src/components/json-editor.tsx +++ b/packages/compass-crud/src/components/json-editor.tsx @@ -257,6 +257,14 @@ const JSONEditor: React.FunctionComponent = ({ onDeletionFinished, ]); + const toggleExpandCollapse = useCallback(() => { + if (doc.expanded) { + doc.collapse(); + } else { + doc.expand(); + } + }, [doc]); + // Trying to change CodeMirror editor state when an update "effect" is in // progress results in an error which is why we timeout the code mirror update // itself. @@ -296,6 +304,8 @@ const JSONEditor: React.FunctionComponent = ({ className={cx(editorStyles, darkMode && editorDarkModeStyles)} actionsClassName={actionsGroupStyles} completer={completer} + onExpand={editing ? undefined : toggleExpandCollapse} + expanded={expanded} /> div:has(svg)': { + paddingLeft: 3, + paddingRight: 3, + }, +}); + const actionButtonContentStyle = css({ position: 'relative', }); @@ -53,7 +60,8 @@ export const ActionButton: React.FunctionComponent<{ ...args: Parameters> ) => boolean | void; 'data-testid'?: string; -}> = ({ label, icon, onClick, ...props }) => { + compact?: boolean; +}> = ({ label, icon, onClick, compact, ...props }) => { const [clickResult, setClickResult] = useState<'success' | 'error'>( 'success' ); @@ -90,7 +98,7 @@ export const ActionButton: React.FunctionComponent<{ aria-label={label} title={label} onClick={onButtonClick} - className={actionButtonStyle} + className={cx(actionButtonStyle, { [actionCompactButtonStyle]: compact })} data-testid={props['data-testid'] ?? `editor-action-${label}`} >
diff --git a/packages/compass-editor/src/actions-container.tsx b/packages/compass-editor/src/actions-container.tsx index da5e0ae225f..975423d0a4e 100644 --- a/packages/compass-editor/src/actions-container.tsx +++ b/packages/compass-editor/src/actions-container.tsx @@ -10,6 +10,8 @@ type ActionsContainerProps = { customActions?: Action[]; className?: string; editorRef: RefObject; + onExpand?: () => void; + expanded?: boolean; }; const actionsContainerStyle = css({ @@ -22,12 +24,19 @@ const actionsContainerStyle = css({ pointerEvents: 'none', }); +const actionsGroupItemSeparator = css({ + flex: '1 0 auto', + pointerEvents: 'none', +}); + export const ActionsContainer = ({ copyable, formattable, customActions, className, editorRef, + onExpand, + expanded, }: ActionsContainerProps) => { return (
+ {onExpand && ( + + )} + {copyable && ( void; + expanded?: boolean; }; const MultilineEditor = React.forwardRef( @@ -1411,8 +1413,10 @@ const MultilineEditor = React.forwardRef( editorClassName, actionsClassName, darkMode: _darkMode, + onExpand, + expanded, ...props - }, + }: MultilineEditorProps, ref ) { const darkMode = useDarkMode(_darkMode); @@ -1492,6 +1496,8 @@ const MultilineEditor = React.forwardRef( > {hasActions && ( Date: Tue, 5 Nov 2024 09:17:49 +0100 Subject: [PATCH 4/5] Add whitespace to gutters --- packages/compass-editor/src/editor.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/compass-editor/src/editor.tsx b/packages/compass-editor/src/editor.tsx index 394e4db88ce..7bdb7e91eeb 100644 --- a/packages/compass-editor/src/editor.tsx +++ b/packages/compass-editor/src/editor.tsx @@ -1389,6 +1389,13 @@ const multilineEditorContainerWithActionsStyle = css({ minHeight: spacing[5] - 2, }); +const multilineEditorContainerWithExpandStyle = css({ + ['& .cm-gutters']: { + // Offset to prevent the "expand" button from overlapping with fold / unfold icons + paddingLeft: spacing[500], + }, +}); + const multilineEditorContainerDarkModeStyle = css({ backgroundColor: editorPalette.dark.backgroundColor, }); @@ -1473,6 +1480,7 @@ const MultilineEditor = React.forwardRef( multilineEditorContainerStyle, darkMode && multilineEditorContainerDarkModeStyle, hasActions && multilineEditorContainerWithActionsStyle, + onExpand && multilineEditorContainerWithExpandStyle, className )} // We want folks to be able to click into the container element From 8f71a2c26341aedbaa88ae5a7e13bdfac5d59bf9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= Date: Tue, 5 Nov 2024 14:36:03 +0100 Subject: [PATCH 5/5] Adjust expand button offset --- .../compass-editor/src/actions-container.tsx | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/compass-editor/src/actions-container.tsx b/packages/compass-editor/src/actions-container.tsx index 975423d0a4e..dc9e439924b 100644 --- a/packages/compass-editor/src/actions-container.tsx +++ b/packages/compass-editor/src/actions-container.tsx @@ -24,6 +24,12 @@ const actionsContainerStyle = css({ pointerEvents: 'none', }); +const expandContainerStyle = css({ + position: 'relative', + top: -spacing[100], + left: -spacing[100], +}); + const actionsGroupItemSeparator = css({ flex: '1 0 auto', pointerEvents: 'none', @@ -47,12 +53,14 @@ export const ActionsContainer = ({ )} > {onExpand && ( - +
+ +
)} {copyable && (