Hide completed tasks in edit view

Help
1

I have a Markdown “project” file with a list of todo’s. The todo’s are organized hierarchically with sub-tasks indented. Since I look at this file every time I am working on the project, I’d like to not see the tasks that have been completed while still in EDIT mode.

Is there a way to fold-away or hide completed tasks? Folding replaces checked todo’s with an ellipsis (...). Entire sequences of completed todo’s would be replaced by a single .... A secondary option is to hide completed tasks in EDIT mode using some sort of toggle-able CSS.

On the forum, I have seen ways to conceal completed tasks in PREVIEW mode using CSS and ways to show only incomplete tasks in queries (e.g., dataview or tasks-plugin). These are not quite what I’m looking for.

2

I’m not sure I would recommend even trying to hide stuff in source edit mode, as it would easily lead to confusion as to where stuff was defined, and how would you get to these hidden pieces?

An alternative solution, could be to move the actual definition of the tasks into a different file, and use a dataview query in the original file to show non-completed task. This would also allow for automatic tagging of the task when completed. Downside, you would need to open the other file to change the tasks.

Similar to the previous solution, you could possibly use the Tasks plugin to show the non-completed tasks, and I believe it has some sort of support for editing the tasks in its views, so you wouldn’t need to open the other file for task changes. Not sure if you can add tasks that way, or not.

Yet another solution, which is not source mode editing, but rather live preview editing, would be as you might elude to use either CSS to hide completed tasks, or to encompass your tasks in auto-collapsed callouts (which would hide all tasks until un-collapsed).

A final idea, would be not to hide, but to change the text color of the completed tasks using a plugin such as Dynamic Highlights, if you import the following CSS into it:

  "CompletedTask": {
    "class": "CompletedTask",
    "color": "#00000000",
    "regex": true,
    "query": "^\\s*[-*+]\\s+\\[x\\].*$",
    "mark": [
      "match",
      "line"
    ],
    "css": ".theme-dark .CompletedTask {\n color: #222222 !important;\n}\n\n.theme-light .CompletedTask {\n color: #dddddd !important;\n}"
  }

You could get output like the following:

image

By changing the #111111, you can change the color to be as dark as you want, but still viable if you need to change it sometime.

2 Likes
3

Actually folding in EDIT mode can work quite well. The ellipses tell the user that folded text exists. Folding (unlike hiding with grey font) has the added advantage of saving vertical space in a document by tucking away hidden text.

A great example is the ability to fold blocks in Obsidian. Other examples of folding in edit mode can be found in sparse trees in org mode and Editorial app in iOS.

Unfolding to reveal can be achieved with a little triangle or plus-minus icon where folding has occurred. Another option is to use a key to toggle fold state, e.g. in org mode TAB. Many options here.

4

I can see that, but that would require for these to actually be a structural block by itself, which they are not. To get them to be that, I reckon you would need a plugin or something like that.

So hence my other suggestions, especially related to possibly using Tasks, and then embed the tasks back again with/without the possibility to edit them.

5

I think there’s a plugin (possibly Tasks) that will move completed tasks to another section, which you could then fold a header of.

Folding as you describe it doesn’t match how it work elsewhere in Obsidian. It’s hierarchical — when you fold an item it hides that item’s sub-items, not the item itself.

6

As a slightly hacky workaround could indent your completed tasks, which would let you hide them by folding the incomplete task above them. Consecutive completed tasks would all be folded together as you want. The only problem (besides the slight extra work of indenting them) is that technically this makes your completed tasks sub-tasks of the incomplete ones — but this might not matter to you.

7

Building on that idea you could have a higher level task called “completed” which you move the completed tasks into.

This would render the incomplete tasks and the completed subtree on the same level.

But could one then make that always be collapsed using CSS?

1 Like
8

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.