Skip to content

Commit 48b2d58

Browse files
minjk-blminjk-bl
committed
#12 - instance design changed
1 parent 6c63759 commit 48b2d58

6 files changed

Lines changed: 64 additions & 37 deletions

File tree

‎css/common/instanceEditor.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44
display: grid;
55
grid-template-columns: 50% 50%;
66
grid-gap: 10px;
7-
padding: 5px 14px 0px 14px;
7+
/* padding: 5px 14px 0px 14px; */
8+
padding-right: 14px;
89
}
910
.vp-ins-select-container {
1011

1112
}
1213
.vp-ins-select-title {
13-
font-weight: bold;
14+
font-weight: 700;
15+
color: var(--hightlight-color);
1416
padding: 5px 5px 5px 0px;
1517
}
1618
#vp-wrapper .vp-ins-select-container input.vp-ins-search {
@@ -21,7 +23,7 @@
2123
border: 0.25px solid #C4C4C4;
2224
}
2325
.vp-ins-select-list {
24-
height: 200px;
26+
height: 145px;
2527
width: 100%;
2628

2729
list-style: none;

‎css/common/subsetEditor.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
background-color: rgba(0,0,0,.4);
1313
}
1414

15+
.vp-ds-button {
16+
width: 45px;
17+
}
18+
1519
.vp-ds-container {
1620
position: relative;
1721
left: 50%;

‎css/file_io/instance.css‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
vertical-align: top;
1010
}
1111
.vp-instance-toolbar {
12+
/* display: none; */
1213
grid-column: 2/3;
1314
}
1415
.vp-instance-toolbar .vp-toolbar-button {
@@ -20,9 +21,15 @@
2021
border-radius: 2px;
2122
}
2223

23-
2424
.vp-instance-label {
2525
grid-column: 1/2;
26+
font-weight: 700;
27+
margin: 0px;
28+
}
29+
30+
.vp-instance-box {
31+
grid-column-start: 1;
32+
grid-column-end: 3;
2633
}
2734

2835
.vp-instance-base > hr {
@@ -31,9 +38,12 @@
3138
grid-column: 1/3;
3239
}
3340

