위젯 헤더 스타일 변경
This commit is contained in:
parent
28ecc31128
commit
3f3779c25e
|
|
@ -732,7 +732,7 @@ export function CanvasElement({
|
|||
onMouseDown={handleMouseDown}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="flex cursor-move items-center justify-between px-4 py-2">
|
||||
<div className="flex cursor-move items-center justify-between px-2 py-1">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 차트 타입 전환 드롭다운 (차트일 경우만) */}
|
||||
{element.type === "chart" && (
|
||||
|
|
@ -743,7 +743,7 @@ export function CanvasElement({
|
|||
}}
|
||||
>
|
||||
<SelectTrigger
|
||||
className="h-7 w-[140px] text-xs"
|
||||
className="h-6 w-[120px] text-[11px]"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
|
|
@ -772,7 +772,7 @@ export function CanvasElement({
|
|||
)}
|
||||
{/* 제목 */}
|
||||
{!element.type || element.type !== "chart" ? (
|
||||
<span className="text-sm font-bold text-gray-800">{element.customTitle || element.title}</span>
|
||||
<span className="text-xs font-bold text-gray-800">{element.customTitle || element.title}</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
|
|
@ -780,18 +780,18 @@ export function CanvasElement({
|
|||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="element-close hover:bg-destructive h-6 w-6 text-gray-400 hover:text-white"
|
||||
className="element-close hover:bg-destructive h-5 w-5 text-gray-400 hover:text-white"
|
||||
onClick={handleRemove}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
title="삭제"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 내용 */}
|
||||
<div className="relative h-[calc(100%-50px)] px-4 pb-4">
|
||||
<div className="relative h-[calc(100%-32px)] px-2 pb-2">
|
||||
{element.type === "chart" ? (
|
||||
// 차트 렌더링
|
||||
<div className="h-full w-full bg-white">
|
||||
|
|
@ -807,7 +807,7 @@ export function CanvasElement({
|
|||
element={element}
|
||||
data={chartData || undefined}
|
||||
width={element.size.width}
|
||||
height={element.size.height - 45}
|
||||
height={element.size.height - 32}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -379,8 +379,8 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
style={{ minHeight: "300px" }}
|
||||
>
|
||||
{element.showHeader !== false && (
|
||||
<div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
|
||||
<h3 className="text-sm font-semibold text-gray-800">{element.customTitle || element.title}</h3>
|
||||
<div className="flex items-center justify-between px-2 py-1">
|
||||
<h3 className="text-xs font-semibold text-gray-800">{element.customTitle || element.title}</h3>
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
|
|
@ -388,7 +388,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
title="새로고침"
|
||||
>
|
||||
<svg
|
||||
className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
|
||||
className={`h-3 w-3 ${isLoading ? "animate-spin" : ""}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
|
|
@ -403,7 +403,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className={element.showHeader !== false ? "p-4" : "p-4"} style={{ minHeight: "250px" }}>
|
||||
<div className={element.showHeader !== false ? "p-2" : "p-2"} style={{ minHeight: "250px" }}>
|
||||
{!isMounted ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
|
||||
|
|
@ -441,8 +441,8 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
}}
|
||||
>
|
||||
{element.showHeader !== false && (
|
||||
<div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
|
||||
<h3 className="text-sm font-semibold text-gray-800">{element.customTitle || element.title}</h3>
|
||||
<div className="flex items-center justify-between px-2 py-1">
|
||||
<h3 className="text-xs font-semibold text-gray-800">{element.customTitle || element.title}</h3>
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
|
|
@ -450,7 +450,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
title="새로고침"
|
||||
>
|
||||
<svg
|
||||
className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
|
||||
className={`h-3 w-3 ${isLoading ? "animate-spin" : ""}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
|
|
@ -465,7 +465,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className={element.showHeader !== false ? "h-[calc(100%-50px)] w-full" : "h-full w-full"}>
|
||||
<div className={element.showHeader !== false ? "h-[calc(100%-32px)] w-full" : "h-full w-full"}>
|
||||
{!isMounted ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
|
||||
|
|
@ -475,7 +475,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
element={element}
|
||||
data={data}
|
||||
width={undefined}
|
||||
height={element.showHeader !== false ? element.size.height - 50 : element.size.height}
|
||||
height={element.showHeader !== false ? element.size.height - 32 : element.size.height}
|
||||
/>
|
||||
) : (
|
||||
renderWidget(element)
|
||||
|
|
|
|||
Loading…
Reference in New Issue