From 0cfe6597d4b041a8593ba5b47a3d893cbf931b21 Mon Sep 17 00:00:00 2001 From: Mario Pietsch Date: Mon, 25 Oct 2021 17:23:57 +0200 Subject: [PATCH] Add new improved "Icon Gallery" (#6112) * add a core icon selector to the docs * Add Icon Gallery and improve links to expose the function * re-add the ImageGallery Example tiddler --- editions/tw5.com/tiddlers/Icon Gallery.tid | 14 +++++++++++++ .../demonstrations/ImageGallery Example.tid | 21 +++++-------------- ... the things you can do with TiddlyWiki.tid | 4 ++-- ... create dynamic editor toolbar buttons.tid | 4 ++-- .../tiddlers/macros/image-picker Macro.tid | 4 ++-- .../systemtags/SystemTag_ $__tags_Image.tid | 4 ++-- 6 files changed, 27 insertions(+), 24 deletions(-) create mode 100644 editions/tw5.com/tiddlers/Icon Gallery.tid diff --git a/editions/tw5.com/tiddlers/Icon Gallery.tid b/editions/tw5.com/tiddlers/Icon Gallery.tid new file mode 100644 index 000000000..947dc8f78 --- /dev/null +++ b/editions/tw5.com/tiddlers/Icon Gallery.tid @@ -0,0 +1,14 @@ +created: 20211013132515594 +modified: 20211018102307833 +tags: Learning +title: Icon Gallery +type: text/vnd.tiddlywiki + +\define copyActions() <$action-sendmessage $message="tm-copy-to-clipboard" $param=<>/> + +This gallery let's you ''click'' the ''icons'' and ''copies the title to the clipboard''. So it's easy to transclude them into other UI elements. + +
+<$macrocall $name="image-picker-list" filter="[all[shadows+tiddlers]tag[$:/tags/Image]]" actions=<> /> +
+ diff --git a/editions/tw5.com/tiddlers/demonstrations/ImageGallery Example.tid b/editions/tw5.com/tiddlers/demonstrations/ImageGallery Example.tid index d0d2538df..8827c7260 100644 --- a/editions/tw5.com/tiddlers/demonstrations/ImageGallery Example.tid +++ b/editions/tw5.com/tiddlers/demonstrations/ImageGallery Example.tid @@ -1,22 +1,11 @@ created: 20140809113603449 -modified: 20150520161451179 +modified: 20211022195248529 tags: Learning title: ImageGallery Example type: text/vnd.tiddlywiki -Here is an example of using the ListWidget and the TranscludeWidget to show a grid of all system images (ie, tiddlers tagged [[$:/tags/Image]]). +''Info:'' The "~ImageGallery Example" has been replaced. This tiddler will be kept, so external links won't break. Below you see the [[Icon Gallery]] as a transcluded tiddler. - -
-<$list filter="[all[tiddlers+shadows]tag[$:/tags/Image]]"> ->> -<$transclude/> - - -
+--- + +{{Icon Gallery}} \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/hellothere/Some of the things you can do with TiddlyWiki.tid b/editions/tw5.com/tiddlers/hellothere/Some of the things you can do with TiddlyWiki.tid index 8ca09ca71..b2cc5d6aa 100644 --- a/editions/tw5.com/tiddlers/hellothere/Some of the things you can do with TiddlyWiki.tid +++ b/editions/tw5.com/tiddlers/hellothere/Some of the things you can do with TiddlyWiki.tid @@ -1,5 +1,5 @@ created: 20140904090300000 -modified: 20160602051709631 +modified: 20211018102355896 tags: HelloThere title: Some of the things you can do with TiddlyWiki type: text/vnd.tiddlywiki @@ -11,7 +11,7 @@ type: text/vnd.tiddlywiki * Inventory just about anything: your recipes, personal library, contacts, music collection, and more * Create a blog or website * Write a book -* Organise your images into galleries (see our [[ImageGallery Example]]) +* Organise your images into galleries (see [[Icon Gallery]]) * Share the information in your ~TiddlyWiki with others, as an online file, as a file attachment, as a tiddler file, or as a link to a specific online tiddler (try clicking and dragging a tiddler from one ~TiddlyWiki file to another to see what happens) * Draw a sketch (Edit [[Motovun Jack.jpg]] and start drawing over the image to see what happens) * Use familiar web user interface elements such as lightboxes - see SampleWizard diff --git a/editions/tw5.com/tiddlers/howtos/How to create dynamic editor toolbar buttons.tid b/editions/tw5.com/tiddlers/howtos/How to create dynamic editor toolbar buttons.tid index 27ed11d03..03df1adca 100644 --- a/editions/tw5.com/tiddlers/howtos/How to create dynamic editor toolbar buttons.tid +++ b/editions/tw5.com/tiddlers/howtos/How to create dynamic editor toolbar buttons.tid @@ -1,5 +1,5 @@ created: 20201216182347597 -modified: 20201217193318816 +modified: 20211018102328148 tags: title: How to create dynamic editor toolbar buttons type: text/vnd.tiddlywiki @@ -86,7 +86,7 @@ This tiddler contains all the necessary elements that are important for toolbar : Is used as the button tooltip ; icon -: Assigns the button icon. We use `$:/core/images/spiral` {{$:/core/images/spiral}} here. +: Assigns the button icon. We use `$:/core/images/spiral` {{$:/core/images/spiral}} here. More button icons can be found at the [[Icon Gallery]] ; shortcuts : This is the [[Keyboard Shortcut Descriptor]] eg: `((temp-bold))` diff --git a/editions/tw5.com/tiddlers/macros/image-picker Macro.tid b/editions/tw5.com/tiddlers/macros/image-picker Macro.tid index d6e2d38dd..8db810799 100644 --- a/editions/tw5.com/tiddlers/macros/image-picker Macro.tid +++ b/editions/tw5.com/tiddlers/macros/image-picker Macro.tid @@ -1,6 +1,6 @@ caption: image-picker created: 20160418155531395 -modified: 20160418155805435 +modified: 20211018102346306 tags: Macros [[Core Macros]] title: image-picker Macro type: text/vnd.tiddlywiki @@ -18,4 +18,4 @@ The images are selected by means of a [[filter expression|Filter Expression]], i > `[all[shadows+tiddlers]is[image]$subfilter$!has[draft.of]] -[type[application/pdf]] +[sort[title]]` -<<.macro-examples "image-picker">> +See: <<.macro-examples "image-picker">> and [[Icon Gallery]] diff --git a/editions/tw5.com/tiddlers/systemtags/SystemTag_ $__tags_Image.tid b/editions/tw5.com/tiddlers/systemtags/SystemTag_ $__tags_Image.tid index 7eef1f05a..434aa8ac3 100644 --- a/editions/tw5.com/tiddlers/systemtags/SystemTag_ $__tags_Image.tid +++ b/editions/tw5.com/tiddlers/systemtags/SystemTag_ $__tags_Image.tid @@ -1,9 +1,9 @@ caption: $:/tags/Image created: 20180926170345251 description: marks (core) images -modified: 20180926171456494 +modified: 20211018102336342 tags: SystemTags title: SystemTag: $:/tags/Image type: text/vnd.tiddlywiki -The [[system tag|SystemTags]] `$:/tags/Image` marks (core) images \ No newline at end of file +The [[system tag|SystemTags]] `$:/tags/Image` marks (core) images. An overview of system icons can be found at: [[Icon Gallery]] \ No newline at end of file