Skip to content

Commit 4299cfb

Browse files
minjk-blminjk-bl
committed
change import design
1 parent d12c876 commit 4299cfb

3 files changed

Lines changed: 61 additions & 15 deletions

File tree

‎css/component/common.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,8 @@
5555
color: #696969;
5656
cursor: not-allowed;
5757
}
58+
59+
/* cursor as pointer */
60+
.vp-cursor {
61+
cursor: pointer;
62+
}

‎src/file_io/import.html‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,35 @@
2222

2323
/* empty required input */
2424
#vp-wrapper #vp_userOption input[type="text"]:invalid{
25-
border: 1px solid #c22;
25+
border: 1px solid var(--hightlight-color);
2626
}
2727
#vp-wrapper #vp_userOption input[type="text"]:valid,
2828
#vp-wrapper #vp_userOption input[type="text"]:focus {
2929
border: default;
3030
}
3131

3232
/* import library table style */
33+
#vp_tblImport {
34+
width: 100%;
35+
min-width: 250px;
36+
max-width: 450px;
37+
}
38+
#vp_tblImport tr {
39+
height: 30px;
40+
line-height: 30px;
41+
}
42+
3343
.vp-add-library,
3444
.vp-add-alias {
35-
width: 98%;
45+
/* width: 98%; */
46+
width: 100%;
47+
height: 30px;
48+
line-height: 30px;
49+
}
50+
51+
#vp_addLibrary {
52+
width: 88px;
53+
margin-top: 15px;
3654
}
3755
</style>
3856

@@ -42,15 +60,15 @@
4260
<div class="vp-accordion-header"><span class="vp-accordion-indicator"></span><span class="vp-accordion-caption" data-caption-id="TODO:Variable">Required Input & Output</span></div>
4361
<div id="vp_userOption" class="vp-list-container vp-accordion-content">
4462
<input type="hidden" id="vp_importMeta"/>
45-
<table id="vp_tblImport" class="vp-tbl-basic w90 vp-option-horizontal-table-layout" style="min-width: 250px; max-width: 450px;">
63+
<table id="vp_tblImport" class="vp-tbl-basic w90">
4664
<colgroup><col width="*"/><col width="120px"/><col width="30px"/></colgroup>
4765
<tr>
48-
<th>Package Name</th>
66+
<th>Library Name</th>
4967
<th>Alias</th>
5068
<th></th>
5169
</tr>
5270
<tr>
53-
<td colspan="3"><input type="button" id="vp_addLibrary" value="Add Library" style="width:100%;"/></td>
71+
<td colspan="3"><input type="button" id="vp_addLibrary" value="+ Library" class="vp-button"/></td>
5472
</tr>
5573
</table>
5674
</div>

