[preview] UI tweaks and doodads

[Saq Imtiaz]

Over the last couple of years, I have accumulated a fair few UI tweaks and changes that are in use in different wikis according to my requirements. A lot of it is tightly integrated with the theme and other features, and thus difficult to separate and share. However, there is a subset related to editing that is easier to isolate and might prove interesting for others.

Here is a preview. ( all editing happens via the view template. )

https://drive.google.com/file/d/1VAQ6MeLQr3VQrVDd0kzaFJHigSYZC_Wl/view

This consists of a series of distinct ad hoc changes over time, rather than being driven by a considered and unified vision. So there are some rough edges, a few known bugs and a lot of room for improvement. 

If it is of interest, I'll separate it out and document the different parts and post a file. It wont be something I would recommend for others to start using in anger, but rather something to build upon or be inspired by.

Cheers,

Saq

Edit: https://saqimtiaz.github.io/sq-tw/sandbox.html

[PMario]

Hi Saq,

I like it!

That's a very similar approach I have in mind. I personally like the tiddler (i)nfo button. I think it should be used in the way you did use it.

-mario

[Saq Imtiaz]

@pmario It just makes sense, doesn't it? And with a bit of CSS and de-cluttering it could be even better. 

For the most parts these are quick hacks, just moving/copy core templates to different places but with some more dedicated effort could be cleaned up quite nicely.

[TiddlyTweeter]

TBH, I can't make sense of the video.

I would like to.

TT

[Rachel J. Kline]

Ooooo, that sounds very interesting! I think I may have found a simplified solution in the meantime, though if it's something you may have time for I'd be interested in seeing your theme tweaks. I am super interested in seeing how you've customized TW to suit your needs.

What I discovered a little bit ago: I clicked on the little magnifying glass next to the search bar in the right hand panel of tools and opened Advanced Search. I was able to figure out how to filter specific tags, and also omit the tags I did not want included by using this: [tag[Contents]!tag[Tasks]!tag[task]!tag[null]]

From the Advanced Search view I clicked on "Export Tiddlers" and it saved my HTML file in the exact order I placed the tiddlers!

- Rachel

On Saturday, June 20, 2020 at 10:16:14 AM UTC-4, Saq Imtiaz wrote:

Over the last couple of years, I have accumulated a fair few UI tweaks and changes that are in use in different wikis according to my requirements. A lot of it is tightly integrated with the theme and other features, and thus difficult to separate and share. However, there is a subset related to editing that is easier to isolate and might prove interesting for others.

Here is a preview. ( all editing happens via the view template. )

https://www.dropbox.com/s/titif0mubsbrinx/sq-ui2.mp4?dl=0

[David Gifford]

TiddlyTweeter, it is an example of editing from the view template.  But the bulk of it was to show the type area and fields area, normally at the bottom of edit mode, moved to the info button in view mode. Great solution!

Saq, this makes so much sense I am surprised no one has done the type-and-fields-in-info-dropdown before now. I am also surprised I didn't think of it *even when I created tools to hide the type and fields section from the edit template.*

[Joshua Fontany]

Ha, that's really well done. Do you run into the "refresh on every keystroke" bug anywhere? This was a blocker for "editing in view mode" previously.

Best,
Joshua F

[TW Tones]

Saq,

Thanks for sharing. I have done a range of similar things in the past as well. The fact is it is possible to edit tiddlers in view mode a number of ways, my sadness is there is no standard feature to do this. Although perhaps I would not use it in key wikis as I use other sophisticated ways to drive form based view and edit according to a defined object-type.

Your example has the value of being low impact, my system has full form and field definition including custom edits like image, colour, date, drop-down and other selectors on custom fields.

I believe it is time to introduce a few options, a default in the core and alternative plugins, it would enable more users to be good designers and expand the tiddlywiki audience and solutions. 

Here is a quick example of a task tiddler in my edit mode, then the second is if I want to reorder or add fields and the third to manage field definitions. This is a quick dump not a minimalist guided tour.

Regards

Tony

[Saq Imtiaz]

@Joshua I guess we could argue that the refresh issue is a feature and not a bug ;)

