[galaxy-commits] commit/galaxy-central: guerler: Ui: Add simple color picker

12 Feb 2015

1 new commit in galaxy-central:

https://bitbucket.org/galaxy/galaxy-central/commits/32b5ad88cd9b/
Changeset:   32b5ad88cd9b
User:        guerler
Date:        2015-02-13 00:24:56+00:00
Summary:     Ui: Add simple color picker
Affected #:  9 files

diff -r 8563e5b33300a733344a165dff13a1877bccde79 -r 32b5ad88cd9baf12cd0776c54437b445a0561abf client/galaxy/scripts/mvc/tools/tools-parameters.js

--- a/client/galaxy/scripts/mvc/tools/tools-parameters.js
+++ b/client/galaxy/scripts/mvc/tools/tools-parameters.js
@@ -1,8 +1,11 @@
 /**
     This class creates input elements. New input parameter types should be added to the types dictionary.
 */
-define(['utils/utils','mvc/ui/ui-misc', 'mvc/tools/tools-select-content'],
-    function(Utils, Ui, SelectContent) {
+define(['utils/utils',
+        'mvc/ui/ui-misc',
+        'mvc/tools/tools-select-content',
+        'mvc/ui/ui-color-picker'],
+    function(Utils, Ui, SelectContent, ColorPicker) {
 
     // create form view
     return Backbone.Model.extend({
@@ -18,9 +21,10 @@
             'float'             : '_fieldSlider',
             'boolean'           : '_fieldBoolean',
             'drill_down'        : '_fieldDrilldown',
+            'color'             : '_fieldColor',
             'hidden'            : '_fieldHidden',
             'hidden_data'       : '_fieldHidden',
-            'baseurl'           : '_fieldHidden'
+            'baseurl'           : '_fieldHidden',
         },
         
         // initialize
@@ -238,6 +242,18 @@
                     self.app.trigger('refresh');
                 }
             });
+        },
+
+        /** Color picker field
+        */
+        _fieldColor : function(input_def) {
+            var self = this;
+            return new ColorPicker(this.app, {
+                id          : 'field-' + input_def.id,
+                onchange    : function() {
+                    self.app.trigger('refresh');
+                }
+            });
         }
     });
 

