Skip to content

Commit

Permalink
Add LT Support to Configurator (qmk#256)
Browse files Browse the repository at this point in the history
* LayerContainer key type

Capabilities of Layer and Container. UI Only

 - adds 16 predefined LT definitions to keycodes
 - changes datamodel to support new type 'layer-container'
 - sets both the layer and the keycode for a LT key

* More contrast for key contents for GMK Olivia

* Fix keypress

* Optimize CSS

* Initialize a layer if it hasn't been

* Add LT support for export

* Add import support for LT(1..15,kc)

* Fix styling of LT keys

* Spacing between LT groups to be more like layer UI

* Add title support to LayerContainer
  • Loading branch information
yanfali authored Feb 21, 2019
1 parent a38d42c commit 971dee0
Show file tree
Hide file tree
Showing 9 changed files with 201 additions and 19 deletions.
4 changes: 3 additions & 1 deletion public/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -983,12 +983,14 @@ button {
}

.keycode-container,
.keycode-layer {
.keycode-layer,
.keycode-layer-container {
font-size: 10px;
display: block;
}

.keycode-container:after,
.keycode-layer-container:after,
.keycode-layer:after {
content: '';
width: 14px;
Expand Down
4 changes: 2 additions & 2 deletions src/components/BaseKey.vue
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export default {
dstIndex: this.id
});
} else {
this.setKeycode(json.code);
this.setKeycode({ _code: json.code, layer: json.layer });
}
this.dragleave();
},
Expand Down Expand Up @@ -200,7 +200,7 @@ export default {
},
remove() {
this.setSelected(this.id);
this.setKeycode('KC_NO');
this.setKeycode({ _code: 'KC_NO' });
}
},
data() {
Expand Down
12 changes: 8 additions & 4 deletions src/components/Keycode.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export default {
width: null,
name: String,
classes: String,
styles: Object
styles: Object,
layer: Number
},
computed: {
computedStyles() {
Expand Down Expand Up @@ -87,16 +88,19 @@ export default {
ev.dataTransfer.setDragImage(this.crt, 0, 0);

this.dragging = true;
let { name, code, type } = this;
let { name, code, type, layer } = this;
ev.dropEffect = 'copy';
ev.dataTransfer.dropEffect = 'move';
ev.dataTransfer.setData(
'application/json',
JSON.stringify({ name, type, code })
JSON.stringify({ name, type, code, layer })
);
},
clicked() {
this.$store.commit('keymap/setKeycode', this.code);
this.$store.commit('keymap/setKeycode', {
_code: this.code,
layer: this.layer
});
}
},
mounted() {
Expand Down
103 changes: 103 additions & 0 deletions src/components/LayerContainerKey.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<template>
<!-- prettier-ignore -->
<div
draggable
:id="myid"
class="key key-container"
:class="myclasses"
:style="mystyles"
:title="mytitle"
@click="clicked"
@dragstart="dragstart"
@dragend="dragend"
@drop.stop="droppedContents"
@dragover.prevent="dragover"
@dragenter="dragenter"
@dragleave="dragleave"
>LT {{ meta.layer }}<div
class="key-contents"
:class="contentClasses"
@dragenter.prevent="dragenterContents"
@dragleave.prevent="dragleaveContents"
>{{ contents }}</div><div
v-if="visible"
class="remove"
@click.stop="remove"
>x</div></div>
</template>
<script>
import isUndefined from 'lodash/isUndefined';
import { mapMutations } from 'vuex';
import BaseKey from './BaseKey';
export default {
name: 'layer-container-key',
extends: BaseKey,
data() {
return {
value: this.meta.text,
contentsInHover: false
};
},
computed: {
mytitle() {
const contents =
(this.meta.contents && this.meta.contents.code) || 'KC_NO';
return `LT(${this.meta.layer}, ${contents})`;
},
contents() {
if (this.meta.contents) {
return this.formatName(this.meta.contents.name);
}
return '';
},
contentClasses() {
let classes = [];
if (this.contentsInHover) {
classes.push('overme');
}
console.log('contentClasses ', classes);
return classes.join(' ');
}
},
methods: {
...mapMutations('keymap', ['setContents']),
dragenterContents(e) {
if (e.target.classList.contains('key-contents')) {
this.contentsInHover = true;
}
},
dragleaveContents() {
this.contentsInHover = false;
},
droppedContents(e) {
if (e.target.classList.contains('key-contents')) {
console.log('drop on contents ', e);
let json = JSON.parse(e.dataTransfer.getData('application/json'));
if (isUndefined(json.type)) {
this.setContents({
index: this.id,
key: {
name: json.name,
code: json.code,
type: json.type,
layer: json.layer
}
});
} else {
// TBD animate error on element
}
this.dragleave(e);
this.dragleaveContents(e);
return true;
}
return this.dropped(e);
}
}
};
</script>
<style>
.key-contents.overme {
background: #cceecc;
border-radius: 4px;
}
</style>
3 changes: 3 additions & 0 deletions src/components/VisualKeymap.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import BaseKey from '@/components/BaseKey';
import AnyKey from '@/components/AnyKey';
import LayerKey from '@/components/LayerKey';
import ContainerKey from '@/components/ContainerKey';
import LayerContainerKey from '@/components/LayerContainerKey';
export default {
name: 'visual-keymap',
Expand Down Expand Up @@ -139,6 +140,8 @@ export default {
return ContainerKey;
case 'layer':
return LayerKey;
case 'layer-container':
return LayerContainerKey;
case 'text':
return AnyKey;
default:
Expand Down
24 changes: 22 additions & 2 deletions src/jquery.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function generateKeypressHandler(keycode) {
return;
}

store.commit('keymap/setKeycode', meta.code);
store.commit('keymap/setKeycode', { _code: meta.code });
}
};
}
Expand Down Expand Up @@ -102,7 +102,7 @@ function setLayerToNonEmpty(_layer) {
*/

function newAnyKey(keycode) {
var anyKey = store.getters['keycodes/lookupKeycode']('text');
const anyKey = store.getters['keycodes/lookupKeycode']('text');
// make a copy otherwise it uses a reference
return Object.assign({}, anyKey, { text: keycode });
}
Expand All @@ -121,6 +121,22 @@ function newKey(metadata, keycode, obj) {
return key;
}

// newLayerContainerKey combines aspects of a layer and a container key
// We pre-assign the layers to make the UI easier to implement.
function newLayerContainerKey(keycode, internal) {
const internals = internal.split(',');
const LCKey = store.getters['keycodes/lookupKeycode'](
`${keycode}(${internals[0]},kc)`
);

let contents = store.getters['keycodes/lookupKeycode'](internals[1]);
if (isUndefined(contents)) {
contents = store.getters['keycodes/lookupKeycode']('KC_NO');
}
let { code, layer, name, type } = LCKey;
return Object.assign({ code, layer, name, type, contents: contents });
}

function parseKeycode(keycode, stats) {
let metadata;

Expand All @@ -138,6 +154,10 @@ function parseKeycode(keycode, stats) {

//Check whether it is a layer switching code or combo keycode
if (internal.includes('KC')) {
// Layer Tap keycode
if (maincode === 'LT') {
return newLayerContainerKey(maincode, internal);
}
// combo keycode
metadata = store.getters['keycodes/lookupKeycode'](internal);
if (metadata === undefined) {
Expand Down
25 changes: 18 additions & 7 deletions src/scss/colorways.scss
Original file line number Diff line number Diff line change
Expand Up @@ -235,14 +235,16 @@
.gmk-wob-key {
background: $color-gmk-abs-CR;
color: $color-gmk-abs-WS1;
input {
background: lighten($color-gmk-abs-CR, 40%);
input, .key-contents {
color: $color-gmk-abs-CR;
background: lighten($color-gmk-abs-CR, 60%);
}
}
.gmk-wob-mod {
background: $color-gmk-abs-CR;
color: $color-gmk-abs-WS1;
input {
input, .key-contents {
color: $color-gmk-abs-CR;
background: lighten($color-gmk-abs-CR, 40%);
}
}
Expand All @@ -269,14 +271,14 @@
.gmk-olivetti-key {
background: $color-gmk-abs-CP;
color: $color-gmk-abs-V4;
input {
input, .key-contents {
background: lighten($color-gmk-abs-CP, 40%);
}
}
.gmk-olivetti-mod {
background: $color-gmk-abs-U9;
color: $color-gmk-abs-V4;
input {
input, .key-contents {
background: lighten($color-gmk-abs-U9, 40%);
}
}
Expand All @@ -286,14 +288,15 @@
.gmk-olivia-key {
background: $color-gmk-abs-CP;
color: #363434;
input {
input, .key-contents {
background: lighten($color-gmk-abs-CP, 40%);
}
}
.gmk-olivia-mod {
background: #363434;
color: #e8c4b8;
input {
input, .key-contents {
color: lighten(#e8c4b8, 20%);
background: lighten(#363434, 40%);
}
}
Expand Down Expand Up @@ -327,10 +330,18 @@
.gmk-metaverse-key {
background: $color-gmk-abs-WS1;
color: $color-gmk-abs-CR;
input, .key-contents {
background: $color-gmk-abs-WS1;
color: $color-gmk-abs-CR;
}
}
.gmk-metaverse-mod {
background: $color-gmk-abs-CR;
color: $color-gmk-abs-WS1;
input, .key-contents {
color: $color-gmk-abs-WS1;
background: lighten($color-gmk-abs-CR, 40%);
}
}
.gmk-metaverse-accent {
background: $color-gmk-abs-RO2;
Expand Down
32 changes: 31 additions & 1 deletion src/store/modules/keycodes/quantum.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
// make a Layer Tap Key Keycode Definition
function makeLT(layer) {
return {
name: `LT ${layer}`,
code: `LT(${layer},kc)`,
type: 'layer-container',
layer: layer,
title: `kc on tap, switch to layer ${layer} while held`
};
}
export default [
{ label: 'Quantum', width: 'label', group: true },

Expand All @@ -21,7 +31,7 @@ export default [
title: 'Manually enter any QMK keycode'
},

{ label: 'Layer functions', width: 'label' },
{ label: 'Layer and Layer Tap functions', width: 'label' },

{
name: 'MO',
Expand Down Expand Up @@ -67,6 +77,26 @@ export default [
title: 'Switch to layer for one keypress'
},

{ width: 500 },

makeLT(0),
makeLT(1),
makeLT(2),
makeLT(3),
makeLT(4),
makeLT(5),
makeLT(6),
makeLT(7),
{ width: 250 },
makeLT(8),
makeLT(9),
makeLT(10),
makeLT(11),
makeLT(12),
makeLT(13),
makeLT(14),
makeLT(15),

{
label:
'Mod key combinations (A = Alt, C = Control, G = Windows/Command, S = Shift)',
Expand Down
13 changes: 11 additions & 2 deletions src/store/modules/keymap.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,10 @@ const getters = {
function(acc, key, i) {
var keycode = key.code;
if (keycode) {
if (keycode.indexOf('(kc)') !== -1) {
if (
keycode.indexOf('(kc)') !== -1 ||
keycode.indexOf(',kc)') !== -1
) {
if (key.contents) {
keycode = keycode.replace('kc', key.contents.code);
} else {
Expand Down Expand Up @@ -122,7 +125,7 @@ const mutations = {
setSelected(state, index) {
state.selectedIndex = index;
},
setKeycode(state, _code) {
setKeycode(state, { _code, layer }) {
if (isUndefined(state.selectedIndex)) {
return;
}
Expand All @@ -136,6 +139,12 @@ const mutations = {
if (type === 'layer') {
Vue.set(state.keymap[state.layer][state.selectedIndex], 'layer', 0);
}
if (type === 'layer-container') {
if (state.keymap[layer] === undefined) {
mutations.initLayer(state, layer);
}
Vue.set(state.keymap[state.layer][state.selectedIndex], 'layer', layer);
}
mutations.setSelected(state, undefined);
mutations.setDirty(state);
},
Expand Down

0 comments on commit 971dee0

Please sign in to comment.