Making navigation buttons using system images

[David Allen]

I like the built-in images used for navigation in vanilla TiddlyWiki, so I decided I'd like to reuse them for some custom navigation applications.  I've run into some problems when trying to resize images.

Here is my code for a button and slider combo for a list of tiddlers:

\define scroll_buttons2(filterlimit: 10000)

<$set name="fivelessthanlimit" filter="[[]eval[$filterlimit$-5]]">

<div style="width: 100%; display: table;">

<div style="display: table-row">

<div style="background-color: red; display: table-cell;">

<$button class="custom_navbutton">

{{$:/core/images/left-arrow}}

<$set name="max_prev_index"filter="[{Draft of 'Scratch_Pad'!!scroll_index}eval[min(title, <<fivelessthanlimit>>)]]">

<$set name="prev_index" filter="[[]eval[max(<<max_prev_index>>-5,0)]]">

<$action-setfield $tiddler="Scratch_Pad" scroll_index=<<prev_index>>/>

<$action-setfield $tiddler="Draft of 'Scratch_Pad'" scroll_index=<<prev_index>>/>

</$set>

</$set>

</$button>

</div>

<div style="background-color: blue; display: table-cell">

<$range class="custom_range" tiddler="Draft of 'Scratch_Pad'" field="scroll_index" min="0" max=<<fivelessthanlimit>> default={{Scratch_Pad!!scroll_index}}/>

</div>

<div style="background-color: red; display: table-cell">

<$button class="custom_navbutton">{{$:/core/images/right-arrow}}

<$set name="next_index" filter="[{Draft of 'Scratch_Pad'!!scroll_index}eval[min(title + 5, <<fivelessthanlimit>>)]]">

<$action-setfield $tiddler="Scratch_Pad" scroll_index=<<next_index>>/>

<$action-setfield $tiddler="Draft of 'Scratch_Pad'" scroll_index=<<next_index>>/>

</$set>

</$button>

</div>

</div>

</div>

<<end_div>>

\end

Right now, this is the result:

The red and blue backgrounds are there to make it easier to see the bounds of the div's.

I'd like to increase the size of the arrow buttons, and I tried following the Image Gallery example on the TiddlyWiki site, but that didn't seem to work for me.  I'm not sure if the problem is that the images are in the button widget or if I'm not understanding CSS all that well.

I tried this previously with regular HTML tables instead of CSS, and could not increase the size of the arrow buttons to be what I wanted.  If anyone can guide me toward something that'll let me increase the arrow size, that'd be great!

[A Gloom]

I'd like to increase the size of the arrow buttons, and I tried following the Image Gallery example on the TiddlyWiki site, but that didn't seem to work for me.  I'm not sure if the problem is that the images are in the button widget or if I'm not understanding CSS all that well.

You're correct-- it's cause of the svg being in a button-- what I use--

<$button class="tc-btn-invisible"  style="padding:0px 5px; font-size:2em;"> X </$button>

this may not be completely correct-- it sets the button size not the svg size

default css for button svg's

/* ** Buttons */

button svg, button img, label svg, label img { vertical-align: middle; }

.tc-btn-invisible { padding: 0; margin: 0; background: none; border: none; cursor: pointer; }

