From 3e52dcac2c8bce615fab83e5f066b7ddff8c3c57 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Wed, 4 Nov 2020 22:18:04 +0100
Subject: [PATCH] move run button to the menu

---
 src/components/Chart.vue    |  4 ++--
 src/components/MainMenu.vue |  8 ++++++++
 src/components/Tab.vue      | 21 ++-------------------
 3 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/components/Chart.vue b/src/components/Chart.vue
index 6833c71..5c613e2 100644
--- a/src/components/Chart.vue
+++ b/src/components/Chart.vue
@@ -1,10 +1,9 @@
 <template>
-<div class="chart-container">
+<div v-show="visible" class="chart-container">
   <div class="chart-worning" v-show="!sqlResult && visible">
     There is no data to build a chart. Run your sql query and make sure the result is not empty.
   </div>
   <PlotlyEditor
-    v-show="visible"
     :data="state.data"
     :layout="state.layout"
     :frames="state.frames"
@@ -106,6 +105,7 @@ export default {
 }
 .chart {
   border-top: 1px solid var(--color-border);
+  min-height: 242px;
 }
 
 >>> .editor_controls .sidebar__item:before {
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index b8c69c7..0c77599 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -5,6 +5,14 @@
       <router-link to="/my-queries">My queries</router-link>
     </div>
     <div>
+      <button
+        v-if="$store.state.tabs.length > 0"
+        class="primary"
+        :disabled="currentQuery && !$store.state.schema || !currentQuery.query"
+        @click="currentQuery.execute"
+      >
+        Run
+      </button>
       <button
         v-if="$store.state.tabs.length > 0"
         class="primary"
diff --git a/src/components/Tab.vue b/src/components/Tab.vue
index 45e0e8b..4fcacd9 100644
--- a/src/components/Tab.vue
+++ b/src/components/Tab.vue
@@ -3,21 +3,12 @@
     <splitpanes
       class="query-results-splitter"
       horizontal
-      :before="{ size: 50, max: 50 }"
+      :before="{ size: 50, max: 70 }"
       :after="{ size: 50, max: 100 }"
     >
       <template #left-pane>
         <div class="query-editor">
           <sql-editor v-model="query" />
-          <div  class="run-btn-container">
-            <button
-              class="primary run-btn"
-              @click="execute"
-              :disabled="!$store.state.schema || !query"
-            >
-              Run
-            </button>
-          </div>
         </div>
       </template>
       <template #right-pane>
@@ -171,12 +162,8 @@ export default {
   background-color: var(--color-bg-light);
 }
 
-.run-btn {
-  margin-top: 24px;
-}
-
 .query-editor {
-  padding: 52px 52px 24px;
+  padding: 52px;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -185,10 +172,6 @@ export default {
   min-height: 190px;
 }
 
-.run-btn-container {
-  text-align: right;
-}
-
 .table-view {
   margin: 0 52px;
   height: calc(100% - 88px);