패널 집계 버튼 추가

This commit is contained in:
김창수 2024-10-25 17:09:01 +09:00
parent a3fc30fb1c
commit f4bd2afe93
6 changed files with 23 additions and 21 deletions

View File

@ -80,10 +80,10 @@ export default function CanvasPage() {
{/* <CanvasContextMenu/> */} {/* <CanvasContextMenu/> */}
{/* 패널 배치 집계 */} {/* 패널 배치 집계 */}
{/* <Penal01/> */} <Penal01/>
{/* <Penal02/> */} <Penal02/>
{/* <Penal03/> */} <Penal03/>
{/* <Penal04/> */} <Penal04/>
{/* 배치면 초기 설정 */} {/* 배치면 초기 설정 */}
{/* <PlacementSettingPop/> */} {/* <PlacementSettingPop/> */}
@ -186,8 +186,8 @@ export default function CanvasPage() {
{/* <ColorSelect/> */} {/* <ColorSelect/> */}
{/* 글꼴 설정, 치수선 설정 */} {/* 글꼴 설정, 치수선 설정 */}
<FontOption/> {/* <FontOption/> */}
<LineOption/> {/* <LineOption/> */}
{/* <ShapeSizeOption/> */} {/* <ShapeSizeOption/> */}
{/* 지붕재 선택 */} {/* 지붕재 선택 */}

View File

@ -5,8 +5,9 @@ export default function Penal01(){
const [penalAct, setPenalAct] = useState(true); const [penalAct, setPenalAct] = useState(true);
return( return(
<WithDraggable isShow={true} handle=".penal-wrap"> <WithDraggable isShow={true} handle=".penal-wrap">
<div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}> <div className={`penal-wrap ${penalAct ? 'act': ''}`} >
<h2>パネル配置集計</h2> <h2>パネル配置集計</h2>
<button className="penal-arr" onClick={() => setPenalAct(!penalAct)}></button>
<div className="penal-table-wrap"> <div className="penal-table-wrap">
<table className="penal-table"> <table className="penal-table">
<thead> <thead>

View File

@ -5,8 +5,9 @@ export default function Penal02(){
const [penalAct, setPenalAct] = useState(true); const [penalAct, setPenalAct] = useState(true);
return( return(
<WithDraggable isShow={true} handle=".penal-wrap"> <WithDraggable isShow={true} handle=".penal-wrap">
<div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}> <div className={`penal-wrap ${penalAct ? 'act': ''}`}>
<h2>パネル配置集計</h2> <h2>パネル配置集計</h2>
<button className="penal-arr" onClick={() => setPenalAct(!penalAct)}></button>
<div className="penal-table-wrap"> <div className="penal-table-wrap">
<table className="penal-table" style={{width: '335px'}}> <table className="penal-table" style={{width: '335px'}}>
<thead> <thead>

View File

@ -5,8 +5,9 @@ export default function Penal03(){
const [penalAct, setPenalAct] = useState(true); const [penalAct, setPenalAct] = useState(true);
return( return(
<WithDraggable isShow={true} handle=".penal-wrap"> <WithDraggable isShow={true} handle=".penal-wrap">
<div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}> <div className={`penal-wrap ${penalAct ? 'act': ''}`} >
<h2>パネル配置集計</h2> <h2>パネル配置集計</h2>
<button className="penal-arr" onClick={() => setPenalAct(!penalAct)}></button>
<div className="penal-table-wrap"> <div className="penal-table-wrap">
<table className="penal-table" style={{width: '335px'}}> <table className="penal-table" style={{width: '335px'}}>
<thead> <thead>

View File

@ -5,8 +5,9 @@ export default function Penal04(){
const [penalAct, setPenalAct] = useState(true); const [penalAct, setPenalAct] = useState(true);
return( return(
<WithDraggable isShow={true} handle=".penal-wrap"> <WithDraggable isShow={true} handle=".penal-wrap">
<div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}> <div className={`penal-wrap ${penalAct ? 'act': ''}`}>
<h2>パネル配置集計</h2> <h2>パネル配置集計</h2>
<button className="penal-arr" onClick={() => setPenalAct(!penalAct)}></button>
<div className="penal-table-wrap"> <div className="penal-table-wrap">
<table className="penal-table" style={{width: '435px'}}> <table className="penal-table" style={{width: '435px'}}>
<thead> <thead>

View File

@ -4,30 +4,28 @@
top: 200px; top: 200px;
left: 50px; left: 50px;
z-index: 999999; z-index: 999999;
display: flex;
width: 237px; width: 237px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
background-color: #fff; background-color: #fff;
border: 1px solid #DFDFDF; border: 1px solid #DFDFDF;
padding: 0 34px 0 10px; padding: 0 10px 0 10px;
border-radius: 2px; border-radius: 2px;
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
cursor: pointer; cursor: pointer;
&::before{ .penal-arr{
content: ''; flex: none;
position: absolute; width: 24px;
top: 50%; height: 100%;
right: 12px;
transform: translateY(-50%);
width: 10px;
height: 6px;
background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center; background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
background-size: cover; background-size: 10px 6px;
} }
h2{ h2{
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #3D3D3D; color: #3D3D3D;
flex: 1;
} }
.penal-table-wrap{ .penal-table-wrap{
display: none; display: none;
@ -69,7 +67,7 @@
h2{ h2{
color: #fff; color: #fff;
} }
&::before{ .penal-arr{
background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center; background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
} }
.penal-table-wrap{ .penal-table-wrap{