.tc-btn-boxed { font-size: 0.6em; padding: 0.2em; margin: 1px; background: none; border: 1px solid #cccccc; border-radius: 0.25em; }

html body.tc-body .tc-btn-boxed svg { font-size: 1.6666em; }

.tc-btn-boxed:hover { background: #bbb; color: #ffffff; }

html body.tc-body .tc-btn-boxed:hover svg { fill: #ffffff; }

.tc-btn-rounded { font-size: 0.5em; line-height: 2; padding: 0em 0.3em 0.2em 0.4em; margin: 1px; border: 1px solid #bbb; background: #bbb; color: #ffffff; border-radius: 2em; }

html body.tc-body .tc-btn-rounded svg { font-size: 1.6666em; fill: #ffffff; }

.tc-btn-rounded:hover { border: 1px solid #bbb; background: #ffffff; color: #bbb; }

html body.tc-body .tc-btn-rounded:hover svg { fill: #bbb; }

.tc-btn-icon svg { height: 1em; width: 1em; fill: #bbb; }

.tc-btn-text { padding: 0; margin: 0; }

another issuw I've had is not just the size, its also its vertical-align-- it will always be at the bottom of the line it on and not in the middle-- couldn't override it with inline syling

[A Gloom]

refinement

<$button class="tc-btn-invisible"  style="padding:0px 5px; font-size:2em;"> X </$button>

this may not be completely correct-- it sets the button size not the svg size

TW icons iirc are set to autoscale to their container so increasing the button sizr also increases the size of the svg inside it

[@TiddlyTweeter]

David & Gloom

I definitely think SVG specific usage for TW could benefit from a consolidated tutorial.

Most of the answers needed are actually here in this group but spread all over the place.

If I get time I'll try to assemble something

Best wishes

TT

[A Gloom]

@TT

If I get time I'll try to assemble something

sool, perhaps I should  pass on the button-svg-tiddler field text transclude from list combo (diamonds on right of screenshot, the whote row is buttons wtih tiddler links generator by a list widget)

[@TiddlyTweeter]

Ha! I'd love to see the code for that. Looks neat!

 A Gloom wrote:

 perhaps I should  pass on the button-svg-tiddler field text transclude from list combo (diamonds on right of screenshot, the whote row is buttons wtih tiddler links generator by a list widget)

As far as TW goes one thing in SVG I think that could be really useful is understanding the svg "viewport" better -- that you can actually have many images inside one svg and simply change co-ordinates to show/hide them. Very code compact for toggle buttons. A common need.

Interesting stuff

TT 

[A Gloom]

As far as TW goes one thing in SVG I think that could be really useful is understanding the svg "viewport" better -- that you can actually have many images inside one svg and simply change co-ordinates to show/hide them. Very code compact for toggle buttons. A common need.
Interesting stuff

 

[TonyM]

Ha! I'd love to see the code for that. Looks neat!

What I have being dreaming of is an easy way to define simple icons for use in the toolbar buttons including the editorToolbar. And manage the sizes correctly. Even using plain text and superscript and subscript text or place a letter on an existing image. Simple foreground or background colouring is also another way to "make more buttons".

This should be a simple matter but I get lost every time I try, particularly with sizing.

Tiddlywiki is so good at letting us build new buttons etc.. so its a pity this final step is so fragile.

Regards

Tony

[David Allen]

On Tuesday, November 12, 2019 at 1:13:10 AM UTC-6, A Gloom wrote:

<$button class="tc-btn-invisible"  style="padding:0px 5px; font-size:2em;"> X </$button>

This seems to have worked for me.  Here is my current code:

\define scroll_buttons2(filterlimit: 10000)

<style>

.scroll_button {

    padding: 0px 5px;

    font-size: 1.5em;

    vertical-align: middle;

    text-align: center;

}

.scroll_button_div {

    display: table-cell;

    width: 5%;

}

</style>

<$set name="fivelessthanlimit" filter="[[]eval[$filterlimit$-5]]">

<div style="width: 100%; display: table;">

<div style="display: table-row">

<div class="scroll_button_div">

<$button class="scroll_button">

{{$:/core/images/left-arrow}}

<$set name="max_prev_index"filter="[{Draft of 'Scratch_Pad'!!scroll_index}eval[min(title, <<fivelessthanlimit>>)]]">

<$set name="prev_index" filter="[[]eval[max(<<max_prev_index>>-5,0)]]">

<$action-setfield $tiddler="Scratch_Pad" scroll_index=<<prev_index>>/>

<$action-setfield $tiddler="Draft of 'Scratch_Pad'" scroll_index=<<prev_index>>/>

</$set>

</$set>

</$button>

</div>

<div style="display: table-cell">

<$range class="custom_range" tiddler="Draft of 'Scratch_Pad'" field="scroll_index" min="0" max=<<fivelessthanlimit>> default={{Scratch_Pad!!scroll_index}}/>

</div>

<div class="scroll_button_div">

<$button class="scroll_button">{{$:/core/images/right-arrow}}

<$set name="next_index" filter="[{Draft of 'Scratch_Pad'!!scroll_index}eval[min(title + 5, <<fivelessthanlimit>>)]]">

<$action-setfield $tiddler="Scratch_Pad" scroll_index=<<next_index>>/>

<$action-setfield $tiddler="Draft of 'Scratch_Pad'" scroll_index=<<next_index>>/>

</$set>

</$button>

</div>

</div>

</div>

<<end_div>>

\end

I added a border to demonstrate the current problem.  I can't seem to correctly align the images.  I don't wanna do a "button svg" css line since I wanna have the freedom to do other stuff with SVG's inside a button later on.  Setting the vertical-align and text-align didn't seem to do the trick.  Am I missing or forgetting something CSS related?  Thanks!

[A Gloom]

we here at the WikiWichery may have something...

first we must initiate the uninitiated, repeat the ecsoteric words...

Double, double toil and trouble;
Fire burn and caldron bubble.
Tag of code and toe of frog,
Wikitext and tongue of prog,
For a code of powerful trouble,
Like a hell-broth boil and bubble.

then inscribe the code into ye wiki...

<style>.svgiconsbottom svg{width: 1.5em;
height: 1.5em;
margin: 0px;
padding: 0px;
vertical-align:bottom;}
.svgiconsmiddle svg{width: 1.5em;
height: 1.5em;
margin: 0px;
padding: 0px;
vertical-align:middle;}
.svgiconstop svg{width: 1.5em;
height: 1.5em;
margin: 0px;
padding: 0px;
vertical-align:top;}
</style>

A. icons left to right button vertical-align: none, vertical-align:bottom, middle, top<br/>
B. svg (set by style section) vertical-align: none, vertical-align:bottom, middle, top<br/>
A. <div style="border:dotted 2px; display:inline-block;"><$button style="margin0px; padding:0px; font-size:1.5em;">{{$:/core/images/full-screen-button}}</$button><$button style="margin:0px; padding:0px; font-size:1.5em; vertical-align:bottom;">{{$:/core/images/chevron-left}}</$button><$button style="margin:0px; padding:0px; font-size:1.5em; vertical-align:middle;">{{$:/core/images/full-screen-button}}</$button><$button style="margin:0px; padding:0px; font-size:1.5em; vertical-align:top;">{{$:/core/images/chevron-right}}</$button>
</div> - - B. <div style="border:dotted 2px; display:inline-block;"><div style="margin:0px; padding:0px; display:inline-block;"><$button style="margin:0px; padding:0px; font-size:1.5em;">{{$:/core/images/full-screen-button}}</$button></div><div class="svgiconsbottom" style="display:inline-block;"><$button style="margin:0px; padding:0px; font-size:1.5em;">{{$:/core/images/chevron-left}}</$button></div><div class="svgiconsmiddle" style="margin:0px; padding:0px; display:inline-block;"><$button style="margin:0px; padding:0px; font-size:1.5em;">{{$:/core/images/full-screen-button}}</$button></div><div class="svgiconstop" style="margin:0px; padding:0px; display:inline-block;"><$button style="margin:0px; padding:0px; font-size:1.5em;">{{$:/core/images/chevron-right}}</$button></div></div>

its a style section and 8 example icons to demo the positioning-- use the margin attribute in the style section to fine tune the svg's position

you can also put the style section into a global stylesheet

attached is a more detailed demo of svg & button vertical aligns

[A Gloom]

I applied the svg style to your macro and it seems to work

\define scroll_buttons2(filterlimit: 10000)
<style>.scroll_button {padding: 0px; font-size: 1.5em;}

.scroll_button_div {display: table-cell; width: 5%;}

.scroll_button_div svg{vertical-align:top;}</style>