[IDEA] Make It Standard and Simpler: Buttons on Edit Toolbar, View Toolbar, Editor Toolbar

[kookma]

Is your feature request related to a problem? Please describe.

• Adding a new Editor Toolbar button is easy and there is quick tutorial with automatic creation of toolbar button (Thanks to @pmario)
• The Editor Toolbar button is the standard, easiest and very flexible
  • The body only keeps the actions, no need for button, and all headaches
  • The fields keep conditions, caption, description, icon, color, ...

Describe the solution you'd like

• Let's have a unique, standard procedure for creating UI buttons for editor, edit and view toolbars
• Later on, this procedure may be extended to other UI buttons

The Editor Toolbar Button Anatomy

What do you think?

[pmario]

I am not 100% sure, what you want to achieve, but I think I have a good guess.

I could think of a new [add button] button at the ControlPanel -> Appearence -> Toolbars tab, which allows us to create "new boilerplate" buttons, where users "only" have to fill in the needed info. All the possible / needed fields could be predefined, similar to the editor-toolbar example you mentioned.

The hard work will be "good documentation" near the new [add button] button.

I think in combination with the upcoming lucide-icon library editions we should also not have an icon-shortage ;)

[pmario]

• Let's have a unique, standard procedure for creating UI buttons for editor, edit and view toolbars

Since the page-toolbar, tiddler-toolbar and the edit-toolbar buttons are slightly different, we will probably need 3 different procedures and "boilerplate" templates.

Especially the connection between the toolbar buttons and keyboard-shortcuts will need special attention for the docs.

[kookma]

I am not 100% sure, what you want to achieve, but I think I have a good guess.

I mean to have a standard procedure. One form of implementation. In more precise words:

• have text field for actions
• no need to add buttons manually
• have all configurations like icon, color, caption, hint, ... in fields

This is what we have for Editor Toolbar.

Right now every UI button category has a different way of implementation

[kookma]

I could think of a new [add button] button at the ControlPanel -> Appearence -> Toolbars tab, which allows us to create "new boilerplate" buttons, where users "only" have to fill in the needed info. All the possible / needed fields could be predefined, similar to the editor-toolbar example you mentioned.

Good idea, I support this. This lets average users to add UI buttons.

[CeeBeeTree]

There looks like two main requirements here :

1. Provide a way to standardise toolbar-buttons using a tiddler and its fields as the full configuration
2. Provide a way to create those toolbar buttons using mostly UI interaction setting up the needed tiddler

For No.1 - I've experimented on this by creating a couple new custom widgets - namely <$.toolbar.button> which takes 1 parameter (the config tiddler) and <$.toolbar> that supplies the configs via the system tag filter required. These would update the functionality from the current $:/core/ui/EditTemplate/body/toolbar/button .. Here is a sample of the code so far:

\whitespace trim
\widget $.toolbar-button($tiddler, $class)
<$importvariables filter="[[$:/plugins/ceebee/core/widgets/toolbar-helper]]">
<$.unpack-toolbar-button-config $tiddler=<<$tiddler>> >
<%if [subfilter<condition>]  %>
	<%if [subfilter<group-condition>] %>
		<$.button-optional-dropdown>
			<%if [<tv-config-toolbar-icons>match[yes]] %>
				<$transclude $tiddler=<<icon>> />
			<%endif%>
			<%if [<tv-config-toolbar-text>match[yes]] %>
				<span class="tc-btn-text">
					<$transclude $tiddler=<<$tiddler>> $field="caption" />
				</span>
			<%endif%>
		</$.button-optional-dropdown>
	<%endif%>
<%endif%>
</$.unpack-toolbar-button-config>
</$importvariables>
\end

FYI - i discovered the "The Editor Toolbar Button Anatomy" is not the whole picture ,, there were a few little variations in the editor toolbar buttons that took some work. Namely dropdowns , dropdown state (which prompted me to move that into a internal helper widget to keep simple), actions being icons and actions etc.

For No.2 - This should be made easier if the above widgets are kept as consistent as possible. I think that this and a few other ideas would be good candidates for a separate "Tiddlywiki Studio" Plugin where there are lots of extensions (like kookma's Gatha Plugin) that support the build of UI components (buttons, layouts, palletes) with low code capabilities...

Any thoughts on above would be welcome.
😄