Merge pull request #12 from lukevanlukevan/grammar

Grammar adjustements for UI + small styling changes

Author: JanLunge

src/renderer/src/components/CoordMap.vue

@@ -9,27 +9,30 @@
       <p class="py-4">Be sure to backup your code if you still need any of it.</p>
       <div class="flex justify-between">
         <div class="btn">Abort</div>
-        <div class="btn btn-warning" @click="flashCoordMapping({overwrite: true})">Flash POG</div>
+        <div class="btn btn-warning" @click="flashCoordMapping({ overwrite: true })">Flash POG</div>
       </div>
     </div>
     <form method="dialog" class="modal-backdrop">
       <button>close</button>
     </form>
   </dialog>
   <div>
-    <p class="py-4">1. install the debug code on the keyboard</p>
+    <p class="py-4">1. Install the debug code on the keyboard</p>
     <button class="btn btn-primary btn-sm" @click="promptFlashing">
       Flash CoordMap Finder to keyboard
     </button>
     <div>
       <p class="py-4">2. Click the text area and follow the guide below</p>
 
       <p class="mb-4">
-        3. Now press each key starting in the top left corner in the first row and moving to the right
-        when you reached the end press the last key once again to start with the next row
+        3. Now press each key starting in the top left corner in the first row and moving to the
+        right when you reached the end press the last key once again to start with the next row
       </p>
 
-      <p class="py-4">if nothing is happening first replug the board in case it hasnt started and wait 5 seconds. if this did not help check the diode direction or pins.</p>
+      <p class="py-4">
+        If nothing is happening first replug the board in case it hasnt started and wait 5 seconds.
+        If this did not help check the diode direction or pins.
+      </p>
       <textarea
         id="keycapture"
         v-model="coordmap"
@@ -58,7 +61,7 @@
       <button class="btn btn-primary mt-2" @click="done">
         {{ initialSetup ? 'next' : 'save Coord Maping & create keyboard layout' }}
       </button>
-      <button class="btn-primary btn mt-2" @click="onlySave"  v-if="!initialSetup">
+      <button class="btn btn-primary mt-2" @click="onlySave" v-if="!initialSetup">
         only save Coord Maping
       </button>
     </div>
