Add a short mode to the color picker

Author: SylvainCorlay

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();

ipywidgets/static/widgets/less/widgets.less

@@ -182,7 +182,13 @@
 
 .widget-colorpicker {
     /* Button */
-    width : @widget-width;
+    & {
+        width : @widget-width;
+    }
+    &.short {
+        width : @widget-width-short;
+    }
+
     display: flex;
 
     .input-group {

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)