Add help docs link to popup title bar

minjk-bl · minjk-bl · commit 1b32a560e329 · 2023-04-26T18:03:24.000+09:00
diff --git a/visualpython/css/component/popupComponent.css b/visualpython/css/component/popupComponent.css
@@ -81,6 +81,24 @@
     font-family: 'AppleSDGothicNeo';
     color: var(--vp-font-highlight);
 }
+.vp-popup-docs {
+    position: absolute;
+    width: 15px;
+    height: 20px;
+    top: 4px;
+    right: 85px;
+    z-index: 3;
+    line-height: 20px;
+    text-align: center;
+    cursor: pointer;
+    color: var(--vp-gray-color);
+}
+.vp-popup-docs > div {
+    width: 20px;
+    height: 20px;
+    /* LAB: img to background-image */
+    background: center / contain no-repeat url(../../img/docs.svg);
+}
 .vp-popup-maximize {
     position: absolute;
     width: 15px;
diff --git a/visualpython/data/libraries.json b/visualpython/data/libraries.json
@@ -2916,7 +2916,8 @@
                         "apps" : {
                             "color": 1,
                             "icon": "apps/apps_import.svg"
-                        }
+                        },
+                        "docs" : "https://visual-python.gitbook.io/docs/tutorials/data-preparation"
                     },
                     {
                         "id"   : "apps_file",
@@ -2930,7 +2931,8 @@
                         "apps" : {
                             "color": 1,
                             "icon": "apps/apps_file.svg"
-                        }
+                        },
+                        "docs" : "https://visual-python.gitbook.io/docs/tutorials/data-preparation"
                     },
                     {
                         "id"   : "apps_information",
@@ -2972,7 +2974,8 @@
                         "apps" : {
                             "color": 2,
                             "icon": "apps/apps_frame.svg"
-                        }
+                        },
+                        "docs" : "https://visual-python.gitbook.io/docs/tutorials/data-transformation/modify-dataframes"
                     },
                     {
                         "id"   : "apps_subset",
@@ -2986,7 +2989,8 @@
                         "apps" : {
                             "color": 2,
                             "icon": "apps/apps_subset.svg"
-                        }
+                        },
+                        "docs" : "https://visual-python.gitbook.io/docs/tutorials/data-transformation/create-subsets" 
                     },
                     {
                         "id"   : "apps_instance",
@@ -3014,7 +3018,8 @@
                         "apps" : {
                             "color": 2,
                             "icon": "apps/apps_groupby.svg"
-                        }
+                        },
+                        "docs" : "https://visual-python.gitbook.io/docs/tutorials/data-transformation/group-and-aggregate-dataframes"
                     },
                     {
                         "id"   : "apps_bind",
@@ -3028,7 +3033,8 @@
                         "apps" : {
                             "color": 3,
                             "icon": "apps/apps_bind.svg"
-                        }
+                        },
+                        "docs" : "https://visual-python.gitbook.io/docs/tutorials/data-transformation/combine-dataframes"
                     },
                     {
                         "id"   : "apps_reshape",
@@ -3042,7 +3048,8 @@
                         "apps" : {
                             "color": 3,
                             "icon": "apps/apps_reshape.svg"
-                        }
+                        },
+                        "docs" : "https://visual-python.gitbook.io/docs/tutorials/data-transformation/reshape-dataframes"
                     },
                     {
                         "id"   : "apps_markdown",
diff --git a/visualpython/html/component/popupComponent.html b/visualpython/html/component/popupComponent.html
@@ -56,6 +56,7 @@
             <img class="vp-popup-maximize" src="${vp_base}/img/max_window.svg" title="Maximize this popup">
             <img class="vp-popup-return" src="${vp_base}/img/min_window.svg" title="Return size of this popup">
             <img class="vp-popup-close" src="${vp_base}/img/close_big.svg" title="Close popup"/> -->
+            <a class="vp-popup-docs" target="_blank" title="Open documentation of this function"><div></div></a>
             <div class="vp-popup-toggle" title="Minimize this popup"></div>
             <div class="vp-popup-maximize" title="Maximize this popup"></div>
             <div class="vp-popup-return" title="Return size of this popup"></div>
diff --git a/visualpython/img/docs.svg b/visualpython/img/docs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="24px" height="24px" fill-rule="nonzero"><g fill="#c4c4c4" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M12,2c-5.511,0 -10,4.489 -10,10c0,5.511 4.489,10 10,10c5.511,0 10,-4.489 10,-10c0,-5.511 -4.489,-10 -10,-10zM12,4c4.43012,0 8,3.56988 8,8c0,4.43012 -3.56988,8 -8,8c-4.43012,0 -8,-3.56988 -8,-8c0,-4.43012 3.56988,-8 8,-8zM11,7v2h2v-2zM11,11v6h2v-6z"></path></g></g></svg>
diff --git a/visualpython/js/com/component/PopupComponent.js b/visualpython/js/com/component/PopupComponent.js
@@ -96,7 +96,6 @@ define([
             this.name = name;
             this.path = path;
             this.category = category;
-            
 
             this.config = {
                 sizeLevel: 0,          // 0: 400x400 / 1: 500x500 / 2: 600x500 / 3: 750x500
@@ -114,8 +113,9 @@ define([
                 position: { right: 10, top: 120 },
                 size: { width: 400, height: 550 },
                 saveOnly: false, // apply mode
-                checkModules: [] // module aliases or function names
-                , ...restConfig
+                checkModules: [], // module aliases or function names
+                docs: 'https://visual-python.gitbook.io/docs/getting-started/welcome-to-visual-python',
+                ...restConfig
             };
 
             // check BoardFrame width and set initial position of popup
@@ -563,9 +563,13 @@ define([
             let { 
                 installButton, importButton, packageButton, 
                 codeview, dataview, runButton, footer, 
-                sizeLevel, position
+                sizeLevel, position, docs
             } = this.config;
 
+            // apply link to docs
+            if (docs) {
+                $(this.wrapSelector('.vp-popup-docs')).prop('href', docs);
+            }
             // import & package manager button hide/show
             if (!installButton) { // FIXME: Deprecated after creating package manager
                 $(this.wrapSelector('#popupInstall')).hide();
@@ -620,6 +624,9 @@ define([
                 case 3: 
                     this.config.size = { width: 760, height: 550 };
                     break;
+                case 4:
+                    this.config.size = { width: 1064, height: 550 };
+                    break;
             }
 
             // set detailed size