So the editing of the text actually creates a draft tiddler and all editing happens in that, which has the added benefit that you can cancel and not commit your changes (a feature that I don't think we realize how useful it is until we need it).

For the field, when you edit you are writing to a temp tiddler, hitting the save button for a field copies the value to the story tiddler.

[OGNSYA]

Nice! That does look much slicker than the default editing experience in TW.

Is the title field also directly editable?

This is one thing I miss in TW - to have more flexibility in editing the title of a tiddler.

I understand that this is due to the role Title has as a tiddler's unique identifier.

Still, from the user's perspective, I'd like to be able to edit/adjust title as easily as I can any other field in a tiddler.

[Saq Imtiaz]

@Tony Interesting to see what you're up to as well. Reminds me of when we first got fields in TWC and I went crazy with templates :) 

The interface you see in the video is what I use for tiddlers that use the default template (this being my default). For tiddlers with custom templates I too use custom fields, that are defined with editing elements, autocomplete and even some validation rules as need be.... but in the view template. I have found that I tend to not enjoy large forms and therefore initialize tiddlers in context to pick up most of the details and fill in the rest in the view template as need be. But that's more about UX design preferences and personal workflows, than it is about TiddlyWiki. 

I would throw up some screenshots but they wouldn't make much sense out of context.

I was prompted to share this by Mat's questioning my statement in the Streams thread, that I rarely ever use the default EditTemplate. 

Cheers,

Saq

[TiddlyTweeter]

Now I understand it!

Good approach.

I frequently want to change Content Type, for instance, and I'd rather not have to have to go into editor just to do that.

By putting multiple gadgets under the Info button is a good design approach! You can develop access to a lot of tools without getting an over cluttered main UI

Like it. I'd very likely use it if avaialable.

Best wishes

TT

On Saturday, 20 June 2020 16:16:14 UTC+2, Saq Imtiaz wrote:

[TiddlyTweeter]

Thanks David! Much appreciated.

David Gifford wrote:

TiddlyTweeter, it is an example of editing from the view template.  But the bulk of it was to show the type area and fields area, normally at the bottom of edit mode, moved to the info button in view mode. Great solution!

Totally agree!.

 

Saq, this makes so much sense I am surprised no one has done the type-and-fields-in-info-dropdown before now. I am also surprised I didn't think of it *even when I created tools to hide the type and fields section from the edit template ...

Actually they have. For instance, two Version Control systems. Original by J.D, later version by Mal use it. 

Its more that no one till Saq realised is a generalist method with great sense! One of those "Duh!" moments! :-)

TT

[Saq Imtiaz]

I've made a very quick attempt at isolating the UI tweaks from the video, you can have a play with it here:

https://saqimtiaz.github.io/sq-tw/sandbox.html

I think I got everything but it is possible I missed a tiddler or two. Will try to document this when I have a bit more time, so that it's easy to know which tiddlers correspond to which functionality.

[TiddlyTweeter]

Very impressive work!

Yeah, it good its flagged ... Daleks At Work

But I'm looking at it thinking "Do I Need A Sidebar?"

I will comment more after I played with it more.

Thanks for trusting us with your baby.

TT

[Saq Imtiaz]

A few things that it might be useful to be aware of:

- if you click a Draft in the sidebar or at the bottom of the screen, it opens in the default EditTemplate and that can conflict with the inline editor. Should be tweaked so the draft opens in the inline editor.

- the edit button assumes everything is text. If need be, the button for the core edit mode is hidden in the "more" dropdown. You could use the "info" part of this with the regular editing mechanism as well.

- if you edit a field, you need to click to the save button for that field. It would be useful if it turned red to indicate the value had changed.

Probably lots of other quirks around too, as this wasn't really developed with the intention of being for general distribution. Should be possible to clean it up if there is interest.

[TiddlyTweeter]

I hope you will stick with it.

Its a bit of PITA  sorting difficult issues for others.

But I  think the approach is SPOT-ON design wise. 

It builds on what TW has already in a very sensible way.

I will test & report back. Couple of days.

TT

[TW Tones]

Saq,

Some fairly profound possibilities there with your actions

I really appreciate that you can go strait to js or plugins/actions and new filters to build tiddlywiki solutions, which I am not yet in the position to do.

It is interesting to me as a superuser living with the available wikitext/widget/macro and filter tools, built in, I do see different ways to achieve similar things (in some cases).

