qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

배치면 초기설정 select 수정

Browse Source
This commit is contained in:
김창수 2024-10-02 11:00:58 +09:00
parent 2bdb404734
commit 0a5eb4c65c
8 changed files with 189 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/canvas/page.jsx
View File

@ -8,6 +8,7 @@ import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
import GridMove from '@/components/canvas/modal/gridoption/GridMove'
import GridOption from '@/components/canvas/modal/gridoption/GridOption'
import ManualRoofShape from '@/components/canvas/modal/manualroofshape/ManualRoofShape'
import MovingUpDonw from '@/components/canvas/modal/movingupdown/MovingUpDown'
import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting'
@ -32,15 +33,15 @@ export default function CanvasPage() {
<CanvasLayout menuValue={menuValue}/>
</div>
{/* 배치면 초기 설정 */}
{/* <PlacementSettingPop/> */}
<PlacementSettingPop/>
{/* 캔버스 기본 셋팅 */}
{/* {modalOption.option && <SettingModal01/>} */}
{/* 점·선 그리드 설정 */}
{modalOption.gridoption && <GridOption/>}
{modalOption.gridcopy && <GridCopy/>}
{modalOption.gridmove && <GridMove/>}
{/* {modalOption.gridcopy && <GridCopy/>} */}
{/* {modalOption.gridmove && <GridMove/>} */}
{/* 외벽선 그리기 */}
{/* {modalOption.outerwall && <OuterLineWall/>} */}
@ -59,6 +60,9 @@ export default function CanvasPage() {
{/* 처마∙케라바 변경 */}
{/* <EvaseKerabaOption/> */}
{/* 동선이동∙형 올림 내림 */}
{/* <MovingUpDonw/> */}
</div>
</div>
</div>

2
src/components/canvas/modal/gridoption/GridOption.jsx
View File

@ -9,7 +9,7 @@ export default function GridOption() {
const [close, setClose] = useState(false)
const SelectOption = [
{name: 'オンライン保証シ',}, {name: 'ステム'}
{name: '原寸',}, {name: '原寸'}, {name: '原寸'}, {name: '原寸'}
]
const HandleClickClose = () => {

46
src/components/canvas/modal/movingupdown/MovingTab01.jsx Normal file
View File

@ -0,0 +1,46 @@
import Image from "next/image";
export default function MovingTab01(){
return(
<>
<div className="outline-wrap">
<div className="guide">
家屋などの壁に面する屋根を作成します。
</div>
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">高さ変更：下、左</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">高さ変更：上、右</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
</div>
</div>
</>
)
}

46
src/components/canvas/modal/movingupdown/MovingTab02.jsx Normal file
View File

@ -0,0 +1,46 @@
import Image from "next/image";
export default function MovingTab02(){
return(
<>
<div className="outline-wrap">
<div className="guide">
を選択して幅を指定してください桁の異なる辺
</div>
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">高さ変更：下、左</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">高さ変更：上、右</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
</div>
</div>
</>
)
}

43
src/components/canvas/modal/movingupdown/MovingUpDown.jsx Normal file
View File

@ -0,0 +1,43 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";
import MovingTab01 from "./MovingTab01";
const buttonMenu = [
{id: 1, name: '銅線の移動軒'},
{id: 2, name: '型上げ・降り'},
]
export default function MovingUpDonw(){
const [buttonAct, setButtonAct] = useState(1);
return(
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">軒・ケラバ変更</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="modal-btn-wrap">
{buttonMenu.map((item) => (
<button
key={item.id}
className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`}
onClick={() => setButtonAct(item.id)}
>
{item.name}
</button>
))}
</div>
<div className="properties-setting-wrap outer">
<div className="setting-tit">設定</div>
{buttonAct === 1 && <MovingTab01/>}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
// <WithDraggable isShow={true}>
// </WithDraggable>
)
}

42
src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
View File

@ -1,9 +1,21 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import PlacementGuidePop from "./PlacementGuidePop";
import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop";
import Qselect from "@/components/common/select/Qselect";
const SelectOption01 = [
{name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
]
const SelectOption02 = [
{name: '265',}, {name: '265'}, {name: '265'}, {name: '265'}
]
const SelectOption03 = [
{name: '235',}, {name: '235'}, {name: '235'}, {name: '235'}
]
const SelectOption04 = [
{name: '455'}, {name: '455'}, {name: '455'}, {name: '455'}
]
export default function PlacementSettingPop(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap l`}>
@ -64,33 +76,25 @@ export default function PlacementSettingPop(){
</th>
<td>
<div className="placement-option">
<div className="select-wrap" style={{width: '171px'}}>
<select className="select-light dark" name="" id="" >
<option>瓦53A</option>
</select>
<div className="grid-select" style={{width: '171px'}}>
<Qselect title={'瓦53A'} option={SelectOption01}/>
</div>
<div className="flex-ment">
<span>W</span>
<div className="select-wrap" style={{width: '84px'}}>
<select className="select-light dark" name="" id="" >
<option>265</option>
</select>
<div className="grid-select" style={{width: '84px'}}>
<Qselect title={'265'} option={SelectOption02}/>
</div>
</div>
<div className="flex-ment">
<span>L</span>
<div className="select-wrap" style={{width: '84px'}}>
<select className="select-light dark" name="" id="" >
<option>235</option>
</select>
<div className="grid-select" style={{width: '84px'}}>
<Qselect title={'235'} option={SelectOption03}/>
</div>
</div>
<div className="flex-ment">
<span>垂木の間隔</span>
<div className="select-wrap" style={{width: '84px'}}>
<select className="select-light dark" name="" id="" >
<option>455</option>
</select>
<div className="grid-select right" style={{width: '84px'}}>
<Qselect title={'455'} option={SelectOption04}/>
</div>
</div>
@ -104,8 +108,8 @@ export default function PlacementSettingPop(){
<button className="btn-frame modal act">保存</button>
</div>
</div>
<PlacementGuidePop/>
<RoofingMaterialGudiePop/>
{/* <PlacementGuidePop/>
<RoofingMaterialGudiePop/> */}
</div>
</WithDraggable>
)

25
src/styles/_modal.scss
View File

@ -26,7 +26,6 @@ $alert-color: #101010;
border-radius: 4px;
background-color: #272727;
z-index: 9999999;
overflow: hidden;
&.xxm{
width: 270px;
}
@ -90,6 +89,7 @@ $alert-color: #101010;
align-items: center;
padding: 10px 24px;
background-color: #000;
// overflow: hidden;
h1.title{
font-size: 13px;
color: $pop-color;
@ -97,8 +97,8 @@ $alert-color: #101010;
}
.modal-close{
margin-left: auto;
color: $pop-color;
text-indent: -999999999px;
color: transparent;
font-size: 0;
width: 10px;
height: 10px;
background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
@ -247,6 +247,25 @@ $alert-color: #101010;
.sort-select{
width: 100%;
background-color: #313131;
min-width: auto;
font-size: 12px;
border: none;
p{
font-size: 12px;
}
> ul{
border: none;
}
}
&.right{
p{
text-align: right;
}
ul{
li{
justify-content: flex-end;
}
}
}
}
.grid-btn-wrap{

2
src/styles/_reset.scss
View File

@ -264,7 +264,7 @@ button{
min-width: 100px;
height: 30px;
line-height: 30px;
padding: 0 10px;
padding: 0 25px 0 10px;
background-color: #373737;
border: 1px solid #3F3F3F;
border-radius: 2px;