mirror of
https://github.com/heyman/heynote.git
synced 2025-02-25 14:42:10 +01:00
Add "Create new..." item to the note selector dialog
This commit is contained in:
Jonatan Heyman
parent
9c057b120a
commit
fe6a410e95
@ -24,7 +24,16 @@
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
if (!!this.createNoteParams.name) {
|
||||
this.name = this.createNoteParams.name
|
||||
this.$refs.nameInput.focus()
|
||||
this.$nextTick(() => {
|
||||
this.$refs.nameInput.select()
|
||||
})
|
||||
} else {
|
||||
this.$refs.nameInput.focus()
|
||||
}
|
||||
|
||||
this.updateNotes()
|
||||
|
||||
// build directory tree
|
||||
@ -67,7 +76,7 @@
|
||||
...mapState(useNotesStore, [
|
||||
"notes",
|
||||
"currentNotePath",
|
||||
"createNoteMode",
|
||||
"createNoteParams",
|
||||
]),
|
||||
|
||||
currentNoteDirectory() {
|
||||
@ -82,7 +91,7 @@
|
||||
},
|
||||
|
||||
dialogTitle() {
|
||||
return this.createNoteMode === "currentBlock" ? "New Note from Block" : "New Note"
|
||||
return this.createNoteParams.mode === "currentBlock" ? "New Note from Block" : "New Note"
|
||||
},
|
||||
},
|
||||
|
||||
@ -147,12 +156,12 @@
|
||||
return
|
||||
}
|
||||
console.log("Creating note", path)
|
||||
if (this.createNoteMode === "currentBlock") {
|
||||
if (this.createNoteParams.mode === "currentBlock") {
|
||||
this.createNewNoteFromActiveBlock(path, this.name)
|
||||
} else if (this.createNoteMode === "new") {
|
||||
} else if (this.createNoteParams.mode === "new") {
|
||||
this.createNewNote(path, this.name)
|
||||
} else {
|
||||
throw new Error("Unknown createNoteMode: " + this.createNoteMode)
|
||||
throw new Error("Unknown createNote Mode: " + this.createNoteParams.mode)
|
||||
}
|
||||
|
||||
this.$emit("close")
|
||||
|
||||
@ -60,13 +60,15 @@
|
||||
},
|
||||
|
||||
filteredItems() {
|
||||
let items
|
||||
if (this.filter === "") {
|
||||
return this.orderedItems
|
||||
items = this.orderedItems
|
||||
|
||||
} else {
|
||||
const searchResults = fuzzysort.go(this.filter, this.items, {
|
||||
keys: ["name", "folder"],
|
||||
})
|
||||
return searchResults.map((result) => {
|
||||
items = searchResults.map((result) => {
|
||||
const obj = {...result.obj}
|
||||
const nameHighlight = result[0].highlight("<b>", "</b>")
|
||||
const folderHighlight = result[1].highlight("<b>", "</b>")
|
||||
@ -75,6 +77,15 @@
|
||||
return obj
|
||||
})
|
||||
}
|
||||
|
||||
const newNoteItem = {
|
||||
name: "Create new…",
|
||||
createNew:true,
|
||||
}
|
||||
return [
|
||||
...items,
|
||||
newNoteItem,
|
||||
]
|
||||
},
|
||||
},
|
||||
|
||||
@ -83,6 +94,7 @@
|
||||
"updateNotes",
|
||||
"editNote",
|
||||
"deleteNote",
|
||||
"openCreateNote",
|
||||
]),
|
||||
|
||||
buildItems() {
|
||||
@ -99,7 +111,6 @@
|
||||
|
||||
onKeydown(event) {
|
||||
if (event.key === "Escape") {
|
||||
console.log("escape")
|
||||
event.preventDefault()
|
||||
if (this.actionButton !== 0) {
|
||||
this.hideActionButtons()
|
||||
@ -113,7 +124,7 @@
|
||||
return
|
||||
}
|
||||
|
||||
const path = this.filteredItems[this.selected].path
|
||||
const item = this.filteredItems[this.selected]
|
||||
if (event.key === "ArrowDown") {
|
||||
if (this.selected === this.filteredItems.length - 1) {
|
||||
this.selected = 0
|
||||
@ -121,11 +132,9 @@
|
||||
this.selected = Math.min(this.selected + 1, this.filteredItems.length - 1)
|
||||
}
|
||||
event.preventDefault()
|
||||
if (this.selected === this.filteredItems.length - 1) {
|
||||
this.$refs.container.scrollIntoView({block: "end"})
|
||||
} else {
|
||||
this.$refs.item[this.selected].scrollIntoView({block: "nearest"})
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.container.querySelector(".selected").scrollIntoView({block: "nearest"})
|
||||
})
|
||||
this.actionButton = 0
|
||||
} else if (event.key === "ArrowUp") {
|
||||
if (this.selected === 0) {
|
||||
@ -134,28 +143,32 @@
|
||||
this.selected = Math.max(this.selected - 1, 0)
|
||||
}
|
||||
event.preventDefault()
|
||||
if (this.selected === 0) {
|
||||
this.$refs.container.scrollIntoView({block: "start"})
|
||||
} else {
|
||||
this.$refs.item[this.selected].scrollIntoView({block: "nearest"})
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.container.querySelector(".selected").scrollIntoView({block: "nearest"})
|
||||
})
|
||||
this.actionButton = 0
|
||||
} else if (event.key === "ArrowRight" && path !== SCRATCH_FILE_NAME) {
|
||||
} else if (event.key === "ArrowRight" && this.itemHasActionButtons(item)) {
|
||||
event.preventDefault()
|
||||
this.actionButton = Math.min(2, this.actionButton + 1)
|
||||
} else if (event.key === "ArrowLeft" && path !== SCRATCH_FILE_NAME) {
|
||||
} else if (event.key === "ArrowLeft" && this.itemHasActionButtons(item)) {
|
||||
event.preventDefault()
|
||||
this.actionButton = Math.max(0, this.actionButton - 1)
|
||||
this.deleteConfirm = false
|
||||
} else if (event.key === "Enter") {
|
||||
event.preventDefault()
|
||||
if (this.actionButton === 1) {
|
||||
console.log("edit file:", path)
|
||||
this.editNote(path)
|
||||
} else if (this.actionButton === 2) {
|
||||
this.deleteConfirmNote(path)
|
||||
if (item.createNew) {
|
||||
if (this.filteredItems.length === 1) {
|
||||
this.openCreateNote("new", this.filter)
|
||||
} else {
|
||||
this.selectItem(path)
|
||||
this.openCreateNote("new", "")
|
||||
}
|
||||
} else if (this.actionButton === 1) {
|
||||
//console.log("edit file:", path)
|
||||
this.editNote(item.path)
|
||||
} else if (this.actionButton === 2) {
|
||||
this.deleteConfirmNote(item.path)
|
||||
} else {
|
||||
this.selectItem(item.path)
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -164,6 +177,10 @@
|
||||
this.$emit("openNote", path)
|
||||
},
|
||||
|
||||
itemHasActionButtons(item) {
|
||||
return !item.createNew && item.path !== SCRATCH_FILE_NAME
|
||||
},
|
||||
|
||||
onInput(event) {
|
||||
// reset selection
|
||||
this.selected = 0
|
||||
@ -178,9 +195,11 @@
|
||||
|
||||
getItemClass(item, idx) {
|
||||
return {
|
||||
"item": true,
|
||||
"selected": idx === this.selected,
|
||||
"action-buttons-visible": this.actionButton > 0,
|
||||
"scratch": item.scratch,
|
||||
"new-note": item.createNew,
|
||||
}
|
||||
},
|
||||
|
||||
@ -198,7 +217,7 @@
|
||||
|
||||
async deleteConfirmNote(path) {
|
||||
if (this.deleteConfirm) {
|
||||
console.log("delete file:", path)
|
||||
//console.log("delete file:", path)
|
||||
await this.deleteNote(path)
|
||||
this.hideActionButtons()
|
||||
this.buildItems()
|
||||
@ -214,8 +233,8 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="scroller">
|
||||
<form class="note-selector" tabindex="-1" @focusout="onFocusOut" ref="container">
|
||||
<div class="input-container">
|
||||
<input
|
||||
type="text"
|
||||
ref="input"
|
||||
@ -224,10 +243,15 @@
|
||||
v-model="filter"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<ul class="items">
|
||||
<li
|
||||
</div>
|
||||
<div class="scroller">
|
||||
<ul class="items" ref="itemsContainer">
|
||||
<template
|
||||
v-for="item, idx in filteredItems"
|
||||
:key="item.path"
|
||||
>
|
||||
<li v-if="item.createNew" class="line-separator"></li>
|
||||
<li
|
||||
:class="getItemClass(item, idx)"
|
||||
@click="selectItem(item.path)"
|
||||
ref="item"
|
||||
@ -254,27 +278,20 @@
|
||||
</button>
|
||||
<button
|
||||
class="show-actions"
|
||||
v-if="item.path !== SCRATCH_FILE_NAME && (actionButton === 0 || idx !== selected)"
|
||||
v-if="itemHasActionButtons(item) && (actionButton === 0 || idx !== selected)"
|
||||
@click.stop.prevent="showActionButtons(idx)"
|
||||
></button>
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.scroller
|
||||
//overflow: auto
|
||||
//position: fixed
|
||||
//top: 0
|
||||
//left: 0
|
||||
//bottom: 0
|
||||
//right: 0
|
||||
.note-selector
|
||||
font-size: 13px
|
||||
padding: 10px
|
||||
//background: #48b57e
|
||||
background: #efefef
|
||||
position: absolute
|
||||
@ -294,6 +311,8 @@
|
||||
+webapp-mobile
|
||||
max-width: calc(100% - 80px)
|
||||
|
||||
.input-container
|
||||
padding: 10px
|
||||
input
|
||||
background: #fff
|
||||
padding: 4px 5px
|
||||
@ -301,7 +320,6 @@
|
||||
box-sizing: border-box
|
||||
border-radius: 2px
|
||||
width: 100%
|
||||
margin-bottom: 10px
|
||||
&:focus
|
||||
outline: none
|
||||
border: 1px solid #fff
|
||||
@ -316,15 +334,29 @@
|
||||
font-size: 16px
|
||||
max-width: 100%
|
||||
|
||||
.items
|
||||
.scroller
|
||||
overflow-y: auto
|
||||
> li
|
||||
padding: 0 10px 5px 10px
|
||||
|
||||
.items
|
||||
> li.line-separator
|
||||
height: 1px
|
||||
background: rgba(0,0,0, 0.05)
|
||||
margin-left: -10px
|
||||
margin-right: -10px
|
||||
margin-top: 3px
|
||||
margin-bottom: 3px
|
||||
+dark-mode
|
||||
background: rgba(255,255,255, 0.1)
|
||||
> li.item
|
||||
position: relative
|
||||
border-radius: 3px
|
||||
padding: 3px 12px
|
||||
line-height: 18px
|
||||
display: flex
|
||||
align-items: center
|
||||
scroll-margin-top: 6px
|
||||
scroll-margin-bottom: 6px
|
||||
&:hover
|
||||
background: #e2e2e2
|
||||
.action-buttons .show-actions
|
||||
@ -357,6 +389,8 @@
|
||||
color: rgba(255,255,255, 0.65)
|
||||
&.scratch
|
||||
font-weight: 600
|
||||
&.new-note
|
||||
font-size: 12px
|
||||
.name
|
||||
margin-right: 12px
|
||||
flex-shrink: 0
|
||||
|
||||
@ -18,7 +18,10 @@ export const useNotesStore = defineStore("notes", {
|
||||
currentCursorLine: null,
|
||||
currentSelectionSize: null,
|
||||
libraryId: 0,
|
||||
createNoteMode: "new",
|
||||
createNoteParams: {
|
||||
mode: "new",
|
||||
nameSuggestion: ""
|
||||
},
|
||||
|
||||
showNoteSelector: false,
|
||||
showLanguageSelector: false,
|
||||
@ -52,10 +55,13 @@ export const useNotesStore = defineStore("notes", {
|
||||
this.closeDialog()
|
||||
this.showNoteSelector = true
|
||||
},
|
||||
openCreateNote(createMode) {
|
||||
openCreateNote(createMode, nameSuggestion) {
|
||||
createMode = createMode || "new"
|
||||
this.closeDialog()
|
||||
this.createNoteMode = createMode
|
||||
this.createNoteParams = {
|
||||
mode: createMode || "new",
|
||||
name: nameSuggestion || ""
|
||||
}
|
||||
this.showCreateNote = true
|
||||
},
|
||||
closeDialog() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user