style: overflow layer padding
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
+13
-9
@@ -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'
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user