Could the 5 Status Types be included in the CSS?

[claremacrae]

⚠️ Please check that this feature request hasn't been suggested before.

• I searched previous Ideas in Discussions didn't find any similar feature requests.
• I searched previous Issues didn't find any similar feature requests.

🔖 Feature description

I'm trying to style loads of tasks and I have a variety of different custom statuses, so as far as I can tell, the only real information to tell me whether the task is done, todo, cancelled etc is the Task Status Type.

https://obsidian-tasks-group.github.io/obsidian-tasks/getting-started/statuses/status-types/#overview

• TODO
• IN_PROGRESS
• DONE
• CANCELLED
• NON_TASK

✔️ Solution

Could the status types be included as data attributes in the generated CSS?

❓ Alternatives

No response

📝 Additional Context

No response

[claremacrae]

/CC @esm7 for info...

[esm7]

Perhaps I'm misunderstanding the request here, but to my understanding you can use the data-task attribute like I demonstrated in #1519 (comment).

[esm7]

If this does help with what you mean, can you elaborate what kind of styling per status type you would like to achieve?

[claremacrae]

Perhaps I'm misunderstanding the request here, but to my understanding you can use the data-task attribute like I demonstrated in #1519 (comment).

Good question. Thanks for asking.

Context

Here are my statuses:

And here is some vocabulary, if you haven't used the custom statuses:

Short-term

So I should start by restating my question as:

What would a selector look like that selects the following status symbols, which would select my TODO and IN_PROGRESS tasks:

• space / ! D

If that is currently possible, it would certainly get me going for now, and I could document it.

Longer-term

Different users will use different symbols to denote TODO, IN_PROGRESS, DONE, CANCELLED and NON_TASK tasks.

If anyone were to want to sharing styling that did different things for different task status types, they couldn't reply on the actual status symbols, and would need to base the styling in the type instead.

[esm7]

What would a selector look like that selects the following status symbols, which would select my TODO and IN_PROGRESS tasks:

* space / ! D

If that is currently possible, it would certainly get me going for now, and I could document it.

Technically it is [data-task="<your status symbol>"] like I did here, and AFAIK there is no way to combine several of them in one selector, so you'd need to select each individually, possibly using the CSS comma (,) operator.
But if you could give a more specific example of what you would like to style based on the status (only the checkbox? The complete task line? Something else?), I might be able to be to answer this better.

Regarding the longer-term, it is straight-forward to add another data attribute with the Task Status Name. At the end of TaskLineRenderer.renderTaskLine, where data-task is set, it's just needed to set an additional attribute (say data-task-status-name).

[claremacrae]

But if you could give a more specific example of what you would like to style based on the status (only the checkbox? The complete task line? Something else?), I might be able to be to answer this better.

Sure, I would like to fix a problem that when I use the 'overdue' example from the docs, in reading mode 90% of my tasks are highlighted because I already either did them, or cancelled them.

So I like to be able to:

1. modify my own vault so that I can highlight just the overdue dates - which I can write very specifically for my custom statuses
2. update examples in the documentation that highlight tasks with overdue-dates, so that they do the selection in a way which is more general, for users to base their styles on

Regarding the longer-term, it is straight-forward to add another data attribute with the Task Status Name. At the end of TaskLineRenderer.renderTaskLine, where data-task is set, it's just needed to set an additional attribute (say data-task-status-name).

Thank you. I think I would then add data-task-status-name and data-task-status-type.

OK, if by any chance you had time to submit those, it would be a great help.

If not, I'll try and get them done towards the back end of next week.

I can't do anything on this for the next few days anyway. So I'll ponder whether to add a note to the documentation, recording the current limitation - or whether to release when the overdue styling can be written in a way that's useful for real-world-use.

[esm7]

Modifying the data-task-due example in the documentation to only highlight the due date for "todo" tasks would be:

.task-list-item[data-task=""] .task-due[data-task-due^="past-"] span {

You can add more custom statuses to this selector by duplicating the complete line, writing another rule for data-task, then grouping them with a comma, e.g.

.task-list-item[data-task=""] .task-due[data-task-due^="past-"] span,
.task-list-item[data-task="/"] .task-due[data-task-due^="past-"] span {

I don't mind looking into adding data-task-status-name and data-task-status-type, and can do so if getting the name & type as strings is relatively straight-foward. Mind if I do that as an extra commit in the same branch that was merged?

[claremacrae]

.task-list-item[data-task=""] .task-due[data-task-due^="past-"] span,
.task-list-item[data-task="/"] .task-due[data-task-due^="past-"] span {

D'oh. Thank you very much.

I think I will have to write a 'how-to' guide, for my own education and use - and keep the styling.md file as reference material.

I don't mind looking into adding data-task-status-name and data-task-status-type, and can do so if getting the name & type as strings is relatively straight-foward. Mind if I do that as an extra commit in the same branch that was merged?

Wonderful. Thank you. The name and type are other values alongside the task.status.symbol that you're already using.

If the selectors are case-specific, please do stick to all-caps, like TODO, as that is what is visible to users in the docs.

[claremacrae]

Oh sorry, yes, no problem using the same branch, if it helps...

[claremacrae]

Oh sorry, yes, no problem using the same branch, if it helps...

But do look at the diffs between your branch and main before starting, especially if going to work on the docs.

[esm7]

Merged from main to get the most up-to-date docs, then added attributes for custom statuses + documentation + tests.

[esm7]

After merging the last commit on feat-themeability that adds this, the snippet above can be:

.task-list-item[data-task-status-type="TODO"] .task-due[data-task-due^="past-"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"] .task-due[data-task-due^="past-"] span {

[claremacrae]

Thank you!

notes to self:

• Here is the commit: esm7@d633484 - create a PR from it.
• Remember to update the CSS file that is embedded in docs

[claremacrae]

Oh sorry, yes, no problem using the same branch, if it helps...

Thanks. FYI Another time I would ask for a new branch to be created.

Either WebStorm or me has got totally confused by me creating a PR from a branch on your fork.

I'm going to merge it sight-unseen and then test it on main and make documentation changes in a second PR.