visualpython · minjk-bl · Apr 26, 2023 · Apr 6, 2023 · Apr 24, 2023 · Apr 24, 2023
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/css/m_apps/frame.css b/visualpython/css/m_apps/frame.css
@@ -9,7 +9,8 @@
     /* grid-template-rows: 35px 30px 60% calc(40% - 80px); */
     /* grid-template-rows: 35px 30px calc(100% - 80px); */
     /* grid-template-rows: 35px 65px calc(100% - 110px); */
-    grid-template-rows: 35px 65px 35px calc(100% - 145px);
+    /* grid-template-rows: 35px 65px 35px calc(100% - 145px); */
+    grid-template-rows: 65px 30px calc(100% - 115px);
     grid-template-columns: 100%;
 }
 
@@ -55,11 +56,22 @@
 }
 .vp-fe-toolbar {
     /* border-top: 1px solid var(--vp-border-gray-color); */
-    padding-top: 5px;
+    /* padding-top: 5px; */
 }
 .vp-fe-toolbar-item {
-    width: 100px;
-    margin-right: 5px;
+    width: 50px;
+    height: 50px;
+    /* margin-right: 5px; */
+    display: inline-block;
+    border: 0.25px solid var(--vp-border-gray-color);
+    box-sizing: border-box;
+    box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 10%);
+    border-radius: 3px;
+    line-height: 40px;
+    vertical-align: middle;
+    cursor: pointer;
+    padding: 5px;
+    text-align: center;
 }
 .vp-fe-menu-box {
     position: absolute;

diff --git a/visualpython/css/m_apps/information.css b/visualpython/css/m_apps/information.css
@@ -0,0 +1,147 @@
+#vp_varDetailTable:empty::after {
+    content: '(Select variables to preview the data.)';
+    color: var(--vp-highlight-color);
+    font-style: italic;
+}
+#vp_varDetailTable {
+    width: 100%;
+    height: 300px;
+    overflow: auto;
+}
+
+.vp-information-body {
+    display: grid;
+    grid-template-columns: calc(50% - 8px) calc(50% - 8px);
+    grid-template-rows: 100%;
+    grid-row-gap: 5px;
+    grid-column-gap: 15px;
+    align-items: baseline;
+    align-content: baseline;
+    height: 100%;
+}
+.vp-information-left-box, 
+.vp-information-right-box {
+    height: 100%;
+}
+.vp-information-left-box {
+    display: grid;
+    grid-template-rows: 30px 10px 30px calc(100% - 75px);
+}
+.vp-information-toolbox {
+    height: 30px;
+}
+/* dropdown menu */
+.vp-dropdown {
+    position: relative;
+    display: inline-block;
+}
+.vp-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: var(--vp-background-color);
+    min-width: 100px;
+    box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
+    z-index: 1;
+}
+.vp-dropdown-content .vp-dropdown-item {
+    height: 30px;
+    line-height: 30px;
+    background: var(--vp-background-color);
+    border: 0.25px solid var(--vp-border-gray-color);
+    box-sizing: border-box;
+    box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
+    border-radius: 2px;
+    font-size: 13px;
+    text-align: left;
+    color: var(--vp-font-primary);
+    cursor: pointer;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    text-overflow: ellipsis;
+    /* overflow: hidden; */
+    white-space: nowrap;
+    padding: 0px 5px;
+}
+.vp-dropdown-content .vp-dropdown-item:not(.disabled):not(.selected):hover {
+    background-color: var(--vp-border-gray-color);
+}
+.vp-dropdown:not(.disabled):hover .vp-dropdown-content {
+    display: block;
+}
+.vp-dropdown:not(.disabled):hover .vp-drop-button:not(.selected) {
+    background-color: var(--vp-border-gray-color);
+}
+.vp-drop-button.selected,
+.vp-dropdown-content .vp-dropdown-item.selected {
+    background-color: var(--vp-highlight-color);
+    color: var(--vp-background-color);
+}
+.vp-drop-button {
+    background-color: var(--vp-background-color);
+    color: var(--vp-font-primary);
+    padding: 5px 7px;
+    border: 0.25px solid var(--vp-border-gray-color);
+    cursor: pointer;
+    height: 30px;
+    font-size: 13px;
+}
+.vp-information-menu.disabled {
+    color: var(--vp-gray-color);
+    cursor: not-allowed;
+}
+.vp-variable-preview {
+    margin-top: 5px;
+    align-content: baseline;
+}
+.vp-variable-preview thead th {
+    cursor: pointer;
+}
+.vp-variable-preview thead th.selected {
+    background-color: var(--vp-highlight-color);
+    color: var(--vp-background-color);
+}
+.vp-information-preview-header {
+    height: 30px;
+    line-height: 30px;
+    margin-bottom: 5px;
+}
+.vp-information-run-button {
+    display: inline-block;
+    width: 80px;
+    height: 30px;
+    line-height: 20px;
+    background: var(--vp-highlight-color);
+    /* border: 0.25px solid var(--vp-border-gray-color); */
+    box-sizing: border-box;
+    box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 10%);
+    border-radius: 3px;
+    padding: 5px 10px;
+    font-size: 13px;
+    vertical-align: middle;
+    text-align: center;
+    color: white;
+    float: right;
+    cursor: pointer;
+}
+.vp-information-preview-box {
+    min-height: 352px;
+    width: 100%;
+    height: calc(100% - 40px);
+    grid-template-rows: 25px 10px calc(100% - 35px);
+    grid-row-gap: 0px;
+}
+.vp-information-preview-content:empty::after {
+    content: 'No preview data';
+    color: var(--vp-gray-color);
+}
+.vp-information-preview-content { 
+    align-content: baseline;
+}
+.vp-information-preview-box img {
+    width: 100%;
+    height: 100%;
+}
diff --git a/visualpython/css/menuFrame.css b/visualpython/css/menuFrame.css
@@ -356,7 +356,7 @@ input.vp-menu-search-box {
 .vp-menuitem.apps .apps_file {
     background: top / contain no-repeat url(../img/apps/apps_file.svg);
 }
-.vp-menuitem.apps .apps_variable {
+.vp-menuitem.apps .apps_information {
     background: top / contain no-repeat url(../img/apps/apps_variable.svg);
 }
 .vp-menuitem.apps .apps_snippets {

diff --git a/visualpython/css/root.css b/visualpython/css/root.css
@@ -88,6 +88,10 @@ input.vp-input {
 input.vp-input::placeholder {
 	color: var(--vp-gray-color);
 }
+input.vp-input:disabled, 
+select.vp-select:disabled {
+    cursor: not-allowed;
+}
 
 /* image icons */
 /* LAB: img to background-image */
@@ -125,6 +129,9 @@ input.vp-input::placeholder {
     width: 16px;
     height: 16px;
 }
+.vp-icon-run.white {
+    background: center / contain no-repeat url(../img/snippets/run_white.svg);
+}
 .vp-icon-save {
     background: center / contain no-repeat url(../img/snippets/save_orange.svg);
     width: 16px;
@@ -369,6 +376,75 @@ button.vp-button {
 .vp-accordian.vp-open + .vp-accordian-box {
     display: block !important;
 }
+/* 
+ * Dropdown menus
+ * - Usage: set these structure using tag's class
+ *    <vp-dropdown>
+ *        <vp-drop-button></vp-drop-button>
+ *        <vp-dropdown-content>
+ *            <vp-dropdown-item></vp-dropdown-item>
+ *            <vp-dropdown-item></vp-dropdown-item>
+ *        </vp-dropdown-content>
+ *    <vp-dropdown>
+ */
+.vp-dropdown {
+    position: relative;
+    display: inline-block;
+}
+.vp-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: var(--vp-background-color);
+    min-width: 100px;
+    box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
+    z-index: 1;
+}
+.vp-dropdown-content .vp-dropdown-item {
+    height: 30px;
+    line-height: 30px;
+    background: var(--vp-background-color);
+    border: 0.25px solid var(--vp-border-gray-color);
+    box-sizing: border-box;
+    box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
+    border-radius: 2px;
+    font-size: 13px;
+    text-align: left;
+    color: var(--vp-font-primary);
+    cursor: pointer;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    text-overflow: ellipsis;
+    /* overflow: hidden; */
+    white-space: nowrap;
+    padding: 0px 5px;
+}
+.vp-dropdown-content .vp-dropdown-item:not(.disabled):not(.selected):hover {
+    background-color: var(--vp-border-gray-color);
+}
+.vp-dropdown:not(.disabled):hover .vp-dropdown-content {
+    display: block;
+}
+.vp-dropdown:not(.disabled):hover .vp-drop-button:not(.selected) {
+    background-color: var(--vp-border-gray-color);
+}
+.vp-drop-button.selected,
+.vp-dropdown-content .vp-dropdown-item.selected {
+    background-color: var(--vp-highlight-color);
+    color: var(--vp-background-color);
+}
+.vp-drop-button {
+    background-color: var(--vp-background-color);
+    color: var(--vp-font-primary);
+    padding: 5px 7px;
+    border: 0.25px solid var(--vp-border-gray-color);
+    cursor: pointer;
+    height: 30px;
+    font-size: 13px;
+}
 /* cursor */
 .vp-cursor {
     cursor: pointer;