I’ve got a grid in which two boolean colums appear. What I want is the following:
- Column1:
[list]
- When true: firebrick color and rotate -45 degrees.
- When false: firebrick color, rotate -45 degrees and apply 20% opacity.
[/list] - Column2:
[list]
- When true: yellowstone color and rotate -225 degrees.
- When false: yellowstone color, rotate -225 degrees and apply 20% opacity.
[/list]
As far as I know, I must add some rules to my custom SCSS file:
[code]
.servicio-on .v-icon {
color: firebrick;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
font-family: FontAwesome;
}
.servicio-off .v-icon {
color: firebrick;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
opacity: 0.2;
filter: alpha(opacity=20); /* For IE8 and earlier */
font-family: FontAwesome;
}
.traslado-on .v-icon {
color: yellowgreen;
-ms-transform: rotate(-225deg); /* IE 9 */
-webkit-transform: rotate(-225deg); /* Chrome, Safari, Opera */
transform: rotate(-225deg);
font-family: FontAwesome;
}
.traslado-off .v-icon {
color: yellowgreen;
-ms-transform: rotate(-225deg); /* IE 9 */
-webkit-transform: rotate(-225deg); /* Chrome, Safari, Opera */
transform: rotate(-225deg);
opacity: 0.2;
filter: alpha(opacity=20); /* For IE8 and earlier */
font-family: FontAwesome;
}
[/code]Then, I apply my style to the column that way:
Grid.Column colTraslado = gridNombramientos.getColumn("tieneTraslado");
colTraslado.setHeaderCaption("Traslado");
colTraslado.setRenderer(new HtmlRenderer(), new Converter<String, Boolean>(){
private static final long serialVersionUID = 2939231877605506440L;
@Override
public Boolean convertToModel(String value,
Class<? extends Boolean> targetType, Locale locale)
throws com.vaadin.data.util.converter.Converter.ConversionException {
return false;
}
@Override
public String convertToPresentation(Boolean value,
Class<? extends String> targetType, Locale locale)
throws com.vaadin.data.util.converter.Converter.ConversionException {
String ret;
if(value){
// traslado-on
ret = "<span class=\"v-icon traslado-on" >&#x" + Integer.toHexString(0XF064) + ";</span>";
}else{
// traslado-off
ret = "<span style=\"v-icon traslado-off" >&#x" + Integer.toHexString(0XF064) + ";</span>";
}
return ret;
}
@Override
public Class<Boolean> getModelType() {
return Boolean.class;
}
@Override
public Class<String> getPresentationType() {
return String.class;
}
});When applying that, the icons are shown black with no rotation (default).
What am I doing wrong?
PS: I’ve tried to apply inline style that way, e.g.:
if(value){
// traslado-on
ret = "<span style=\"color: yellowgreen; -ms-transform: rotate(-225deg); -webkit-transform: rotate(-225deg); transform: rotate(-225deg); font-family: FontAwesome;\" >&#x" + Integer.toHexString(0XF064) + ";</span>";
}else{
// traslado-off
ret = "<span style=\"color: yellowgreen; -ms-transform: rotate(-225deg); -webkit-transform: rotate(-225deg); transform: rotate(-225deg); opacity: 0.2; filter: alpha(opacity=20); font-family: FontAwesome;\" >&#x" + Integer.toHexString(0XF064) + ";</span>";
}
That way, icons’ colors and opacities are shown correctly, but rotation is not shown…
Need help 
Thank you in advance!