desktopmerge
filip mertens 1 year ago
parent 9d449df775
commit ddf4b616c7
  1. 188
      libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx
  2. 114
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@ -69,108 +69,108 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
return (
(!global.fs.browser.isSuccessfulWorkspace ? null :
<>
<>
<span data-id="spanContaining" className="pl-0 pb-1 w-50">
{state.menuItems.map(({action, title, icon, placement}, index) => {
if (action === 'uploadFile') {
return (
<CustomTooltip
placement={placement as Placement}
tooltipId="uploadFileTooltip"
tooltipClasses="text-nowrap"
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
key={`index-${action}-${placement}-${icon}`}
>
<label
id={action}
style={{fontSize: '1.1rem', cursor: 'pointer'}}
data-id={'fileExplorerUploadFile' + action}
className={icon + ' mx-1 remixui_menuItem'}
<span data-id="spanContaining" className="pl-0 pb-1 w-50">
{state.menuItems.map(({action, title, icon, placement}, index) => {
if (action === 'uploadFile') {
return (
<CustomTooltip
placement={placement as Placement}
tooltipId="uploadFileTooltip"
tooltipClasses="text-nowrap"
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
key={`index-${action}-${placement}-${icon}`}
>
<input
id="fileUpload"
data-id="fileExplorerFileUpload"
type="file"
onChange={(e) => {
e.stopPropagation()
_paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
props.uploadFile(e.target)
e.target.value = null
}}
multiple
/>
</label>
</CustomTooltip>
)
} else if (action === 'uploadFolder') {
return (
<CustomTooltip
placement={placement as Placement}
tooltipId="uploadFolderTooltip"
tooltipClasses="text-nowrap"
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
key={`index-${action}-${placement}-${icon}`}
>
<label
id={action}
style={{fontSize: '1.1rem', cursor: 'pointer'}}
data-id={'fileExplorerUploadFolder' + action}
className={icon + ' mx-1 remixui_menuItem'}
<label
id={action}
style={{fontSize: '1.1rem', cursor: 'pointer'}}
data-id={'fileExplorerUploadFile' + action}
className={icon + ' mx-1 remixui_menuItem'}
key={`index-${action}-${placement}-${icon}`}
>
<input
id="fileUpload"
data-id="fileExplorerFileUpload"
type="file"
onChange={(e) => {
e.stopPropagation()
_paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
props.uploadFile(e.target)
e.target.value = null
}}
multiple
/>
</label>
</CustomTooltip>
)
} else if (action === 'uploadFolder') {
return (
<CustomTooltip
placement={placement as Placement}
tooltipId="uploadFolderTooltip"
tooltipClasses="text-nowrap"
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
key={`index-${action}-${placement}-${icon}`}
>
<input
id="folderUpload"
data-id="fileExplorerFolderUpload"
type="file"
onChange={(e) => {
<label
id={action}
style={{fontSize: '1.1rem', cursor: 'pointer'}}
data-id={'fileExplorerUploadFolder' + action}
className={icon + ' mx-1 remixui_menuItem'}
key={`index-${action}-${placement}-${icon}`}
>
<input
id="folderUpload"
data-id="fileExplorerFolderUpload"
type="file"
onChange={(e) => {
e.stopPropagation()
_paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
props.uploadFolder(e.target)
e.target.value = null
}}
{...enableDirUpload}
multiple
/>
</label>
</CustomTooltip>
)
} else {
return (
<CustomTooltip
placement={placement as Placement}
tooltipId={`${action}-${title}-${icon}-${index}`}
tooltipClasses="text-nowrap"
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
key={`${action}-${title}-${index}`}
>
<label
id={action}
style={{fontSize: '1.1rem', cursor: 'pointer'}}
data-id={'fileExplorerNewFile' + action}
onClick={(e) => {
e.stopPropagation()
_paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
props.uploadFolder(e.target)
e.target.value = null
if (action === 'createNewFile') {
props.createNewFile()
} else if (action === 'createNewFolder') {
props.createNewFolder()
} else if (action === 'publishToGist') {
props.publishToGist()
} else {
state.actions[action]()
}
}}
{...enableDirUpload}
multiple
/>
</label>
</CustomTooltip>
)
} else {
return (
<CustomTooltip
placement={placement as Placement}
tooltipId={`${action}-${title}-${icon}-${index}`}
tooltipClasses="text-nowrap"
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
key={`${action}-${title}-${index}`}
>
<label
id={action}
style={{fontSize: '1.1rem', cursor: 'pointer'}}
data-id={'fileExplorerNewFile' + action}
onClick={(e) => {
e.stopPropagation()
_paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
if (action === 'createNewFile') {
props.createNewFile()
} else if (action === 'createNewFolder') {
props.createNewFolder()
} else if (action === 'publishToGist') {
props.publishToGist()
} else {
state.actions[action]()
}
}}
className={icon + ' mx-1 remixui_menuItem'}
key={`${action}-${title}-${index}`}
></label>
</CustomTooltip>
)
}
})}
</span>
</>)
className={icon + ' mx-1 remixui_menuItem'}
key={`${action}-${title}-${index}`}
></label>
</CustomTooltip>
)
}
})}
</span>
</>)
)
}

