Skip to content

Add 2px margin to all widgets but containers #216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 30, 2015
Merged

Add 2px margin to all widgets but containers #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d97ca15
Fix widget alignment and add 2px margin for non-container widgets
SylvainCorlay Oct 29, 2015
3ab38ad
Fix color widget button grouping
SylvainCorlay Oct 29, 2015
1d4d291
Progress and toggle button margins
SylvainCorlay Oct 30, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ipywidgets/static/widgets/js/widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ define(["nbextensions/widgets/widgets/js/utils",
"underscore",
"backbone",
"jquery"
], function(utils, managerBase, _, Backbone, $){
], function(utils, managerBase, _, Backbone, $) {
"use strict";

var unpack_models = function unpack_models(value, model) {
Expand Down
6 changes: 3 additions & 3 deletions ipywidgets/static/widgets/js/widget_bool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ define([
* Called when view is rendered.
*/
this.$el
.addClass('widget-hbox widget-checkbox');
.addClass('ipy-widget widget-hbox widget-checkbox');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd think ipywidget would make more sense, since that's the name of the repo, no?

this.$label = $('<div />')
.addClass('widget-label')
.appendTo(this.$el)
Expand Down Expand Up @@ -84,7 +84,7 @@ define([
*/
var that = this;
this.setElement($('<button />')
.addClass('btn btn-default')
.addClass('ipy-widget widget-button btn btn-default')
.attr('type', 'button')
.on('click', function (e) {
e.preventDefault();
Expand Down Expand Up @@ -158,7 +158,7 @@ define([
/**
* Called when view is rendered.
*/
this.$el.addClass("widget-valid");
this.$el.addClass("ipy-widget widget-valid");
this.listenTo(this.model, "change", this.update, this);
this.update();
},
Expand Down
3 changes: 2 additions & 1 deletion ipywidgets/static/widgets/js/widget_box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ define([
initialize: function() {
// Public constructor
ProxyView.__super__.initialize.apply(this, arguments);
this.$el.addClass("ipy-widget widget-container");
this.$box = this.$el;
this.child_promise = Promise.resolve();
},
Expand Down Expand Up @@ -117,8 +118,8 @@ define([
/**
* Called when view is rendered.
*/
this.$el.addClass("ipy-widget widget-container widget-box");
this.$box = this.$el;
this.$box.addClass('widget-box');
this.children_views.update(this.model.get('children'));
this.update_overflow_x();
this.update_overflow_y();
Expand Down
2 changes: 1 addition & 1 deletion ipywidgets/static/widgets/js/widget_button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ define([
* Called when view is rendered.
*/
this.setElement($("<button />")
.addClass('widget-button btn btn-default'));
.addClass('ipy-widget widget-button btn btn-default'));
this.$el.attr("data-toggle", "tooltip");
this.listenTo(this.model, 'change:button_style', function(model, value) {
this.update_button_style();
Expand Down
7 changes: 4 additions & 3 deletions ipywidgets/static/widgets/js/widget_color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ define([

var ColorPicker = widget.DOMWidgetView.extend({
render: function() {
this.$el.addClass("widget-hbox widget-colorpicker");
this.$el.addClass("ipy-widget widget-hbox widget-colorpicker");

this.$label = $("<div />")
.addClass("widget-label")
.appendTo(this.$el);

this.$color_container = $("<div />")
.addClass("hbox")
.addClass("widget-hbox input-group")
.appendTo(this.$el);

this.$textbox = $("<input type='text' />")
Expand All @@ -26,7 +26,8 @@ define([
.val(this.model.get("value"));

this.$colorpicker = $("<input type='color' />")
.addClass("btn btn-default")
.addClass("input-group-addon")
.css("width", "32px")
.appendTo(this.$color_container);

this.listenTo(this.model, "change:value", this._update_value, this);
Expand Down
9 changes: 8 additions & 1 deletion ipywidgets/static/widgets/js/widget_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ define([
var Button = widget.DOMWidgetView.extend({
/* Very simple view for a gamepad button. */

render : function(){
render : function() {
this.$el.addClass('ipy-widget widget-controller-button');

this.$support = $('<div />').css({
'position': 'relative',
'margin': '1px',
Expand Down Expand Up @@ -50,6 +52,9 @@ define([
/* Very simple view for a gamepad axis. */

render : function() {

this.$el.addClass('ipy-widget widget-controller-axis');

this.$el.css({
'width': '16px',
'padding': '4px',
Expand Down Expand Up @@ -262,6 +267,8 @@ define([
},

render: function(){
this.$el.addClass('ipy-widget widget-controller');

this.$box = this.$el;

this.$label = $('<div />')
Expand Down
9 changes: 5 additions & 4 deletions ipywidgets/static/widgets/js/widget_image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,19 @@ if (typeof define !== 'function') { var define = require('./requirejs-shim')(mod
define([
"nbextensions/widgets/widgets/js/widget",
"jquery",
], function(widget, $){
], function(widget, $) {

var ImageView = widget.DOMWidgetView.extend({
render : function(){
render : function() {
/**
* Called when view is rendered.
*/
this.setElement($("<img />"));
this.setElement($("<img />")
.addClass("ipy-widget widget-image"));
this.update(); // Set defaults.
},

update : function(){
update : function() {
/**
* Update the contents of this view
*
Expand Down
21 changes: 11 additions & 10 deletions ipywidgets/static/widgets/js/widget_int.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ define([
"underscore",
"jqueryui",
"bootstrap"
], function(widget, _, $){
], function(widget, _, $) {

var IntSliderView = widget.DOMWidgetView.extend({
render : function(){
render : function() {
/**
* Called when view is rendered.
*/
this.$el
.addClass('widget-hbox widget-slider');
.addClass('ipy-widget widget-hbox widget-slider');
this.$label = $('<div />')
.appendTo(this.$el)
.addClass('widget-label')
Expand Down Expand Up @@ -82,7 +82,7 @@ define([
}
},

update : function(options){
update : function(options) {
/**
* Update the contents of this view
*
Expand Down Expand Up @@ -141,7 +141,7 @@ define([
if(value > max) {
value = max;
}
else if(value < min){
else if(value < min) {
value = min;
}
this.$slider.slider('option', 'value', value);
Expand Down Expand Up @@ -339,12 +339,12 @@ define([


var IntTextView = widget.DOMWidgetView.extend({
render : function(){
render : function() {
/**
* Called when view is rendered.
*/
this.$el
.addClass('widget-hbox widget-numeric-text');
.addClass('ipy-widget widget-hbox widget-numeric-text');
this.$label = $('<div />')
.appendTo(this.$el)
.addClass('widget-label')
Expand Down Expand Up @@ -372,7 +372,7 @@ define([
}
},

update : function(options){
update : function(options) {
/**
* Update the contents of this view
*
Expand Down Expand Up @@ -467,10 +467,11 @@ define([


var ProgressView = widget.DOMWidgetView.extend({
render : function(){
render : function() {
/**
* Called when view is rendered.
*/
this.$el.addClass('ipy-widget widget-progress');
this.$label = $('<div />')
.appendTo(this.$el)
.addClass('widget-label')
Expand Down Expand Up @@ -511,7 +512,7 @@ define([
}
},

update : function(){
update : function() {
/**
* Update the contents of this view
*
Expand Down
32 changes: 16 additions & 16 deletions ipywidgets/static/widgets/js/widget_selection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ define([
"jquery",
"underscore",
"bootstrap",
], function(widget, utils, $, _){
], function(widget, utils, $, _) {

var DropdownView = widget.DOMWidgetView.extend({
render : function(){
render : function() {
/**
* Called when view is rendered.
*/
this.$el
.addClass('widget-hbox widget-dropdown');
.addClass('ipy-widget widget-hbox widget-dropdown');
this.$label = $('<div />')
.appendTo(this.$el)
.addClass('widget-label')
Expand Down Expand Up @@ -52,7 +52,7 @@ define([
this.update();
},

update : function(options){
update : function(options) {
/**
* Update the contents of this view
*
Expand Down Expand Up @@ -162,12 +162,12 @@ define([


var RadioButtonsView = widget.DOMWidgetView.extend({
render : function(){
render : function() {
/**
* Called when view is rendered.
*/
this.$el
.addClass('widget-hbox widget-radio');
.addClass('ipy-widget widget-hbox widget-radio');
this.$label = $('<div />')
.appendTo(this.$el)
.addClass('widget-label')
Expand All @@ -178,7 +178,7 @@ define([
this.update();
},

update : function(options){
update : function(options) {
/**
* Update the contents of this view
*
Expand Down Expand Up @@ -279,7 +279,7 @@ define([
* Called when view is rendered.
*/
this.$el
.addClass('widget-hbox widget-toggle-buttons');
.addClass('ipy-widget widget-hbox widget-toggle-buttons');
this.$label = $('<div />')
.appendTo(this.$el)
.addClass('widget-label')
Expand All @@ -295,7 +295,7 @@ define([
this.update();
},

update : function(options){
update : function(options) {
/**
* Update the contents of this view
*
Expand Down Expand Up @@ -426,12 +426,12 @@ define([


var SelectView = widget.DOMWidgetView.extend({
render : function(){
render : function() {
/**
* Called when view is rendered.
*/
this.$el
.addClass('widget-hbox widget-select');
.addClass('ipy-widget widget-hbox widget-select');
this.$label = $('<div />')
.appendTo(this.$el)
.addClass('widget-label')
Expand All @@ -444,7 +444,7 @@ define([
this.update();
},

update : function(options){
update : function(options) {
/**
* Update the contents of this view
*
Expand Down Expand Up @@ -533,8 +533,8 @@ define([


var SelectMultipleView = SelectView.extend({
render: function(){
/**
render: function() {
/**n
* Called when view is rendered.
*/
SelectMultipleView.__super__.render.apply(this);
Expand All @@ -548,7 +548,7 @@ define([
return this;
},

update: function(){
update: function() {
/**
* Update the contents of this view
*
Expand All @@ -559,7 +559,7 @@ define([
this.$listbox.val(this.model.get('selected_labels'));
},

handle_click: function(){
handle_click: function() {
/**
* Overload click from select
*
Expand Down
10 changes: 5 additions & 5 deletions ipywidgets/static/widgets/js/widget_selectioncontainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ define([
"nbextensions/widgets/widgets/js/utils",
"jquery",
"bootstrap",
], function(widget, utils, $){
], function(widget, utils, $) {

var AccordionView = widget.DOMWidgetView.extend({
initialize: function(){
Expand All @@ -23,14 +23,14 @@ define([
}, this);
},

render: function(){
render: function() {
/**
* Called when view is rendered.
*/
var guid = 'panel-group' + utils.uuid();
this.$el
.attr('id', guid)
.addClass('panel-group');
.addClass('ipy-widget panel-group');
this.listenTo(this.model, 'change:selected_index', function(model, value, options) {
this.update_selected_index(options);
}, this);
Expand Down Expand Up @@ -132,7 +132,7 @@ define([
.attr('data-toggle', 'collapse')
.attr('data-parent', '#' + this.$el.attr('id'))
.attr('href', '#' + uuid)
.click(function(evt){
.click(function(evt) {

// Calling model.set will trigger all of the other views of the
// model to update.
Expand Down Expand Up @@ -192,7 +192,7 @@ define([
}, this);
},

render: function(){
render: function() {
/**
* Called when view is rendered.
*/
Expand Down
Loading