fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

feat: tabs horizontal scroll with mouse wheel

Browse Source
This commit is contained in:
Fabio
2020-08-20 10:38:18 +02:00
parent d7ed00f4a3
commit 3a6ea76b93
2 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/renderer/components/Workspace.vue
View File

@ -2,7 +2,7 @@
<div v-show="isSelected" class="workspace column columns col-gapless"> <div v-show="isSelected" class="workspace column columns col-gapless">
<WorkspaceExploreBar :connection="connection" :is-selected="isSelected" /> <WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
<div v-if="workspace.connected" class="workspace-tabs column columns col-gapless"> <div v-if="workspace.connected" class="workspace-tabs column columns col-gapless">
<ul class="tab tab-block column col-12"> <ul ref="tabWrap" class="tab tab-block column col-12">
<li <li
v-if="workspace.breadcrumbs.table" v-if="workspace.breadcrumbs.table"
class="tab-item" class="tab-item"
@ -26,7 +26,7 @@
</a> </a>
</li> </li>
<li <li
v-for="(tab, key) of queryTabs" v-for="tab of queryTabs"
:key="tab.uid" :key="tab.uid"
class="tab-item" class="tab-item"
:class="{'active': selectedTab === tab.uid}" :class="{'active': selectedTab === tab.uid}"
@ -34,7 +34,7 @@
> >
<a> <a>
<span> <span>
Query #{{ key+1 }} Query #{{ tab.index }}
<span <span
v-if="queryTabs.length > 1" v-if="queryTabs.length > 1"
class="btn btn-clear" class="btn btn-clear"
@ -111,6 +111,14 @@ export default {
if (isInitiated) if (isInitiated)
this.connectWorkspace(this.connection); this.connectWorkspace(this.connection);
}, },
mounted () {
if (this.$refs.tabWrap) {
this.$refs.tabWrap.addEventListener('wheel', e => {
if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
else this.$refs.tabWrap.scrollLeft -= 50;
});
}
},
methods: { methods: {
...mapActions({ ...mapActions({
addWorkspace: 'workspaces/addWorkspace', addWorkspace: 'workspaces/addWorkspace',
@ -136,12 +144,21 @@ export default {
margin: 0; margin: 0;
.workspace-tabs { .workspace-tabs {
overflow: auto; overflow: hidden;
height: calc(100vh - #{$excluding-size}); height: calc(100vh - #{$excluding-size});
.tab-block { .tab-block {
background: $bg-color-light; background: $bg-color-light;
margin-top: 0; margin-top: 0;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
overflow: auto;
&::-webkit-scrollbar {
width: 2px;
height: 2px;
}
.tab-item { .tab-item {
max-width: 12rem; max-width: 12rem;
@ -163,6 +180,7 @@ export default {
&.tab-add { &.tab-add {
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
margin-top: 2px;
border: 0; border: 0;
} }

4
src/renderer/store/modules/workspaces.store.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
import Connection from '@/ipc-api/Connection'; import Connection from '@/ipc-api/Connection';
import { uidGen } from 'common/libs/uidGen'; import { uidGen } from 'common/libs/uidGen';
const tabIndex = [];
function remapStructure (structure) { // TODO: move to main process and add fields (for autocomplete purpose) function remapStructure (structure) { // TODO: move to main process and add fields (for autocomplete purpose)
const databases = structure.map(table => table.TABLE_SCHEMA) const databases = structure.map(table => table.TABLE_SCHEMA)
@ -63,8 +64,11 @@ export default {
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, breadcrumbs } : workspace); state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, breadcrumbs } : workspace);
}, },
NEW_TAB (state, uid) { NEW_TAB (state, uid) {
tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1;
const newTab = { const newTab = {
uid: uidGen('T'), uid: uidGen('T'),
index: tabIndex[uid],
selected: false, selected: false,
type: 'query', type: 'query',
fields: [], fields: [],