From e9300962497c9d9f7f2913f342b524da1019d8ff Mon Sep 17 00:00:00 2001
From: sonny <sonnyba871@gmail.com>
Date: Mon, 25 May 2020 21:14:30 +0200
Subject: [PATCH] Initial checkbox commit

---
 .../news/collection/views/rules.html          |  8 +++--
 .../scss/elements/checkbox/_checkbox.scss     | 35 +++++++++++++++++++
 .../scss/elements/checkbox/index.scss         |  1 +
 src/newsreader/scss/elements/index.scss       |  1 +
 .../templates/components/form/checkbox.html   | 10 ++++++
 .../templates/components/form/form.html       |  9 +++--
 6 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 src/newsreader/scss/elements/checkbox/_checkbox.scss
 create mode 100644 src/newsreader/scss/elements/checkbox/index.scss
 create mode 100644 src/newsreader/templates/components/form/checkbox.html

diff --git a/src/newsreader/news/collection/templates/news/collection/views/rules.html b/src/newsreader/news/collection/templates/news/collection/views/rules.html
index a17b818..11137b0 100644
--- a/src/newsreader/news/collection/templates/news/collection/views/rules.html
+++ b/src/newsreader/news/collection/templates/news/collection/views/rules.html
@@ -23,7 +23,7 @@
           <thead class="table__header rules-table__header">
             <tr class="table__row rules-table__row">
               <th class="table__heading rules-table__heading--select">
-                <input type="checkbox" id="select-all" data-input="rules" />
+                {% include "components/form/checkbox.html" with id="select-all" data_input="rules" id_for_label="select-all" %}
               </th>
               <th class="table__heading rules-table__heading--name">{% trans "Name" %}</th>
               <th class="table__heading rules-table__heading--category">{% trans "Category" %}</th>
@@ -36,7 +36,11 @@
           <tbody class="table__body">
             {% for rule in rules %}
               <tr class="table__row rules-table__row">
-                <td class="table__item rules-table__item"><input name="rules" type="checkbox" value="{{ rule.pk }}" /></td>
+                <td class="table__item rules-table__item">
+                  {% with "rules_"|add:rule.pk as id_for_label %}
+                    {% include "components/form/checkbox.html" with name="rules" value=rule.pk id=id_for_label id_for_label=id_for_label %}
+                  {% endwith %}
+                </td>
                 <td class="table__item rules-table__item" title="{{ rule.name }}">{{ rule.name }}</td>
                 <td class="table__item rules-table__item" title="{{ rule.category.name }}">{{ rule.category.name }}</td>
                 <td class="table__item rules-table__item" title="{{ rule.url }}">{{ rule.url }}</td>
diff --git a/src/newsreader/scss/elements/checkbox/_checkbox.scss b/src/newsreader/scss/elements/checkbox/_checkbox.scss
new file mode 100644
index 0000000..6403672
--- /dev/null
+++ b/src/newsreader/scss/elements/checkbox/_checkbox.scss
@@ -0,0 +1,35 @@
+.checkbox {
+  display: block;
+  height: 20px;
+  width: 20px;
+  margin: 0 0 0 20px;
+
+
+  & input[type=checkbox] {
+    position: absolute;
+    opacity: 0;
+
+    appearance: none;
+    -moz-appearance: none;
+
+    &:checked + .checkbox__label {
+      .checkbox__box {
+        background-color: $focus-blue;
+      }
+    }
+  }
+
+  &__label {
+    padding: 0;
+  }
+
+  &__box {
+    display: block;
+    position: relative;
+
+    height: 100%;
+    width: 100%;
+    border: 2px solid darken($gainsboro, 10%);
+    cursor: pointer;
+  }
+}
diff --git a/src/newsreader/scss/elements/checkbox/index.scss b/src/newsreader/scss/elements/checkbox/index.scss
new file mode 100644
index 0000000..b022713
--- /dev/null
+++ b/src/newsreader/scss/elements/checkbox/index.scss
@@ -0,0 +1 @@
+@import './checkbox';
diff --git a/src/newsreader/scss/elements/index.scss b/src/newsreader/scss/elements/index.scss
index d3e8fe0..0c30aff 100644
--- a/src/newsreader/scss/elements/index.scss
+++ b/src/newsreader/scss/elements/index.scss
@@ -11,3 +11,4 @@
 @import './h5/index';
 @import './small/index';
 @import './select/index';
+@import './checkbox/index';
diff --git a/src/newsreader/templates/components/form/checkbox.html b/src/newsreader/templates/components/form/checkbox.html
new file mode 100644
index 0000000..10fc95e
--- /dev/null
+++ b/src/newsreader/templates/components/form/checkbox.html
@@ -0,0 +1,10 @@
+<div class="checkbox">
+  {% if field %}
+    {{ field }}
+  {% else %}
+    <input id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ value }}" data-input="{{ data_input }}" />
+  {% endif %}
+  <label class="checkbox__label" for="{% if field %}{{ field.id_for_label }}{% else %}{{ id_for_label }}{% endif %}">
+    <span class="checkbox__box"/>
+  </label>
+</div>
diff --git a/src/newsreader/templates/components/form/form.html b/src/newsreader/templates/components/form/form.html
index d854eb1..229a543 100644
--- a/src/newsreader/templates/components/form/form.html
+++ b/src/newsreader/templates/components/form/form.html
@@ -23,9 +23,14 @@
       {% for field in form.visible_fields %}
         <fieldset class="fieldset form__fieldset">
           {% include "components/form/label.html" %}
-
           {{ field.errors }}
-          {{ field }}
+
+          {% if field.field.widget.input_type == "checkbox" %}
+            {% include "components/form/checkbox.html" with field=field %}
+          {% else %}
+            {{ field }}
+          {% endif %}
+
           {% include "components/form/help-text.html" %}
         </fieldset>
       {% endfor %}