From 0b77acc68d12e41341d5f17dcf1c75317840bb9c Mon Sep 17 00:00:00 2001
From: Tim Krehan <Tim.Krehan@brz.eu>
Date: Wed, 3 Jul 2019 11:44:44 +0200
Subject: [PATCH] add custom checkboxes to list to fit with themes #2

---
 config/config.php        | 11 +++++++----
 cont/list.php            |  8 ++++++--
 js/list.js               | 32 ++++++++++++++++----------------
 style/themes/sketchy.css | 15 +++++++--------
 4 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/config/config.php b/config/config.php
index 0c1fa1c..0a40128 100644
--- a/config/config.php
+++ b/config/config.php
@@ -1,6 +1,9 @@
-<?php 
+<?php 
 $CONFIG = array (
-  'installed' => false,
+  'installed' => true,
+  'host' => 'localhost',
+  'database' => 'list',
+  'username' => 'list',
+  'passwd' => 'Erfolg100%',
 );
-
-?>
\ No newline at end of file
+
?>
\ No newline at end of file
diff --git a/cont/list.php b/cont/list.php
index 167fa62..a2d0349 100644
--- a/cont/list.php
+++ b/cont/list.php
@@ -33,7 +33,12 @@
       }
 
       print_r("<div class='list-row $div_item_row_classes $div_item_row_color_classes'>");
-        print_r("<div class='$div_item_checkbox_classes'><input type='checkbox' class='$input_item_checkbox_classes' data-color='$color_theme' data-id='$item->ID' $checked></div>");
+        print_r("<div class='$div_item_checkbox_classes'>");
+          print_r("<div class='custom-control custom-checkbox'>");
+            print_r("<input type='checkbox' class='$input_item_checkbox_classes custom-control-input' data-color='$color_theme' id='$item->ID-checkbox' data-id='$item->ID' $checked>");
+            print_r("<label class='custom-control-label' for='$item->ID-checkbox'></label>");
+          print_r("</div>");
+        print_r("</div>");
         print_r("<div class='list-row-amount $div_item_quantity_classes' data-amount='$item->Anzahl' data-unit='$item->Einheit'>$item->Anzahl $item->Einheit</div>");
         print_r("<div class='list-row-name $div_item_name_classes'>$item->Name</div>");
         print_r("<div class='$div_item_menu dropdown'>");
@@ -70,6 +75,5 @@
         <button class="btn btn-outline-secondary" type="submit" id="button-addon2"><i class="fas fa-plus"></i></button>
       </div>
     </div>
-
   </form>
 </div>
\ No newline at end of file
diff --git a/js/list.js b/js/list.js
index 814da20..32d200e 100644
--- a/js/list.js
+++ b/js/list.js
@@ -16,7 +16,7 @@ function highlightNewEntry(){
   if(match!=null){  
     var newID = match[1];
     var checkBox = $(`[data-id='${newID}']`);
-    var newRow = checkBox.parent().parent();
+    var newRow = checkBox.parent().parent().parent();
     newRow.removeClass($(checkBox).data("color"));
     newRow.addClass("alert-primary");
     setTimeout(function () {
@@ -111,28 +111,28 @@ function checkItem() {
     },
     success: function () {
       var color = $(dataIdSelector).data("color");
-      $(dataIdSelector).parent().parent().removeClass("bg-danger");
-      $(dataIdSelector).parent().parent().find(".dropdown-menu-button").removeClass("btn-danger");
+      $(dataIdSelector).parent().parent().parent().removeClass("bg-danger");
+      $(dataIdSelector).parent().parent().parent().find(".dropdown-menu-button").removeClass("btn-danger");
 
       if($(dataIdSelector).prop("checked")){
-        $(dataIdSelector).parent().parent().removeClass(color);
-        $(dataIdSelector).parent().parent().addClass("bg-success");
+        $(dataIdSelector).parent().parent().parent().removeClass(color);
+        $(dataIdSelector).parent().parent().parent().addClass("bg-success");
       }
       else{
-        $(dataIdSelector).parent().parent().removeClass("bg-success");
-        $(dataIdSelector).parent().parent().addClass(color);
+        $(dataIdSelector).parent().parent().parent().removeClass("bg-success");
+        $(dataIdSelector).parent().parent().parent().addClass(color);
       }
     },
     error: function () {
-      $(dataIdSelector).parent().parent().addClass("bg-danger");
-      $(dataIdSelector).parent().parent().data("toggle", "popover");
-      $(dataIdSelector).parent().parent().data("container", "body");
-      $(dataIdSelector).parent().parent().data("placement", "top");
-      $(dataIdSelector).parent().parent().data("html", true);
-      $(dataIdSelector).parent().parent().data("trigger", "focus");
-      $(dataIdSelector).parent().parent().data("content", "Dieses Element konnte nicht gespeichert werden.<br />Bitte die Seite Aktualisieren");
-      $(dataIdSelector).parent().parent().attr("title", "Fehler!");
-      $(dataIdSelector).parent().parent().popover('show');
+      $(dataIdSelector).parent().parent().parent().addClass("bg-danger");
+      $(dataIdSelector).parent().parent().parent().data("toggle", "popover");
+      $(dataIdSelector).parent().parent().parent().data("container", "body");
+      $(dataIdSelector).parent().parent().parent().data("placement", "top");
+      $(dataIdSelector).parent().parent().parent().data("html", true);
+      $(dataIdSelector).parent().parent().parent().data("trigger", "focus");
+      $(dataIdSelector).parent().parent().parent().data("content", "Dieses Element konnte nicht gespeichert werden.<br />Bitte die Seite Aktualisieren");
+      $(dataIdSelector).parent().parent().parent().attr("title", "Fehler!");
+      $(dataIdSelector).parent().parent().parent().popover('show');
     }
   });
 }
\ No newline at end of file
diff --git a/style/themes/sketchy.css b/style/themes/sketchy.css
index 6c0bdbd..7a65cd7 100644
--- a/style/themes/sketchy.css
+++ b/style/themes/sketchy.css
@@ -7095,27 +7095,26 @@ select.form-control {
 
 [type="checkbox"] {
   position: relative;
-  -webkit-appearance: none;
   appearance: none;
   cursor: pointer; }
   [type="checkbox"]:before {
     content: "";
-    /* position: absolute; */
-    /* left: -1.2em; */
-    /* top: -0.9em; */
+    position: absolute;
+    left: -1.2em;
+    top: -0.9em;
     display: inline-block;
     width: 15px;
     height: 16px;
-    border: 2px solid #fff;
+    border: 2px solid #333;
     border-radius: 2px 8px 2px 4px / 5px 3px 5px 3px; }
   [type="checkbox"]:checked:after {
     content: "x";
     position: absolute;
-    left: 3px;
-    /* top: -0.48em; */
+    left: -0.64em;
+    top: -0.48em;
     font-size: 1.5rem;
     line-height: 0.5;
-    color: #fff; }
+    color: #333; }
   [type="checkbox"]:disabled:before {
     border: 2px solid #aaa; }