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/editor-height.tid>
https://github.com/Jermolene/TiddlyWiki5/blob/master/core/ui/EditorToolbar/preview.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/
> <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]
> <mailto:[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/47DC43DE-77F3-492D-9F74-9FB42C78EF95%40gmail.com.
