smaller interface

graphql-editor · Jan 2, 2024 · f704342 · f704342
1 parent 8eef1bd
commit f704342
Show file tree

Hide file tree

Showing 14 changed files with 122 additions and 132 deletions.
diff --git a/packages/editor/src/editor/Editor.tsx b/packages/editor/src/editor/Editor.tsx
@@ -342,7 +342,15 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
               />
             )}
             {routes.pane === "docs" && <Docs />}
-            <NodeNavigation />
+            <NodeNavigation
+              isCollapsed={routes.navigationCollapsed}
+              setIsCollapsed={(collapsed) => {
+                set({
+                  ...routes,
+                  navigationCollapsed: collapsed,
+                });
+              }}
+            />
             {!!codeErrors.length &&
               (routes.pane === "docs" || routes.pane === "relation") && (
                 <ErrorsList>{errorsItems}</ErrorsList>

diff --git a/packages/editor/src/editor/EmbeddedEditor.tsx b/packages/editor/src/editor/EmbeddedEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useErrorsState, useTheme, useTreesState } from "@/state/containers";
 import { EditorTheme } from "@/gshared/theme/MainTheme";
 import styled from "@emotion/styled";
@@ -51,6 +51,7 @@ export const EmbeddedEditor = ({ schema, theme }: EmbeddedEditorProps) => {
   const { setTheme } = useTheme();
   const { generateTreeFromSchema } = useTreesState();
   const { codeErrors, errorsItems } = useErrorsState();
+  const [isCollapsed, setIsCollapsed] = useState<boolean>();
 
   useEffect(() => {
     if (theme) {
@@ -79,7 +80,10 @@ export const EmbeddedEditor = ({ schema, theme }: EmbeddedEditorProps) => {
             //noop
           }}
         />
-        <NodeNavigation />
+        <NodeNavigation
+          isCollapsed={isCollapsed}
+          setIsCollapsed={(c) => setIsCollapsed(c)}
+        />
       </ErrorOuterContainer>
       {!!codeErrors.length && <ErrorsList>{errorsItems}</ErrorsList>}
     </Main>

diff --git a/packages/editor/src/editor/code/guild/editor/GqlSchemaEditor.tsx b/packages/editor/src/editor/code/guild/editor/GqlSchemaEditor.tsx
@@ -84,7 +84,15 @@ function BaseGqlEditor(props: GqlSchemaEditorProps) {
           props.setGql(newValue);
         }
       }}
-      options={{ glyphMargin: true, ...(props.options || {}) }}
+      options={{
+        glyphMargin: true,
+        lineNumbersMinChars: 2,
+        minimap: {
+          enabled: true,
+          size: "fit",
+        },
+        ...(props.options || {}),
+      }}
       language="graphql"
       value={props.gql}
     />

diff --git a/packages/editor/src/editor/code/guild/editor/LiveSchemaEditor.tsx b/packages/editor/src/editor/code/guild/editor/LiveSchemaEditor.tsx
@@ -128,7 +128,16 @@ function BaseSchemaEditor(
             });
         }
       }}
-      options={{ glyphMargin: true, ...(props.options || {}) }}
+      options={{
+        glyphMargin: true,
+        lineNumbersMinChars: 2,
+        fontSize: 11,
+        minimap: {
+          enabled: true,
+          size: "fit",
+        },
+        ...(props.options || {}),
+      }}
       language="graphql"
       defaultValue={props.schema?.code}
     />

diff --git a/packages/editor/src/editor/code/guild/editor/SchemaDiffEditor.tsx b/packages/editor/src/editor/code/guild/editor/SchemaDiffEditor.tsx
@@ -51,7 +51,15 @@ function BaseSchemaDiffEditor(
         modifiedSchemaService.setEditor(editor.getModifiedEditor());
         props.onMount && props.onMount(editor, monaco);
       }}
