Add support for disabled editor toolbar buttons & docs (#5294)

* add dynamic toolbar buttons + HowTo

* remove some whitespace.

* move howto and improve shortcut logic

* move howto

* add whitespace so it can be removed in an other PR.

core/ui/EditTemplate/body-toolbar-button.tid

@@ -35,22 +35,23 @@ title: $:/core/ui/EditTemplate/body/toolbar/button
   filter="[all[current]!has[dropdown]]"
   variable="no-dropdown"
 
-><$button
+><$set name=disabled filter={{!!condition-disabled}}><$button
 
   class="tc-btn-invisible $(buttonClasses)$"
   tooltip=<<tooltip-text>>
   actions={{!!actions}}
+  disabled=<<disabled>>
 
 ><span
 
-  data-tw-keyboard-shortcut={{!!shortcuts}}
+  data-tw-keyboard-shortcut={{{ [<disabled>match[yes]then[]else{!!shortcuts}] }}}
 
 /><<toolbar-button-icon>><$transclude
 
   tiddler=<<currentTiddler>>
   field="text"
 
-/></$button></$list><$list
+/></$button></$set></$list><$list
 
   filter="[all[current]has[dropdown]]"
   variable="dropdown"
@@ -60,24 +61,25 @@ title: $:/core/ui/EditTemplate/body/toolbar/button
   name="dropdown-state"
   value=<<qualify "$:/state/EditorToolbarDropdown">>
 
-><$button
+><$set name=disabled filter={{!!condition-disabled}}><$button
 
   popup=<<dropdown-state>>
   class="tc-popup-keep tc-btn-invisible $(buttonClasses)$"
   selectedClass="tc-selected"
   tooltip=<<tooltip-text>>
   actions={{!!actions}}
+  disabled=<<disabled>>
 
 ><span
 
-  data-tw-keyboard-shortcut={{!!shortcuts}}
+  data-tw-keyboard-shortcut={{{ [<disabled>match[yes]then[]else{!!shortcuts}] }}}
 
 /><<toolbar-button-icon>><$transclude
 
   tiddler=<<currentTiddler>>
   field="text"
 
-/></$button><$reveal
+/></$button></$set><$reveal
 
   state=<<dropdown-state>>
   type="popup"

editions/tw5.com/tiddlers/howtos/How to create dynamic editor toolbar buttons.tid

@@ -0,0 +1,126 @@
+created: 20201216182347597
+modified: 20201217193318816
+tags: 
+title: How to create dynamic editor toolbar buttons
+type: text/vnd.tiddlywiki
+
+\define disabledFilterExample()`[[$(tempBoldDisabled)$]get[state-disabled]else[no]]`
+
+\define remove-shortcuts()
+<$action-deletetiddler $tiddler=<<shortcutInfo>>/>
+<$action-deletetiddler $tiddler=<<shortcutConfigMac>>/>
+<$action-deletetiddler $tiddler=<<shortcutConfigNotMac>>/>
+<$action-deletetiddler $tiddler=<<tempBold>>/>
+<$action-deletetiddler $tiddler=<<tempBoldDisabled>>/>
+\end
+
+\define create-shortcut-tiddlers()
+<$action-createtiddler $basetitle=<<shortcutInfo>> 
+  $template="$:/config/ShortcutInfo/bold" 
+  $overwrite="yes"
+/>
+<$action-navigate $to=<<shortcutInfo>>/>
+
+<$action-createtiddler $basetitle=<<shortcutConfigMac>> 
+  $template="$:/config/shortcuts-mac/bold" 
+  $overwrite="yes"
+  text="meta-shift-X"
+/>
+<$action-navigate $to=<<shortcutConfigMac>>/>
+
+<$action-createtiddler $basetitle=<<shortcutConfigNotMac>> 
+  $template="$:/config/shortcuts-not-mac/bold" 
+  $overwrite="yes"
+  text="ctrl-shift-X"
+/>
+<$action-navigate $to=<<shortcutConfigNotMac>>/>
+
+\end
+
+\define clone-bold()
+<$action-createtiddler $basetitle=<<tempBold>> 
+  $template="$:/core/ui/EditorToolbar/bold" 
+  $overwrite="yes"
+  icon="$:/core/images/spiral"
+  shortcuts="((temp-bold))"
+  condition-disabled="[[$(tempBoldDisabled)$]get[state-disabled]else[no]]"
+/>
+<$action-sendmessage $message="tm-edit-tiddler" $param=<<tempBold>>/>
+\end
+
+\define clone-button-bold()
+<$button actions=<<clone-bold>> >Create a Temporary Bold Button</$button>
+\end
+
+\define toggle-bold()
+<$action-listops  $tiddler=<<tempBoldDisabled>> $field="state-disabled" $subfilter="+[toggle[yes],[no]]" />
+\end
+
+<!-- $vars is needed don't remove it! -->
+<$vars tempBold="$:/temp/bold" tempBoldDisabled="$:/temp/bold/disabled" shortcutInfo="$:/config/ShortcutInfo/temp-bold"  shortcutConfigMac="$:/config/shortcuts-mac/temp-bold" shortcutConfigNotMac="$:/config/shortcuts-not-mac/temp-bold">
+
+!! Create a New Toolbar Button
+
+The easiest way to create new editor toolbar button is to clone and open one.
+
+><<clone-button-bold>> 
+
+This tiddler contains all the necessary elements that are important for toolbar buttons. 
+
+<<<
+
+; text
+: We don't discuss the text field details in this howto
+
+; caption
+: The caption field is used to display the shortcut name in the $:/ControlPanel : Keyboard Shortcuts tab
+
+; condition
+: A filter, that defines the button visibility state
+
+; condition-disabled  <<.from-version "5.1.23">>
+: A ''filter'', that allows us to define the "disabled" attribute for buttons. eg: <<disabledFilterExample>>
+:  This condition ''must'' return "no", if the "state tiddler" or "state field" doesn't exist! So there has to be a `else[no]` element in the filter.
+
+; description
+: Is used as the button tooltip
+
+; icon 
+: Assigns the button icon. We use `$:/core/images/spiral` {{$:/core/images/spiral}} here.
+
+; shortcuts
+: This is the [[Keyboard Shortcut Descriptor]] eg: `((temp-bold))`
+
+<<<
+
+!! Disabled State
+
+You can use any "state tiddler" to define the button disabled state. It's important, that the ''condition-disabled'' field is a ''filter''. For our example we use the `state-disabled` field from tiddler: <<tempBoldDisabled>>
+
+The easiest way to test filters is with the $:/AdvancedSearch : Filter tab
+
+> The temporary "bold button" is disabled: ''"{{{ [<tempBoldDisabled>get[state-disabled]else[no]] }}}"'' ... You can see the button in the editor toolbar if you edit any tiddler!
+
+> <$button actions=<<toggle-bold>>>Toggle Temporary Bold Button Visisbility</$button>
+
+!! Create Keyboard Shortcuts for New Button
+
+For our ~HowTo we use the ''Keyboard Shortcut Descriptor'': `((temp-bold))`
+
+To create a valid shortcut configuration we need 2 tiddlers: 
+
+>[[$:/config/ShortcutInfo/|$:/config/ShortcutInfo/temp-bold]]''temp-bold'' .. and
+>[[$:/config/shortcuts/|$:/config/shortcuts/temp-bold]]''temp-bold''
+
+> <$button actions=<<create-shortcut-tiddlers>>>Create Shortcut Tiddlers</$button>
+
+!! 
+
+!! Clean up the Configuration Tiddlers
+
+If you don't need the config tiddlers anymore you can 
+
+><$button actions=<<remove-shortcuts>>>Remove the Shortcut Configuration</$button>
+
+
+</$vars><!-- needed don't remove! -->

themes/tiddlywiki/vanilla/base.tid

@@ -87,6 +87,10 @@ html button {
 	border-color: <<colour button-border>>;
 }
 
+button:disabled svg {
+	fill: <<colour muted-foreground>>;
+}
+
 /*
 ** Basic element styles
 */
@@ -1605,6 +1609,10 @@ html body.tc-body.tc-single-tiddler-window {
 	fill: <<colour foreground>>;
 }
 
+.tc-drop-down button:disabled svg {
+	fill: <<colour muted-foreground>>;
+}
+
 .tc-drop-down button.tc-btn-invisible:hover svg {
 	fill: <<colour background>>;
 }