From 8ded79017b1f233e7588894f37f461f71bef4a10 Mon Sep 17 00:00:00 2001 From: Fabio Date: Fri, 8 May 2020 18:02:18 +0200 Subject: [PATCH] Additions --- package-lock.json | 15 +-- package.json | 5 +- src/main/index.js | 6 +- src/renderer/App.vue | 47 +++++-- .../components/NewConnectionModal.vue | 49 +++++++ src/renderer/components/QueryEditor.vue | 3 + src/renderer/components/TheAppWelcome.vue | 35 +++++ src/renderer/components/TheExploreBar.vue | 26 ++++ src/renderer/components/TheFooter.vue | 55 ++++++++ src/renderer/components/TheSettingBar.vue | 57 ++++++++ src/renderer/main.js | 5 +- src/renderer/routes/index.js | 10 -- src/renderer/scss/_mdi-additions.scss | 16 +++ src/renderer/scss/_variables.scss | 9 ++ src/renderer/scss/main.scss | 4 +- src/renderer/store/index.js | 4 +- .../store/modules/connections.store.js | 26 ++++ static/logo.svg | 123 +----------------- static/svg/database.svg | 1 + static/svg/mariadb.svg | 2 +- static/svg/msql_server.svg | 7 +- static/svg/mysql.svg | 7 +- static/svg/oracle.svg | 2 +- static/svg/oracledb.svg | 8 +- static/svg/postgresql.svg | 7 +- static/svg/sqllite.svg | 7 +- webpack.config.js | 17 ++- 27 files changed, 353 insertions(+), 200 deletions(-) create mode 100644 src/renderer/components/NewConnectionModal.vue create mode 100644 src/renderer/components/TheAppWelcome.vue create mode 100644 src/renderer/components/TheExploreBar.vue create mode 100644 src/renderer/components/TheFooter.vue create mode 100644 src/renderer/components/TheSettingBar.vue delete mode 100644 src/renderer/routes/index.js create mode 100644 src/renderer/scss/_mdi-additions.scss create mode 100644 src/renderer/store/modules/connections.store.js create mode 100644 static/svg/database.svg diff --git a/package-lock.json b/package-lock.json index a82647db..5c0b5ca6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3545,11 +3545,6 @@ "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==", "dev": true }, - "devicons": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/devicons/-/devicons-1.8.0.tgz", - "integrity": "sha1-33JaiwrCzOJMdLeCwvFPi3ODLC0=" - }, "diffie-hellman": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", @@ -11240,6 +11235,11 @@ } } }, + "spectre.css": { + "version": "0.5.8", + "resolved": "https://registry.npmjs.org/spectre.css/-/spectre.css-0.5.8.tgz", + "integrity": "sha512-3N4WocWY+Dl6b3e5v3nsZYyp+VSDcBfGDzyyHw/H78ie9BoAhHkxmrhLxo9y8RadxYzVrPjfPdlev3hXEUzR2w==" + }, "split-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", @@ -12420,11 +12420,6 @@ "vue-style-loader": "^4.1.0" } }, - "vue-router": { - "version": "3.1.6", - "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz", - "integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA==" - }, "vue-style-loader": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", diff --git a/package.json b/package.json index a75e7b14..98222a7d 100644 --- a/package.json +++ b/package.json @@ -27,23 +27,22 @@ }, "dependencies": { "codemirror": "^5.53.2", - "devicons": "^1.8.0", "knex": "^0.21.1", "material-design-icons": "^3.0.1", "source-map-support": "^0.5.16", + "spectre.css": "^0.5.8", "vue-i18n": "^8.17.4", - "vue-router": "^3.1.6", "vuex": "^3.3.0", "vuex-persist": "^2.2.0" }, "devDependencies": { + "babel-eslint": "^10.1.0", "electron": "^8.2.4", "electron-builder": "^22.4.1", "electron-devtools-installer": "^3.0.0", "electron-webpack": "^2.8.2", "electron-webpack-vue": "^2.4.0", "eslint": "^6.8.0", - "babel-eslint": "^10.1.0", "eslint-config-standard": "^14.1.1", "eslint-plugin-import": "^2.20.1", "eslint-plugin-node": "^11.1.0", diff --git a/src/main/index.js b/src/main/index.js index 1e61fb9c..3b839fcc 100644 --- a/src/main/index.js +++ b/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'), diff --git a/src/renderer/App.vue b/src/renderer/App.vue index 585bd26a..088a364f 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -1,37 +1,51 @@ @@ -40,6 +54,15 @@ export default { html, body{ height: 100%; - background: #fff; + } + + #wrapper{ + display: flex; + height: 100vh; + position: relative; + } + + #main-content{ + /* background: #232524; */ } diff --git a/src/renderer/components/NewConnectionModal.vue b/src/renderer/components/NewConnectionModal.vue new file mode 100644 index 00000000..12a6972d --- /dev/null +++ b/src/renderer/components/NewConnectionModal.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/src/renderer/components/QueryEditor.vue b/src/renderer/components/QueryEditor.vue index 07144065..f5812505 100644 --- a/src/renderer/components/QueryEditor.vue +++ b/src/renderer/components/QueryEditor.vue @@ -69,4 +69,7 @@ export default { diff --git a/src/renderer/components/TheAppWelcome.vue b/src/renderer/components/TheAppWelcome.vue new file mode 100644 index 00000000..7c106328 --- /dev/null +++ b/src/renderer/components/TheAppWelcome.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/src/renderer/components/TheExploreBar.vue b/src/renderer/components/TheExploreBar.vue new file mode 100644 index 00000000..545cadcd --- /dev/null +++ b/src/renderer/components/TheExploreBar.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/renderer/components/TheFooter.vue b/src/renderer/components/TheFooter.vue new file mode 100644 index 00000000..426a3641 --- /dev/null +++ b/src/renderer/components/TheFooter.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue new file mode 100644 index 00000000..b224829d --- /dev/null +++ b/src/renderer/components/TheSettingBar.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/src/renderer/main.js b/src/renderer/main.js index 914599eb..f72da336 100644 --- a/src/renderer/main.js +++ b/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'); diff --git a/src/renderer/routes/index.js b/src/renderer/routes/index.js deleted file mode 100644 index 4ef81326..00000000 --- a/src/renderer/routes/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import Vue from 'vue'; -import Router from 'vue-router'; - -Vue.use(Router); - -const router = new Router({ - routes: [] -}); - -export default router; diff --git a/src/renderer/scss/_mdi-additions.scss b/src/renderer/scss/_mdi-additions.scss new file mode 100644 index 00000000..268e0444 --- /dev/null +++ b/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); } +} \ No newline at end of file diff --git a/src/renderer/scss/_variables.scss b/src/renderer/scss/_variables.scss index e69de29b..e46c2b44 100644 --- a/src/renderer/scss/_variables.scss +++ b/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; \ No newline at end of file diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss index 3e2a877c..8ffb0fb1 100644 --- a/src/renderer/scss/main.scss +++ b/src/renderer/scss/main.scss @@ -1 +1,3 @@ -@import "variables"; \ No newline at end of file +@import "variables"; +@import "mdi-additions"; +@import "~spectre.css/src/spectre"; \ No newline at end of file diff --git a/src/renderer/store/index.js b/src/renderer/store/index.js index ce4a2161..01326bbf 100644 --- a/src/renderer/store/index.js +++ b/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 } }); diff --git a/src/renderer/store/modules/connections.store.js b/src/renderer/store/modules/connections.store.js new file mode 100644 index 00000000..dd87d822 --- /dev/null +++ b/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'); + } + } +}; diff --git a/static/logo.svg b/static/logo.svg index 0d380672..da443bd3 100644 --- a/static/logo.svg +++ b/static/logo.svg @@ -1,122 +1 @@ - - - - - - - - image/svg+xml - - - - - - - - - - - - - + \ No newline at end of file diff --git a/static/svg/database.svg b/static/svg/database.svg new file mode 100644 index 00000000..84254e01 --- /dev/null +++ b/static/svg/database.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svg/mariadb.svg b/static/svg/mariadb.svg index d4af9494..263a6e2e 100644 --- a/static/svg/mariadb.svg +++ b/static/svg/mariadb.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/svg/msql_server.svg b/static/svg/msql_server.svg index 9531f951..abae5ef2 100644 --- a/static/svg/msql_server.svg +++ b/static/svg/msql_server.svg @@ -1,6 +1 @@ - - - - - - + \ No newline at end of file diff --git a/static/svg/mysql.svg b/static/svg/mysql.svg index 4594e04d..e6bbcd7a 100644 --- a/static/svg/mysql.svg +++ b/static/svg/mysql.svg @@ -1,6 +1 @@ - - - - - - + \ No newline at end of file diff --git a/static/svg/oracle.svg b/static/svg/oracle.svg index bd03c578..7f70e106 100644 --- a/static/svg/oracle.svg +++ b/static/svg/oracle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/svg/oracledb.svg b/static/svg/oracledb.svg index 2e2c592d..eb353c53 100644 --- a/static/svg/oracledb.svg +++ b/static/svg/oracledb.svg @@ -1,7 +1 @@ - - - - - Svg Vector Icons : http://www.onlinewebfonts.com/icon - - \ No newline at end of file + \ No newline at end of file diff --git a/static/svg/postgresql.svg b/static/svg/postgresql.svg index d6d83b62..580df607 100644 --- a/static/svg/postgresql.svg +++ b/static/svg/postgresql.svg @@ -1,6 +1 @@ - - - - - - + \ No newline at end of file diff --git a/static/svg/sqllite.svg b/static/svg/sqllite.svg index e159d53e..4ce361b9 100644 --- a/static/svg/sqllite.svg +++ b/static/svg/sqllite.svg @@ -1,6 +1 @@ - - - - - - + \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 533a25bd..98ae9af6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,17 @@ module.exports = { - plugins: [ - ] + module: { + rules: [ + { + test: /\.scss$/, + use: [ + { + loader: 'sass-loader', + options: { + prependData: '@import "@/scss/_variables.scss";' + } + } + ] + } + ] + } };