diff --git a/assets/icons/caret-down-white.svg b/assets/icons/caret-down-white.svg
new file mode 100644
index 0000000..c134759
--- /dev/null
+++ b/assets/icons/caret-down-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/icons/caret-down.svg b/assets/icons/caret-down.svg
new file mode 100644
index 0000000..44d204d
--- /dev/null
+++ b/assets/icons/caret-down.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/icons/caret-right-white.svg b/assets/icons/caret-right-white.svg
new file mode 100644
index 0000000..b8fc0be
--- /dev/null
+++ b/assets/icons/caret-right-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/icons/caret-right.svg b/assets/icons/caret-right.svg
new file mode 100644
index 0000000..355d001
--- /dev/null
+++ b/assets/icons/caret-right.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/NewNote.vue b/src/components/NewNote.vue
index c348554..5058c1c 100644
--- a/src/components/NewNote.vue
+++ b/src/components/NewNote.vue
@@ -33,6 +33,7 @@
name: "Heynote Root",
path: "",
children: [],
+ open: true,
}
const getNodeFromList = (list, part) => list.find(node => node.name === part)
@@ -46,10 +47,12 @@
if (node) {
currentLevel = node
} else {
+ const currentPath = currentParts.join("/")
node = {
name: part,
children: [],
- path: currentParts.join("/"),
+ path: currentPath,
+ open: this.currentNotePath.startsWith(currentPath),
}
currentLevel.children.push(node)
currentLevel = node
diff --git a/src/components/folder-selector/FolderItem.vue b/src/components/folder-selector/FolderItem.vue
index f321095..7c9c975 100644
--- a/src/components/folder-selector/FolderItem.vue
+++ b/src/components/folder-selector/FolderItem.vue
@@ -5,6 +5,7 @@
level: Number,
selected: Boolean,
newFolder: Boolean,
+ open: Boolean,
},
watch: {
@@ -33,6 +34,7 @@
folder: true,
selected: this.selected,
new: this.newFolder,
+ open: this.open,
}
},
@@ -59,17 +61,27 @@
.folder
padding: 3px 6px
font-size: 13px
- padding-left: calc(6px + var(--indent-level) * 16px)
+ padding-left: calc(18px + var(--indent-level) * 16px)
display: flex
scroll-margin-top: 5px
scroll-margin-bottom: 5px
+ background-image: url('@/assets/icons/caret-right.svg')
+ background-size: 13px
+ background-repeat: no-repeat
+ background-position-y: 5px
+ background-position-x: calc(2px + var(--indent-level) * 16px)
&:hover
- background: #f1f1f1
+ background-color: #f1f1f1
+ &.open
+ background-image: url('@/assets/icons/caret-down.svg')
&.selected
- background: #48b57e
+ background-color: #48b57e
color: #fff
+ background-image: url('@/assets/icons/caret-right-white.svg')
+ &.open
+ background-image: url('@/assets/icons/caret-down-white.svg')
&:hover
- background: #40a773
+ background-color: #40a773
.new-folder
display: block
color: rgba(255,255,255, 0.9)
diff --git a/src/components/folder-selector/FolderSelector.vue b/src/components/folder-selector/FolderSelector.vue
index f1e4dbe..ea821a5 100644
--- a/src/components/folder-selector/FolderSelector.vue
+++ b/src/components/folder-selector/FolderSelector.vue
@@ -48,6 +48,7 @@
type: "folder",
createNewFolder: node.createNewFolder,
newFolder: node.newFolder,
+ open: node.open,
})
if (node.createNewFolder) {
items.push({
@@ -56,7 +57,7 @@
path: node.path,
})
}
- if (node.children) {
+ if (node.open && node.children) {
for (const child of node.children) {
getListItems(child, level + 1)
}
@@ -79,6 +80,14 @@
} else if (event.key === "ArrowUp") {
event.preventDefault()
this.selected = Math.max(this.selected - 1, 0)
+ } else if (event.key === "ArrowRight") {
+ event.preventDefault()
+ const node = this.getNode(this.listItems[this.selected].path)
+ node.open = true
+ } else if (event.key === "ArrowLeft") {
+ event.preventDefault()
+ const node = this.getNode(this.listItems[this.selected].path)
+ node.open = false
} else if (event.key === "+") {
event.preventDefault()
this.newFolderDialog(this.listItems[this.selected].path)
@@ -126,6 +135,7 @@
//console.log("Create new folder in", parentPath)
const node = this.getNode(parentPath)
node.createNewFolder = true
+ node.open = true
},
createNewFolder(parentPath, name) {
@@ -178,6 +188,12 @@
pageCount() {
return Math.max(1, Math.floor(this.$refs.container.clientHeight / 24) - 1)
},
+
+ folderClick(idx) {
+ const node = this.getNode(this.listItems[idx].path)
+ node.open = !node.open
+ this.selected = idx
+ },
},
}
@@ -201,7 +217,8 @@
:level="item.level"
:selected="idx === selected && !item.createNewFolder"
:newFolder="item.newFolder"
- @click="selected = idx"
+ :open="item.open"
+ @click="folderClick(idx)"
@new-folder="newFolderDialog(item.path)"
/>