From cd42b65b9ec02624f9b30a4994c7bcffee4a7c03 Mon Sep 17 00:00:00 2001 From: Fabio Date: Fri, 5 Jun 2020 21:00:15 +0200 Subject: [PATCH] Additions --- src/main/ipc-handlers/connection.js | 24 +++--- src/main/models/InformationSchema.js | 9 ++- src/renderer/App.vue | 1 + src/renderer/components/QueryEditor.vue | 16 +++- src/renderer/components/TheSettingBar.vue | 78 +++++++++++++++---- src/renderer/components/Workspace.vue | 49 +++++++++--- .../components/WorkspaceConnectPanel.vue | 1 - .../components/WorkspaceExploreBar.vue | 13 +++- .../WorkspaceExploreBarDatabase.vue | 34 +++++++- src/renderer/scss/main.scss | 10 +-- .../store/modules/workspaces.store.js | 40 +++++++++- 11 files changed, 218 insertions(+), 57 deletions(-) diff --git a/src/main/ipc-handlers/connection.js b/src/main/ipc-handlers/connection.js index 429626d5..558e2d6d 100644 --- a/src/main/ipc-handlers/connection.js +++ b/src/main/ipc-handlers/connection.js @@ -7,16 +7,22 @@ const connections = {}; export default () => { ipcMain.handle('testConnection', async (event, conn) => { + const connection = knex({ + client: conn.client, + connection: { + host: conn.host, + port: +conn.port, + user: conn.user, + password: conn.password + }, + pool: { + min: 1, + max: 3 + } + }); + try { - await knex({ - client: conn.client, - connection: { - host: conn.host, - port: +conn.port, - user: conn.user, - password: conn.password - } - }).raw('SELECT 1+1 AS result'); + await InformationSchema.testConnection(connection); return { status: 'success' }; } diff --git a/src/main/models/InformationSchema.js b/src/main/models/InformationSchema.js index a64d0f79..720a1eeb 100644 --- a/src/main/models/InformationSchema.js +++ b/src/main/models/InformationSchema.js @@ -1,11 +1,16 @@ 'use strict'; export default class { + static testConnection (connection) { + return connection('TABLES') + .select({ result: 1 }) + .withSchema('information_schema'); + } + static getStructure (connection) { - return connection() + return connection('TABLES') .select('*') .withSchema('information_schema') - .from('TABLES') .orderBy(['TABLE_SCHEMA', 'TABLE_NAME'], 'asc'); } } diff --git a/src/renderer/App.vue b/src/renderer/App.vue index e88c8d8d..6970b3a4 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -82,6 +82,7 @@ export default { #window-content{ display: flex; position: relative; + overflow: hidden; } #main-content { diff --git a/src/renderer/components/QueryEditor.vue b/src/renderer/components/QueryEditor.vue index f5812505..3fcfe317 100644 --- a/src/renderer/components/QueryEditor.vue +++ b/src/renderer/components/QueryEditor.vue @@ -68,8 +68,22 @@ export default { }; - diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue index 464cc2b6..d07c0eb1 100644 --- a/src/renderer/components/TheSettingBar.vue +++ b/src/renderer/components/TheSettingBar.vue @@ -13,33 +13,32 @@ v-for="connection in connections" :key="connection.uid" draggable="true" - class="settingbar-element btn btn-link tooltip tooltip-right" + class="settingbar-element btn btn-link ex-tooltip" :class="{'selected': connection.uid === selectedWorkspace}" - :data-tooltip="`${getConnectionName(connection.uid)}`" @click="selectWorkspace(connection.uid)" @contextmenu.prevent="contextMenu($event, connection)" + @mouseover.self="tooltipPosition" > + {{ getConnectionName(connection.uid) }}
  • add + {{ $t('message.addConnection') }}
      • -
    • +
    • settings + {{ $t('word.settings') }}
    @@ -62,7 +61,8 @@ export default { dragElement: null, isContext: false, contextEvent: null, - contextConnection: {} + contextConnection: {}, + scale: 0 }; }, computed: { @@ -95,6 +95,11 @@ export default { }, workspaceName (connection) { return connection.ask ? '' : `${connection.user + '@'}${connection.host}:${connection.port}`; + }, + tooltipPosition (e) { + const el = e.target; + const fromTop = window.pageYOffset + el.getBoundingClientRect().top - (el.offsetHeight / 4); + el.querySelector('.ex-tooltip-content').style.top = `${fromTop}px`; } } }; @@ -113,6 +118,22 @@ export default { box-shadow: 0 0 1px 0px #000; z-index: 9; + .settingbar-top-elements{ + overflow-x: hidden; + overflow-y: overlay; + max-height: calc((100vh - 3.5rem) - #{$excluding-size}); + + &::-webkit-scrollbar { + width: 3px; + } + } + + .settingbar-bottom-elements{ + padding-top: .5rem; + background: $bg-color-light; + z-index: 1; + } + .settingbar-elements{ list-style: none; text-align: center; @@ -121,14 +142,16 @@ export default { margin: 0; .settingbar-element{ - height: initial; + height: $settingbar-width; width: 100%; - padding: 0; - padding: .3rem 0 0; margin: 0; border-left: 3px solid transparent; opacity: .5; transition: opacity .2s; + display: flex; + align-content: center; + justify-content: center; + flex-direction: column; &:hover{ opacity: 1; @@ -140,7 +163,6 @@ export default { } .settingbar-element-icon{ - margin-left: -3px; &.badge::after{ bottom: -10px; @@ -153,4 +175,32 @@ export default { } } + + .ex-tooltip{// Because both overflow-x: visible and overflow-y:auto are evil!!! + .ex-tooltip-content{ + z-index: 999; + visibility: hidden; + opacity: 0; + display:block; + position:absolute; + background-color:#feffe1; + text-align: center; + margin:.0 0 0 calc(#{$settingbar-width} - 5px); + left: 0; + padding: .2rem .4rem; + font-size: .7rem; + background: rgba(48,55,66,.95); + border-radius: .1rem; + color: #fff; + max-width: 320px; + pointer-events: none; + text-overflow: ellipsis; + transition: opacity .2s; + } + + &:hover .ex-tooltip-content{ + visibility: visible; + opacity: 1; + } + } diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue index 9a4878b3..6b20e653 100644 --- a/src/renderer/components/Workspace.vue +++ b/src/renderer/components/Workspace.vue @@ -1,8 +1,18 @@ @@ -11,15 +21,22 @@ import { mapGetters, mapActions } from 'vuex'; import Connection from '@/ipc-api/Connection'; import WorkspaceExploreBar from '@/components/WorkspaceExploreBar'; +import QueryEditor from '@/components/QueryEditor'; export default { name: 'Workspace', components: { - WorkspaceExploreBar + WorkspaceExploreBar, + QueryEditor }, props: { connection: Object }, + data () { + return { + query: '' + }; + }, computed: { ...mapGetters({ selectedWorkspace: 'workspaces/getSelected', @@ -30,10 +47,13 @@ export default { }, isSelected () { return this.selectedWorkspace === this.connection.uid; + }, + selectedTab () { + return this.workspace.tabs.filter(tab => tab.selected).uid || this.workspace.tabs[0].uid; } }, async created () { - this.addWorkspace(this.connection.uid); + await this.addWorkspace(this.connection.uid); const isInitiated = await Connection.checkConnection(this.connection.uid); if (isInitiated) this.connectWorkspace(this.connection); @@ -50,13 +70,22 @@ export default { diff --git a/src/renderer/components/WorkspaceConnectPanel.vue b/src/renderer/components/WorkspaceConnectPanel.vue index 7b3591e7..116fad75 100644 --- a/src/renderer/components/WorkspaceConnectPanel.vue +++ b/src/renderer/components/WorkspaceConnectPanel.vue @@ -79,6 +79,5 @@ export default { background: transparent; display: flex; flex-direction: column; - justify-content: center; } diff --git a/src/renderer/components/WorkspaceExploreBar.vue b/src/renderer/components/WorkspaceExploreBar.vue index d5905716..928a6788 100644 --- a/src/renderer/components/WorkspaceExploreBar.vue +++ b/src/renderer/components/WorkspaceExploreBar.vue @@ -22,12 +22,17 @@ >exit_to_app     - -
    + +
    @@ -178,7 +183,7 @@ export default { .workspace-explorebar-body{ width: 100%; height: calc((100vh - 30px) - #{$excluding-size}); - overflow: auto; + overflow: overlay; padding: 0 .1rem; } } diff --git a/src/renderer/components/WorkspaceExploreBarDatabase.vue b/src/renderer/components/WorkspaceExploreBarDatabase.vue index 9b822703..bffca12c 100644 --- a/src/renderer/components/WorkspaceExploreBarDatabase.vue +++ b/src/renderer/components/WorkspaceExploreBarDatabase.vue @@ -1,9 +1,13 @@ @@ -48,6 +70,12 @@ export default { display: block; text-overflow: ellipsis; } + + &:hover{ + color: $body-font-color; + background: rgba($color: #FFF, $alpha: .05); + border-radius: 2px; + } } .database-bables{ diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss index 27d27df1..52643b64 100644 --- a/src/renderer/scss/main.scss +++ b/src/renderer/scss/main.scss @@ -142,19 +142,11 @@ body{ } .menu{ - font-size: .6rem; + font-size: .7rem; .menu-item { + .menu-item{ margin-top: 0; } - - > a{ - - &:hover{ - color: $body-font-color; - background: rgba($color: #FFF, $alpha: .1); - } - } } } diff --git a/src/renderer/store/modules/workspaces.store.js b/src/renderer/store/modules/workspaces.store.js index e3d02e10..206a0388 100644 --- a/src/renderer/store/modules/workspaces.store.js +++ b/src/renderer/store/modules/workspaces.store.js @@ -1,12 +1,14 @@ 'use strict'; import Connection from '@/ipc-api/Connection'; +import { uidGen } from 'common/libs/utilities'; + function remapStructure (structure) { const databases = structure.map(table => table.TABLE_SCHEMA) .filter((value, index, self) => self.indexOf(value) === index); return databases.map(db => { return { - dbName: db, + name: db, tables: structure.filter(table => table.TABLE_SCHEMA === db) }; }); @@ -50,6 +52,25 @@ export default { }, ADD_WORKSPACE (state, workspace) { state.workspaces.push(workspace); + }, + CHANGE_BREADCRUMBS (state, { uid, breadcrumbs }) { + state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, breadcrumbs } : workspace); + }, + NEW_TAB (state, uid) { + const newTab = { + uid: uidGen(), + selected: false + }; + state.workspaces = state.workspaces.map(workspace => { + if (workspace.uid === uid) { + return { + ...workspace, + tabs: [...workspace.tabs, newTab] + }; + } + else + return workspace; + }); } }, actions: { @@ -80,18 +101,29 @@ export default { dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true }); } }, - async removeConnected ({ commit }, uid) { + removeConnected ({ commit }, uid) { Connection.disconnect(uid); commit('REMOVE_CONNECTED', uid); }, - addWorkspace ({ commit }, uid) { + addWorkspace ({ commit, dispatch, getters }, uid) { const workspace = { uid, connected: false, tabs: [], - structure: {} + structure: {}, + breadcrumbs: {} }; + commit('ADD_WORKSPACE', workspace); + + if (!getters.getWorkspace(uid).tabs.length) + dispatch('newTab', uid); + }, + changeBreadcrumbs ({ commit, getters }, payload) { + commit('CHANGE_BREADCRUMBS', { uid: getters.getSelected, breadcrumbs: payload }); + }, + newTab ({ commit }, uid) { + commit('NEW_TAB', uid); } } };