mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

add props, make icons visible.

Browse Source
pull/4446/head
Joseph Izang 10 months ago
parent 2c28bbff48
commit d0598e2d73
6 changed files with 76 additions and 64 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 100
      libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
  2. 7
      libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
  3. 6
      libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
  4. 11
      libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
  5. 15
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
  6. 1
      libs/remix-ui/workspace/src/lib/types/index.ts

100
libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
Unescape View File

@ -17,82 +17,82 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
return ( return (
<> <>
{(props.hover && !props.isEditable) && <div className={`d-flex flex-row align-items-center`} style={{ marginLeft: '6rem' }}> {(!props.hover && !props.isEditable) && <div className="d-flex flex-row align-items-center" style={{ marginLeft: '6rem' }}>
{ {
props.file.isDirectory ? ( props.file.isDirectory ? (
<> <>
<CustomTooltip {/* <CustomTooltip
placement="right-start" placement="right-start"
delay={{show: 1000, hide: 0}} delay={{show: 1000, hide: 0}}
tooltipText={<FormattedMessage id="filePanel.edit" />} tooltipText={<FormattedMessage id="filePanel.edit" />}
tooltipId={`filePanel.edit.${props.file.path}`} tooltipId={`filePanel.edit.${props.file.path}`}
tooltipClasses="text-nowrap" tooltipClasses="text-nowrap"
> > */}
<span <span
className="far fa-folder fa-1x remixui_icons_space remixui_icons" className="far fa-folder fa-1x remixui_icons_space remixui_icons"
onClick={async (e) => { onClick={async (e) => {
e.stopPropagation() e.stopPropagation()
console.log(props) console.log(props)
await props.handleNewFolderOp(props.file.path) await props.handleNewFolderOp(props.file.path)
console.log('clicked on folder icon') console.log('clicked on folder icon')
}} }}
></span> ></span>
</CustomTooltip> {/* </CustomTooltip> */}
<CustomTooltip {/* <CustomTooltip
placement="right-start" placement="right-start"
delay={{show: 1000, hide: 0}} delay={{show: 1000, hide: 0}}
tooltipText={<FormattedMessage id="fileExplorer.edit" />} tooltipText={<FormattedMessage id="fileExplorer.edit" />}
tooltipId={`fileExplorer.edit.${props.file.path}`} tooltipId={`fileExplorer.edit.${props.file.path}`}
tooltipClasses="text-nowrap" tooltipClasses="text-nowrap"
> > */}
<span <span
className="far fa-file fa-1x remixui_icons remixui_icons_space" className="far fa-file fa-1x remixui_icons remixui_icons_space"
onClick={async (e) => { onClick={async (e) => {
e.stopPropagation() e.stopPropagation()
await props.handleNewFileOp(props.file.path) await props.handleNewFileOp(props.file.path)
console.log('clicked on file icon') console.log('clicked on file icon')
}} }}
></span> ></span>
</CustomTooltip> {/* </CustomTooltip> */}
</> </>
) : null ) : null
} }
<CustomTooltip {/* <CustomTooltip
placement="right-start" placement="right-start"
delay={{show: 1000, hide: 0}} delay={{show: 1000, hide: 0}}
tooltipText={<FormattedMessage id="fileExplorer.edit" />} tooltipText={<FormattedMessage id="fileExplorer.edit" />}
tooltipId={`fileExplorer.edit.${props.file.path}`} tooltipId={`fileExplorer.edit.${props.file.path}`}
tooltipClasses="text-nowrap" tooltipClasses="text-nowrap"
> > */}
<span <span
className="far fa-pen fa-1x remixui_icons remixui_icons_space" className="far fa-pen fa-1x remixui_icons remixui_icons_space"
onClick={async (e) => { onClick={async (e) => {
e.stopPropagation() e.stopPropagation()
console.log(props) console.log(props)
console.log(e) console.log(e)
await props.renamePathOp(props.file.path, props.file.type) await props.renamePathOp(props.file.path, props.file.type)
console.log('clicked on edit icon') console.log('clicked on edit icon')
}} }}
></span> ></span>
</CustomTooltip> {/* </CustomTooltip> */}
<CustomTooltip {/* <CustomTooltip
placement="right-start" placement="right-start"
delay={{show: 1000, hide: 0}} delay={{show: 1000, hide: 0}}
tooltipText={<FormattedMessage id="fileExplorer.edit" />} tooltipText={<FormattedMessage id="fileExplorer.edit" />}
tooltipId={`fileExplorer.edit.${props.file.path}`} tooltipId={`fileExplorer.edit.${props.file.path}`}
tooltipClasses="text-nowrap" tooltipClasses="text-nowrap"
> > */}
<span <span
className="far fa-trash fa-1x remixui_icons remixui_icons_space" className="far fa-trash fa-1x remixui_icons remixui_icons_space"
onClick={async (e) => { onClick={async (e) => {
e.stopPropagation() e.stopPropagation()
console.log(props) console.log(props)
console.log(e) console.log(e)
console.log('clicked on trash icon') console.log('clicked on trash icon')
await props.deletePathOp(props.file.path) await props.deletePathOp(props.file.path)
}} }}
></span> ></span>
</CustomTooltip> {/* </CustomTooltip> */}
</div> </div>
} }
</> </>

7
libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
Unescape View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, useRef, SyntheticEvent, useTransition } from 'react' // eslint-disable-line import React, { useEffect, useState, useRef, SyntheticEvent } from 'react' // eslint-disable-line
import { useIntl } from 'react-intl' import { useIntl } from 'react-intl'
import { TreeView } from '@remix-ui/tree-view' // eslint-disable-line import { TreeView } from '@remix-ui/tree-view' // eslint-disable-line
import { FileExplorerMenu } from './file-explorer-menu' // eslint-disable-line import { FileExplorerMenu } from './file-explorer-menu' // eslint-disable-line
@ -27,12 +27,13 @@ export const FileExplorer = (props: FileExplorerProps) => {
handleContextMenu, handleContextMenu,
handleNewFileInput, handleNewFileInput,
handleNewFolderInput, handleNewFolderInput,
deletePath,
uploadFile, uploadFile,
uploadFolder, uploadFolder,
fileState fileState
} = props } = props
const [state, setState] = useState<WorkSpaceState>(workspaceState) const [state, setState] = useState<WorkSpaceState>(workspaceState)
const [isPending, startTransition] = useTransition(); // const [isPending, startTransition] = useTransition();
const treeRef = useRef<HTMLDivElement>(null) const treeRef = useRef<HTMLDivElement>(null)
useEffect(() => { useEffect(() => {
@ -404,6 +405,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
moveFile={handleFileMove} moveFile={handleFileMove}
moveFolder={handleFolderMove} moveFolder={handleFolderMove}
handleClickFolder={handleClickFolder} handleClickFolder={handleClickFolder}
createNewFile={handleNewFileInput}
createNewFolder={handleNewFolderInput}
/> />
</div> </div>
</div> </div>

6
libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
Unescape View File

@ -1,4 +1,4 @@
import React, { SyntheticEvent, startTransition, useEffect, useRef, useState } from 'react' import React, { SyntheticEvent, useEffect, useRef, useState } from 'react'
import { FileType } from '../types' import { FileType } from '../types'
import { getEventTarget } from '../utils/getEventTarget' import { getEventTarget } from '../utils/getEventTarget'
import { extractParentFromKey } from '@remix-ui/helper' import { extractParentFromKey } from '@remix-ui/helper'
@ -36,7 +36,7 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
setFolderToOpen(null) setFolderToOpen(null)
} }
if (dragDestination && dragDestination.isDirectory && !expandPath.includes(dragDestination.path) && folderToOpen !== dragDestination.path && props.handleClickFolder) { if (dragDestination && dragDestination.isDirectory && !expandPath.includes(dragDestination.path) && folderToOpen !== dragDestination.path && props.handleClickFolder) {
setFolderToOpen(dragDestination.path) setFolderToOpen(dragDestination.path)
timer && clearTimeout(timer) timer && clearTimeout(timer)
setTimer( setTimer(
@ -84,4 +84,4 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
onDrop={onDrop} onDragOver={onDragOver} onDrop={onDrop} onDragOver={onDragOver}
className="d-flex h-100" className="d-flex h-100"
>{props.children}</div>) >{props.children}</div>)
} }

11
libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
Unescape View File

@ -8,6 +8,7 @@ import { FlatTreeDrop } from './flat-tree-drop';
import { getEventTarget } from '../utils/getEventTarget'; import { getEventTarget } from '../utils/getEventTarget';
import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators'; import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators';
import { FileHoverIcons } from './file-explorer-hovericons'; import { FileHoverIcons } from './file-explorer-hovericons';
import { deletePath } from '../actions';
export default function useOnScreen(ref: RefObject<HTMLElement>) { export default function useOnScreen(ref: RefObject<HTMLElement>) {
@ -37,6 +38,10 @@ interface FlatTreeProps {
moveFile: (dest: string, src: string) => void moveFile: (dest: string, src: string) => void
moveFolder: (dest: string, src: string) => void moveFolder: (dest: string, src: string) => void
fileState: fileDecoration[] fileState: fileDecoration[]
createNewFile?: any
createNewFolder?: any
deletePath?: (path: string | string[]) => void | Promise<void>
renamePath?: (path: string, newName: string) => void | Promise<void>
} }
let mouseTimer: any = { let mouseTimer: any = {
@ -45,7 +50,7 @@ let mouseTimer: any = {
} }
export const FlatTree = (props: FlatTreeProps) => { export const FlatTree = (props: FlatTreeProps) => {
const { files, flatTree, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState, focusElement, handleClickFolder } = props const { files, flatTree, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState, focusElement, handleClickFolder, deletePath, renamePath } = props
const [hover, setHover] = useState<string>('') const [hover, setHover] = useState<string>('')
const [mouseOverTarget, setMouseOverTarget] = useState<{ const [mouseOverTarget, setMouseOverTarget] = useState<{
path: string, path: string,
@ -211,7 +216,9 @@ export const FlatTree = (props: FlatTreeProps) => {
</div> </div>
<div className="d-flex flex-row gap-1"> <div className="d-flex flex-row gap-1">
<div><FileHoverIcons file={file} /></div>{getFileStateIcons(file)} <div>
<FileHoverIcons file={file} />
</div> {getFileStateIcons(file)}
</div> </div>
</> </>
} }

15
libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
Unescape View File

@ -796,7 +796,7 @@ export function Workspace() {
</option> </option>
<option style={{fontSize: 'small'}} value="breakthroughLabsUniswapv4Hooks"> <option style={{fontSize: 'small'}} value="breakthroughLabsUniswapv4Hooks">
{intl.formatMessage({id: 'filePanel.breakthroughLabsUniswapv4Hooks'})} {intl.formatMessage({id: 'filePanel.breakthroughLabsUniswapv4Hooks'})}
</option> </option>
<option style={{fontSize: 'small'}} value="uniswapV4HookBookMultiSigSwapHook"> <option style={{fontSize: 'small'}} value="uniswapV4HookBookMultiSigSwapHook">
{intl.formatMessage({id: 'filePanel.uniswapV4HookBookMultiSigSwapHook'})} {intl.formatMessage({id: 'filePanel.uniswapV4HookBookMultiSigSwapHook'})}
@ -988,7 +988,7 @@ export function Workspace() {
> >
<i onClick={() => saveSampleCodeWorkspace()} className="far fa-exclamation-triangle text-warning ml-2 align-self-center" aria-hidden="true"></i> <i onClick={() => saveSampleCodeWorkspace()} className="far fa-exclamation-triangle text-warning ml-2 align-self-center" aria-hidden="true"></i>
</CustomTooltip>} </CustomTooltip>}
</span> </span>
</div> </div>
<div className='mx-2'> <div className='mx-2'>
{(platform !== appPlatformTypes.desktop) ? ( {(platform !== appPlatformTypes.desktop) ? (
@ -1063,7 +1063,7 @@ export function Workspace() {
</div> </div>
</header> </header>
</div> </div>
<ElectronMenu></ElectronMenu> <ElectronMenu></ElectronMenu>
<div <div
className="h-100 remixui_fileExplorerTree" className="h-100 remixui_fileExplorerTree"
onFocus={() => { onFocus={() => {
@ -1077,7 +1077,7 @@ export function Workspace() {
</div> </div>
)} )}
{!(global.fs.browser.isRequestingWorkspace || global.fs.browser.isRequestingCloning) && global.fs.mode === 'browser' && currentWorkspace !== NO_WORKSPACE && ( {!(global.fs.browser.isRequestingWorkspace || global.fs.browser.isRequestingCloning) && global.fs.mode === 'browser' && currentWorkspace !== NO_WORKSPACE && (
<FileExplorer <FileExplorer
fileState={global.fs.browser.fileState} fileState={global.fs.browser.fileState}
name={currentWorkspace} name={currentWorkspace}
@ -1130,7 +1130,7 @@ export function Workspace() {
handleNewFolderInput={handleNewFolderInput} handleNewFolderInput={handleNewFolderInput}
dragStatus={dragStatus} dragStatus={dragStatus}
/> />
)} )}
{global.fs.localhost.isRequestingLocalhost && ( {global.fs.localhost.isRequestingLocalhost && (
<div className="text-center py-5"> <div className="text-center py-5">
@ -1188,6 +1188,7 @@ export function Workspace() {
editModeOn={editModeOn} editModeOn={editModeOn}
handleNewFileInput={handleNewFileInput} handleNewFileInput={handleNewFileInput}
handleNewFolderInput={handleNewFolderInput} handleNewFolderInput={handleNewFolderInput}
deletePath={deletePath}
dragStatus={dragStatus} dragStatus={dragStatus}
/> />
)} )}
@ -1199,11 +1200,11 @@ export function Workspace() {
<div className={`bg-light border-top ${selectedWorkspace.isGitRepo && currentBranch ? 'd-block' : 'd-none'}`} data-id="workspaceGitPanel"> <div className={`bg-light border-top ${selectedWorkspace.isGitRepo && currentBranch ? 'd-block' : 'd-none'}`} data-id="workspaceGitPanel">
<div className="d-flex justify-space-between p-1"> <div className="d-flex justify-space-between p-1">
<div className="mr-auto text-uppercase text-dark pt-2 pl-2">GIT</div> <div className="mr-auto text-uppercase text-dark pt-2 pl-2">GIT</div>
{selectedWorkspace.hasGitSubmodules? {selectedWorkspace.hasGitSubmodules?
<div className="pt-1 mr-1"> <div className="pt-1 mr-1">
{global.fs.browser.isRequestingCloning ? <div style={{ height: 30 }} className='btn btn-sm border text-muted small'><i className="fad fa-spinner fa-spin"></i> updating submodules</div> : {global.fs.browser.isRequestingCloning ? <div style={{ height: 30 }} className='btn btn-sm border text-muted small'><i className="fad fa-spinner fa-spin"></i> updating submodules</div> :
<div style={{ height: 30 }} onClick={updateSubModules} data-id='updatesubmodules' className='btn btn-sm border text-muted small'>update submodules</div>} <div style={{ height: 30 }} onClick={updateSubModules} data-id='updatesubmodules' className='btn btn-sm border text-muted small'>update submodules</div>}
</div> </div>
: null} : null}
<div className="pt-1 mr-1" data-id="workspaceGitBranchesDropdown"> <div className="pt-1 mr-1" data-id="workspaceGitBranchesDropdown">
<Dropdown style={{height: 30, minWidth: 80}} onToggle={toggleBranches} show={showBranches} drop={'up'}> <Dropdown style={{height: 30, minWidth: 80}} onToggle={toggleBranches} show={showBranches} drop={'up'}>

1
libs/remix-ui/workspace/src/lib/types/index.ts
Unescape View File

@ -130,6 +130,7 @@ export interface FileExplorerProps {
toGist: (path?: string, type?: string) => void toGist: (path?: string, type?: string) => void
handleNewFileInput: (parentFolder?: string) => Promise<void> handleNewFileInput: (parentFolder?: string) => Promise<void>
handleNewFolderInput: (parentFolder?: string) => Promise<void> handleNewFolderInput: (parentFolder?: string) => Promise<void>
deletePath?: (path: string[]) => Promise<void>
dragStatus: (status: boolean) => void dragStatus: (status: boolean) => void
} }

Write Preview
Loading…
Cancel
Save