Now is the time to help with testing the TiddlyWiki v5.2.6 prerelease

Personally, I much prefer the save button not be touched. Looking at this thread of discussion, I think it is a mistake to change it.

Do, however, consider a small and easy interface (and/or: documentation) for folk to change it as they please.

1 Like

All those constructive discussion about one icon ! I think I will never complain about UI design. It’s a tough job !
But I will anyway give my last proposal. After that, I let Jeremy decide whatever he wants. Until now his decisions were always wise about TW.

arrow
An arrow showing were to click in the same orientation as the tick mark…not to be confused with the download icon.

Although I like that …

A colour-blind person (who cannot distinguish red and black) will not have enough of a visual cue. The differences between the two images (imagine them the same colour) are much too subtle.

The goal is to have something that can work for all abilities by making it easy to change via a simple interface.

Mine was just an example of what needed to be done to get things working nicely for two people with very different disabilities.

I wasn’t dictating a button for everybody. The idea is to have a button that can be easily customised to accommodate all abilities.

1 Like

Now there’s an idea… easily changed via a setting in Control Panel?

Hallelujah.

Somebody who gets what I’m trying to say despite me having a devil of a time with coherent wording.

Much appreciated !

If only I had a budget for an interpreter of what’s in my sponge …

The problem though, for such a fundamental part of the UI, it invites differences across systems. For the fundamentals, TiddlyWikis should look broadly similar out of the box.

Let’s see what others have to say.

For sure.

As long as a thing is recognisable when seen.

That’s why I’m not fond of changing the shape (or the name, or the function) of a thing.

But well-appointed animation to draw attention to a thing that ought to be done (like something’s changed, and you ought to press save), whether or not colour is involved, is a good way to go along with simple settings in the control panel.

I don’t see this as being any more problematic (or worth any less/more consideration) than other control panel settings like font-family, font-size, animation duration, etc.

If we are going to have willy-nilly image “shapes” for buttons, then we’ll get into cross-TW-instance-usage challenges.

Colour and animation variations in buttons (or anywhere) shouldn’t cause any hiccups, as long as they can be adjusted easily.

1 Like

I agree with this. It’s tricky to find a compromised solution that works for everyone. Any change of the default “dirty-state” icon would require everyone (colourblind or not) to adapt and get used to it. It affects everyone. One solution could be to offer an official “accessibility plugin” that includes this icon change, among other things, which can be installed by users based on their individual needs.

3 Likes

Oh no! This is very confusing! It is like an incongruous icon on the page control!
I think the first recording icon was better! I raised the issue that, the recording icon may be misleading as users may think TW is continuously saving when it is displayed on the page control.

2 Likes

@jeremyruston What do you think about replacing the done element with a small fish element?

save_button

It is well understood that there is tiddler being modified.

Icon 1 code
<svg width="22pt" height="22pt" class="tc-image-save-button-dynamic tc-image-button" viewBox="0 0 128 128">
<g class="tc-image-save-button-dynamic-clean">
<path fill-rule="evenodd" d="M120.783 34.33c4.641 8.862 7.266 18.948 7.266 29.646 0 35.347-28.653 64-64 64-35.346 0-64-28.653-64-64 0-35.346 28.654-64 64-64 18.808 0 35.72 8.113 47.43 21.03l2.68-2.68c3.13-3.13 8.197-3.132 11.321-.008 3.118 3.118 3.121 8.193-.007 11.32l-4.69 4.691zm-12.058 12.058a47.876 47.876 0 013.324 17.588c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48c14.39 0 27.3 6.332 36.098 16.362L58.941 73.544 41.976 56.578c-3.127-3.127-8.201-3.123-11.32-.005-3.123 3.124-3.119 8.194.006 11.319l22.617 22.617a7.992 7.992 0 005.659 2.347c2.05 0 4.101-.783 5.667-2.349l44.12-44.12z"/>
</g>
<g class="tc-image-save-button-dynamic-dirty">
  <path
     d="m 112,65 c -74.666667,42 -37.333333,20.999999 0,0 z m -48,64 c 35.346,0 64,-28.654 64,-64 C 128,29.654 99.346,1 64,1 28.654,1 0,29.654 0,65 c 0,35.346 28.654,64 64,64 z m 0,-16 C 90.51,113 112,91.51 112,65 112,38.49 90.51,17 64,17 37.49,17 16,38.49 16,65 c 0,26.51 21.49,48 48,48 z"
     id="path2"
     inkscape:connector-curvature="0"
     style="fill-rule:evenodd"
     sodipodi:nodetypes="ccssssssssss" />
  <path
     id="path814"
     p-id="2673"
     d="m 58.728752,85.569982 c 12.129069,0 22.721273,-7.383676 28.61662,-13.700982 l 11.77317,8.904354 c 1.635278,1.237581 4.076718,-0.08088 3.658808,-1.976345 L 99.517582,64.000005 102.7787,49.201646 c 0.41792,-1.895458 -2.02354,-3.212578 -3.65881,-1.976351 l -11.773165,8.90436 C 81.45138,49.813697 70.857821,42.43002 58.728752,42.43002 c -18.531312,0 -33.554804,17.255987 -33.554804,21.569985 0,4.313992 15.023492,21.569977 33.554804,21.569977 z M 46.942103,60.764507 c 1.786267,0 3.235498,1.449231 3.235498,3.235498 0,1.787607 -1.449231,3.235496 -3.235498,3.235496 -1.787607,0 -3.235497,-1.447889 -3.235497,-3.235496 0,-1.786267 1.449238,-3.235498 3.235497,-3.235498 z"
     inkscape:connector-curvature="0"
     style="stroke-width:0.06740619" />
