Plugin Idea: Tix – New Tiddler Layout (for TW >= 5.2.1)

Plugins
,
#61

Hi poc2go,

Welcome to the team! Your commitment sounds like a perfect match – testing, using and improving colour palettes is a need.

Thank you for your feedback, I will reply with several comments. Be assured that it is very motivating to hear that I have an ally. I have planned to release v0.9 really soon, your interest will not delay that – guaranteed. :smiley:

Yep. That is an issue I also mentioned in another thread:

I do not have the time to fix other peoples palettes at the moment, so I am really happy if you can improve the situation here. If you discover things in Tix (e.g. in my CSS) I can improve, please let me know.

I actually was able to reduce CSS in v0.9 and stay closer to TW standards. On the other hand I tuned even the vanilla palette … My goal is to make stuff as accessible as possible and when I tune colours I use tools like WebAIM: Contrast Checker to check contrasts.

Regarding resources already out there: Check out my Bricks app – it is not up to date regarding TW version, but has nice tools for colours and palette generation.
https://tid.li/tw5/apps/bricks.html

More will follow later.

Cheers,
Thomas

1 Like
#62

I agree. @telmiger is definitely in a new direction that helps a lot, a lot on Design. It illuminates “bringing things together” we already have plus innovation on layout. IMO it is a superb approach. It integrates, not dissipates.

If I get time I will try and comment in more detail. I just wanted you to know that “good foundation” are accurate words for what Tix is about.

Best wishes
TT

2 Likes
#63

Well, these elements are rarely used in TW and the styling of the range slider is difficult and cumbersome. The text input has the type “number” but is not fully supported by TW. Both have the advantage that you can use the arrow keys to adjust the value – but only the range slider supports small increments as needed.
As a possible improvement of the situation I considered to show the value below the slider as text only instead of an input field. But this would probably harm the accessibility of the solution. So in v0.9 I use an input of type text which seems less sensitive for colour issues.

#64

Yep. I tried that rabbit hole too: Palette Tool — Thomas’ Wiki Colourizer is an experiment I made some time ago. Take it, if you think it might be of any use. I think I gave up when I realized how complex the theming matter is and how many manual finetuning will be needed for every palette. And that they all might need updates in the future, if TW introduces new colours for new features.

#65

Final message for today: Tix v0.9 is available for you to try.
(And Tix v0.8 is archived as usual.)

Besides testing a configuration inspired by @saqimtiaz and some tuning of the vanilla colour palette for better contrasts, v0.9 demonstrates:

  • use visually hidden labels for buttons
  • button texts for sidebar buttons (page toolbar) and tiddler toolbars can be activated independently
  • bottom-toolbar: include buttons without changing their tags (preserve core buttons)
  • bottom-toolbar: sort buttons in order of activation
  • configuration of tiddler spacing
  • configuration: “Include icon” and button style moved from Tiddler Style to Page options (as these are global settings)

Plus many improvements under the hood (e.g. refined namespacing and tiddler naming for a better overview in @Mohammad’s Gatha). And some new bugs I did not find yet.

Looking forward to feedback and bug reports.

1 Like
#66

Hi Thomas
Wanted follow up with a little background and about why I picked this project.

I have been in the computer industry starting back in the late 60s. Lucky as a teen to live beside Dartmouth College and had access to the computer center - computers lived in buildings back then. In 90s started my own company doing Computer System Architect work in accounting, personnel, warehousing, and stock trading systems. Retired couple years ago - workaholic - totally burned out.

Rested up now and have for months been looking for a project that is interesting, challenging, somewhat under the radar, useful, and field of study that is new to me. Wanted a project that is associated with something new like Tix - but… based on a mature product. TiddlyWiki is here to stay.

Colors are not going to go away any time soon - I hope! Palettes have always been that thorn in any user interface I have built, or worse yet had to maintain. Countless tedious hours messing with these colors. Fixed it ‘here’ - but now ‘that’ broke - grrr.

I am committing myself for the long term on this project. I wanna build it with the help of others, maintain it, give it focus and direction, standardize computer palettes.

Hopefully will keep me engaged throughout my retirement years - go crazy otherwise.

Thanks for the opportunity!
poc2go

6 Likes
#67

Checked out Tix v0.9

Tested on Rasberry pi 4b - 4-gb mem - 32 gb sd card drive
OS - Linux Debian Buster - Raspbian 10 (32-bit)
LDXE Desktop
Browser Chromium - Version 92.0.4515.98 (Official Build)

For testing web stuff - if runs on the Raspberry runs on about anything.
Plus any performance or memory issues are glaringly obvious.

