extern/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2025-01-06 05:58:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add ability to open/close folders in New Note dialog

Browse Source
This commit is contained in:
Jonatan Heyman 2024-08-04 17:12:17 +02:00
parent fdfe74ebf3
commit ffc4464e78
7 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/icons/caret-down-white.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><polyline fill="none" points="208 96 128 176 48 96" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 266 B

1
assets/icons/caret-down.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><polyline fill="none" points="208 96 128 176 48 96" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 266 B

1
assets/icons/caret-right-white.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><polyline fill="none" points="96 48 176 128 96 208" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 266 B

1
assets/icons/caret-right.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><polyline fill="none" points="96 48 176 128 96 208" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 266 B

5
src/components/NewNote.vue
View File

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

20
src/components/folder-selector/FolderItem.vue
View File

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

21
src/components/folder-selector/FolderSelector.vue
View File

@ -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
},
},
}
</script>
@ -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)"
/>
<NewFolderItem