style: overflow layer padding

main
jialin 9 months ago
parent 13ded5595a
commit ced45bec65

@ -23,9 +23,9 @@ const TitleTip: React.FC<TitleTipProps> = (props) => {
<div style={{ maxHeight: 200, overflowY: 'auto' }} ref={scrollRef}>
<div
style={{
width: 'max-content',
maxWidth: 300,
paddingInline: 10
width: 'fit-content',
maxWidth: 'var(--width-tooltip-max)',
paddingInline: 8
}}
>
{isOverflowing || showTitle ? title || children : ''}

@ -54,18 +54,11 @@ export const TooltipOverlayScroller: React.FC<
return (
<Tooltip
overlayInnerStyle={{
width: 'max-content',
maxWidth: 300,
paddingInlineEnd: 0
paddingInline: 0
}}
title={
title && (
<OverlayScroller
style={{ paddingInlineStart: 0 }}
maxHeight={maxHeight}
>
{title}
</OverlayScroller>
<OverlayScroller maxHeight={maxHeight}>{title}</OverlayScroller>
)
}
{...rest}

@ -12,42 +12,39 @@ interface NoteInfoProps {
const NoteInfo: React.FC<NoteInfoProps> = (props) => {
const { required, description, label, labelExtra } = props || {};
if (!label) return null;
const renderRequiredStar = required ? (
<span className="star" style={{ color: 'red' }}>
*
</span>
) : null;
const renderQuestionIcon = description ? (
<span
className="desc desc-icon"
style={{ marginLeft: required ? 5 : 0, color: 'gray' }}
>
<QuestionCircleOutlined />
</span>
) : null;
const labelContent = (
<>
<span>{label}</span>
{(required || description) && (
<span className="note-info">
{renderRequiredStar}
{renderQuestionIcon}
</span>
)}
</>
);
return (
<span className="label-text">
{description ? (
<Tooltip
title={description}
overlayInnerStyle={{
maxWidth: 'var(--width-tooltip-max)',
width: 'max-content'
}}
>
<span>{label}</span>
<span className="note-info">
{required && (
<span style={{ color: 'red' }} className="star">
*
</span>
)}
<span
style={{ marginLeft: required ? 5 : 0, color: 'gray' }}
className="desc desc-icon"
>
<QuestionCircleOutlined />
</span>
</span>
</Tooltip>
<Tooltip title={description}>{labelContent}</Tooltip>
) : (
<>
<span>{label}</span>
{required && (
<span className="note-info">
<span style={{ color: 'red' }} className="star">
*
</span>
</span>
)}
</>
labelContent
)}
{labelExtra}
</span>

@ -1,7 +1,6 @@
import { useIntl } from '@umijs/max';
import React from 'react';
import styled from 'styled-components';
import OverlayScroller from '../overlay-scroller';
const UL = styled.ul`
list-style: none;
@ -31,25 +30,23 @@ const TooltipList: React.FC<TooltipListProps> = (props) => {
const intl = useIntl();
const { list } = props;
return (
<OverlayScroller style={{ padding: 0 }}>
<UL>
{list.map((item, index: number) => {
return (
<li key={index}>
<span className="title">
{item.title?.locale
? intl.formatMessage({ id: item.title?.text || '' })
: item.title}
:
</span>
<span className="content">
{intl.formatMessage({ id: item.tips })}
</span>
</li>
);
})}
</UL>
</OverlayScroller>
<UL>
{list.map((item, index: number) => {
return (
<li key={index}>
<span className="title">
{item.title?.locale
? intl.formatMessage({ id: item.title?.text || '' })
: item.title}
:
</span>
<span className="content">
{intl.formatMessage({ id: item.tips })}
</span>
</li>
);
})}
</UL>
);
};

@ -827,17 +827,21 @@ body {
}
}
.ant-tooltip-content {
.ant-tooltip-inner {
width: fit-content;
max-width: 300px;
.ant-tooltip {
max-width: var(--width-tooltip-max);
.text-tertiary {
color: var(--color-white-secondary);
}
.ant-tooltip-content {
.ant-tooltip-inner {
width: fit-content;
max-width: var(--width-tooltip-max);
a {
color: var(--ant-color-link-hover);
.text-tertiary {
color: var(--color-white-secondary);
}
a {
color: var(--ant-color-link-hover);
}
}
}
}

@ -556,11 +556,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
showOkBtn={!showExtraButton}
extra={
showExtraButton && (
<Button
type="primary"
onClick={handleSubmitAnyway}
style={{ width: '130px' }}
>
<Button type="primary" onClick={handleSubmitAnyway}>
{intl.formatMessage({
id: 'models.form.submit.anyway'
})}

@ -345,11 +345,7 @@ const AddModal: FC<AddModalProps> = (props) => {
showOkBtn={!showExtraButton}
extra={
showExtraButton && (
<Button
type="primary"
onClick={handleSubmitAnyway}
style={{ width: '130px' }}
>
<Button type="primary" onClick={handleSubmitAnyway}>
{intl.formatMessage({
id: 'models.form.submit.anyway'
})}

@ -462,11 +462,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
showOkBtn={!showExtraButton}
extra={
showExtraButton && (
<Button
type="primary"
onClick={handleSubmitAnyway}
style={{ width: '130px' }}
>
<Button type="primary" onClick={handleSubmitAnyway}>
{intl.formatMessage({
id: 'models.form.submit.anyway'
})}

Loading…
Cancel
Save