Add toolbar and more menus to Frame app

minjk-bl · minjk-bl · commit cc79808d3da5 · 2023-04-26T18:03:25.000+09:00
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/html/m_apps/frame.html b/visualpython/html/m_apps/frame.html
@@ -27,7 +27,7 @@
             
         </div>
         <div class="vp-fe-body">
-            <div class="vp-fe-preview"><textarea id="vp_fePreviewCode" name="code"># Code preview</textarea></div>
+            <!-- <div class="vp-fe-preview"><textarea id="vp_fePreviewCode" name="code"># Code preview</textarea></div> -->
             <div class="vp-fe-df-box">
                 <div>
                     <label for="vp_feVariable" class="vp-orange-text">DataFrame</label>
@@ -44,9 +44,11 @@
                     <label><input type="checkbox" class="vp-state" id="inplace" /><span>Inplace</span></label>
                 </div>
             </div>
-            <div class="vp-fe-toolbar">
-                <button type="button" class="vp-button vp-fe-toolbar-item" data-type="97">Add Column</button>
-                <button type="button" class="vp-button vp-fe-toolbar-item" data-type="98">Add Row</button>
+            <div class="vp-fe-toolbox">
+                <!-- <button type="button" class="vp-button vp-fe-toolbar-item" data-type="97">Add Column</button>
+                <button type="button" class="vp-button vp-fe-toolbar-item" data-type="98">Add Row</button> -->
+                <div class="vp-button vp-fe-toolbar-item" data-type="97" title="Add column">AC</div>
+                <div class="vp-button vp-fe-toolbar-item" data-type="97" title="Add row">AR</div>
             </div>
             <div class="vp-fe-table no-selection">
                 <!-- Frame table -->
diff --git a/visualpython/js/m_apps/Frame.js b/visualpython/js/m_apps/Frame.js
