[TW5] Overriding $:/core/images/save-button with a PNG file

[Hegart Dmishiv]

Hi all,

In our {{DesignWrite}} semester project, we have overridden many of the $:/core/images SVG files with PNGs from the Farm Fresh Web Icons collection, as they give the feel of "simplicity" and "for dummies" that we're trying to attain as part of the project. One problem we've encountered is when trying to override the $:/core/images/save-button tiddler with a blue floppy disk icon, it will no longer be able to be automatically coloured red when changes need to be saved. Is there some way to emulate the SVG's functionality here by providing a second PNG file, of a red floppy disk icon, to show when changes need saving? I guess this would require some heavy-duty core programming to make that work, and I have no idea how to do that part.

You can see a demo of our project so far, with the overridden icons, here.

Hegart.

[Mat]

http://twaddle.tiddlyspot.com/#How%20to%20apply%20styling%20to%20core%20images

<:-)

[c pa]

Excellent:

So what twaddle says is that you need to provide styling for your icon like

.tc-dirty-indicator {border: 3px solid red}

or something like that

[Hegart Dmishiv]

That sounds like a perfect solution, thanks Mat and c pa. A nice red border around the blue floppy disk PNG icon would be quite fine, I reckon. Now, where do I put the code to set the styling on the PNG image? This is the part that I will really need some help with.

Hegart.

[Hegart Dmishiv]

Also, while we're on the subject, I've just noticed that opening a SubStory sets the TiddlyWiki to dirty. Is there some way of preventing that from happening?

Hegart.

[Mat]

@Hegart - I'm sorry but I realized my answer is not quite relevant since you're NOT using svg images but instead your own png images.

To style these, surround them with e.g a span, i.e

<span class="myIcons">{{yourTranscludedImage}}</span>

And in a stylesheet, i.e a tiddler simply tagged $:/tags/Stylesheet

put in e.g

.myIcons:hover {border:1px solid blue}

or other CSS.

<:-)
 

[Hegart Dmishiv]

Hi Mat,

Sorry, I'm still confused. How will this know, and be able to alert the end-user, that the TiddlyWiki is dirty and needs to be saved? Where is that particular mechanism in the core, and how do I override it?

Hegart.

[Birthe C]

Hi Hegart,

Edit $:/core/ui/Buttons/save-wiki, transcluding your save.png.

Add .tc-dirty-indicator as suggested by Mat to your stylesheet.

Tiddler: $:/core/modules/saver-handler.js handles saving when dirty. (You should not change anything there)

Birthe

[Ton Gerner]

Hi Hegart,

See http://pngtest.tiddlyspot.com/

Cheers,

Ton

On Saturday, April 9, 2016 at 5:59:54 PM UTC+2, Hegart Dmishiv wrote:

[Hegart Dmishiv]

Hey all,

Thanks for the hand-holding, and particularly for your demo, Ton. I've gotten this working great now.

It's perfectly sufficient for the Alpha Release as is, but before the Full Release I'd really like to see if we can get some sort of image flipping, replacing the blue floppy disk image with a red one whenever the wiki needs to be saved. That's a longer-term goal though.

Again, thanks for all the help,

Hegart.