diff options
| author | Nick Coutsos <[email protected]> | 2021-08-21 12:47:34 -0400 |
|---|---|---|
| committer | Nick Coutsos <[email protected]> | 2021-08-21 12:47:34 -0400 |
| commit | 8f21adc8e8318c7e47b3656417755843a465af63 (patch) | |
| tree | 45c9886197ebe566ef978e0f1dab0f88e08e0dbc /application | |
| parent | 2f68398793c054b58ff4e252d5887f25dce1ae9b (diff) | |
| download | keymap-editor-8f21adc8e8318c7e47b3656417755843a465af63.tar.gz keymap-editor-8f21adc8e8318c7e47b3656417755843a465af63.zip | |
Play with visuals
Diffstat (limited to 'application')
| -rw-r--r-- | application/components/key-paramlist.vue | 2 | ||||
| -rw-r--r-- | application/components/key-value.vue | 1 | ||||
| -rw-r--r-- | application/components/key.vue | 20 | ||||
| -rw-r--r-- | application/data/zmk-keycodes.json | 2 | ||||
| -rw-r--r-- | application/index.html | 3 | ||||
| -rw-r--r-- | application/style.css | 4 |
6 files changed, 29 insertions, 3 deletions
diff --git a/application/components/key-paramlist.vue b/application/components/key-paramlist.vue index 9747a80..b77a489 100644 --- a/application/components/key-paramlist.vue +++ b/application/components/key-paramlist.vue @@ -44,5 +44,5 @@ export default { .params:not([data-is-root="true"][data-param-count="1"])::after { content: ')'; opacity: 0.4; font-weight: bold; margin: 2px; } .param:not(:last-child)::after { content: ','; } .param[data-code="undefined"]::before { content: '∅'; font-size: 80%; } - +.code { padding: 0px 4px; margin-left: -2px; margin-right: -2px; } </style>
\ No newline at end of file diff --git a/application/components/key-value.vue b/application/components/key-value.vue index 8a61be0..8074d6a 100644 --- a/application/components/key-value.vue +++ b/application/components/key-value.vue @@ -4,6 +4,7 @@ :data-depth="depth" :data-code="value" :data-empty="value === undefined" + :title="keycode && `(${keycode.code}) ${keycode.description}`" @click.stop="onSelect({ target: $event.target, codeIndex: index, code: value, param })" > {{(param == 'layer') ? value : (!keycode ? '⦸' : '')}} diff --git a/application/components/key.vue b/application/components/key.vue index 7512079..5cc7c8c 100644 --- a/application/components/key.vue +++ b/application/components/key.vue @@ -6,6 +6,8 @@ :data-u="size.u" :data-h="size.h" :data-depth="depth" + :data-simple="isSimple" + :data-long="isComplex" :style="positioningStyle" @mouseover="onMouseOver" @mouseleave="onMouseLeave" @@ -55,6 +57,21 @@ export default { : 1 } return getDepth(this.mapping.parsed) + }, + isSimple() { + const [first] = this.parsed.params + return ( + this.parsed.params.length === 1 + && first.keycode && first.keycode.symbol.length === 1 + ) + }, + isComplex() { + const [first] = this.parsed.params + return ( + this.parsed.params.length > 1 + || (first.keycode && first.keycode.symbol.length > 4) + || (first.params || []).length > 0 + ) } }, methods: { @@ -100,7 +117,6 @@ export default { z-index: 1; } .key:hover .code { - background-color: var(--dark-red); color: white; } .key > .code { @@ -109,6 +125,8 @@ export default { .key[data-depth="3"] { font-size: 90%; } .key[data-depth="5"] { font-size: 75%; } +.key[data-simple="true"] { font-size: 140%; } +.key[data-long="true"] { font-size: 60%; } .behaviour-binding { position: absolute; diff --git a/application/data/zmk-keycodes.json b/application/data/zmk-keycodes.json index 5fa3710..c4f882b 100644 --- a/application/data/zmk-keycodes.json +++ b/application/data/zmk-keycodes.json @@ -693,6 +693,7 @@ }, { "names": ["RETURN", "ENTER", "RET"], + "symbol": "⏎", "description": "Return (Enter)", "context": "Keyboard", "clarify": false, @@ -753,6 +754,7 @@ }, { "names": ["SPACE"], + "symbol": "␣", "description": "Space", "context": "Keyboard", "clarify": false, diff --git a/application/index.html b/application/index.html index 302b246..ebe4318 100644 --- a/application/index.html +++ b/application/index.html @@ -3,6 +3,9 @@ <head> <meta charset="utf-8" /> <script src="https://rawgit.com/farzher/fuzzysort/master/fuzzysort.js"></script> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Quicksand:wght@500&display=swap" rel="stylesheet"> </head> <body> <div id="app"> diff --git a/application/style.css b/application/style.css index acf6232..eb12f24 100644 --- a/application/style.css +++ b/application/style.css @@ -3,7 +3,9 @@ --dark-blue: #6d99c6; } -html { font-family: avenir, sans-serif; } +html { + font-family: Quicksand, avenir, sans-serif; +} html, body { width: 100vw; height: 100vh; |