Ctrl panel layout: Palette and Theme: Title color

[twMat]

Ok, no biggie, but anyway:

Tab Appearence > Palette and Theme

It would simply look better with the palette titles in black, like standard text, instead of blue. At least the informative text next to the actual title.

While it perhaps is a .tc-tiddlylink, it does not behave like a hypertext-link, i.e leading somewhere else. And the only thing a user can do is to click anyway so there is little value in being informed that it is a link code wise.

For Palette, the blue doesn't even make up all of the clickable unit anyway (ie title+colorboxes).

For these reasons I think the aesthetical impression for the user outweighs the argument that it codewise is a link and have it blue or, in the Palette case, partially blue. We may have become accustomed to blue text but "normal people" probably find it as odd as, say, orange text. Again, at least for the informative text next to the actual title.

[pmario]

you should +1 - #1954 ... which unfortunately needs more work since it wasn't merged yet.

[twMat]

you should +1 - #1954 .

Thanks @pmario . That fully handles my OP so closing this issue.

[tobibeer]

@twMat, I gave it another read and I was trying to see what it looks like with black titles. Conclusion: I think there is a "missing link" to get your first requirement it to work properly.. Plus, I tend to agree.

Here's what I don't want: Define some wrapper css class and then style the link classes to appear as if not links.

Here's what I suggest instead: Especially for use cases involving the LinkCatcherWidget, a class parmeter should be introduced for the the LinkWidget that allows to fully overrule the otherwise standard classes being dynamically determined. In other words: It empowers the designer to define their custom class for this (re-)presentation of "titles" to be catched.

@twMat: From my perspective, and to further improve / test this later, you may even want to re-open this.

@Jermolene: Could you assign it to me then?

[twMat]

@Jermolene - I say we give that @tobibeer kid a shot. Just maybe he'll come up with something useful eventually.

[Jermolene]

Hi @tobibeer I'd be delighted if you could take this up. I'm concerned that I don't quite understand your proposed extension to the link widget, can you explain?

(By the way I don't seem to be able to assign the ticket to you, not sure whether that's the slow wifi I'm using).

[tobibeer]

@Jermolene: The link widget determines link classes based on the existence of tiddlers. However, if inside a LinkWidget, we possibly don't want to do any of that. Instead, we either want no class or a defined custom class other than the "tiddler-classes". That way, we can easily style those "switcher" lists, without ever option appearing to be some sort of link to some target.

[pmario]

@twMat ... ControlPanel: Appearence: Palette, Story View and Theme have been updated. .. They are consistent with the "right sidebar: Tools" popups now.

imo can be closed.

[twMat]

@twMat ... ControlPanel: Appearence: Palette, Story View and Theme have been updated. .. They are consistent with the "right sidebar: Tools" popups now.

I'm not sure what you refer to with "right sidebar:Tools popups" (what popups?)

Bit I still hold the view that:

We may have become accustomed to blue text but "normal people" probably find it as odd as, say, orange text.

...and this now holds for all the various 'appearence' tabs, even if they have been much improved. It just ain't purdy with blue text and I don't see why our underlying implementational choice should be (literally) reflected in the UI. Why does the user need to know this is a link when it doesn't in any way behave like a link but, if anything, like a button?

Still, thank you for bringing this out in the new light of the Ctrlpanel style updates.

[pmario]

I'm not sure what you refer to with "right sidebar:Tools popups" (what popups?)

The "right sidebar: Tools tab" has some buttons, that open dropdowns like: palette, theme, storyview. ... Those "dropdown selectors", are styled now in the same way as the "ControlPane: Appearence" elements.

[pmario]

... Why does the user need to know this is a link when it doesn't in any way behave like a link but, if anything, like a button?

In TW links are blue. If you hover them, the link is underlined. Which is common behaviour on most pages in the web.

Those elements are buttons. So they behave like buttons. If you hover them, the background changes. If you click them ... "The action happens".

The selectors are implemented using the <$linkcatcher> and <$link> widgets. The link widget creates html <a> elements. Those elements use the "Global Primary" color from the color palette. For the default theme it's blue-isch.

The whole ControlPanel uses links all over the places, to allow the users fast access to the "underlaying" system tiddlers. For me personally, the blue text is consisten. I didn't even bother tho think about it.

IMO .tc-chooser-item .tc-tiddlylink could be changed, if the blue color is your concern. We (excluding me) would need to test and see, if it has side effects somewhere else. ...

[twMat]

The "right sidebar: Tools tab" has some buttons, that open dropdowns like: palette, theme, storyview. ... Those "dropdown selectors", are styled now in the same way as the "ControlPane: Appearence" elements.

Aha, thank you! Interestingly, those popups - like the whole sidebar - don't have blue links but instead gray ones, which looks good!

IMO .tc-chooser-item .tc-tiddlylink could be changed, if the blue color is your concern. We (excluding me) would need to test and see, if it has side effects somewhere else. ...

Yes, the blue colour is the concern. A serch for tc-chooser-item shows it is only applied to those switchers, so how could it have side effects?

[pmario]

A serch for tc-chooser-item shows it is only applied to those switchers, so how could it have side effects?

If it's only used with them, we should be save to create a PR that changes the settings. ...

But I think "orange" is a no-go ;)

