Prettier checkboxes

panoramix/forms.py

@@ -360,7 +360,7 @@ def __init__(self, viz):
                 "Legend", default=True,
                 description="Whether to display the legend (toggles)"),
             'x_axis_showminmax': BetterBooleanField(
-                "X axis show min/max", default=True,
+                "X show min/max", default=True,
                 description=(
                     "Whether to display the min and max values of the axis")),
             'rich_tooltip': BetterBooleanField(

panoramix/static/lib/bootstrap-toggle.min.css

@@ -0,0 +1,28 @@
+/*! ========================================================================
+ * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
+ * http://www.bootstraptoggle.com
+ * ========================================================================
+ * Copyright 2014 Min Hur, The New York Times Company
+ * Licensed under MIT
+ * ======================================================================== */
+.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
+.toggle{position:relative;overflow:hidden}
+.toggle input[type=checkbox]{display:none}
+.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
+.toggle.off .toggle-group{left:-100%}
+.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
+.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
+.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
+.toggle.btn{min-width:59px;min-height:34px}
+.toggle-on.btn{padding-right:24px}
+.toggle-off.btn{padding-left:24px}
+.toggle.btn-lg{min-width:79px;min-height:45px}
+.toggle-on.btn-lg{padding-right:31px}
+.toggle-off.btn-lg{padding-left:31px}
+.toggle-handle.btn-lg{width:40px}
+.toggle.btn-sm{min-width:50px;min-height:30px}
+.toggle-on.btn-sm{padding-right:20px}
+.toggle-off.btn-sm{padding-left:20px}
+.toggle.btn-xs{min-width:35px;min-height:22px}
+.toggle-on.btn-xs{padding-right:12px}
+.toggle-off.btn-xs{padding-left:12px}

panoramix/templates/panoramix/explore.html

@@ -3,6 +3,7 @@
 {% block head_css %}
 {{super()}}
 <link rel="stylesheet" type="text/css" href="/static/lib/pygments.css" />
+<link href="/static/lib/bootstrap-toggle.min.css" rel="stylesheet">
 {% endblock %}
 
 {% block content_fluid %}
@@ -203,6 +204,7 @@ <h4 class="modal-title">Datasource Description</h4>
 
 {% block tail_js %}
 {{ super() }}
+<script src="/static/lib/bootstrap-toggle.min.js"></script>
 <script>
   $(document).ready(px.initExploreView);
   $(document).ready(function() {
@@ -211,6 +213,11 @@ <h4 class="modal-title">Datasource Description</h4>
     $('.slice').data('slice', slice);
     slice.render();
   });
+  $(':checkbox')
+  .addClass('pull-right')
+  .attr("data-onstyle", "default")
+  .bootstrapToggle({size: 'mini'});
+  $('div.toggle').addClass('pull-right');
 
   $(window).on('hashchange', function() {
     console.log("change occurred");