Skip to content

Commit d5e9ff8

Browse files
minjk-blminjk-bl
committed
#13 - logic > def option page design change, makeoptionplusbutton module change
1 parent b732be9 commit d5e9ff8

File tree

4 files changed

+54
-23
lines changed

4 files changed

+54
-23
lines changed

‎css/api_block/index.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1021,6 +1021,11 @@
10211021
background-color: white;
10221022
}
10231023

1024+
.vp-apiblock-param-box-btn {
1025+
width: 100px;
1026+
margin: 10px 0px;
1027+
}
1028+
10241029
.vp-apiblock-option-plus-button {
10251030
min-width: 80px;
10261031
height: 30px;

‎src/api_block/api.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ define([
1414

1515
, FOR_BLOCK_ARG3_TYPE
1616

17+
, DEF_BLOCK_ARG6_TYPE
18+
1719
, STR_GRP_DEFINE
1820
, STR_GRP_CONTROL
1921
, STR_GRP_EXECUTE
@@ -369,9 +371,9 @@ define([
369371
defInParamList.forEach(( defInParam, index ) => {
370372
const { arg3, arg5 ,arg6 } = defInParam;
371373

372-
if (arg6 == '*args') {
374+
if (arg6 == DEF_BLOCK_ARG6_TYPE.ARGS) {
373375
defInParamStr += '*';
374-
} else if (arg6 == '**kwargs') {
376+
} else if (arg6 == DEF_BLOCK_ARG6_TYPE.KWARGS) {
375377
defInParamStr += '**';
376378
}
377379

‎src/api_block/component/option/def_option.js

Lines changed: 42 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,10 @@ define([
2828
, VP_CLASS_STYLE_FLEX_ROW_BETWEEN
2929

3030

31+
, VP_CLASS_STYLE_WIDTH_5PERCENT
3132
, VP_CLASS_STYLE_WIDTH_20PERCENT
3233
, VP_CLASS_STYLE_WIDTH_25PERCENT
34+
, VP_CLASS_STYLE_WIDTH_30PERCENT
3335
, VP_CLASS_STYLE_WIDTH_100PERCENT
3436

3537
, VP_CLASS_APIBLOCK_PARAM_DELETE_BTN
@@ -262,16 +264,17 @@ define([
262264

263265
idStr = `vp_apiblockDefOptionName${uuid}`;
264266
classStr = `vp-apiblock-input-def-name-${uuid}`;
265-
blockCodeName = 'Name';
266-
inputStyleStr = 'width: 82%';
267+
blockCodeName = 'Function Name';
268+
inputStyleStr = 'width: 100%';
267269

268270
var nameDom = $(`<div class='vp-apiblock-blockoption-block
269-
vp-apiblock-style-flex-row-between'
270-
style='position:relative;'>
271-
<span class='vp-block-optiontab-name
272-
vp-apiblock-style-flex-column-center'>
271+
vp-apiblock-style-flex-column-between'
272+
style='position:relative; height: 50px; margin-bottom: 15px; '>
273+
<div class='vp-block-optiontab-name
274+
vp-apiblock-style-flex-column-center
275+
vp-orange-text'>
273276
${blockCodeName}
274-
</span>
277+
</div>
275278
<input id='${idStr}'
276279
class='vp-apiblock-blockoption-input ${classStr}'
277280
style='${inputStyleStr}'
@@ -352,11 +355,33 @@ define([
352355
var loadedVariableNameList_arg6 = [ ...Object.values( DEF_BLOCK_ARG6_TYPE ) ];
353356

354357
var inParamDom = $(`<div class='vp-apiblock-blockoption-block
355-
vp-apiblock-style-flex-row-between'>
356-
<span class='vp-block-optiontab-name
357-
vp-apiblock-style-flex-column-center'>
358-
In param
359-
</span>
358+
vp-apiblock-style-flex-row-between'
359+
style="margin-bottom: 3px;">
360+
<div class='vp-block-optiontab-name
361+
vp-apiblock-style-flex-column-center
362+
${VP_CLASS_STYLE_WIDTH_25PERCENT}
363+
vp-orange-text'>
364+
Parameter
365+
</div>
366+
<div class='vp-block-optiontab-name
367+
vp-apiblock-style-flex-column-center
368+
vp-orange-text' style="width: 20px;">
369+
</div>
370+
<div class='vp-block-optiontab-name
371+
vp-apiblock-style-flex-column-center
372+
${VP_CLASS_STYLE_WIDTH_25PERCENT}
373+
vp-orange-text'>
374+
Value
375+
</div>
376+
<div class='vp-block-optiontab-name
377+
vp-apiblock-style-flex-column-center
378+
${VP_CLASS_STYLE_WIDTH_25PERCENT}
379+
vp-orange-text'>
380+
Argument Type
381+
</div>
382+
<div class='vp-block-optiontab-name
383+
vp-apiblock-style-flex-row-between' style="width: 15px;">
384+
</div>
360385
</div>`);
361386

362387
var defInParamContainer = $(`<div class='vp-apiblock-tab-navigation-node-block-title'>
@@ -385,7 +410,7 @@ define([
385410

386411
var sbDefVariable = new sb.StringBuilder();
387412
sbDefVariable.appendFormatLine("<div class='{0} {1}'>", VP_CLASS_STYLE_FLEX_ROW_BETWEEN
388-
, VP_CLASS_STYLE_WIDTH_25PERCENT);
413+
, VP_CLASS_STYLE_WIDTH_20PERCENT);
389414
// Deprecated: don't show this on ui
390415
// if (arg6 == DEF_BLOCK_ARG6_TYPE.ARGS) {
391416
// sbDefVariable.appendLine("<span class='vp-apiblock-style-flex-column-center'>*</span>");
@@ -413,16 +438,16 @@ define([
413438
var suggestInputArg5 = MakeVpSuggestInputText_apiblock(VP_ID_APIBLOCK_OPTION_DEF_ARG_5 + index + uuid
414439
, arg5
415440
, loadedVariableNameList_arg5
416-
, VP_CLASS_STYLE_WIDTH_20PERCENT
417-
, 'Default Val'
441+
, VP_CLASS_STYLE_WIDTH_25PERCENT
442+
, 'Value'
418443
, function(selectedValue) {
419444
bindSelectValueEventFunc_def(selectedValue,
420445
index,
421446
DEF_BLOCK_SELECT_VALUE_ARG_TYPE.ARG5);
422447
});
423448
sbDefParam.appendLine(suggestInputArg5.toString());
424449
var sbselectBoxArg6 = MakeOptionSelectBox(VP_ID_APIBLOCK_OPTION_DEF_ARG_6 + index + uuid
425-
, VP_CLASS_STYLE_WIDTH_20PERCENT
450+
, VP_CLASS_STYLE_WIDTH_25PERCENT
426451
, arg6
427452
, loadedVariableNameList_arg6);
428453
sbDefParam.appendLine(sbselectBoxArg6.toString());
@@ -445,7 +470,7 @@ define([
445470
defInParamContainer.append(defInParamBody);
446471
defBlockOption.append(defInParamContainer);
447472

448-
var defPlusButton = MakeOptionPlusButton(VP_CLASS_APIBLOCK_PARAM_PLUS_BTN + uuid, '+ Param');
473+
var defPlusButton = MakeOptionPlusButton(VP_CLASS_APIBLOCK_PARAM_PLUS_BTN + uuid, '+ Parameter', 'vp-apiblock-param-box-btn');
449474
defBlockOption.append(defPlusButton);
450475

451476
/** bottom block option 탭에 렌더링된 dom객체 생성 */

‎src/api_block/constData.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,9 +105,9 @@ define([
105105
}
106106

107107
const DEF_BLOCK_ARG6_TYPE = {
108-
NONE: 'none'
109-
, ARGS: '*args'
110-
, KWARGS: '**kwargs'
108+
NONE: 'Default Args'
109+
, ARGS: 'Variable Args'
110+
, KWARGS: 'Keyword Args'
111111
}
112112

113113
const DEF_BLOCK_SELECT_VALUE_ARG_TYPE = {
@@ -504,7 +504,6 @@ define([
504504
/** const Option */
505505
const VP_CLASS_APIBLOCK_OPTION_INPUT = 'vp-apiblock-option-input';
506506

507-
508507
/** const Css Style */
509508
const VP_CLASS_STYLE_FLEX_ROW = 'vp-apiblock-style-flex-row';
510509
const VP_CLASS_STYLE_FLEX_ROW_CENTER = 'vp-apiblock-style-flex-row-center';

0 commit comments

Comments
 (0)