Yes/No toggles, small js cleanup.

misago/conf/defaults.py

@@ -61,7 +61,9 @@ PIPELINE_JS = {
         'source_filenames': (
             'misago/admin/js/jquery.js',
             'misago/admin/js/bootstrap.js',
-            'misago/admin/js/misago.js',
+            'misago/admin/js/misago-tooltips.js',
+            'misago/admin/js/misago-tables.js',
+            'misago/admin/js/misago-yesnoswitch.js',
         ),
         'output_filename': 'misago_admin.js',
     },

misago/conf/forms.py

@@ -102,9 +102,7 @@ def create_textarea(setting, kwargs, extra):
 
 
 def create_yesno(setting, kwargs, extra):
-    kwargs['widget'] = forms.RadioSelect()
-    kwargs['choices'] = ((0, _('No')), (1, _('Yes')))
-    return forms.TypedChoiceField(coerce='int', **kwargs)
+    return forms.YesNoSwitch()
 
 
 FIELD_STYPES = {

misago/core/forms.py

@@ -1,7 +1,19 @@
+from django.utils.translation import ugettext_lazy as _
 from django.forms import *  # noqa
 from django.forms import Form as BaseForm, ModelForm as BaseModelForm
 
 
+def YesNoSwitch(**kwargs):
+    if 'initial' not in kwargs:
+        kwargs['initial'] = 0
+
+    return TypedChoiceField(
+        coerce=int,
+        choices=((1, _("Yes")), (0, _("No"))),
+        widget=RadioSelect(attrs={'class': 'yesno-switch'}),
+        **kwargs)
+
+
 class AutoStripWhitespacesMixin(object):
     autostrip_exclude = []
 

misago/static/misago/admin/css/misago/forms.less

@@ -70,7 +70,7 @@
       }
 
       .control-checkboxselect, .control-radioselect {
-        label.checkbox {
+        label.checkbox, label.radio {
           font-weight: normal;
 
           &:first-child {

misago/static/misago/admin/css/misago/misago.less

@@ -12,6 +12,7 @@ html, body {
 @import "pager.less";
 @import "tables.less";
 @import "lists.less";
+@import "yesnoswitch.less";
 
 // Layout elements
 @import "navbar.less";

misago/static/misago/admin/css/misago/yesnoswitch.less

@@ -0,0 +1,37 @@
+//
+// Custom yes-no switch
+// --------------------------------------------------
+
+
+.ninja-switch {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+
+.yes-no-switch {
+  .btn-yes {
+    margin-right: 1px;
+  }
+
+  .btn-yes, .btn-no {
+    width: 56px;
+
+    font-weight: bold;
+    text-align: center;
+
+    &.active {
+      &.btn-yes {
+        background: @btn-success-border;
+
+        color: @btn-success-color;
+      }
+
+      &.btn-no {
+        background: @btn-danger-border;
+
+        color: @btn-danger-color;
+      }
+    }
+  }
+}

misago/static/misago/admin/css/style.css

@@ -6293,6 +6293,30 @@ body {
 .list-panel .list-group .list-group-item:active {
   box-shadow: inset 0px 0px 0px 1px #c0392b;
 }
+.ninja-switch {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+.yes-no-switch .btn-yes {
+  margin-right: 1px;
+}
+.yes-no-switch .btn-yes,
+.yes-no-switch .btn-no {
+  width: 56px;
+  font-weight: bold;
+  text-align: center;
+}
+.yes-no-switch .btn-yes.active.btn-yes,
+.yes-no-switch .btn-no.active.btn-yes {
+  background: #208e4e;
+  color: #ffffff;
+}
+.yes-no-switch .btn-yes.active.btn-no,
+.yes-no-switch .btn-no.active.btn-no {
+  background: #bf2718;
+  color: #ffffff;
+}
 .navbars-container {
   border-bottom: 3px solid #c7c7c7;
 }
@@ -6543,13 +6567,21 @@ body {
 .form-panel .form-body fieldset .control-checkboxselect label.checkbox,
 .form-panel .form-body.no-fieldsets .control-checkboxselect label.checkbox,
 .form-panel .form-body fieldset .control-radioselect label.checkbox,
-.form-panel .form-body.no-fieldsets .control-radioselect label.checkbox {
+.form-panel .form-body.no-fieldsets .control-radioselect label.checkbox,
+.form-panel .form-body fieldset .control-checkboxselect label.radio,
+.form-panel .form-body.no-fieldsets .control-checkboxselect label.radio,
+.form-panel .form-body fieldset .control-radioselect label.radio,
+.form-panel .form-body.no-fieldsets .control-radioselect label.radio {
   font-weight: normal;
 }
 .form-panel .form-body fieldset .control-checkboxselect label.checkbox:first-child,
 .form-panel .form-body.no-fieldsets .control-checkboxselect label.checkbox:first-child,
 .form-panel .form-body fieldset .control-radioselect label.checkbox:first-child,
-.form-panel .form-body.no-fieldsets .control-radioselect label.checkbox:first-child {
+.form-panel .form-body.no-fieldsets .control-radioselect label.checkbox:first-child,
+.form-panel .form-body fieldset .control-checkboxselect label.radio:first-child,
+.form-panel .form-body.no-fieldsets .control-checkboxselect label.radio:first-child,
+.form-panel .form-body fieldset .control-radioselect label.radio:first-child,
+.form-panel .form-body.no-fieldsets .control-radioselect label.radio:first-child {
   margin-top: 0px;
 }
 .form-panel .form-body fieldset .help-block,

misago/static/misago/admin/css/style.less

@@ -8,7 +8,7 @@
 @import "bootstrap/variables.less";
 @import "misago/variables.less";
 
-// Font Awesome
+// Extras
 @import "font-awesome.css";
 
 // Import other files

misago/static/misago/admin/js/misago.js → misago/static/misago/admin/js/misago-tables.js

@@ -1,13 +1,4 @@
-// Register tooltips
-$(function() {
-  $('.tooltip-top').tooltip({placement: 'top', container: 'body'});
-  $('.tooltip-bottom').tooltip({placement: 'bottom', container: 'body'});
-  $('.tooltip-left').tooltip({placement: 'left', container: 'body'});
-  $('.tooltip-right').tooltip({placement: 'right', container: 'body'});
-});
-
-
-// Tables
+// Mass-action tables
 function tableMassActions(label_none, label_selected) {
   var $controller = $('.mass-controller');
 

misago/static/misago/admin/js/misago-tooltips.js

@@ -0,0 +1,7 @@
+// Register tooltips
+$(function() {
+  $('.tooltip-top').tooltip({placement: 'top', container: 'body'});
+  $('.tooltip-bottom').tooltip({placement: 'bottom', container: 'body'});
+  $('.tooltip-left').tooltip({placement: 'left', container: 'body'});
+  $('.tooltip-right').tooltip({placement: 'right', container: 'body'});
+});

misago/static/misago/admin/js/misago-yesnoswitch.js

@@ -0,0 +1,69 @@
+// Define extension
+function enableYesNoSwitch(selector, yes, no) {
+  function realYesNoSwitch(control) {
+    var name = control.find('.yesno-switch').first().attr('name');
+    var value = control.find('.yesno-switch').filter(":checked").val() * 1;
+
+    var buttons = $('<div class="btn-group yes-no-switch">' +
+      '<button type="button" class="btn btn-yes btn-default">' + yes + '</button>' +
+      '<button type="button" class="btn btn-no btn-default">' + no + '</button>' +
+    '</div>');
+
+    var button_yes = buttons.find('.btn-yes');
+    var button_no = buttons.find('.btn-no');
+
+    control.find('.yesno-switch').first().parent().before(buttons);
+    control.find('.yesno-switch').parent().addClass('ninja-switch');
+
+    function switchState(newstate) {
+      function switchToYes() {
+        button_yes.addClass('active');
+        button_yes.addClass('btn-success');
+        button_yes.removeClass('btn-default');
+        button_no.removeClass('active');
+        button_no.addClass('btn-default');
+        button_no.removeClass('btn-danger');
+      }
+
+      function switchToNo() {
+        button_yes.removeClass('active');
+        button_yes.removeClass('btn-success');
+        button_yes.addClass('btn-default');
+        button_no.addClass('active');
+        button_no.removeClass('btn-default');
+        button_no.addClass('btn-danger');
+      }
+
+      if (newstate == 1) {
+        switchToYes();
+      } else {
+        switchToNo();
+      }
+
+      control.find('.yesno-switch').first().prop('checked', newstate == 1);
+      control.find('.yesno-switch').last().prop('checked', newstate == 0);
+    }
+
+    switchState(value);
+
+    button_yes.click(function() {
+      switchState(1);
+    });
+
+    button_no.click(function() {
+      switchState(0);
+    });
+  }
+
+  $(selector).each(function() {
+    if ($(this).find('.yesno-switch').length == 2) {
+      realYesNoSwitch($(this));
+    }
+  });
+}
+
+
+// Enable switch
+$(function() {
+  enableYesNoSwitch('.control-radioselect', lang_yes, lang_no);
+});

misago/templates/misago/admin/base.html

@@ -1,5 +1,5 @@
 {% extends "misago/admin/base_thin.html" %}
-{% load compressed %}
+{% load compressed i18n %}
 
 
 {% block body %}
@@ -20,6 +20,10 @@
 {% include "misago/admin/logout.html" %}
 
 {# We include JavaScript at the end of page body so it loads faster #}
+<script lang="JavaScript">
+  var lang_yes = "{% trans "Yes" %}";
+  var lang_no = "{% trans "No" %}";
+</script>
 {% compressed_js 'misago_admin' %}
 {% block extra_scripts %}{% endblock %}
 {% endblock %}