Consolidates layers and styles to one tab

Author: mrmrs

packages/gui/src/components/html/Editor.tsx

@@ -38,7 +38,21 @@ const TABS_TRIGGER_STYLES: any = {
 const TABS_CONTENT_STYLES: any = {
   width: 400,
   height: 'calc(100vh - 81px)',
-  overflow: 'auto',
+  maxHeight: '100%',
+  overflow: 'hidden',
+  resize: 'horizontal',
+  borderRightWidth: '1px',
+  borderRightStyle: 'solid',
+  borderColor: 'border',
+  '&::-webkit-scrollbar': { display: 'none' },
+  scrollbarWidth: 0,
+}
+
+const TABS_EDITOR_STYLES: any = {
+  width: '400px',
+  height: 'calc(100vh - 81px)',
+  maxHeight: '100%',
+  overflow: 'hidden',
   resize: 'horizontal',
   borderRightWidth: '1px',
   borderRightStyle: 'solid',
@@ -103,10 +117,7 @@ export function HtmlEditor() {
           }}
         >
           <Tabs.Trigger sx={TABS_TRIGGER_STYLES} value="node">
-            <span>🎨</span> Styles
-          </Tabs.Trigger>
-          <Tabs.Trigger sx={TABS_TRIGGER_STYLES} value="tree">
-            <Layers size={12} /> Layers
+            <span>🎨</span> Editor
           </Tabs.Trigger>
           <Tabs.Trigger sx={TABS_TRIGGER_STYLES} value="import">
             <LogIn size={12} /> Import
@@ -115,8 +126,8 @@ export function HtmlEditor() {
             <Code size={12} /> Export
           </Tabs.Trigger>
         </Tabs.List>
-        <Tabs.Content sx={TABS_CONTENT_STYLES} value="node">
-          <div sx={{ pt: 3, px: 3 }}>
+        <Tabs.Content sx={TABS_EDITOR_STYLES} value="node">
+          <div sx={{ pt: 3, px: 3, resize: 'vertical', overflowY: 'scroll', height: '50vh' }}>
             <Editor
               key={selected.join('-')}
               theme={theme}
@@ -129,9 +140,7 @@ export function HtmlEditor() {
               showAddProperties
             />
           </div>
-        </Tabs.Content>
-        <Tabs.Content sx={TABS_CONTENT_STYLES} value="tree">
-          <div>
+            <div sx={{ height: '50%', position: 'relative', }}>
             <NodeEditor
               value={nodeValue}
               onChange={(newItem) =>
@@ -150,13 +159,17 @@ export function HtmlEditor() {
                 setSelected(newPath)
               }}
             />
-            <TreeNode
-              value={value}
-              onSelect={setSelected}
-              path={[]}
-              onChange={onChange}
-            />
-          </div>
+            <div sx={{ height: '100%', overflow: 'scroll', resize: 'vertical', borderBottomWidth: '1px', borderBottomStyle: 'solid', borderBottomColor: 'border' }}>
+              <div sx={{ pb: '480px', minHeight: '100%' }}>
+                <TreeNode
+                  value={value}
+                  onSelect={setSelected}
+                  path={[]}
+                  onChange={onChange}
+                />
+              </div>
+            </div>
+            </div>
         </Tabs.Content>
         <Tabs.Content sx={TABS_CONTENT_STYLES} value="import">
           <Import onChange={onChange} />

packages/gui/src/components/html/Editors/NodeEditor.tsx

@@ -46,14 +46,17 @@ export function NodeEditor({
         minHeight: '4px',
         height: 'auto',
         resize: 'vertical',
-        position: 'sticky',
-        top: 0,
         boxSizing: 'border-box',
-        overflowX: 'hidden',
         borderBottomWidth: '1px',
         borderBottomStyle: 'solid',
         borderBottomColor: 'border',
-        zIndex: 4,
+        zIndex: 9999,
+        position: 'sticky',
+        top: 0,
+        overflowY: 'scroll',
+        borderTopWidth: '4px',
+        borderTopStyle: 'solid',
+        borderTopColor: 'border',
       }}
     >
       <div
@@ -171,14 +174,13 @@ function NodeSwitch({ value, onChange }: EditorProps) {
   const tagKey = [...(selected || []), value.tagName || ''].join('-')
 
   return (
-    <div>
       <article
         sx={{
-          pb: 3,
+          pb: 4,
         }}
       >
-        <div sx={{ mb: 2, px: 3 }}>
-          <Label>Tag name</Label>{' '}
+        <div sx={{ px: 3, mb: 2 }}>
+          <Label>Element</Label>{' '}
           <Combobox
             key={tagKey}
             onFilterItems={(filterValue) => {
@@ -223,6 +225,5 @@ function NodeSwitch({ value, onChange }: EditorProps) {
           />
         </div>
       </article>
-    </div>
   )
 }

packages/gui/src/components/html/TreeNode.tsx

@@ -48,6 +48,8 @@ export function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) {
             textAlign: 'start',
             fontSize: 0,
             width: '100%',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
           }}
           onClick={() => {
             handleSelect()
@@ -173,7 +175,7 @@ export function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) {
         WebkitAppearance: 'none',
         cursor: 'pointer',
         border: 'none',
-        backgroundColor: isSelected ? '#ff0' : 'background',
+        backgroundColor: isSelected ? 'primary' : 'background',
         color: 'text',
         fontSize: '14px',
         fontFamily: 'monospace',
@@ -307,7 +309,7 @@ export function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) {
               px: 2,
               fontSize: '14px',
               fontFamily: 'monospace',
-              bg: isSelected ? '#ff0' : 'background',
+              bg: isSelected ? 'primary' : 'background',
               fontWeight: isSelected ? 700 : 400,
               borderRadius: '6px',
               transition: 'background-color .2s ease-in-out',