Change DataSelector as modal dialog

minjk-bl · minjk-bl · commit 39d01d7ff07a · 2022-06-13T02:03:23.000+09:00
diff --git a/css/component/dataSelector.css b/css/component/dataSelector.css
@@ -20,8 +20,17 @@
     cursor: not-allowed;
 }
 /* DataSelector popup */
-.vp-dataselector {
+.vp-dataselector-base {
     display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 300;
+    background-color: rgba(0,0,0,.4);
+}
+.vp-dataselector {
     position: absolute;
     top: calc(50% - 225px);
     left: calc(50% - 300px);
diff --git a/html/component/dataSelector.html b/html/component/dataSelector.html
@@ -1,34 +1,36 @@
 <body>
-    <div class="vp-dataselector">
-        <div class="vp-inner-popup-header">
-            <label class="vp-inner-popup-title">Data Selector</label>
-            <img class="vp-inner-popup-close" src="/nbextensions/visualpython/img/close_big.svg" title="Close data selector"/>
-        </div>
-        <div class="vp-inner-popup-body vp-scrollbar">
-            <div class="vp-grid-col-p50">
-                <label class="vp-bold">Type</label>
-                <label class="vp-bold">Data</label>
+    <div class="vp-dataselector-base">
+        <div class="vp-dataselector">
+            <div class="vp-inner-popup-header">
+                <label class="vp-inner-popup-title">Data Selector</label>
+                <img class="vp-inner-popup-close" src="/nbextensions/visualpython/img/close_big.svg" title="Close data selector"/>
             </div>
-            <div class="vp-ds-data-box vp-grid-col-p50">
-                <div class="vp-ds-type-box vp-grid-box vp-scrollbar vp-no-selection">
-
+            <div class="vp-inner-popup-body vp-scrollbar">
+                <div class="vp-grid-col-p50">
+                    <label class="vp-bold">Type</label>
+                    <label class="vp-bold">Data</label>
                 </div>
-                <div class="vp-ds-variable-box vp-grid-box vp-scrollbar vp-no-selection">
-                    
+                <div class="vp-ds-data-box vp-grid-col-p50">
+                    <div class="vp-ds-type-box vp-grid-box vp-scrollbar vp-no-selection">
+    
+                    </div>
+                    <div class="vp-ds-variable-box vp-grid-box vp-scrollbar vp-no-selection">
+                        
+                    </div>
                 </div>
-            </div>
-            <hr style="margin: 0px;"/>
-            <div class="vp-ds-option-box">
-                <label class="vp-bold">Option Page</label>
-                <div class="vp-ds-option-inner-box">
-
+                <hr style="margin: 0px;"/>
+                <div class="vp-ds-option-box">
+                    <label class="vp-bold">Option Page</label>
+                    <div class="vp-ds-option-inner-box">
+    
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="vp-inner-popup-footer">
-            <div class="vp-inner-popup-button-box">
-                <button type="button" class="vp-button" id="vp_dsCancel">Cancel</button>
-                <button type="button" class="vp-button activated" id="vp_dsOk">OK</button>
+            <div class="vp-inner-popup-footer">
+                <div class="vp-inner-popup-button-box">
+                    <button type="button" class="vp-button" id="vp_dsCancel">Cancel</button>
+                    <button type="button" class="vp-button activated" id="vp_dsOk">OK</button>
+                </div>
             </div>
         </div>
     </div>
diff --git a/js/com/component/DataSelector.js b/js/com/component/DataSelector.js
@@ -39,7 +39,7 @@ define([
          * @param {Object} prop  { type, ... }
          */
         constructor(prop) {
-            super($('#site'), {}, prop);
+            super($('body'), {}, prop);
         }
 
         _init() {

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ define([`
`39`	`39`	`* @param {Object} prop { type, ... }`
`40`	`40`	`*/`
`41`	`41`	`constructor(prop) {`
`42`		`- super($('#site'), {}, prop);`
	`42`	`+ super($('body'), {}, prop);`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`_init() {`