No db in schema sidebar #10

src/assets/styles/messages.css

@@ -0,0 +1,6 @@
+.worning {
+  background-color: var(--color-bg-warning);
+  color: var(--color-text-base);
+  font-size: 13px;
+  padding: 0 24px;
+}

src/components/Chart.vue

@@ -1,6 +1,6 @@
 <template>
 <div v-show="visible" class="chart-container">
-  <div class="chart-worning" v-show="!sqlResult && visible">
+  <div class="worning 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
@@ -96,12 +96,8 @@ export default {
   height: calc(100% - 89px);
 }
 .chart-worning {
-  background-color: var(--color-bg-warning);
   height: 40px;
   line-height: 40px;
-  color: var(--color-text-base);
-  font-size: 13px;
-  padding: 0 24px;
 }
 .chart {
   border-top: 1px solid var(--color-border);

src/components/DbUpload.vue

@@ -56,6 +56,8 @@ label {
   border: 1px dashed var(--color-border);
   padding: 8px;
   border-radius: var(--border-radius-big);
+  height: 100%;
+  box-sizing: border-box;
 }
 .drop-area {
   background-color: var(--color-bg-light-3);
@@ -67,6 +69,7 @@ label {
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
 }
 input {
   display: none;

src/main.js

@@ -11,6 +11,7 @@ import '@/assets/styles/buttons.css'
 import '@/assets/styles/tables.css'
 import '@/assets/styles/dialogs.css'
 import '@/assets/styles/tooltips.css'
+import '@/assets/styles/messages.css'
 
 Vue.use(VuePlugin)
 Vue.use(VModal)

src/views/Editor.vue

@@ -6,7 +6,13 @@
       :after="{ size: 80, max: 100 }"
     >
       <template #left-pane>
-        <schema />
+        <schema v-if="$store.state.schema"/>
+        <div v-else id="empty-schema-container">
+          <div class="worning">
+            Database is not uploaded. Queries can’t be run without database.
+          </div>
+          <db-upload id="db-uploader"/>
+        </div>
       </template>
       <template #right-pane>
         <tabs />
@@ -19,20 +25,42 @@
 import Splitpanes from '@/components/Splitpanes'
 import Schema from '@/components/Schema'
 import Tabs from '@/components/Tabs'
+import dbUpload from '@/components/DbUpload'
 
 export default {
   name: 'Editor',
   components: {
     Schema,
     Splitpanes,
-    Tabs
+    Tabs,
+    dbUpload
   }
 }
 </script>
 
-<style>
+<style scoped>
 .schema-tabs-splitter {
   height: 100%;
-  margin-left: 6px;
+  background-color: var(--color-white);
+}
+#empty-schema-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 200px;
+  height: 100%;
+}
+
+#db-uploader {
+  flex-grow: 1;
+  margin: 24px;
+}
+
+.worning {
+  padding: 12px 24px;
+}
+
+>>>.drop-area {
+  padding: 0 15px;
 }
 </style>