[TW5] New buttons for th

[Matabele]

Hi

Jeremy mentioned, in Tiddlywiki Hangout #48, that a library of images for buttons would soon be added to the core and invited submissions for this library. 

This would be much appreciated, as I find the adaptation of .svg images for use in TW5 to be a tedious process -- buttons end up the wrong size, do not resize well, have unexpected colours, and either do not position well, or do not look good next to the existing buttons.

In addition to Ton's 'clone tiddler', 'close others' and 'close all' button images, which seem to behave well, I have found a need for the following:

To be used alongside text links:

   -- an image indicating 'open slider' (I use 'caret down' from the Fontawesome font set)

   -- an image indicating 'close slider' (I use 'caret up' from the Fontawesome font set)

   -- an image indicating 'edit' (the existing pencil does not look good in this resolution and I use 'pencil' from the Fontawesome font set)

   -- an image indicating 'trash' (the existing trash can does not look good in this resolution and I use a 'trash-o' from the Fontawesome font set)

   -- an image indicating 'done' (I use a 'check-square-o' from the Fontawesome font set)

For buttons:

   -- an image indicating 'todo' (I use a 'check-square-o' from the Fontawesome font set)

   -- an image indicating 'tab' (I use a 'folder-o' from the Fontawesome font set)

The icons included in the Fontawesome font set appear to offer high quality icons that play well alongside the existing icons, but these need to be adapted into standardised .svg images suitable for TW5

   -- http://fortawesome.github.io/Font-Awesome/icons/

Other possibilities:

   -- tag

   -- tags

   -- lock

   -- unlock

   -- calender

   -- search

Please share your thoughts on your requirements -- hopefully the graphics wizards can then get to work on creating an awesome set of icons for TW5 :-)

[Jeremy Ruston]

Hi Matabele

There's definitely demand for more icons. I'm increasingly thinking we should adopt an existing icon library, rather than trying to assemble our own. I think it will be difficult to maintain aesthetic integrity otherwise. A switch to icon fonts could make sense because of the difficulties of preparing SVG icons. The fontawesome WOFF font is 84KB, which is temptingly small...

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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[Matabele]

Hi Jeremy

I experimented earlier with the Fontawesome font set in my TW. The icons are high quality and play well together with your existing icons (a few appeared not to align correctly when used alongside one another.)

My TW behaved nicely once I had installed Fontawesome into my OS, however visitors to tiddlyspot experienced problems as the plugin did not appear to function correctly for those without the font set installed. 

The Fontawesome fonts were easy to use in TW both for buttons and within the wikitext, and provided a rich choice of icons. The one problem I had was the necessity of re-stylng the icons for different sections of my TW (the existing icons are automatically re-styled according to the theme settings -- switching automatically from black to white, for example.)

I feel that including a font set such as Fontawesome within the core would be a better approach than adapting a limited number of icons to svg. 

regards

[Ton Gerner]

Hi,

I totally agree it will be best to adopt an existing icon library.

When I started with TW5 there were only the core icons and I had to grab free svg icons from everywhere for my experiments with toolbar buttons.
Most icons I found were difficult to use for a beginner.
One simple set of free icons I found was at http://raphaeljs.com/icons/ and I use a few of them in my guides.

The following is just for the "do it yourself guys" who don't know how to use svg icons (information found in my customization guide http://tw5custom.tiddlyspot.com/ as well):

The svg 'code' of the raphaël icons is given as (filled square as example):

M5.5,5.5h20v20h-20z

This svg 'code' has to be copied into the general svg form of an icon as used in TW5 (inserted between the quotes):

<svg class="tw-xyz-button tw-image-button" height="22px" width="22px" viewBox="x y xx yy"><path d=" ... "/></svg>

It requires only small tweaks in width, height, and viewBox settings.

Cheers,

Ton

[Matabele]

Hi

On Friday, June 6, 2014 11:29:51 AM UTC+2, Ton Gerner wrote:

Hi,

I totally agree it will be best to adopt an existing icon library.

Another prospective icon library may be found here: http://www.typicons.com/

The 'Typicon' font set has a more rounded style the Fontawesome font set (perhaps more suited to TW5?) and could be cut down to a smaller number of icons to decrease the size of the library from 80kB.

It requires only small tweaks in width, height, and viewBox settings.

It's the small tweaks to the width, height and viewBox settings that I find most frustrating -- I am also sometimes forced to resort to a transform.

regards 

[PMario]

While I like the Font-Awesome project I'd like to stay with svg icons.
IMO there are some very good reasons  http://css-tricks.com/icon-fonts-vs-svg/

I don't want to install a font on my OS just to have fast font icons. I don't want to notify google or someone else, that I'm visiting a TiddlyWiki.html just because I need to load a font from a cdn.

The icons should be part of the html file.

have fun!
mario

[Danielo Rodríguez]

I agree with Mario. The most autonomous tiddlywiky is the better

[PMario]

On Friday, June 6, 2014 11:29:51 AM UTC+2, Ton Gerner wrote:

This svg 'code' has to be copied into the general svg form of an icon as used in TW5 (inserted between the quotes):