</g>
</svg>
Icon 2 code
<svg width="22pt" height="22pt" class="tc-image-save-button-dynamic tc-image-button" viewBox="0 0 128 128">
<g class="tc-image-save-button-dynamic-clean">
<path fill-rule="evenodd" d="M120.783 34.33c4.641 8.862 7.266 18.948 7.266 29.646 0 35.347-28.653 64-64 64-35.346 0-64-28.653-64-64 0-35.346 28.654-64 64-64 18.808 0 35.72 8.113 47.43 21.03l2.68-2.68c3.13-3.13 8.197-3.132 11.321-.008 3.118 3.118 3.121 8.193-.007 11.32l-4.69 4.691zm-12.058 12.058a47.876 47.876 0 013.324 17.588c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48c14.39 0 27.3 6.332 36.098 16.362L58.941 73.544 41.976 56.578c-3.127-3.127-8.201-3.123-11.32-.005-3.123 3.124-3.119 8.194.006 11.319l22.617 22.617a7.992 7.992 0 005.659 2.347c2.05 0 4.101-.783 5.667-2.349l44.12-44.12z"/>
</g>
<g class="tc-image-save-button-dynamic-dirty">
  <path
     d="m 112,65 c -74.666667,42 -37.333333,20.999999 0,0 z m -48,64 c 35.346,0 64,-28.654 64,-64 C 128,29.654 99.346,1 64,1 28.654,1 0,29.654 0,65 c 0,35.346 28.654,64 64,64 z m 0,-16 C 90.51,113 112,91.51 112,65 112,38.49 90.51,17 64,17 37.49,17 16,38.49 16,65 c 0,26.51 21.49,48 48,48 z"
     id="path2"
     inkscape:connector-curvature="0"
     style="fill-rule:evenodd"
     sodipodi:nodetypes="ccssssssssss" />
  <path
     id="path814"
     p-id="2673"
     d="m 69.271246,42.430018 c -12.129069,0 -22.721273,7.383676 -28.61662,13.700982 l -11.77317,-8.904354 c -1.635273,-1.237581 -4.07672,0.08088 -3.658804,1.976345 l 3.259764,14.797004 -3.261112,14.798359 c -0.417922,1.895458 2.023531,3.212578 3.658804,1.976351 l 11.773165,-8.90436 c 5.895345,6.315958 16.488904,13.699635 28.617973,13.699635 18.531312,0 33.554804,-17.255987 33.554804,-21.569985 0,-4.313992 -15.023492,-21.569977 -33.554804,-21.569977 z m 11.786649,24.805475 c -1.786267,0 -3.235498,-1.449231 -3.235498,-3.235498 0,-1.787607 1.449231,-3.235496 3.235498,-3.235496 1.787607,0 3.235497,1.447889 3.235497,3.235496 0,1.786267 -1.449238,3.235498 -3.235497,3.235498 z"
     inkscape:connector-curvature="0"
     style="stroke-width:0.06740619" />
</g>
</svg>
1 Like

One of the difficulties of the rediesign of this button is that it stands a whole bunch of saving methods.
I would make sense to indikate what type saving will be performed.
For example this would be a good icon if no password is set, because it indicates that you will download the wiki.
grafik grafik
Whereas the second icon indicates you will be uploading to the cloud for example to tiddlyhost.

A changing icon that way could also be helpful as an indicator to remind you that you forgot to set the pw.

Perhaps we could use an icon stored in the icon-field of the tab-tiddler for the current saving-method.
But I guess this would be something for the next release.

YES!