diff -r 8563e5b33300a733344a165dff13a1877bccde79 -r 32b5ad88cd9baf12cd0776c54437b445a0561abf client/galaxy/scripts/mvc/ui/ui-color-picker.js
--- /dev/null
+++ b/client/galaxy/scripts/mvc/ui/ui-color-picker.js
@@ -0,0 +1,202 @@
+// dependencies
+define(['utils/utils', 'mvc/ui/ui-misc'], function(Utils, Ui) {
+
+// plugin
+return Backbone.View.extend({
+    colors: {
+        standard: ['c00000','ff0000','ffc000','ffff00','92d050','00b050','00b0f0','0070c0','002060','7030a0'],
+        base    : ['ffffff','000000','eeece1','1f497d','4f81bd','c0504d','9bbb59','8064a2','4bacc6','f79646'],
+        theme   :[['f2f2f2','7f7f7f','ddd9c3','c6d9f0','dbe5f1','f2dcdb','ebf1dd','e5e0ec','dbeef3','fdeada'],
+                  ['d8d8d8','595959','c4bd97','8db3e2','b8cce4','e5b9b7','d7e3bc','ccc1d9','b7dde8','fbd5b5'],
+                  ['bfbfbf','3f3f3f','938953','548dd4','95b3d7','d99694','c3d69b','b2a2c7','92cddc','fac08f'],
+                  ['a5a5a5','262626','494429','17365d','366092','953734','76923c','5f497a','31859b','e36c09'],
+                  ['7f7f7f','0c0c0c','1d1b10','0f243e','244061','632423','4f6128','3f3151','205867','974806']]
+    },
+
+    // default options
+    optionsDefault: {
+        default_color: '#fdeada'
+    },
+
+    // initialize
+    initialize : function(options) {
+        // configure options
+        this.options = Utils.merge(options, this.optionsDefault);
+
+        // create new element
+        this.setElement(this._template());
+        this.$panel = this.$('.ui-color-picker-panel');
+        this.$view = this.$('.ui-color-picker-view');
+        this.$value = this.$('.ui-color-picker-value');
+        this.$header = this.$('.ui-color-picker-header');
+
+        // build panel
+        this._build();
+
+        // hide panel on start up
+        this.visible = false;
+
+        // set initial value
+        this.value(this.options.value);
+
+        // link boxes
+        this.$boxes = this.$('.ui-color-picker-box');
+
+        // add event handler
+        var self = this;
+        this.$boxes.on('click', function() {
+            self.value($(this).css('background-color'));
+            //self.$header.trigger('click');
+        });
+        this.$header.on('click', function() {
+            self.visible = !self.visible;
+            if (self.visible) {
+                self.$view.fadeIn('fast');
+            } else {
+                self.$view.hide();
+            }
+        });
+    },
+
+    // value
+    value : function (new_val) {
+        if (new_val !== undefined) {
+            // set default value
+            if (new_val === null) {
+                new_val = this.options.default_color;
+            }
+
+            // update color value
+            this.$value.css('background-color', new_val);
+            
+            // check selected color in panel
+            this.$('.ui-color-picker-box').empty();
+            this.$(this._getValue()).html(this._templateCheck());
+
+            // trigger custom event
+            this.options.onchange && this.options.onchange(new_val);
+        }
+
+        // return current value
+        return this._getValue();
+    },
+
+    // get value from dom
+    _getValue: function() {
+        var rgb = this.$value.css('background-color');
+        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+        if (rgb) {
+            function hex(x) {
+                return ('0' + parseInt(x).toString(16)).slice(-2);
+            }
+            return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+        } else {
+            return null;
+        }
+    },
+
+    // build panel
+    _build: function() {
+        var $content = this._content({
+            label       : 'Theme Colors',
+            colors      : this.colors.base,
+            padding     : 10
+        });
+        for (var i in this.colors.theme) {
+            var line_def = {};
+            if (i == 0) {
+                line_def['bottom'] = true;
+            } else {
+                if (i != this.colors.theme.length - 1) {
+                    line_def['top']     = true;
+                    line_def['bottom']  = true;
+                } else {
+                    line_def['top']     = true;
+                    line_def['padding'] = 5;
+                }
+            }
+            line_def['colors'] = this.colors.theme[i];
+            this._content(line_def);
+        }
+        this._content({
+            label       : 'Standard Colors',
+            colors      : this.colors.standard,
+            padding     : 5
+        });
+    },
+
+    // create content
+    _content: function(options) {
+        // get parameters
+        var label       = options.label;
+        var colors      = options.colors;
+        var padding     = options.padding;
+        var top         = options.top;
+        var bottom      = options.bottom;
+
+        // create lines
+        var $content = $(this._templateContent());
+
+        // set label
+        var $label = $content.find('.label');
+        if (options.label) {
+            $label.html(options.label);
+        } else {
+            $label.hide();
+        }
+
+        // build line
+        var $line = $content.find('.line');
+        this.$panel.append($content);
+        for (var i in colors) {
+            var $box = $(this._templateBox(colors[i]));
+            if (top) {
+                $box.css('border-top', 'none');
+                $box.css('border-top-left-radius', '0px');
+                $box.css('border-top-right-radius', '0px');
+            }
+            if (bottom) {
+                $box.css('border-bottom', 'none');
+                $box.css('border-bottom-left-radius', '0px');
+                $box.css('border-bottom-right-radius', '0px');
+            }
+            $line.append($box);
+        }
+        if (padding) {
+            $line.css('padding-bottom', padding);
+        }
+        return $content;
+    },
+
+    // check icon
+    _templateCheck: function() {
+        return  '<div class="ui-color-picker-check fa fa-check"/>';
+    },
+
+    // content template
+    _templateContent: function() {
+        return  '<div class="ui-color-picker-content">' +
+                    '<div class="label"/>' +
+                    '<div class="line"/>' +
+                '</div>';
+    },
+
+    // box template
+    _templateBox: function(color) {
+        return '<div id="' + color + '" class="ui-color-picker-box" style="background-color: #' + color + ';"/>';
+    },
+
+    // template
+    _template: function() {
+        return  '<div class="ui-color-picker">' +
+                    '<div class="ui-color-picker-header">' +
+                        '<div class="ui-color-picker-value"/>' +
+                        '<div class="ui-color-picker-label">Select a color</div>' +
+                    '</div>' +
+                    '<div class="ui-color-picker-view ui-input">' +
+                        '<div class="ui-color-picker-panel"/>' +
+                    '</div>'
+                '</div>';
+    }
+});
+});
\ No newline at end of file

