holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

* Api: Can now select no color with color widget

Browse Source
This commit is contained in:
nathangray 2020-05-11 14:58:36 -06:00
parent f337820c83
commit 66ee6576f1
3 changed files with 76 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
api/js/etemplate/et2_widget_color.js
View File

@ -46,23 +46,44 @@ var et2_color = /** @class */ (function (_super) {
var _this =
// Call the inherited constructor
_super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_color._attributes, _child || {})) || this;
_this.cleared = true;
// included via etemplate2.css
//this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css");
_this.input = jQuery("<input type='color' class='et2_color'/>");
_this.setDOMNode(_this.input[0]);
_this.span = jQuery("<span class='et2_color'/>");
_this.image = jQuery("<img src='" + _this.egw().image("non_loaded_bg") + "'/>")
.appendTo(_this.span)
.on("click", function () {
this.input.trigger('click');
}.bind(_this));
_this.input = jQuery("<input type='color'/>").appendTo(_this.span)
.on('change', function () {
this.cleared = false;
this.image.hide();
}.bind(_this));
if (!_this.options.readonly && !_this.options.needed) {
_this.clear = jQuery("<span class='ui-icon clear'/>")
.appendTo(_this.span)
.on("click", function () {
this.set_value('');
return false;
}.bind(_this));
}
_this.setDOMNode(_this.span[0]);
return _this;
}
et2_color.prototype.getValue = function () {
var value = this.input.val();
if (value === '#FFFFFF' || value === '#ffffff') {
if (this.cleared || value === '#FFFFFF' || value === '#ffffff') {
return '';
}
return value;
};
et2_color.prototype.set_value = function (color) {
if (!color) {
color = '#ffffff';
color = '';
}
this.cleared = !color;
this.image.toggle(!color);
this.input.val(color);
};
return et2_color;

37
api/js/etemplate/et2_widget_color.ts
View File

@ -28,6 +28,10 @@ import {ClassWithAttributes} from "./et2_core_inheritance";
export class et2_color extends et2_inputWidget
{
private input: JQuery;
private span: JQuery<HTMLElement>;
private clear: JQuery<HTMLElement>;
private image: JQuery<HTMLImageElement>;
private cleared: boolean = true;
/**
* Constructor
*/
@ -37,15 +41,35 @@ export class et2_color extends et2_inputWidget
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_color._attributes, _child || {}));
// included via etemplate2.css
//this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css");
this.input = jQuery("<input type='color' class='et2_color'/>");
this.setDOMNode(this.input[0]);
this.span = jQuery("<span class='et2_color'/>");
this.image = <JQuery<HTMLImageElement>>jQuery("<img src='" + this.egw().image("non_loaded_bg") + "'/>")
.appendTo(this.span)
.on("click", function() {
this.input.trigger('click')
}.bind(this));
this.input = jQuery("<input type='color'/>").appendTo(this.span)
.on('change', function() {
this.cleared = false;
this.image.hide();
}.bind(this));
if (!this.options.readonly && !this.options.needed)
{
this.clear = jQuery("<span class='ui-icon clear'/>")
.appendTo(this.span)
.on("click", function()
{
this.set_value('');
return false;
}.bind(this)
);
}
this.setDOMNode(this.span[0]);
}
getValue( )
{
var value = this.input.val();
if(value === '#FFFFFF' || value === '#ffffff')
if(this.cleared || value === '#FFFFFF' || value === '#ffffff')
{
return '';
}
@ -56,8 +80,11 @@ export class et2_color extends et2_inputWidget
{
if(!color)
{
color = '#ffffff';
color = '';
}
this.cleared = !color;
this.image.toggle(!color);
this.input.val(color);
}
}

19
api/templates/default/etemplate2.css
View File

@ -323,11 +323,30 @@ button#cancel {
* Color picker widget
*/
.et2_color {
width: 40px;
display:inline-block;
position:relative;
}
.et2_color input {
padding: 0px;
height: 20px;
width: 20px;
border: 1px solid silver;
}
span.et2_color img[src] {
/* Extra-specific to make sure we work in grids & preference popup */
height: 24px;
position: absolute;
top: 0px;
left: 0px;
}
.et2_color .clear {
background-position: -95px -126px;
display:none;
}
.et2_color:hover .clear {
display: inline-block;
}
/**
* Text box
*/