<svg class="tw-xyz-button tw-image-button" height="22px" width="22px" viewBox="x y xx yy"><path d=" ... "/></svg>

If everything is set up in the right way the viewBox should be like this: viewBox="0 0 22 22"

Otherwise there is a problem with the settings in the program that was used to draw/export the svg images.

I also think, that most svg icons will need some extra love, to make them propper styleable with CSS. ...

-mario

[PMario]

I just found this page: http://www.flaticon.com/
Which seems to have some nice download features. ....
-m

[Jeremy Ruston]

We can embed an icon font just as we do with the Arvo font in the Starlight theme. People won't need to install the font on their OS unless they are using an ancient browser that doesn't support modern font embedding.

Best wishes

Jeremy

—
jeremy...@gmail.com

[Ton Gerner]

Hi Mario,

On Friday, June 6, 2014 5:56:41 PM UTC+2, PMario wrote:

On Friday, June 6, 2014 11:29:51 AM UTC+2, Ton Gerner wrote:

This svg 'code' has to be copied into the general svg form of an icon as used in TW5 (inserted between the quotes):

<svg class="tw-xyz-button tw-image-button" height="22px" width="22px" viewBox="x y xx yy"><path d=" ... "/></svg>

If everything is set up in the right way the viewBox should be like this: viewBox="0 0 22 22"

Yes in the ideal world ;-)
But even the core images are not perfect, see $:/core/images/cancel-button
It contains:

<svg class="tw-image-cancel-button tw-image-button" viewBox="366 150 58 58" width="22pt" height="22pt"> .....

Cheers,

Ton

[David Gifford]

I used flaticons for this tiddlywiki that I showed off at the last Google hangout:

http://giffmex.org/englishtemplate.html

[Danielo Rodríguez]

Wow!

This is amazing. I really like your customizations. I think I partially understand it, but could you explain it a bit?

Regards

[David Gifford]

Hi Danielo,

The basic idea is this:

1. Three left tabs: a tab for a table of contents, a second tab with extra editing stuff (I don't use this tab much, but the tagnotiddler+missing list and the orphan list do actually help me fill out what is missing in the hierarchy), and a tab with the stuff from the rightsidebar.

Open the @ on the table of contents tab ($:/_Tronco) and edit it to create links from there and work your way down.

2. Viewtoolbar in each tiddler:

a. Clicking the up arrow reveals the parent tiddlers - basically, tiddlers with titles that correspond to the tags of the present tiddler. Create parents by tagging then creating tiddlers for the tag.

b. Clicking the down arrow reveals the child tiddlers or subcategories - tiddlers tagged with the title of hte present tiddler. These are created by any of the new here buttons to the right of the arrows (see below)

c. Clicking the right arrow reveals the related tiddlers - tiddlers linked to from the present tiddler and tiddlers that backlink to the present tiddler.

d. The square icon is to create a new tiddler tagged with this tiddler's title. (in TW classic terminology, "new tiddler from here")

e. Next is the new index from here - a new tiddler tagged with this tiddler's title, but also with a list of all tiddlers tagged with that index's title.

f. New image tiddler from here

g. New image gallery from here - every tiddler tagged with the gallery's title will appear in the gallery in miniature

h. New checklist tiddler from here

i. New contact tiddler from here

j. New contact list from here

3. Another modification is the hamburger to open and close the leftmenu and thus widen or narrow the tiddler width

4. In edittemplate the tag adding field is wider and in a format so that the user can see many more tags on the screen.

This is not an adaptation for TW5 that I am promoting that others use. Though certainly if you like anything from it, feel free to use it. I am just showing you this as a template I am using for my notes. How do I use it?

1. I have started a contact TW. I add the main categories to $:/_Tronco, then quickly add subcategories of contact lists, then contacts, by using the new contact list from here and new contact from here buttons.

2. I have notes TWs by topic where I do the same but with notes and indexes.

3. I will no doubt eventually have a TW with image galleries.

The idea of these tiddlers is this: create a topic tiddler. With one click create a subtopic tiddler. With another click a grandchild tiddler, etc etc. Move up and down the hierarchy with the lists in the up and down arrows. And quickly add different kinds of tiddlers - images, indexes, galleries, contacts, etc.

My other big TW project now is http://recursos.giffmex.org/. The main TW is an index of links to all the tiddlers on the subcategory TWs. It is an eventual replacement for my one-file http://www.giffmex.org/recursosgiffmex.htm

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/jCcgoAwWwmk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--
David Gifford
Christian Reformed World Missions, Mexico City

[David Gifford]

I should add that this is probably a system that could easily create too many tags to make it efficient for very large projects. But download it and play with it for a while to get a feel for it. The up and down arrows in the viewtoolbar function like breadcrumbs or like the tabs in the TiddlersBar from TW classic. Easy navigation up and down without needing to open the infotiddler window. I don't like TiddlerInfo, because it requires three steps - click to open the window, then click to choose the tab, then click on the link you want. My way clicks on an arrow and then click on the link.

I think I need to switch this to zoomin mode since the lists under the arrows bunch up when there is more than one tiddler open int he story river.

Blessings, Dave