Skip to content

Commit

Permalink
color widget: support for transparent option
Browse files Browse the repository at this point in the history
This required more changes than expected because evol-colorpicker uses "#0000ffff" instead of "transparent" internally but #0000ffff won't work in many email clients. Now we moved from a single widget to a double widget (evol colorpicker + standard text widget) so to have more control.
  • Loading branch information
bago committed May 21, 2022
1 parent 9f19b57 commit 8ef45f7
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 10 deletions.
7 changes: 5 additions & 2 deletions src/css/app_standalone_material.less
Original file line number Diff line number Diff line change
Expand Up @@ -329,10 +329,13 @@
}
}

.mo .propInput .data-color .color-text {
float: none;
}
.mo .propInput .data-color input[type=text] {
margin-left: 35px;
margin-left: 10px;
&:hover, &:focus {
margin-left: 35px;
margin-left: 10px;
}
}

Expand Down
50 changes: 46 additions & 4 deletions src/css/style_mosaico_tools.less
Original file line number Diff line number Diff line change
Expand Up @@ -362,12 +362,22 @@
padding-right: 30px;
}

.propInput .data-color .color-select,
.propInput .data-color .color-text {
display: inline-block;
}

.propInput .data-color color-text {
float: right;
}
.propInput .data-color input[type=text] {
font-size: 90%;
font-family: monospace;
width: 5.5em;
// width: 5.5em;
width: 8em;
margin: 0;
margin-left: 85px;
// margin-left: 85px;
margin-left: 60px;
background-color: transparent;
border-color: fade(@mosaico-button-border-color, 20%);
box-shadow: none;
Expand All @@ -378,9 +388,11 @@

font-size: 90%;
font-family: monospace;
width: 5.5em;
// width: 5.5em;
width: 8em;
margin: 0;
margin-left: 85px;
// margin-left: 85px;
margin-left: 60px;
/*
background: none #e4dfcf;
border-radius: 5px;
Expand Down Expand Up @@ -434,6 +446,7 @@
margin: 0;

}

}

.objEdit input[type=checkbox] {
Expand Down Expand Up @@ -519,13 +532,42 @@
* COLOR PICKER
***************/

// this is default but our code above takes precedence
.propInput .evo-pointer.evo-transparent,
.evo-transparent {
@checkersize: 6px;
@checkerdark: #BBBBBB;
@checkerlight: #F8F8F8;
// background-image: repeating-linear-gradient(135deg,black,black 1px,white 1px,white 3px);
background-color: @checkerlight;
background-image: linear-gradient(45deg, @checkerdark 25%, transparent 25%), linear-gradient(-45deg, @checkerdark 25%, transparent 25%), linear-gradient(45deg, transparent 75%, @checkerdark 75%), linear-gradient(-45deg, transparent 75%, @checkerdark 75%);
background-size: (@checkersize * 2) (@checkersize * 2);
background-position: 0 0, 0 @checkersize, @checkersize -@checkersize, -@checkersize 0px;
}

// prevent 1px misalignment on firefox
.evo-cp-wrap {
padding: 0 !important;
}

.evo-pop {
right: 0;
width: auto;
.win();
border-width: 0;
padding: 3px;

.ui-widget-content {
position: relative;

.evo-tr-box {
position: absolute;
top: 4px;
padding: 11px;
right: 0;
}
}

.evo-palette td {
padding: 12px;
border: none;
Expand Down
16 changes: 13 additions & 3 deletions src/js/bindings/colorpicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,29 @@ ColorPicker.prototype.constructor = ColorPicker;
ColorPicker.prototype.init = function(element, valueAccessor, allBindings) {
var va = valueAccessor();
var value = va.color;
// check Colorpicker source
var transColor='#0000ffff';

// In order to have a correct dependency tracking in "ifSubs" we have to ensure we use a single "computed" for each editable
// property. Given this binding needs 2 of them, we create a new wrapping computed so to "proxy" the dependencies.
var newDO = ko.computed({
read: value,
write: value,
read: function() {
var val = value();
return (val == 'transparent') ? transColor : val;
// return (val == transColor) ? 'transparent' : val;
},
write: function(newVal) {
return value(newVal == transColor ? 'transparent' : newVal);
// return value(newVal == 'transparent' ? transColor : newVal);
},
disposeWhenNodeIsRemoved: element
});
var newVA = function() {
return newDO;
};

ko.bindingHandlers.value.init(element, newVA, allBindings);
// Do we need this anymore?
// ko.bindingHandlers.value.init(element, newVA, allBindings);

var changePropagator = function(event, color) {
if (typeof color !== 'undefined') newDO(color);
Expand Down
11 changes: 10 additions & 1 deletion src/js/widgets/color.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,17 @@ var widgetPlugin = {
widget: function($, ko, kojqui) {
return {
widget: 'color',
parameters: { transparent: true },
html: function(propAccessor, onfocusbinding, parameters) {
return '<input size="7" type="text" data-bind="colorpicker: { color: ' + propAccessor + ', strings: $root.t(\'Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet.\') }, ' + onfocusbinding + '" />';
var transBinding = typeof parameters.transparent !== 'undefined' && parameters.transparent ? ', transparentColor: true' : '';
var html = '<!-- ko letproxy: { prop: ' + propAccessor + ' } -->';
html += '<div class="color-select">';
html += '<input size="7" type="text" style="width: 0; padding: 0; visibility: hidden;" data-bind="colorpicker: { color: prop' + transBinding + ', strings: $root.t(\'Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet.\') }, ' + onfocusbinding + '" />';
html += '</div><div class="color-text">';
html += '<input size="15" type="text" data-bind="value: prop, ' + onfocusbinding + '" />';
html += '</div>';
html += '<!-- /ko -->';
return html;
}
};
},
Expand Down

0 comments on commit 8ef45f7

Please sign in to comment.