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