Heree is a simple example of how quickly coloring a button is confounded
\define colour() #f00
<$button>
<span style={{{ [[fill:]addsuffix<colour>addsuffix[;]]
}}}>{{$:/core/images/spiral}}</span>
</$button>
in a tiddler tagged $:/tags/ViewToolbar all custom color is lost.
Tones
On Wednesday, 19 May 2021 at 22:58:25 UTC+10 TW Tones wrote:
> Jeremy,
>
> I am not sure how to achieve what I want from your tips, I will research
> further.
>
> I want to define a button in a macro, then place that macro, including a
> color name parameter in a tiddler, if that tiddler is tagged
> *$:/tags/ViewToolbar* I can ensure the color is used.
>
> However it appears the process of putting a button into the viewTemplate
> results in any such color being ignored.
>
> If makes sense to me if all buttons could have the following variables
> that are used if available, a new hack?
>
> - color-filter - color the button according to the filter eg
> [all[current]status[go]then[green]]
> - display-filter - only display the button if the filter returns any
> result eg; [all[current]tag[todo]]
>
> The idea of passing a display filter, allows conditional display of
> buttons.
>
> Tones
>
> On Wednesday, 19 May 2021 at 22:15:07 UTC+10 Jeremy Ruston wrote:
>
>> Hi Tones
>>
>> I haven’t read the whole thread, but if you’re asking how to
>> programmatically colour a button, in general you can use the style property
>> to set a fill colour:
>>
>> \define colour() #f00
>>
>> <span style={{{ [[fill:]addsuffix<colour>addsuffix[;]]
>> }}}>{{$:/core/images/spiral}}</span>
>>
>> In the case of the editor toolbars, the icon is usually specified by an
>> “icon” field that doesn’t allow a colour to be set. But if you set the
>> “custom-icon” field to “yes”, then you can render the icon
>> programmatically. See these two examples in the core:
>>
>>
>> https://github.com/Jermolene/TiddlyWiki5/blob/master/core/ui/EditorToolbar/editor-height.tid
>>
>>
>> https://github.com/Jermolene/TiddlyWiki5/blob/master/core/ui/EditorToolbar/preview.tid
>>
>> Best wishes
>>
>> Jeremy
>>
>>
>> On 18 May 2021, at 23:46, TW Tones <[email protected]> wrote:
>>
>> Álvaro,
>>
>> Thanks - I am now getting closer to a full understanding of this. In this
>> case I have the color value available in a variable or field value, I
>> wanted to find a way to pass the color to the button display
>> "programaticaly".
>>
>> - It supports my suspicion that button css is not as hackable as you
>> would expect from tiddlywiki, making this a harder than average to
>> customise this aspect of the User Interface, while making use of the CSS
>> to
>> define a button in the view toolbar (and elsewhere)
>>
>>
>> Ideally the tiddlywiki designer can just supply a hex or named color,
>> rather than a need to define a range of classes (colors).
>>
>> Perhaps there is an argument that the tiddlywiki toolbar buttons css need
>> to be change to permit a programaticaly set color to be provided
>> (optionally).
>>
>> Álvaro, can you think of a way to open this to user customisation? I
>> think it is important enough to consider some changes.
>>
>> Regards
>> Tones
>>
>> On Wednesday, 19 May 2021 at 03:25:50 UTC+10 Álvaro wrote:
>>
>>> The svg has two styles, one the inherited fron inline style in span and
>>> "direct rules" (*.tc-tiddler-controls button svg* ). When you apply
>>> direct rules the inherited rules are gone (they are overwritten by
>>> direct). You can see it in the inspector of your browser, "fill:red" is
>>> strikethrough.
>>>
>>> You need add inline style in svg or add new class, for example in button.
>>> button.icon-blue svg{fill:blue;}
>>>
>>> and use it like
>>> ...
>>> <$button message="tm-add-tag" param="$tag$" tooltip="Toggle $tag$"
>>> class="tc-btn-invisible icon-blue">
>>> <$transclude tiddler="$:/PSaT/check-tag/button/checked-icon" />
>>> </$button>
>>> ...
>>>
>>> Then you don't need wikify and you have a reusable style for the icon in
>>> buttons. You can change/add class dynamically to button like tiddlywiki
>>> does with varible and filter in *$:/core/ui/ViewTemplate/title*
>>> El martes, 18 de mayo de 2021 a las 17:33:21 UTC+2, TW Tones escribió:
>>>
>>>> Álvaro
>>>> Thanks for you help
>>>>
>>>> So the fill in the css is forcing the button to "fill: #cccccc;"
>>>>
>>>> The problem is I want to display it with a color provided to a macro
>>>> and use it instead. Meaning the button have multiple colors depending on
>>>> the value provided.
>>>>
>>>> This is the macro I want to display a colored button.
>>>>
>>>> \define check-tag-button(tag:"select" color:"blue"
>>>> display-filter:"[all[current]is[tiddler]]" )
>>>> \whitespace trim
>>>> <$list filter="$display-filter$" variable=display>
>>>> <$wikify name=style text="""fill: $color$;""">
>>>> <$fieldmangler>
>>>> <$list filter="[all[current]!tag[$tag$]]" variable=has-tag>
>>>> <$button message="tm-add-tag" param="$tag$" tooltip="Toggle
>>>> $tag$" class="tc-btn-invisible">
>>>> <span style=<<style>> ><$transclude
>>>> tiddler="$:/PSaT/check-tag/button/unchecked-icon" /></span>
>>>> </$button>
>>>> </$list>
>>>> <$list filter="[all[current]tag[$tag$]]" variable=not-tagged>
>>>> <$button message="tm-remove-tag" param="$tag$"
>>>> tooltip="Toggle OFF $tag$" class="tc-btn-invisible">
>>>> <span style=<<style>> ><$transclude
>>>> tiddler="$:/PSaT/check-tag/button/checked-icon" /></span>
>>>> </$button>
>>>> </$list>
>>>> </$fieldmangler>
>>>> </$wikify>
>>>> </$list>
>>>> \end
>>>> <!--
>>>> <$macrocall $name=check-tag-button tag="" color="" display-filter=""/>
>>>> <$macrocall $name=check-tag-button tag="reference" color="red"
>>>> display-filter=""/>
>>>> -->
>>>>
>>>> Thanks
>>>> Tones
>>>>
>>>>
>>>> On Wednesday, 19 May 2021 at 00:31:04 UTC+10 Álvaro wrote:
>>>>
>>>>> When you put a button (with the svg) in the viewtoolbar, it take style
>>>>> from here
>>>>> *.tc-tiddler-controls button svg*, .tc-tiddler-controls button img,
>>>>> .tc-search button svg, .tc-search a svg {
>>>>> fill: #cccccc;
>>>>> }
>>>>>
>>>>> You'll need add a class to the button
>>>>>
>>>>>
>>>>> El martes, 18 de mayo de 2021 a las 14:36:44 UTC+2, TW Tones escribió:
>>>>>
>>>>>> Folks,
>>>>>>
>>>>>> I have 2 svg icons from https://morosanuae.github.io/tw-icons/
>>>>>>
>>>>>> I have created a button inside a macro and have used a number of
>>>>>> methods to get the colored result in a tiddler, however when I add
>>>>>> the $:/tags/ViewToolbar to a tiddler to get it into the view tool bar
>>>>>> the
>>>>>> color disappears.
>>>>>>
>>>>>> I want to use the same buttons again and again with only the tooltip,
>>>>>> actions and color changing. This save buttons and color coding is
>>>>>> helpful.
>>>>>>
>>>>>> Can anyone tell me how to get past what ever styling is stopping the
>>>>>> use of the color?
>>>>>>
>>>>>> Thanks in advance for any hints.
>>>>>> Tones
>>>>>>
>>>>>
>> --
>> 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 [email protected].
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/tiddlywiki/9d547c46-988d-445d-8c9f-1f41f344e692n%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/tiddlywiki/9d547c46-988d-445d-8c9f-1f41f344e692n%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>>
>>
>>
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/cbf09a6d-ed5c-4dd0-bf0a-e2aa787e987en%40googlegroups.com.
