[Help] Color them icons and buttons.

[TW Tones]

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

[Álvaro]

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

[Álvaro]

PD: It is a idea because you give few information. Maybe there is/are other problems that they are hidden in your info.

[TW Tones]

Á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

[Álvaro]

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

[TW Tones]

Á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

[Álvaro]

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/

[TiddlyTweeter]

TW Tones wrote:

• 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)

The issue is not TiddlyWiki classes it is merely CSS specificity. 

In situations where you need to apply definitive styling USE a hard-coded style="css style code"  directive. That always overrides any class directives that otherwise apply. 

Its not entirely kosher on semantic markup, and PMario will tell me off for mentioning it, but it will work.

Over & out :-)

TT, x

[TW Tones]

Á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

[TW Tones]

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.

[Jeremy Ruston]

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

-- 
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+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9d547c46-988d-445d-8c9f-1f41f344e692n%40googlegroups.com.

[TW Tones]

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

[TW Tones]

Heree is a simple example of how quickly coloring a button is confounded

\define colour() #f00

<$button>

<span style={{{ [[fill:]addsuffix<colour>addsuffix[;]] }}}>{{$:/core/images/spiral}}</span>

</$button>

in a tiddler tagged $:/tags/ViewToolbar all custom color is lost.

Tones

[TiddlyTweeter]

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 ...

Best wishes

TT

[Álvaro]

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: <<colour tiddler-controls-foreground>>;}

[TW Tones]

Álvaro,

Very good I think the answer may lay there. 

The following tagged $:/tags/ViewToolbar proves it works

\define icon-color(color)

<span style="fill: $color$;">

{{$:/core/images/list}}

</span>

\end

<$list filter="red green blue black gray">

<$macrocall $name=icon-color color=<<currentTiddler>>/>

</$list>

Tones