diff -r 8563e5b33300a733344a165dff13a1877bccde79 -r 32b5ad88cd9baf12cd0776c54437b445a0561abf lib/galaxy/tools/parameters/basic.py
--- a/lib/galaxy/tools/parameters/basic.py
+++ b/lib/galaxy/tools/parameters/basic.py
@@ -644,6 +644,25 @@
     def get_label( self ):
         return None
 
+class ColorToolParameter( ToolParameter ):
+    """
+    Parameter that stores a color.
+
+    >>> p = ColorToolParameter( None, XML( '<param name="blah" type="color" value="#ffffff"/>' ) )
+    >>> print p.name
+    blah
+    """
+    def __init__( self, tool, input_source ):
+        input_source = ensure_input_source( input_source )
+        ToolParameter.__init__( self, tool, input_source )
+        self.value = input_source.get( 'value' )
+
+    def get_html_field( self, trans=None, value=None, other_values={} ):
+        return form_builder.HiddenField( self.name, self.value )
+
+    def get_initial_value( self, trans, context, history=None ):
+        return self.value
+
 ## This is clearly a HACK, parameters should only be used for things the user
 ## can change, there needs to be a different way to specify this. I'm leaving
 ## it for now to avoid breaking any tools.
@@ -2514,6 +2533,7 @@
     boolean=BooleanToolParameter,
     genomebuild=GenomeBuildParameter,
     select=SelectToolParameter,
+    color=ColorToolParameter,
     data_column=ColumnListParameter,
     hidden=HiddenToolParameter,
     hidden_data=HiddenDataToolParameter,

diff -r 8563e5b33300a733344a165dff13a1877bccde79 -r 32b5ad88cd9baf12cd0776c54437b445a0561abf static/scripts/mvc/tools/tools-parameters.js
--- a/static/scripts/mvc/tools/tools-parameters.js
+++ b/static/scripts/mvc/tools/tools-parameters.js
@@ -1,8 +1,11 @@
 /**
     This class creates input elements. New input parameter types should be added to the types dictionary.
 */
-define(['utils/utils','mvc/ui/ui-misc', 'mvc/tools/tools-select-content'],
-    function(Utils, Ui, SelectContent) {
+define(['utils/utils',
+        'mvc/ui/ui-misc',
+        'mvc/tools/tools-select-content',
+        'mvc/ui/ui-color-picker'],
+    function(Utils, Ui, SelectContent, ColorPicker) {
 
     // create form view
     return Backbone.Model.extend({
@@ -18,9 +21,10 @@
             'float'             : '_fieldSlider',
             'boolean'           : '_fieldBoolean',
             'drill_down'        : '_fieldDrilldown',
+            'color'             : '_fieldColor',
             'hidden'            : '_fieldHidden',
             'hidden_data'       : '_fieldHidden',
-            'baseurl'           : '_fieldHidden'
+            'baseurl'           : '_fieldHidden',
         },
         
         // initialize
@@ -238,6 +242,18 @@
                     self.app.trigger('refresh');
                 }
             });
+        },
+
+        /** Color picker field
+        */
+        _fieldColor : function(input_def) {
+            var self = this;
+            return new ColorPicker(this.app, {
+                id          : 'field-' + input_def.id,
+                onchange    : function() {
+                    self.app.trigger('refresh');
+                }
+            });
         }
     });
 

