diff options
| -rw-r--r-- | application/components/key.vue | 7 | ||||
| -rw-r--r-- | application/components/keymap.vue | 2 | ||||
| -rw-r--r-- | application/components/modal.vue | 4 | ||||
| -rw-r--r-- | application/components/value-picker.vue | 86 | ||||
| -rw-r--r-- | application/style.css | 1 |
5 files changed, 76 insertions, 24 deletions
diff --git a/application/components/key.vue b/application/components/key.vue index f958c88..dcc6972 100644 --- a/application/components/key.vue +++ b/application/components/key.vue @@ -24,9 +24,8 @@ :values="normalized.params" :onSelect="handleSelectCode" /> - <teleport to="body"> + <modal v-if="editing"> <value-picker - v-if="editing" :target="editing.target" :value="editing.code" :param="editing.param" @@ -36,7 +35,7 @@ @select="handleSelectValue" @cancel="editing = null" /> - </teleport> + </modal> </div> </template> @@ -51,6 +50,7 @@ import { getKeyStyles } from '../key-units' import KeyValue from './key-value.vue' import KeyParamlist from './key-paramlist.vue' +import Modal from './modal.vue' import ValuePicker from './value-picker.vue' function makeIndex (tree) { @@ -77,6 +77,7 @@ export default { components: { 'key-value': KeyValue, 'key-paramlist': KeyParamlist, + Modal, ValuePicker }, data () { diff --git a/application/components/keymap.vue b/application/components/keymap.vue index a370a79..5d5c878 100644 --- a/application/components/keymap.vue +++ b/application/components/keymap.vue @@ -81,7 +81,7 @@ export default { case 'mod': return filter(this.keycodes, 'isModifier') case 'command': - get(this.sources, ['behaviours', behaviour, 'commands'], []) + return get(this.sources, ['behaviours', behaviour, 'commands'], []) case 'kc': default: return this.keycodes diff --git a/application/components/modal.vue b/application/components/modal.vue index 2eb5bf3..96c106e 100644 --- a/application/components/modal.vue +++ b/application/components/modal.vue @@ -16,9 +16,11 @@ export default { <style scoped> .wrapper { position: absolute; + top: 0; + left: 0; width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 0.75); + background-color: rgba(0, 0, 0, 0.25); z-index: 100; display: flex; justify-content: center; diff --git a/application/components/value-picker.vue b/application/components/value-picker.vue index fca91f7..44921d5 100644 --- a/application/components/value-picker.vue +++ b/application/components/value-picker.vue @@ -15,16 +15,30 @@ export default { param: [String, Object], value: String, prompt: String, - searchKey: String + searchKey: String, + searchThreshold: { + type: Number, + default: 10 + }, + showAllThreshold: { + type: Number, + default: 50, + validator: value => value >= 0 + } }, data() { return { query: null, - highlighted: null + highlighted: null, + showAll: false } }, mounted() { document.body.addEventListener('click', this.handleClickOutside, true) + + if (this.$refs.searchBox) { + this.$refs.searchBox.focus() + } }, unmounted() { document.body.removeEventListener('click', this.handleClickOutside, true) @@ -34,18 +48,32 @@ export default { const { query, choices } = this const options = { key: this.searchKey, limit: 30 } const filtered = fuzzysort.go(query, choices, options) + const showAll = this.showAll || this.searchThreshold > choices.length - return choices.length <= 10 ? choices : filtered.map(result => ({ + if (showAll) { + return choices + } else if (!query) { + return choices.slice(0, this.searchThreshold) + } + + return filtered.map(result => ({ ...result.obj, search: result })) }, + enableShowAllButton() { + return ( + !this.showAll && + this.choices.length > this.searchThreshold && + this.choices.length <= this.showAllThreshold + ) + }, style() { const rect = this.target.getBoundingClientRect() return { - display: 'block', - top: `${window.scrollY + (rect.top + rect.bottom) / 2}px`, - left: `${window.scrollX + (rect.left + rect.right) / 2}px` + // display: 'block', + // top: `${window.scrollY + (rect.top + rect.bottom) / 2}px`, + // left: `${window.scrollX + (rect.left + rect.right) / 2}px` } } }, @@ -103,7 +131,6 @@ export default { element.scrollIntoView(alignToTop) } } - } } </script> @@ -119,7 +146,8 @@ export default { > <p>{{prompt}}</p> <input - v-if="choices.length > 10" + v-if="choices.length > searchThreshold" + ref="searchBox" type="text" :value="query !== null ? query : value" @keypress="handleKeyPress" @@ -138,15 +166,24 @@ export default { <span v-else v-text="result[searchKey]" /> </li> </ul> + <div + v-if="choices.length > searchThreshold" + class="choices-counter" + > + Total choices: {{choices.length}}. + <a + v-if="enableShowAllButton" + v-text="`Show all`" + @click.stop="showAll = true" + /> + </div> </div> </template> <style> .dialog { - position: absolute; - transform: translate(-60px, -30px); - z-index: 2; + width: 300px; } .dialog p { margin: 0; @@ -155,16 +192,16 @@ export default { } .dialog input { display: block; - padding: 0; - margin: 0; - width: 120px; - height: 60px; + width: 100%; + height: 30px; + line-height: 30px; + font-size: 120%; - border: 2px solid steelblue; + margin: 0; + padding: 4px; + border: none; border-radius: 4px; - - text-align: center; - line-height: 60px; + box-sizing: border-box; } ul.results { font-family: monospace; @@ -173,6 +210,7 @@ ul.results { max-height: 200px; overflow: scroll; padding: 4px; + margin: 4px 0; background: rgba(0, 0, 0, 0.8); border-radius: 4px; } @@ -187,4 +225,14 @@ ul.results { } .results li b { color: red; } +.choices-counter { + font-size: 10px; +} + +.choices-counter a { + color: var(--selection); + border-bottom: 1px dotted var(--selection); + cursor: pointer; +} + </style>
\ No newline at end of file diff --git a/application/style.css b/application/style.css index daca53b..5619cb4 100644 --- a/application/style.css +++ b/application/style.css @@ -1,6 +1,7 @@ :root { --dark-red: #910e0e; --dark-blue: #6d99c6; + --selection: rgb(60, 179, 113); --hover-selection: rgba(60, 179, 113, 0.85); } |