github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(UI): tooltip html message support and width fix [EE-3445] (#8165) 

Co-authored-by: testa113 <testa113>
pull/8185/head
Prabhat Khera 2022-12-12 14:03:50 +13:00 committed by GitHub
parent 5cbf52377d
commit a1528475ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css
View File

@ -7,10 +7,11 @@
color: var(--text-tooltip-color) !important; color: var(--text-tooltip-color) !important;
border-radius: 10px !important; border-radius: 10px !important;
box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important; box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
min-width: 300px; min-width: 50px;
font-size: 1rem !important; font-size: 1rem !important;
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
width: max-content;
} }
.tooltip:hover { .tooltip:hover {

6
app/react/components/form-components/FormControl/FormControl.tsx
View File

@ -15,6 +15,7 @@ export interface Props {
children: ReactNode; children: ReactNode;
errors?: ReactNode; errors?: ReactNode;
required?: boolean; required?: boolean;
setTooltipHtmlMessage?: boolean;
} }
export function FormControl({ export function FormControl({
@ -25,6 +26,7 @@ export function FormControl({
children, children,
errors, errors,
required, required,
setTooltipHtmlMessage,
}: PropsWithChildren<Props>) { }: PropsWithChildren<Props>) {
return ( return (
<div <div
@ -41,7 +43,9 @@ export function FormControl({
{required && <span className="text-danger">*</span>} {required && <span className="text-danger">*</span>}
{tooltip && <Tooltip message={tooltip} />} {tooltip && (
<Tooltip message={tooltip} setHtmlMessage={setTooltipHtmlMessage} />
)}
</label> </label>
<div className={sizeClassChildren(size)}> <div className={sizeClassChildren(size)}>

1
app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.tsx
View File

@ -214,6 +214,7 @@ export function SettingsOpenAMT({ settings, onSubmit }: Props) {
size="medium" size="medium"
tooltip="Supported CAs are Comodo, DigiCert, Entrust and GoDaddy.<br>The certificate must contain the private key.<br>On AMT 15 based devices you need to use SHA2." tooltip="Supported CAs are Comodo, DigiCert, Entrust and GoDaddy.<br>The certificate must contain the private key.<br>On AMT 15 based devices you need to use SHA2."
errors={errors.certFileContent} errors={errors.certFileContent}
setTooltipHtmlMessage
> >
<FileUploadField <FileUploadField
inputId="certificate_file" inputId="certificate_file"