메뉴 세팅 변경 및 팝업 추가
This commit is contained in:
parent
3a830cd7cf
commit
5592f6f57a
@ -2,6 +2,7 @@
|
||||
|
||||
import CanvasLayout from '@/components/canvas/CanvasLayout'
|
||||
import CanvasMenu from '@/components/canvas/CanvasMenu'
|
||||
import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
|
||||
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
|
||||
import Header from '@/components/header/Header'
|
||||
import '@/styles/style.scss'
|
||||
@ -19,6 +20,7 @@ export default function CanvasPage() {
|
||||
<CanvasLayout/>
|
||||
</div>
|
||||
{modalOpen === 'option' && <SettingModal01 modalOpen={modalOpen} setModalOpen={setModalOpen}/>}
|
||||
{modalOpen === 'outerwall' && <OuterLineWall modalOpen={modalOpen} setModalOpen={setModalOpen}/>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ export default function CanvasMenu({setModalOpen}) {
|
||||
}
|
||||
}
|
||||
return(
|
||||
<div className={`canvas-menu-wrap ${menuNumber !== null ? 'active' : ""}`}>
|
||||
<div className={`canvas-menu-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ""}`}>
|
||||
<div className="canvas-menu-inner">
|
||||
<ul className="canvas-menu-list">
|
||||
<li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
|
||||
@ -42,43 +42,45 @@ export default function CanvasMenu({setModalOpen}) {
|
||||
</li>
|
||||
</ul>
|
||||
<div className="canvas-side-btn-wrap">
|
||||
<div className="btn-from">
|
||||
<button className="btn01 "></button>
|
||||
<button className="btn02 active"></button>
|
||||
<button className="btn03"></button>
|
||||
</div>
|
||||
<div className="vertical-horizontal">
|
||||
<span>垂直水平モード</span>
|
||||
<button onClick={() => setVertical(!vertical)}>{vertical ? "ON" : "OFF"}</button>
|
||||
</div>
|
||||
<div className="select-box">
|
||||
<Qselect title={'瓦53A'} option={SelectOption}/>
|
||||
</div>
|
||||
<div className="btn-from">
|
||||
<button className="btn04" onClick={() => setModalOpen('option')}></button>
|
||||
<button className="btn05"></button>
|
||||
<button className="btn06"></button>
|
||||
</div>
|
||||
<div className="size-control">
|
||||
<button className="control-btn minus"></button>
|
||||
<span>100%</span>
|
||||
<button className="control-btn plus"></button>
|
||||
</div>
|
||||
<div className="btn-from">
|
||||
<button className="btn07"></button>
|
||||
<button className="btn08"></button>
|
||||
<button className="btn09"></button>
|
||||
</div>
|
||||
{
|
||||
(menuNumber === 1 || menuNumber === 2 || menuNumber === 3 || menuNumber === 4) &&
|
||||
<>
|
||||
<div className="btn-from">
|
||||
<button className="btn01 "></button>
|
||||
<button className="btn02 active"></button>
|
||||
<button className="btn03"></button>
|
||||
</div>
|
||||
<div className={`vertical-horizontal ${vertical ? 'on':''}`}>
|
||||
<span>垂直水平モード</span>
|
||||
<button onClick={() => setVertical(!vertical)}>{vertical ? "ON" : "OFF"}</button>
|
||||
</div>
|
||||
<div className="select-box">
|
||||
<Qselect title={'瓦53A'} option={SelectOption}/>
|
||||
</div>
|
||||
<div className="btn-from">
|
||||
<button className="btn04" onClick={() => setModalOpen('option')}></button>
|
||||
<button className="btn05"></button>
|
||||
<button className="btn06"></button>
|
||||
</div>
|
||||
<div className="size-control">
|
||||
<button className="control-btn minus"></button>
|
||||
<span>100%</span>
|
||||
<button className="control-btn plus"></button>
|
||||
</div>
|
||||
<div className="btn-from">
|
||||
<button className="btn07"></button>
|
||||
<button className="btn08"></button>
|
||||
<button className="btn09"></button>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className={`canvas-depth2-wrap ${menuNumber !== null ? 'active' : ''}`}>
|
||||
{menuNumber === 0 && <MenuDepth01/>}
|
||||
{menuNumber === 1 && <MenuDepth01/>}
|
||||
{menuNumber === 2 && <MenuDepth01/>}
|
||||
<div className={`canvas-depth2-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ''}`}>
|
||||
{menuNumber === 2 && <MenuDepth01 setModalOpen={setModalOpen}/>}
|
||||
{menuNumber === 3 && <MenuDepth01/>}
|
||||
{menuNumber === 4 && <MenuDepth01/>}
|
||||
{menuNumber === 5 && <MenuDepth01/>}
|
||||
{menuNumber === 6 && <MenuDepth01/>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
import { ToggleonMouse } from "../header/Header"
|
||||
|
||||
export default function MenuDepth01(){
|
||||
export default function MenuDepth01({setModalOpen}){
|
||||
return(
|
||||
<div className="canvas-depth2-inner">
|
||||
<ul className="canvas-depth2-list">
|
||||
<li className="canvas-depth2-item active"><button>外壁線を描</button></li>
|
||||
<li className="canvas-depth2-item active" onClick={() => setModalOpen('outerwall')}><button>外壁線を描</button></li>
|
||||
<li className="canvas-depth2-item"><button>補助線を描</button></li>
|
||||
<li className="canvas-depth2-item"><button>屋根形状設定</button></li>
|
||||
<li className="canvas-depth2-item"><button>軒下変更</button></li>
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from "react";
|
||||
import WithDraggable from "@/components/common/draggable/withDraggable";
|
||||
|
||||
|
||||
export default function OuterLineWall ({modalOpen, setModalOpen}){
|
||||
const [buttonAct, setButtonAct] = useState(1);
|
||||
const [close, setClose] = useState(false)
|
||||
const HandleClickClose = () => {
|
||||
setClose(true)
|
||||
setTimeout(() => {
|
||||
setModalOpen('');
|
||||
setClose(false);
|
||||
}, 180)
|
||||
}
|
||||
return(
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap ${modalOpen === 'outerwall' && close === false ? 'mount' : ''}${close ? 'unmount' : ''} `}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">外壁線を描</h1>
|
||||
<button className="modal-close" onClick={HandleClickClose}>닫기</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="modal-btn-wrap">
|
||||
<button
|
||||
className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`}
|
||||
onClick={() => setButtonAct(1)}
|
||||
>
|
||||
外壁線
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`}
|
||||
onClick={() => setButtonAct(2)}
|
||||
>
|
||||
直角
|
||||
</button>
|
||||
<button
|
||||
className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`}
|
||||
onClick={() => setButtonAct(2)}
|
||||
>
|
||||
イ・グベ
|
||||
</button>
|
||||
<button
|
||||
className={`btn-frame modal ${buttonAct === 4 ? 'act' : ''}`}
|
||||
onClick={() => setButtonAct(2)}
|
||||
>
|
||||
角度
|
||||
</button>
|
||||
<button
|
||||
className={`btn-frame modal ${buttonAct === 5 ? 'act' : ''}`}
|
||||
onClick={() => setButtonAct(2)}
|
||||
>
|
||||
対角線
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title">設定</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -132,6 +132,12 @@
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
padding: 0 7.5px;
|
||||
transition: all .17s ease-in-out;
|
||||
}
|
||||
&.on{
|
||||
button{
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.size-control{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user