Improve toolbar buttons

[psychemedia]

The current toolbar buttons (A (activity; blue), S (solution; green), L (learner, yellow), T (tutor, pink) are a bit cryptic:

• [x] add tooltips
• [ ] use vector graphics (original empinken used font awesome icons)
• [ ] toggle state of button depending on selected cell tags

via Mark Hall / @mmh352

[mmh352]

I personally like https://pictogrammers.com/library/mdi/ for my icons. https://github.com/scmmmh/jupyterlab-local-browser/blob/default/src/icon.ts for how to include the SVG in an icon for a jupyter widget.

Here a set of suggestions:

Activity: https://pictogrammers.com/library/mdi/icon/text-box-edit-outline/ Solution: https://pictogrammers.com/library/mdi/icon/text-box-check-outline/ Learner: https://pictogrammers.com/library/mdi/icon/account-school/ Tutor: https://pictogrammers.com/library/mdi/icon/human-male-board/

[psychemedia]

@mmh352 do you know how to toggle the backgrounds for when a button is "pressed"?

[mmh352]

Sorry, no idea. I would check the button class to see if there is an attribute or if there is a togglebutton.

[psychemedia]

Toggle icons:

• activity: text-box-edit / text-box-edit-outline
• solution: text-box-check / text-box-check-outline

How about:

• learner: school / school-outline
• tutor: account-school / account-school-outline

I wonder if it might be a bit irritating if the toolbar buttons change as you move between selected cells?

[psychemedia]

Some discussion of handling toolbar button icons / labels here.

[mmh352]

I don't think changing the icon is ideal. I would suggest just adding a CSS class to add a gray background. Ideally you would find a way to set the aria-pressed attribute on the button to "true" and then use that in the CSS to toggle the background colour. That way it would be visible and accessible.

[psychemedia]

To add captions, in the command definition, add the caption attribute:

commands.addCommand(command, {
      label: 'Appears in text command menus',
      caption: 'popup tooltip text',

[psychemedia]

To change the background, when a cell selected event is fired, the button would need to look up the cell tags and then set its state accordingly; the button object would then need changing to modify its HTML class in the rendered button, if that is directly available.

IIRC, the buttons can change tags on all selected cells, so there's need to be a tristate background for cases where some but not all selected cells have a particular tag set.

Claude.ai seems confident... no time to try it right now tho; in case is doesn't just work...!

[psychemedia]

Buttons?

Uses format-quote-close for tutor/feedback and school-outline for student