forked from qmk/qmk_configurator
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add LT Support to Configurator (qmk#256)
* 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
Showing
9 changed files
with
201 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters