Reworked UI for the "tools"

-- Went with another tab, instead of the dialog, so you could better see the outcome of an action.
-- Replaced the "move legend pairs" buttons with an "align legends" function, which I think covers most of the cases, while also offering more possibilities.
pull/139/head
Ian Prest 9 years ago
parent 8bfbdac388
commit 8581b1a4f8

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 969 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

@ -92,7 +92,7 @@ html, body {
#keyboard .selected .keyborder, #keyboard .selected .decal .keyborder { border-color: red !important; border-style: solid; }
#keyboard .ghosted { opacity: 0.5; }
#keyboard .decal .keyborder { border-style: none !important; background: transparent !important; }
#keyboard .hover .decal .keyborder,
#keyboard .hover .decal .keyborder,
#keyboard .selected .decal .keyborder { border-style: dashed !important; border-width: 1px; }
/* Key labels */
@ -294,7 +294,7 @@ for i in (1..9) {
/* Combining rectangle glyph */
.combine-rect:before {
content: '\25AD';
font-style: normal;
font-style: normal;
/*margin: 0 -0.66em 0 -0.33em;*/
}
@ -372,18 +372,73 @@ table.summarytable th, table.summarytable td {
padding: 2px 5px;
}
table.imgtable th, table.imgtable td {
padding: 2px;
settings-key(size, adjust = 0) {
position: relative;
width: size px;
height: size px;
float: left;
outerPad = 6
innerPad = 3
innerSize = (size - outerPad * 2)
labelSize = (innerSize - innerPad * 2)
& .keyborder {
position: absolute;
width: size px;
height: size px;
border-style: solid;
border-width: 1px;
border-color: black;
border-radius: 5px;
background-color: #cccccc;
pointer-events: none;
}
& .keylabels {
position: absolute;
left: outerPad px;
top: 3px;
width: innerSize px;
height: (innerSize - adjust) px;
padding: innerPad px;
border-style: solid;
border-width: 1px;
border-color: rgba(0,0,0,0.1);
background-color: #fcfcfc;
border-radius: 3px;
pointer-events: none;
}
& .keylabel {
position: absolute;
width: labelSize px;
height: (labelSize - adjust) px;
pointer-events: none;
}
& .keylabel div {
position: absolute;
width: labelSize px;
max-width: labelSize px;
height: (labelSize - adjust) px;
pointer-events: none;
}
& .keylabel div * {
pointer-events: all;
}
}
table.keytable {
border: 1px solid black;
border-collapse: collapse;
}
table.keytable th, table.keytable td {
padding: 2px;
#label-move-src, #label-move-dst {
settings-key(108, 8);
.keylabel9, .keylabel10, .keylabel11 { overflow: visible; }
input { z-index: 1; }
}
table.keystable th, table.keystable td {
padding: 5px;
#text-align {
settings-key(108);
.keylabel button {
display: inline-block;
font-size: 16px;
width: 28px;
z-index: 1;
float: none;
}
}

@ -86,8 +86,8 @@ Nav Bar / Header
<a class="dropdown-toggle" dropdown-toggle><i class="fa fa-th"></i> Color Swatches <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ng-repeat="pal in palettes"><a ng-click="loadPalette(pal)" href="#">{{pal.name}}</a></li>
<li class="divider"></li>
<li><a ng-click="makePaletteFromKeys()" href="#">Current key colors</a></li>
<li class="divider"></li>
<li><a ng-click="makePaletteFromKeys()" href="#">Current key colors</a></li>
</ul>
</li>
@ -106,8 +106,6 @@ Nav Bar / Header
<ul class="nav navbar-nav navbar-right" style="">
<!-- Options button -->
<li><a href="#" ng-click="showOptions()"><i class="fa fa-cog"></i> Options</a></li>
<!-- Tools button -->
<li><a href="#" ng-click="showTools()"><i class="fa fa-wrench"></i> Tools</a></li>
<!-- Permalink button -->
<li><a ng-href="{{getPermalink()}}" target="_blank" ng-click="dirty = false"><i class="fa fa-link"></i> Permalink</a></li>
<!-- User button -->
@ -264,6 +262,7 @@ Nav Bar / Header
<li ng-class="{active:selTab==3}"><a ng-click="selTab=3" data-toggle="tab"><i class="fa fa-file-text-o"></i> Custom Styles</a></li>
<li ng-class="{active:selTab==2}"><a ng-click="selTab=2" data-toggle="tab"><i class="fa fa-code"></i> Raw data</a></li>
<li ng-class="{active:selTab==4}"><a ng-click="selTab=4" data-toggle="tab"><i class="fa fa-file-text-o"></i> Summary</a></li>
<li ng-class="{active:selTab==5}"><a ng-click="selTab=5" data-toggle="tab"><i class="fa fa-wrench"></i> Tools</a></li>
</ul>
<div id="tab-content" class='col-md-12 col-lg-12 row' ui-keydown="{esc:'focusKb()'}" ng-cloak>
@ -837,7 +836,73 @@ Nav Bar / Header
<br><button type="button" class="btn btn-success" ng-click="printDiv('printSummary')"><i class="fa fa-print"></i> Print summary</button>
</div>
</div>
</div>
<div id="tools" ng-class="{hidden:selTab!=5}">
<div class="col-md-4 col-lg-4 row">
<h5>Remove Legends:</h5>
<div class="form-group form-group-sm form-horizontal">
<div ng-repeat="button in removeLegendsButtons" class="btn-group btn-group-xs" style="margin-right: 3px;" role="group">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="{{button.tooltip}}" ng-click="removeLegends(button)">{{button.label}}</button>
</div>
</div>
<h5>Misc:</h5>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Convert decals back into normal keys." ng-click="unhideDecals()"> Unhide decals</button>
</div>
</div>
<div class="col-md-2 col-lg-2 row">
<h5>Align Legends:</h5>
<div class="keycap" id="text-align">
<div class="keyborder"></div>
<div class="keylabels">
<div ng-repeat="(i,button) in alignLegendsButtons" class="keylabel keylabel{{i}}">
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-success" ng-click="alignLegends(button.flags)" ng-bind-html="button.label"></button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-lg-3 row">
<h5>Move Legends:</h5>
<form>
<div class="keycap" id="label-move-src">
<div class="keyborder"></div>
<div class="keylabels">
<div ng-repeat="i in [0,1,2,3,4,5,6,7,8,9,10,11]" class="keylabel keylabel{{i}}">
<div><input type='radio' name='fromId' ng-model="$parent.moveFromId" ng-value='i'></div>
</div>
</div>
</div>
<div style="float:left;margin-top:40px;">&nbsp;<i class="fa fa-arrow-right"></i>&nbsp;</div>
<div class="keycap" id="label-move-dst">
<div class="keyborder"></div>
<div class="keylabels">
<div ng-repeat="i in [0,1,2,3,4,5,6,7,8,9,10,11]" class="keylabel keylabel{{i}}">
<div><input type='radio' name='toId' ng-model="$parent.moveToId" ng-value='i'></div>
</div>
</div>
</div>
&nbsp;
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Move the legends in the From spot to the To spot." ng-click="moveSingleLegends()">Go</button>
</form>
</div>
<div class="col-md-3 col-lg-3 row">
<alert type="warning" style="margin-top:10px; margin-right:15px;" ng-hide="toolsAlertHidden" close="toolsAlertHidden = true">
<i class="fa fa-info-circle"></i> All tools will affect the selected keys only; if no keys are selected, tools will affect all keys.
</alert>
</div>
</div>
</div> <!-- END OF TAB CONTENT -->
<div class="col-md-12 col-lg-12 row" style="margin-top:1em;margin-left:0px;">
<alert type="success" ng-hide="!saved" close="saved=false" ng-cloak>
@ -1010,147 +1075,6 @@ Options Dialog
</div>
</script>
<!--***********************************************
Tools Dialog
************************************************-->
<script type="text/ng-template" id="toolsDialog.html">
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">&times;</button>
<h4 class="modal-title">Tools</h4>
</div>
<div class="modal-body">
<p>You should save your work before using these tools, there is no Undo.<br>
Actions will affect selected keys only. If no keys are selected, actions will affect all keys.</p>
<div class="form-group form-group-sm form-horizontal">
<label class="control-label text-nowrap" style='margin-left: 5px;'>Remove Legends:</label>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Remove all the legends from all the keys. Does not remove decals." ng-click="removeLegends('all')"> All</button>
</div>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Remove the legends from all the Alphabetical keys." ng-click="removeLegends('alphas')"> Alphas</button>
</div>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Remove the legends from all the Number keys." ng-click="removeLegends('nums')"> Nums</button>
</div>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Remove the legends from all the Punctuation keys." ng-click="removeLegends('punct')"> !@#$p[};"<.?..</button>
</div>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Remove the legends from all the Function keys." ng-click="removeLegends('fn')"> Fn</button>
</div>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Remove the special legends, like FontAwesome, WebFont, images, etc, and anything between them in the same slot." ng-click="removeLegends('specials')"> Specials</button>
</div>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Remove the legends from (almost) all the other keys except decals." ng-click="removeLegends('others')"> Others</button>
</div>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Remove the legends from all the Decals." ng-click="removeLegends('decals')"> Decals</button>
</div>
</div>
<br>
<div class="form-group form-group-sm form-horizontal">
<label class="control-label text-nowrap" style='margin-left: 5px;'>Move Legends Pairs:</label>
<div class="btn-group btn-group-xs" role="group">
<table class="imgtable">
<tr>
<td>
<a class="hint--top hint--rounded" data-hint="Move both left column legends to the middle column." ng-click="moveLegends('move',0,6,1,7)"><img src="img/left2middle.png"></a>
</td>
<td>
<a class="hint--top hint--rounded" data-hint="Move both middle column legends to the right column." ng-click="moveLegends('move',1,7,2,8)"><img src="img/middle2right.png"></a>
</td>
<td>
<a class="hint--top hint--rounded" data-hint="Move both right column legends to the left column." ng-click="moveLegends('move',2,8,0,6)"><img src="img/right2left.png"></a>
</td>
<td>
<a class="hint--top hint--rounded" data-hint="Swap left column top and bottom legends." ng-click="moveLegends('swap',0,6)"><img src="img/swaptopbottom.png"></a>
</td>
</tr>
</table>
</div>
</div>
<br>
<form>
<div class="form-group form-group-sm form-horizontal">
<label class="control-label text-nowrap" style='margin-left: 5px;'>Move Single Legends:</label>
<div class="btn-group btn-group-xs" role="group">
<table class='keystable'>
<tr><td>
<label for='fromtable'>From</label>
<table class="keytable" id='fromtable'>
<tr>
<td><input type='radio' name='fromId' value='0'></td>
<td><input type='radio' name='fromId' value='1'></td>
<td><input type='radio' name='fromId' value='2'></td>
</tr>
<tr>
<td><input type='radio' name='fromId' value='3'></td>
<td><input type='radio' name='fromId' value='4'></td>
<td><input type='radio' name='fromId' value='5'></td>
</tr>
<tr>
<td><input type='radio' name='fromId' value='6'></td>
<td><input type='radio' name='fromId' value='7'></td>
<td><input type='radio' name='fromId' value='8'></td>
</tr>
</table>
<table class="keytable">
<tr>
<td><input type='radio' name='fromId' value='9'></td>
<td><input type='radio' name='fromId' value='10'></td>
<td><input type='radio' name='fromId' value='11'></td>
</tr>
</table>
</td>
<td>
<label for='totable'>To</label>
<table class="keytable" id="totable">
<tr>
<td><input type='radio' name='toId' value='0'></td>
<td><input type='radio' name='toId' value='1'></td>
<td><input type='radio' name='toId' value='2'></td>
</tr>
<tr>
<td><input type='radio' name='toId' value='3'></td>
<td><input type='radio' name='toId' value='4'></td>
<td><input type='radio' name='toId' value='5'></td>
</tr>
<tr>
<td><input type='radio' name='toId' value='6'></td>
<td><input type='radio' name='toId' value='7'></td>
<td><input type='radio' name='toId' value='8'></td>
</tr>
</table>
<table class="keytable">
<tr>
<td><input type='radio' name='toId' value='9'></td>
<td><input type='radio' name='toId' value='10'></td>
<td><input type='radio' name='toId' value='11'></td>
</tr>
</table>
</td>
<td>
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Move the legends in the From spot to the To spot." ng-click="moveSingleLegends()"> Go</button>
</td>
</tr>
</table>
</div>
</div>
<br>
<div class="form-group form-group-sm form-horizontal">
<label class="control-label text-nowrap" style='margin-left: 5px;'>Unhide decal keys:</label>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Show the hidden decal keys." ng-click="unhideDecals()"> Unhide</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="cancel()">Done</button>
</div>
</script>
<!--***********************************************
Markdown dialog for displaying README, etc.
************************************************-->

258
kb.js

@ -280,11 +280,11 @@
thisk += key.width + " x " + key.height;
if(!key.decal) {
var foo = key.color; // next line refused to work with key.color.
var colourname = reverseColors[foo];
var colourname = reverseColors[foo];
if(!colourname) { // not a defined name
colourname = "";
}
thisk += " " + colourname + " (" + key.color + ")";
thisk += " " + colourname + " (" + key.color + ")";
}
if(kcounts[thisk]) {
kcounts[thisk]++;
@ -327,133 +327,128 @@
};
// for printing the summary only. Modified from http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only/7532581#7532581 answered Feb 27 '14 at 17:47
$scope.printDiv = function(divName){
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("summary_print").innerHTML = printContents;
document.getElementById("body_all").style.display = "none";
document.getElementById("summary_print").style.display = "";
window.print();
document.getElementById("summary_print").innerHTML = "";
document.getElementById("body_all").style.display = "";
document.getElementById("summary_print").style.display = "none";
};
$scope.removeLegends = function(param) {
var prop = 'labels';
switch (param) {
case 'all' : var re = /.*/; break;
case 'alphas' : var re = /^[A-Za-z]$/; break;
case 'nums' : var re = /^[0-9]*$/; break;
case 'punct' : var re = /^[\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\;\:\'\"\,\<\.\>\/\?\\\|]$/; break;
case 'fn' : var re = /F\d\d?/; break;
case 'specials' : var re = /<.*>/; break;
case 'others' : var re = /^[^A-Za-z0-9\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\;\:\'\"\,\<\.\>\/\?\\\|]$|^[A-Za-z\s][A-Za-z\s]+$|\&\#.*|\&.*?;/; break;
case 'decals' : {
angular.forEach($scope.keys(), function(key) {
if(key.decal) {
for (var i=0; i<=11; i++){
if (key.labels[i]){
var lab = "";
update(key,prop,lab,i); // should we wipe the textSize and textColor too?
renderKey(key);
}
}
}
}); break;
}
}
angular.forEach($scope.keys(), function(key) {
if(!key.decal) {
for (var i=0; i<=11; i++){
if (key.labels[i]){
var lab = key.labels[i];
lab = lab.replace(re, '');
update(key,prop,lab,i); // should we wipe the textSize and textColor too?
renderKey(key);
}
}
}
});
$scope.printDiv = function(divName) {
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("summary_print").innerHTML = printContents;
document.getElementById("body_all").style.display = "none";
document.getElementById("summary_print").style.display = "";
window.print();
document.getElementById("summary_print").innerHTML = "";
document.getElementById("body_all").style.display = "";
document.getElementById("summary_print").style.display = "none";
};
$scope.removeLegendsButtons = [
{ label: "All", re: /.*/, tooltip: "Remove all the legends from all the keys. Does not remove decals." },
{ label: "Alphas", re: /^[A-Za-z]$/, tooltip: "Remove the legends from all the Alphabetical keys." },
{ label: "Numbers", re: /^[0-9]*$/, tooltip: "Remove the legends from all the Number keys." },
{ label: "Punctuation", re: /^[\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\;\:\'\"\,\<\.\>\/\?\\\|]$/, tooltip: "Remove the legends from all the Punctuation keys." },
{ label: "Function", re: /F\d\d?/, tooltip: "Remove the legends from all the Function keys." },
{ label: "Specials", re: /<.*>/, tooltip: "Remove the special legends, like FontAwesome, WebFont, images, etc, and anything between them in the same slot." },
{ label: "Others", re: /^[^A-Za-z0-9\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\;\:\'\"\,\<\.\>\/\?\\\|]$|^[A-Za-z\s][A-Za-z\s]+$|\&\#.*|\&.*?;/, tooltip: "Remove the legends from (almost) all the other keys except decals." },
{ label: "Decals", re: /.*/, decals: true, tooltip: "Remove the legends from all the Decals." },
];
$scope.removeLegends = function(button) {
var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
transaction("remove-legends", function() {
angular.forEach(keys, function(key) {
if(key.decal === (!!button.decals)) {
for(var i=0; i<12; i++) {
if(key.labels[i]) {
update(key,"labels",key.labels[i].replace(button.re,''),i); // should we wipe the textSize and textColor too?
renderKey(key);
}
}
}
});
});
};
var align = { hmask:0x0f, hcenter:0x00, left:0x01, right:0x02, vmask:0xf0, vcenter:0x00, top:0x10, bottom:0x20, center:0x00, };
$scope.alignLegendsButtons = [
{ label: "&#8598;", flags: align.left | align.top },
{ label: "&#8593;", flags: align.hcenter | align.top },
{ label: "&#8599;", flags: align.right | align.top },
{ label: "&#8592;", flags: align.left | align.vcenter },
{ label: "&#9679;", flags: align.hcenter | align.vcenter },
{ label: "&#8594;", flags: align.right | align.vcenter },
{ label: "&#8601;", flags: align.left | align.bottom },
{ label: "&#8595;", flags: align.hcenter | align.bottom },
{ label: "&#8600;", flags: align.right | align.bottom },
];
function moveLabel(key, from, to) {
key.labels[to] = key.labels[from];
key.labels[from] = '';
key.textColor[to] = key.textColor[from];
key.textColor[from] = '';
key.textSize[to] = key.textSize[from];
key.textSize[from] = 0;
}
function alignSingleRow(key, flags, left, middle, right) {
var render = false;
switch(flags) {
case align.left:
if(!key.labels[left]) { render = true; moveLabel(key, middle, left); moveLabel(key, right, middle); }
if(!key.labels[left]) { render = true; moveLabel(key, middle, left); }
break;
case align.right:
if(!key.labels[right]) { render = true; moveLabel(key, middle, right); moveLabel(key, left, middle); }
if(!key.labels[right]) { render = true; moveLabel(key, middle, right); }
break;
case align.hcenter:
if(key.labels[left] && !key.labels[middle] && !key.labels[right]) { render = true; moveLabel(key, left, middle); }
if(key.labels[right] && !key.labels[middle] && !key.labels[left]) { render = true; moveLabel(key, right, middle); }
break;
}
return render;
}
$scope.alignLegends = function(flags) {
var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
transaction("align-legends", function() {
angular.forEach(keys, function(key) {
if(!key.decal) {
var render = false;
for(var i = 0; i < 12; i += 3) // horizontal alignment
render = alignSingleRow(key, flags & align.hmask, i, i+1, i+2) || render;
for(var i = 0; i < 3; i += 1) // vertical alignment
render = alignSingleRow(key, (flags & align.vmask) >> 4, i, i+3, i+6) || render;
if(render) renderKey(key);
}
});
});
};
$scope.unhideDecals = function() {
var prop = 'decal';
angular.forEach($scope.keys(), function(key) {
if(key.decal) {
update(key,prop,false);
renderKey(key);
}
});
};
$scope.moveLegends = function(moveOrSwap,a,b,c,d) {
var move = (moveOrSwap == 'move'? true : false);
var all = ($scope.selectedKeys.length>0 ? false : true);
angular.forEach($scope.keys(), function(key) {
var ndx =$scope.selectedKeys.indexOf(key);
if(!key.decal && (ndx>=0 || all) && move) {
if ((key.labels[a] && key.labels[b]) && !((key.labels[c] || key.labels[d])))
{
key.labels[c] = key.labels[a];
key.labels[d] = key.labels[b];
key.labels[a] = '';
key.labels[b] = '';
key.textColor[c] = key.textColor[a];
key.textColor[d] = key.textColor[b];
key.textColor[a] = '';
key.textColor[b] = '';
key.textSize[c] = key.textSize[a];
key.textSize[d] = key.textSize[b];
key.textSize[a] = '';
key.textSize[b] = '';
};
};
if(!key.decal && (ndx>=0 || all) && !move) {
if (key.labels[a] && key.labels[b])
{
var swap = key.labels[b];
key.labels[b] = key.labels[a];
key.labels[a] = swap;
var swap = key.textColor[b];
key.textColor[b] = key.textColor[a];
key.textColor[a] = swap;
var swap = key.textSize[b];
key.textSize[b] = key.textSize[a];
key.textSize[a] = swap;
};
};
renderKey(key);
});
var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
transaction("unhide-decals", function() {
angular.forEach(keys, function(key) {
if(key.decal) {
update(key,'decal',false);
renderKey(key);
}
});
});
};
$scope.moveFromId = null;
$scope.moveToId = null;
$scope.moveSingleLegends = function() {
var fromId = document.querySelector('input[name = "fromId"]:checked').value;
// alert(fromId);
var toId = document.querySelector('input[name = "toId"]:checked').value;
// alert(toId);
var all = ($scope.selectedKeys.length>0 ? false : true);
if ((fromId >=0) && (toId >= 0))
{angular.forEach($scope.keys(), function(key) {
var ndx =$scope.selectedKeys.indexOf(key);
if(!key.decal && (ndx>=0 || all)) {
if (key.labels[fromId] && !(key.labels[toId]))
{
key.labels[toId] = key.labels[fromId];
key.labels[fromId] = '';
key.textColor[toId] = key.textColor[fromId];
key.textColor[fromId] = '';
key.textSize[toId] = key.textSize[fromId];
key.textSize[fromId] = '';
};
};
renderKey(key);
})
}
};
var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
if($scope.moveFromId >= 0 && $scope.moveToId >= 0) {
transaction("move-legends", function() {
angular.forEach(keys, function(key) {
if(!key.decal && key.labels[$scope.moveFromId] && !key.labels[$scope.moveToId]) {
moveLabel(key, $scope.moveFromId, $scope.moveToId);
renderKey(key);
}
});
});
}
};
// Helper function to select a single key
function selectKey(key,event) {
if(key) {
@ -550,7 +545,7 @@
$scope.palettes.forEach(function(palette) {
palette.colors.forEach(function(color) {
color.css = $color.sRGB8(color.r,color.g,color.b).hex();
reverseColors[color.css] = palette.name + " " + color.name;
reverseColors[color.css] = palette.name + " " + color.name;
});
});
});
@ -1561,21 +1556,6 @@
}
};
$scope.showTools = function(event) {
if(activeModal) activeModal.dismiss('cancel');
activeModal = $modal.open({
templateUrl:"toolsDialog.html",
controller:"modalCtrl",
scope:$scope,
resolve: { params: function() { return { moveStep:$scope.moveStep, sizeStep:$scope.sizeStep, rotateStep:$scope.rotateStep }; } }
});
activeModal.result.then(function(params) { $.extend($scope, params); });
if(event) {
event.preventDefault();
event.stopPropagation();
}
};
// Clipboard functions
var clipboard = {};
$scope.cut = function(event) {

@ -1,9 +1,8 @@
{
"cherry": { "mount": "cherry", "name": "Cherry MX Mount", "brands": {
"aula": { "brand": "aula", "name": "AULA (HiDeep Inc.)", "switches": {
"Blue": { "part": "Blue", "name": "AULA Blue", "feel": "clicky", "weight": 50 }
"Blue": { "part": "Blue", "name": "AULA Blue", "feel": "clicky", "weight": 50 }
}},
"cherry": { "brand": "cherry", "name": "Cherry Electrical Products", "switches": {
"MX1A-A1xx": { "part": "MX1A-A1xx", "name": "MX White", "feel": "clicky", "weight": 70 },
"MX1A-11xx": { "part": "MX1A-11xx", "name": "MX Black", "feel": "linear", "weight": 60 },
@ -80,6 +79,3 @@
}}
}}
}

Loading…
Cancel
Save