diff --git a/css/api_block/index.css b/css/api_block/index.css index 3e33daee..84e4a825 100644 --- a/css/api_block/index.css +++ b/css/api_block/index.css @@ -595,6 +595,11 @@ flex-direction: column; justify-content: center; } +.vp-apiblock-style-flex-column-between { + display: flex; + flex-direction: column; + justify-content: space-between; +} .vp-apiblock-style-flex-row-around { display: flex; @@ -606,11 +611,6 @@ flex-direction: row; justify-content: space-evenly; } -.vp-apiblock-style-flex-row-between { - display: flex; - flex-direction: row; - justify-content: space-between; -} .vp-apiblock-style-flex-row-end { display: flex; flex-direction: row; @@ -1021,6 +1021,11 @@ background-color: white; } +.vp-apiblock-param-box-btn { + width: 100px; + margin: 10px 0px; +} + .vp-apiblock-option-plus-button { min-width: 80px; height: 30px; diff --git a/src/api_block/api.js b/src/api_block/api.js index 068b0511..ef2ab910 100644 --- a/src/api_block/api.js +++ b/src/api_block/api.js @@ -14,6 +14,8 @@ define([ , FOR_BLOCK_ARG3_TYPE + , DEF_BLOCK_ARG6_TYPE + , STR_GRP_DEFINE , STR_GRP_CONTROL , STR_GRP_EXECUTE @@ -369,9 +371,9 @@ define([ defInParamList.forEach(( defInParam, index ) => { const { arg3, arg5 ,arg6 } = defInParam; - if (arg6 == '*args') { + if (arg6 == DEF_BLOCK_ARG6_TYPE.ARGS) { defInParamStr += '*'; - } else if (arg6 == '**kwargs') { + } else if (arg6 == DEF_BLOCK_ARG6_TYPE.KWARGS) { defInParamStr += '**'; } diff --git a/src/api_block/component/option/class_option.js b/src/api_block/component/option/class_option.js index 4e50ed55..0ba06339 100644 --- a/src/api_block/component/option/class_option.js +++ b/src/api_block/component/option/class_option.js @@ -62,21 +62,22 @@ define([ idStr = `vp_apiblockClassOptionName${uuid}`; classStr = `vp-apiblock-input-class-name-${uuid}`; - blockCodeName = 'Name'; - inputStyleStr = 'width: 82%'; + blockCodeName = 'Class Name'; + inputStyleStr = 'width: 100%'; var nameDom = $(`
- + vp-apiblock-style-flex-column-between' + style='position:relative; height: 50px; margin-bottom: 15px;'> +
${blockCodeName} - +
+ placeholder='input class name' >
`); @@ -90,21 +91,21 @@ define([ var uuid = thisBlock.getUUID(); var parentClassName = thisBlock.getState(STATE_parentClassName); - var name = 'Inheritance'; + var name = 'Super Class Name'; var classStr = `vp-apiblock-input-param-${0}-${uuid}`; - var inputStyleStr = 'width:66%;'; + var inputStyleStr = 'width:100%;'; var nameDom = $(`
- ${name} + vp-apiblock-style-flex-column-between' + style='position:relative; height: 50px; '> +
${name}
+ placeholder='input super class name' >
`); return nameDom; diff --git a/src/api_block/component/option/def_option.js b/src/api_block/component/option/def_option.js index e71a7b7a..f8e59637 100644 --- a/src/api_block/component/option/def_option.js +++ b/src/api_block/component/option/def_option.js @@ -28,8 +28,10 @@ define([ , VP_CLASS_STYLE_FLEX_ROW_BETWEEN + , VP_CLASS_STYLE_WIDTH_5PERCENT , VP_CLASS_STYLE_WIDTH_20PERCENT , VP_CLASS_STYLE_WIDTH_25PERCENT + , VP_CLASS_STYLE_WIDTH_30PERCENT , VP_CLASS_STYLE_WIDTH_100PERCENT , VP_CLASS_APIBLOCK_PARAM_DELETE_BTN @@ -262,16 +264,17 @@ define([ idStr = `vp_apiblockDefOptionName${uuid}`; classStr = `vp-apiblock-input-def-name-${uuid}`; - blockCodeName = 'Name'; - inputStyleStr = 'width: 82%'; + blockCodeName = 'Function Name'; + inputStyleStr = 'width: 100%'; var nameDom = $(`
- + vp-apiblock-style-flex-column-between' + style='position:relative; height: 50px; margin-bottom: 15px; '> +
${blockCodeName} - +
- - In param - + vp-apiblock-style-flex-row-between' + style="margin-bottom: 3px;"> +
+ Parameter +
+
+
+
+ Value +
+
+ Argument Type +
+
+
`); var defInParamContainer = $(`
@@ -385,7 +410,7 @@ define([ var sbDefVariable = new sb.StringBuilder(); sbDefVariable.appendFormatLine("
", VP_CLASS_STYLE_FLEX_ROW_BETWEEN - , VP_CLASS_STYLE_WIDTH_25PERCENT); + , VP_CLASS_STYLE_WIDTH_20PERCENT); // Deprecated: don't show this on ui // if (arg6 == DEF_BLOCK_ARG6_TYPE.ARGS) { // sbDefVariable.appendLine("*"); @@ -413,8 +438,8 @@ define([ var suggestInputArg5 = MakeVpSuggestInputText_apiblock(VP_ID_APIBLOCK_OPTION_DEF_ARG_5 + index + uuid , arg5 , loadedVariableNameList_arg5 - , VP_CLASS_STYLE_WIDTH_20PERCENT - , 'Default Val' + , VP_CLASS_STYLE_WIDTH_25PERCENT + , 'Value' , function(selectedValue) { bindSelectValueEventFunc_def(selectedValue, index, @@ -422,7 +447,7 @@ define([ }); sbDefParam.appendLine(suggestInputArg5.toString()); var sbselectBoxArg6 = MakeOptionSelectBox(VP_ID_APIBLOCK_OPTION_DEF_ARG_6 + index + uuid - , VP_CLASS_STYLE_WIDTH_20PERCENT + , VP_CLASS_STYLE_WIDTH_25PERCENT , arg6 , loadedVariableNameList_arg6); sbDefParam.appendLine(sbselectBoxArg6.toString()); @@ -445,7 +470,7 @@ define([ defInParamContainer.append(defInParamBody); defBlockOption.append(defInParamContainer); - var defPlusButton = MakeOptionPlusButton(VP_CLASS_APIBLOCK_PARAM_PLUS_BTN + uuid, '+ Param'); + var defPlusButton = MakeOptionPlusButton(VP_CLASS_APIBLOCK_PARAM_PLUS_BTN + uuid, '+ Parameter', 'vp-apiblock-param-box-btn'); defBlockOption.append(defPlusButton); /** bottom block option 탭에 렌더링된 dom객체 생성 */ diff --git a/src/api_block/component/option/return_option.js b/src/api_block/component/option/return_option.js index b4d2a28d..7e29d134 100644 --- a/src/api_block/component/option/return_option.js +++ b/src/api_block/component/option/return_option.js @@ -91,8 +91,8 @@ define([ var returnOutParamList = thisBlock.getState(STATE_returnOutParamList); var returnOutParamContainer = $(`
- - param + + Parameter
@@ -112,7 +112,7 @@ define([
`); - var returnOutParamInput = `