refactor menu

libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx

@@ -151,7 +151,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                       state.actions[action]()
                     }
                   }}
-                  className={'newFile ' + icon + ' px-1 remixui_newFile'}
+                  className={'newFile ' + icon + ' pr-2 pl-1 remixui_newFile'}
                   key={`${action}-${title}-${index}`}
                 ></label>
               </CustomTooltip>

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -319,49 +319,51 @@ export const FileExplorer = (props: FileExplorerProps) => {
     <Drag onFileMoved={handleFileMove} onFolderMoved={handleFolderMove}>
       <div ref={treeRef} tabIndex={0} style={{outline: 'none'}}>
         <TreeView id="treeView">
-          <TreeViewItem
-            id="treeViewItem"
-            controlBehaviour={true}
-            label={
-              <div onClick={handleFileExplorerMenuClick}>
-                <FileExplorerMenu
-                  title={''}
-                  menuItems={props.menuItems}
-                  createNewFile={handleNewFileInput}
-                  createNewFolder={handleNewFolderInput}
-                  publishToGist={publishToGist}
-                  uploadFile={uploadFile}
-                  uploadFolder={uploadFolder}
-                />
-              </div>
-            }
-            expand={true}
-          >
-            <div className="pb-4 mb-4">
-              <TreeView id="treeViewMenu">
-                {files[ROOT_PATH] &&
-                  Object.keys(files[ROOT_PATH]).map((key, index) => (
-                    <FileRender
-                      file={files[ROOT_PATH][key]}
-                      fileDecorations={fileState}
-                      index={index}
-                      focusContext={state.focusContext}
-                      focusEdit={state.focusEdit}
-                      focusElement={props.focusElement}
-                      ctrlKey={state.ctrlKey}
-                      expandPath={props.expandPath}
-                      editModeOff={editModeOff}
-                      handleClickFile={handleClickFile}
-                      handleClickFolder={handleClickFolder}
-                      handleContextMenu={handleContextMenu}
-                      key={index}
-                      showIconsMenu={props.showIconsMenu}
-                      hideIconsMenu={props.hideIconsMenu}
-                    />
-                  ))}
-              </TreeView>
+          <li key={`treeViewLiMenu`} data-id={`treeViewLiMenu`} className="li_tv">
+            <div
+              key={`treeViewDivMenu`}
+              data-id={`treeViewDivMenu`}
+              className={`d-flex flex-row align-items-center`}
+            >
+              <span className="w-100 pl-2">
+                <div onClick={handleFileExplorerMenuClick}>
+                  <FileExplorerMenu
+                    title={''}
+                    menuItems={props.menuItems}
+                    createNewFile={handleNewFileInput}
+                    createNewFolder={handleNewFolderInput}
+                    publishToGist={publishToGist}
+                    uploadFile={uploadFile}
+                    uploadFolder={uploadFolder}
+                  />
+                </div>
+              </span>
             </div>
-          </TreeViewItem>
+          </li>
+          <div className="pb-4 mb-4">
+            <TreeView id="treeViewMenu">
+              {files[ROOT_PATH] &&
+                Object.keys(files[ROOT_PATH]).map((key, index) => (
+                  <FileRender
+                    file={files[ROOT_PATH][key]}
+                    fileDecorations={fileState}
+                    index={index}
+                    focusContext={state.focusContext}
+                    focusEdit={state.focusEdit}
+                    focusElement={props.focusElement}
+                    ctrlKey={state.ctrlKey}
+                    expandPath={props.expandPath}
+                    editModeOff={editModeOff}
+                    handleClickFile={handleClickFile}
+                    handleClickFolder={handleClickFolder}
+                    handleContextMenu={handleContextMenu}
+                    key={index}
+                    showIconsMenu={props.showIconsMenu}
+                    hideIconsMenu={props.hideIconsMenu}
+                  />
+                ))}
+            </TreeView>
+          </div>
         </TreeView>
       </div>
     </Drag>