mirror of
https://github.com/heyman/heynote.git
synced 2025-06-27 13:01:51 +02:00
Add functionality to add and delete user key bindings
This commit is contained in:
parent
08e0e9f7c3
commit
c64033359b
82
package-lock.json
generated
82
package-lock.json
generated
@ -55,6 +55,7 @@
|
|||||||
"fs-jetpack": "^5.1.0",
|
"fs-jetpack": "^5.1.0",
|
||||||
"lezer-elixir": "^1.1.2",
|
"lezer-elixir": "^1.1.2",
|
||||||
"prettier": "^3.3.2",
|
"prettier": "^3.3.2",
|
||||||
|
"primevue": "^4.3.3",
|
||||||
"rollup-plugin-license": "^3.0.1",
|
"rollup-plugin-license": "^3.0.1",
|
||||||
"sass": "^1.57.1",
|
"sass": "^1.57.1",
|
||||||
"typescript": "^4.9.4",
|
"typescript": "^4.9.4",
|
||||||
@ -1382,6 +1383,70 @@
|
|||||||
"node": ">=18"
|
"node": ">=18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@primeuix/styled": {
|
||||||
|
"version": "0.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.5.1.tgz",
|
||||||
|
"integrity": "sha512-5Ftw/KSauDPClQ8F2qCyCUF7cIUEY4yLNikf0rKV7Vsb8zGYNK0dahQe7CChaR6M2Kn+NA2DSBSk76ZXqj6Uog==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/utils": "^0.5.3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.11.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@primeuix/styles": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-yHj/Q+fosJ1736Ty5lRbpqhKa9piou+xZPPppNHUDshq0+XhrFwDGggvPGmDAJyUIM+ChM/Nj8lPY/AwTNXAkg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/styled": "^0.5.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@primeuix/utils": {
|
||||||
|
"version": "0.5.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.5.3.tgz",
|
||||||
|
"integrity": "sha512-7SGh7734wcF1/uK6RzO6Z6CBjGQ97GDHfpyl2F1G/c7R0z9hkT/V72ypDo82AWcCS7Ta07oIjDpOCTkSVZuEGQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.11.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@primevue/core": {
|
||||||
|
"version": "4.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.3.3.tgz",
|
||||||
|
"integrity": "sha512-kSkN5oourG7eueoFPIqiNX3oDT/f0I5IRK3uOY/ytz+VzTZp5yuaCN0Nt42ZQpVXjDxMxDvUhIdaXVrjr58NhQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/styled": "^0.5.0",
|
||||||
|
"@primeuix/utils": "^0.5.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.11.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^3.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@primevue/icons": {
|
||||||
|
"version": "4.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.3.3.tgz",
|
||||||
|
"integrity": "sha512-ouQaxHyeFB6MSfEGGbjaK5Qv9efS1xZGetZoU5jcPm090MSYLFtroP1CuK3lZZAQals06TZ6T6qcoNukSHpK5w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/utils": "^0.5.1",
|
||||||
|
"@primevue/core": "4.3.3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.11.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@replit/codemirror-lang-csharp": {
|
"node_modules/@replit/codemirror-lang-csharp": {
|
||||||
"version": "6.2.0",
|
"version": "6.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/@replit/codemirror-lang-csharp/-/codemirror-lang-csharp-6.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/@replit/codemirror-lang-csharp/-/codemirror-lang-csharp-6.2.0.tgz",
|
||||||
@ -5329,6 +5394,23 @@
|
|||||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/primevue": {
|
||||||
|
"version": "4.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/primevue/-/primevue-4.3.3.tgz",
|
||||||
|
"integrity": "sha512-nooYVoEz5CdP3EhUkD6c3qTdRmpLHZh75fBynkUkl46K8y5rksHTjdSISiDijwTA5STQIOkyqLb+RM+HQ6nC1Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/styled": "^0.5.0",
|
||||||
|
"@primeuix/styles": "^1.0.0",
|
||||||
|
"@primeuix/utils": "^0.5.1",
|
||||||
|
"@primevue/core": "4.3.3",
|
||||||
|
"@primevue/icons": "4.3.3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.11.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/progress": {
|
"node_modules/progress": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
|
||||||
|
@ -70,6 +70,7 @@
|
|||||||
"fs-jetpack": "^5.1.0",
|
"fs-jetpack": "^5.1.0",
|
||||||
"lezer-elixir": "^1.1.2",
|
"lezer-elixir": "^1.1.2",
|
||||||
"prettier": "^3.3.2",
|
"prettier": "^3.3.2",
|
||||||
|
"primevue": "^4.3.3",
|
||||||
"rollup-plugin-license": "^3.0.1",
|
"rollup-plugin-license": "^3.0.1",
|
||||||
"sass": "^1.57.1",
|
"sass": "^1.57.1",
|
||||||
"typescript": "^4.9.4",
|
"typescript": "^4.9.4",
|
||||||
|
195
src/components/settings/AddKeyBind.vue
Normal file
195
src/components/settings/AddKeyBind.vue
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
<script>
|
||||||
|
import fuzzysort from 'fuzzysort'
|
||||||
|
import AutoComplete from 'primevue/autocomplete'
|
||||||
|
|
||||||
|
import { HEYNOTE_COMMANDS } from '@/src/editor/commands'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AddKeyBind",
|
||||||
|
components: {
|
||||||
|
AutoComplete,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
key: "",
|
||||||
|
command: "",
|
||||||
|
commandSuggestions: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
commands() {
|
||||||
|
|
||||||
|
return Object.entries(HEYNOTE_COMMANDS).map(([key, cmd]) => {
|
||||||
|
const description = cmd.category + ": " + cmd.description
|
||||||
|
return {
|
||||||
|
name: key,
|
||||||
|
category: cmd.category,
|
||||||
|
description: description,
|
||||||
|
key: cmd.description,
|
||||||
|
label: description,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener("keydown", this.onKeyDown)
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
window.removeEventListener("keydown", this.onKeyDown)
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onKeyDown(event) {
|
||||||
|
if (event.key === "Escape") {
|
||||||
|
this.$emit("close")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onCommandSearch(event) {
|
||||||
|
if (event.query === "") {
|
||||||
|
this.commandSuggestions = [...this.commands]
|
||||||
|
} else {
|
||||||
|
const searchResults = fuzzysort.go(event.query, this.commands, {
|
||||||
|
keys: ["description", "name"],
|
||||||
|
})
|
||||||
|
this.commandSuggestions = searchResults.map((result) => {
|
||||||
|
const obj = {...result.obj}
|
||||||
|
const nameHighlight = result[0].highlight("<b>", "</b>")
|
||||||
|
obj.label = nameHighlight !== "" ? nameHighlight : obj.description
|
||||||
|
return obj
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onSave() {
|
||||||
|
this.$emit("save", {
|
||||||
|
key: this.key,
|
||||||
|
command: this.command.name,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="dialog-content">
|
||||||
|
<h3>Add key binding</h3>
|
||||||
|
<div class="form">
|
||||||
|
<div class="field">
|
||||||
|
<label>Key</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
v-model="key"
|
||||||
|
class="keys"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label>Command</label>
|
||||||
|
<AutoComplete
|
||||||
|
dropdown
|
||||||
|
forceSelection
|
||||||
|
v-model="command"
|
||||||
|
:suggestions="commandSuggestions"
|
||||||
|
optionLabel="key"
|
||||||
|
:delay="0"
|
||||||
|
@complete="onCommandSearch"
|
||||||
|
emptySearchMessage="No commands found"
|
||||||
|
class="command-autocomplete"
|
||||||
|
>
|
||||||
|
<template #option="slotProps">
|
||||||
|
<div class="command-option">
|
||||||
|
<span v-html="slotProps.option.label" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</AutoComplete>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<button
|
||||||
|
@click="onSave"
|
||||||
|
class="save"
|
||||||
|
>Save</button>
|
||||||
|
<button
|
||||||
|
@click="$emit('close')"
|
||||||
|
class="cancel"
|
||||||
|
>Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="sass" scoped>
|
||||||
|
.container
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
bottom: 0
|
||||||
|
background: rgba(255,255,255, 0.7)
|
||||||
|
+dark-mode
|
||||||
|
background: rgba(51,51,51, 0.7)
|
||||||
|
|
||||||
|
.dialog
|
||||||
|
width: 400px
|
||||||
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
left: 50%
|
||||||
|
transform: translate(-50%, -50%)
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
background: #fff
|
||||||
|
border-radius: 5px
|
||||||
|
box-shadow: 0 5px 30px rgba(0,0,0, 0.3)
|
||||||
|
border: 2px solid #c0c0c0
|
||||||
|
+dark-mode
|
||||||
|
background: #333
|
||||||
|
box-shadow: 0 5px 30px rgba(0,0,0, 0.7)
|
||||||
|
border: 2px solid #555
|
||||||
|
.dialog-content
|
||||||
|
flex-grow: 1
|
||||||
|
padding: 20px
|
||||||
|
h3
|
||||||
|
font-size: 14px
|
||||||
|
font-weight: 600
|
||||||
|
text-align: center
|
||||||
|
margin: 0
|
||||||
|
margin-bottom: 30px
|
||||||
|
.form
|
||||||
|
//display: flex
|
||||||
|
.field
|
||||||
|
//width: 50%
|
||||||
|
margin-bottom: 20px
|
||||||
|
label
|
||||||
|
display: block
|
||||||
|
margin-bottom: 8px
|
||||||
|
input.keys
|
||||||
|
width: 100%
|
||||||
|
padding: 4px
|
||||||
|
border-radius: 2px
|
||||||
|
border: 1px solid #ccc
|
||||||
|
&:focus
|
||||||
|
border: 1px solid rgba(0,0,0, 0)
|
||||||
|
outline: 2px solid var(--highlight-color)
|
||||||
|
//border: 1px solid var(--highlight-color)
|
||||||
|
+dark-mode
|
||||||
|
background: #202020
|
||||||
|
border: 1px solid #5a5a5a
|
||||||
|
&:focus
|
||||||
|
border: 1px solid rgba(0,0,0, 0)
|
||||||
|
.command-autocomplete
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
.footer
|
||||||
|
padding: 10px
|
||||||
|
background: #f1f1f1
|
||||||
|
border-radius: 0 0 5px 5px
|
||||||
|
text-align: right
|
||||||
|
+dark-mode
|
||||||
|
background: #2c2c2c
|
||||||
|
.cancel
|
||||||
|
float: left
|
||||||
|
</style>
|
@ -42,9 +42,11 @@
|
|||||||
<span class="command-name">{{ commandLabel }}</span>
|
<span class="command-name">{{ commandLabel }}</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="actions">
|
<td class="actions">
|
||||||
<template v-if="!isDefault">
|
<button
|
||||||
<button class="delete">Delete</button>
|
v-if="!isDefault"
|
||||||
</template>
|
@click="$emit('delete')"
|
||||||
|
class="delete"
|
||||||
|
>Delete</button>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td v-if="!isDefault" class="drag-handle"></td>
|
<td v-if="!isDefault" class="drag-handle"></td>
|
||||||
@ -80,14 +82,13 @@
|
|||||||
background-color: rgba(0,0,0, 0.05)
|
background-color: rgba(0,0,0, 0.05)
|
||||||
+dark-mode
|
+dark-mode
|
||||||
background-color: rgba(0,0,0, 0.25)
|
background-color: rgba(0,0,0, 0.25)
|
||||||
button
|
button.delete
|
||||||
padding: 0 10px
|
padding: 0 10px
|
||||||
height: 22px
|
height: 22px
|
||||||
font-size: 12px
|
font-size: 12px
|
||||||
background: none
|
background: none
|
||||||
border: none
|
border: none
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
margin-right: 2px
|
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
background: #ddd
|
background: #ddd
|
||||||
&:hover
|
&:hover
|
||||||
@ -96,13 +97,4 @@
|
|||||||
background: #555
|
background: #555
|
||||||
&:hover
|
&:hover
|
||||||
background: #666
|
background: #666
|
||||||
//&.delete
|
|
||||||
// background: #e95050
|
|
||||||
// &:hover
|
|
||||||
// background: #ce4848
|
|
||||||
// +dark-mode
|
|
||||||
// &.delete
|
|
||||||
// background: #ae1e1e
|
|
||||||
// &:hover
|
|
||||||
// background: #bf2222
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -5,6 +5,7 @@
|
|||||||
import { DEFAULT_KEYMAP, EMACS_KEYMAP } from "@/src/editor/keymap"
|
import { DEFAULT_KEYMAP, EMACS_KEYMAP } from "@/src/editor/keymap"
|
||||||
import { useSettingsStore } from "@/src/stores/settings-store"
|
import { useSettingsStore } from "@/src/stores/settings-store"
|
||||||
import KeyBindRow from "./KeyBindRow.vue"
|
import KeyBindRow from "./KeyBindRow.vue"
|
||||||
|
import AddKeyBind from "./AddKeyBind.vue"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: [
|
props: [
|
||||||
@ -12,43 +13,26 @@
|
|||||||
"modelValue",
|
"modelValue",
|
||||||
],
|
],
|
||||||
components: {
|
components: {
|
||||||
KeyBindRow,
|
|
||||||
draggable,
|
draggable,
|
||||||
|
KeyBindRow,
|
||||||
|
AddKeyBind,
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
keymap: this.modelValue,
|
keymap: this.modelValue,
|
||||||
//fixedKeymap: [],
|
addKeyBinding: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
/*const defaultKeymap = this.settings.keymap === "emacs" ? EMACS_KEYMAP : DEFAULT_KEYMAP
|
|
||||||
this.fixedKeymap = defaultKeymap.map((km) => {
|
|
||||||
return {
|
|
||||||
key: km.key,
|
|
||||||
command: km.command,
|
|
||||||
isDefault: true,
|
|
||||||
}
|
|
||||||
})*/
|
|
||||||
/*
|
|
||||||
const keymap = this.settings.keymap === "emacs" ? EMACS_KEYMAP : DEFAULT_KEYMAP
|
|
||||||
this.testKeymap = [
|
|
||||||
...this.userKeys,
|
|
||||||
{"key": "Mod-Enter", command: "yay"},
|
|
||||||
{"key": "Mod-Enter n", command: "nay"},
|
|
||||||
{"key": "Ctrl-o", command: null},
|
|
||||||
]
|
|
||||||
|
|
||||||
this.fixedKeymap = keymap.map((km) => {
|
},
|
||||||
return {
|
|
||||||
key: km.key,
|
watch: {
|
||||||
command: km.command,
|
addKeyBinding(newValue) {
|
||||||
isDefault: true,
|
this.$emit("addKeyBindingDialogVisible", newValue)
|
||||||
isOverridden: km.key in this.userKeys,
|
},
|
||||||
}
|
|
||||||
})*/
|
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
@ -76,7 +60,24 @@
|
|||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
onDragEnd(event) {
|
onDragEnd(event) {
|
||||||
console.log("onDragEnd", this.testKeymap)
|
this.$emit("update:modelValue", this.keymap)
|
||||||
|
},
|
||||||
|
|
||||||
|
onSaveKeyBinding(event) {
|
||||||
|
this.keymap = [
|
||||||
|
{
|
||||||
|
key: event.key,
|
||||||
|
command: event.command,
|
||||||
|
},
|
||||||
|
...this.keymap,
|
||||||
|
]
|
||||||
|
//console.log("keymap", this.keymap)
|
||||||
|
this.$emit("update:modelValue", this.keymap)
|
||||||
|
this.addKeyBinding = false
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteKeyBinding(index) {
|
||||||
|
this.keymap = this.keymap.toSpliced(index, 1)
|
||||||
this.$emit("update:modelValue", this.keymap)
|
this.$emit("update:modelValue", this.keymap)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -85,15 +86,33 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Keyboard Bindings</h2>
|
<div class="header" :inert="addKeyBinding">
|
||||||
<table>
|
<h2>Keyboard Bindings</h2>
|
||||||
<tr>
|
<!--<p>User key bindings can be reordered. Bindings that appear first take precedence</p>-->
|
||||||
<th>Source</th>
|
<div class="button-container">
|
||||||
<th>Key</th>
|
<button
|
||||||
<th>Command</th>
|
class="add-keybinding"
|
||||||
<th></th>
|
@click="addKeyBinding = !addKeyBinding"
|
||||||
<th></th>
|
>Add Keybinding</button>
|
||||||
</tr>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AddKeyBind
|
||||||
|
v-if="addKeyBinding"
|
||||||
|
@close="addKeyBinding = false"
|
||||||
|
@save="onSaveKeyBinding"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<table :inert="addKeyBinding">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Source</th>
|
||||||
|
<th>Key</th>
|
||||||
|
<th>Command</th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
<draggable
|
<draggable
|
||||||
v-model="keymap"
|
v-model="keymap"
|
||||||
tag="tbody"
|
tag="tbody"
|
||||||
@ -104,11 +123,13 @@
|
|||||||
@end="onDragEnd"
|
@end="onDragEnd"
|
||||||
item-key="key"
|
item-key="key"
|
||||||
>
|
>
|
||||||
<template #item="{element}">
|
<template #item="{element, index}">
|
||||||
<KeyBindRow
|
<KeyBindRow
|
||||||
:keys="element.key"
|
:keys="element.key"
|
||||||
:command="element.command"
|
:command="element.command"
|
||||||
:isDefault="element.isDefault"
|
:isDefault="element.isDefault"
|
||||||
|
:index="index"
|
||||||
|
@delete="deleteKeyBinding(index)"
|
||||||
source="User"
|
source="User"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
@ -128,10 +149,20 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
<style lang="sass" scoped>
|
||||||
h2
|
.header
|
||||||
font-weight: 600
|
display: flex
|
||||||
margin-bottom: 20px
|
margin-bottom: 12px
|
||||||
font-size: 14px
|
h2
|
||||||
|
flex-grow: 1
|
||||||
|
font-weight: 600
|
||||||
|
font-size: 14px
|
||||||
|
margin: 0
|
||||||
|
.button-container
|
||||||
|
.add-keybinding
|
||||||
|
font-size: 12px
|
||||||
|
height: 26px
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
|
||||||
table
|
table
|
||||||
width: 100%
|
width: 100%
|
||||||
|
@ -67,6 +67,9 @@
|
|||||||
defaultFontSize: defaultFontSize,
|
defaultFontSize: defaultFontSize,
|
||||||
appVersion: "",
|
appVersion: "",
|
||||||
theme: this.themeSetting,
|
theme: this.themeSetting,
|
||||||
|
|
||||||
|
// tracks if the add key binding dialog is visible (so that we can set inert on the save button)
|
||||||
|
addKeyBindingDialogVisible: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -94,7 +97,7 @@
|
|||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
onKeyDown(event) {
|
onKeyDown(event) {
|
||||||
if (event.key === "Escape") {
|
if (event.key === "Escape" && !this.addKeyBindingDialogVisible) {
|
||||||
this.$emit("closeSettings")
|
this.$emit("closeSettings")
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -376,6 +379,7 @@
|
|||||||
<KeyboardBindings
|
<KeyboardBindings
|
||||||
:userKeys="keyBindings ? keyBindings : {}"
|
:userKeys="keyBindings ? keyBindings : {}"
|
||||||
v-model="keyBindings"
|
v-model="keyBindings"
|
||||||
|
@addKeyBindingDialogVisible="addKeyBindingDialogVisible = $event"
|
||||||
/>
|
/>
|
||||||
</TabContent>
|
</TabContent>
|
||||||
|
|
||||||
@ -417,7 +421,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bottom-bar">
|
<div class="bottom-bar" :inert="addKeyBindingDialogVisible">
|
||||||
<button
|
<button
|
||||||
@click="$emit('closeSettings')"
|
@click="$emit('closeSettings')"
|
||||||
class="close"
|
class="close"
|
||||||
@ -493,6 +497,7 @@
|
|||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
padding: 40px
|
padding: 40px
|
||||||
overflow-y: auto
|
overflow-y: auto
|
||||||
|
position: relative
|
||||||
select
|
select
|
||||||
height: 22px
|
height: 22px
|
||||||
margin: 4px 0
|
margin: 4px 0
|
||||||
@ -559,4 +564,5 @@
|
|||||||
background: #222
|
background: #222
|
||||||
.close
|
.close
|
||||||
height: 28px
|
height: 28px
|
||||||
|
cursor: pointer
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
@import "reset"
|
@import "reset"
|
||||||
@import "font"
|
@import "font"
|
||||||
@import "base"
|
@import "base"
|
||||||
|
@import "autocomplete"
|
||||||
|
44
src/css/autocomplete.sass
Normal file
44
src/css/autocomplete.sass
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
@import "./src/css/include.sass"
|
||||||
|
|
||||||
|
|
||||||
|
.p-component
|
||||||
|
--p-inputtext-background: #fff
|
||||||
|
--p-inputtext-border-color: #ccc
|
||||||
|
--p-inputtext-border-radius: 3px
|
||||||
|
--p-inputtext-padding-y: 4px
|
||||||
|
--p-inputtext-padding-x: 4px
|
||||||
|
--p-inputtext-focus-border-color: var(--p-inputtext-border-color)
|
||||||
|
--p-inputtext-hover-border-color: var(--p-inputtext-border-color)
|
||||||
|
--p-inputtext-active-border-color: var(--p-inputtext-border-color)
|
||||||
|
|
||||||
|
--p-autocomplete-dropdown-border-color: var(--p-inputtext-border-color)
|
||||||
|
--p-autocomplete-dropdown-border-radius: var(--p-inputtext-border-radius)
|
||||||
|
--p-autocomplete-dropdown-hover-border-color: var(--p-inputtext-hover-border-color)
|
||||||
|
--p-autocomplete-dropdown-active-border-color: var(--p-inputtext-active-border-color)
|
||||||
|
--p-autocomplete-option-focus-background: #f1f1f1
|
||||||
|
|
||||||
|
+dark-mode
|
||||||
|
--p-inputtext-background: #202020
|
||||||
|
--p-inputtext-border-color: #444
|
||||||
|
--p-autocomplete-option-focus-background: #555
|
||||||
|
--p-autocomplete-option-focus-color: #fff
|
||||||
|
|
||||||
|
.p-inputtext.p-inputtext
|
||||||
|
font-size: 12px
|
||||||
|
|
||||||
|
.p-autocomplete-list-container
|
||||||
|
background: #fff
|
||||||
|
border: 1px solid #f1f1f1
|
||||||
|
padding: 6px 0
|
||||||
|
border-radius: 3px
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
|
||||||
|
+dark-mode
|
||||||
|
color: rgba(255,255,255, 0.8)
|
||||||
|
background: #333
|
||||||
|
border: 1px solid #2a2a2a
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3)
|
||||||
|
|
||||||
|
.p-autocomplete-list > li
|
||||||
|
padding: 6px 10px
|
||||||
|
b
|
||||||
|
font-weight: bold
|
@ -2,6 +2,7 @@ import './css/application.sass'
|
|||||||
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
|
import PrimeVue from 'primevue/config';
|
||||||
|
|
||||||
import App from './components/App.vue'
|
import App from './components/App.vue'
|
||||||
import { loadCurrencies } from './currency'
|
import { loadCurrencies } from './currency'
|
||||||
@ -13,6 +14,7 @@ const pinia = createPinia()
|
|||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
app.use(pinia)
|
app.use(pinia)
|
||||||
|
app.use(PrimeVue)
|
||||||
app.mount('#app').$nextTick(() => {
|
app.mount('#app').$nextTick(() => {
|
||||||
// hide loading screen
|
// hide loading screen
|
||||||
postMessage({ payload: 'removeLoading' }, '*')
|
postMessage({ payload: 'removeLoading' }, '*')
|
||||||
|
@ -2,6 +2,7 @@ import '../src/css/application.sass'
|
|||||||
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
|
import PrimeVue from 'primevue/config';
|
||||||
|
|
||||||
import App from '../src/components/App.vue'
|
import App from '../src/components/App.vue'
|
||||||
import { loadCurrencies } from '../src/currency'
|
import { loadCurrencies } from '../src/currency'
|
||||||
@ -9,6 +10,7 @@ import { loadCurrencies } from '../src/currency'
|
|||||||
const pinia = createPinia()
|
const pinia = createPinia()
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
app.use(pinia)
|
app.use(pinia)
|
||||||
|
app.use(PrimeVue)
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
//console.log("test:", app.hej.test)
|
//console.log("test:", app.hej.test)
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user