feat: PropertiesSetting
This commit is contained in:
minsik
parent
320f6f9e1f
commit
202e91811f
@ -0,0 +1,30 @@
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function PropertiesSetting() {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap ssm`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
|
||||
<button className="modal-close">닫기</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="properties-guide">{getMessage('modal.canvas.setting.wallline.properties.setting.info')}</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="setting-btn-wrap">
|
||||
<button className="setting-btn green mr5">{getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}</button>
|
||||
<button className="setting-btn blue">{getMessage('modal.canvas.setting.wallline.properties.setting.edge')}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5">{getMessage('modal.cover.outline.rollback')}</button>
|
||||
<button className="btn-frame modal act">{getMessage('modal.cover.outline.finish')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -32,6 +32,7 @@
|
||||
"modal.cover.outline.arrow": "方向 (矢印)",
|
||||
"modal.cover.outline.fix": "外壁線確定",
|
||||
"modal.cover.outline.rollback": "一変戦に戻る",
|
||||
"modal.cover.outline.finish": "設定完了",
|
||||
"modal.cover.outline.remove": "外壁の削除",
|
||||
"modal.cover.outline.select.move": "外壁の選択、移動",
|
||||
"plan.menu.roof.cover.roof.setting": "屋根形状設定",
|
||||
@ -115,6 +116,11 @@
|
||||
"modal.canvas.setting.first.option.border": "ボーダーのみ",
|
||||
"modal.canvas.setting.first.option.line": "ラインハッチ",
|
||||
"modal.canvas.setting.first.option.all": "All painted",
|
||||
"modal.canvas.setting.wallline.properties.setting": "外壁のプロパティの設定",
|
||||
"modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定 ボタンをクリックして設定値を適用します。",
|
||||
"modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定",
|
||||
"modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定",
|
||||
"setting": "設定",
|
||||
"common.message.no.data": "No data",
|
||||
"common.message.no.dataDown": "ダウンロードするデータがありません",
|
||||
"common.message.noData": "表示するデータがありません",
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
"modal.cover.outline.arrow": "방향(화살표)",
|
||||
"modal.cover.outline.fix": "외벽선 확정",
|
||||
"modal.cover.outline.rollback": "일변전으로 돌아가기",
|
||||
"modal.cover.outline.finish": "설정완료",
|
||||
"modal.cover.outline.remove": "외벽 제거",
|
||||
"modal.cover.outline.select.move": "외벽 선택, 이동",
|
||||
"plan.menu.placement.surface": "배치면",
|
||||
@ -116,6 +117,11 @@
|
||||
"modal.canvas.setting.first.option.border": "테두리만",
|
||||
"modal.canvas.setting.first.option.line": "라인해치",
|
||||
"modal.canvas.setting.first.option.all": "All painted",
|
||||
"modal.canvas.setting.wallline.properties.setting": "외벽선 속성 설정",
|
||||
"modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고, 처마로 설정 또는 케라바로 설정\n 버튼을 클릭하여 설정값을 적용하십시오.\n",
|
||||
"modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정",
|
||||
"modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정",
|
||||
"setting": "설정",
|
||||
"common.message.no.data": "No data",
|
||||
"common.message.no.dataDown": "No data to download",
|
||||
"common.message.noData": "No data to display",
|
||||
|
||||
@ -5,12 +5,25 @@ $pop-normal-size: 12px;
|
||||
$alert-color: #101010;
|
||||
|
||||
@keyframes mountpop {
|
||||
from{opacity: 0; scale: 0.95;}
|
||||
to{opacity: 1; scale: 1;}
|
||||
from {
|
||||
opacity: 0;
|
||||
scale: 0.95;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes unmountpop {
|
||||
from{opacity: 1; scale: 1;}
|
||||
to{opacity: 0; scale: 0.95;}
|
||||
from {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
scale: 0.95;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-pop-wrap {
|
||||
@ -27,27 +40,35 @@ $alert-color: #101010;
|
||||
background-color: #272727;
|
||||
z-index: 9999999;
|
||||
overflow: hidden;
|
||||
|
||||
&.r {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
&.sm {
|
||||
width: 580px;
|
||||
}
|
||||
|
||||
&.ssm {
|
||||
width: 380px;
|
||||
}
|
||||
|
||||
&.xm {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
&.l {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
&.mount {
|
||||
animation: mountpop .17s ease-in-out forwards;
|
||||
}
|
||||
|
||||
&.unmount {
|
||||
animation: unmountpop .17s ease-in-out forwards;
|
||||
}
|
||||
|
||||
&.alert {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -55,21 +76,25 @@ $alert-color: #101010;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
.modal-head {
|
||||
background-color: transparent;
|
||||
padding: 0 0 8px;
|
||||
|
||||
.modal-close {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
background-color: #fff;
|
||||
padding: 22px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #101010;
|
||||
color: $alert-color;
|
||||
|
||||
.alert-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
@ -79,16 +104,19 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 24px;
|
||||
background-color: #000;
|
||||
|
||||
h1.title {
|
||||
font-size: 13px;
|
||||
color: $pop-color;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
margin-left: auto;
|
||||
color: $pop-color;
|
||||
@ -98,43 +126,55 @@ $alert-color: #101010;
|
||||
background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
|
||||
.modal-btn-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-check-btn-wrap {
|
||||
margin-top: 15px;
|
||||
|
||||
.check-wrap-title {
|
||||
font-size: $pop-normal-size;
|
||||
color: $pop-color;
|
||||
font-weight: 600;
|
||||
|
||||
&.light {
|
||||
font-weight: $pop-normal-weight;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-check-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
|
||||
&.for2 {
|
||||
justify-content: flex-end;
|
||||
|
||||
button {
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
|
||||
&.btn {
|
||||
gap: 5px;
|
||||
|
||||
button {
|
||||
width: calc(50% - 2.5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.for-line {
|
||||
button {
|
||||
flex: 1;
|
||||
@ -142,18 +182,22 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outer-line-wrap {
|
||||
border-top: 1px solid #3C3C3C;
|
||||
margin-top: 10px;
|
||||
padding-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
> div {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-guide {
|
||||
display: block;
|
||||
font-size: $pop-normal-size;
|
||||
@ -170,10 +214,12 @@ $alert-color: #101010;
|
||||
padding-left: 11px;
|
||||
overflow: hidden;
|
||||
transition: all 0.17s ease-in-out;
|
||||
|
||||
span {
|
||||
font-size: $pop-normal-size;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -183,6 +229,7 @@ $alert-color: #101010;
|
||||
font-size: 13px;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
&.act {
|
||||
i {
|
||||
color: $pop-color;
|
||||
@ -199,9 +246,11 @@ $alert-color: #101010;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #3C3C3C;
|
||||
}
|
||||
|
||||
.grid-option-wrap {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #3C3C3C;
|
||||
|
||||
.grid-option-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -210,37 +259,46 @@ $alert-color: #101010;
|
||||
padding: 10px;
|
||||
gap: 20px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.grid-input-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
flex: none;
|
||||
font-size: $pop-normal-size;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-bold-weight;
|
||||
}
|
||||
|
||||
.input-grid {
|
||||
width: 54px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-select {
|
||||
flex: 1;
|
||||
|
||||
.sort-select {
|
||||
width: 100%;
|
||||
background-color: #313131;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-btn-wrap {
|
||||
padding-top: 15px;
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
padding: 0 20px;
|
||||
}
|
||||
@ -254,12 +312,14 @@ $alert-color: #101010;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #3C3C3C;
|
||||
}
|
||||
|
||||
.grid-direction {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.direction {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@ -271,9 +331,19 @@ $alert-color: #101010;
|
||||
border-radius: 50%;
|
||||
transition: all .15s ease-in-out;
|
||||
opacity: 0.6;
|
||||
&.down{transform: rotate(180deg);}
|
||||
&.left{transform: rotate(-90deg);}
|
||||
&.right{transform: rotate(90deg);}
|
||||
|
||||
&.down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&.left {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&.right {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
opacity: 1;
|
||||
@ -288,21 +358,26 @@ $alert-color: #101010;
|
||||
font-weight: $pop-bold-weight;
|
||||
}
|
||||
}
|
||||
|
||||
.input-move-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
span {
|
||||
color: $pop-color;
|
||||
font-size: $pop-normal-size;
|
||||
}
|
||||
|
||||
.input-move {
|
||||
width: 130px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.direction-move-wrap {
|
||||
flex: none;
|
||||
display: grid;
|
||||
@ -314,6 +389,7 @@ $alert-color: #101010;
|
||||
.placement-table {
|
||||
table {
|
||||
table-layout: fixed;
|
||||
|
||||
tr {
|
||||
th {
|
||||
display: flex;
|
||||
@ -324,12 +400,14 @@ $alert-color: #101010;
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px solid #424242;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: $pop-normal-size;
|
||||
color: $pop-color;
|
||||
border-bottom: 1px solid #424242;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
td,
|
||||
th {
|
||||
@ -338,6 +416,7 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -347,16 +426,20 @@ $alert-color: #101010;
|
||||
background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.light {
|
||||
padding: 0;
|
||||
|
||||
th, td {
|
||||
color: $alert-color;
|
||||
border-bottom: none;
|
||||
border-top: 1px solid #EFEFEF;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 14px 0;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:first-child {
|
||||
td,
|
||||
@ -364,6 +447,7 @@ $alert-color: #101010;
|
||||
padding-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td,
|
||||
th {
|
||||
@ -379,20 +463,24 @@ $alert-color: #101010;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.placement-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.select-wrap {
|
||||
div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-ment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
span {
|
||||
font-size: $pop-normal-size;
|
||||
color: $pop-color;
|
||||
@ -404,20 +492,24 @@ $alert-color: #101010;
|
||||
.outline-wrap {
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid #424242;
|
||||
|
||||
.outline-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outline-form {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
|
||||
span {
|
||||
width: 60px;
|
||||
flex: none;
|
||||
@ -426,6 +518,7 @@ $alert-color: #101010;
|
||||
color: $pop-color;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
flex: none;
|
||||
width: 30px;
|
||||
@ -439,6 +532,7 @@ $alert-color: #101010;
|
||||
background-size: 12px 12px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -446,18 +540,22 @@ $alert-color: #101010;
|
||||
|
||||
.cul-wrap {
|
||||
display: flex;
|
||||
|
||||
.outline-box {
|
||||
width: 50%;
|
||||
margin-right: 15px;
|
||||
|
||||
.outline-form {
|
||||
width: 100%;
|
||||
margin-bottom: 14px;
|
||||
margin-right: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cul-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -467,3 +565,56 @@ $alert-color: #101010;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.properties-guide {
|
||||
font-size: $pop-normal-size;
|
||||
color: #AAA;
|
||||
font-weight: $pop-normal-weight;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.properties-setting-wrap {
|
||||
.setting-tit {
|
||||
font-size: 13px;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-bold-weight;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.setting-btn-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid #424242;
|
||||
border-bottom: 1px solid #424242;
|
||||
|
||||
.setting-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
border-radius: 2px;
|
||||
transition: all .15s ease-in-out;
|
||||
|
||||
&.green {
|
||||
background-color: #305941;
|
||||
border: 1px solid #45CD7D;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a6b4e;
|
||||
}
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background-color: #2E5360;
|
||||
border: 1px solid #3FBAE6;
|
||||
|
||||
&:hover {
|
||||
background-color: #365f6e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user