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/fc6e9f63-cb62-4d68-86f7-483e5908116dn%40googlegroups.com.