[twMat]

OK, I need some help to create a PR.

These are the only tiddlers applying tc-chooser-item:

1. $:/snippets/languageswitcher
2. $:/snippets/LayoutSwitcher <----- (btw CamelCase)
3. $:/snippets/paletteswitcher
4. $:/snippets/themeswitcher
5. $:/snippets/viewswitcher

AFAICT, all of them are tabs in Ctrlpanel except for the languageswitcher which, if I understand right, appears in the sidebar as a PageControl tool where it is presented in a dropdown - which, interestingly, already has non-blue implemented (.tc-drop-down .tc-chosen .tc-tiddlylink)! It has instead opted for the color <<color foreground>> which is also what I propose for the other switchers. Thus, I want this:

.tc-chooser-item a.tc-tiddlylink {
    color: <<colour foreground>>;
}

...but it is not enough: For some reason, the text is inappropriately bold with an applied a.tc-tiddlylink-shadow. I can't tell where this is applied from (possibly in $:/core/modules/widgets/link.js ). So, in summary, I want to insert this... somewhere... but don't know where or how:

.tc-chooser-item a.tc-tiddlylink {
    color: <<colour foreground>>;
}
.tc-chooser-item a.tc-tiddlylink-shadow {
    font-weight: normal; 
}

Could someone please help?

[pmario]

I would support

At least the informative text next to the actual title.

from your OP. But having the whole text in black won't work for me. ... The elements are links and imo therefore they have to be blue. ... At least the title should be blue, or whatever the palette-link-color is.

The DOM structure atm looks as follows. ... You see we will need to change the different templates, so we can independnetly style the different elements.

---

The tiddler would be: $:/themes/tiddlywiki/vanilla/base near line: 2578 where the Chooser elements are defined. see: https://github.com/Jermolene/TiddlyWiki5/blob/35f7a8ea06cb703ae3209be18cc41688bed5f8fa/themes/tiddlywiki/vanilla/base.tid#L2578

[twMat]

@pmario - OK, leaving that first word blue would at least cause a tad less confusion than all of the sentence in blue...

...but there is a problem:

Here is my attempt with what seems to be the obvious solution - search for xxxx in the stylesheet. But it is not possible to only style the <a> text but not the first <strong> word, given that html structure. Because.

So I'm not sure what to do. Maybe it could work with the overrideClass param in the LinkWidget? This would mean those five switcher tiddlers above have to be modified and an new class defined.

...

BTW, if those switchers were implemented with e.g radio buttons, but the UI appeared identical, would you be fine with regular black text then?

[Jermolene]

BTW, if those switchers were implemented with e.g radio buttons, but the UI appeared identical, would you be fine with regular black text then?

For accessibility reasons, it would be much better to replace all the choosers with appropriately styled radio buttons.

[Jermolene]

I should add that all the shenanigans with the linkcatcher widget is only because the choosers were implemented really early on, when we didn't have the flexibility we have today.