Fixed inner popup draggable

minjk-bl · minjk-bl · commit 0863eb3a9050 · 2022-01-21T13:52:28.000+09:00
diff --git a/css/popupComponent.css b/css/popupComponent.css
@@ -346,13 +346,12 @@
 /* inner popup */
 .vp-inner-popup-box {
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    left: calc(50% - 200px);
+    top: calc(50% - 150px);
     min-width: 400px;
     min-height: 150px;
     width: 30%;
-    height: fit-content;
+    height: 300px;
     background-color: white;
     z-index: 200;
     border: 0.25px solid var(--border-gray-color);
diff --git a/js/com/component/PopupComponent.js b/js/com/component/PopupComponent.js
@@ -394,6 +394,12 @@ define([
                     });
                 }
             });
+
+            // inner popup draggable
+            $(this.wrapSelector('.vp-inner-popup-box')).draggable({
+                handle: '.vp-inner-popup-title',
+                containment: 'parent'
+            });
         }
 
         _unbindResizable() {
diff --git a/js/m_apps/Frame.js b/js/m_apps/Frame.js
@@ -760,9 +760,10 @@ define([
             return content.toString();
         }
 
-        openInputPopup = function(type, width=0, height=0) {
+        openInputPopup = function(type, width=400, height=300) {
             var title = '';
             var content = '';
+            let size = { width: width, height: height };
     
             switch (parseInt(type)) {
                 case FRAME_EDIT_TYPE.ADD_COL:
@@ -793,6 +794,9 @@ define([
     
             this.state.popup.type = type;
 
+            // set size
+            $(this.wrapSelector('.vp-inner-popup-box')).css(size);
+
             // set content
             $(this.wrapSelector('.vp-inner-popup-body')).html(content);
             

Original file line number	Diff line number	Diff line change
`@@ -394,6 +394,12 @@ define([`
`394`	`394`	`});`
`395`	`395`	`}`
`396`	`396`	`});`
	`397`	`+`
	`398`	`+ // inner popup draggable`
	`399`	`+ $(this.wrapSelector('.vp-inner-popup-box')).draggable({`
	`400`	`+ handle: '.vp-inner-popup-title',`
	`401`	`+ containment: 'parent'`
	`402`	`+ });`
`397`	`403`	`}`
`398`	`404`
`399`	`405`	`_unbindResizable() {`