Á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/6fd813df-2491-41a3-ac82-49f7c3100820n%40googlegroups.com.
