Postpone Task: Hide until given date

💡 Features / Ideas
1

Put a task off until later. Either indefinitely, or have it appear again at a given date. For instance, if I need to have my car inspected, I can’t do that until it is due for inspection next year. So if I create the task now, it should be either hidden, or placed in a “scheduled for later” folder until I can act on it.

(157 votes)

2

For what it’s worth, I already have this feature working with the following CSS rule:

 li.dueFuture{
    display:none;
}
2 Likes
3

I tried this with great hope but unfortunately the display:none; doesn’t quite take the element out of the list.

If you are using keyboard navigation and you have 5 future tasks between two current ones you’ll have to hit the ‘next’ or ‘down’ key 5 times to get from the first visible one to the second.

I had a bunch of cool enhancements to Mailman’s idea but unfortunately the fact the tasks are still there in navigation makes this not really usable for lists with substantial (or even moderate) numbers of future tasks.

Maxkir - Also Mailman’s idea means you could potentially solve this without needing to do any new complex data state - just make it a display option to hide ‘future’ tasks from the main list view. They should always still display in the ‘Due’ view.

I would actually make this a shortcut such as “sf” for “show future” tasks. Or better perhap “tf” for “toggle future” to make it a reversible shortcut.

4

Hello @danson ,

Welcome to the forum :slight_smile:

Thanks a lot for bringing this. I really like an idea to make “hide future tasks” a per-list option with a shortcut to toggle it. I think we can do it, but first we’d like to finalize some other things, related to progress tracking and todo shortcut and related to SSO sign in (we need to support paswordless login for WebClipper and mobile app).

After that we’ll try to implement postpone task support.

Thanks again!

2 Likes
5

Hi Kir,
Thank you so much. Just heard from Sasha! That’s so great that it’s going to be developed. I’m very happy to beta test and feed back.

Btw a few UX considerations I tried to build with CSS:

  1. When marking something you’ve selected in the future - don’t hide it instantly. Fade it out so that you can in fact intercept it. Say you accidentally marked it for next week instead of today - you can see it start to disappear and quickly hit ‘dd’ to bring it back into view. You might want to consider this for ‘done’ task fade outs but you actually have ‘Ctrl z’ there.

  2. It would be useful to prompt somewhere “X future tasks”.

  3. ‘tomorrow’ is an interesting case - i notice you don’t append ‘dueFuture’ to it and things due tomorrow prob should be on your radar today but it’s possible some people would prefer to only focus on today. Perhaps a setting option?

  4. An obvious one: remember the setting for a list. You do this already for hide task toggle so no different to that!

Just for your curisoity this was my CSS attempt (ultimately failed because display:none doesn’t take the item out of how you implemented list navigation):

/* For any element that is .dueFuture BUT NOT .selectedTask => instantly hide */

.dueFuture:not(.selectedTask) {
  animation: 
     fadeOut 0.5s forwards,
     hideAfterFade 0s 0.5s forwards;
}

/* For an element that has BOTH .selectedTask and .dueFuture => fade out */
.selectedTask.dueFuture {
  display: block;
  animation: 
    fadeOut 3s forwards,
    hideAfterFade 0s 3s forwards;

}

@keyframes fadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes hideAfterFade {
  0%   { display: block; }
  100% { display: none; }
}

Thanks again! Amazing to be here and feel like my voice is heard. :heart:

6

Hello @danson ,

Thank you for sharing your thoughts! I indeed think to add “Hide future tasks” to the same section as other list options, and remember this setting per-list.

As for fading out - maybe another idea is to half-hide the item right after setting the future due, and hide it entirely only on page reload. We don’t want people to hurry to fix the mistake.

At the same time, undo will be available, too.

Thanks,

1 Like
7

In order to remove the item from navigation, you just need to find an appropriate parent of .dueFuture element to hide. The current CSS spec makes that trivial. Look up :has() pseudo-class. :has() - CSS: Cascading Style Sheets | MDN

EDIT: That is only my guess about what is going on with navigation. I have not tested it. I could be wrong.

8

@rubaboo I’m afraid this won’t work, and there is no need to use has() selector as .dueFuture is already set on the parent li element. Checkvist looks for specific CSS classes to understand is the element available for navigation, and it is not possible to apply CSS classes to already rendered page via CSS itself.

So our intervention is needed here :slight_smile:

9

I like this yes. :slight_smile:

Checkvist looks for specific CSS classes to understand is the element available for navigation, and it is not possible to apply CSS classes to already rendered page via CSS itself.

No idea if possible but could you actually update Checkvist so that it looks for specific CSS classes AND NOT display:none? This allows your users to create other innovations using CSS that take items out of the selection scope. And it would seem to conform to ‘common sense’ since selecting something that the browser has marked as completely hidden would almost never be a good thing.

1 Like