changed the bg of tooltips

pull/3530/head^2
lianahus 2 years ago committed by Aniket
parent 9224699eda
commit d26465189c
  1. 58
      libs/remix-ui/file-decorators/src/lib/components/file-decoration-icon.tsx
  2. 33
      libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-tooltip.tsx
  3. 17
      libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
  4. 16
      libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
  5. 3
      libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@ -8,44 +8,42 @@ import FileDecorationTooltip from './filedecorationicons/file-decoration-tooltip
import FileDecorationWarningIcon from './filedecorationicons/file-decoration-warning-icon'
export type fileDecorationProps = {
file: FileType,
fileDecorations: fileDecoration[]
file: FileType,
fileDecorations: fileDecoration[]
}
export const FileDecorationIcons = (props: fileDecorationProps) => {
const [states, setStates] = useState<fileDecoration[]>([])
useEffect(() => {
//console.log(props.file)
//console.log(props.fileState)
setStates(props.fileDecorations.filter((fileDecoration) => fileDecoration.path === props.file.path || `${fileDecoration.workspace.name}/${fileDecoration.path}` === props.file.path))
}, [props.fileDecorations])
const [states, setStates] = useState<fileDecoration[]>([])
useEffect(() => {
//console.log(props.file)
//console.log(props.fileState)
setStates(props.fileDecorations.filter((fileDecoration) => fileDecoration.path === props.file.path || `${fileDecoration.workspace.name}/${fileDecoration.path}` === props.file.path))
}, [props.fileDecorations])
const getTags = function () {
if (states && states.length) {
const elements: JSX.Element[] = []
const getTags = function () {
if (states && states.length) {
const elements: JSX.Element[] = []
for (const [index, state] of states.entries()) {
switch (state.fileStateType) {
case fileDecorationType.Error:
elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationErrorIcon fileDecoration={state} key={index}/>}/>)
break
case fileDecorationType.Warning:
elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationWarningIcon fileDecoration={state} key={index}/>}/>)
break
case fileDecorationType.Custom:
elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationCustomIcon fileDecoration={state} key={index}/>}/>)
break
}
}
return elements
for (const [index, state] of states.entries()) {
switch (state.fileStateType) {
case fileDecorationType.Error:
elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationErrorIcon fileDecoration={state} key={index}/>}/>)
break
case fileDecorationType.Warning:
elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationWarningIcon fileDecoration={state} key={index}/>}/>)
break
case fileDecorationType.Custom:
elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationCustomIcon fileDecoration={state} key={index}/>}/>)
break
}
}
return elements
}
}
return <>
{getTags()}
</>
return <>
{getTags()}
</>
}
export default FileDecorationIcons

@ -3,30 +3,29 @@ import { OverlayTrigger, Tooltip } from "react-bootstrap";
import { fileDecoration } from "../../types";
const FileDecorationTooltip = (props: {
fileDecoration: fileDecoration,
icon: JSX.Element
index: number
fileDecoration: fileDecoration,
icon: JSX.Element
index: number
},
) => {
const getComments = function (fileDecoration: fileDecoration) {
if (fileDecoration.comment) {
const comments = Array.isArray(fileDecoration.comment) ? fileDecoration.comment : [fileDecoration.comment]
return comments.map((comment, index) => {
return <div key={index}>{comment}<br></br></div>
})
}
if (fileDecoration.comment) {
const comments = Array.isArray(fileDecoration.comment) ? fileDecoration.comment : [fileDecoration.comment]
return comments.map((comment, index) => {
return <div key={index}>{comment}<br></br></div>
})
}
}
return <OverlayTrigger
key={`overlaytrigger-${props.fileDecoration.path}-${props.index}`}
placement='auto'
overlay={
<Tooltip id={`error-tooltip-${props.fileDecoration.path}`}>
<>{getComments(props.fileDecoration)}</>
</Tooltip>
}
key={`overlaytrigger-${props.fileDecoration.path}-${props.index}`}
placement='auto'
overlay={
<Tooltip id={`error-tooltip-${props.fileDecoration.path}`}>
<>{getComments(props.fileDecoration)}</>
</Tooltip>
}
><div>{props.icon}</div></OverlayTrigger>
}

@ -1,19 +1,28 @@
import React from 'react';
import { Fragment } from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import { OverlayTrigger, Tooltip, Popover } from 'react-bootstrap';
import { CustomTooltipType } from '../../types/customtooltip'
export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay }: CustomTooltipType) {
if (typeof tooltipText !== 'string') {
const newTooltipText = React.cloneElement(tooltipText, {
className: " bg-secondary text-danger text-wrap "
})
tooltipText = newTooltipText
}
return (
<Fragment>
<OverlayTrigger
placement={placement}
overlay={
<Tooltip id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} className={tooltipClasses}>
{typeof tooltipText === 'string' ? (<span className={tooltipTextClasses}>{tooltipText}</span>) : (tooltipText)}
</Tooltip>
<Popover id={`popover-positioned-${placement}`}>
<Popover.Content id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} style={{minWidth: "fit-content"}} className={"text-wrap bg-secondary w-100 text-success " + tooltipClasses}>
{typeof tooltipText === 'string' ? (<span className={"text-wrap bg-secondary text-warning p-1 " + {tooltipTextClasses}}>{tooltipText}</span>) : (tooltipText)}
</Popover.Content>
</Popover>
}
delay={delay}
>

@ -39,16 +39,14 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
<div className="d-flex flex-row">
<div className="d-flex flex-row">
{plugin?.profile?.maintainedBy?.toLowerCase() === "remix" && (
<OverlayTrigger
placement="right"
overlay={
<Tooltip id="maintainedByTooltip" className="text-nowrap">
<span>{"Maintained by Remix"}</span>
</Tooltip>
}
>
<CustomTooltip
placement="right-end"
tooltipId="maintainedByTooltip"
tooltipClasses="text-nowrap"
tooltipText="Maintained by Remix"
>
<i aria-hidden="true" className="text-success mt-1 px-1 fas fa-check"></i>
</OverlayTrigger>
</CustomTooltip>
)}
</div>
<div className="swapitHeaderInfoSection d-flex justify-content-between" data-id='swapitHeaderInfoSectionId' onClick={toggleClass}>

@ -991,7 +991,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
placement="right"
tooltipId="overlay-tooltip-compile-run-doc"
tooltipText={<div className="text-left p-2">
<div>Choose the script to execute right after compilation by adding the `dev-run-script` natspec tag, as in:</div>
<div>Choose the script to execute right after compilation
by adding the `dev-run-script` natspec tag, as in:</div>
<pre>
<code>
/**<br />

Loading…
Cancel
Save