34-
.vp-ins-container {
41+
.vp-ins-container.variable {
42+
grid-column: 1/3;
43+
}
44+
45+
.vp-ins-container.allocate {
3546
grid-column: 1/3;
36-
grid-row: 5;
3747
}
3848

3949
/* udf editor - CodeMirror */

‎src/common/vpSubsetEditor.js‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -192,8 +192,8 @@ define([
192192

193193
// set button next to input tag
194194
var buttonTag = new sb.StringBuilder();
195-
buttonTag.appendFormat('<button type="button" class="{0} {1}">{2}</button>'
196-
, VP_DS_BTN, this.uuid, '...');
195+
buttonTag.appendFormat('<button type="button" class="{0} {1} {2}">{3}</button>'
196+
, VP_DS_BTN, this.uuid, 'vp-button', 'Edit');
197197
$(this.pageThis.wrapSelector('#' + this.targetId)).parent().append(buttonTag.toString());
198198

199199
// add popup div
@@ -1144,7 +1144,9 @@ define([
11441144
var that = this;
11451145
// open popup
11461146
$(document).on('click', vpCommon.formatString('.{0}.{1}', VP_DS_BTN, this.uuid), function(event) {
1147-
that.open();
1147+
if (!$(this).hasClass('disabled')) {
1148+
that.open();
1149+
}
11481150
});
11491151

11501152
// close popup
@@ -1659,6 +1661,17 @@ define([
16591661
$(this.pageThis.wrapSelector('.' + VP_DS_BTN + '.' + this.uuid)).hide();
16601662
}
16611663

1664+
SubsetEditor.prototype.disableButton = function() {
1665+
var buttonEle = $(this.pageThis.wrapSelector('.' + VP_DS_BTN + '.' + this.uuid));
1666+
if (!buttonEle.hasClass('disabled')) {
1667+
buttonEle.addClass('disabled');
1668+
}
1669+
}
1670+
1671+
SubsetEditor.prototype.enableButton = function() {
1672+
$(this.pageThis.wrapSelector('.' + VP_DS_BTN + '.' + this.uuid)).removeClass('disabled');
1673+
}
1674+
16621675
SubsetEditor.prototype.showButton = function() {
16631676
$(this.pageThis.wrapSelector('.' + VP_DS_BTN + '.' + this.uuid)).show();
16641677
}

‎src/file_io/instance.html‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
11
<div class="vp-option-page" id="vp_instance">
22
<div class="vp-instance-base cm-s-ipython">
3-
<div class="vp-instance-toolbar">
3+
<!-- <div class="vp-instance-toolbar">
44
<input type="hidden" id="vp_stateLeft"/>
55
<input type="hidden" id="vp_stateRight"/>
66
<input type="button" id="vp_instanceClear" class="vp-toolbar-button" value="Clear"/>
77
<input type="button" id="vp_instanceUndo" class="vp-toolbar-button" value="Undo"/>
8-
</div>
8+
</div> -->
99
<label for="vp_instanceVariable" class="vp-instance-label variable">Variable</label>
1010
<div class="vp-instance-box variable">
1111
<textarea id="vp_instanceVariable" name="code"></textarea>
1212
</div>
13-
14-
<label for="vp_instanceAllocate" class="vp-instance-label allocate">Allocated to</label>
15-
<div class="vp-instance-box allocate">
16-
<textarea id="vp_instanceAllocate" name="code"></textarea>
13+
<div class="vp-ins-container variable" id="vp_variableInsEditContainer">
14+
<!-- vpInstanceEditor -->
1715
</div>
18-
16+
1917
<hr style="margin: 0px;"/>
2018

21-
<div class="vp-ins-container" id="vp_variableInsEditContainer">
22-
<!-- vpInstanceEditor -->
19+
<label for="vp_instanceAllocate" class="vp-instance-label allocate">Allocate to</label>
20+
<div class="vp-instance-box allocate">
21+
<textarea id="vp_instanceAllocate" name="code"></textarea>
2322
</div>
24-
25-
<div class="vp-ins-container" id="vp_allocateInsEditContainer">
23+
<div class="vp-ins-container allocate" id="vp_allocateInsEditContainer">
2624
<!-- vpInstanceEditor -->
2725
</div>
2826
</div>

‎src/file_io/instance.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -201,8 +201,8 @@ define([
201201
// vpSubsetEditor
202202
this.state.variable.subsetEditor = new vpSubsetEditor(this, "vp_instanceVariable", true);
203203
this.state.allocate.subsetEditor = new vpSubsetEditor(this, "vp_instanceAllocate", true);
204-
this.state.variable.subsetEditor.hideButton();
205-
this.state.allocate.subsetEditor.hideButton();
204+
this.state.variable.subsetEditor.disableButton();
205+
this.state.allocate.subsetEditor.disableButton();
206206

207207
this.ALLOW_SUBSET_TYPES = that.pointer.subsetEditor.getAllowSubsetTypes();
208208

@@ -213,7 +213,7 @@ define([
213213
this.state.allocate.insEditor = new vpInstanceEditor(this, "vp_instanceAllocate", 'vp_allocateInsEditContainer');
214214

215215
that.state.variable.insEditor.show();
216-
that.state.allocate.insEditor.hide();
216+
that.state.allocate.insEditor.show();
217217

218218
// variable load
219219
that.reloadInsEditor();
@@ -241,19 +241,19 @@ define([
241241
$(that.wrapSelector('.CodeMirror')).removeClass('selected');
242242
if (insEditorType == 'variable') {
243243
// variable
244-
that.state.variable.insEditor.show();
245-
that.state.allocate.insEditor.hide();
244+
// that.state.variable.insEditor.show();
245+
// that.state.allocate.insEditor.hide();
246246
that.pointer = that.state.variable;
247247
$(that.wrapSelector('.variable .CodeMirror')).addClass('selected');
248248
} else if (insEditorType == 'allocate'){
249249
// allocate
250-
that.state.variable.insEditor.hide();
251-
that.state.allocate.insEditor.show();
250+
// that.state.variable.insEditor.hide();
251+
// that.state.allocate.insEditor.show();
252252
that.pointer = that.state.allocate;
253253
$(that.wrapSelector('.allocate .CodeMirror')).addClass('selected');
254254
} else {
255-
that.state.variable.insEditor.hide();
256-
that.state.allocate.insEditor.hide();
255+
// that.state.variable.insEditor.hide();
256+
// that.state.allocate.insEditor.hide();
257257
}
258258
});
259259

@@ -281,20 +281,20 @@ define([
281281

282282
if (insEditorType == 'variable') {
283283
// variable
284-
that.state.variable.insEditor.show();
285-
that.state.allocate.insEditor.hide();
284+
// that.state.variable.insEditor.show();
285+
// that.state.allocate.insEditor.hide();
286286
that.state.selectedBox = 'variable';
287287
that.pointer = that.state.variable;
288288
} else if (insEditorType == 'allocate'){
289289
// allocate
290-
that.state.variable.insEditor.hide();
291-
that.state.allocate.insEditor.show();
290+
// that.state.variable.insEditor.hide();
291+
// that.state.allocate.insEditor.show();
292292
that.state.selectedBox = 'allocate';
293293
that.pointer = that.state.allocate;
294294
} else {
295295
that.state.selectedBox = '';
296-
that.state.variable.insEditor.hide();
297-
that.state.allocate.insEditor.hide();
296+
// that.state.variable.insEditor.hide();
297+
// that.state.allocate.insEditor.hide();
298298
}
299299
});
300300

@@ -388,9 +388,9 @@ define([
388388
var varType = varObj.type;
389389

390390
if (that.ALLOW_SUBSET_TYPES.includes(varType)) {
391-
tempPointer.subsetEditor.showButton();
391+
tempPointer.subsetEditor.enableButton();
392392
} else {
393-
tempPointer.subsetEditor.hideButton();
393+
tempPointer.subsetEditor.disableButton();
394394
}
395395
};
396396

0 commit comments

Comments
 (0)