Skip to content

Commit 39d01d7

Browse files
author
minjk-bl
committed
Change DataSelector as modal dialog
1 parent f9e34bf commit 39d01d7

3 files changed

Lines changed: 38 additions & 27 deletions

File tree

‎css/component/dataSelector.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,17 @@
2020
cursor: not-allowed;
2121
}
2222
/* DataSelector popup */
23-
.vp-dataselector {
23+
.vp-dataselector-base {
2424
display: none;
25+
position: fixed;
26+
top: 0;
27+
left: 0;
28+
width: 100%;
29+
height: 100%;
30+
z-index: 300;
31+
background-color: rgba(0,0,0,.4);
32+
}
33+
.vp-dataselector {
2534
position: absolute;
2635
top: calc(50% - 225px);
2736
left: calc(50% - 300px);

‎html/component/dataSelector.html‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,36 @@
11
<body>
2-
<div class="vp-dataselector">
3-
<div class="vp-inner-popup-header">
4-
<label class="vp-inner-popup-title">Data Selector</label>
5-
<img class="vp-inner-popup-close" src="/nbextensions/visualpython/img/close_big.svg" title="Close data selector"/>
6-
</div>
7-
<div class="vp-inner-popup-body vp-scrollbar">
8-
<div class="vp-grid-col-p50">
9-
<label class="vp-bold">Type</label>
10-
<label class="vp-bold">Data</label>
2+
<div class="vp-dataselector-base">
3+
<div class="vp-dataselector">
4+
<div class="vp-inner-popup-header">
5+
<label class="vp-inner-popup-title">Data Selector</label>
6+
<img class="vp-inner-popup-close" src="/nbextensions/visualpython/img/close_big.svg" title="Close data selector"/>
117
</div>
12-
<div class="vp-ds-data-box vp-grid-col-p50">
13-
<div class="vp-ds-type-box vp-grid-box vp-scrollbar vp-no-selection">
14-
8+
<div class="vp-inner-popup-body vp-scrollbar">
9+
<div class="vp-grid-col-p50">
10+
<label class="vp-bold">Type</label>
11+
<label class="vp-bold">Data</label>
1512
</div>
16-
<div class="vp-ds-variable-box vp-grid-box vp-scrollbar vp-no-selection">
17-
13+
<div class="vp-ds-data-box vp-grid-col-p50">
14+
<div class="vp-ds-type-box vp-grid-box vp-scrollbar vp-no-selection">
15+
16+
</div>
17+
<div class="vp-ds-variable-box vp-grid-box vp-scrollbar vp-no-selection">
18+
19+
</div>
1820
</div>
19-
</div>
20-
<hr style="margin: 0px;"/>
21-
<div class="vp-ds-option-box">
22-
<label class="vp-bold">Option Page</label>
23-
<div class="vp-ds-option-inner-box">
24-
21+
<hr style="margin: 0px;"/>
22+
<div class="vp-ds-option-box">
23+
<label class="vp-bold">Option Page</label>
24+
<div class="vp-ds-option-inner-box">
25+
26+
</div>
2527
</div>
2628
</div>
27-
</div>
28-
<div class="vp-inner-popup-footer">
29-
<div class="vp-inner-popup-button-box">
30-
<button type="button" class="vp-button" id="vp_dsCancel">Cancel</button>
31-
<button type="button" class="vp-button activated" id="vp_dsOk">OK</button>
29+
<div class="vp-inner-popup-footer">
30+
<div class="vp-inner-popup-button-box">
31+
<button type="button" class="vp-button" id="vp_dsCancel">Cancel</button>
32+
<button type="button" class="vp-button activated" id="vp_dsOk">OK</button>
33+
</div>
3234
</div>
3335
</div>
3436
</div>

‎js/com/component/DataSelector.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ define([
3939
* @param {Object} prop { type, ... }
4040
*/
4141
constructor(prop) {
42-
super($('#site'), {}, prop);
42+
super($('body'), {}, prop);
4343
}
4444

4545
_init() {

0 commit comments

Comments
 (0)