From 44d39796fbe3731874a42f94113824e4179dd7ba Mon Sep 17 00:00:00 2001
From: Nick Coutsos <nick@coutsos.com>
Date: Wed, 20 Oct 2021 19:10:06 -0400
Subject: Improvements to key search/picker component

---
 application/components/key.vue          |  7 +--
 application/components/keymap.vue       |  2 +-
 application/components/modal.vue        |  4 +-
 application/components/value-picker.vue | 86 +++++++++++++++++++++++++--------
 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);
 }
 
-- 
cgit v1.2.3