Additions

src/renderer/components/NewConnectionModal.vue

@@ -0,0 +1,49 @@
+<template>
+   <div class="modal" :class="{'active': isOpened}">
+      <a class="modal-overlay c-hand" @click="closeModal" />
+      <div class="modal-container">
+         <div class="modal-header">
+            <a class="btn btn-clear float-right c-hand" @click="closeModal" />
+            <div class="modal-title h5">
+               Create a new connection
+            </div>
+         </div>
+         <div class="modal-body">
+            <div class="content">
+               <!-- content here -->
+            </div>
+         </div>
+         <div class="modal-footer">
+            ...
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+   name: 'NewConnectionModal',
+   props: {
+      isOpened: {
+         type: Boolean,
+         default: false
+      }
+   },
+   data () {
+      return {
+
+      };
+   },
+   methods: {
+      ...mapActions({
+         closeModal: 'connections/hideNewConnModal'
+      })
+   }
+};
+</script>
+
+<style>
+
+</style>

src/renderer/components/QueryEditor.vue

@@ -69,4 +69,7 @@ export default {
 </script>
 
 <style scoped>
+   .editor-wrapper{
+      border-bottom: 1px solid #444444;
+   }
 </style>

src/renderer/components/TheAppWelcome.vue

@@ -0,0 +1,35 @@
+<template>
+   <div class="empty text-light">
+      <div class="empty-icon">
+         <i class="material-icons md-48">mood</i>
+      </div>
+      <p class="empty-title h5">
+         Welcome to Antares SQL Client!
+      </p>
+      <p class="empty-subtitle">
+         Your first step: create a new database connection.
+      </p>
+      <div class="empty-action">
+         <button class="btn btn-primary" @click="$emit('newConn')">
+            Create connection
+         </button>
+      </div>
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'TheAppWelcome'
+};
+</script>
+
+<style scoped>
+   .empty{
+      height: 100%;
+      border-radius: 0;
+      background: transparent;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+   }
+</style>

src/renderer/components/TheExploreBar.vue

@@ -0,0 +1,26 @@
+<template>
+   <div id="explorebar" class="container">
+      <!-- aaa -->
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'TheExploreBar'
+
+};
+</script>
+
+<style lang="scss">
+   #explorebar{
+      width: $explorebar-width;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      background: #272727;
+      margin-bottom: $footer-height;
+      box-shadow: 0 0 1px 0px #000;
+      z-index: 8;
+   }
+</style>

src/renderer/components/TheFooter.vue

@@ -0,0 +1,55 @@
+<template>
+   <div id="footer" class="text-light">
+      <div class="footer-left-elements">
+         <ul class="footer-elements">
+            <li class="footer-element">
+               <i class="material-icons md-18">memory</i>
+            </li>
+         </ul>
+      </div>
+
+      <div class="footer-right-elements">
+         <ul class="footer-elements">
+            <li class="footer-element">
+               <i class="material-icons md-18">favorite</i>
+            </li>
+            <li class="footer-element">
+               <i class="material-icons md-18">info_outline</i>
+            </li>
+         </ul>
+      </div>
+   </div>
+</template>
+
+<script>
+
+export default {
+
+};
+</script>
+
+<style lang="scss">
+   #footer{
+      height: $footer-height;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: $primary-color;
+      padding: 0 .2rem;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      box-shadow: 0 0 1px 0px #000;
+
+      .footer-elements{
+         list-style: none;
+         margin: 0;
+         display: flex;
+
+         .footer-element{
+            padding: 0 .4rem;
+         }
+      }
+   }
+</style>

src/renderer/components/TheSettingBar.vue

@@ -0,0 +1,57 @@
+<template>
+   <div id="settingbar" class="container">
+      <div class="settingbar-top-elements">
+         <ul class="settingbar-elements">
+            <li
+               class="settingbar-element btn btn-link tooltip tooltip-right"
+               data-tooltip="Add connection"
+               @click="showNewConnModal"
+            >
+               <i class="material-icons text-light">add</i>
+            </li>
+         </ul>
+      </div>
+
+      <div class="settingbar-bottom-elements">
+         <ul class="settingbar-elements">
+            <li class="settingbar-element btn btn-link tooltip tooltip-right" data-tooltip="Settings">
+               <i class="material-icons text-light">settings</i>
+            </li>
+         </ul>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+   name: 'TheSettingBar',
+   methods: {
+      ...mapActions({
+         showNewConnModal: 'connections/showNewConnModal'
+      })
+   }
+};
+</script>
+
+<style lang="scss">
+   #settingbar{
+      width: $settingbar-width;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      background: #3f3f3f;
+      padding: .5rem 0;
+      margin-bottom: $footer-height;
+      box-shadow: 0 0 1px 0px #000;
+      z-index: 9;
+
+      .settingbar-elements{
+         list-style: none;
+         padding: 0;
+         margin: 0;
+      }
+   }
+</style>