Merge pull request #4292 from ethereum/selvi

left highlight for active plugin icon
pull/4303/head
yann300 12 months ago committed by GitHub
commit 1e770c0747
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 86
      libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
  2. 6
      libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css

@ -84,49 +84,57 @@ const Icon = ({iconRecord, verticalIconPlugin, contextMenuAction, theme}: IconPr
}
}, [])
const stylePC = iconRecord.active ? 'flex-start' : 'center'
return (
<>
<CustomTooltip
placement={name === 'settings' ? 'right' : name === 'search' ? 'top' : name === 'udapp' ? 'bottom' : 'top'}
tooltipText={title}
delay={{show: 1000, hide: 0}}
>
<div
className={`remixui_icon m-2 pt-1`}
onClick={() => {
;(verticalIconPlugin as any).toggle(name)
}}
{...{plugin: name}}
onContextMenu={(e: any) => {
e.preventDefault()
e.stopPropagation()
handleContextMenu(e)
}}
data-id={`verticalIconsKind${name}`}
id={`verticalIconsKind${name}`}
ref={iconRef}
<div className='d-flex py-1' style={{width: 'auto', placeContent: stylePC}}>
{iconRecord.active && <div
className='pt-1 bg-primary'
style={{width: "6px", height: "36px", position: 'relative', borderRadius: '24%'}}
></div>}
<CustomTooltip
placement={name === 'settings' ? 'right' : name === 'search' ? 'top' : name === 'udapp' ? 'bottom' : 'top'}
tooltipText={title}
delay={{show: 1000, hide: 0}}
>
<img
data-id={iconRecord.active ? `selected` : ''}
className={`${theme === 'dark' ? 'invert' : ''} ${theme} remixui_image ${iconRecord.active ? `selected-${theme}` : ''}`}
src={icon}
alt={name}
<div
className={`remixui_icon m-0 pt-1`}
onClick={() => {
;(verticalIconPlugin as any).toggle(name)
}}
{...{plugin: name}}
onContextMenu={(e: any) => {
e.preventDefault()
e.stopPropagation()
handleContextMenu(e)
}}
data-id={`verticalIconsKind${name}`}
id={`verticalIconsKind${name}`}
ref={iconRef}
>
<img
data-id={iconRecord.active ? `selected` : ''}
className={`${theme === 'dark' ? 'invert' : ''} ${theme} remixui_image ${iconRecord.active ? `selected-${theme}` : ''}`}
src={icon}
alt={name}
/>
<Badge badgeStatus={badgeStatus} />
</div>
</CustomTooltip>
{showContext ? (
<VerticalIconsContextMenu
pageX={pageX}
pageY={pageY}
links={links}
profileName={name}
hideContextMenu={closeContextMenu}
canBeDeactivated={canDeactivate}
verticalIconPlugin={verticalIconPlugin}
contextMenuAction={contextMenuAction}
/>
<Badge badgeStatus={badgeStatus} />
</div>
</CustomTooltip>
{showContext ? (
<VerticalIconsContextMenu
pageX={pageX}
pageY={pageY}
links={links}
profileName={name}
hideContextMenu={closeContextMenu}
canBeDeactivated={canDeactivate}
verticalIconPlugin={verticalIconPlugin}
contextMenuAction={contextMenuAction}
/>
) : null}
) : null}
</div>
</>
)
}

@ -3,7 +3,9 @@
width: 42px;
height: 42px;
cursor: pointer;
}
justify-content: space-between;
align-self: center;
}
.remixui_homeIcon:hover {
box-shadow: 0px 0px 14px -7px;
}
@ -17,8 +19,6 @@
.remixui_icons {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
}
.remixui_icon:hover {
box-shadow: 0px 0px 14px -7px;

Loading…
Cancel
Save