@@ -33,13 +41,13 @@
{{ getConnectionName(element) }}
@@ -50,6 +58,7 @@
class="drag-area"
:class="[{'folder-preview': coveredElement === folder.uid && draggedElement !== coveredElement}]"
:list="dummyNested"
+ :swap-threshold="1"
@dragenter="emit('covered')"
@dragleave="emit('uncovered')"
@change="addIntoFolder"
@@ -73,11 +82,17 @@ const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
const { getWorkspace } = workspacesStore;
const { getConnectionByUid, getConnectionName, addToFolder } = connectionsStore;
+const foldersOpened = JSON.parse(localStorage.getItem('opened-folders')) || [];
+
const props = defineProps({
folder: {
type: Object as PropType
,
required: true
},
+ folderDrag: {
+ type: Boolean,
+ default: false
+ },
draggedElement: {
type: [String, Boolean] as PropType,
required: true
@@ -88,12 +103,14 @@ const props = defineProps({
}
});
-const emit = defineEmits(['covered', 'uncovered', 'select-workspace', 'folder-sort']);
+const emit = defineEmits(['context', 'covered', 'uncovered', 'select-workspace', 'folder-sort', 'folder-drag']);
-const isOpen = ref(false);
+const isOpen = ref(foldersOpened.includes(props.folder.uid));
const localList = ref(props.folder.connections);
const dummyNested = ref([]);
+const hasSelectedInside = computed(() => localList.value.includes(selectedWorkspace.value));
+
const foldersUid = computed(() => folders.value.reduce((acc, curr) => {
acc.push(curr.uid);
return acc;
@@ -127,17 +144,57 @@ const getStatusBadge = (uid: string) => {
}
};
+const openFolder = () => {
+ isOpen.value = true;
+ const opened: string[] = JSON.parse(localStorage.getItem('opened-folders')) || [];
+ opened.push(props.folder.uid);
+ localStorage.setItem('opened-folders', JSON.stringify(opened));
+};
+
+const closeFolder = () => {
+ isOpen.value = false;
+ let opened: string[] = JSON.parse(localStorage.getItem('opened-folders')) || [];
+ opened = opened.filter(uid => uid !== props.folder.uid);
+ localStorage.setItem('opened-folders', JSON.stringify(opened));
+};
+
+const dragStart = () => {
+ emit('folder-drag', true);
+};
+
+const dragStop = () => {
+ emit('folder-drag', false);
+};
+
watch(() => dummyNested.value.length, () => {
dummyNested.value = [];
});
-
-watch(localList, () => {
- emit('folder-sort');
-}, { deep: true });
-
diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index f9961f1e..41375c32 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -23,7 +23,9 @@
:title="t('message.allConnections')"
@click="emit('show-connections-modal')"
>
-
+
+
+
-
+
+
+
@@ -164,6 +168,10 @@ watch(selectedWorkspace, (newVal, oldVal) => {
padding: 0;
margin: 0;
+ li {
+ margin: 0;
+ }
+
.settingbar-element {
height: $settingbar-width;
width: 100%;
@@ -172,7 +180,7 @@ watch(selectedWorkspace, (newVal, oldVal) => {
transition: opacity 0.2s;
display: flex;
align-items: center;
- justify-content: flex-start;
+ justify-content: center;
border-radius: 0;
padding: 0;
position: relative;
@@ -185,7 +193,7 @@ watch(selectedWorkspace, (newVal, oldVal) => {
opacity: 1;
&::before {
- height: $settingbar-width;
+ height: calc(#{$settingbar-width} - 0.4rem);
}
}
@@ -194,53 +202,56 @@ watch(selectedWorkspace, (newVal, oldVal) => {
height: 0;
width: 3px;
transition: height 0.2s;
- background-color: $primary-color;
+ background-color: rgba($color: #fff, $alpha: 0.8);
border-radius: $border-radius;
}
- .settingbar-element-icon {
- margin: 0 auto;
+ .settingbar-element-icon-wrapper{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
- &.badge::after {
- top: 5px;
- right: -4px;
- position: absolute;
+ .settingbar-element-icon {
+ &.badge::after {
+ top: 10px;
+ right: -6px;
+ position: absolute;
+ }
+
+ &.badge-update::after {
+ bottom: initial;
+ }
}
- &.badge-update::after {
- bottom: initial;
+ .settingbar-element-name {
+ font-size: 65%;
+ max-width: 90%;
+ font-style: normal;
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ width: calc($settingbar-width - 15px);
+ line-height: 1.1;
+ color: rgba($body-font-color-dark, 0.8);
+ text-align: center;
}
- }
- .settingbar-element-name {
- font-size: 65%;
- bottom: 5px;
- left: 7px;
- position: absolute;
- font-style: normal;
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- width: calc($settingbar-width - 15px);
- text-align: left;
- line-height: 1.1;
- color: rgba($body-font-color-dark, 0.8);
- text-align: center;
- }
+ .settingbar-element-pin {// <- Dead
+ margin: 0 auto;
- .settingbar-element-pin {
- margin: 0 auto;
-
- &::before {
- font: normal normal normal 14px/1 "Material Design Icons";
- content: "\F0403";
- color: $body-font-color-dark;
- transform: rotate(45deg);
- opacity: 0.25;
- top: -8px;
- left: -10px;
- position: absolute;
+ &::before {
+ font: normal normal normal 14px/1 "Material Design Icons";
+ content: "\F0403";
+ color: $body-font-color-dark;
+ transform: rotate(45deg);
+ opacity: 0.25;
+ top: -8px;
+ left: -10px;
+ position: absolute;
+ }
}
}
}
diff --git a/src/renderer/stores/connections.ts b/src/renderer/stores/connections.ts
index 390a6e99..63b40953 100644
--- a/src/renderer/stores/connections.ts
+++ b/src/renderer/stores/connections.ts
@@ -132,21 +132,32 @@ export const useConnectionsStore = defineStore('connections', {
return acc;
}, []);
- if (!invalidElements.length) return;
+ if (invalidElements.length) {
+ invalidElements.forEach(el => {
+ let connIndex = connections.findIndex(conn => conn.uid === el.uid);
+ const conn = connections[connIndex];
- invalidElements.forEach(el => {
- const connIndex = connections.findIndex(conn => conn.uid === el.uid);
- const conn = connections[connIndex];
+ if (connIndex === -1) return;
- if (connIndex === -1) return;
+ connections.splice(el.index, 1, { // Move to new position
+ isFolder: false,
+ client: conn.client,
+ uid: conn.uid
+ });
- connections.splice(connIndex, 1);// Delete olt object
- connections.splice(el.index, 1, { // Move to new position
- isFolder: false,
- client: conn.client,
- uid: conn.uid
+ connIndex = connections.findIndex(conn => conn.uid === el.uid);
+ connections.splice(connIndex, 1);// Delete old object
});
- });
+ }
+
+ // Clear empty folders
+ const emptyFolders = connections.reduce