Tip and Question - Inline edit of the text field

[TW Tones]

Folks,

Having worked with TiddlyWiki for some time, I have managed to get a way to edit the text field without going into edit mode. I just went to revisit this with a minimal case, and was surprised it worked, in part because its easy to share.

Place the following in a tiddler tagged $:/tags/ViewToolbar

\whitespace trim

<$list filter="[all[current]has:field[inline-edit]]">

<$checkbox field="inline-edit" checked="yes" unchecked="no" default="no"></$checkbox>

</$list>

Now any tiddler to which you add the field inline-edit will gain a checkbox in the toolbar, allowing you to toggle editing the text in view mode, without loosing focus in edit mode.

Question

This button need a little more work, to comply with the tiddlywiki standard, I will do that shortly. However my Question is since this is easy to achieve does anyone know how to restyle the checkbox better for use in the toolbar?

• Make it larger and similar in size to existing buttons
• Provide a tooltip
• Perhaps alter the color

I will then refine and republish here.

Tones

[TW Tones]

OOps

Also add a tiddler tagged $:/tags/ViewTemplate containing

<$list filter="[all[current]inline-edit[yes]]">

   {{||$:/core/ui/EditTemplate/body}}

</$list>

Regards

Tones

[Saq Imtiaz]

@Tones just as background, the reason this works is because the edit-text widget is being used via a view template which is not dependent on the target tiddler and thus does not need to be refreshed. You can directly tag $:/core/ui/EditTemplate/body with $:/tags/ViewTemplate and it would work.

The approach I've taken in one of my wikis is to have a toggle button in the tiddler view toolbar which switches between edit and view mode by toggling qualified state tiddlers. Switching to edit mode is equivalent to hiding the body and showing the editor. The advantage of using state tiddlers is that you aren't modifying the content tiddler just by switching to edit mode and back.

In terms of styling checkboxes, I prefer to use buttons in the toolbar. I am not that fond of checkboxes in general and when appropriate I style them as toggle buttons as well. You can see this in the settings tiddler of Streams. If that is of interest to you it has a separate style sheet extracted from my UI components library.

Cheers,
Saq

[PMario]

Hi,

The biggest problem for me is, that there is no "cancel" button. ... If you mess up the tiddler, it will be harder to fix it.

So users should be aware of this behaviour.

-m

[Mohammad Rahmani]

Interesting!

This can be used to add comments at the end of tiddler!

Best wishes

Mohammad

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/19612ae1-c72d-43ac-9169-3e8bee22b2bbn%40googlegroups.com.

[TW Tones]

Folks,

Thanks for the feedback. I would like to emphasise a desire to provide a "very simple" solution for this commonly asked question. 

I concur with your comments and understand buttons vs checkbox, state tiddlers vs a flag inside the current tiddler. In this case however the tool is for editing the tiddler so I felt it can be kept simple by saving in the tiddler. 

The cancel button (delete the field) or do you mean "undo" mario? is that essential? I can see in a fuller solution it may be simple to store the text field before edit in a variable, and if undo is pressed restore it.

I can see your various points captured in a plugin rather than this code solution, and I have done this for myself already. I want to refine the simple solution if possible.

Mohammad,

In other versions of this I have also had internal and external multiline text fields with notes working the same way. Some arising from discussions with you (perhaps if I have the right Mohammad perhaps you could sign off Mohammad Shiraz?)

All,

The fact is if a simple css or html can help me add a tooltip to the checkbox and make it look more like a button, while in the toolbar this simple solution would be more complete.

Tones

[Mohammad Rahmani]

On Sat, May 29, 2021 at 3:47 AM TW Tones <anthony...@gmail.com> wrote:

Folks,

Thanks for the feedback. I would like to emphasise a desire to provide a "very simple" solution for this commonly asked question. 

I concur with your comments and understand buttons vs checkbox, state tiddlers vs a flag inside the current tiddler. In this case however the tool is for editing the tiddler so I felt it can be kept simple by saving in the tiddler. 

The cancel button (delete the field) or do you mean "undo" mario? is that essential? I can see in a fuller solution it may be simple to store the text field before edit in a variable, and if undo is pressed restore it.

I can see your various points captured in a plugin rather than this code solution, and I have done this for myself already. I want to refine the simple solution if possible.

Mohammad,

In other versions of this I have also had internal and external multiline text fields with notes working the same way. Some arising from discussions with you (perhaps if I have the right Mohammad perhaps you could sign off Mohammad Shiraz?)

Why not distribute this as your first plugin? Put it on GitHub!
I think this can be used for live nores, sticky notes, ...

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/6952ed06-6e5c-4d56-a919-d21e7130b7dcn%40googlegroups.com.

[TW Tones]

Mohammad,

I would be happy to do so, however I want to solve the size and coloring of the checkbox in the view toolbar before doing so. To me the solution should be easy and simple so people can duplicate it for other. Of course I can do it via a button, and a display filter and do more.

That is if I can get coloured checkboxes in the view toolbar I would be very happy.

Tones

[Mohammad Rahmani]

Hi Tones

Okay, go with this and style as you like or split and add a toolbar button

For now

1. create a new tiddler tag it with $:/tags/ViewTemplate

2. put the below code inside it (text body)

\whitespace trim
<$list filter="[all[current]has:field[inline-edit]]">

<$button class="tc-btn-invisible"> {{$:/core/images/edit-button}}
<$action-listops $field="inline-edit" $subfilter="+[toggle[yes],[no]]" />
</$button>
</$list>

<$list filter="[all[current]inline-edit[yes]]">
   {{||$:/core/ui/EditTemplate/body}}
</$list>

Test

1. Create a new tiddler

2. Add an inline-edit field

3. Save and see the button

I just changed the checkbox with a button! so you colorize it

Best wishes

Mohammad

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a9f6b8d3-3220-4196-94c5-a323b6c76558n%40googlegroups.com.

[TiddlyTweeter]

I hope you folks will record this somewhere :-)

So many interesting things get lost.

In a WEEK will anyone remember this :-).

Where would you put that solution?

How would an end-user find it?

AND, how would they know WHAT to look for? 

I mean how would its FUNCTION/USE CASES be CLASSIFIED/TAGGED?

Just a few (slightly annoying) questions :-)

TT

[Mohammad Rahmani]

On Sun, May 30, 2021 at 11:18 AM TiddlyTweeter <Tiddly...@assays.tv> wrote:

I hope you folks will record this somewhere :-)

So many interesting things get lost.

In a WEEK will anyone remember this :-).

Where would you put that solution?

How would an end-user find it?

AND, how would they know WHAT to look for? 

I mean how would its FUNCTION/USE CASES be CLASSIFIED/TAGGED?

Not for every solution, but those solutions I understand and I like (unfortunately this is a matter of choice and is not good here), I add a link in TW-Scripts in the hope that I will find free time later and document them!

 

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a9d2829b-d0cb-415d-9b56-ef66691a6d30n%40googlegroups.com.