From a2199e6152e79da88665d95e028b80bb4aee46ee Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 7 Feb 2018 17:40:37 +0100
Subject: [PATCH] Select2 removed and shortcuts UI improved

---
 client/assets/css/main.css |  4 ++++
 client/assets/js/main.js   | 22 +++++++++++++++++++---
 client/composer.json       |  1 -
 client/index.html          | 28 ++++++++++++++++++----------
 4 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/client/assets/css/main.css b/client/assets/css/main.css
index 834c0c8..b3bdd3c 100644
--- a/client/assets/css/main.css
+++ b/client/assets/css/main.css
@@ -97,3 +97,7 @@ a {
 #nav {
     border-bottom: 2px solid #1e3650;
 }
+
+#shortcuts_special_keys input {
+    display: none;
+}
diff --git a/client/assets/js/main.js b/client/assets/js/main.js
index 1caf2a6..70cd4ed 100644
--- a/client/assets/js/main.js
+++ b/client/assets/js/main.js
@@ -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) {
diff --git a/client/composer.json b/client/composer.json
index 2f800e8..5efc2be 100644
--- a/client/composer.json
+++ b/client/composer.json
@@ -1,7 +1,6 @@
 {
     "require": {
         "twbs/bootstrap": "4.0.0",
-        "select2/select2": "^4.0",
         "components/jquery": "^3.2"
     }
 }
diff --git a/client/index.html b/client/index.html
index 8b77332..32fc57d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -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>