@ -921,74 +921,74 @@ export function Workspace() {
</span>
</div>
<div className='mx-2'>
{!isElectron() ? (
<Dropdown id="workspacesSelect" data-id="workspacesSelect" onToggle={toggleDropdown} show={showDropdown}>
<Dropdown.Toggle
as={CustomToggle}
id="dropdown-custom-components"
className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1"
icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}
>
{selectedWorkspace ? selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly('localhost') : NO_WORKSPACE}
</Dropdown.Toggle>
<Dropdown.Menu as={CustomMenu} className="w-100 custom-dropdown-items" data-id="custom-dropdown-items">
<Dropdown.Item
onClick={() => {
createWorkspace()
}}
>
{
<span className="pl-3">
{' '}
- <FormattedMessage id="filePanel.createNewWorkspace" /> -{' '}
</span>
}
</Dropdown.Item>
<Dropdown.Item
onClick={() => {
switchWorkspace(LOCALHOST)
}}
{!isElectron() ? (
<Dropdown id="workspacesSelect" data-id="workspacesSelect" onToggle={toggleDropdown} show={showDropdown}>
<Dropdown.Toggle
as={CustomToggle}
id="dropdown-custom-components"
className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1"
icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}
>
{currentWorkspace === LOCALHOST ? (
<span>&#10003; localhost </span>
) : (
<span className="pl-3">
{' '}
<FormattedMessage id="filePanel.connectToLocalhost" />{' '}
</span>
)}
</Dropdown.Item>
{global.fs.browser.workspaces.map(({name, isGitRepo}, index) => (
{selectedWorkspace ? selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly('localhost') : NO_WORKSPACE}
</Dropdown.Toggle>
<Dropdown.Menu as={CustomMenu} className="w-100 custom-dropdown-items" data-id="custom-dropdown-items">
<Dropdown.Item
key={index}
onClick={() => {
switchWorkspace(name)
createWorkspace()
}}
data-id={`dropdown-item-${name}`}
>
{isGitRepo ? (
<div className="d-flex justify-content-between">
<span>{currentWorkspace === name ? <span>&#10003; {name} </span> : <span className="pl-3">{name}</span>}</span>
<i className="fas fa-code-branch pt-1"></i>
</div>
) : (
<span>{currentWorkspace === name ? <span>&#10003; {name} </span> : <span className="pl-3">{name}</span>}</span>
)}
{
<span className="pl-3">
{' '}
- <FormattedMessage id="filePanel.createNewWorkspace" /> -{' '}
</span>
}
</Dropdown.Item>
))}
{(global.fs.browser.workspaces.length <= 0 || currentWorkspace === NO_WORKSPACE) && (
<Dropdown.Item
onClick={() => {
switchWorkspace(NO_WORKSPACE)
switchWorkspace(LOCALHOST)
}}
>
{<span className="pl-3">NO_WORKSPACE</span>}
{currentWorkspace === LOCALHOST ? (
<span>&#10003; localhost </span>
) : (
<span className="pl-3">
{' '}
<FormattedMessage id="filePanel.connectToLocalhost" />{' '}
</span>
)}
</Dropdown.Item>
)}
</Dropdown.Menu>
</Dropdown>
):null}
{global.fs.browser.workspaces.map(({name, isGitRepo}, index) => (
<Dropdown.Item
key={index}
onClick={() => {
switchWorkspace(name)
}}
data-id={`dropdown-item-${name}`}
>
{isGitRepo ? (
<div className="d-flex justify-content-between">
<span>{currentWorkspace === name ? <span>&#10003; {name} </span> : <span className="pl-3">{name}</span>}</span>
<i className="fas fa-code-branch pt-1"></i>
</div>
) : (
<span>{currentWorkspace === name ? <span>&#10003; {name} </span> : <span className="pl-3">{name}</span>}</span>
)}
</Dropdown.Item>
))}
{(global.fs.browser.workspaces.length <= 0 || currentWorkspace === NO_WORKSPACE) && (
<Dropdown.Item
onClick={() => {
switchWorkspace(NO_WORKSPACE)
}}
>
{<span className="pl-3">NO_WORKSPACE</span>}
</Dropdown.Item>
)}
</Dropdown.Menu>
</Dropdown>
):null}
</div>
</div>
</header>

Loading…
Cancel
Save