Additions

src/main/index.js

@@ -13,8 +13,10 @@ let mainWindow;
 
 function createMainWindow () {
    const window = new BrowserWindow({
-      width: 1024,
-      height: 800,
+      width: 1200,
+      height: 900,
+      minHeight: 550,
+      minWidth: 450,
       title: 'Antares',
       autoHideMenuBar: true,
       icon: path.join(__static, 'logo-32.png'),

src/renderer/App.vue

@@ -1,37 +1,51 @@
 <template>
    <div id="wrapper">
-      <!-- <TheHeader @toggleSidebar="toggleSidebar" /> -->
-      <!-- <TheSidebar /> -->
-      <div id="main-content">
+      <!-- <TheHeader /> -->
+      <TheSettingBar />
+      <TheExploreBar />
+      <div id="main-content" class="container">
          <!-- <BaseLoaderLayer
             id="main-loader"
             :is-loading="isLoading"
          /> -->
-         <QueryEditor v-model="query" />
+         <TheAppWelcome @newConn="showNewConnModal" />
       </div>
-      <!-- <TheFooter /> -->
+      <TheFooter />
+      <NewConnectionModal :is-opened="isNewConnModal" />
    </div>
 </template>
 
 <script>
-import QueryEditor from '@/components/QueryEditor';
+import { mapActions, mapState } from 'vuex';
+import TheSettingBar from '@/components/TheSettingBar';
+import TheExploreBar from '@/components/TheExploreBar';
+import TheFooter from '@/components/TheFooter';
+import TheAppWelcome from '@/components/TheAppWelcome';
+import NewConnectionModal from '@/components/NewConnectionModal';
 
 export default {
    name: 'App',
    components: {
-      QueryEditor
+      TheSettingBar,
+      TheExploreBar,
+      TheFooter,
+      TheAppWelcome,
+      NewConnectionModal
    },
    data () {
       return {
-         query: ''
       };
    },
    computed: {
-      isLoading () {
-         return this.$store.state.application.isLoading;
-      }
+      ...mapState({
+         isLoading: state => state.application.isLoading,
+         isNewConnModal: state => state.connections.isNewConnModal
+      })
    },
    methods: {
+      ...mapActions({
+         showNewConnModal: 'connections/showNewConnModal'
+      })
    }
 };
 </script>
@@ -40,6 +54,15 @@ export default {
    html,
    body{
       height: 100%;
-      background: #fff;
+   }
+
+   #wrapper{
+      display: flex;
+      height: 100vh;
+      position: relative;
+   }
+
+   #main-content{
+      /* background: #232524; */
    }
 </style>

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>

src/renderer/main.js

@@ -2,18 +2,15 @@
 
 import Vue from 'vue';
 
-import 'devicons/css/devicons.min.css';
 import 'material-design-icons/iconfont/material-icons.css';
 import '@/scss/main.scss';
 
 import App from '@/App.vue';
 import store from '@/store';
-import router from '@/routes';
 
 Vue.config.productionTip = false;
 
 new Vue({
    render: h => h(App),
-   store,
-   router
+   store
 }).$mount('#app');

src/renderer/routes/index.js

@@ -1,10 +0,0 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-
-Vue.use(Router);
-
-const router = new Router({
-   routes: []
-});
-
-export default router;

src/renderer/scss/_mdi-additions.scss

@@ -0,0 +1,16 @@
+
+.material-icons{// TODO: rewrite with rem
+   /* Rules for sizing the icon. */
+   &.md-18 { font-size: 18px; }
+   &.md-24 { font-size: 24px; }
+   &.md-36 { font-size: 36px; }
+   &.md-48 { font-size: 48px; }
+   
+   /* Rules for using icons as black on a light background. */
+   &.md-dark { color: rgba(0, 0, 0, 0.54); }
+   &.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+   
+   /* Rules for using icons as white on a dark background. */
+   &.md-light { color: rgba(255, 255, 255, 1); }
+   &.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
+}

src/renderer/scss/_variables.scss

@@ -0,0 +1,9 @@
+/*Colors*/
+$body-bg: #232524;
+$primary-color: #e36929;
+$bg-color: #232524;
+
+/*Sizes*/
+$settingbar-width: 4rem;
+$explorebar-width: 16rem;
+$footer-height: 1.5rem;

src/renderer/scss/main.scss

@@ -1 +1,3 @@
-@import "variables";
+@import "variables";
+@import "mdi-additions";
+@import "~spectre.css/src/spectre";

src/renderer/store/index.js

@@ -4,12 +4,14 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 
 import application from './modules/application.store';
+import connections from './modules/connections.store';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
    strict: true,
    modules: {
-      application
+      application,
+      connections
    }
 });

src/renderer/store/modules/connections.store.js

@@ -0,0 +1,26 @@
+'use strict';
+
+export default {
+   namespaced: true,
+   strict: true,
+   state: {
+      connections: [],
+      isNewConnModal: false
+   },
+   mutations: {
+      showNewConnModal (state) {
+         state.isNewConnModal = true;
+      },
+      hideNewConnModal (state) {
+         state.isNewConnModal = false;
+      }
+   },
+   actions: {
+      showNewConnModal ({ commit }) {
+         commit('showNewConnModal');
+      },
+      hideNewConnModal ({ commit }) {
+         commit('hideNewConnModal');
+      }
+   }
+};