Merge pull request #7675 from SylvainCorlay/valid

Adding a very simple instance of _Bool widget

IPython/html/static/style/ipython.min.css

@@ -1477,6 +1477,12 b' h6:hover .anchor-link {'
 .widget_item .dropdown-menu li a {
   color: inherit;
 }
+.widget-valid {
+  margin-top: 9px;
+  margin-bottom: 10px;
+  margin-left: 3px;
+  margin-right: 3px;
+}
 .widget-hbox {
   /* Horizontal widgets */
   /* Old browsers */

IPython/html/static/style/style.min.css

@@ -10269,6 +10269,12 b' h6:hover .anchor-link {'
 .widget_item .dropdown-menu li a {
   color: inherit;
 }
+.widget-valid {
+  margin-top: 9px;
+  margin-bottom: 10px;
+  margin-left: 3px;
+  margin-right: 3px;
+}
 .widget-hbox {
   /* Horizontal widgets */
   /* Old browsers */

IPython/html/static/widgets/js/widget_bool.js

@@ -71,7 +71,6 b' define(['
             }
             return CheckboxView.__super__.update.apply(this);
         },
-        
     });
 
 
@@ -150,8 +149,45 b' define(['
         },
     });
 
+
+    var ValidView = widget.DOMWidgetView.extend({
+        render: function() {
+            /**
+             * Called when view is rendered.
+             */
+            this.$el.addClass("widget-valid");
+            this.model.on("change", this.update, this);
+            this.update();
+        },
+        update: function() {
+            /**
+             * Update the contents of this view
+             *
+             * Called when the model is changed.  The model may have been
+             * changed by another view or by a state update from the back-end.
+             */
+            var icon, color, readout;
+            if (this.model.get("value")) {
+                icon = "fa-check";
+                color = "green";
+                readout = "";
+            } else {
+                icon = "fa-close";
+                color = "red";
+                readout = this.model.get("readout");
+            } 
+            this.$el.text(readout);
+            $('<i class="fa"></i>').prependTo(this.$el).addClass(icon);
+            this.after_displayed(function() {
+                this.$el.css("color", color);
+            }, this);
+        }
+    });
+
+
     return {
         'CheckboxView': CheckboxView,
         'ToggleButtonView': ToggleButtonView,
+        'ValidView': ValidView,
     };
 });

IPython/html/static/widgets/less/widgets.less

@@ -209,6 +209,13 b''
     color: inherit;
 }
 
+.widget-valid {
+    margin-top: 9px;
+    margin-bottom: 10px;
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
 .widget-hbox {
     /* Horizontal widgets */
     .hbox();

IPython/html/widgets/__init__.py

@@ -2,7 +2,7 b' from .widget import Widget, DOMWidget, CallbackDispatcher, register'
 
 from .trait_types import Color
 
-from .widget_bool import Checkbox, ToggleButton
+from .widget_bool import Checkbox, ToggleButton, Valid
 from .widget_button import Button
 from .widget_box import Box, FlexBox, HBox, VBox
 from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider

IPython/html/widgets/widget_bool.py

@@ -60,7 +60,6 b' class ToggleButton(_Bool):'
        icon: str
            font-awesome icon name
 """
-    
     _view_name = Unicode('ToggleButtonView', sync=True)
     tooltip = Unicode(help="Tooltip caption of the toggle button.", sync=True)
     icon = Unicode('', help= "Font-awesome icon.", sync=True)
@@ -71,6 +70,20 b' class ToggleButton(_Bool):'
         predefined styling for the button.""")
 
 
+@register('IPython.Valid')
+class Valid(_Bool):
+
+    """Displays a boolean `value` in the form of a green check (True / valid)
+    or a red cross (False / invalid).
+
+    Parameters
+    ----------
+    value: {True,False}
+        value of the Valid widget
+"""
+    readout = Unicode(help="Message displayed when the value is False", sync=True)
+    _view_name = Unicode('ValidView', sync=True)
+
 # Remove in IPython 4.0
 CheckboxWidget = DeprecatedClass(Checkbox, 'CheckboxWidget')
 ToggleButtonWidget = DeprecatedClass(ToggleButton, 'ToggleButtonWidget')