diff --git a/src/renderer/components/sidebar/SidebarListItem.vue b/src/renderer/components/sidebar/SidebarListItem.vue index b0729a3..e77ea64 100644 --- a/src/renderer/components/sidebar/SidebarListItem.vue +++ b/src/renderer/components/sidebar/SidebarListItem.vue @@ -9,6 +9,7 @@ }" v-on="$listeners" @click="onClick" + @dblclick="onDblClick" @contextmenu="onContext" >
@@ -21,6 +22,7 @@
+ {{ folderName }} @@ -128,6 +134,10 @@ export default { }, isEditable () { return this.editableId === this.id + }, + isSystem () { + const libraryItems = ['inBox', 'favorites', 'allSnippets', 'trash'] + return libraryItems.includes(this.id) } }, @@ -145,16 +155,16 @@ export default { this.$store.commit('tags/SET_SELECTED_ID', this.id) } }, + onDblClick () { + if (!this.isSystem) this.setEditable() + }, onContext () { if (!this.tag) { - const libraryItems = ['inBox', 'favorites', 'allSnippets', 'trash'] - const isLibrary = libraryItems.includes(this.id) - if (this.id === 'trash') { - this.trashContext() + return this.trashContext() } - if (isLibrary) return + if (this.isSystem) return this.folderContext() } else { @@ -291,6 +301,11 @@ export default { color: var(--color-contrast-higher); } } + .folder-name { + display: flex; + height: 20px; + align-items: center; + } svg { width: 16px; height: 16px; diff --git a/src/renderer/components/snippets/SnippetTabsItem.vue b/src/renderer/components/snippets/SnippetTabsItem.vue index 771fb5b..f7fa1eb 100644 --- a/src/renderer/components/snippets/SnippetTabsItem.vue +++ b/src/renderer/components/snippets/SnippetTabsItem.vue @@ -6,9 +6,11 @@ active: isActive }" v-on="$listeners" + @dblclick="onDblClick" @contextmenu="onTabContext" > + {{ computedLabel }} @@ -61,17 +67,21 @@ export default { }, methods: { + setEditable () { + this.editable = true + this.$nextTick(() => { + this.$refs.input.focus() + this.$refs.input.select() + }) + }, + onDblClick () { + this.setEditable() + }, onTabContext () { menu.popup([ { label: `Rename "${this.label}"`, - click: () => { - this.editable = true - this.$nextTick(() => { - this.$refs.input.focus() - this.$refs.input.select() - }) - } + click: () => this.setEditable() }, { type: 'separator' @@ -107,10 +117,11 @@ export default { align-items: center; justify-content: center; height: 100%; + width: 100%; padding: 0 var(--spacing-xs); color: var(--color-contrast-medium); font-size: var(--text-sm); - -webkit-user-select: none; + user-select: none; input { width: 100%; color: var(--color-contrast-medium); @@ -120,7 +131,6 @@ export default { outline: none; &[disabled] { color: var(--color-contrast-medium); - -webkit-user-select: none; } &.is-editable { border: 1px solid var(--color-primary);