Can anyone help me prettify my task-priority template?

[si]

Hi everyone,

I've been noticing that many tiddlers in my wiki that start out as simple notes or ideas get later converted into tasks.

I've just made this template for quickly adding a "to-do" status and priority to any tiddler in my wiki:

Here's a gif

I'm happy with the status pill, but the priority text box not so much!

Anyone have any ideas on how I could improve this? I use priority values 1-100 so radios are not really an option.

[Eric Shulman]

On Wednesday, April 1, 2020 at 3:48:07 PM UTC-7, si wrote:

I'm happy with the status pill, but the priority text box not so much!

Anyone have any ideas on how I could improve this? I use priority values 1-100 so radios are not really an option.

Try using a $range widget (see https://tiddlywiki.com/#RangeWidget)

something like:

<$range field="priority" min="1" max="100" default="50" increment="1"/> {{!!priority}}

note: the use of {{!!priority}} following the range slider is optional, and simply provides feedback by showing the current value as a number

enjoy,

-e

Eric Shulman

TiddlyTools.com: "Small Tools for Big Ideas!" (tm)

InsideTiddlyWiki - http://TiddlyTools.com/InsideTW

[si]

Hi Eric

Thanks a lot - I didn't know about the range widget.

I added it to a tag pill popup and it works if select a specific point on the line, but the dragging mechanism doesn't work:

Another gif

Do you know why this doesn't work within a popup and if there's a way to fix this?

[Eric Shulman]

On Thursday, April 2, 2020 at 7:53:20 AM UTC-7, si wrote:

Thanks a lot - I didn't know about the range widget.

I added it to a tag pill popup and it works if select a specific point on the line, but the dragging mechanism doesn't work:

Do you know why this doesn't work within a popup and if there's a way to fix this?

When you use an input control (edit-text, range, textarea) to change a field value in the current tiddler, it causes that tiddler to be refreshed.  When this occurs, the control is automatically re-rendered and it loses the input focus and doesn't get any subsequent keystrokes or drag events.  Fortunately, there is a workaround that will allow you to make multiple input events without losing focus by putting the control(s) into a separate tiddler that is tagged with $:/tags/ViewTemplate

For your purposes, do this:

Create a separate tiddler (e.g., "ToDoTemplate") containing your controls in the body text.  Something like this:

<$range field="priority" min="1" max="100" default="50" increment="1"/> {{!!priority}}

Tag this tiddler with $:/tags/ViewTemplate.  This will cause your controls to appear at the bottom of every tiddler (below any tiddler text content).

To make the controls appear above the tiddler text (as shown in your example gif), edit the "ToDoTemplate" and add a field named "list-before" with a value of "$:/core/ui/ViewTemplate/body"

To limit the appearance of your controls to selected tiddlers, you can wrap the ToDoTemplate content inside a conditional display, by using the $list widget to check for a specific tag value (e.g., "ToDo"), like this:

<$list filter="[<currentTiddler>tag[ToDo]]">

   <$range field="priority" min="1" max="100" default="50" increment="1"/> {{!!priority}}

</$list>

Then, for any tiddler in which you want the controls to appear, give that tiddler a tag of "ToDo".

Let me know how it goes.

enjoy,

-e

[si]

Hi Eric

Thank you for taking the time to write such a detailed response.

I was actually already using $:/tags/ViewTemplate to get my macro to appear on every tiddler in my wiki.

However your explanation did help me discover what the problem was, so thank you very much!

In case you're interested:

Here is a simplified example of the macro I was transcluding to every tiddler:

<$vars button-value={{!!priority}}>
<$button popup="$:/state/priority">
<<button-value>>
</$button>
<$reveal state="$:/state/priority" type="popup" position="below" animate="yes" class="tc-drop-down">

<$range field="priority" min="1" max="100" default="50" increment="1"/>

</$reveal>
</$vars>

I think the problem was that range widget was changing the <<button-value>> variable causing the popup tiddler to refresh. So I just had to move the variable so that it only contained the button widget.