Connections sort

src/renderer/components/BaseContextMenu.vue

@@ -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>

src/renderer/components/TheSettingBar.vue

@@ -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">
-            <li
-               v-for="connection in connections"
-               :key="connection.uid"
-               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)"
-            >
-               <i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${connected.includes(connection.uid) ? 'badge' : ''}`" />
-            </li>
+            <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>