Scope of test is to press any/all tabs, buttons, dials, knobs, sliders, and boxes
Basically act like a 5 year old :cowboy_hat_face:

Most issues I found you probably know:

tiddler style → tiddler elements → icon centered

  • Icon does not move - remains left of title
  • However, the header does fold/unfold as if it wants to display it :slight_smile:
    Did this test on on Windows 10 and Android tablet too. Same result.

Sidebar Options → Active List

  • For consistency might want to add ‘Gatha’ to the list
  • Unless is only for dev environment

Sidebar Options → Arrange tabs

  • Does not open tab on reload
  • Though does remember the setting

Page Customisation

  • Spelling error? - nope just another colourful en-GB thing

Page Customisation → Toolbar buttons → Include icon (and text)

  • When pressed, the page scrolls the sidebar - to its top position
  • If editing a tiddler - scrolls tiddler to top and focus changes to the title
  • I am assuming this behavior is in TW itself and unavoidable
  • Is an edge case - I was writing these notes in a tiddler while testing
  • Would be surprised if this issue is discovered out in the wild
  • Possible solution - leave the sidebar buttons alone
  • Or if including the sidebar buttons - ‘include text’ is not working.

Page Customisation → Toolbar buttons → Include text → show text

  • Does not work on tiddler buttons
  • Though works for Top of Page button
  • Which might be the behavior desired?
  • Is a confusing checkbox - of course I’m only 5 yrs old

Speaking of which - late, so gonna find my Teddy Bear and go to bed.

poc2go

2 Likes
#68

Thanks a lot for testing – this is great support, very appreciated!

The checkbox text is “icon centered (in header)” that means that the icon can be centered, if it is in the header part. In the demo v0.9 it is in the top part. Possible solutions:

1 better text for the checkbox (add “part”?)
2 only show the option if the icon has the tag $:/tags/TiddlerHeader
3 explain how it works in the readme (to be written)

Maybe 2 + 3 would be the best?

1 Like
#69

b) Gatha is only there for development
a) There is a to do remark that should remind me to make this feature dynamic instead of hard coded (you never know what people put in the sidebar)

I will tackle a) later as the sidebar is not related to Tix (tiddlers) but to the rest of the page layout (Lox theme). – UPDATE: Consider a done.

#70

Here I was so lazy to transclude a core control panel option that might not be useful for single page wikis or only in special cases. I think we could remove it without damage. It will still be available in the control panel.

{{$:/core/ui/ControlPanel/Settings/DefaultSidebarTab}}

#71

That’s how things are named in TW world. :joy:
https://tiddlywiki.com/#ColourPalettes

You are assuming rightly, the behaviour is the same if you change these things in the core control panel → Settings.

Button texts
Include text includes the button text in the html, but this text can be visually hidden (!), this is done/undone via the subordinated “show text” option.

There are independent options for tiddler buttons (Tiddler Style tab) and for the rest of the page (Page tab). The latter means mainly the sidebar. So yes: might be a bit confusing, not only for five year old children but also for teenagers and even twens.

Now it is bedtime here in central Europe, so this was it for today. Evenings during the week will be busy, so more updates might have to wait until the weekend.

Good night,
Thomas

#72

Hi all,

Just throwing out an idea.

Maybe we should from the onset create a tab ControlPanel → Appearance → Tix to place default, less intuitive, and dev options? Add/remove ‘Gatha’, ‘Notebook’, ‘Use visibility: hidden; vs display:none;’ kinda stuff. Tix should not only be user friendly but dev friendly too! Already is awesome that can ‘inspect’ an element and know exactly where we are in the document. Which if I understand correctly - is TT’s main point!

I’ll frame that up if you want? After all - not TW rocket science.

Please advise with your ideas.
poc2go

#73

Hi poc2go,

Let’s frame the target groups and solutions for them – I think the developer/user segmentation is essential here. My plan is to publish:

  • A set of plugins: Tix, Stx (already published, the button that takes you to the story top), and one more, probably for the toolbars (Tbx) or maybe only a collection of buttons (Btx). Users will find these on Plugins — Utilities for TiddlyWiki like my other plugins.
  • An overarching theme: Lox containing styles, page design options, sidebar design options, colour palettes and maybe icons … everything for the new Lay-out xperience not contained in the plugins. Users might install it together with all or some of the plugins.
  • A Lox edition: an empty.html single file TiddlyWiki including all the plugins and the theme. Users who want the whole experience will use this as a starting point and import or create their content.
  • The Tix/Lox/… Development Studio Workspace as you see it now in my test/ space – all the raw files before they go into the plugins and the theme. This is the only environment that contains Gatha, all other products will only be published (exported) via Gatha. Developers might use this as a starting point if they want to test stuff or export their own variants via gatha.

