Make it possible to change the color/icon of an entry, depending on the data of the entry

[cloetensbrecht]

It would be nice to have the availability to change the color of an entry depending on the entered data.
For example: When a status field is present and the status is marked as cancelled. We could color a cancelled entry red.

Example of changing the colors:

The same could be done with the entry's icon. We could display a different icon here.

[cloetensbrecht]

Another idea is to add own css properties. In this case it would be possible to add a border, shadow, strikethrough or whatever styling you would like to add except a color. The same logics could be used for the icon property.

EX:

alinea.type('My type', {
  title: alinea.text('Title', {width: 0.5}),
  path: alinea.path('Path', {width: 0.5}),
  [alinea.meta]: {
    // Css configuration
    style: (entryData) => {
      if (entryData.status === "cancelled")
        return {
          color: "#ff0000",
          textDecoration : "line-through"
        }
      return {}
    },
    // Icon configuration
    icon: ({status}) => status === "cancelled" ? <CancelledIcon /> : <DefaultIcon />
  }
})