feature request: parsing multiple values with select property

InfGame commented 2 years ago

I was trying to make a template with a Red, Green and Blue themed that had 3 different shades of each color. I wanted to contol the Theme of the whole template with one property setting but could not find a way to parse all 3 hex values in 1 select property

I don't know if this feature already exists or not but it would be nice to be able to parse multiple values, be it strings, Integers, etc, with one property

bago commented 2 years ago

I'm not sure I understand your suggestion.

Can you both make an example of what the UI should look like and which template code you want to use?

InfGame commented 2 years ago

I'm not sure I understand your suggestion.

Can you both make an example of what the UI should look like and which template code you want to use?

The UI would look the same tho In the code i would like to instance some kind of array where i can save multiple values.

Then when calling it you can pull one of these values out like on a normal Array

For example:

Instancing the property:

Color{ label: Color; widget: select; options: ["#9e0529", "#720009","#f5e6e9"]=Red|["#38713f", "#0b4d1f", "#ebf1eb"]=Green|["#286f9c", "#104166", "#e9f0f5"]=Blue; }

Calling the property:

bago commented 2 years ago

This is completely far from the mosaico logic to deal with variables and theming, so I'd say we won't do that.

if the 2 additional colors can be computed from the first one you could have a look to the Color utility function.

You can have a look at the big button in the versafluid template: https://mosaico.io/templates/versafluid/template-versafluid.html

<td align="center"><a href="" target="_blank" 
  style="display: inline-block;font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; 
    color: #ffffff; text-decoration: none; background-color: #9C010F; 
   padding-top: 15px; padding-bottom: 15px; padding-left: 25px; padding-right: 25px; 
   border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; 
   border-bottom:3px solid #69010A; -ko-border-bottom:@[bigbuttonlightStyle.shadow]px solid @[Color.getBrightness(bigbuttonlightStyle.buttonColor) lt 40 ? Color.lighten(bigbuttonlightStyle.buttonColor,25) : Color.darken(bigbuttonlightStyle.buttonColor,12)]; 
   -ko-font-size: @[bigbuttonlightStyle.size]px; 
   -ko-font-family: @bigbuttonlightStyle.face;  
   -ko-color: @bigbuttonlightStyle.color; 
   -ko-background-color: @bigbuttonlightStyle.buttonColor; 
   -ko-border-radius: @[bigbuttonlightStyle.radius]px;
   -ko--webkit-border-radius:@[bigbuttonlightStyle.radius]px;
   -ko--moz-border-radius: @[bigbuttonlightStyle.radius]px;
   -ko-attr-href:@buttonLink.url" class="mobile-button"
 data-ko-editable="buttonLink.text">Show More →</a></td>

As you can see the "@[Color.getBrightness(bigbuttonlightStyle.buttonColor) lt 40 ? Color.lighten(bigbuttonlightStyle.buttonColor,25) : Color.darken(bigbuttonlightStyle.buttonColor,12)]" reads a single color ( buttonColor ) and then apply to the button shadow a ligher or darker color depending on the original brightness.

You also see that mosaico supports 3 state expression, so you can also define a select to choose between 3 labels:

options: blues|reds|greens;

And then in the template use nested tristate code to choose a specific color depending on the

<div style="color: '#CCDDCC'; 
  -ko-color: @[colorPalette == 'blues' ? '#CCDDCC' : colorPalette == 'reds' ? '#FFEE00' : '#CCDDAA']"
>content</div>

voidlabs / mosaico

feature request: parsing multiple values with select property #648