diff options
| -rw-r--r-- | application/components/app.vue | 17 | ||||
| -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 |
6 files changed, 88 insertions, 29 deletions
diff --git a/application/components/app.vue b/application/components/app.vue index a4573f4..80a14d4 100644 --- a/application/components/app.vue +++ b/application/components/app.vue @@ -31,6 +31,7 @@ export default { return { config, keycodes: [], + editingKeymap: {}, indexedKeycodes: {}, behaviours: [], indexedBehaviours: {}, @@ -94,13 +95,13 @@ export default { }) }, handleUpdateKeymap(keymap) { - Object.assign(this.keymap, keymap) + Object.assign(this.editingKeymap, keymap) }, handleGithubAuthorize() { github.beginLoginFlow() }, handleCommitChanges() { - github.commitChanges(this.layout, this.keymap) + github.commitChanges(this.layout, this.editingKeymap) }, handleCompile() { fetch('/keymap', { @@ -108,7 +109,7 @@ export default { headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(this.keymap) + body: JSON.stringify(this.editingKeymap) }) }, getInstallationUrl() { @@ -139,12 +140,13 @@ export default { </modal> </div> <template v-else> - <keymap :layout="layout" :keymap="keymap" @update="handleUpdateKeymap" /> + <keymap :layout="layout" :keymap="editingKeymap.keyboard ? editingKeymap : keymap" @update="handleUpdateKeymap" /> <div id="actions"> <button v-if="config.enableLocal" v-text="`Save Local`" id="compile" + :disabled="!this.editingKeymap.keyboard" @click="handleCompile" /> <button @@ -152,12 +154,12 @@ export default { v-text="`Authorize GitHub`" @click="handleGithubAuthorize" title="Install as a GitHub app to edit a zmk-config repository." - /> <button v-if="config.enableGitHub && githubAuthorized" v-text="`Commit Changes`" @click="handleCommitChanges" + :disabled="!this.editingKeymap.keyboard" title="Commit keymap changes to GitHub repository" /> </div> @@ -178,6 +180,11 @@ button { margin: 2px; } +button[disabled] { + background-color: #ccc; + cursor: not-allowed; +} + .dialog { background-color: white; padding: 40px; 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 1f0ca3c..65d10f2 100644 --- a/application/components/modal.vue +++ b/application/components/modal.vue @@ -18,9 +18,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 e4fdf52..3769a39 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 scoped> .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); } |