From 8aece7c43e0043b23fc642a594b91c773d5c358e Mon Sep 17 00:00:00 2001 From: Sylvain Corlay Date: Sat, 31 Oct 2015 02:28:08 -0400 Subject: [PATCH 1/2] Resize Dropdown and Colopicker to their width --- ipywidgets/static/widgets/js/widget_color.js | 1 - .../static/widgets/js/widget_selection.js | 11 +--------- ipywidgets/static/widgets/less/widgets.less | 22 ++++++++++++++++++- 3 files changed, 22 insertions(+), 12 deletions(-) diff --git a/ipywidgets/static/widgets/js/widget_color.js b/ipywidgets/static/widgets/js/widget_color.js index 5b46f3fb88..daed4c6e92 100644 --- a/ipywidgets/static/widgets/js/widget_color.js +++ b/ipywidgets/static/widgets/js/widget_color.js @@ -27,7 +27,6 @@ define([ this.$colorpicker = $("") .addClass("input-group-addon") - .css("width", "32px") .appendTo(this.$color_container); this.listenTo(this.model, "change:value", this._update_value, this); diff --git a/ipywidgets/static/widgets/js/widget_selection.js b/ipywidgets/static/widgets/js/widget_selection.js index ee3d046f9f..526280e4d7 100644 --- a/ipywidgets/static/widgets/js/widget_selection.js +++ b/ipywidgets/static/widgets/js/widget_selection.js @@ -128,17 +128,8 @@ define([ this.$droplabel.css(name, value); this.$dropbutton.css(name, value); this.$droplist.css(name, value); - } else if (name == 'width') { - this.$droplist.css(name, value); - this.$droplabel.css(name, value); - } else if (name == 'height') { - this.$droplabel.css(name, value); - this.$dropbutton.css(name, value); - } else if (name == 'margin' || name == 'padding') { + } else { this.$el.css(name, value); - } else { - this.$droplist.css(name, value); - this.$droplabel.css(name, value); } }, diff --git a/ipywidgets/static/widgets/less/widgets.less b/ipywidgets/static/widgets/less/widgets.less index dc11d0c3fe..72062f6d69 100644 --- a/ipywidgets/static/widgets/less/widgets.less +++ b/ipywidgets/static/widgets/less/widgets.less @@ -187,7 +187,12 @@ .widget-colorpicker { /* Button */ - width : @widget-width-short; + width : @widget-width; + display: flex; + + .input-group { + flex-grow: 1; + } } .widget-button { @@ -259,6 +264,20 @@ width : @widget-width; } +.widget-dropdown { + /* Dropdown */ + width : @widget-width; + + .widget_item { + display: flex; + flex-grow: 1; + } + + .widget-combo-btn { + flex-grow: 1; + } +} + .widget-numeric-text { /* Single Line Textbox - used for IntTextView and FloatTextView */ width : @widget-width-short; @@ -324,6 +343,7 @@ input[type="color"] { height: 32px; + width: 28px; padding: 1px; } From 54567a6705b648a0f6a8bf972d2affbc3e4a2592 Mon Sep 17 00:00:00 2001 From: Sylvain Corlay Date: Mon, 2 Nov 2015 15:35:41 -0500 Subject: [PATCH 2/2] Add a short mode to the color picker --- ipywidgets/static/widgets/js/widget_color.js | 16 ++++++++++++++++ ipywidgets/static/widgets/less/widgets.less | 8 +++++++- ipywidgets/widgets/widget_color.py | 3 ++- 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/ipywidgets/static/widgets/js/widget_color.js b/ipywidgets/static/widgets/js/widget_color.js index daed4c6e92..89123372d5 100644 --- a/ipywidgets/static/widgets/js/widget_color.js +++ b/ipywidgets/static/widgets/js/widget_color.js @@ -31,9 +31,11 @@ define([ this.listenTo(this.model, "change:value", this._update_value, this); this.listenTo(this.model, "change:description", this._update_description, this); + this.listenTo(this.model, "change:short", this._update_short, this); this.$colorpicker.on("change", this._picker_change.bind(this)); this.$textbox.on("change", this._text_change.bind(this)); + this._update_short(); this._update_value(); this._update_description(); }, @@ -46,11 +48,25 @@ define([ var description = this.model.get('description'); if (description.length === 0) { this.$label.hide(); + this.$color_container.css("justify-content", "auto"); } else { this.typeset(this.$label, description); + this.$color_container.css("justify-content", "flex-end"); this.$label.show(); } }, + _update_short: function() { + var short = this.model.get('short'); + if (short) { + this.$el.addClass('short'); + this.$colorpicker.removeClass("input-group-addon"); + this.$textbox.hide(); + } else { + this.$el.removeClass('short'); + this.$colorpicker.addClass("input-group-addon"); + this.$textbox.show(); + } + }, _picker_change: function() { this.model.set("value", this.$colorpicker.val()); this.touch(); diff --git a/ipywidgets/static/widgets/less/widgets.less b/ipywidgets/static/widgets/less/widgets.less index 72062f6d69..c090de4c3c 100644 --- a/ipywidgets/static/widgets/less/widgets.less +++ b/ipywidgets/static/widgets/less/widgets.less @@ -187,7 +187,13 @@ .widget-colorpicker { /* Button */ - width : @widget-width; + & { + width : @widget-width; + } + &.short { + width : @widget-width-short; + } + display: flex; .input-group { diff --git a/ipywidgets/widgets/widget_color.py b/ipywidgets/widgets/widget_color.py index dc6d35a5c5..d0d1581bcb 100644 --- a/ipywidgets/widgets/widget_color.py +++ b/ipywidgets/widgets/widget_color.py @@ -8,12 +8,13 @@ from .widget import DOMWidget, register from .trait_types import Color -from traitlets import Unicode +from traitlets import Unicode, Bool @register('IPython.ColorPicker') class ColorPicker(DOMWidget): value = Color('black', sync=True) + short = Bool(sync=True) description = Unicode(sync=True) _view_name = Unicode('ColorPicker', sync=True)