-      options={{ glyphMargin: true, ...(props.options || {}) }}
+      options={{
+        glyphMargin: true,
+        lineNumbersMinChars: 2,
+        minimap: {
+          enabled: true,
+          size: "fit",
+        },
+        ...(props.options || {}),
+      }}
       language="graphql"
     />
   );

diff --git a/packages/editor/src/editor/code/monaco/theme.ts b/packages/editor/src/editor/code/monaco/theme.ts
@@ -1,46 +1,46 @@
-import type * as monaco from 'monaco-editor';
-import { themed } from '@/Theming/utils';
+import type * as monaco from "monaco-editor";
+import { themed } from "@/Theming/utils";
 
 const rules = themed<monaco.editor.ITokenThemeRule[]>(
   ({ colors, text, accents }) => [
-    { token: 'keyword.gql', foreground: accents[100] },
-    { token: 'type.identifier.gql', foreground: accents[200] },
-    { token: 'key.identifier.gql', foreground: text.active },
-    { token: 'keyword', foreground: accents[100] },
-    { token: 'annotation', foreground: text.default },
-    { token: '', foreground: text.active },
-    { token: 'string.md', foreground: text.default },
-    { token: 'keyword.md', foreground: accents[100], fontStyle: 'bold' },
-    { token: 'string.gql', foreground: text.default },
-    { token: 'number.gql', foreground: text.contrast },
-    { token: 'delimiter.square.gql', foreground: accents[500] },
-    { token: 'delimiter.curly.gql', foreground: accents[500] },
-    { token: 'delimiter.parenthesis.gql', foreground: accents[500] },
+    { token: "keyword.gql", foreground: accents[100] },
+    { token: "type.identifier.gql", foreground: accents[200] },
+    { token: "key.identifier.gql", foreground: text.active },
+    { token: "keyword", foreground: accents[100] },
+    { token: "annotation", foreground: text.default },
+    { token: "", foreground: text.active },
+    { token: "string.md", foreground: text.default },
+    { token: "keyword.md", foreground: accents[100], fontStyle: "bold" },
+    { token: "string.gql", foreground: text.default },
+    { token: "number.gql", foreground: text.contrast },
+    { token: "delimiter.square.gql", foreground: accents[500] },
+    { token: "delimiter.curly.gql", foreground: accents[500] },
+    { token: "delimiter.parenthesis.gql", foreground: accents[500] },
     {
-      token: 'string.quote.gql',
+      token: "string.quote.gql",
       foreground: text.default,
     },
-    { token: 'comment.gql', foreground: text.default },
+    { token: "comment.gql", foreground: text.default },
     {
-      token: 'operator.gql',
-      fontStyle: 'bold',
+      token: "operator.gql",
+      fontStyle: "bold",
       foreground: accents[300],
     },
-  ],
+  ]
 );
 
 const colors = themed<monaco.editor.IColors>(
   ({ neutral, text, error, colors: { scalar } }) => ({
-    'editor.foreground': text.active,
-    'editor.background': neutral[600],
-    'minimap.background': neutral[600],
-    'diffEditor.insertedTextBackground': `${scalar}22`,
-    'diffEditor.removedTextBackground': `${error.dark}22`,
-  }),
+    "editor.foreground": text.active,
+    "editor.background": neutral[600],
+    "minimap.background": neutral[600],
+    "diffEditor.insertedTextBackground": `${scalar}22`,
+    "diffEditor.removedTextBackground": `${error.dark}22`,
+  })
 );
 
 export const theme = themed<monaco.editor.IStandaloneThemeData>((theme) => ({
-  base: 'vs-dark',
+  base: "vs-dark",
   inherit: true,
   rules: rules(theme),
   colors: colors(theme),

diff --git a/packages/editor/src/editor/menu/CollapseArrow.tsx b/packages/editor/src/editor/menu/CollapseArrow.tsx
@@ -2,7 +2,7 @@ import { ChevronLeftDouble } from "@aexol-studio/styling-system";
 import styled from "@emotion/styled";
 import React from "react";
 
-const Container = styled.div<{ isCollapsed: boolean; isRight?: true }>`
+const Container = styled.div<{ isCollapsed?: boolean; isRight?: true }>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12,7 +12,7 @@ const Container = styled.div<{ isCollapsed: boolean; isRight?: true }>`
   border-radius: ${(p) => p.theme.radius}px;
   background-color: ${({ theme }) => theme.neutral[600]};
   position: absolute;
-  z-index: 1;
+  z-index: 2;
   top: 50%;
   right: ${({ isRight }) => (isRight ? "unset" : 0)};
   left: ${({ isRight }) => (isRight ? 0 : "unset")};
@@ -34,7 +34,7 @@ const Container = styled.div<{ isCollapsed: boolean; isRight?: true }>`
 `;
 
 interface CollapseArrowProps {
-  isCollapsed: boolean;
+  isCollapsed?: boolean;
   toggle: () => void;
   isRight?: true;
 }

diff --git a/packages/editor/src/editor/menu/Menu.tsx b/packages/editor/src/editor/menu/Menu.tsx
@@ -25,7 +25,7 @@ const Sidebar = styled.div`
   border-left-width: 1px;
   position: relative;
   transition: width 0.5s ease-in-out;
-  width: calc(2rem + 20px);
+  width: 2rem;
   display: flex;
   flex-direction: column;
   gap: 1px;
@@ -46,7 +46,8 @@ const MenuItem = styled.div<{
   align-items: center;
   color: ${({ theme, isDisabled }) =>
     isDisabled ? theme.text.disabled : theme.text.default};
-  padding: 1rem;
+  width: 2rem;
+  height: 2rem;
   font-family: ${({ theme }) => theme.fontFamilySans};
   cursor: ${({ isDisabled }) => (isDisabled ? "not-allowed" : "pointer")};
   transition: all 0.25s ease;

diff --git a/packages/editor/src/shared/NodeNavigation/NodeList.tsx b/packages/editor/src/shared/NodeNavigation/NodeList.tsx
@@ -24,6 +24,7 @@ const Title = styled.div<TitleProps>`
     empty ? theme.text.disabled : theme.text.active};
   margin: 0;
   padding-bottom: 5px;
+  padding-left: 1rem;
   margin-right: 3px;
   display: flex;
   justify-content: space-between;
@@ -69,7 +70,7 @@ export const NodeList: React.FC<NodeListI> = ({
         open={open}
       >
         <div>{listTitle}</div>
-        {!empty && <ChevronDown />}
+        {!empty && <ChevronDown width={18} />}
       </Title>
       {open &&
         nodeList &&

diff --git a/packages/editor/src/shared/NodeNavigation/SingleNodeInList.tsx b/packages/editor/src/shared/NodeNavigation/SingleNodeInList.tsx
@@ -10,10 +10,8 @@ import {
 import { transition } from "@/vars";
 import {
   Link,
-  EagleEye,
   EyeSlash,
   Eye,
-  Pen,
   Stack,
   DotsHorizontal,
   Typography,
@@ -34,7 +32,7 @@ export const SingleNodeInList: React.FC<{
     name: string;
   };
 }> = ({ node, colorKey, visibleInRelationView, schemaProps }) => {
-  const { setSelectedNodeId, isLibrary, focusNode } = useTreesState();
+  const { setSelectedNodeId, isLibrary } = useTreesState();
   const { toggleNodeVisibility } = useRelationNodesState();
   const { setEditMode } = useRelationsState();
   const ref = createRef<HTMLAnchorElement>();
@@ -79,45 +77,14 @@ export const SingleNodeInList: React.FC<{
       </NodeName>
       {visibleInRelationView && (
         <Actions align="center" gap="0.25rem">
-          <Stack align="center" gap="0.25rem">
-            <SelectedActions
-              className={DOMClassNames.navigationSelectedActions}
-            >
-              <IconContainer
-                isHidden={node.isHidden}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  focusNode(node);
-                }}
-              >
-                <EagleEye height={20} />
-              </IconContainer>
-              <IconContainer
-                isHidden={node.isHidden}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setSelectedNodeId({
-                    source: "navigation",
-                    value: {
-                      id: node.id,
-                      name: node.name,
-                    },
-                  });
-                  setEditMode(node.id);
-                }}
-              >
-                <Pen height={20} />
-              </IconContainer>
-            </SelectedActions>
-          </Stack>
           <IconContainer
             isHidden={node.isHidden}
             onClick={(e) => {
               e.stopPropagation();
               toggleNodeVisibility(node);
             }}
           >
-            {node.isHidden ? <EyeSlash height={20} /> : <Eye height={20} />}
+            {node.isHidden ? <EyeSlash height={16} /> : <Eye height={16} />}
           </IconContainer>
         </Actions>
       )}
@@ -134,12 +101,10 @@ export const SingleSchemaNodeInList: React.FC<{
   const {
     setSelectedNodeId,
     isLibrary,
-    focusNode,
     removeSchemaNodeField,
     setOperationNode,
   } = useTreesState();
   const { toggleNodeVisibility } = useRelationNodesState();
-  const { setEditMode } = useRelationsState();
   const [menuOpen, setMenuOpen] = useState(false);
   const ref = createRef<HTMLAnchorElement>();
 
@@ -170,7 +135,7 @@ export const SingleSchemaNodeInList: React.FC<{
         data-id={node?.id}
       >
         {schemaProps && (
-          <Typography variant="body2" color="active">
+          <Typography variant="caption" color="active">
             {schemaProps.name}
           </Typography>
         )}
@@ -201,32 +166,7 @@ export const SingleSchemaNodeInList: React.FC<{
                     removeSchemaNodeField(schemaProps.operationType);
                   }}
                 >
-                  <Xmark height={20} />
-                </IconContainer>
-                <IconContainer
-                  isHidden={node.isHidden}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    focusNode(node);
-                  }}
-                >
-                  <EagleEye height={20} />
-                </IconContainer>
-                <IconContainer
-                  isHidden={node.isHidden}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setSelectedNodeId({
-                      source: "navigation",
-                      value: {
-                        id: node.id,
-                        name: node.name,
-                      },
-                    });
-                    setEditMode(node.id);
-                  }}
-                >
-                  <Pen height={20} />
+                  <Xmark height={16} />
                 </IconContainer>
               </SelectedActions>
             </>
@@ -240,7 +180,7 @@ export const SingleSchemaNodeInList: React.FC<{
               toggleNodeVisibility(node);
             }}
           >
-            {node.isHidden ? <EyeSlash height={20} /> : <Eye height={20} />}
+            {node.isHidden ? <EyeSlash height={16} /> : <Eye height={16} />}
           </IconContainer>
         ) : (
           <ContextMenu
@@ -253,7 +193,7 @@ export const SingleSchemaNodeInList: React.FC<{
                   setMenuOpen(true);
                 }}
               >
-                <DotsHorizontal height={20} />
+                <DotsHorizontal height={16} />
               </IconContainer>
             )}
           >
@@ -333,17 +273,20 @@ const NodeName = styled.div<{
   align-items: center;
   gap: 0.5rem;
   font-family: ${({ theme }) => theme.fontFamilySans};
-  font-size: 14px;
+  font-size: 0.8rem;
   color: ${({ theme }) => theme.text.default};
   transition: ${transition};
   opacity: ${({ isHidden }) => (isHidden ? 0.25 : 1)};
-  overflow-x: hidden;
-  text-overflow: ellipsis;
+  min-width: 0;
   width: 28ch;
   white-space: nowrap;
   &:hover {
     color: ${({ theme, color }) => theme.colors[color]};
   }
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `;
 
 const IconContainer = styled.div<{