Postpone button cannot be styled

[ScottKillen]

Please check that this issue hasn't been reported before.

• I searched previous Bug Reports didn't find any similar reports.

Expected Behavior

I can restyle all of the buttons on a task, with something similar to this:

/* change edit button */
.tasks-edit {
  background-color: var(--ui1);
}
.tasks-edit {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-edit'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-edit'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
}

I expect to be able to restyle the new postpone 'button'.

Current behaviour

The new postpone button uniquely injects content, namely ' ⏩', inside a button tag so that it cannot be styled.

Steps to reproduce

View a task query with the postpone buttons displayed.

Which Operating Systems are you using?

• Android
• iPhone/iPad
• Linux
• macOS
• Windows

Obsidian Version

1.5.2

Tasks Plugin Version

5.3.0

Checks

• I have tried it with all other plugins disabled and the error still occurs

Possible solution

Make the code for the postpone button consistent with the existing buttons.

It is worth noting that having many button elements with the same id (postpone-button) is invalid html.

[claremacrae]

Hi @ScottKillen, thanks for the report.

IIRC, the rendering of the Postpone button is pretty much as it was in the original PR, except I changed the style name for consistency with other Tasks elements.

I’ll add the ‘help wanted’ tag.

Given your knowledge of the situation and technology, a PR - including updating of the Styling page in the docs if need be - would be greatly appreciated.

[ScottKillen]

Thanks, @claremacrae.

I will take a look. I am a developer, but this would be my first foray into TypeScript. It might be fun.

[claremacrae]

Hi @ScottKillen, thank you.

If you haven't seen it already, I created a Contributing guide - and the page Local setup and workflow for changes to code and tests is perhaps the best starting point.

[ScottKillen]

@claremacrae

I had not seen it, but all I can say is, "Well, of course you did!" Tasks' documentation is one of the things I love about it! (One among many things!)

[Cito]

I agree with @ScottKillen - the postpone button should be implemented in the same way as the edit button, using an anchor element instead of a button element, and it shouldn't be given an "id" attribute. It can be styled using the class-name "tasks-postpone" which is already added to the element.

The fix would be straightforward: Just replace listItem.createEl('button', ...) with listItem.createEl('a', ...) and remove the line setting the id. The signature of the postpone...Calback functions needs to be adapted by replacing HTMLButtonElement with HTMLAnchorElement. And button.disabled = true must be replaced by button.style.pointerEvents = 'none';. Maybe the .tasks-postpone class in style.css should be also adapted a little bit for an anchor tag.

You could also argue that a button element is the better choice for a button, but then it should be done consistently.

[claremacrae]

Reading @Cito's comments above, I have pondered whether to go ahead and merge #2513 or not.

I decided that I would.

[Cito]

Thanks @claremacrae. You're right, the event handling of a button and a link is slightly different so we may need to adapt that a little bit as well if me make changes here.

@ScottKillen you can give it a try and create a PR and add me as reviewer, or let me know if I shall create a PR and you want to review. I will then also double check that it does not break #2513 again.

[ScottKillen]

Sorry. I have not had a chance to do anything yet. Hopefully within the next 24 hours.

[Cito]

No worries, it's not urgent.

[menagerie198]

Clare suggested (on the Discord) that I add this request here...
"Is it possible to selectively hide the 'postpone' icon in a Tasks search? I have some recurring tasks that can only happen on the due date: others are more flexible." (Short answer = [currently] No)
I will try to be more specific... I have Tasks that recur fixedly (when the council comes round to empty the wheelie bins eg), I cannot really postpone them. Other tasks are more flexible (take my 'scrip to the Doctor's for renewal, eg) -- I can do them over a couple of days, so 'postpone' is helpful there. I envisage (imagine/fantasize)
something like adding hide postpone button to this type of Task in the task editor modal, perhaps?.

[claremacrae]

Thanks @menagerie198 ...

something like adding hide postpone button to this type of Task in the task editor modal, perhaps?.

To clarify what I was suggesting - and why I referenced this ticket about styling the Postpone button:
I envisaged there being some CSS in a snippet that said:

'hide postpone button for tasks that have a Recurrence field'

Bonus points for:

'hide postpone button for tasks that have a Recurrence field that does not contain when done'.

[claremacrae]

(personally, I do sometimes postpone the 'put out the bin when the council comes' task, as our bin does not always have anything in it...)

[menagerie198]

:-) You live a much more ascetic life than us, it is clear. Our bins could not survive a non-collection (our council empties them fortnightly)!

[menagerie198]

Thanks @menagerie198 ...

something like adding hide postpone button to this type of Task in the task editor modal, perhaps?.

To clarify what I was suggesting - and why I referenced this ticket about styling the Postpone button: I envisaged there being some CSS in a snippet that said:

'hide postpone button for tasks that have a Recurrence field'

Bonus points for:

'hide postpone button for tasks that have a Recurrence field that does not contain when done'.

Perhaps a CSS for 'hide postpone button for tasks that have a recurrence field AND a 'X' tag' ?

[ScottKillen]

Hi all.

This is still on my radar, but I have not been able to find the time. I have been off, but family responsibilities and getting ready for the busy season at work (starting next week) have sapped my time.

@menagerie198 This should be possible after the fix. The root of this issue is that the postpone button currently does not have proper wrapping to allow CSS styling.

🎉 Happy New Year Everyone!

[claremacrae]

I would appreciate this being fixed some time soon, if possible...

I'm considering adding another button soon, and would prefer to base it on fixed code, rather than creating a second that needs fixing.

So @ScottKillen @Cito - it would really help if you could chat and decide which of you, if either, may be able to fix it? Many thanks in advance.

[Cito]

@claremacrae since I had a little bit of time left today, I already gave it a try in #2562.

@ScottKillen if you have time, please test and let us know if it solves your original problem.

[ScottKillen]

@Cito It appears you have fixed it. Thank you!

[claremacrae]

Thanks, but re-opening - will let the merging of the PR do the closing..

[claremacrae]

This has been fixed by #2562 - and it will be included in the up-coming Tasks 6.0.0 release.

[claremacrae]

Thanks @Cito !

[claremacrae]

Just released in 6.0.0

[ScottKillen]

It works well. Thank you!