From ffc4464e784348a3ad0fa0a6577a720a0e8f1c21 Mon Sep 17 00:00:00 2001 From: Jonatan Heyman Date: Sun, 4 Aug 2024 17:12:17 +0200 Subject: [PATCH] Add ability to open/close folders in New Note dialog --- assets/icons/caret-down-white.svg | 1 + assets/icons/caret-down.svg | 1 + assets/icons/caret-right-white.svg | 1 + assets/icons/caret-right.svg | 1 + src/components/NewNote.vue | 5 ++++- src/components/folder-selector/FolderItem.vue | 20 ++++++++++++++---- .../folder-selector/FolderSelector.vue | 21 +++++++++++++++++-- 7 files changed, 43 insertions(+), 7 deletions(-) create mode 100644 assets/icons/caret-down-white.svg create mode 100644 assets/icons/caret-down.svg create mode 100644 assets/icons/caret-right-white.svg create mode 100644 assets/icons/caret-right.svg 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)" />