It makes me wonder should we use one over the other, maintain diversity, or even develop a shared understanding to guide the provision of fundamental "facilitation" based solutions (As opposed to finished solutions) 

Continuing to love you work

Regards

TW Tones

[TW Tones]

Saq,

The field editing you demonstrate here, behind the info tab is fantastic. It would seem to me it would feasible to be able to toggle this editor into the foreground via the view template as well, all that may be needed is a way to facilitate edit current. 

The idea is to sometimes present the naive user with the extended editing. 

I can see a complementary view which presents a list of field names and an input edit field, rather than providing for field definition and creation.

I also have a field-type method I would like to incorporate into field handling which would generically support enhanced edit tools (not simple text)

I would like to see similar solutions developed in collaboration with the prospect of including in the standard distribution. I think there is still a large gap between what tiddlywiki can do and what new users can do. Inline editing, using fields productively etc...

Regards

TW Tones

On Sunday, June 21, 2020 at 12:16:14 AM UTC+10, Saq Imtiaz wrote:

[Saq Imtiaz]

Just to clarify, all the UI tweaks are using plain wiki text and core widgets only. There is no custom JavaScript involved.

[Saq Imtiaz]

@TT the issue isn't one of motivation, but rather of how to best leverage limited and sporadic availability in a way that best contributes to the community.

My feeling so far is that the way to do so is by sharing ideas, guidance and hopefully inspiration.

Cheers,

Saq

[TW Tones]

Saq

That's working for me.

Tony

[Mark Kerrigan]

Hello Saq

This is step in the right direction. This is good because tags can edited without editing the entire tiddler, same with the fields and type. I assume this would have performance improvements for very larger TWs too. Are you going to release this as a plugin?

Thanks

Mark Kerrigan

[TiddlyTweeter]

Ciao Saq

Its useful!

Been experimentally using "Fields" & "Rename" added to a wiki.

Plays fine with other "Info" section add ons (like version control systems).

Seems stable. Did a lot of testing. Could not get it to fail.

Here's a snip ...

Invaluable to me.

Tx! TT

On Tuesday, 23 June 2020 15:53:05 UTC+2, Saq Imtiaz wrote:

[Saq Imtiaz]

@TT good to hear. I'll try to find the time to package the separate bits and document them, so it is easier for people to import/tweak the parts they want. You did well to isolate the bits you wanted :)

The "Rename" is the bit that was implemented last and has seen the least attention. So if you experience any issues let me know. Ideally it would have made sense to have the UI for rename in the title area, but that would interfere with the option to show titles as links.

Cheers,

Saq

[TiddlyTweeter]

On "packaging" I'd guess "Fields" & "Rename" would be widely appreciated.

Certainly in my use cases "developing" wiki they are invaluable.

On how much docs they need? Documentation being very time consuming to get right one needs know if its gonna be difficult. Probably not a lot in this case as the functions pretty much explain themselves. Maybe just more about simple import steps?

Thoughts

Best wishes

TT

[Saq Imtiaz]

Perhaps "tags" as well? I was thinking of those 3, "fields", "rename" and "tags". 

The body text editor is more niche and also needs some work (handling of drafts if clicked from the sidebar).

On Saturday, June 27, 2020 at 2:10:23 PM UTC+2, TiddlyTweeter wrote:

On "packaging" I'd guess "Fields" & "Rename" would be widely appreciated.

On how much docs they need? Documentation being very time consuming to get right one needs know if its gonna be difficult. Probably not a lot in this case as the functions pretty much explain themselves. Maybe just more about simple import steps?

Right, I was thinking to provide buttons that can be dragged to import, along with a note about overwritten shadow tiddlers.

Appreciate the feedback, thank you.

Cheers,

Saq

 

[TiddlyTweeter]

Saq Imtiaz wrote:

Perhaps "tags" as well? I was thinking of those 3, "fields", "rename" and "tags". 

 Sounds good!. Just FYI, personally I didn't test tags.

Best wishes

TT

[Saq Imtiaz]

@@TT Thank you. No worries, the tags and fields I have been using for quite long so there shouldn't be any issues.

[Saq Imtiaz]

Today's idle thought and fiddling is around the idea that maybe we should make better use of the context menu on tiddler links on non-touch devices.

