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>
<td>
<div className="flex-box">
<button className="img-edit-btn">
<span className="img-edit"></span>
<span>ファイルの追加</span>
</button>
<div className="img-edit-wrap">
<label className="img-edit-btn" htmlFor="img_file">
<span className="img-edit"></span>
ファイルの追加
</label>
<input type="file" id="img_file" style={{display: 'none'}}/>
</div>
<div className="img-name-wrap">
<input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly/>
<span className="img-check suc"></span>
<span className="img-check fail"></span>
<button className="img-check"></button>
</div>
</div>
</td>

51
src/styles/_modal.scss
View File

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