Skip to content

UX: composer toolbar changes (icon, style, placement) #32918

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

UX: composer toolbar changes (icon, style, placement) #32918

wants to merge 5 commits into from
+111 −89

Conversation

renato
Copy link
Contributor

@renato renato commented May 26, 2025 •
edited
Loading

Changes the gear icon for the more menu to a circle-plus icon.

Changes the emoji icon to its outline version, to make it less similar to the circle-plus icon.

Changes the styles (eg. icon sizes) of the toolbar, using a flexbox instead of a grid, with some tweaks and animations to the toggle switch, which occupies a smaller width now.

Removes the gray button-bar bottom border.

Moves the Insert Date/Time item to the more menu, and changes its icon to a clock.

Before, hovering more menu

image

After, hovering more menu

image

@jjaffeux
Copy link
Contributor

@chapoi @jordanvidrine can you give your opinion on these changes?

@renato renato force-pushed the ux_composer_toolbar branch from bf9c808 to 8a34283 Compare May 26, 2025 16:12
@renato
Copy link
Contributor Author

renato commented May 26, 2025 •
edited
Loading

Nothing of this is set on stone (far from it...), please feel free to suggest or improve anything directly!

@renato renato force-pushed the ux_composer_toolbar branch from 8a34283 to aea87bd Compare May 27, 2025 17:22
@renato renato closed this May 27, 2025
@renato renato reopened this May 27, 2025
@jordanvidrine
Copy link
Contributor

I think these changes make sense. I like the removal of the border, along with adding some space between the hover state and edge of the text area.

chapoi
chapoi requested changes May 28, 2025
View reviewed changes
Copy link
Contributor

@chapoi chapoi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good.

Would it be possible to make sure the toggle button is fully included in the toolbar navigation, meaning you can get to it with left-right keys? Currently I can do anything in the toolbar > left key > toggle, but when I try to go to the rest of the toolbar with toggle > right key > … nothing

@renato
Copy link
Contributor Author

renato commented May 28, 2025

Would it be possible to make sure the toggle button is fully included in the toolbar navigation, meaning you can get to it with left-right keys? Currently I can do anything in the toolbar > left key > toggle, but when I try to go to the rest of the toolbar with toggle > right key > … nothing

This is handled here: #32897

@renato
Copy link
Contributor Author

renato commented May 28, 2025 •
edited
Loading

@chapoi I removed those min-width changes, I recall needing them during the floating link toolbar but if for some reason any of that is still needed, I can add to the other PR. I also removed the background – I do like some transition when hovering, but if we change that we should do it in a more general way.

I also reverted the removal of the main editor border, so only the border-bottom of the toolbar is removed – trying to reduce pushback.

LMK what you think. Thanks!

@chapoi
Copy link
Contributor

chapoi commented May 28, 2025

That's all cool with me!

@renato renato requested a review from chapoi May 28, 2025 14:48
@awesomerobot
Copy link
Member

looks good to me, found a couple minor issues...

the shortcut styles seem off here (firefox, macOS)
image

in iOS I'm seeing the text blinking cursor appear over the menu for some reason... not sure why... does the textarea focus need to be removed when the menu is opened or something?
image

@renato
Copy link
Contributor Author

renato commented May 28, 2025 •
edited
Loading

in iOS I'm seeing the text blinking cursor appear over the menu for some reason... not sure why... does the textarea focus need to be removed when the menu is opened or something?

@awesomerobot Probably, but it's an existing issue. I didn't think too much about it yet because I believe our goal is to move this select-kit to a d-menu, but I can look into avoiding it now...

@renato
Copy link
Contributor Author

renato commented May 29, 2025

@awesomerobot I've changed the shortcut's font family and weight (matching our keyboard-shortcuts-help).. as for the caret, I think we can leave it to future us 😬 https://discuss.prosemirror.net/t/ios-safari-does-not-hide-the-caret-on-non-visible-selections-e-g-nodeselection/3024

image

@renato renato force-pushed the ux_composer_toolbar branch from 8713580 to f8840a5 Compare May 30, 2025 02:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chapoi chapoi Awaiting requested review from chapoi

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@renato @jjaffeux @jordanvidrine @chapoi @awesomerobot