diff -r 8563e5b33300a733344a165dff13a1877bccde79 -r 32b5ad88cd9baf12cd0776c54437b445a0561abf static/scripts/mvc/ui/ui-color-picker.js
--- /dev/null
+++ b/static/scripts/mvc/ui/ui-color-picker.js
@@ -0,0 +1,202 @@
+// dependencies
+define(['utils/utils', 'mvc/ui/ui-misc'], function(Utils, Ui) {
+
+// plugin
+return Backbone.View.extend({
+    colors: {
+        standard: ['c00000','ff0000','ffc000','ffff00','92d050','00b050','00b0f0','0070c0','002060','7030a0'],
+        base    : ['ffffff','000000','eeece1','1f497d','4f81bd','c0504d','9bbb59','8064a2','4bacc6','f79646'],
+        theme   :[['f2f2f2','7f7f7f','ddd9c3','c6d9f0','dbe5f1','f2dcdb','ebf1dd','e5e0ec','dbeef3','fdeada'],
+                  ['d8d8d8','595959','c4bd97','8db3e2','b8cce4','e5b9b7','d7e3bc','ccc1d9','b7dde8','fbd5b5'],
+                  ['bfbfbf','3f3f3f','938953','548dd4','95b3d7','d99694','c3d69b','b2a2c7','92cddc','fac08f'],
+                  ['a5a5a5','262626','494429','17365d','366092','953734','76923c','5f497a','31859b','e36c09'],
+                  ['7f7f7f','0c0c0c','1d1b10','0f243e','244061','632423','4f6128','3f3151','205867','974806']]
+    },
+
+    // default options
+    optionsDefault: {
+        default_color: '#fdeada'
+    },
+
+    // initialize
+    initialize : function(options) {
+        // configure options
+        this.options = Utils.merge(options, this.optionsDefault);
+
+        // create new element
+        this.setElement(this._template());
+        this.$panel = this.$('.ui-color-picker-panel');
+        this.$view = this.$('.ui-color-picker-view');
+        this.$value = this.$('.ui-color-picker-value');
+        this.$header = this.$('.ui-color-picker-header');
+
+        // build panel
+        this._build();
+
+        // hide panel on start up
+        this.visible = false;
+
+        // set initial value
+        this.value(this.options.value);
+
+        // link boxes
+        this.$boxes = this.$('.ui-color-picker-box');
+
+        // add event handler
+        var self = this;
+        this.$boxes.on('click', function() {
+            self.value($(this).css('background-color'));
+            //self.$header.trigger('click');
+        });
+        this.$header.on('click', function() {
+            self.visible = !self.visible;
+            if (self.visible) {
+                self.$view.fadeIn('fast');
+            } else {
+                self.$view.hide();
+            }
+        });
+    },
+
+    // value
+    value : function (new_val) {
+        if (new_val !== undefined) {
+            // set default value
+            if (new_val === null) {
+                new_val = this.options.default_color;
+            }
+
+            // update color value
+            this.$value.css('background-color', new_val);
+            
+            // check selected color in panel
+            this.$('.ui-color-picker-box').empty();
+            this.$(this._getValue()).html(this._templateCheck());
+
+            // trigger custom event
+            this.options.onchange && this.options.onchange(new_val);
+        }
+
+        // return current value
+        return this._getValue();
+    },
+
+    // get value from dom
+    _getValue: function() {
+        var rgb = this.$value.css('background-color');
+        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+        if (rgb) {
+            function hex(x) {
+                return ('0' + parseInt(x).toString(16)).slice(-2);
+            }
+            return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+        } else {
+            return null;
+        }
+    },
+
+    // build panel
+    _build: function() {
+        var $content = this._content({
+            label       : 'Theme Colors',
+            colors      : this.colors.base,
+            padding     : 10
+        });
+        for (var i in this.colors.theme) {
+            var line_def = {};
+            if (i == 0) {
+                line_def['bottom'] = true;
+            } else {
+                if (i != this.colors.theme.length - 1) {
+                    line_def['top']     = true;
+                    line_def['bottom']  = true;
+                } else {
+                    line_def['top']     = true;
+                    line_def['padding'] = 5;
+                }
+            }
+            line_def['colors'] = this.colors.theme[i];
+            this._content(line_def);
+        }
+        this._content({
+            label       : 'Standard Colors',
+            colors      : this.colors.standard,
+            padding     : 5
+        });
+    },
+
+    // create content
+    _content: function(options) {
+        // get parameters
+        var label       = options.label;
+        var colors      = options.colors;
+        var padding     = options.padding;
+        var top         = options.top;
+        var bottom      = options.bottom;
+
+        // create lines
+        var $content = $(this._templateContent());
+
+        // set label
+        var $label = $content.find('.label');
+        if (options.label) {
+            $label.html(options.label);
+        } else {
+            $label.hide();
+        }
+
+        // build line
+        var $line = $content.find('.line');
+        this.$panel.append($content);
+        for (var i in colors) {
+            var $box = $(this._templateBox(colors[i]));
+            if (top) {
+                $box.css('border-top', 'none');
+                $box.css('border-top-left-radius', '0px');
+                $box.css('border-top-right-radius', '0px');
+            }
+            if (bottom) {
+                $box.css('border-bottom', 'none');
+                $box.css('border-bottom-left-radius', '0px');
+                $box.css('border-bottom-right-radius', '0px');
+            }
+            $line.append($box);
+        }
+        if (padding) {
+            $line.css('padding-bottom', padding);
+        }
+        return $content;
+    },
+
+    // check icon
+    _templateCheck: function() {
+        return  '<div class="ui-color-picker-check fa fa-check"/>';
+    },
+
+    // content template
+    _templateContent: function() {
+        return  '<div class="ui-color-picker-content">' +
+                    '<div class="label"/>' +
+                    '<div class="line"/>' +
+                '</div>';
+    },
+
+    // box template
+    _templateBox: function(color) {
+        return '<div id="' + color + '" class="ui-color-picker-box" style="background-color: #' + color + ';"/>';
+    },
+
+    // template
+    _template: function() {
+        return  '<div class="ui-color-picker">' +
+                    '<div class="ui-color-picker-header">' +
+                        '<div class="ui-color-picker-value"/>' +
+                        '<div class="ui-color-picker-label">Select a color</div>' +
+                    '</div>' +
+                    '<div class="ui-color-picker-view ui-input">' +
+                        '<div class="ui-color-picker-panel"/>' +
+                    '</div>'
+                '</div>';
+    }
+});
+});
\ No newline at end of file

