mirror of
https://github.com/Fabio286/antares.git
synced 2025-06-05 21:59:22 +02:00
Connections sort
This commit is contained in:
18
package-lock.json
generated
18
package-lock.json
generated
@ -11273,6 +11273,11 @@
|
||||
"is-plain-obj": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"sortablejs": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
|
||||
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
|
||||
},
|
||||
"source-list-map": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
|
||||
@ -12554,6 +12559,11 @@
|
||||
"integrity": "sha512-oEqYpXKaFN+TaXU+mRLEx8dX0ah85aAJEe61mpdoUrq0Bhe/6sWhyZX1JjMQLhVsHAkncyhedhmCdDVSasUtDw==",
|
||||
"dev": true
|
||||
},
|
||||
"vue-click-outside": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.1.0.tgz",
|
||||
"integrity": "sha512-pNyvAA9mRXJwPHlHJyjMb4IONSc7khS5lxGcMyE2EIKgNMAO279PWM9Hyq0d5J4FkiSRdmFLwnbjDd5UtPizHQ=="
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",
|
||||
@ -12631,6 +12641,14 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"vuedraggable": {
|
||||
"version": "2.23.2",
|
||||
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz",
|
||||
"integrity": "sha512-PgHCjUpxEAEZJq36ys49HfQmXglattf/7ofOzUrW2/rRdG7tu6fK84ir14t1jYv4kdXewTEa2ieKEAhhEMdwkQ==",
|
||||
"requires": {
|
||||
"sortablejs": "^1.10.1"
|
||||
}
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.4.0.tgz",
|
||||
|
||||
@ -35,7 +35,9 @@
|
||||
"pg": "^8.2.1",
|
||||
"source-map-support": "^0.5.16",
|
||||
"spectre.css": "^0.5.8",
|
||||
"vue-click-outside": "^1.1.0",
|
||||
"vue-i18n": "^8.17.7",
|
||||
"vuedraggable": "^2.23.2",
|
||||
"vuex": "^3.4.0",
|
||||
"vuex-persist": "^2.2.0"
|
||||
},
|
||||
|
||||
94
src/renderer/components/BaseContextMenu.vue
Normal file
94
src/renderer/components/BaseContextMenu.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="context">
|
||||
<!-- <a
|
||||
class="context-overlay c-hand"
|
||||
@click="$emit('close')"
|
||||
@contextmenu="$emit('close')"
|
||||
/> -->
|
||||
<div
|
||||
v-click-outside="close"
|
||||
class="context-container"
|
||||
:style="position"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ClickOutside from 'vue-click-outside';
|
||||
|
||||
export default {
|
||||
name: 'BaseContextMenu',
|
||||
directives: {
|
||||
ClickOutside
|
||||
},
|
||||
props: {
|
||||
contextEvent: MouseEvent
|
||||
},
|
||||
computed: {
|
||||
position () {
|
||||
return {
|
||||
top: this.contextEvent.clientY + 'px',
|
||||
left: this.contextEvent.clientX + 'px'
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.$emit('close');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.context{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 400;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding: 0.4rem;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
|
||||
.context-container{
|
||||
max-width: 150px;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 1px 1px 0px #000;
|
||||
padding: 0;
|
||||
background: #1d1d1d;
|
||||
border-radius: 0.1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 75vh;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
pointer-events: initial;
|
||||
|
||||
.context-element{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.context-overlay{
|
||||
background: transparent;
|
||||
bottom: 0;
|
||||
cursor: default;
|
||||
display: block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,17 +1,33 @@
|
||||
<template>
|
||||
<div id="settingbar">
|
||||
<div class="settingbar-top-elements">
|
||||
<BaseContextMenu
|
||||
v-if="isContext"
|
||||
:context-event="contextEvent"
|
||||
@close="isContext = false"
|
||||
>
|
||||
<div class="context-element">
|
||||
<i class="material-icons md-18 text-light pr-1">edit</i> Edit
|
||||
</div>
|
||||
<div class="context-element">
|
||||
<i class="material-icons md-18 text-light pr-1">delete</i> Delete
|
||||
</div>
|
||||
</BaseContextMenu>
|
||||
<ul class="settingbar-elements">
|
||||
<draggable v-model="connections">
|
||||
<li
|
||||
v-for="connection in connections"
|
||||
:key="connection.uid"
|
||||
draggable="true"
|
||||
class="settingbar-element btn btn-link tooltip tooltip-right"
|
||||
:class="{'selected': connection.uid === selectedWorkspace}"
|
||||
:data-tooltip="`${connection.user}@${connection.host}:${connection.port}`"
|
||||
@click="selectWorkspace(connection.uid)"
|
||||
@contextmenu.prevent="contextMenu($event)"
|
||||
>
|
||||
<i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${connected.includes(connection.uid) ? 'badge' : ''}`" />
|
||||
</li>
|
||||
</draggable>
|
||||
<li
|
||||
class="settingbar-element btn btn-link tooltip tooltip-right pt-3"
|
||||
data-tooltip="Add connection"
|
||||
@ -34,21 +50,47 @@
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
import draggable from 'vuedraggable';
|
||||
import BaseContextMenu from '@/components/BaseContextMenu';
|
||||
|
||||
export default {
|
||||
name: 'TheSettingBar',
|
||||
components: {
|
||||
draggable,
|
||||
BaseContextMenu
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dragElement: null,
|
||||
isContext: false,
|
||||
contextEvent: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
connections: 'connections/getConnections',
|
||||
getConnections: 'connections/getConnections',
|
||||
connected: 'workspaces/getConnected',
|
||||
selectedWorkspace: 'workspaces/getSelected'
|
||||
})
|
||||
}),
|
||||
connections: {
|
||||
get () {
|
||||
return this.getConnections;
|
||||
},
|
||||
set (value) {
|
||||
this.updateConnections(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
updateConnections: 'connections/updateConnections',
|
||||
showNewConnModal: 'connections/showNewConnModal',
|
||||
selectWorkspace: 'workspaces/selectWorkspace'
|
||||
})
|
||||
}),
|
||||
contextMenu (event) {
|
||||
this.contextEvent = event;
|
||||
this.isContext = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -15,6 +15,9 @@ export default {
|
||||
ADD_CONNECTION (state, connection) {
|
||||
state.connections.push(connection);
|
||||
},
|
||||
UPDATE_CONNECTIONS (state, connections) {
|
||||
state.connections = connections;
|
||||
},
|
||||
SHOW_NEW_CONNECTION_MODAL (state) {
|
||||
state.is_new_modal = true;
|
||||
},
|
||||
@ -26,6 +29,9 @@ export default {
|
||||
addConnection ({ commit }, connection) {
|
||||
commit('ADD_CONNECTION', connection);
|
||||
},
|
||||
updateConnections ({ commit }, connections) {
|
||||
commit('UPDATE_CONNECTIONS', connections);
|
||||
},
|
||||
// Modals
|
||||
showNewConnModal ({ commit }) {
|
||||
commit('SHOW_NEW_CONNECTION_MODAL');
|
||||
|
||||
Reference in New Issue
Block a user