Another thought, what if buttons could be provided a color-filter to
determine the color
eg: [fieldname[go]then[green]] [fieldname[stop]then[red]]
If no color filter exists use the existing methods.
On Wednesday, 19 May 2021 at 22:06:17 UTC+10 TW Tones wrote:
> Álvaro & TT
>
> TT, if you know how can you tell me how to follow your suggestion in the
> following case?
>
> Thanks for sticking with me on this Álvaro. It seems the issue is I want
> to craft my own toolbar icons which continue to get displayed on the
> viewtoolbar (and other other toolbars as required) however with the
> ability to programmatically change the color. Now I can totally build my
> own button with all the features I desire, including programaticaly
> determined colors, however it appears there is no mechaisium for me to make
> these colors visible (and change) using the $:/tags/ViewToolbar method to
> display the button.
>
> The only options I can see are;
>
> 1. If there is an as yet unidentified way to alter the colors on
> additional buttons placed on the viewToolbar - not by actualy creating a
> whole new button definition for each color of state.
> 2. If someone can provide away to resolve the above, ideally without
> too many core changes I would be happy.
> 1. Perhaps later such core changes could be added to tiddlywiki (ie
> introduce some additional hackability/customisability)
> 3. One option may be to produce a new view toolbar, in addition to the
> current one, on which these limitations have being removed, making use of
> an available a variable to alter the colors programaticaly.
>
>
> The desired result;
>
> - In tiddlywiki much can be driven with one tag, however given a
> tiddler without tags I would like a view Toolbar button, to check and
> uncheck to add and remove a specific tag. I want to do this one or more
> times and make it easier for others to do so as well.
> - To easily generate a new button, I am trying to build a macro that
> can be called with a tagname and color (or get the color from the tags
> color - see tag manager).This can also be used inline in a tiddler.
> - Such a macro would ideally be placed in a tiddler tagged with
> $:/tags/ViewToolbar to generate the button.
> - The use case;
> - Given how much can be done once a tiddler is given a specific
> tag, having a viewTemplate button that allows key tags to be applied
> (the
> first time) can then trigger other visible results or actions. eg
> click to
> add the todo tag. This means the user, perhaps unfamiliar need not edit
> the
> tiddler and add the tag manually.
>
>
> - In related uses of the same programmatic assigning of a color to a
> button you could have;
> - A check box to add a field or field/value combination, then
> display the same icon differently with color according to the value in
> that
> field.
> - A Button that may not do anything but display a color to indicate
> the state of something. eg New Done canceled archived.
>
> Side notes
>
> - One idea is to allow a tagname and color to be given as a variable
> before transcluding a button.
> - I note the icon presented in front of the title sets the colour
> using <$set name="foregroundColor" value={{!!color}}> in
> $:/core/ui/ViewTemplate/title, I just need a button to respond to
> <<color>>
> instead, which I can set.
>
>
> Thanks
> Tones
> On Wednesday, 19 May 2021 at 21:21:24 UTC+10 Álvaro wrote:
>
>> If the problem is in direct rule of svg ,that they are inside the tiddler
>> controls, and it overwrite the inherited style. We can solve
>> removing(/changing) de direct rule or declaration, or we solve playing with
>> selector’s specificity, for example if we apply class or inline style in
>> the svg tag.
>>
>> You have to think in "how many color am I going to add?" "Will i reuse
>> them? Or will i going to add different color each time?". If you look in
>> the CSS framework (tailwind, bootstrap,...), they have clases for a numbers
>> of colors and then they are reused.
>>
>> The user customization is there. Yes, it is possible have a easier user
>> customization but it requires a hard rework in the CSS.
>>
>>
>> P.S. I think that the following article could be helpful about these CSS
>> "problems"
>> https://www.smashingmagazine.com/2010/04/css-specificity-and-inheritance/
>> El miércoles, 19 de mayo de 2021 a las 0:46:25 UTC+2, TW Tones escribió:
>>
>>> Á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/78a00a27-1728-4197-90a8-162ce5e827abn%40googlegroups.com.
