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

14
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">
<span className="img-edit"></span> <label className="img-edit-btn" htmlFor="img_file">
<span>ファイルの追加</span> <span className="img-edit"></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>

51
src/styles/_modal.scss
View File

@ -476,26 +476,29 @@ $alert-color: #101010;
} }
} }
.img-edit-btn{ .img-edit-wrap{
flex: none; flex: none;
display: flex; .img-edit-btn{
align-items: center; display: flex;
height: 30px; align-items: center;
padding: 0 10px; height: 30px;
font-size: 12px; padding: 0 10px;
font-weight: 400; font-size: 12px;
color: #101010; font-weight: 400;
background-color: #fff; color: #101010;
border-radius: 2px; background-color: #fff;
.img-edit{ border-radius: 2px;
width: 16px; transition: all .15s ease-in-out;
height: 16px; .img-edit{
background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center; width: 16px;
background-size: cover; height: 16px;
margin-right: 5px; background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center;
} background-size: cover;
&:hover{ margin-right: 5px;
background-color: #ebebeb; }
&:hover{
background-color: #ebebeb;
}
} }
} }
.img-name-wrap{ .img-name-wrap{
@ -505,21 +508,17 @@ $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_fail.svg);
background-image: url(../../public/static/images/canvas/img_check_success.svg);
}
&.fail{
background-image: url(../../public/static/images/canvas/img_check_fail.svg);
}
} }
} }