‎src/file_io/import.js‎

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -135,9 +135,10 @@ define([
135135
try {
136136
var importMeta = JSON.parse(decodeURIComponent(this.metadata.options.find(x=>x.id=='vp_importMeta').value));
137137
importMeta && importMeta.forEach((obj, i) => {
138-
var tagTr = $(`<tr><td><input id="vp_library${i}" type="text" class="vp-input m vp-add-library" placeholder="library name" required value="${obj.library.toLowerCase()}"/></td>
139-
<td><input id="vp_alias${i}" type="text" class="vp-input m vp-add-alias" placeholder="as" value="${obj.alias}"/></td>
140-
<td><input type="button" class="vp-remove-option w100" style="width:100%;" value="x"></td></tr>`);
138+
// var tagTr = $(`<tr><td><input id="vp_library${i}" type="text" class="vp-input m vp-add-library" placeholder="library name" required value="${obj.library.toLowerCase()}"/></td>
139+
// <td><input id="vp_alias${i}" type="text" class="vp-input m vp-add-alias" placeholder="as" value="${obj.alias}"/></td>
140+
// <td><input type="button" class="vp-remove-option w100" style="width:100%;" value="x"></td></tr>`);
141+
var tagTr = $(that.renderLibraryRow(i, obj.library.toLowerCase(), obj.alias));
141142

142143
$(this.wrapSelector("#vp_tblImport tr:last")).before(tagTr);
143144
});
@@ -148,10 +149,11 @@ define([
148149
// <option value="as">as</option>
149150
// <option value="import">import</option>
150151
// </select>
151-
var tagTr = $(`<tr><td><input id="vp_library${i}" type="text" class="vp-input m vp-add-library" placeholder="library name" required value="${package.library.toLowerCase()}"/></td>
152-
<td><input id="vp_alias${i}" type="text" class="vp-input m vp-add-alias" placeholder="as" value="${package.alias}"/></td>
153-
<td><input type="button" class="vp-remove-option w100" style="width:100%;" value="x"></td></tr>`);
154-
152+
// var tagTr = $(`<tr><td><input id="vp_library${i}" type="text" class="vp-input m vp-add-library" placeholder="library name" required value="${package.library.toLowerCase()}"/></td>
153+
// <td><input id="vp_alias${i}" type="text" class="vp-input m vp-add-alias" placeholder="as" value="${package.alias}"/></td>
154+
// <td><input type="button" class="vp-remove-option w100" style="width:100%;" value="x"></td></tr>`);
155+
var tagTr = $(that.renderLibraryRow(i, package.library.toLowerCase(), package.alias));
156+
155157
$(this.wrapSelector("#vp_tblImport tr:last")).before(tagTr);
156158

157159
// add to package input
@@ -168,9 +170,12 @@ define([
168170

169171
// 라이브러리 추가
170172
$(this.wrapSelector('#vp_addLibrary')).click(function() {
171-
var tagTr = $(`<tr><td><input type="text" class="vp-add-library" placeholder="library name" required/></td>
172-
<td><input type="text" class="vp-input m vp-add-alias" placeholder="alias"/></td>
173-
<td><input type="button" class="vp-remove-option w100" style="width:100%;" value="x"></td></tr>`);
173+
var libsLength = $(that.wrapSelector("#vp_tblImport tr:not(:first):not(:last)")).length;
174+
175+
// var tagTr = $(`<tr><td><input type="text" class="vp-add-library" placeholder="library name" required/></td>
176+
// <td><input type="text" class="vp-input m vp-add-alias" placeholder="alias"/></td>
177+
// <td><input type="button" class="vp-remove-option w100" style="width:100%;" value="x"></td></tr>`);
178+
var tagTr = $(that.renderLibraryRow(libsLength, '', ''));
174179

175180
$(that.wrapSelector("#vp_tblImport tr:last")).before(tagTr);
176181
});
@@ -195,6 +200,24 @@ define([
195200

196201
}
197202

203+
ImportPackage.prototype.renderLibraryRow = function(idx, libraryName, aliasName) {
204+
var tag = new sb.StringBuilder();
205+
/**
206+
* <td><input id="vp_library${i}" type="text" class="vp-input m vp-add-library" placeholder="library name" required value="${package.library.toLowerCase()}"/></td>
207+
<td><input id="vp_alias${i}" type="text" class="vp-input m vp-add-alias" placeholder="as" value="${package.alias}"/></td>
208+
<td><input type="button" class="vp-remove-option w100" style="width:100%;" value="x"></td></tr>
209+
*/
210+
tag.append('<tr>');
211+
tag.appendFormat('<td><input id="{0}" type="text" class="{1}" placeholder="{2}" required value="{3}"/></td>'
212+
, 'vp_library' + idx, 'vp-input m vp-add-library', 'Type library name', libraryName);
213+
tag.appendFormat('<td><input id="{0}" type="text" class="{1}" placeholder="{2}" value="{3}"/></td>'
214+
, 'vp_alias' + idx, 'vp-input m vp-add-alias', 'Type alias', aliasName);
215+
// tag.appendFormat('<td><input type="button" class="{0}" style="width:100%;" value="{1}"></td>', 'vp-remove-option w100', 'x');
216+
tag.appendFormat('<td><i class="{0} {1}"></i></td>', 'fa fa-close', 'vp-remove-option w100 vp-cursor');
217+
tag.append('</tr>');
218+
return tag.toString();
219+
}
220+
198221
/**
199222
* 코드 생성
200223
* @param {boolean} addCell 셀 추가 여부

0 commit comments

Comments
 (0)