Merge branch 'qcast-pub' into dev
# Conflicts: # src/components/floor-plan/CanvasFrame.jsx # src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
This commit is contained in:
minsik
commit
405071f08f
4
public/static/images/canvas/circuit_del.svg
Normal file
4
public/static/images/canvas/circuit_del.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="14" height="14" rx="7" stroke="white"/>
|
||||
<path d="M9.741 10.559L7.509 8.327L5.277 10.559L4.512 9.794L6.744 7.562L4.512 5.33L5.277 4.565L7.509 6.797L9.741 4.565L10.506 5.33L8.274 7.562L10.506 9.794L9.741 10.559Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 358 B |
@ -1,5 +1,5 @@
|
||||
<svg width="154" height="155" viewBox="0 0 154 155" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4103_3996)">
|
||||
<svg width="154" height="140" viewBox="0 0 154 140" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_24_15)">
|
||||
<path d="M1.65636 139L70 9.14709L138.344 139H1.65636Z" stroke="black" stroke-width="2"/>
|
||||
<rect x="69" y="11" width="2" height="127" fill="black"/>
|
||||
<circle cx="70" cy="8" r="7.5" stroke="#FF0000"/>
|
||||
@ -9,13 +9,8 @@
|
||||
<path d="M144 134L148.5 138L153 134" stroke="black"/>
|
||||
<rect x="144" width="9" height="1" fill="#FF0000"/>
|
||||
<rect x="144" y="139" width="9" height="1" fill="#FF0000"/>
|
||||
<rect x="2" y="150" width="1" height="136" transform="rotate(-90 2 150)" fill="black"/>
|
||||
<path d="M6 154L2 149.5L6 145" stroke="black"/>
|
||||
<path d="M134 154L138 149.5L134 145" stroke="black"/>
|
||||
<rect y="154" width="9" height="1" transform="rotate(-90 0 154)" fill="#FF0000"/>
|
||||
<rect x="139" y="154" width="9" height="1" transform="rotate(-90 139 154)" fill="#FF0000"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_4103_3996">
|
||||
<clipPath id="clip0_24_15">
|
||||
<rect width="140" height="140" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 716 B |
6
public/static/images/sub/community_clip.svg
Normal file
6
public/static/images/sub/community_clip.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M6.05566 9.94445L9.94455 6.05556" stroke="#45576F" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_2" d="M11.7693 10.0296L13.799 8C15.4003 6.39865 15.4003 3.80236 13.799 2.20101C12.1976 0.599663 9.60135 0.599663 8 2.20101L5.97035 4.23066M10.0296 11.7693L8 13.799C6.39865 15.4003 3.80236 15.4003 2.20101 13.799C0.599663 12.1976 0.599663 9.60135 2.20101 8L4.23066 5.97035" stroke="#45576F" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 592 B |
5
public/static/images/sub/community_pop_close.svg
Normal file
5
public/static/images/sub/community_pop_close.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M8.99915 9L1 1M1.00085 9L9 1" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 260 B |
11
public/static/images/sub/community_search.svg
Normal file
11
public/static/images/sub/community_search.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="element" clip-path="url(#clip0_4262_4496)">
|
||||
<path id="패스 171" d="M17.879 17.9735L19.879 19.9735" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector" d="M9.98901 18.4039C14.6834 18.4039 18.489 14.5989 18.489 9.90519C18.489 5.21149 14.6834 1.40649 9.98901 1.40649C5.29459 1.40649 1.48901 5.21149 1.48901 9.90519C1.48901 14.5989 5.29459 18.4039 9.98901 18.4039Z" stroke="#101010" stroke-width="1.5"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4262_4496">
|
||||
<rect width="21" height="21" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 677 B |
6
public/static/images/sub/file_down_btn.svg
Normal file
6
public/static/images/sub/file_down_btn.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="35" height="35" rx="17.5" fill="white"/>
|
||||
<rect x="0.5" y="0.5" width="35" height="35" rx="17.5" stroke="#45576F"/>
|
||||
<path d="M9 20L9.23384 20.6626C10.144 23.2413 10.5991 24.5307 11.6374 25.2654C12.6758 26 14.0431 26 16.7778 26H19.2222C21.9569 26 23.3242 26 24.3626 25.2654C25.4009 24.5307 25.856 23.2413 26.7662 20.6626L27 20" stroke="#45576F" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M18 20L18 10M18 20C17.2998 20 15.9915 18.0057 15.5 17.5M18 20C18.7002 20 20.0085 18.0057 20.5 17.5" stroke="#45576F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 713 B |
6
public/static/images/sub/grid-btn-excel.svg
Normal file
6
public/static/images/sub/grid-btn-excel.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Vector 4232" d="M0.499939 8.5556L0.681818 9.07093C1.38972 11.0766 1.74367 12.0795 2.55127 12.6509C3.35887 13.2223 4.42235 13.2223 6.54932 13.2223H8.45058C10.5775 13.2223 11.641 13.2223 12.4486 12.6509C13.2562 12.0795 13.6102 11.0766 14.3181 9.07093L14.5 8.5556" stroke="#94A0AD" stroke-linecap="round"/>
|
||||
<path id="Vector" d="M7.49981 8.55556V0.777771M7.49981 8.55556C6.95518 8.55556 5.93766 7.00444 5.55536 6.61111M7.49981 8.55556C8.04443 8.55556 9.06195 7.00444 9.44425 6.61111" stroke="#94A0AD" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 682 B |
8
public/static/images/sub/grid-btn-file.svg
Normal file
8
public/static/images/sub/grid-btn-file.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Rectangle 2175" d="M12.5556 6.25V5.41C12.5497 3.44799 12.487 2.40784 11.8095 1.73809C11.0629 1 9.8612 1 7.45783 1L6.09832 1C3.69495 1 2.49326 1 1.74663 1.73809C1 2.47618 1 3.66412 1 6.04L1 9.26C1 11.6359 1 12.8238 1.74663 13.5619C2.40945 14.2171 3.4309 14.2907 5.33333 14.299" stroke="#94A0AD" stroke-linecap="round"/>
|
||||
<path id="Vector" d="M12.321 13.382L13.9999 15M13.2777 11.15C13.2777 9.4103 11.8226 8 10.0277 8C8.23278 8 6.77771 9.4103 6.77771 11.15C6.77771 12.8897 8.23278 14.3 10.0277 14.3C11.8226 14.3 13.2777 12.8897 13.2777 11.15Z" stroke="#94A0AD" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector 4435" d="M3.88879 4.5H9.66657" stroke="#94A0AD" stroke-linecap="round"/>
|
||||
<path id="Vector 4436" d="M3.88879 7.29993H6.05546" stroke="#94A0AD" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 927 B |
4
public/static/images/sub/grid_tip.svg
Normal file
4
public/static/images/sub/grid_tip.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="6.5" fill="white" stroke="#F16A6A"/>
|
||||
<path d="M6.507 8.728L6.276 4.669L6.221 3.129H7.849L7.794 4.669L7.563 8.728H6.507ZM7.035 11.654C6.74167 11.654 6.49967 11.5513 6.309 11.346C6.12567 11.1407 6.034 10.8913 6.034 10.598C6.034 10.29 6.12567 10.037 6.309 9.839C6.49967 9.641 6.74167 9.542 7.035 9.542C7.32833 9.542 7.56667 9.641 7.75 9.839C7.94067 10.037 8.036 10.29 8.036 10.598C8.036 10.8913 7.94067 11.1407 7.75 11.346C7.56667 11.5513 7.32833 11.654 7.035 11.654Z" fill="#F16A6A"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 611 B |
@ -1,19 +1,23 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
import { useCanvas } from '@/hooks/useCanvas'
|
||||
import { useEvent } from '@/hooks/useEvent'
|
||||
import QContextMenu from '@/components/common/context-menu/QContextMenu'
|
||||
import { useContextMenu } from '@/hooks/useContextMenu'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { currentMenuState } from '@/store/canvasAtom'
|
||||
import { MENU } from '@/common/common'
|
||||
import { currentObjectState } from '@/store/canvasAtom'
|
||||
|
||||
export default function CanvasFrame({ plan }) {
|
||||
const canvasRef = useRef(null)
|
||||
const { canvas } = useCanvas('canvas')
|
||||
const currentMenu = useRecoilValue(currentMenuState)
|
||||
const [contextMenu, setContextMenu] = useState([[]])
|
||||
const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu()
|
||||
const currentObject = useRecoilValue(currentObjectState)
|
||||
|
||||
useEffect(() => {
|
||||
console.log(currentObject)
|
||||
}, [currentObject])
|
||||
useEvent()
|
||||
|
||||
const loadCanvas = () => {
|
||||
@ -31,142 +35,21 @@ export default function CanvasFrame({ plan }) {
|
||||
loadCanvas()
|
||||
}, [plan, canvas])
|
||||
|
||||
useEffect(() => {
|
||||
switch (currentMenu) {
|
||||
case MENU.PLAN_DRAWING:
|
||||
setContextMenu([
|
||||
[
|
||||
{
|
||||
name: '그리드 이동',
|
||||
},
|
||||
{
|
||||
name: '그리드 복사',
|
||||
},
|
||||
{
|
||||
name: '그리드 색 변경',
|
||||
},
|
||||
{
|
||||
name: '삭제',
|
||||
},
|
||||
{
|
||||
name: '전체 삭제',
|
||||
},
|
||||
],
|
||||
])
|
||||
break
|
||||
case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
|
||||
case MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS:
|
||||
case MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS:
|
||||
case MENU.ROOF_COVERING.ROOF_SHAPE_EDITING:
|
||||
case MENU.ROOF_COVERING.HELP_LINE_DRAWING:
|
||||
case MENU.ROOF_COVERING.EAVES_KERAVA_EDIT:
|
||||
case MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN:
|
||||
case MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET:
|
||||
case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC:
|
||||
case MENU.ROOF_COVERING.DEFAULT:
|
||||
console.log('지붕덮개')
|
||||
setContextMenu([
|
||||
[
|
||||
{
|
||||
name: '지붕재 배치',
|
||||
},
|
||||
{
|
||||
name: '지붕재 삭제',
|
||||
},
|
||||
{
|
||||
name: '지붕재 전체 삭제',
|
||||
},
|
||||
{
|
||||
name: '선택・이동',
|
||||
},
|
||||
{
|
||||
name: '외벽선 삭제',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: '사이즈 변경',
|
||||
},
|
||||
{
|
||||
name: '보조선 이동(M)',
|
||||
},
|
||||
{
|
||||
name: '보조선 복사(C)',
|
||||
},
|
||||
{
|
||||
name: '보조선 삭제(D)',
|
||||
},
|
||||
{
|
||||
name: '보조선 수직이등분선',
|
||||
},
|
||||
{
|
||||
name: '보조선 절삭',
|
||||
},
|
||||
{
|
||||
name: '보조선 전체 삭제',
|
||||
},
|
||||
],
|
||||
])
|
||||
break
|
||||
case MENU.BATCH_CANVAS.SLOPE_SETTING:
|
||||
case MENU.BATCH_CANVAS.BATCH_DRAWING:
|
||||
case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
|
||||
case MENU.BATCH_CANVAS.OBJECT_BATCH:
|
||||
case MENU.BATCH_CANVAS.ALL_REMOVE:
|
||||
case MENU.BATCH_CANVAS.DEFAULT:
|
||||
console.log('배치면')
|
||||
setContextMenu([
|
||||
[
|
||||
{
|
||||
name: '사이즈 변경',
|
||||
},
|
||||
{
|
||||
name: '삭제(D)',
|
||||
},
|
||||
{
|
||||
name: '이동(M)',
|
||||
},
|
||||
{
|
||||
name: '복사(C)',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: '지붕재 변경',
|
||||
},
|
||||
{
|
||||
name: '각 변 속성 변경',
|
||||
},
|
||||
{
|
||||
name: '흐름 방향 변경',
|
||||
},
|
||||
],
|
||||
])
|
||||
break
|
||||
default:
|
||||
console.log('default')
|
||||
setContextMenu([])
|
||||
break
|
||||
}
|
||||
}, [currentMenu])
|
||||
|
||||
useEffect(() => {
|
||||
console.log('currentMenu', currentMenu)
|
||||
console.log('contextMenu', contextMenu)
|
||||
}, [contextMenu])
|
||||
const onClickContextMenu = (index) => {}
|
||||
|
||||
return (
|
||||
<div className="canvas-frame flex justify-center">
|
||||
<canvas ref={canvasRef} id={'canvas'}></canvas>
|
||||
<QContextMenu contextRef={canvasRef} canvasProps={canvas}>
|
||||
{contextMenu.map((menus, index) => (
|
||||
<ul key={`contextMenu-${index}`}>
|
||||
{menus.map((menu, idx) => (
|
||||
<li key={`menu-${idx}`}>{menu.name}</li>
|
||||
<ul key={index}>
|
||||
{menus.map((menu) => (
|
||||
<li onClick={(e) => setCurrentContextMenu(menu)}>{menu.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
))}
|
||||
</QContextMenu>
|
||||
{currentContextMenu?.component}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
49
src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
Normal file
49
src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
|
||||
export default function AuxiliaryMove({ setCurrentContextMenu }) {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: 0, y: 150 }}>
|
||||
<div className={`modal-pop-wrap xm`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">補助線の移動 </h1>
|
||||
<button className="modal-close" onClick={() => setCurrentContextMenu(null)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="grid-option-tit">移動する方向を入力してください</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="move-form">
|
||||
<p className="mb5">長さ</p>
|
||||
<div className="input-move-wrap mb5">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" defaultValue={910} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" defaultValue={910} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="direction-move-wrap">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
61
src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
Normal file
61
src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
Normal file
@ -0,0 +1,61 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
|
||||
export default function AuxiliarySize({ setCurrentContextMenu }) {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: 0, y: 150 }}>
|
||||
<div className={`modal-pop-wrap xm`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">補助線サイズ変更 </h1>
|
||||
<button className="modal-close" onClick={() => setCurrentContextMenu(null)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="discrimination-box mb10">
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">1支店</label>
|
||||
</div>
|
||||
<div className="outline-form mb15">
|
||||
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={100} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>長さ</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={100} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="discrimination-box ">
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">2支店</label>
|
||||
</div>
|
||||
<div className="outline-form mb15">
|
||||
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={100} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>長さ</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={100} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -45,7 +45,7 @@ export default function BasicSetting({ setShowBasicSettingModal }) {
|
||||
{getMessage('modal.module.basic.setting.prev')}
|
||||
</button>
|
||||
)}
|
||||
{tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}
|
||||
{/*{tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}*/}
|
||||
{tabNum !== 3 && (
|
||||
<button className="btn-frame modal" onClick={() => setTabNum(tabNum + 1)}>
|
||||
Next
|
||||
|
||||
@ -100,60 +100,6 @@ export default function PitchPlacement() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="hexagonal-wrap">
|
||||
<div className="hexagonal-item">
|
||||
<div className="bold-font">割り当て設定</div>
|
||||
</div>
|
||||
<div className="hexagonal-item">
|
||||
<div className="hexagonal-flx-auto">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.module.basic.setting.pitch.module.row.amount')}
|
||||
</span>
|
||||
<div className="input-grid mr5" style={{ width: '70px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={1} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.module.basic.setting.pitch.module.row.margin')}
|
||||
</span>
|
||||
<div className="input-grid mr5" style={{ width: '70px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={1} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.module.basic.setting.pitch.module.column.amount')}
|
||||
</span>
|
||||
<div className="input-grid mr5" style={{ width: '70px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={1} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.module.basic.setting.pitch.module.column.margin')}
|
||||
</span>
|
||||
<div className="input-grid mr5" style={{ width: '70px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={300} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hexagonal-item">
|
||||
<div className="hexagonal-flx">
|
||||
<div className="normal-font">{getMessage('modal.module.basic.setting.pitch.module.allocation.setting.info')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
import { useState } from 'react'
|
||||
import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect'
|
||||
import CircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/CircuitAllocation'
|
||||
import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
|
||||
export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModal }) {
|
||||
const { getMessage } = useMessage()
|
||||
|
||||
@ -115,12 +115,17 @@ export default function PowerConditionalSelect({ setTabNum }) {
|
||||
</div>
|
||||
<div className="circuit-right-wrap mb10">
|
||||
<button className="btn-frame self mr5">追加</button>
|
||||
<button className="btn-frame self">削除</button>
|
||||
</div>
|
||||
<div className="circuit-data-form">
|
||||
<span className="normal-font">HQJP-KA40-5</span>
|
||||
<span className="normal-font">HQJP-KA40-5</span>
|
||||
<span className="normal-font">HQJP-KA40-5</span>
|
||||
<span className="normal-font">
|
||||
HQJP-KA40-5 <button className="del"></button>
|
||||
</span>
|
||||
<span className="normal-font">
|
||||
HQJP-KA40-5 <button className="del"></button>
|
||||
</span>
|
||||
<span className="normal-font">
|
||||
HQJP-KA40-5 <button className="del"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -136,11 +141,6 @@ export default function PowerConditionalSelect({ setTabNum }) {
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div className="grid-btn-wrap">*/}
|
||||
{/* <button className="btn-frame modal act" onClick={() => setTabNum(2)}>*/}
|
||||
{/* 保存*/}
|
||||
{/* </button>*/}
|
||||
{/*</div>*/}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -81,10 +81,11 @@ export default function StepUp({}) {
|
||||
<div className="bottom-wrap">
|
||||
<div className="circuit-right-wrap mb10">
|
||||
<button className="btn-frame self mr5">追加</button>
|
||||
<button className="btn-frame self">削除</button>
|
||||
</div>
|
||||
<div className="circuit-data-form">
|
||||
<span className="normal-font">HQJP-KA40-5</span>
|
||||
<span className="normal-font">
|
||||
HQJP-KA40-5<button className="del"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -113,10 +114,11 @@ export default function StepUp({}) {
|
||||
<div className="bottom-wrap">
|
||||
<div className="circuit-right-wrap mb10">
|
||||
<button className="btn-frame self mr5">追加</button>
|
||||
<button className="btn-frame self">削除</button>
|
||||
</div>
|
||||
<div className="circuit-data-form">
|
||||
<span className="normal-font">HQJP-KA40-5</span>
|
||||
<span className="normal-font">
|
||||
HQJP-KA40-5<button className="del"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -206,10 +208,11 @@ export default function StepUp({}) {
|
||||
<div className="bottom-wrap">
|
||||
<div className="circuit-right-wrap mb10">
|
||||
<button className="btn-frame self mr5">追加</button>
|
||||
<button className="btn-frame self">削除</button>
|
||||
</div>
|
||||
<div className="circuit-data-form">
|
||||
<span className="normal-font">HQJP-KA40-5</span>
|
||||
<span className="normal-font">
|
||||
HQJP-KA40-5<button className="del"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -238,10 +241,11 @@ export default function StepUp({}) {
|
||||
<div className="bottom-wrap">
|
||||
<div className="circuit-right-wrap mb10">
|
||||
<button className="btn-frame self mr5">追加</button>
|
||||
<button className="btn-frame self">削除</button>
|
||||
</div>
|
||||
<div className="circuit-data-form">
|
||||
<span className="normal-font">HQJP-KA40-5</span>
|
||||
<span className="normal-font">
|
||||
HQJP-KA40-5<button className="del"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -331,10 +335,11 @@ export default function StepUp({}) {
|
||||
<div className="bottom-wrap">
|
||||
<div className="circuit-right-wrap mb10">
|
||||
<button className="btn-frame self mr5">追加</button>
|
||||
<button className="btn-frame self">削除</button>
|
||||
</div>
|
||||
<div className="circuit-data-form">
|
||||
<span className="normal-font">HQJP-KA40-5</span>
|
||||
<span className="normal-font">
|
||||
HQJP-KA40-5<button className="del"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -363,10 +368,11 @@ export default function StepUp({}) {
|
||||
<div className="bottom-wrap">
|
||||
<div className="circuit-right-wrap mb10">
|
||||
<button className="btn-frame self mr5">追加</button>
|
||||
<button className="btn-frame self">削除</button>
|
||||
</div>
|
||||
<div className="circuit-data-form">
|
||||
<span className="normal-font">HQJP-KA40-5</span>
|
||||
<span className="normal-font">
|
||||
HQJP-KA40-5<button className="del"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -35,17 +35,6 @@ export default function TriangleDormer() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('width')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '60px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={4000} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('slope')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { useState } from 'react'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import Eaves from '@/components/floor-plan/modal/roofShape/passivity/Eaves'
|
||||
import Gable from '@/components/floor-plan/modal/roofShape/passivity/Gable'
|
||||
@ -36,13 +35,8 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="modal-btn-wrap">
|
||||
{buttons.map((button, idx) => (
|
||||
<button
|
||||
id={button.id}
|
||||
key={`${button.type}-${idx}`}
|
||||
className={`btn-frame modal ${type === button.type ? 'act' : ''}`}
|
||||
onClick={() => setType(button.type)}
|
||||
>
|
||||
{buttons.map((button) => (
|
||||
<button key={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}>
|
||||
{button.name}
|
||||
</button>
|
||||
))}
|
||||
|
||||
160
src/hooks/useContextMenu.js
Normal file
160
src/hooks/useContextMenu.js
Normal file
@ -0,0 +1,160 @@
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { currentMenuState } from '@/store/canvasAtom'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { MENU } from '@/common/common'
|
||||
import AuxiliaryMove from '@/components/floor-plan/modal/auxiliary/AuxiliaryMove'
|
||||
import AuxiliarySize from '@/components/floor-plan/modal/auxiliary/AuxiliarySize'
|
||||
|
||||
export function useContextMenu() {
|
||||
const currentMenu = useRecoilValue(currentMenuState)
|
||||
const [contextMenu, setContextMenu] = useState([[]])
|
||||
const [currentContextMenu, setCurrentContextMenu] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
switch (currentMenu) {
|
||||
case MENU.PLAN_DRAWING:
|
||||
setContextMenu([
|
||||
[
|
||||
{
|
||||
id: 'gridMove',
|
||||
name: '그리드 이동',
|
||||
},
|
||||
{
|
||||
id: 'gridCopy',
|
||||
name: '그리드 복사',
|
||||
},
|
||||
{
|
||||
id: 'gridColorEdit',
|
||||
name: '그리드 색 변경',
|
||||
},
|
||||
{
|
||||
id: 'remove',
|
||||
name: '삭제',
|
||||
},
|
||||
{
|
||||
id: 'removeAll',
|
||||
name: '전체 삭제',
|
||||
},
|
||||
],
|
||||
])
|
||||
break
|
||||
case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
|
||||
case MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS:
|
||||
case MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS:
|
||||
case MENU.ROOF_COVERING.ROOF_SHAPE_EDITING:
|
||||
case MENU.ROOF_COVERING.HELP_LINE_DRAWING:
|
||||
case MENU.ROOF_COVERING.EAVES_KERAVA_EDIT:
|
||||
case MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN:
|
||||
case MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET:
|
||||
case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC:
|
||||
case MENU.ROOF_COVERING.DEFAULT:
|
||||
setContextMenu([
|
||||
[
|
||||
{
|
||||
id: 'roofMaterialPlacement',
|
||||
name: '지붕재 배치',
|
||||
},
|
||||
{
|
||||
id: 'roofMaterialRemove',
|
||||
name: '지붕재 삭제',
|
||||
},
|
||||
{
|
||||
id: 'roofMaterialRemoveAll',
|
||||
name: '지붕재 전체 삭제',
|
||||
},
|
||||
{
|
||||
id: 'selectMove',
|
||||
name: '선택・이동',
|
||||
},
|
||||
{
|
||||
id: 'wallLineRemove',
|
||||
name: '외벽선 삭제',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
id: 'sizeEdit',
|
||||
name: '사이즈 변경',
|
||||
component: <AuxiliarySize setCurrentContextMenu={setCurrentContextMenu} />,
|
||||
},
|
||||
{
|
||||
id: 'auxiliaryMove',
|
||||
name: '보조선 이동(M)',
|
||||
component: <AuxiliaryMove setCurrentContextMenu={setCurrentContextMenu} />,
|
||||
},
|
||||
{
|
||||
id: 'auxiliaryCopy',
|
||||
name: '보조선 복사(C)',
|
||||
},
|
||||
{
|
||||
id: 'auxiliaryRemove',
|
||||
name: '보조선 삭제(D)',
|
||||
},
|
||||
{
|
||||
id: 'auxiliaryVerticalBisector',
|
||||
name: '보조선 수직이등분선',
|
||||
},
|
||||
{
|
||||
id: 'auxiliaryCut',
|
||||
name: '보조선 절삭',
|
||||
},
|
||||
{
|
||||
id: 'auxiliaryRemoveAll',
|
||||
name: '보조선 전체 삭제',
|
||||
},
|
||||
],
|
||||
])
|
||||
break
|
||||
case MENU.BATCH_CANVAS.SLOPE_SETTING:
|
||||
case MENU.BATCH_CANVAS.BATCH_DRAWING:
|
||||
case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
|
||||
case MENU.BATCH_CANVAS.OBJECT_BATCH:
|
||||
case MENU.BATCH_CANVAS.ALL_REMOVE:
|
||||
case MENU.BATCH_CANVAS.DEFAULT:
|
||||
setContextMenu([
|
||||
[
|
||||
{
|
||||
id: 'sizeEdit',
|
||||
name: '사이즈 변경',
|
||||
},
|
||||
{
|
||||
id: 'remove',
|
||||
name: '삭제(D)',
|
||||
},
|
||||
{
|
||||
id: 'move',
|
||||
name: '이동(M)',
|
||||
},
|
||||
{
|
||||
id: 'copy',
|
||||
name: '복사(C)',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
id: 'roofMaterialEdit',
|
||||
name: '지붕재 변경',
|
||||
},
|
||||
{
|
||||
id: 'linePropertyEdit',
|
||||
name: '각 변 속성 변경',
|
||||
},
|
||||
{
|
||||
id: 'flowDirectionEdit',
|
||||
name: '흐름 방향 변경',
|
||||
},
|
||||
],
|
||||
])
|
||||
break
|
||||
default:
|
||||
setContextMenu([])
|
||||
break
|
||||
}
|
||||
}, [currentMenu])
|
||||
|
||||
return {
|
||||
contextMenu,
|
||||
currentContextMenu,
|
||||
setCurrentContextMenu,
|
||||
}
|
||||
}
|
||||
@ -627,9 +627,9 @@
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.pagination-wrap{
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
.pagination-wrap{
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.infomation-wrap{
|
||||
@ -811,7 +811,10 @@
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #45576F;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 8px;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
@ -1090,4 +1093,111 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.community-search-warp{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px 0 30px 0;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
margin-bottom: 24px;
|
||||
.community-search-box{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 580px;
|
||||
height: 45px;
|
||||
padding: 0 45px 0 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #101010;
|
||||
.community-input{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #101010;
|
||||
&::placeholder{
|
||||
color: #C8C8C8;
|
||||
}
|
||||
}
|
||||
.community-search-ico{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
flex: none;
|
||||
width: 21px;
|
||||
height: 100%;
|
||||
background: url(../../public/static/images/sub/community_search.svg)no-repeat center;
|
||||
background-size: 21px 21px;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
.community-search-keyword{
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #45576F;
|
||||
span{
|
||||
font-weight: 600;
|
||||
color: #F16A6A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 자료 다운로드
|
||||
.file-down-list{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
.file-down-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E5E5E5;
|
||||
background: #FFF;
|
||||
transition: all .15s ease-in-out;
|
||||
cursor: pointer;
|
||||
.file-item-info{
|
||||
.item-num{
|
||||
display: inline-block;
|
||||
padding: 6px 17.5px;
|
||||
border-radius: 60px;
|
||||
background-color: #F4F4F7;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #101010;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.item-name{
|
||||
font-size: 16px;
|
||||
color: #101010;
|
||||
font-weight: 500;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.item-date{
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #344356;
|
||||
}
|
||||
}
|
||||
.file-down-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
margin-left: auto;
|
||||
height: 100%;
|
||||
.file-down-btn{
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: url(../../public/static/images/sub/file_down_btn.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
background-color: #F4F4F7;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,63 +1,128 @@
|
||||
.q-grid {
|
||||
height: fit-content;
|
||||
.ag-theme-quartz {
|
||||
outline: none;
|
||||
border: none;
|
||||
--ag-border-radius: 0px;
|
||||
--ag-wrapper-border-radius: 0px;
|
||||
--ag-header-height: 40px;
|
||||
--ag-header-foreground-color: white;
|
||||
--ag-header-background-color: #5d6a76;
|
||||
// --ag-header-cell-hover-background-color: rgb(80, 40, 140);
|
||||
--ag-header-cell-moving-background-color: #5d6a76;
|
||||
.ag-root-wrapper {
|
||||
outline: none;
|
||||
border: none;
|
||||
.q-grid{
|
||||
position: relative;
|
||||
.ag-theme-quartz {
|
||||
outline: none;
|
||||
border: none;
|
||||
--ag-border-radius: 0px;
|
||||
--ag-wrapper-border-radius: 0px;
|
||||
--ag-header-height: 40px;
|
||||
--ag-header-foreground-color: white;
|
||||
--ag-header-background-color: #5D6A76;
|
||||
// --ag-header-cell-hover-background-color: rgb(80, 40, 140);
|
||||
--ag-header-cell-moving-background-color: #5D6A76;
|
||||
.ag-root-wrapper{
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
}
|
||||
.ag-header{
|
||||
border-bottom: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ag-header-cell{
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
.ag-header-cell-label{
|
||||
justify-content: center;
|
||||
}
|
||||
.ag-header-cell-resize{
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ag-row{
|
||||
border-bottom: 1px solid #ECF0F4;
|
||||
&:nth-child(2n){
|
||||
background-color: #F7F9FA;
|
||||
}
|
||||
&.important_row{
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
.ag-cell{
|
||||
font-size: 13px;
|
||||
color: #45576F;
|
||||
}
|
||||
.ag-icon-desc::before,
|
||||
.ag-icon-asc::before,
|
||||
.ag-icon-filter::before{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.ag-header {
|
||||
border-bottom: none;
|
||||
border-radius: 4px;
|
||||
.copy-ico-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.copy_ico{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url(../../public/static/images/sub/copy_grid_ico.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.ag-header-cell {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
&.no-cols{
|
||||
.ag-row{
|
||||
&:nth-child(2n){
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ag-header-cell-label {
|
||||
justify-content: center;
|
||||
.form-flex-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.grid-tip{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.ag-header-cell-resize {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ag-row {
|
||||
border-bottom: 1px solid #ecf0f4;
|
||||
&:nth-child(2n) {
|
||||
background-color: #f7f9fa;
|
||||
}
|
||||
&.important_row {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
.ag-cell {
|
||||
font-size: 13px;
|
||||
color: #45576f;
|
||||
}
|
||||
.ag-icon-desc::before,
|
||||
.ag-icon-asc::before,
|
||||
.ag-icon-filter::before {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.copy-ico-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.copy_ico {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url(../../public/static/images/sub/copy_grid_ico.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// grid-button
|
||||
.grid-cell-btn{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
width: 117px;
|
||||
margin: 0 auto;
|
||||
.grid-btn{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border: 1px solid #94A0AD;
|
||||
background-color: transparent;
|
||||
border-radius: 2px;
|
||||
font-size: 13px;
|
||||
color: #94A0AD;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
span{
|
||||
display: block;
|
||||
margin-right: 5px;
|
||||
&.file{
|
||||
width: 13px;
|
||||
height: 14px;
|
||||
background: url(../../public/static/images/sub/grid-btn-file.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
&.excel{
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
background: url(../../public/static/images/sub/grid-btn-excel.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-tip{
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: url(../../public/static/images/sub/grid_tip.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -308,6 +308,20 @@ button{
|
||||
background-color: #607F9A;
|
||||
}
|
||||
}
|
||||
&.green{
|
||||
background-color: #A6BBA8;
|
||||
&:hover{
|
||||
background-color: #98af9b;
|
||||
}
|
||||
}
|
||||
&.white{
|
||||
border: 1px solid #94A0AD;
|
||||
background-color: #fff;
|
||||
color: #94A0AD;
|
||||
&:hover{
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// select
|
||||
@ -437,6 +451,7 @@ button{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
input[type=password],
|
||||
input[type=number],
|
||||
input[type=text]{
|
||||
&.input-origin{
|
||||
|
||||
@ -71,8 +71,33 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.community{
|
||||
.modal-dialog{
|
||||
.modal-content{
|
||||
.modal-header{
|
||||
padding: 19px 24px;
|
||||
background-color: #fff;
|
||||
.modal-close{
|
||||
background: url(../../public/static/images/sub/community_pop_close.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
.modal-body{
|
||||
padding: 0 30px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.explane{
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #101010;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.red{
|
||||
color: #F00;
|
||||
}
|
||||
// modal-contents
|
||||
|
||||
// 비밀번호 변경
|
||||
@ -186,6 +211,19 @@
|
||||
}
|
||||
|
||||
// 설계의뢰 불러오기
|
||||
.design-tit-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
h3{
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #101010;
|
||||
}
|
||||
.design-search-wrap{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.design-request-table{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@ -196,4 +234,85 @@
|
||||
color: #101010;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// 제품 특이사항 팝업
|
||||
.calculation-estimate{
|
||||
&.usemodal{
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 내정보 조회 팝업
|
||||
.password-input{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
border: 1px solid #EEE;
|
||||
padding: 0 10px;
|
||||
border-radius: 2px;
|
||||
input{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 13px;
|
||||
color: #45576F;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
font-weight: 400;
|
||||
&::placeholder{
|
||||
color: #D1D7E0;
|
||||
}
|
||||
}
|
||||
.blink{
|
||||
flex: none;
|
||||
width: 19px;
|
||||
height: 100%;
|
||||
background-image: url(../../public/static/images/main/password_hidden.svg);
|
||||
background-size: 19px 13px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
&.on{
|
||||
background-image: url(../../public/static/images/main/password_visible.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 커뮤니티
|
||||
.community_detail{
|
||||
.community_detail-tit{
|
||||
font-size: 16px;
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 2px solid #101010;
|
||||
}
|
||||
.community_detail-file-wrap{
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
dt{
|
||||
font-size: 13px;
|
||||
color: #101010;
|
||||
font-weight: 500;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
dd{
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 3px;
|
||||
color: #344356;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.community_detail-inner{
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #45576F;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
@ -115,7 +115,40 @@ table{
|
||||
cursor: pointer;
|
||||
span{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 25px;
|
||||
padding: 11px 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #45576F;
|
||||
background-color: #fff;
|
||||
border: 2px solid #45576F;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 99;
|
||||
transition: all .15s ease-in-out;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -6px;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border: 2px solid #45576F;
|
||||
background-color: #fff;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
span{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -279,4 +312,122 @@ table{
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 커뮤니티 테이블
|
||||
.community-table{
|
||||
margin-bottom: 24px;
|
||||
table{
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
border-top: 2px solid #101010;
|
||||
tbody{
|
||||
td{
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #45576F;
|
||||
padding: 10.5px 10px;
|
||||
border-bottom: 1px solid #ECF0F4;
|
||||
vertical-align: middle;
|
||||
.text-frame{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text-overflow{
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.clip{
|
||||
flex: none;
|
||||
display: block;
|
||||
margin-left: 10px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: url(../../public/static/images/sub/community_clip.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
tr{
|
||||
background-color: transparent;
|
||||
transition: all .15s ease-in-out;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
background: #F7F9FA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 풍속 선택 테이블
|
||||
.wind-table{
|
||||
margin-top: 20px;
|
||||
table{
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
thead{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
tr{
|
||||
th{
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #344356;
|
||||
background-color: #F7F9FA;
|
||||
padding: 10.5px 10px;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #ECF0F4;
|
||||
border-top: 1px solid #ECF0F4;
|
||||
&:first-child{
|
||||
border-left: 1px solid #ECF0F4;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
&:last-child{
|
||||
border-right: 1px solid #ECF0F4;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
display: block;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
tr{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
td{
|
||||
padding: 13.5px 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #45576F;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #ECF0F4;
|
||||
&:nth-child(2){
|
||||
width: 110px;
|
||||
}
|
||||
&:nth-child(1){
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #ECF0F4;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,4 +2,5 @@
|
||||
@import '_modal.scss';
|
||||
@import '_submodal.scss';
|
||||
@import '_table.scss';
|
||||
@import '_canvasside.scss';
|
||||
@import '_canvasside.scss';
|
||||
@import '_pagination.scss';
|
||||
@ -1,2 +1 @@
|
||||
@import '_grid-detail.scss';
|
||||
@import '_pagination.scss';
|
||||
Loading…
x
Reference in New Issue
Block a user