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

배치면 초기설정 이미지 파일 업로드 영역 수정

Browse Source
This commit is contained in:
김창수 2024-10-29 15:24:02 +09:00
parent dabb4542ec
commit 70068afbc7
2 changed files with 33 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -156,14 +156,16 @@ export default function PlacementSettingPop(){
<th>ファイルを読み込む</th> <th>ファイルを読み込む</th>
<td> <td>
<div className="flex-box"> <div className="flex-box">
<button className="img-edit-btn"> <div className="img-edit-wrap">
<label className="img-edit-btn" htmlFor="img_file">
<span className="img-edit"></span> <span className="img-edit"></span>
<span>ファイルの追加</span> ファイルの追加
</button> </label>
<input type="file" id="img_file" style={{display: 'none'}}/>
</div>
<div className="img-name-wrap"> <div className="img-name-wrap">
<input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly/> <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly/>
<span className="img-check suc"></span> <button className="img-check"></button>
<span className="img-check fail"></span>
</div> </div>
</div> </div>
</td> </td>

13
src/styles/_modal.scss
View File

@ -476,8 +476,9 @@ $alert-color: #101010;
} }
} }
.img-edit-btn{ .img-edit-wrap{
flex: none; flex: none;
.img-edit-btn{
display: flex; display: flex;
align-items: center; align-items: center;
height: 30px; height: 30px;
@ -487,6 +488,7 @@ $alert-color: #101010;
color: #101010; color: #101010;
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
transition: all .15s ease-in-out;
.img-edit{ .img-edit{
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -498,6 +500,7 @@ $alert-color: #101010;
background-color: #ebebeb; background-color: #ebebeb;
} }
} }
}
.img-name-wrap{ .img-name-wrap{
display: flex; display: flex;
align-items: center; align-items: center;
@ -505,23 +508,19 @@ $alert-color: #101010;
margin-left: 10px; margin-left: 10px;
input{ input{
flex: 1; flex: 1;
margin-right: 5px;
} }
.img-check{ .img-check{
flex: none; flex: none;
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-left: 5px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
&.suc{
background-image: url(../../public/static/images/canvas/img_check_success.svg);
}
&.fail{
background-image: url(../../public/static/images/canvas/img_check_fail.svg); background-image: url(../../public/static/images/canvas/img_check_fail.svg);
} }
} }
}
// 외벽선 그리기 // 외벽선 그리기
.outline-wrap{ .outline-wrap{