Valid widget

This commit is contained in:
Sylvain Corlay 2015-02-26 18:02:09 -05:00 committed by Sylvain Corlay
parent 21013cb5a3
commit c1a3e7f389
6 changed files with 75 additions and 12 deletions

View File

@ -1477,6 +1477,12 @@ 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 */

View File

@ -10269,6 +10269,12 @@ 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 */

View File

@ -41,19 +41,19 @@ define([
/**
* Handles when the checkbox is clicked.
*
* Calling model.set will trigger all of the other views of the
* Calling model.set will trigger all of the other views of the
* model to update.
*/
var value = this.model.get('value');
this.model.set('value', ! value, {updated_view: this});
this.touch();
},
update : function(options){
/**
* Update the contents of this view
*
* Called when the model is changed. The model may have been
* Called when the model is changed. The model may have been
* changed by another view or by a state update from the back-end.
*/
this.$checkbox.prop('checked', this.model.get('value'));
@ -71,7 +71,6 @@ define([
}
return CheckboxView.__super__.update.apply(this);
},
});
@ -107,12 +106,12 @@ define([
};
this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
},
update : function(options){
/**
* Update the contents of this view
*
* Called when the model is changed. The model may have been
* Called when the model is changed. The model may have been
* changed by another view or by a state update from the back-end.
*/
if (this.model.get('value')) {
@ -136,12 +135,12 @@ define([
}
return ToggleButtonView.__super__.update.apply(this);
},
handle_click: function(e) {
handle_click: function(e) {
/**
* Handles and validates user input.
*
* Calling model.set will trigger all of the other views of the
* Calling model.set will trigger all of the other views of the
* model to update.
*/
var value = this.model.get('value');
@ -150,8 +149,41 @@ define([
},
});
var ValidView = widget.DOMWidgetView.extend({
render: function() {
/**
* Called when view is rendered.
*/
this.$el.addClass("fa widget-valid");
this.model.on("change:value", 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.
*/
if (this.model.get("value")) {
this.$el.removeClass("fa-close").addClass("fa-check");
this.after_displayed(function() {
this.$el.css("color", "green");
}, this);
} else {
this.$el.removeClass("fa-check").addClass("fa-close");
this.after_displayed(function() {
this.$el.css("color", "red");
}, this);
}
}
});
return {
'CheckboxView': CheckboxView,
'ToggleButtonView': ToggleButtonView,
'ValidView': ValidView,
};
});

View File

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

View File

@ -2,7 +2,7 @@ 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

View File

@ -60,17 +60,29 @@ 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)
button_style = CaselessStrEnum(
values=['primary', 'success', 'info', 'warning', 'danger', ''],
values=['primary', 'success', 'info', 'warning', 'danger', ''],
default_value='', allow_none=True, sync=True, help="""Use a
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
"""
_view_name = Unicode('ValidView', sync=True)
# Remove in IPython 4.0
CheckboxWidget = DeprecatedClass(Checkbox, 'CheckboxWidget')
ToggleButtonWidget = DeprecatedClass(ToggleButton, 'ToggleButtonWidget')