Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
cloetensbrecht opened this issue Dec 17, 2023 · 1 comment
Labels

Comments

@cloetensbrecht
Copy link
Contributor

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:
image

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

@cloetensbrecht
Copy link
Contributor Author

cloetensbrecht commented Dec 31, 2023

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 />
  }
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants