Select2 removed and shortcuts UI improved

This commit is contained in:
Simon Vieille 2018-02-07 17:40:37 +01:00
parent c3fee646f4
commit a2199e6152
No known key found for this signature in database
GPG Key ID: 919533E2B946EA10
4 changed files with 41 additions and 14 deletions

View File

@ -97,3 +97,7 @@ a {
#nav {
border-bottom: 2px solid #1e3650;
}
#shortcuts_special_keys input {
display: none;
}

View File

@ -19,8 +19,6 @@ $(function() {
$('#nav a').first().addClass('active');
}
$('.select2').select2();
$('#nav a').click(function(e) {
$('.pane').hide();
@ -51,8 +49,26 @@ $(function() {
$('#shortcut-key').val('');
});
var shortcutsSpecialKeysOnChange = function() {
$('#shortcuts_special_keys input:checked').each(function() {
$(this).parent().addClass('btn-primary').removeClass('btn-secondary');
})
$('#shortcuts_special_keys input:not(:checked)').each(function() {
$(this).parent().addClass('btn-secondary').removeClass('btn-primary');
})
}
$('#shortcuts_special_keys input').change(shortcutsSpecialKeysOnChange);
shortcutsSpecialKeysOnChange();
$('#shortcut-send').click(function() {
var keys = $('#shortcut-keys').val();
var keys = [];
$('#shortcuts_special_keys input:checked').each(function() {
keys.push($(this).val());
});
var key = $('#shortcut-key').val();
if (keys.length) {

View File

@ -1,7 +1,6 @@
{
"require": {
"twbs/bootstrap": "4.0.0",
"select2/select2": "^4.0",
"components/jquery": "^3.2"
}
}

View File

@ -4,7 +4,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="vendor/select2/select2/dist/css/select2.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
<title>Remote i3-wm</title>
</head>
@ -75,15 +74,25 @@
<div class="col-12">
<p class="legend">Shortcuts</p>
</div>
<div class="col-8">
<select class="select2" id="shortcut-keys" name="shortcuts_special_keys[]" multiple="multiple">
<option value="ctrl">ctrl</option>
<option value="shift">shift</option>
<option value="alt">alt</option>
<option value="win">win</option>
</select>
<div class="col-9" id="shortcuts_special_keys">
<label class="btn btn-secondary" for="shortcuts_special_key_ctrl">
<input type="checkbox" value="ctrl" id="shortcuts_special_key_ctrl">
ctrl
</label>
<label class="btn btn-secondary" for="shortcuts_special_key_shift">
<input type="checkbox" value="shift" id="shortcuts_special_key_shift">
shift
</label>
<label class="btn btn-secondary" for="shortcuts_special_key_alt">
<input type="checkbox" value="alt" id="shortcuts_special_key_alt">
alt
</label>
<label class="btn btn-secondary" for="shortcuts_special_key_win">
<input type="checkbox" value="win" id="shortcuts_special_key_win">
win
</label>
</div>
<div class="form-group col-4">
<div class="form-group col-3">
<input type="text" id="shortcut-key" class="form-control" name="shortcuts_char">
</div>
<div class="col-12">
@ -189,7 +198,6 @@
</div>
<script src="vendor/components/jquery/jquery.min.js"></script>
<script src="vendor/select2/select2/dist/js/select2.full.min.js"></script>
<script src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>