Merge pull request #4100 from ethereum/festyless

fe style improvements
pull/4104/head
Liana Husikyan 1 year ago committed by GitHub
commit 74cd7f08e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      libs/remix-ui/workspace/src/lib/components/file-explorer-context-menu.tsx
  2. 25
      libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx
  3. 7
      libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
  4. 4
      libs/remix-ui/workspace/src/lib/css/file-explorer.css

@ -111,7 +111,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
return groupedActions.map((groupItem, groupIndex) =>
groupItem.map((item, index) => {
key++
const className = `remixui_liitem ${group !== item.group ? 'border-top' : ''}`
const className = `px-3 remixui_liitem ${group !== item.group ? 'border-top' : ''}`
group = item.group
if (item.name === 'Upload File') {
return (

@ -67,12 +67,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
return (
<>
<CustomTooltip placement="top" tooltipId="remixuilabelTooltip" tooltipClasses="text-nowrap" tooltipText={props.title}>
<span className="remixui_label" data-path={props.title} style={{fontWeight: 'bold'}}>
{props.title}
</span>
</CustomTooltip>
<span className="pl-0 pb-1">
<span data-id="spanContaining" className="pl-0 pb-1 w-50">
{state.menuItems.map(({action, title, icon, placement}, index) => {
if (action === 'uploadFile') {
return (
@ -83,7 +78,13 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
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 + ' 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 + ' mx-1 remixui_menuItem'}
key={`index-${action}-${placement}-${icon}`}
>
<input
id="fileUpload"
data-id="fileExplorerFileUpload"
@ -108,7 +109,13 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
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 + ' 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 + ' mx-1 remixui_menuItem'}
key={`index-${action}-${placement}-${icon}`}
>
<input
id="folderUpload"
data-id="fileExplorerFolderUpload"
@ -151,7 +158,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
state.actions[action]()
}
}}
className={'newFile ' + icon + ' pr-2 pl-1 remixui_newFile'}
className={icon + ' mx-1 remixui_menuItem'}
key={`${action}-${title}-${index}`}
></label>
</CustomTooltip>

@ -1,6 +1,6 @@
import React, {useEffect, useState, useRef, SyntheticEvent} from 'react' // eslint-disable-line
import {useIntl} from 'react-intl'
import {TreeView, TreeViewItem} 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 {FileExplorerContextMenu} from './file-explorer-context-menu' // eslint-disable-line
import {FileExplorerProps, FileType, WorkSpaceState} from '../types'
@ -358,7 +358,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
data-id={`treeViewDivMenu`}
className={`d-flex flex-row align-items-center`}
>
<span className="w-100 pl-2">
<span className="w-100 pl-2 mt-1">
<div onClick={handleFileExplorerMenuClick}>
<FileExplorerMenu
title={''}
@ -394,7 +394,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
showIconsMenu={props.showIconsMenu}
hideIconsMenu={props.hideIconsMenu}
/>
))}
))
}
</TreeView>
</div>
<Draggable isDraggable={false} file={{ name: '/', path: '/', type: 'folder', isDirectory: true }} expandedPath={props.expandPath} handleClickFolder={null}>

@ -23,10 +23,10 @@ input[type="file"] {
.remixui_file {
padding : 4px;
}
.remixui_newFile i {
.remixui_menuItem i {
cursor : pointer;
}
.remixui_newFile:hover {
.remixui_menuItem:hover {
transform : scale(1.3);
}
.remixui_menu {

Loading…
Cancel
Save