Apps > Groupby - without advanced options

minjk-bl · minjk-bl · commit bd5ae46cc86b · 2021-10-08T03:03:41.000+09:00
diff --git a/css/common/groupby.css b/css/common/groupby.css
@@ -0,0 +1,29 @@
+.vp-gb-container {
+    width: 700px;
+    height: 550px;
+}
+
+.vp-gb-df-box {
+    display: grid;
+    grid-template-rows: 30px;
+    grid-row-gap: 5px;
+}
+
+.vp-gb-df-refresh {
+    display: inline-block;
+    cursor: pointer;
+    margin-left: 5px;
+}
+.vp-gb-df-box label {
+    font-weight: bold;
+}
+.vp-gb-df-box select,
+.vp-gb-df-box input {
+    width: 160px;
+}
+.vp-gb-adv-box {
+    border: 1px solid var(--border-gray-color);
+    padding: 10px;
+    margin-top: 5px;
+    height: 180px;
+}
diff --git a/css/common/popupPage.css b/css/common/popupPage.css
@@ -45,9 +45,9 @@
     width: 100%;
     height: calc(98% - 80px);
     padding: 20px;
-    display: grid;
+    /* display: grid;
     grid-row-gap: 5px;
-    grid-template-rows: 30px 30px 60% calc(40% - 80px);
+    grid-template-rows: 30px 30px 60% calc(40% - 80px); */
     overflow: auto;
 }
 .vp-pp-preview-box {
@@ -120,3 +120,38 @@
     color: var(--font-hightlight);
     background: var(--light-gray-color);
 }
+
+
+.vp-pp-popup-box {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 400px;
+    min-height: 150px;
+    width: 30%;
+    height: fit-content;
+    background-color: white;
+    z-index: 200;
+    border: 0.25px solid var(--border-gray-color);
+    box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
+}
+.vp-pp-popup-body {
+    height: calc(100% - 80px);
+    padding: 10px;
+}
+.vp-pp-popup-close {
+    position: fixed;
+    z-index: 3;
+    right: 5px;
+    width: 30px;
+    height: 20px;
+    line-height: 20px;
+    top: 10px;
+    text-align: center;
+    cursor: pointer;
+}
+.vp-pp-popup-button-box {
+    float: right;
+    margin: 0 15px 15px 0;
+}
diff --git a/css/component/common.css b/css/component/common.css
@@ -62,4 +62,23 @@
     display: inline-block;
     height: 15px;
     border-right: 1px solid var(--font-primary);
+}
+
+/* Width selector */
+.wp50 {
+    width: 50px;
+}
+.wp80 {
+    width: 80px;
+}
+.wp100 {
+    width: 100px;
+}
+.wp120 {
+    width: 120px;
+}
+
+/* font selector */
+.fb {
+    font-weight: bold;
 }
diff --git a/src/api_block/constData.js b/src/api_block/constData.js
@@ -809,6 +809,7 @@ define([
             file: 'nbextensions/visualpython/src/common/vpGroupby',
             icon: '/nbextensions/visualpython/resource/apps/apps_groupby.svg',
             color: 2,
+            config: { width: '700px', height: '550px' }
         },
         'merge': {
             label: 'Merge',
diff --git a/src/common/vpGroupby.js b/src/common/vpGroupby.js