@@ -86,12 +89,12 @@ coordmap.value = keyboardStore.coordMap
   .join(' row ')
 
 const addRow = () => {
-  coordmap.value = coordmap.value + '\n';
-  (document.querySelector('#keycapture') as HTMLInputElement).focus()
+  coordmap.value = coordmap.value + '\n'
+  ;(document.querySelector('#keycapture') as HTMLInputElement).focus()
 }
 const addSpc = () => {
-  coordmap.value += 'spc ';
-  (document.querySelector('#keycapture') as HTMLInputElement).focus()
+  coordmap.value += 'spc '
+  ;(document.querySelector('#keycapture') as HTMLInputElement).focus()
 }
 const done = () => {
   keyboardStore.setKeys(keyboardlayout.value as KeyInfo[])
@@ -102,20 +105,24 @@ const onlySave = () => {
   keyboardStore.coordMap = keys.value
 }
 const promptFlashing = () => {
-  if(props.initialSetup){
+  if (props.initialSetup) {
     // after valid ok then flash file with overwrite on
-    (document.getElementById("flash_modal") as HTMLDialogElement).showModal()
+    ;(document.getElementById('flash_modal') as HTMLDialogElement).showModal()
   } else {
-    flashCoordMapping({overwrite: false})
+    flashCoordMapping({ overwrite: false })
   }
 }
-const flashCoordMapping = async ({ overwrite } : {overwrite: boolean}) => {
+const flashCoordMapping = async ({ overwrite }: { overwrite: boolean }) => {
   console.log('flashCoordMapping with overwrite:', overwrite)
-  keyboardStore.coordMapSetup = true;
-  (document.getElementById("flash_modal") as HTMLDialogElement).close()
+  keyboardStore.coordMapSetup = true
+  ;(document.getElementById('flash_modal') as HTMLDialogElement).close()
   overwrite = Boolean(overwrite)
   await window.api.saveConfiguration(
-    JSON.stringify({ pogConfig: keyboardStore.serialize(), writeFirmware: overwrite, writeCoordMapHelper: true })
+    JSON.stringify({
+      pogConfig: keyboardStore.serialize(),
+      writeFirmware: overwrite,
+      writeCoordMapHelper: true
+    })
   )
 }
 const keys = computed(() => {
@@ -152,7 +159,7 @@ const coordmapstring = computed(() => {
   return str.replaceAll(/spc,/gi, '    ')
 })
 const keyboardlayout = computed(() => {
-  const realKeys :Key[]= []
+  const realKeys: Key[] = []
   let globalkeyindex = 0
   keys.value.forEach((row, rowindex) => {
     row.forEach((key, kindex) => {

src/renderer/src/components/EncoderLayer.vue

@@ -3,16 +3,16 @@
     v-if="keyboardStore.encoderKeymap[lindex] && keyboardStore.encoderKeymap[lindex][eindex]"
     class="mb-4 flex items-center gap-4"
   >
-    <p class="w-24">layer {{ lindex }}</p>
+    <p class="w-24">Layer {{ lindex }}</p>
     <input
       v-model="keyboardStore.encoderKeymap[lindex][eindex][0]"
       type="text"
-      class="input-bordered input input-sm"
+      class="input input-bordered input-sm"
     />
     <input
       v-model="keyboardStore.encoderKeymap[lindex][eindex][1]"
       type="text"
-      class="input-bordered input input-sm"
+      class="input input-bordered input-sm"
     />
   </div>
 </template>

src/renderer/src/components/KeyCap.vue

@@ -122,7 +122,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, nextTick, onMounted, ref, VNodeRef, watch} from 'vue'
+import { computed, nextTick, onMounted, ref, VNodeRef, watch } from 'vue'
 import { selectedLayer, selectedKeys, userSettings } from '../store'
 import { renderLabel } from '../helpers'
 import chroma from 'chroma-js'
@@ -144,7 +144,7 @@ const action = computed(() => {
   let keyIndex = 0
 
   keyIndex = props.keyData.coordMapIndex
-  if (!props.keymap[selectedLayer.value]) return 'l missing'
+  if (!props.keymap[selectedLayer.value]) return 'No layer'
   const keyCode = props.keymap[selectedLayer.value][keyIndex]
   // resolve readable character
   if (!keyCode || keyCode === 'KC.TRNS') return '▽'
@@ -340,19 +340,19 @@ const isSimple = computed(() => {
 const keyElem = ref<VNodeRef | null>(null)
 const fixLabelWidth = () => {
   // key is eventually hidden with a layout variant
-  if(!keyElem.value) return
+  if (!keyElem.value) return
   const label = keyElem.value.querySelector('.keylabel-main')
   const labels = keyElem.value.querySelector('.keylabels')
   if (label) {
-    console.log("fixing label width")
+    console.log('fixing label width')
     label.style.transform = `scale(1)`
     const labelWidth = label.getBoundingClientRect().width
     const wrapperWidth = labels.getBoundingClientRect().width
     const scaling = Math.min(wrapperWidth / labelWidth, 1)
     label.style.transform = `scale(${scaling})`
   }
 }
-watch(mainLabel,async ()=>{
+watch(mainLabel, async () => {
   console.log('watching cap layer')
   await nextTick()
   fixLabelWidth()

src/renderer/src/components/KeyLayoutInfo.vue

@@ -1,6 +1,6 @@
 <template>
-  <p class="font-bold">Key Info for key #{{ [...selectedKeys][0] }}</p>
-  <p>selected {{ selectedKeys.size }} keys</p>
+  <p class="font-bold">Key info for key #{{ [...selectedKeys][0] }}</p>
+  <p>{{ selectedKeys.size }} {{ selectedKeys.size == 1 ? 'key' : 'keys' }} selected:</p>
   <p class="mt-2 text-sm">Basics</p>
   <div class="flex flex-col gap-2">
     <div class="grid grid-cols-4 gap-2 text-right">
@@ -88,7 +88,7 @@
       </div>
     </div>
   </div>
-  <template v-if="keyboardStore.wiringMethod === 'matrix' && false ">
+  <template v-if="keyboardStore.wiringMethod === 'matrix' && false">
     <p class="mt-2 text-sm" :class="{ 'text-error': matrixValid }">Matrix</p>
     <div class="flex gap-2">
       <div class="keydata-input-group">
@@ -123,15 +123,15 @@
   </div>
   <div v-if="keyboardStore.layouts.length !== 0" class="flex gap-1">
     <label>
-      <span>variant</span>
+      <span>Variant</span>
       <input v-model="tmpKey.variant[0]" type="text" class="keyinfo-input" @change="updateKey" />
     </label>
     <label>
-      <span>variant option</span>
+      <span>Variant option</span>
       <input v-model="tmpKey.variant[1]" type="text" class="keyinfo-input" @change="updateKey" />
     </label>
   </div>
-  <span>rotation</span>
+  <span>Rotation</span>
   <div class="flex gap-1">
     <input
       v-model="tmpKey.r"
@@ -208,22 +208,9 @@ const isAttrSame = (keys, attr) => {
 const getSameKeyAttrs = (keys) => {
   console.log(keys)
   const sameAttrs = new Map()
-  ;[
-    'y',
-    'y2',
-    'x',
-    'x2',
-    'w',
-    'w2',
-    'h',
-    'h2',
-    'r',
-    'ry',
-    'rx',
-    'encoderIndex'
-  ].forEach((attr) => {
+  ;['y', 'y2', 'x', 'x2', 'w', 'w2', 'h', 'h2', 'r', 'ry', 'rx', 'encoderIndex'].forEach((attr) => {
     if (isAttrSame(keys, attr) && keys[0][attr] !== undefined) {
-      console.log('attr is same',attr)
+      console.log('attr is same', attr)
       sameAttrs.set(attr, keys[0][attr])
     }
   })
@@ -295,7 +282,7 @@ const updateKey = () => {
     if (tmpKey.value.ry !== '') props.layout[keyIndex].ry = Number(tmpKey.value.ry)
     if (tmpKey.value.coordMapIndex !== '' && !isNaN(tmpKey.value.coordMapIndex as any))
       props.layout[keyIndex].coordMapIndex = Number(tmpKey.value.coordMapIndex)
-    else props.layout[keyIndex].coordMapIndex = ""
+    else props.layout[keyIndex].coordMapIndex = ''
     if (tmpKey.value.encoderIndex !== '' && !isNaN(Number(tmpKey.value.encoderIndex)))
       props.layout[keyIndex].encoderIndex = Number(tmpKey.value.encoderIndex)
     else props.layout[keyIndex].encoderIndex = undefined
@@ -342,7 +329,7 @@ const matrixValid = computed(() => {
 
 <style lang="scss" scoped>
 .keyinfo-input {
-  @apply input-bordered input input-sm w-full flex-shrink;
+  @apply input input-bordered input-sm w-full flex-shrink;
   padding-left: 3px;
   padding-right: 3px;
 }