Use checklist checkbox for the custom field checkbox

client/components/cards/cardCustomFields.jade

@@ -53,23 +53,12 @@ template(name="cardCustomField-number")
             = value
 
 template(name="cardCustomField-checkbox")
-  if canModifyCard
+  .js-checklist-item.checklist-item(class="{{#if data.value }}is-checked{{/if}}")
-    +inlinedForm(classNames="js-card-customfield-checkbox")
+    if canModifyCard
-      input.materialCheckBox(type="checkbox" checked=data.value)
+      .check-box-container
-      .edit-controls.clearfix
+        .check-box.materialCheckBox(class="{{#if data.value }}is-checked{{/if}}")
-        button.primary(type="submit") {{_ 'save'}}
-        a.fa.fa-times-thin.js-close-inlined-form
     else
-      a.js-open-inlined-form.checkbox-display
+      .materialCheckBox(class="{{#if data.value }}is-checked{{/if}}")
-        if value
-          i.fa.fa-check-square
-        else
-          i.fa.fa-square
-  else
-    if value
-      i.fa.fa-check-square
-    else
-      i.fa.fa-square
 
 template(name="cardCustomField-currency")
     if canModifyCard

client/components/cards/cardCustomFields.js

@@ -86,18 +86,14 @@ CardCustomField.register('cardCustomField');
     super.onCreated();
   }
 
-  isNull() {
+  toggleItem() {
-    return !this.data().value;
+    this.card.setCustomField(this.customFieldId, !this.data().value);
   }
 
   events() {
     return [
       {
-        'submit .js-card-customfield-checkbox'(event) {
+        'click .js-checklist-item .check-box-container': this.toggleItem,
-          event.preventDefault();
-          const value = this.find('input').checked;
-          this.card.setCustomField(this.customFieldId, value);
-        },
       },
     ];
   }

client/components/cards/cardDate.jade

@@ -8,3 +8,8 @@ template(name="dateBadge")
       time(datetime="{{showISODate}}")
         | {{showDate}}
 
+template(name="dateCustomField")
+  a(title="{{showTitle}}" class="{{classes}}")
+    time(datetime="{{showISODate}}")
+      | {{showDate}}
+

client/components/forms/forms.styl

@@ -242,11 +242,11 @@ textarea
     margin: 3px 4px
 
 // Material Design checkboxes
-//[type="checkbox"]:not(:checked),
+  [type="checkbox"]:not(:checked),
-//[type="checkbox"]:checked
+  [type="checkbox"]:checked
-//  position: absolute
+    position: absolute
-//  left: -9999px
+    left: -9999px
-//  visibility: hidden
+    visibility: hidden
 
 .materialCheckBox
   position: relative