SVG for button graphic

[A Gloom]

WARNING; uses absolute positioned (positon:absolute) div's.
  If the absolute positioned div is taken out of it relatively
positioned container div (positon:relative), it can appear elsewhere,
including outside of the tiddler frame area where tiddler content
normally appears, in worst case covering and blocking tiddler controls
(close, edit, etc)

This isn't for the casual, requires fine tuning and can be tempermental-- but the diamond stagger button bar I showed TT in another previous topic...

SEE 3RD POST FOR IMPROVED CODE

just noticed some dead spots in the link coverage at the last moment-- will look into when i get time, but here's the original code.  Screenshot below shoes a version with borders to the components to show how it gets constructed.  Attached is test tiddlers and the diamond svg to go with the code.

<$list filter="[prefix[zz test pg]limit[4]sort[sortorder]]">

<div style="position:relative; display:inline-block;">
<div style="position:relative; display:inline-block; margin-right:-12px;"><$link>{{svg diamond}}</$link></div><div style="position:absolute; top:21%; left:21%; width:100%; text-align:center;"><$link><$view field="captletter"/></$link></div></div></$list>

~~ he who walks against the wind, walks alone ~~

[A Gloom]

took care of the dead spot, added div container for diamonds so it can be sized as well as making able to fit on a line with other content

<div style="display:inline-block; padding:0px 10px;">

<$list filter="[prefix[zz test pg]limit[4]sort[sortorder]]">

<div style="position:relative; display:inline-block; margin:-10px;">
<div style="position:relative; display:inline-block"><$link>{{svg diamond}}</$link></div><div style="position:absolute; left:0%; top:25%;  display:inline-block; width:100%; cursor:pointer; pointer-events:none; text-align:center;"><$view field="captletter"/></div></div></$list></div>

use field "captletter" for tiddlers so you can have single letters display inside the diamonds, titles will overflow out of the shape

classes can be assigned to the divs and inline styling can be moved to a global stylesheet (I tend to use inline styling for fine tuning for different tiddlers, especially since layouts are still be ironed out and changing often)

this also demonstrates an easy way to make an icon, image or object such as a div, a link "object" --

 <$list filter="[[tiddler title]]"><$link><img div image tiddler transclusion</$link></$list>

[TiddlyTweeter]

Ciao Gloom

I am really interested in this! Especially the diamonds.

I'm super busy ATM. But I will look at it and test and comment over the next week.

Best wishes

TT

A Gloom wrote:

took care of the dead spot, added div container for diamonds so it can be sized as well as making able to fit on a line with other content

<snip> 

[A Gloom]

just be careful-- save any wotk before messing with code in case of worst case-- see warning below

WARNING; uses absolute positioned (positon:absolute) div's.  If the absolute positioned div is taken out of it relatively positioned container div (positon:relative), it can appear elsewhere, including outside of the tiddler frame area where tiddler content normally appears, in worst case covering and blocking tiddler controls (close, edit, etc)

Also you will notice the link/clickable area is larger than the diamond-- the usual behavior of text or image being a link with html-- their bonding box is the clickable area, which is always square/rectangular despite the text or image shape.

[A Gloom]

more mad button coding

tc-btn-pill -oval

tc-btn-diamond

tc-btn-diagonal (with independent text orientation (from button orientation))

remember-- theme used negates most wiki css theme/palette, so cannot show background/text/border color, shadowing, just white button borders

double diamond row- 2 rows of manually generated div buttons

list generated diagonal, pill, diamond wiki $button widgets

2 list generated diagonal pill wiki $button widgets for top & side bars with link transclusion into body of tiddler

[A Gloom]

left the sidebar in the other screenshot which makes details harder to see, lets see if this improves things

[TiddlyTweeter]

The approach is definitely interesting.

I could see a progression of diamonds indicating or initiating steps in a sequence.

The shape of the clickable area is a bit of an issue. I think there is a way round that in that SVG is usable much like "image maps" used to be.

Here is an example in TW: http://sunypoly-cushinj-project.tiddlyspot.com/#Choose%20a%20County

Best wishes

TT

[A Gloom]

The shape of the clickable area is a bit of an issue. I think there is a way round that in that SVG is usable much like "image maps" used to be.

Here is an example in TW: http://sunypoly-cushinj-project.tiddlyspot.com/#Choose%20a%20County

problem with svg links is the shadow DOM, haven't figured how to have TW apply linkd inside svg's without manually inserting the link into the svg code-- not so much an issue with the typical icon for link.

TW system svg icons (used for buttons) use a button for applying any link and the button is a html element which has the square bounding box so the blank (padding) area between the actual graphic and its button edges, no an issue since the icon usually fills most of the button. -- But with diamonds which have considerable blank space in the corners, it becomes obvious.

But the last demo actually used rotated div's and buttons which give true diamond shaped clickable areas-- much eadier and just as good-- color, border hover changes and animations can be done to them just like with a svg.