fix: textarea overlay шире и заметнее, усилена рамка редактируемых полей
- FieldOverlay: border-2 border-primary/50 + shadow-lg для заметной границы - TaskDetail textarea/rich-text: overlay растянут на всю ширину контентной области, max-height min(70vh, 500px) - AutoResizeTextarea в TaskDetail: maxRows увеличен до 25
This commit is contained in:
@@ -12,6 +12,8 @@ export interface FieldOverlayProps {
|
||||
minWidth?: number | string;
|
||||
/** Максимальная высота оверлея. */
|
||||
maxHeight?: number | string;
|
||||
/** Ширина оверлея. */
|
||||
width?: number | string;
|
||||
}
|
||||
|
||||
export function FieldOverlay({
|
||||
@@ -21,6 +23,7 @@ export function FieldOverlay({
|
||||
fitContainer = true,
|
||||
minWidth,
|
||||
maxHeight,
|
||||
width,
|
||||
}: FieldOverlayProps) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
@@ -34,11 +37,12 @@ export function FieldOverlay({
|
||||
const style: React.CSSProperties = {};
|
||||
if (minWidth !== undefined) style.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
|
||||
if (maxHeight !== undefined) style.maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
|
||||
if (width !== undefined) style.width = typeof width === 'number' ? `${width}px` : width;
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className={cn(
|
||||
'absolute z-50 rounded-md border border-input bg-background shadow-sm overflow-hidden',
|
||||
'absolute z-50 rounded-md border-2 border-primary/50 bg-background shadow-lg overflow-hidden',
|
||||
fitContainer ? 'inset-0' : 'left-0 top-0 min-w-full',
|
||||
className
|
||||
)}
|
||||
|
||||
@@ -31,6 +31,8 @@ export interface InlineFieldProps {
|
||||
overlayMinWidth?: number | string;
|
||||
/** Максимальная высота оверлея. */
|
||||
overlayMaxHeight?: number | string;
|
||||
/** Ширина оверлея. */
|
||||
overlayWidth?: number | string;
|
||||
/** Не блокировать клик по интерактивным элементам внутри read-view. */
|
||||
allowInteractiveReadView?: boolean;
|
||||
/** Закрывать редактор по клику вне (по умолчанию true). */
|
||||
@@ -51,6 +53,7 @@ export function InlineField({
|
||||
fitOverlay = true,
|
||||
overlayMinWidth = 200,
|
||||
overlayMaxHeight,
|
||||
overlayWidth,
|
||||
allowInteractiveReadView = true,
|
||||
closeOnClickOutside = true,
|
||||
activateOnClick = false,
|
||||
@@ -148,6 +151,7 @@ export function InlineField({
|
||||
fitContainer={fitOverlay}
|
||||
minWidth={overlayMinWidth}
|
||||
maxHeight={overlayMaxHeight}
|
||||
width={overlayWidth}
|
||||
>
|
||||
{editor}
|
||||
</FieldOverlay>
|
||||
|
||||
@@ -986,9 +986,9 @@ function FieldValueRow({
|
||||
if (field.type === 'textarea' || field.type === 'rich-text') {
|
||||
return (
|
||||
<AutoResizeTextarea
|
||||
className={cn(textareaClass, 'font-mono text-xs')}
|
||||
className={cn(textareaClass, 'font-mono text-xs min-h-full')}
|
||||
minRows={2}
|
||||
maxRows={10}
|
||||
maxRows={25}
|
||||
value={editorValue === null || editorValue === undefined ? '' : String(editorValue)}
|
||||
onChange={e => onDraftChange?.(e.target.value)}
|
||||
onClick={e => e.stopPropagation()}
|
||||
@@ -1301,9 +1301,10 @@ function FieldValueRow({
|
||||
onEnterEdit={handleEnterEdit}
|
||||
fitOverlay={field.type !== 'textarea' && field.type !== 'rich-text'}
|
||||
overlayClassName={field.type === 'textarea' || field.type === 'rich-text' ? 'flex flex-col overflow-hidden' : ''}
|
||||
overlayMaxHeight={field.type === 'textarea' || field.type === 'rich-text' ? 320 : undefined}
|
||||
overlayMinWidth={field.type === 'textarea' || field.type === 'rich-text' ? 300 : 180}
|
||||
className={field.type === 'textarea' || field.type === 'rich-text' ? 'items-start min-h-[24px]' : 'items-center min-h-[28px]'}
|
||||
overlayMaxHeight={field.type === 'textarea' || field.type === 'rich-text' ? 'min(70vh, 500px)' : undefined}
|
||||
overlayMinWidth={field.type === 'textarea' || field.type === 'rich-text' ? '100%' : 180}
|
||||
overlayWidth={field.type === 'textarea' || field.type === 'rich-text' ? '100%' : undefined}
|
||||
className={field.type === 'textarea' || field.type === 'rich-text' ? 'items-start min-h-[24px] w-full' : 'items-center min-h-[28px]'}
|
||||
/>
|
||||
) : readViewNode;
|
||||
})()}
|
||||
|
||||
Reference in New Issue
Block a user