Re: [tw5] [Help] Color them icons and buttons.
Álvaro,
Very good I think the answer may lay there.
The following tagged $:/tags/ViewToolbar proves it works
\define icon-color(color)
{{$:/core/images/list}}
\end
<$list filter="red green blue black gray">
<$macrocall $name=icon-color color=<>/>
Tones
On Thursday, 3 June 2021 at 20:35:40 UTC+10 Álvaro wrote:
> Hi Tones
>
> I think that the following CSS (in StyleSheet tiddler) could work for you
>
> .tc-tiddler-controls button svg{fill: inherit;}
> .tc-tiddler-controls button{fill: <>;}
>
>
> El jueves, 20 de mayo de 2021 a las 21:15:26 UTC+2, TiddlyTweeter escribió:
>
>> Ciao Tones
>>
>> You may want to engage in discussion at
>> https://github.com/morosanuae/tw-icons/discussions
>>
>> Slowly we are beginning to work through multiple issues on SVG
>> opportunities opened up by Morosanuae's TW Icons initiative ...
>>
>> I am myself particularly interested in understanding the of styling Icons
>> ...
>>
>> [image: Screenshot 2021-05-20 203000.jpg]
>> Best wishes
>> TT
>>
>> On Thursday, 20 May 2021 at 00:55:07 UTC+2 TW Tones wrote:
>>
>>> Heree is a simple example of how quickly coloring a button is confounded
>>>
>>> \define colour() #f00
>>> <$button>
>>> addsuffix[;]]
>>> }}}>{{$:/core/images/spiral}}
>>>
>>>
>>> in a tiddler tagged $:/tags/ViewToolbar all custom color is lost.
>>>
>>> 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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/47f5cce9-132a-4d13-8694-db7ded6597aan%40googlegroups.com.
Re: [tw5] [Help] Color them icons and buttons.
Hi Tones
I think that the following CSS (in StyleSheet tiddler) could work for you
.tc-tiddler-controls button svg{fill: inherit;}
.tc-tiddler-controls button{fill: <>;}
El jueves, 20 de mayo de 2021 a las 21:15:26 UTC+2, TiddlyTweeter escribió:
> Ciao Tones
>
> You may want to engage in discussion at
> https://github.com/morosanuae/tw-icons/discussions
>
> Slowly we are beginning to work through multiple issues on SVG
> opportunities opened up by Morosanuae's TW Icons initiative ...
>
> I am myself particularly interested in understanding the of styling Icons
> ...
>
> [image: Screenshot 2021-05-20 203000.jpg]
> Best wishes
> TT
>
> On Thursday, 20 May 2021 at 00:55:07 UTC+2 TW Tones wrote:
>
>> Heree is a simple example of how quickly coloring a button is confounded
>>
>> \define colour() #f00
>> <$button>
>> addsuffix[;]]
>> }}}>{{$:/core/images/spiral}}
>>
>>
>> in a tiddler tagged $:/tags/ViewToolbar all custom color is lost.
>>
>> 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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/825cc35b-5205-42c0-88d6-4fa009838cc7n%40googlegroups.com.
Re: [tw5] [Help] Color them icons and buttons.
Heree is a simple example of how quickly coloring a button is confounded
\define colour() #f00
<$button>
addsuffix[;]]
}}}>{{$:/core/images/spiral}}
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
>>
>> addsuffix[;]]
>> }}}>{{$:/core/images/spiral}}
>>
>> 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 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" />
>>>
>>> ...
>>>
>>> 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: #cc;"
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">
> ><$transclude
tiddler="$:/PSaT/check-tag/button/unchecked-icon" />
Re: [tw5] [Help] Color them icons and buttons.
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
>
> addsuffix[;]]
> }}}>{{$:/core/images/spiral}}
>
> 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 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" />
>>
>> ...
>>
>> 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: #cc;"
>>>
>>> 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">
>>> > ><$transclude
>>> tiddler="$:/PSaT/check-tag/button/unchecked-icon" />
>>>
>>>
>>><$list filter="[all[current]tag[$tag$]]" variable=not-tagged>
>>> <$button message="tm-remove-tag" param="$tag$" tooltip="Toggle
>>> OFF $tag$" class="tc-btn-invisible">
>>>> ><$transclude
>>> tiddler="$:/PSaT/check-tag/button/checked-icon" />
>>>
>>>
>>>
>>>
>>>
>>> \end
>>>
>>>
>>> Thanks
>>> Tones
>>>
>>>
>>> On Wednesday, 19 May 2021 at 00:31:04 UTC+10 Álvaro
Re: [tw5] [Help] Color them icons and buttons.
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
addsuffix[;]]
}}}>{{$:/core/images/spiral}}
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 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" />
>
> ...
>
> 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: #cc;"
>
> 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">
> > ><$transclude
> tiddler="$:/PSaT/check-tag/button/unchecked-icon" />
>
>
><$list filter="[all[current]tag[$tag$]]" variable=not-tagged>
> <$button message="tm-remove-tag" param="$tag$" tooltip="Toggle OFF
> $tag$" class="tc-btn-invisible">
>> ><$transclude
> tiddler="$:/PSaT/check-tag/button/checked-icon" />
>
>
>
>
>
> \end
>
>
> 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: #cc;
> }
>
> 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/
>
[tw5] [Help] Color them icons and buttons.
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 tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/bcb4291f-1bce-48ba-b497-260c8aa67eaen%40googlegroups.com.
