1
1
mirror of https://github.com/Fabio286/antares.git synced 2025-04-24 23:08:42 +02:00

fix: issue with tabs horizontal scroll with wheel

This commit is contained in:
Fabio 2020-10-26 09:28:29 +01:00
parent a0b96aa06c
commit c393f86947
2 changed files with 20 additions and 5 deletions

View File

@ -2,7 +2,11 @@
<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 ref="tabWrap" class="tab tab-block column col-12"> <ul
id="tabWrap"
ref="tabWrap"
class="tab tab-block column col-12"
>
<li class="tab-item"> <li class="tab-item">
<a class="tab-link workspace-tools-link"> <a class="tab-link workspace-tools-link">
<i class="mdi mdi-24px mdi-tools" /> <i class="mdi mdi-24px mdi-tools" />
@ -36,7 +40,7 @@
class="tab-item" class="tab-item"
:class="{'active': selectedTab === tab.uid}" :class="{'active': selectedTab === tab.uid}"
@click="selectTab({uid: workspace.uid, tab: tab.uid})" @click="selectTab({uid: workspace.uid, tab: tab.uid})"
@mousedown.middle="closeTab(tab.uid)" @mouseup.middle="closeTab(tab.uid)"
> >
<a class="tab-link"> <a class="tab-link">
<i class="mdi mdi-18px mdi-code-tags mr-1" /> <i class="mdi mdi-18px mdi-code-tags mr-1" />
@ -101,6 +105,11 @@ export default {
props: { props: {
connection: Object connection: Object
}, },
data () {
return {
hasWheelEvent: false
};
},
computed: { computed: {
...mapGetters({ ...mapGetters({
selectedWorkspace: 'workspaces/getSelected', selectedWorkspace: 'workspaces/getSelected',
@ -144,6 +153,14 @@ export default {
}), }),
addTab () { addTab () {
this.newTab(this.connection.uid); this.newTab(this.connection.uid);
if (!this.hasWheelEvent) {
this.$refs.tabWrap.addEventListener('wheel', e => {
if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
else this.$refs.tabWrap.scrollLeft -= 50;
});
this.hasWheelEvent = true;
}
}, },
closeTab (tUid) { closeTab (tUid) {
if (this.queryTabs.length === 1) return; if (this.queryTabs.length === 1) return;

View File

@ -3,9 +3,7 @@
<div class="workspace-query-runner column col-12"> <div class="workspace-query-runner column col-12">
<div class="workspace-query-runner-footer"> <div class="workspace-query-runner-footer">
<div class="workspace-query-buttons"> <div class="workspace-query-buttons">
<button <button class="btn btn-primary btn-sm">
class="btn btn-primary btn-sm"
>
<span>{{ $t('word.save') }}</span> <span>{{ $t('word.save') }}</span>
<i class="mdi mdi-24px mdi-content-save ml-1" /> <i class="mdi mdi-24px mdi-content-save ml-1" />
</button> </button>