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

style improvements and shift issue fix in FE

Browse Source
pull/4088/head
lianahus 1 year ago committed by Aniket
parent 847370fc35
commit 3762427319
5 changed files with 78 additions and 75 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. 6
      libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx
  2. 13
      libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx
  3. 2
      libs/remix-ui/workspace/src/lib/components/file-render.tsx
  4. 16
      libs/remix-ui/workspace/src/lib/css/file-explorer.css
  5. 116
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

6
libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx
Unescape View File

@ -20,11 +20,11 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
onClick={() => !controlBehaviour && setIsExpanded(!isExpanded)}
>
{children && showIcon ? (
<div className={isExpanded ? `px-0 ${iconY}` : `px-1 ${iconX} caret caret_tv`} style={{visibility: children ? 'visible' : 'hidden'}}></div>
<div className={isExpanded ? `pl-2 ${iconY}` : `pl-2 ${iconX} caret caret_tv`} style={{visibility: children ? 'visible' : 'hidden'}}></div>
) : icon ? (
<div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div>
<div className={`pr-3 pl-2 ${icon} caret caret_tv`}></div>
) : null}
<span className="w-100 pl-1">{label}</span>
<span className="w-100 pl-2">{label}</span>
</div>
{isExpanded ? children : null}
</li>

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

@ -29,13 +29,13 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
{
action: 'uploadFile',
title: 'Upload files into current workspace',
icon: 'fa fa-upload',
icon: 'far fa-upload',
placement: 'top'
},
{
action: 'uploadFolder',
title: 'Upload folder into current workspace',
icon: 'fas fa-folder-upload',
icon: 'far fa-folder-upload',
placement: 'top'
},
{
@ -83,7 +83,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
key={`index-${action}-${placement}-${icon}`}
>
<label id={action} data-id={'fileExplorerUploadFile' + action} className={icon + ' mb-0 px-1 remixui_newFile'} key={`index-${action}-${placement}-${icon}`}>
<label id={action} style={{fontSize: '1.1rem', cursor: 'pointer'}} data-id={'fileExplorerUploadFile' + action} className={icon + ' mb-0 px-1 remixui_newFile'} key={`index-${action}-${placement}-${icon}`}>
<input
id="fileUpload"
data-id="fileExplorerFileUpload"
@ -108,7 +108,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
key={`index-${action}-${placement}-${icon}`}
>
<label id={action} data-id={'fileExplorerUploadFolder' + action} className={icon + ' mb-0 px-1 remixui_newFile'} key={`index-${action}-${placement}-${icon}`}>
<label id={action} style={{fontSize: '1.1rem', cursor: 'pointer'}} data-id={'fileExplorerUploadFolder' + action} className={icon + ' mb-0 px-1 remixui_newFile'} key={`index-${action}-${placement}-${icon}`}>
<input
id="folderUpload"
data-id="fileExplorerFolderUpload"
@ -134,8 +134,9 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
key={`${action}-${title}-${index}`}
>
<span
<label
id={action}
style={{fontSize: '1.1rem', cursor: 'pointer'}}
data-id={'fileExplorerNewFile' + action}
onClick={(e) => {
e.stopPropagation()
@ -152,7 +153,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
}}
className={'newFile ' + icon + ' px-1 remixui_newFile'}
key={`${action}-${title}-${index}`}
></span>
></label>
</CustomTooltip>
)
}

2
libs/remix-ui/workspace/src/lib/components/file-render.tsx
Unescape View File

@ -86,7 +86,7 @@ export const FileRender = (props: RenderFileProps) => {
<TreeViewItem
id={`treeViewItem${file.path}`}
iconX="pr-3 fa fa-folder"
iconY={props.expandPath.includes(file.path) ? 'pr-0 fa fa-folder-open' : 'pr-3 fa fa-folder'}
iconY={props.expandPath.includes(file.path) ? 'pr-3 fa fa-folder-open' : 'pr-3 fa fa-folder'}
key={`${file.path + props.index}`}
label={
<>

16
libs/remix-ui/workspace/src/lib/css/file-explorer.css
Unescape View File

@ -8,7 +8,7 @@
width : 90%;
margin-bottom : 0px;
}
.remixui_fileexplorer {
.remixui_fileexplorer {
box-sizing : border-box;
user-select : none;
}
@ -16,20 +16,20 @@ input[type="file"] {
display: none;
}
.remixui_folder,
.remixui_file {
.remixui_file {
font-size : 14px;
cursor : pointer;
}
.remixui_file {
padding : 4px;
}
.remixui_newFile i {
.remixui_newFile i {
cursor : pointer;
}
.remixui_newFile:hover {
.remixui_newFile:hover {
transform : scale(1.3);
}
.remixui_menu {
.remixui_menu {
margin-left : 20px;
}
.remixui_items {
@ -40,16 +40,16 @@ input[type="file"] {
padding-left : 5px;
padding-right : 5px;
}
.remixui_activeMode {
.remixui_activeMode {
display : flex;
width : 100%;
margin-right : 10px;
padding-right : 19px;
}
.remixui_activeMode > div {
.remixui_activeMode > div {
min-width : 10px;
}
ul {
ul {
padding : 0;
}

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

@ -861,10 +861,10 @@ export function Workspace() {
}}
>
<div className="d-flex flex-column w-100 pb-4 mb-2 remixui_fileexplorer" data-id="remixUIWorkspaceExplorer" onClick={resetFocus}>
<div>
<div className='mb-1'>
<header>
<div className="mx-2 my-2 d-flex flex-column">
<div className="d-flex">
<div className="mx-2 d-flex">
{currentWorkspace !== LOCALHOST ? (
<span className="remixui_topmenu d-flex">
<Dropdown id="workspacesMenuDropdown" data-id="workspacesMenuDropdown" onToggle={() => hideIconsMenu(!showIconsMenu)} show={showIconsMenu}>
@ -904,72 +904,74 @@ export function Workspace() {
</label>
</span>
</div>
<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)
}}
<div className='mx-2'>
<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>
{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>
</div>
</div>
</header>
</div>

Write Preview
Loading…
Cancel
Save