Right click the tiddler links:

https://saqimtiaz.github.io/sq-tw/floats.html#HelloThere

[TW Tones]

Saq

Great idea. by the way Long press and select float works on Mobile. I just could not close it.

This is another way to make otherwise invisible hackability. I use shift click to open with out navigation, that could also be a default r click menu which suggests we could add a keyboard shortcut text next to r click items.

I use r click a lot on Windows. Rclick on an area like tiddler title body etc would be a nice feature because context sensitive r click could be very helpful. E.g. r click title, copy title to clipboard, or link or transclude. R click body (not link) copy text, copy html....

I am preparing to propose a core change to every button to allow custom actions perhaps this would be an opportunity to add r click to every button as well?

I have dozens of features and buttons to support rapid design but they start to crowd the view toolbar and templates. Many of these would be able to pop behind r click.

Regards
Tony

[TW Tones]

Saq

R click edit (conditional) on content e.g. {{!!fieldname}} not just links displayed in view template.

All becomes possible with a R click hack

Regards
Tony

[Mat]

Saq Imtiaz wrote:

Right click the tiddler links:

https://saqimtiaz.github.io/sq-tw/floats.html#HelloThere

Very intersting and should be useful - but I don't like that the usual right-click browser menu (windows) is then not accessible... is it somehow possible to integrate tiddlycommands into that browser menu? Or make it so that this custom menu shows from e.g Ctrl+rightclick or some such?

<:-)

[Saq Imtiaz]

There is a pretty cool thread on reddit about making it more convenient to create lists in wikitext, namely automatically adding the required markup to subsequent lines. This inspired me to take a swing at a quick fix towards the same goal.

Reddit thread:

https://www.reddit.com/r/TiddlyWiki5/comments/hufvs9/automatically_continue_bullet_list/

My attempt at a quick fix:

https://saqimtiaz.github.io/sq-tw/editor-autolists.html

Every new line should start with the same list indent level as the previous.

Cheers,

Saq

[TW Tones]

Saq,

I could not see any activity, yet, on your demo. But I immediately thought of code mirror which allows you to indent and on hitting enter honours the last indent. I presume this adds an otherwise rarely used tab character? Of course in a way streams already does this?

It would be quite simple to parse such a tiddler and replace n levels of indent with n levels of bullet points, either permanently or for display only. See a quick Proof of concept below POC

I have a tiddler with indented text multiple levels deep (using code mirror)

Renders like this; because tiddlywiki does not honour tabs

However this code

<$list filter="[[TabbedTiddler]get[text]splitregexp[\t]join[*]]">
<$wikify name=line text="<<currentTiddler>>">
   <<line>><br>
</$wikify>
</$list>

Renders the following and demonstrates the possibility while not completed

So this is only a few steps away from a solution to the request in the thread.

Regards

TW Tones

[TW Tones]

Saq,

I got the concept working, replacing tabs in a code mirror tabbed lines tiddler with bullets.

\define bullet() #
\define lister()
<$list filter="[[TabbedTiddler]get[text]splitregexp[\n]]" variable=line>
<$list filter="[<line>splitregexp[\t]join<bullet>]" variable=bullets>
<<bullets>><br>
</$list>
</$list>
\end
<$wikify name=show text="<<lister>>" output=html>
<<show>>
</$wikify>

Regards

Tony

[Saq Imtiaz]

Continuing on the theme of writing wikitext lists from that reddit thread, I've pushed a few small bug fixes to my autolist demo. 

( Haven't really considered the situation yet in which there this is a selection when hitting the enter key. )

I do think something like this, if properly thought out and robust, would be helpful to a lot of users.

Thread updates:

https://www.reddit.com/r/TiddlyWiki5/comments/hufvs9/automatically_continue_bullet_list/g08gblc

Demo:

https://saqimtiaz.github.io/sq-tw/editor-autolists.html

Short description for those too lazy or too busy to read the thread:

- easily continue wiki text lists

- "enter" while in a line that is part of a list, creates a new line at the same list indent level

- "enter" with no text added to the list item, terminates the list

-- "shift+enter" avoids this

- "tab" increases the indent level of the line in the list

Cheers,

Saq

[TW Tones]

Saq

Nice work. Still usable on mobile without a tab.

Regards
TW Tones