"Being a JS / HTML / CSS / SVG, very clever, very well co-ordinated, web-page-mashup-machine, via a unitised (Tiddleresque) bottom-up, architecture …

… TiddlyWiki affords, by fundament, probable cross-platform viability with congruent UI visibilities."

There are a few concepts in that statement that do deserve attention?

Best, TT

Ya know, it might seem a bit silly at first, but I think it’s abstract enough to be pretty neat, I like it.

Edit:

That being said, we’ve gone over using shapes and arrows, but what if we just change the checkmark to a dash( - ) when a save is needed?

Or, if it’s not too complicated of a symbol, an hourglass is also used for a saving icon, typically with videogames, though if icon age matters like it did with the floppy disk (ye olde first save method) an hourglass is a fair bit older :sweat_smile:

Hi @twMat in general I don’t like the idea of punting accessibility into a plugin. It furthers the idea that accessibility is an option that can be bolted on, rather than something that must be intrinsic to the product. Accessibility isn’t something that’s just required by a few people; it’s situational too. For example, somebody who has normal vision might be using a monochrome display with TiddlyWiki. I was taught 30 years ago not to use colour alone to distinguish UI state, and so I consider the current state of affairs to be a bug.

The button will always be customisable.

Control panel settings are a last resort because every new setting multiplies the number of configurations that must be tested.

The fish icon is adorable, and I’d love to use it somewhere. But I don’t think it works here because it doesn’t relate coherently to the usual tick-in-a-circle icon.

I don’t think that that is a new issue introduced by this change.

Stepping back, all the efforts to come up with a better icon than the original circle-in-a-circle are attempts to design an icon that conveys the semantics. This exhaustive exploration of the options has demonstrated to me that this is not possible. These options we’ve explored are necessarily more complex and harder to understand, but their meaning is no more obvious than the circle-in-a-circle. The virtue of the original circle-in-a-circle icon was that it was simple, and that’s quite an important one.

I’m planning to publish the v5.2.6 release shortly. I’m currently considering two options:

a) Return to the circle-in-a-circle icon
b) Revert these changes entirely and deal with them in a later release

I’m currently minded to go with the first option. I know that some people don’t like that option, but it seems to me that our attempts to improve it haven’t been entirely successful.

One small issue I ran into with the new “save-button-dynamic” image:

I have some add-ons for which it is appropriate to use the new dynamic button image. However, simply changing from $:/core/images/save-button to $:/core/images/save-button-dynamic breaks backward-compatibility if my add-ons are installed in an older version of TiddlyWiki (which, of course, lacks the new “save-button-dynamic” image)

To address this, I replaced my previous use of:

{{$:/core/images/save-button}}

with

<$transclude tiddler="$:/core/images/save-button-dynamic">{{$:/core/images/save-button}}</$transclude>

Thus, when installed in TW5.2.6 or above, my add-on will use the new image, but if installed in TW5.2.5 or earlier, it will fallback to using the old image.

I support option a) because of its simplicity

While the save-icon discussion is “on topic”, it seemed to be the only topic, which is a bit sad.

The OP stated:

We did get some feedback to:

We did get no feedback about:

  • If the upgrade mechanism still works with your own wikis
  • If all the core plugins still work with your own wikis
  • If the added doc tiddlers that where added till v5.2.5 was released could be improved
  • The prerelease-release-notes have been the “landing page” with detailed links to review the changes that have been made.
    • We did get no feedback, if any of these changes did interfere with your own wikis …
    • If the new markdown-plugin still works with your wikis
    • If the updated highlight plugin sill works with your wikis

I think, there are quite some missed opportunities that have been left on the table.

It was the first time, that we did have a Roadmap for release of v5.2.6 and v5.3.0 with a “feature freeze” period of 14 days that was dedicated to “iron out” problems with the upcoming v5.2.6 version and updated plugins

Now the version itself will have to be used to find out about “real” problems.

… I hope we can do better next time for v5.3.0 (see roadmap link above)

Just some thoughts

have fun!
mario

2 Likes

I upgraded my Kansas Railroad TW last week without any issues. Everything seemed to work as it did before. I tested all of my custom functionality and nothing appeared to break. Looking forward to it.

1 Like

I think the diamond-in-circle is better.

I think the absence of feedback is meaningful. There’s only so much you can do in real life. I upgraded two of my most heavily used TW’s. One with 8000+ tiddlers. Another with 10+ official plugins (mostly code mirror). There wasn’t any particular problem, even with 3rd party plugins. But of course, I may not have tried every feature.

On Mastodon, one user said they were having trouble with auto-save with the “new” version of TW on nodejs. But they never said exactly what version they were using, so that might not even be relevant.

1 Like