diff -r 8563e5b33300a733344a165dff13a1877bccde79 -r 32b5ad88cd9baf12cd0776c54437b445a0561abf static/scripts/packed/mvc/tools/tools-parameters.js
--- a/static/scripts/packed/mvc/tools/tools-parameters.js
+++ b/static/scripts/packed/mvc/tools/tools-parameters.js
@@ -1,1 +1,1 @@
-define(["utils/utils","mvc/ui/ui-misc","mvc/tools/tools-select-content"],function(b,c,a){return Backbone.Model.extend({types:{text:"_fieldText",select:"_fieldSelect",data_column:"_fieldSelect",genomebuild:"_fieldSelect",data:"_fieldData",data_collection:"_fieldData",integer:"_fieldSlider","float":"_fieldSlider","boolean":"_fieldBoolean",drill_down:"_fieldDrilldown",hidden:"_fieldHidden",hidden_data:"_fieldHidden",baseurl:"_fieldHidden"},initialize:function(e,d){this.app=e},create:function(d){if(d.value===undefined){d.value=null}if(d.default_value===undefined){d.default_value=d.value}var f=null;var e=this.types[d.type];if(e&&typeof(this[e])==="function"){f=this[e].call(this,d)}if(!f){this.app.incompatible=true;if(d.options){f=this._fieldSelect(d)}else{f=this._fieldText(d)}console.debug("tools-form::_addRow() : Auto matched field type ("+d.type+").")}if(d.value!==undefined){f.value(d.value)}return f},_fieldData:function(d){if(!this.app.options.is_dynamic){d.info="Data input '"+d.name+"' ("+b.textify(d.extensions.toString())+")";d.value=null;return this._fieldHidden(d)}var e=this;return new a.View(this.app,{id:"field-"+d.id,extensions:d.extensions,optional:d.optional,multiple:d.multiple,type:d.type,data:d.options,onchange:function(){e.app.trigger("refresh")}})},_fieldSelect:function(d){if(!this.app.options.is_dynamic&&d.is_dynamic){return this._fieldText(d)}if(d.type=="data_column"){d.error_text="Missing columns in referenced dataset."}if(d.type=="genomebuild"){d.searchable=true}var f=[];for(var g in d.options){var h=d.options[g];f.push({label:h[0],value:h[1]})}var j=c.Select;switch(d.display){case"checkboxes":j=c.Checkbox;break;case"radio":j=c.Radio;break}var e=this;return new j.View({id:"field-"+d.id,data:f,error_text:d.error_text||"No options available",multiple:d.multiple,searchable:d.searchable,onchange:function(){e.app.trigger("refresh")}})},_fieldDrilldown:function(d){if(!this.app.options.is_dynamic&&d.is_dynamic){return this._fieldText(d)}var e=this;return new c.Drilldown.View({id:"field-"+d.id,data:d.options,display:d.display,onchange:function(){e.app.trigger("refresh")}})},_fieldText:function(d){if(d.options){d.area=d.multiple;if(!b.validate(d.value)){d.value=""}else{if(d.value instanceof Array){d.value=value.toString()}else{d.value=String(d.value).replace(/[\[\]'"\s]/g,"");if(d.multiple){d.value=d.value.replace(/,/g,"\n")}}}}var e=this;return new c.Input({id:"field-"+d.id,area:d.area,onchange:function(){e.app.trigger("refresh")}})},_fieldSlider:function(d){var e=this;return new c.Slider.View({id:"field-"+d.id,precise:d.type=="float",min:d.min,max:d.max,onchange:function(){e.app.trigger("refresh")}})},_fieldHidden:function(d){return new c.Hidden({id:"field-"+d.id,info:d.info})},_fieldBoolean:function(d){var e=this;return new c.RadioButton.View({id:"field-"+d.id,data:[{label:"Yes",value:"true"},{label:"No",value:"false"}],onchange:function(){e.app.trigger("refresh")}})}});return{View:View}});
\ No newline at end of file
+define(["utils/utils","mvc/ui/ui-misc","mvc/tools/tools-select-content","mvc/ui/ui-color-picker"],function(c,d,a,b){return Backbone.Model.extend({types:{text:"_fieldText",select:"_fieldSelect",data_column:"_fieldSelect",genomebuild:"_fieldSelect",data:"_fieldData",data_collection:"_fieldData",integer:"_fieldSlider","float":"_fieldSlider","boolean":"_fieldBoolean",drill_down:"_fieldDrilldown",color:"_fieldColor",hidden:"_fieldHidden",hidden_data:"_fieldHidden",baseurl:"_fieldHidden",},initialize:function(f,e){this.app=f},create:function(e){if(e.value===undefined){e.value=null}if(e.default_value===undefined){e.default_value=e.value}var g=null;var f=this.types[e.type];if(f&&typeof(this[f])==="function"){g=this[f].call(this,e)}if(!g){this.app.incompatible=true;if(e.options){g=this._fieldSelect(e)}else{g=this._fieldText(e)}console.debug("tools-form::_addRow() : Auto matched field type ("+e.type+").")}if(e.value!==undefined){g.value(e.value)}return g},_fieldData:function(e){if(!this.app.options.is_dynamic){e.info="Data input '"+e.name+"' ("+c.textify(e.extensions.toString())+")";e.value=null;return this._fieldHidden(e)}var f=this;return new a.View(this.app,{id:"field-"+e.id,extensions:e.extensions,optional:e.optional,multiple:e.multiple,type:e.type,data:e.options,onchange:function(){f.app.trigger("refresh")}})},_fieldSelect:function(e){if(!this.app.options.is_dynamic&&e.is_dynamic){return this._fieldText(e)}if(e.type=="data_column"){e.error_text="Missing columns in referenced dataset."}if(e.type=="genomebuild"){e.searchable=true}var g=[];for(var h in e.options){var j=e.options[h];g.push({label:j[0],value:j[1]})}var k=d.Select;switch(e.display){case"checkboxes":k=d.Checkbox;break;case"radio":k=d.Radio;break}var f=this;return new k.View({id:"field-"+e.id,data:g,error_text:e.error_text||"No options available",multiple:e.multiple,searchable:e.searchable,onchange:function(){f.app.trigger("refresh")}})},_fieldDrilldown:function(e){if(!this.app.options.is_dynamic&&e.is_dynamic){return this._fieldText(e)}var f=this;return new d.Drilldown.View({id:"field-"+e.id,data:e.options,display:e.display,onchange:function(){f.app.trigger("refresh")}})},_fieldText:function(e){if(e.options){e.area=e.multiple;if(!c.validate(e.value)){e.value=""}else{if(e.value instanceof Array){e.value=value.toString()}else{e.value=String(e.value).replace(/[\[\]'"\s]/g,"");if(e.multiple){e.value=e.value.replace(/,/g,"\n")}}}}var f=this;return new d.Input({id:"field-"+e.id,area:e.area,onchange:function(){f.app.trigger("refresh")}})},_fieldSlider:function(e){var f=this;return new d.Slider.View({id:"field-"+e.id,precise:e.type=="float",min:e.min,max:e.max,onchange:function(){f.app.trigger("refresh")}})},_fieldHidden:function(e){return new d.Hidden({id:"field-"+e.id,info:e.info})},_fieldBoolean:function(e){var f=this;return new d.RadioButton.View({id:"field-"+e.id,data:[{label:"Yes",value:"true"},{label:"No",value:"false"}],onchange:function(){f.app.trigger("refresh")}})},_fieldColor:function(e){var f=this;return new b(this.app,{id:"field-"+e.id,onchange:function(){f.app.trigger("refresh")}})}});return{View:View}});
\ No newline at end of file

diff -r 8563e5b33300a733344a165dff13a1877bccde79 -r 32b5ad88cd9baf12cd0776c54437b445a0561abf static/scripts/packed/mvc/ui/ui-color-picker.js
--- /dev/null
+++ b/static/scripts/packed/mvc/ui/ui-color-picker.js
@@ -0,0 +1,1 @@
+define(["utils/utils","mvc/ui/ui-misc"],function(a,b){return Backbone.View.extend({colors:{standard:["c00000","ff0000","ffc000","ffff00","92d050","00b050","00b0f0","0070c0","002060","7030a0"],base:["ffffff","000000","eeece1","1f497d","4f81bd","c0504d","9bbb59","8064a2","4bacc6","f79646"],theme:[["f2f2f2","7f7f7f","ddd9c3","c6d9f0","dbe5f1","f2dcdb","ebf1dd","e5e0ec","dbeef3","fdeada"],["d8d8d8","595959","c4bd97","8db3e2","b8cce4","e5b9b7","d7e3bc","ccc1d9","b7dde8","fbd5b5"],["bfbfbf","3f3f3f","938953","548dd4","95b3d7","d99694","c3d69b","b2a2c7","92cddc","fac08f"],["a5a5a5","262626","494429","17365d","366092","953734","76923c","5f497a","31859b","e36c09"],["7f7f7f","0c0c0c","1d1b10","0f243e","244061","632423","4f6128","3f3151","205867","974806"]]},optionsDefault:{default_color:"#fdeada"},initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template());this.$panel=this.$(".ui-color-picker-panel");this.$view=this.$(".ui-color-picker-view");this.$value=this.$(".ui-color-picker-value");this.$header=this.$(".ui-color-picker-header");this._build();this.visible=false;this.value(this.options.value);this.$boxes=this.$(".ui-color-picker-box");var c=this;this.$boxes.on("click",function(){c.value($(this).css("background-color"))});this.$header.on("click",function(){c.visible=!c.visible;if(c.visible){c.$view.fadeIn("fast")}else{c.$view.hide()}})},value:function(c){if(c!==undefined){if(c===null){c=this.options.default_color}this.$value.css("background-color",c);this.$(".ui-color-picker-box").empty();this.$(this._getValue()).html(this._templateCheck());this.options.onchange&&this.options.onchange(c)}return this._getValue()},_getValue:function(){var c=this.$value.css("background-color");c=c.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);if(c){function d(e){return("0"+parseInt(e).toString(16)).slice(-2)}return"#"+d(c[1])+d(c[2])+d(c[3])}else{return null}},_build:function(){var d=this._content({label:"Theme Colors",colors:this.colors.base,padding:10});for(var e in this.colors.theme){var c={};if(e==0){c.bottom=true}else{if(e!=this.colors.theme.length-1){c.top=true;c.bottom=true}else{c.top=true;c.padding=5}}c.colors=this.colors.theme[e];this._content(c)}this._content({label:"Standard Colors",colors:this.colors.standard,padding:5})},_content:function(n){var l=n.label;var d=n.colors;var k=n.padding;var h=n.top;var c=n.bottom;var f=$(this._templateContent());var j=f.find(".label");if(n.label){j.html(n.label)}else{j.hide()}var m=f.find(".line");this.$panel.append(f);for(var g in d){var e=$(this._templateBox(d[g]));if(h){e.css("border-top","none");e.css("border-top-left-radius","0px");e.css("border-top-right-radius","0px")}if(c){e.css("border-bottom","none");e.css("border-bottom-left-radius","0px");e.css("border-bottom-right-radius","0px")}m.append(e)}if(k){m.css("padding-bottom",k)}return f},_templateCheck:function(){return'<div class="ui-color-picker-check fa fa-check"/>'},_templateContent:function(){return'<div class="ui-color-picker-content"><div class="label"/><div class="line"/></div>'},_templateBox:function(c){return'<div id="'+c+'" class="ui-color-picker-box" style="background-color: #'+c+';"/>'},_template:function(){return'<div class="ui-color-picker"><div class="ui-color-picker-header"><div class="ui-color-picker-value"/><div class="ui-color-picker-label">Select a color</div></div><div class="ui-color-picker-view ui-input"><div class="ui-color-picker-panel"/></div>';"</div>"}})});
\ No newline at end of file

diff -r 8563e5b33300a733344a165dff13a1877bccde79 -r 32b5ad88cd9baf12cd0776c54437b445a0561abf static/style/blue/base.css
--- a/static/style/blue/base.css
+++ b/static/style/blue/base.css
@@ -1453,6 +1453,11 @@
 .ui-select .select2-container{width:100%}
 .ui-select select{position:relative;top:0px;height:27px;width:100%;padding-left:5px;padding-right:20px;cursor:pointer;background:transparent;-webkit-appearance:none;border:1px solid #bfbfbf;-moz-border-radius:3px;border-radius:3px}
 .ui-select-content .ui-options{float:left;padding-top:2px}
+.ui-color-picker .ui-color-picker-header{cursor:pointer}
+.ui-color-picker .ui-color-picker-value{float:left;border-radius:3px;border:solid 1px #000000;width:12px;height:12px;margin-bottom:10px;margin-right:5px}
+.ui-color-picker .ui-color-picker-label{float:left;line-height:1.2em}
+.ui-color-picker .ui-color-picker-view{height:100%;overflow:auto;display:none;float:left}.ui-color-picker .ui-color-picker-view .ui-color-picker-panel{height:100%;overflow:auto;width:230px}.ui-color-picker .ui-color-picker-view .ui-color-picker-panel .ui-color-picker-content{clear:both;margin-bottom:15px}.ui-color-picker .ui-color-picker-view .ui-color-picker-panel .ui-color-picker-content .label{padding-bottom:2px}
+.ui-color-picker .ui-color-picker-view .ui-color-picker-panel .ui-color-picker-content .line{clear:both}.ui-color-picker .ui-color-picker-view .ui-color-picker-panel .ui-color-picker-content .line .ui-color-picker-box{cursor:pointer;float:left;margin-right:5px;border:solid 1px #c0c0c0;width:15px;height:15px;border-radius:2px}.ui-color-picker .ui-color-picker-view .ui-color-picker-panel .ui-color-picker-content .line .ui-color-picker-box .ui-color-picker-check{color:black;font-size:1.2em;position:relative;left:1px}
 .libraryRow{background-color:#ebd9b2}
 .datasetHighlighted{background-color:#f9f9f9}
 .libraryItemDeleted-True{font-style:italic}

diff -r 8563e5b33300a733344a165dff13a1877bccde79 -r 32b5ad88cd9baf12cd0776c54437b445a0561abf static/style/src/less/ui.less
--- a/static/style/src/less/ui.less
+++ b/static/style/src/less/ui.less
@@ -440,4 +440,59 @@
         float: left;
         padding-top: 2px;
     }
+}
+
+.ui-color-picker {
+    .ui-color-picker-header {
+        cursor: pointer;
+    }
+    .ui-color-picker-value {
+        float: left;
+        border-radius: 3px;
+        border: solid 1px #000000;
+        width: 12px;
+        height: 12px;
+        margin-bottom: 10px;
+        margin-right: 5px;
+    }
+    .ui-color-picker-label {
+        float: left;
+        line-height: 1.2em;
+    }
+    .ui-color-picker-view {
+        height: 100%;
+        overflow: auto;
+        display: none;
+        float: left;
+        .ui-color-picker-panel {
+            height: 100%;
+            overflow: auto;
+            width: 230px;
+            .ui-color-picker-content {
+                clear: both;
+                margin-bottom: 15px;
+                .label {
+                    padding-bottom: 2px;
+                }
+                .line {
+                    clear: both;
+                    .ui-color-picker-box {
+                        cursor: pointer;
+                        float: left;
+                        margin-right: 5px;
+                        border: solid 1px #c0c0c0;
+                        width: 15px;
+                        height: 15px;
+                        border-radius: 2px;
+                        .ui-color-picker-check {
+                            color: black;
+                            font-size: 1.2em;
+                            position: relative;
+                            left: 1px;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
\ No newline at end of file

Repository URL: https://bitbucket.org/galaxy/galaxy-central/

--

This is a commit notification from bitbucket.org. You are receiving
this because you have the service enabled, addressing the recipient of
this email.

    

[galaxy-commits] commit/galaxy-central: guerler: Ui: Add simple color picker

commits-noreply＠bitbucket.org