commit/galaxy-central: guerler: Ui: Add simple color picker
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.
participants (1)
-
commits-noreply＠bitbucket.org