Now there is one target group missing here: Advanced users with an understanding of how TiddlyWiki works, how HTML and CSS play together and who would like to use all configuration options Tix and Lox have to offer. What options they should find where is yet to be discussed and suggestions are very welcome. Options that come to my mind:

  • A settings tab on the plugin
  • Theme tweaks in the ControlPanel
  • Advanced settings sections in the sidebar tabs

Gatha will not be there, so that is not an issue. Maybe a remark in the readme tab “This plugin was made with Gatha, find the raw files on …”.

What do you mean with “Notebook”, @poc2go ? What else should be on the advanced level?

Please let me know your thougts.
Thomas

#74

I got to take a few weeks to get up to date with lox, stx , etc. new to me.

Notebook at [[nico/notebook|https://nicolas.petton.fr/tw/notebook.html]] is awesome for the novice TW user - provides a menu bar - ‘hamburger’, search, etc., and always displayed above river.

I got to run …
poc2go

#75

I also second the @poc2go proposal of a Notebook inspired theme or something along the lines of your mobile first Bricks themes (you may remember some suggestion at the beginning of this thread).

Here at our local community (several persons/cities in Colombia and in Cuba) we used a modified version of Projectify for project based learning/teaching of TiddlyWiki. So, being able to use your Tix as a foundation for a mobile first theme with support for Projectify plugin would mean a small community of pretty active users. Also I wonder you Tix can support lateral navigation, like the one you can find in the Notebook powered Study theme (see screenshot below).

I think that Tix developments are so exiting that @poc2go and me are wondering what would be a migration path from the experiences and users we already support with Notebook based themes, to the innovations that Tix is showcasing us.

image
image1014×738 63.9 KB

2 Likes
#76

I dug into this a little more :

Not going to get into it here, beat on it a little more and write it up - even from the ControlPanel is not working the way it used to - the same happens in v5.2.0 empty.html - when saved remains on tab currently selected even on reload.

Maybe this way for a long time. Other than testing I never would have noticed it.

1 Like
#77

That is a pretty awesome set of aims!

I’m not fully up to date on Tix but will try to catch up & comment.

TT

#78

Relating to the ‘Default Sidebar Tab’ issue I discovered.

Submitted as a bug - however, is the expected behavior.

@pmario gives an excellent reply with ways to override the behavior if desired. I’m in favor of removing option from Tix interface.

1 Like
#79

@Offray your doing what we are doing (well, other than yours is Spanish). We send TiddlyWiki around as attachments on emails. The same way we send documents, worksheets, and such. Haven’t had that much luck with web based TiddlyWikis.

Members feel their TWs are ‘Personal Notebooks’. For example one member collects poems and every now and then she sends it out. People reply with poems in the email body that they think she might be interested in. She’s the one that copies, bags, tags and includes it in ‘her’ notebook. Of course, some want to make their own notebook of poems - (and another new user of TiddlyWiki is born).

Were does, or will, Tix play into this. If attaching a worksheet - it is MSExcel, documents are PDF or MSWord. I use Linux frequently, so have to export my LibreOffice stuff into those formats. Why? - so everybody can open and read it - is a standard we use.

TiddlyWikis theme is set to the nico notebook theme before sending. Is a standard for distribution. Many just read it and simpler the interface the better. Tix has readily available options that I think novice members would use while reading.

#80

Kind of. We don’t use emails, and instead we host our wikis in Tiddlyhost and/or ChiselApp, depending on the back end we’re using to store and publish wikis. The first one give us and easy way to publish tiddly wikis without technical knowledge, the second one requires Fossil knowledge (which we integrate as part of a course) and provide us with versioning. In our course we go from TiddlyHost to Chisel App, so our apprentices can enjoy more advantages and they know more, while enjoying TW without a lot of technicalities and in a progressive fashion (particularly regarding publishing).

With the integration of Pharo/GT we’re discussing in another thread, we’re going to automatize more the sharing and collaboration on tiddlers, via interactive documentation powered by Lepiter. In this way, we keep the learning curve accessible and take advantage of local practices and computing resources, while dealing with low/intermittent connectivity. The people running the synchronization would need to bootstrap their interactive computing environment once (Lepiter + Fossil + TW) and, after that, they should enjoy relatively easy collaboration on Tiddlers. We hope to made this procedure even more minimal and integrated as we advance, but that would happen at a really organic rhythm.

I will share our progress over here.

Cheers,